/* ============================================================
   Typography + editorial layer.
   Structure follows the FLYBRAIN reference: a three-font system
   (serif display / sans body / mono data), a steep type scale,
   uppercase tracked eyebrow labels, and left-aligned editorial
   sections instead of centred marketing blocks.
   Fonts are self-describing fallbacks first so nothing shifts if
   Google Fonts is slow or blocked.
   ============================================================ */

:root {
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Editorial scale. Reference measures 116 / 40 / 11. */
  --fs-display: clamp(46px, 9vw, 116px);
  --fs-h2: clamp(28px, 3.6vw, 40px);
  --fs-h3: 19px;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-eyebrow: 11px;

  --track-eyebrow: .14em;
  --rule: #14211b;
}

body { font-family: var(--font-body); }

/* ---------- display type ---------- */
.hero h1,
.identity h1,
.doc h1,
.section h2,
.doc h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.hero h1 {
  font-size: var(--fs-display);
  line-height: .98;
  letter-spacing: -.01em;
  max-width: 16ch;
  margin: 0 0 20px;
}

.section h2 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  margin: 0 0 10px;
  max-width: 26ch;
}

.identity h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.02; }
.doc h1 { font-size: clamp(32px, 4.5vw, 52px); line-height: 1.04; }
.doc h2 { font-size: 26px; border-bottom: 1px solid var(--rule); }

h3, .card h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ---------- eyebrow labels (the HUD voice) ---------- */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.eyebrow-dot::before {
  content: "\25CF";
  color: var(--accent);
  margin-right: 7px;
  font-size: 9px;
  vertical-align: 1px;
}

/* ---------- editorial alignment ---------- */
/* The reference never centres a content section; it reads as a document.
   style.css ships `.section h2{text-align:center}` at equal specificity and
   loads first, so these selectors are deliberately one notch heavier. */
.hero, .section { text-align: left; }
main .section h2,
main .section .sub,
.identity { text-align: left; }
.hero h1, .hero p.lede, .section h2, .section .sub { margin-left: 0; margin-right: 0; }
.hero p.lede {
  font-size: 17px;
  line-height: 1.6;
  max-width: 58ch;
  color: var(--muted);
  margin: 0 0 26px;
}
.section .sub {
  text-align: left;
  max-width: 62ch;
  margin: 0 0 26px;
  line-height: 1.6;
}

/* A hairline rule under each section heading, like a printed spec sheet. */
.section > h2 + .sub { padding-bottom: 18px; border-bottom: 1px solid var(--rule); }

/* ---------- data voice: every number is mono ---------- */
table, .addr, code, .metric-value, .stat-value,
.num, td.num, th.num, .trend-read, .market-summary dd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
th {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--muted);
}
.market-summary dt { font-family: var(--font-mono); letter-spacing: var(--track-eyebrow); }
.market-summary dd { font-size: 17px; }

/* ---------- hero framing ---------- */
.hero {
  position: relative;
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}

/* Corner HUD strip: specimen-sheet framing from the reference. */
.hud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0 0 34px;
}
.hud span { white-space: nowrap; }
.hud b { color: var(--ink); font-weight: 400; }

/* ---------- section rhythm ---------- */
.section { padding: 54px 0; border-top: 1px solid var(--rule); }
.section:first-of-type { border-top: 0; }

/* ---------- brand ---------- */
.brand {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

/* ---------- mobile ---------- */
@media (max-width: 560px) {
  .hero { padding: 34px 0 28px; }
  .hero h1 { max-width: 100%; }
  .section { padding: 38px 0; }
  .hud { gap: 8px 16px; }
}