/* ══════════════════════════════════════════════════════════════════════════════════════════
   02 · BUILD — THE MASTHEAD REEL CAN NEVER PAINT BLACK (CEO, launch weekend 2026-09-19)
   ------------------------------------------------------------------------------------------
   CEO screenshot, case file #170 (Crispco): under `02 | BUILD` and `CASE FILE #170`, a tall
   empty black banner before `Crispco | PITCH`. "empty panels on pitches."

   WHAT THE BANNER IS — measured, not guessed. It is `.wr-masthead` (warMastheadHTML, script-01
   .js): a clamp(182px,25vw,286px) cover with THREE layers — the sector photograph as
   background-image (assets/sectors/fmcg_2.jpg for Crispco, fetches 200), an autoplaying
   `<video class="wr-mh-reel">` from the warroom pool laid over it at inset:0, and the
   `.wr-mh-grad` scrim over both. The photo is fine. The video is the black:
     · every clip in assets/video/review/warroom_*.mp4 opens on a black ident card — luma
       sampled with ffmpeg across three clips: 20/255 at 0s, 25 at 0.5s, 36 at 1-2s, footage
       only from ~2.5s; and closes on another black card from ~17.5s to 19.8s;
     · the header rewound it to 0 on mouseenter and PAUSED it on mouseleave, so the reel sat
       frozen on that card the moment the cursor crossed the banner; with autoplay blocked
       (Safari low-power, background tab) it never left frame 0 at all;
     · `preload="metadata"` meant nothing was decoded until play, so the first paint was the
       black poster-less element.
   In this repo's headless Chromium (no H.264 decoder) the video never decodes and the photo
   shows through — which is why the fault does not reproduce in the QA harness and had survived.

   THE FIX. The photograph is the guaranteed floor; the reel is a progressive enhancement that
   is INVISIBLE until it is genuinely playing footage:
     · script-01.js warMastheadHTML(): no hover rewind/pause; `preload="auto"`; on
       loadedmetadata it seeks to 2.6s (past the ident card); on `playing` the masthead gets
       `.is-live`; on `pause`/`error` it loses it; a timeupdate guard loops it back to 2.6s
       before the outro card, so the black never comes round again;
     · here: the reel is opacity 0 until `.is-live`, cross-fades in over the photo, and is
       removed entirely under prefers-reduced-motion (the still stands on its own).
   No gradient added, no scrim changed, no height changed — the picture that was always
   underneath is simply allowed to be seen.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
html body .wr-masthead .wr-mh-reel{
  opacity:0 !important;
  transition:opacity .7s ease;
}
html body .wr-masthead.is-live .wr-mh-reel{ opacity:1 !important; }
@media (prefers-reduced-motion:reduce){
  html body .wr-masthead .wr-mh-reel{ display:none !important; }
}

/* ── the title on the cover — seen on the same render ──────────────────────────────────────
   `.wr-mh-name` was rendering Inter 900 ITALIC (pn-pitch-flow-20260919.css:613 sets face,
   weight and tracking but never font-style, so style-01's italic came through). The 900-italic
   is PROMO/SOCIAL only and must never appear in the game. Upright, here, on the masthead only.
   The stage seal's numeral ("02") on the same cover had the same italic. And in the LIGHT theme
   the name took the page's dark ink on a dark photograph (measured at 390: the word vanished
   into the produce) — a cover is a dark object in both themes; its ink stays light. */
html body .wr-masthead .wr-mh-name,
html body .wr-masthead .wr-mh-top .pn-stgseal-n{ font-style:normal !important; }
html body.mvc-light .wr-masthead .wr-mh-name,
html body.mvc-light .wr-masthead .wr-mh-name .wr-mh-kind,
html body.mvc-light .wr-masthead .wr-mh-meta{ color:#fff !important; }