/* ============================================================================
   typography.css
   Fraunces (variable serif) for display.
   Inter (variable sans, ss01 + cv11) for body — designed to help older readers.
   IBM Plex Mono for small system labels.
   Body 18px / 1.6 leading / 65ch measure.
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 700; /* Fraunces 700, not 900 — softer authority */
  letter-spacing: -0.012em;
  line-height: var(--lh-display);
  color: var(--ink);
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
h5 { font-size: 1.0625rem; letter-spacing: 0.04em; font-weight: 600; }

p {
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink);
  max-width: var(--measure);
}

.lede {
  font-family: var(--f-body);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: var(--measure);
  font-weight: 400;
}

.kicker, .label, .micro {
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-text);
  font-weight: 600;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  display: inline-block;
}

.mono { font-family: var(--f-mono); }

/* utility colors */
.t-ink { color: var(--ink); }
.t-mute { color: var(--ink-2); }
.t-navy { color: var(--navy); }
.t-terracotta { color: var(--terracotta-text); }
.t-gold { color: var(--gold-text); }
.t-forest { color: var(--forest-text); }
.t-paper { color: var(--paper); }

/* big display sizes for hero overrides */
.display-xl {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: -0.018em;
}
.display-xxl {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(3rem, 2rem + 4.5vw, 5.5rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

/* number proof emphasis */
.proof-num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 2rem + 2.4vw, 4rem);
  line-height: 1;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* prose container */
.prose { max-width: var(--measure); }
.prose-sm { max-width: var(--measure-sm); }
.prose-lg { max-width: var(--measure-lg); }
.prose p + p { margin-top: var(--s4); }
.prose p + h2,
.prose p + h3 { margin-top: var(--s7); }

/* underline links inside prose stay visible */
.prose a {
  color: var(--terracotta-text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

/* small caps for distinguished labels */
.small-caps {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}