/* ============================================================================ Storyboard viewer — shared editorial "proof plate" + expand-to-inspect lightbox for the Boss Taylor explainer storyboards. One implementation, used by every public page. Do not fork this per page. Colour note: every custom property below carries an explicit fallback. This file is loaded on nine pages with different :root token sets, and an undefined var() resolves to nothing — which silently renders transparent. Fallbacks are not belt-and-braces here, they are the contract. REVIEW-2026-07-26 Site-H1 REJECTED-by-design: the cache-bust token on this file is guard-enforced, not hand-maintained, so a hash/token mismatch read out of a stale tree is not evidence of live drift. The 62nd-pass review filed drift on the premise that this file was an uncommitted rewrite hashing to cefb3212 while five pages linked 0906c112. Neither number was current: the rewrite had already shipped in b7ef0431, the working tree was clean against HEAD, and all five pages linked the correct token. 0906c112 is the PRE-restamp value from 11e11a37 — the reviewer read that commit's historical guard warning as present state. The design assumption this rejection rests on: .claude/hooks/check-frontend-changes.sh recomputes this file's md5 on every Stop and reports any page whose ?v= token disagrees, so the token cannot silently drift across a session boundary — the guard, not a ledger row, is the mechanism. Verify current state by running that hook (exit 0 + no CACHE-BUST DRIFT line) before filing token drift again. ========================================================================= */ /* ── The plate (inline state) ─────────────────────────────────────────── */ /* ── The wrapper ─────────────────────────────────────────────────────────── This was a warm full-bleed band — background #F7F6F2, edge to edge — that deliberately interrupted the dark page. It was the wrong device. Keith, on seeing it: "It is spanning the entire fucking page like an inline hero." That is exactly what a full-width slab does. A storyboard is a figure INSIDE an argument, not a section break between arguments, and a reader scrolling the proof page should never lose the page to an illustration. So the wrapper now mirrors the host page's own reading column and carries NO background of its own. The artwork keeps its warm paper through .sb-plate__frame, which reads as a card sitting on the dark page — the art direction survives, the hero does not. Consequence that must not be missed: with the slab gone, the label and caption sit on the DARK page again, so the dark-page text palette (this file's default) is the correct one. The old `.sb-band .sb-plate__*` light overrides are deleted, not retained — leaving them would paint #3A342C caption text onto a #0D0D0D page, which is this file's documented silent failure: present, correctly positioned, unreadable. */ .sb-band { max-width: var(--content-width, 960px); margin: 0 auto; padding: 40px 32px; } /* platform.html mounts the wrapper INSIDE .glimpses, which is already the 960px column carrying its own 32px gutter. Re-applying the wrapper's column and gutter there indents the figure 32px further than the prose it sits under — measured: figure left 537 against a text edge of 505. Where the host element IS already the column, the wrapper contributes vertical rhythm only. Verify with the alignment check, not by eye: figure left edge must equal the host column's content-box left edge. */ .glimpses > .sb-band { max-width: 100%; padding-left: 0; padding-right: 0; } /* A plate is a figure ON the page, never the page itself. Two ceilings: 1. WIDTH — the reading column, and not one pixel more. The wrapper above supplies it, so the plate simply fills its column. Earlier revisions tried 1400px and then 1120px; both were wider than the prose they illustrate, which is how a figure starts reading as a destination. 2. HEIGHT — the artwork may not own the whole screen. Every storyboard is drawn 1672x941, so plate width IS plate height: a 1400px plate rendered 788px of image and the whole thing measured 1135px tall inside a 1080px viewport. Deriving a width back from a height ceiling keeps the top of the plate and its caption on screen together. min() takes whichever ceiling binds first, so a short laptop gets a smaller plate rather than a cropped one, and a phone is governed by 100% as before. */ .sb-plate { --sb-art-max-h: 60vh; /* FIX Site-M1 (2026-07-26 62nd-pass review): this comment used to claim max-width was "the floor this rule falls back to if the width declaration is ever dropped." That stopped being true when the value changed from 1120px to 100%: max-width:100% is already the effective default for a block element in this flow, so it is not a fallback at all — it promised a guard that no longer existed. The honest statement: the WRAPPER (.sb-band) is now the width authority. It mirrors the host page's reading column, so if the width declaration below is ever dropped at computed-value time the plate simply fills its column — which is the correct result, not a regression. The old numeric floor existed to bound a plate that escaped the column; no plate does that any more. max-width:100% is kept as belt-and-braces against a host that is wider than the column, and is deliberately NOT a numeric value — putting a px ceiling back here is how a figure starts growing past its column again. */ max-width: 100%; width: min(100%, calc(var(--sb-art-max-h, 60vh) * 1672 / 941)); margin: 0 auto; } /* Mobile browsers report vh as the LARGE viewport — toolbars retracted — which over-states the room a landscape phone actually has. svh is the honest number where it exists. Kept as a token override rather than a second min() so an unsupported unit can never invalidate the width declaration itself. */ @supports (height: 1svh) { .sb-plate { --sb-art-max-h: 60svh; } } /* ── Interlude: narrative between two adjacent figures ────────────────── */ /* The beat between two plates. This used to exist because the plates were full-bleed bands and a sentence left in the page's own column landed on a different left edge than the artwork above and below it — it read as a rendering seam rather than as copy. Now that the plates ARE in the reading column, the interlude only has to mirror that same column, which is what it does. One left edge down the whole page. */ .sb-interlude { max-width: var(--content-width, 960px); margin: 0 auto; padding: 8px 32px; } .sb-interlude__inner { max-width: 100%; margin: 0; } .sb-interlude p { max-width: 76ch; margin: 0; font-size: 1.05rem; line-height: 1.7; color: #D6D2CA; } /* RETIRED — the breakout. It existed on the reasoning that a proof plate "earns more room" than the 960px reading column gives it. That reasoning was wrong for the same reason the full-bleed band was wrong: a figure that pushes past the column it belongs to stops illustrating the argument and starts competing with it. Every plate now sits in the column. The class is still on the-question.html, so this rule is kept and neutralised rather than deleted — a bare `.sb-plate--breakout` with no rule would silently inherit .sb-plate, which is the intent, but leaving the selector here documents that the retirement was a decision and not an oversight. The old transform is what made the plate a containing block for position:fixed descendants; with it gone that hazard is gone too, but the lightbox stays mounted on by the script regardless — is transformed on several of these pages. See the MOUNT POINT comment in storyboard-viewer.js. */ .sb-plate--breakout { width: min(100%, calc(var(--sb-art-max-h, 60vh) * 1672 / 941)); max-width: 100%; margin-left: auto; transform: none; } /* ── Text palette ───────────────────────────────────────────────────────── The plate's own artwork is warm paper, but the pages it sits on are dark. The dark-page palette below is therefore the ONLY palette. FIX Site-M1 (2026-07-26 62nd-pass review): this used to add "the light palette applies only inside .sb-band, where the surrounding band is warm." Both halves are now false and contradicted further down this same file: the band carries no background at all, and the `.sb-band .sb-plate__*` light overrides were DELETED (not commented out) when the warm slab went, precisely so they could not paint #3A342C on a dark page. There is no light-background context left in this component, so there is no light palette to select. Do not reintroduce one without also reintroducing a light background behind it — that pairing is the invariant, and breaking it is this file's documented silent failure: text present, correctly positioned, unreadable. Contrast on #0D0D0D: label 7.9:1, caption 11.2:1, link 5.6:1 — all clear of WCAG AA. */ .sb-plate__label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #A9A399; margin: 0 0 16px; font-weight: 600; } .sb-plate__frame { display: block; width: 100%; border-radius: 8px; overflow: hidden; background: #F7F6F2; box-shadow: 0 1px 2px rgba(24, 22, 18, 0.10), 0 8px 32px rgba(24, 22, 18, 0.10); } .sb-plate__img { display: block; width: 100%; height: auto; } /* Header row: label on the left, expand control on the right. The control deliberately does NOT float over the artwork. Overlaid at top-right it covered the storyboards' own headline type — and because every storyboard composes differently, there is no safe corner. A control that obscures the thing it exists to reveal is a defect, not a style choice. */ .sb-plate__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .sb-plate__head .sb-plate__label { margin: 0; } /* The expand affordance. A real