/* pn-type-cabinet-20260912.css — TYPE CABINET: one headline face, game-wide.
   =============================================================================================
   CEO RULING, 12 Sep 2026 (verbatim): "I like this typography from Dave — apply it for all your
   in-game headlines." Dave's reference is the racer cabinet (`web/racer.html`, "Westbound" /
   "Sunset Strip, golden hour to neon") — the ONE surface where the SST's own locked type spec
   (`design/STYLE_SOURCE_OF_TRUTH.md` §2: "Display / UI: Inter … lean on 900 black") was actually
   built as written. The measured spec is recorded in full, with getComputedStyle values, in
   `design/TYPE_CABINET_2026-09-12.md` — this file is that spec's CSS, nothing invented here.

   WHAT THIS REPLACES. `pn-final-20260820.css` §26 ("headings take the display face, game-wide")
   put every in-game h1/h2/h3 (plus the named non-heading titles) onto 'Space Grotesk' at
   !important. That was itself a correct INSTINCT — "a heading is a heading everywhere" — on the
   wrong face: Space Grotesk was never in the SST, Inter always was. Loaded LAST and at equal-or-
   higher specificity (same selector list, `html body …`, all `!important`) so it wins the
   cascade without touching or duplicating that file's rule — §26 stays as the place that
   documents WHY a heading is a heading everywhere; this file is only WHICH face that heading gets.

   SCOPE — every in-game headline, dark and light: floor masthead h1 (`.mvc-h1.perf-hero-h1`,
   "THE KNIVES ARE OUT." is this element, set by script-01.js `founderHero()`), `.shead h2`,
   `.hcrown h3`, `.board .say h2`, `.vv-mast h2` (Vault/Basket/Top-up), `.vc-head`, the Season
   hero + finale card (`h2` inside `.s1-finale*`, "THE CLIMB" / "THE FINALE"), The Desk window
   title (`.desk-hd b` — NOT a heading tag, added explicitly below), the Duff (`duff.html` h2/h3),
   the pitch-beat window headline (`.pn-fwin .bop h2/h3`, `.wr-mh-title`), the WahWahs stage
   titles (`.ww-hero-h`, `.ww-state-h`, `.ww-arrival-h`, `.ww-title`), the PRESENT screen
   (`.pn-stgseal-n` + any h1/h2 on that view — generic catch-all covers it). `clearance.html` and
   `web/type-options.html` are standalone pages that never load the game shell (no play.html CSS,
   own `.g-h`/demo classes) — out of scope per the brief's own "if they are in the game shell"
   condition; there is no separate `admissions.html`, the gated-waves logic is a play.html module
   and its screens are ordinary game headings already covered by the catch-all below.

   Body copy is untouched — IS (Instrument Sans) stays IS, nothing here touches `p`/`.muted`/
   `[class*="-sub"]`/`[class*="-body"]`. Mono eyebrows (`.tac-eyebrow`, `[class*="-k"]`,
   `[class*="eyebrow"]`) keep JB untouched too — this file only reasserts them at equal
   specificity so a later, unrelated sheet cannot silently reclaim the display face for them.
   Tabular numerals are untouched — no rule here names `.mvc-num`, `.n`, or `--num`.
   ============================================================================================= */

/* ⛔ TYPE SWEEP 2026-09-19 (coordinator finding): play.html never once @font-face'd Inter — only
   IS, JetBrains Mono, PN Vault Voice and Material Symbols are loaded anywhere in the play CSS
   chain. `--pn-type-face: Inter` therefore fell straight through every browser's font-matching to
   the DEVICE system font (SF Pro on iOS, Segoe UI on Windows) — every "Inter 900" heading in this
   whole sweep was rendering in whatever font the visitor's OS ships, not the SST's locked face.
   font_guard caught it ("Inter … do not render") because nothing here ever declared it loadable.
   Self-hosted, same five cuts and same file paths brand-book.html already proves live (L33-37),
   path adjusted for this file's depth (web/assets/css/play/ → web/assets/fonts/ is ../../fonts/). */
@font-face{font-family:'Inter';src:url('../../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../../fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../../fonts/inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../../fonts/inter-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../../fonts/inter-900-i.woff2') format('woff2');font-weight:900;font-style:italic;font-display:swap}

