/* ==========================================================================
   NeoAI type system (routing site)
   Two faces, four roles, no monospace costume.
     display  Source Serif 4  headlines, big figures, the equation
     text     Hanken Grotesk  body, UI, labels, tables, tags
   Mono is retired: this page has no code, so --font-mono resolves to the text
   face. Load after styles.css. Self-hosted, latin subset, variable axes.
   ========================================================================== */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-sans: var(--font-text);
  --font-mono: var(--font-text);

  /* role scale */
  --t-display: clamp(2.5rem, 1.5rem + 3.8vw, 4rem);
  --t-h2: clamp(1.75rem, 1.25rem + 1.7vw, 2.5rem);
  --t-h3: 1.1875rem;
  --t-lead: 1.1875rem;
  --t-body: 1rem;
  --t-small: 0.9375rem;
  --t-label: 0.8125rem;

  /* muted text raised to pass 4.5:1 on the page surfaces */
  --text-muted: #8c9ab0;
}

html { font-size: 16px; }
body {
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 420;               /* light-on-dark: one step heavier, a touch looser */
  letter-spacing: 0.005em;
  font-kerning: normal;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}

h1, h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  color: var(--text-primary);
  text-wrap: balance;
}
h1 { font-size: var(--t-display); line-height: 1.06; letter-spacing: -0.015em; max-width: 19ch; margin-bottom: 24px; }
h2 { font-size: var(--t-h2); line-height: 1.14; letter-spacing: -0.01em; max-width: 26ch; margin-bottom: 16px; }
h3 { font-family: var(--font-text); font-size: var(--t-h3); line-height: 1.3; font-weight: 650; letter-spacing: -0.005em; color: var(--text-primary); }

p { font-size: var(--t-body); line-height: 1.65; max-width: 62ch; text-wrap: pretty; }
.hero p.lead, .section-lead { font-size: var(--t-lead); line-height: 1.6; color: #cbd5e1; max-width: 60ch; font-weight: 420; }
.section-lead { margin-bottom: 4px; }

/* run-in head: names the section's pillar without a label above the heading */
.runin { color: var(--text-primary); font-weight: 650; }

/* figures: serif, lining and tabular so columns of numbers line up */
.stat b, .big, .case-ph b { font-family: var(--font-display); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; }
.meter b, .xcmp-row b, table, .flow-ledger b, #spendV, #usersV { font-variant-numeric: lining-nums tabular-nums; }

/* labels: one role. Sentence case, no tracking, no uppercase. */
.tag, .badge, .st, .xchip, .recipe dt, table.t th, .out small, .step .no, .timeline .when, .attempt .n, .loop-back, .vpc-label, .dial {
  font-family: var(--font-text);
  text-transform: none;
  letter-spacing: 0;
}
.tag { font-size: var(--t-label); font-weight: 600; padding: 1px 8px; border-radius: 4px; line-height: 1.5; }
.badge { font-size: var(--t-label); font-weight: 600; border-radius: 4px; }
.st { font-size: var(--t-label); font-weight: 600; border-radius: 4px; }
.recipe dt, table.t th, .out small { font-size: var(--t-label); font-weight: 600; color: var(--text-secondary); }
.timeline .when, .loop-back, .vpc-label, .attempt .n, .dial, .step .no { font-size: var(--t-label); font-weight: 560; }

/* the cost equation is set as type, not as code */
.equation { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.9; letter-spacing: 0; }
.equation em { font-style: normal; font-weight: 600; }
.equation .down { font-family: var(--font-text); font-size: var(--t-small); color: var(--cyan-glow); }

/* step markers carry sequence, so they stay: serif numerals */
.method div::before { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1; margin-bottom: 8px; }

/* controls and form text inherit the text face */
button, input, select, textarea { font-family: var(--font-text); }
.field-label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0; text-transform: none; }
.btn { font-weight: 600; letter-spacing: 0; }

/* table heads and small print */
.fine, .fineprint { font-size: var(--t-label); line-height: 1.55; }