/* SHARED·WEEKHERO (426) — the week read's hero head + continuous headline. (locked chrome
 * · D-430 · D-739)
 *
 * EXTRACTED 2026-08-20 from the live 502 read (web/css/cards/weeks/read.css) — Phase 2
 * block 7 of cc-wb-cascade-and-weeks-extract, the biggest block, done second-to-last as
 * the amendment orders. Values VERBATIM; the class map:
 *   .wkr-head → .whd · .wkr-navrow → .whd .navrow · .wkr-hstep → .whd-step ·
 *   .wkr-num → .whd .num · .wkr-weeks → .whd .weeks · .wkr-phase → .whd .phase ·
 *   .wkr-readtime → .whd-readtime · .wkr-headline → .whd-headline (.fs kept)
 * The wired hooks (.whd-step, .whd-readtime, .whd-headline) keep whd-prefixed names so
 * read.wire.js / week-read.js query something unmistakable; static inner parts scope
 * under .whd. TRUST (423) and SEG (425) are SLOTS — the caller passes their rendered
 * html; this component draws none of them. */
.whd { text-align: center; padding-top: var(--space-12); }
.whd .navrow { display: flex; align-items: center; justify-content: center; gap: var(--space-16); }
/* hero week chevrons — mirrors the locked home-hero stepper (.wkhero-step, D-430) */
.whd-step { width: var(--dim-44); height: var(--dim-44); flex: none; display: grid; place-items: center; background: var(--surface-ground); color: var(--nav-active); border: 1px solid var(--border-hairline); border-radius: var(--radius-round); cursor: pointer; } /* token-exception */
.whd-step svg { width: var(--dim-16); height: var(--dim-16); display: block; }
.whd-step:active { background: var(--surface-card-hover); }
.whd-step:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.whd-step:disabled { opacity: 0.4; cursor: default; }
.whd .num { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--size-60); line-height: var(--leading-100); color: var(--nav-active); letter-spacing: var(--tracking-neg-015); } /* token-exception */ /* display numeral — D-739 carve-out territory */
/* the week eyebrow — label register (finalisation: label-grey, the teal lives on the numeral + trust line) */
.whd .weeks { font-family: var(--font-label); font-size: var(--text-body-sm); font-weight: var(--weight-600); letter-spacing: var(--tracking-14); text-transform: uppercase; color: var(--text-secondary); margin-top: var(--space-4); }
.whd .phase { font-family: var(--font-display); font-weight: var(--weight-500); font-size: var(--text-body); color: var(--text-primary); margin-top: var(--space-8); }
.whd-readtime { font-family: var(--font-label); font-size: var(--text-body-sm); color: var(--text-secondary); max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--duration-300) var(--ease-standard), opacity var(--duration-200) var(--ease-standard), margin var(--duration-300) var(--ease-standard); }
/* --dim-28, not --space-28: the reveal ceiling is a SIZE (check 23) — the source's space
   token was read.css's one grandfathered off-grid debt; same 28px, now the right kind */
.whd-readtime.show { max-height: var(--dim-28); opacity: 1; margin-top: var(--space-12); }

/* the CONTINUOUS headline (locked) — the title's final full stop is teal. margin-bottom:0 —
   the h1 UA default (0.67em) was collapsing over .wkr-stand and setting the gap. */
.whd-headline { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--size-28); line-height: var(--leading-115); text-align: left; margin-top: var(--space-20); margin-bottom: 0; } /* token-exception */ /* 28 display — the D-739 ladder's top step */
.whd-headline .fs { color: var(--brand); }