/* ============================================================
   Site-wide typography system — single source of truth.

   8 roles. Same shape across every page.

     DISPLAY    page hero (the biggest text on a page)
     SECTION    within-page section headline
     ANCHOR     big serif inside an editorial grid cell
     LEAD       subheadline / large body
     BODY       standard reading copy
     BODY-SM    supporting copy
     META       small mono-caps eyebrow / label
     UI         buttons, nav, wordmark (defined in buttons.css
                + page chrome — included here only as a comment)

   Page-specific stylesheets MUST NOT redefine font / weight /
   size / leading for these roles. They can adjust margins,
   max-width, text-align, opacity for context — never the shape.
   ============================================================ */


/* ---------- DISPLAY: page hero, biggest serif ---------- */
.display-headline,
.manifesto-title {
  font-family: var(--serif); font-weight: 300;
  /* Top cap 108 px matches vertical.css's display-headline so the
     manifesto title and the verticals' H1 read at the same size
     at every viewport width. */
  font-size: clamp(48px, 6.4vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}


/* ---------- SECTION: within a section ---------- */
.display-line,
.cta-headline,
.manifesto-refrain {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 3.8vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------- PULLQUOTE: long-form feature prose set apart ----------
   The manifesto's climactic pullquote is multi-sentence prose,
   not a tight headline. Smaller than SECTION + looser line-height
   so it reads as a feature block, not a display line. */
.pullquote {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}


/* ---------- ANCHOR: big serif inside an editorial cell ----------
   Used by the metrics, the playground states, and the workout modes.
   The dramatic data anchor that makes findings premium — same
   register everywhere a cell needs a visual hook. */
.metric-num,
.state-name,
.mode h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0 0 0.6em;
  color: var(--ink);
  text-wrap: balance;
}


/* ---------- LEAD: subheadline / large body ---------- */
.subhead-stack p,
.subheadline,
.lead {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
}
.lead.soft { opacity: .72; }


/* ---------- BODY: standard reading copy ---------- */
.vp-body,
.manifesto-body,
.state p,
.mode p {
  font-family: var(--serif); font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
}
.state p, .mode p { opacity: .72; max-width: 32ch; }


/* ---------- BODY-SM: supporting copy ---------- */
.metric-label {
  font-family: var(--serif); font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  opacity: .72;
  max-width: 28ch;
}


/* ---------- META: small mono-caps labels / eyebrows ----------
   Same shape across every label slot. Layout (margin / alignment)
   varies by role: in-flow labels (eyebrow / col-label / state-meta)
   sit left-aligned with a small bottom margin; manifesto labels
   (manifesto-label, section-label) sit centred as architectural
   section markers with their own generous margins. */
.eyebrow,
.col-label,
.state-meta,
.manifesto-label,
.section-label {
  font-family: var(--mono); font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}
/* In-flow labels — left-aligned, small bottom margin. */
.eyebrow,
.col-label,
.state-meta { margin: 0 0 1.2em; }

/* Centred architectural labels — manifesto page markers. */
.manifesto-label,
.section-label {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.manifesto-label { margin-top: 0; margin-bottom: 6vh; }
.section-label   { margin-top: 3.5em; margin-bottom: 2.6em; max-width: 420px; }

.eyebrow { opacity: .7; }
.section-label,
.manifesto-label { opacity: .55; }
.col-label,
.state-meta { opacity: .45; }

/* Dark-section variants — text flips to cream so the labels stay
   readable over a dark background. Opacity scale preserved. */
.vp-section.dark .eyebrow,
.vp-hero.dark .eyebrow,
.vp-section.dark .col-label,
.vp-hero.dark .col-label,
.vp-section.dark .state-meta,
.vp-section.dark .section-label,
.vp-section.dark .manifesto-label { color: var(--cream); }
.vp-section.dark .col-label,
.vp-section.dark .state-meta { opacity: .55; }
.vp-section.dark .section-label,
.vp-section.dark .manifesto-label { opacity: .7; }
.vp-section.dark .eyebrow,
.vp-hero.dark .eyebrow { opacity: .8; }

/* Body / lead copy on dark sections also needs cream colour so it
   doesn't disappear. Opacity already provides the soft tone. */
.vp-section.dark .lead,
.vp-section.dark .vp-body,
.vp-section.dark .display-line,
.vp-section.dark .cta-headline { color: var(--cream); }
.vp-section.dark .lead.soft { opacity: .55; }


/* ---------- Italic <em> across all serif type roles ---------- */
.display-headline em,
.manifesto-title em,
.display-line em,
.cta-headline em,
.manifesto-refrain em,
.pullquote em,
.metric-num em,
.state-name em,
.mode h3 em,
.subhead-stack p em,
.subheadline em,
.lead em,
.vp-body em,
.manifesto-body em,
.state p em,
.mode p em,
.metric-label em { font-style: italic; }


/* ---------- Mobile adjustments ----------
   One breakpoint, every type role tightens together. Keeps the
   relative hierarchy intact at small widths. */
@media (max-width: 767px) {
  .display-headline,
  .manifesto-title {
    font-size: clamp(44px, 12vw, 72px);
    line-height: 1.02;
  }
  .display-line,
  .cta-headline,
  .manifesto-refrain {
    font-size: clamp(26px, 7vw, 38px);
    line-height: 1.06;
  }
  .pullquote {
    font-size: clamp(20px, 5vw, 24px);
    line-height: 1.28;
  }
  .metric-num,
  .state-name,
  .mode h3 {
    font-size: clamp(30px, 7.6vw, 42px);
    line-height: 1.04;
  }
  .subhead-stack p,
  .subheadline,
  .lead {
    font-size: 17px;
    line-height: 1.5;
  }
  .vp-body,
  .manifesto-body,
  .state p,
  .mode p {
    font-size: 17px;
    line-height: 1.6;
  }
  .metric-label { font-size: 15px; }
}


/* ---------- Small phones (≤ 480 px) ----------
   Shared DISPLAY size for both .display-headline + .manifesto-title
   matches the verticals' own ≤480 override (clamp 32, 9vw, 44) so
   the manifesto title and the verticals' H1 stay in lock-step at
   the smallest viewports too. */
@media (max-width: 480px) {
  .display-headline,
  .manifesto-title {
    font-size: clamp(40px, 11vw, 56px);
    line-height: 1.02;
  }
}