/* ============================================================
   FIGUEROA — LOGOTYPE (pure CSS, vector-crisp, recolorable)
   Recreation of the brand mark: Playfair "FIGUEROA" + Barlow
   spaced caps "ALEJANDRO" / "FERRAMENTA" with flanking rules.
   Scale the whole lockup by setting font-size on .logotype.
   Color follows `color` (currentColor) — defaults to cream.
   ============================================================ */

.logotype {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  color: var(--white);
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  font-size: 64px; /* overall size knob */
}

/* FIGUEROA — serif display */
.logotype__main {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1em;
  letter-spacing: 0.005em;
  line-height: 0.82;
  white-space: nowrap;
}

/* full-width rule under FIGUEROA */
.logotype__rule {
  height: 0.05em;
  background: currentColor;
  margin: 0.11em 0 0.10em;
}

/* ALEJANDRO row — word flanked by rule segments */
.logotype__mid {
  display: flex;
  align-items: center;
  gap: 0.18em;
}
.logotype__mid .seg {
  flex: 1;
  height: 0.032em;
  background: currentColor;
}
.logotype__sub {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.30em;
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* keep optically centered despite tracking */
  white-space: nowrap;
}

/* FERRAMENTA — tagline */
.logotype__tag {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.205em;
  letter-spacing: 0.56em;
  text-indent: 0.56em;
  margin-top: 0.42em;
  white-space: nowrap;
}

/* ---- accent variant: red rules + red dot ---- */
.logotype--accent .logotype__rule,
.logotype--accent .logotype__mid .seg { background: var(--red); }
.logotype--accent .logotype__main::after { content: "."; color: var(--red); }

/* ---- compact horizontal lockup (nav) ---- */
.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.logo-lockup__mono {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.logo-lockup__mono b { color: var(--red); }
.logo-lockup__stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.logo-lockup__stack .a {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.30em;
  text-indent: 0.30em;
  color: var(--white);
}
.logo-lockup__stack .b {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--grey);
}

/* ---- monogram badge (favicon / app icon) ---- */
.logo-badge {
  width: 1em; height: 1em;
  font-size: 96px;
  display: grid;
  place-items: center;
  background: var(--black);
  border: 1px solid var(--line);
  position: relative;
}
.logo-badge__f {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 0.62em;
  line-height: 1;
  color: var(--white);
}
.logo-badge__f b { color: var(--red); }
.logo-badge--red { background: var(--red); border-color: var(--red); }
.logo-badge--red .logo-badge__f { color: var(--white); }
.logo-badge--red .logo-badge__f b { color: var(--black); }