:root{
  /* ── the one face, every weight the SST names ── */
  --pn-type-face: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pn-type-mono: 'JB', ui-monospace, 'JetBrains Mono', monospace;

  /* ── the locked tracking/leading, lifted verbatim from the racer's measured `.ov h1`/`.sub` ── */
  --pn-type-tracking:-.03em;
  --pn-type-leading-hero: .9;
  --pn-type-leading-tight: 1.03;
  --pn-eyebrow-tracking: .24em;

  /* ── three sizes, one scale. HERO = the racer's own `.ov h1` clamp, verbatim (the CEO already
     approved this exact number). SECTION/WINDOW step down geometrically so the hierarchy reads
     as one family, not three unrelated choices. ── */
  --pn-type-hero:    clamp(34px, 7vw,   88px);
  --pn-type-section: clamp(22px, 3.4vw, 40px);
  --pn-type-window:  clamp(17px, 2vw,   25px);
}

/* ── HERO tier — the floor masthead + any full-bleed room title ─────────────────────────────
   `.mvc-h1.perf-hero-h1` carries the founder-week headline ("THE KNIVES ARE OUT." et al.); the
   arcade/room mastheads (`.fl-mast h1`) and the onboarding/ceremony full-screen beats
   (`.onb-headline`, `.ww-title`) are the same rhetorical move — one big committed statement —
   so they share the top of the scale.

   MEASURED REGRESSION, fixed here: `style-01.css:9269`
   (`body[data-view="office"] .pn-vibe-row .perf-hero-h1{font-size:clamp(30px,3.4vw,46px)
   !important}`) sits at specificity (0,3,1) — one class higher than
   `html body .mvc-h1.perf-hero-h1` (0,2,2) — so it kept winning the SIZE even after this file
   (loaded later) had already won the FACE. Measured live: 46px/30px (style-01's clamp), not this
   file's 88px/34px hero clamp — see design/TYPE_CABINET_2026-09-12.md. Fixed by matching that
   selector's own specificity exactly, so cascade order (this file loads after style-01.css)
   decides it instead. */
html body .mvc-h1.perf-hero-h1,
html body .fl-mast h1,
html body .fl-mast--room h1,
html body .onb-headline,
html body .ww-title,
html body .navbar h1,
body[data-view="office"] .pn-vibe-row .perf-hero-h1,
body.mvc-light[data-view="office"] .pn-vibe-row .perf-hero-h1,
/* the Vault storefront's own masthead ("THE VAULT", `h1.pn-display` — not `.vv-mast h2`, which
   is the smaller sub-window header inside Basket/Top-up/Receipt). Same regression class as
   perf-hero-h1: `style-01.css:7410` sets this selector's font-size to clamp(40px,7vw,84px)
   WITHOUT !important, so this file's generic h1 catch-all (17-25px, no per-selector match) was
   silently shrinking a hero-scale masthead to window-tier size. Matched here at hero scale
   instead — 84px and this file's 88px hero clamp are close enough that nothing about the
   Vault's own composition needed to change. */
body[data-view="store"] .pn-store-mast .pn-display,
body[data-view="pass"] .pn-store-mast .pn-display{
  font-family: var(--pn-type-face) !important;
  font-weight: 900 !important;
  font-size: var(--pn-type-hero) !important;
  line-height: var(--pn-type-leading-hero) !important;
  letter-spacing: var(--pn-type-tracking) !important;
  text-wrap: balance;
}

/* ── SECTION tier — `.shead h2`, `.hcrown h3`, `.board .say h2`, the Vault masthead, the
   Season-hero/finale card, the WahWahs pre-ceremony hero + arrival line, verdict heads ── */
html body .shead h2,
html body .hcrown h3,
html body .board .say h2,
html body .vv-mast h2,
html body .vc-head,
html body .ww-hero-h,
html body .ww-arrival-h,
html body .rv-brand, html body .pn-review .rv-brand,
html body .t100-ovr b, html body .sqd-read > b{
  font-family: var(--pn-type-face) !important;
  font-weight: 800 !important;
  font-size: var(--pn-type-section) !important;
  line-height: var(--pn-type-leading-tight) !important;
  letter-spacing: var(--pn-type-tracking) !important;
  text-transform: none !important;   /* the old IS treatment skewed + uppercased; the SST face carries its own weight, it doesn't need the shout */
  transform: none !important;         /* drop the -9deg skew that came with the retired IS treatment */
  text-wrap: balance;
}

