/* PORTRAIT·HERO — section hero card · SINGLE SOURCE OF TRUTH.
 * Tokens only (D-421). Extracted from workbench/portrait/_shared/portrait.css
 * 2026-09-04 (card-build 714). Class prefix: pth-*. Mirror-checked against the
 * H3 mount of workbench/portrait/_bakeoffs/hero.html (the chosen hero; H1/H2/H4
 * are road not taken per REPORT-507). NO CTA — the H3 hero is "no add in the
 * hero" by ruling; she is asked to add at the foot of a week or an area, not
 * at the top of the landing.
 * ⭐ AGE-KEYED, NEVER DATA-KEYED: nothing about how much she has put in may
 * touch this block. The surface-card bg (NOT --surface-hero / --green-900 —
 * that token is Home's, bespoke to 102) keeps the hero on the ground.
 * ⭐ SIZES RIDE THE ROLE LADDER (D-463, check 25 — web/css is role-token only):
 *   label 11 · display-sm 28 · standfirst 16. The kept source's --size-26
 *   headline and --size-15 intro are not on the ladder; the card lands them on
 *   the nearest roles (28 / 16), the same ones the sibling display headlines
 *   carry (cards/phase/landing.css .phl-title, cards/shared/loop.css .loop-h). */

/* ── Root ────────────────────────────────────────────────────────────────── */
.pth {
  background: var(--surface-card);
  border-radius: var(--radius-card-lg);
  padding: var(--space-24) var(--space-20);
  margin-bottom: var(--space-20);
  /* The card is its own paint — no need to inherit page background. */
}

/* ── Eyebrow ────────────────────────────────────────────────────────────── */
.pth-e {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--weight-700);
  letter-spacing: var(--tracking-12);
  text-transform: uppercase;
  /* --accent-hover is the eyebrow colour 440 SHARED·TOOLTOPBAR's pin 9 already
     fixed for the same label on the same card bg: --accent (--teal-600) measures
     4.23:1 at 11px — under the 4.5:1 floor — and --accent-hover (--teal-700)
     clears it at 5.82:1. One deviation, one vocabulary, both cards. */
  color: var(--accent-hover);
  margin: 0 0 var(--space-8);
  /* Reset default block margins on the <p> — the eyebrow owns its own rhythm. */
  display: block;
}

/* ── Headline ───────────────────────────────────────────────────────────── */
.pth-t {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-600);
  line-height: var(--leading-115);
  color: var(--text-primary);
  margin: 0 0 var(--space-12);
  display: block;
  /* `Paint a picture of {name}.` can carry a long name — the headline is the
     one place a longer-than-average name has to land. word-wrap is the default
     (the browser's normal overflow-wrap), but opt into break-word so a single
     very long token doesn't push the column past the card. */
  overflow-wrap: anywhere;
}

/* ── Intro ──────────────────────────────────────────────────────────────── */
.pth-s {
  font-family: var(--font-body);
  font-size: var(--text-standfirst);
  line-height: var(--leading-150);
  color: var(--text-secondary);
  margin: 0;
  display: block;
  /* The standfirst rides the standfirst role, which sits AT body (16) — never
     below it (tokens.css). ~130 characters wraps the column, never the cell —
     the same default behavior as the eyebrow and the headline. */
}

/* ── Source anchor ──────────────────────────────────────────────────────── */
.pth-f {
  font-family: var(--font-label);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-05);
  color: var(--text-secondary);
  margin: var(--space-12) 0 0;
  display: block;
  /* The anchor names the ORIGINALS, never us. Same rule as the evidence
     footrow: we write the sentence, the citation names Kind en Gezin, ONE,
     WHO. The line sits 12px below the intro — the small gap that lets the
     intro read as a paragraph and the anchor read as a citation. */
}