/* ============================================================
   CROWN & CORE - TYPOGRAPHY
   ============================================================ */

/* ---- On-dark text treatment ----
   .section--dark is not the only charcoal surface: .hero, .page-hero and
   .cta-band are too, and they carry no .section--dark class. Any on-dark rule
   must list all four or those surfaces silently fall back to the light-background
   inks - which is how the hero eyebrow ended up at 2.05:1 and the hero lede at
   2.88:1 against charcoal, both below the WCAG AA 4.5:1 floor. */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-text);
}

:is(.section--dark, .hero, .page-hero, .cta-band) .eyebrow { color: var(--accent-bright); }

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.h-display {
  font-size: var(--fs-4xl);
  letter-spacing: -0.01em;
}

.h-1 { font-size: var(--fs-3xl); }
.h-2 { font-size: var(--fs-2xl); }
.h-3 { font-size: var(--fs-xl); }
.h-4 {
  font-size: var(--fs-md);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.lede {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
  max-width: 46ch;
}

:is(.section--dark, .hero, .page-hero, .cta-band) .lede { color: var(--paper-text-muted); }

.serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--accent-text);
}

:is(.section--dark, .hero, .page-hero, .cta-band, .site-footer) .serif-italic { color: var(--accent-bright); }

.text-muted { color: var(--ink-muted); }
:is(.section--dark, .hero, .page-hero, .cta-band, .site-footer) .text-muted { color: var(--paper-text-muted); }

.text-center { text-align: center; }

.cap-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.rule-accent {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border: none;
  margin: var(--space-4) 0;
}
.text-center .rule-accent { margin-inline: auto; }