/* ── WINDOW tier — The Desk's title (a `<b>`, not a heading — the one non-heading target named
   in the brief), the pitch-beat window headline, WahWahs in-ceremony state head, .mt-title,
   .bop-ask and every other generic h1/h2/h3 the game prints inside a modal/window/card ── */
html body .desk-hd > b,
html body .pn-fwin .bop h2,
html body .pn-fwin .bop h3,
html body .pn-fwin .wr-mh-title,
html body .ww-state-h,
html body .mt-title,
html body .tm-h,
html body h1, html body h2, html body h3,
html body [class*="-title"]:not(p):not(span[class*="sub"]),
html body [class*="headline"]:not(p){
  font-family: var(--pn-type-face) !important;
  font-weight: 900 !important; /* §5g-ii (Jon, 2026-09-19): every heading and subheading is Inter 900 — was 700 */
  font-size: var(--pn-type-window) !important;
  line-height: var(--pn-type-leading-tight) !important;
  letter-spacing: var(--pn-type-tracking) !important;
  /* B5 TYPOGRAPHY RULING (Jon, 2026-09-19): "'Performance is Everything' is the DEFAULT font for
     ALL in-game headlines… the 'THE CLIMB' style headline is now FORBIDDEN" — caps + condensed/
     italic + two-tone accent-word splits on in-game section titles. This tier's font-family/weight
     already came from the hero treatment; it never reset text-transform/font-style, so every plain
     h1/h2/h3 in the game (this is the catch-all — THE CLIMB, NEXT RUNG, etc. all land here, not the
     named SECTION-tier list above) was still inheriting style-01.css's bare `h2{text-transform:
     uppercase;font-style:italic}` — the exact FORBIDDEN look, game-wide, from one un-set property.
     Killing it here, once, beats re-editing every headline site. Eyebrows keep their own explicit
     `text-transform:uppercase` two rules down — this does not touch them. */
  text-transform: none !important;
  font-style: normal !important;
}
/* the HERO/SECTION selectors above are more specific than this generic h1/h2/h3 sweep, so they
   win where they overlap (e.g. `.fl-mast h1` beats the bare `h1` rule on specificity, same
   !important tier, same source) — the generic rule exists to catch everything this file's
   author did not name explicitly, which is the whole point of "a heading is a heading". */

/* CONTRAST FIX, found by this pass's own pixel-sampled proof (design/type-cabinet-2026-09-12/
   contrast.json), not a pre-existing ticket: `.lg-tb-title` (pn-glass.css) was styled as a small
   12px MONO LABEL at `rgba(234,241,251,.62)` dark / `#8a7a63` light — both fine for a dim
   secondary label, both measured BELOW 4.5:1 (3.66-4.22:1) once this file promotes the same
   element to a real window-tier HEADLINE (17-25px, 700). Bumping only `.lg-tb-title`'s ink, not
   the shared `--lg-tb-ink` token other (still label-sized) consumers read, so nothing else
   changes: dark alpha .62->.8 (->~5.4:1 measured), light swapped to the existing
   `--lg-ink-dim` warm-taupe token already used for secondary text elsewhere in this system
   (->~5.3:1 measured) rather than inventing a new colour. */
html body .lg-tb-title{ color: rgba(234,241,251,.8) !important; }
html body .lg-light .lg-tb-title{ color: var(--lg-ink-dim, #6d6154) !important; }

/* ── explicit re-exclusions — data stays data, prose stays prose, eyebrows stay mono ──────────
   Restated at equal specificity+importance to this file so nothing in here can, by source-order
   accident, out-rank pn-final-20260820.css §26's own exclusions for these same roles. */
html body h1[class*="mono"], html body h2[class*="mono"], html body h3[class*="mono"],
html body .tac-eyebrow, html body [class*="-k"], html body [class*="eyebrow"]{
  font-family: var(--pn-type-mono) !important;
  font-weight: 700 !important;
  letter-spacing: var(--pn-eyebrow-tracking) !important;
  text-transform: uppercase !important;
}
html body p, html body li, html body .muted, html body .small,
html body [class*="-sub"]:not(.perf-hero-eyebrow), html body [class*="-body"], html body [class*="-note"]{
  font-family: IS, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

@media (max-width: 480px){
  /* the hero clamp already floors at 34px; on a 390px shell that is still the biggest object on
     screen and balances fine — no override needed. Section/window tiers are fluid by clamp()
     already. This block exists so the rule is stated, not left to be assumed untested. */
}