/* ============================================================================
   typography.css — the type system carries the personality
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); font-weight: var(--fw-x); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); font-weight: var(--fw-semi); }
h4 { font-size: var(--fs-lg); font-weight: var(--fw-semi); }

p { text-wrap: pretty; }

/* Eyebrow — small uppercase label used above section titles.
   Structural device that encodes "what kind of section this is". */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

/* Lead paragraph */
.lead,
.hero__lead,
.page-hero__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* Answer-first paragraph on the home page (the extractable definition) */
.lead-answer {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

/* Reading column for article/prose content */
.prose-narrow { max-width: 68ch; margin-inline: auto; }
.prose-narrow p { color: var(--color-text-muted); }
.prose-narrow p + p { margin-top: var(--space-4); }

/* Utility text styles */
.muted { color: var(--color-text-muted); }
.dim   { color: var(--color-text-subtle); }
.mono  { font-family: var(--font-mono); }

a.text-link {
  color: var(--color-primary);
  font-weight: var(--fw-medium);
}
a.text-link:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 3px; }

/* Per-locale font tuning: Thai + Chinese read better with their own faces
   promoted to the front of the stack. */
:root[lang="th"] body { font-family: 'IBM Plex Sans Thai', 'Inter', sans-serif; }
:root[lang="zh"] body { font-family: 'Noto Sans SC', 'Inter', sans-serif; }
:root[lang="th"] h1, :root[lang="th"] h2, :root[lang="th"] h3, :root[lang="th"] h4 { letter-spacing: 0; line-height: 1.3; }
:root[lang="zh"] h1, :root[lang="zh"] h2, :root[lang="zh"] h3, :root[lang="zh"] h4 { letter-spacing: 0; }