/* ========================================================================== FIRSTS — Gravy Films · BMS “Brain Health is health” NYT-editorial-cinematic. Warm paper for text, pure black for cinema. ========================================================================== */ :root{ --paper:#F6F2E9; /* warm cream text pages */ --ink:#15140F; /* near-black text */ --black:#08080A; /* cinematic / full-bleed + the hold */ --muted:#8A8579; /* kickers, captions, secondary */ --line:rgba(21,20,15,0.14);/* hairlines */ --line-light:rgba(246,242,233,0.18); --serif-display:"Libre Caslon Display","Playfair Display",Georgia,"Times New Roman",serif; --serif-body:"Source Serif 4",Georgia,"Times New Roman",serif; --sans:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif; /* Cover masthead — ITC Cheltenham via Adobe Fonts kit; family names per the kit's CSS tab, then Georgia (web-safe) fallback if no kit is present. Do NOT bundle NYT proprietary fonts. */ --serif-cheltenham:"cheltenham","itc-cheltenham","ITC Cheltenham",Georgia,"Times New Roman",serif; --bms-purple:#BE2BBB; /* Bristol Myers Squibb brand violet (2020 rebrand) — provided logo asset is monochrome white, so the rule uses the brand-standard hex */ --measure:64ch; --pad-x:clamp(1.5rem,7vw,9rem); --viewport-w:100vw; /* JS keeps these on the layout viewport so pinned boards resize live */ --viewport-h:100vh; --interlude-still-overfill:1.16; /* covers the 0.92 stage-recede scale with ~3% edge safety */ --ease:cubic-bezier(.22,.61,.36,1); /* power3-ish out */ } *,*::before,*::after{box-sizing:border-box;} html{ -webkit-text-size-adjust:100%; } /* NB: do NOT put overflow-x:hidden/clip on — it breaks the sticky layered-scroll (the beats stop sticking at top:0). Horizontal overflow is guarded by body{overflow-x:hidden} (below) + per-section `overflow-x:clip` on the flow beats whose seeded side-entry was the real overflow source (.alts, .threshold). */ body{ margin:0; background:var(--black); color:var(--ink); font-family:var(--serif-body); font-size:clamp(17px,1.12vw,21px); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } #app{ position:relative; width:100%; /* NOT 100vw — 100vw includes the scrollbar gutter → ~16px right-edge overflow with classic scrollbars */ max-width:100%; min-width:0; background:var(--black); } img,video{display:block;max-width:100%;} h1,h2,h3,p{margin:0;} /* Lenis */ html.lenis,html.lenis body{height:auto;} .lenis.lenis-smooth{scroll-behavior:auto !important;} .lenis.lenis-stopped{overflow:hidden;} /* --- Boot / loading hold --- */ .boot{ position:fixed; inset:0; z-index:200; background:var(--black); display:flex; align-items:center; justify-content:center; transition:opacity .7s var(--ease); } body:not(.is-loading) .boot{ opacity:0; pointer-events:none; } /* --- Progress bar --- */ .progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:150; background:transparent; pointer-events:none; } .progress__bar{ display:block; height:100%; width:0%; background:linear-gradient(90deg,rgba(138,133,121,.2),rgba(138,133,121,.85)); transition:width .08s linear; } /* ========================================================================== Section shells ========================================================================== */ .beat{ position:relative; width:100%; max-width:100%; } /* 100% (content width), NOT 100vw — see #app note */ .beat--paper{ background:var(--paper); color:var(--ink); } .beat--black{ background:var(--black); color:var(--paper); } .full{ min-height:100svh; min-height:100vh; display:flex; align-items:center; } /* ========================================================================== GLOBAL LAYERED-PLANE SCROLL Each full-viewport "stage" beat is a sticky layer; later beats slide up and over earlier ones (later DOM paints on top). As the next beat covers it, a stage's inner .beat__plane scales down + drifts down and a .beat__shade darkens it — two planes passing. Tall text beats stay in normal flow (is-flow, never clipped); the storyboard keeps its own pin (excluded). Reversible. ========================================================================== */ .beat.is-stage{ position:sticky; top:0; height:100svh; height:100vh; overflow:hidden; background:var(--black); box-shadow:0 -26px 55px -14px rgba(8,8,10,.7); /* incoming plane casts a soft shadow up onto the receding one */ } .beat--paper.is-stage{ background:var(--paper); } /* keep paper behind TH so content reads while receding */ .beat__plane{ position:absolute; inset:0; transform-origin:center center; will-change:transform; } .beat__shade{ position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; z-index:50; will-change:opacity; } /* in-flow content beats need their plane to center (full-bleed beats use absolute children already) */ .quote .beat__plane, .close .beat__plane{ display:flex; flex-direction:column; align-items:center; justify-content:center; } .th .beat__plane{ display:flex; align-items:center; justify-content:center; padding:clamp(2rem,6vh,5rem) var(--pad-x); } /* dwell spacer — gives the preceding sticky beat front-time for its own build/grow animation */ .stack-spacer{ position:relative; width:100%; pointer-events:none; } /* invisible dwell spacer — must not capture hover/clicks over the sticky beat beneath it (e.g. the locked intro player) */ /* tall text beats: natural height, soft top shadow, never clipped */ .beat.is-flow{ position:relative; box-shadow:0 -26px 55px -14px rgba(8,8,10,.5); } /* reduced motion / no-anim: dismantle the stack → normal flow, navigable, no recede */ .no-anim .beat.is-stage{ position:relative; height:auto; min-height:100svh; box-shadow:none; } .no-anim .beat__shade{ display:none; } .no-anim .beat__plane{ transform:none !important; } .no-anim .stack-spacer{ display:none !important; } /* Kicker / editorial furniture */ .kicker{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.26em; font-size:.72rem; font-weight:600; color:var(--muted); } .beat--black .kicker{ color:rgba(246,242,233,.62); } .rule{ height:1px; background:var(--line); border:0; width:100%; } .beat--black .rule{ background:var(--line-light); } /* ========================================================================== 01 · COVER (single pinned section — hero clip + new hero layout) Full-bleed hero video. TOP-LEFT: small lowercase treatment credit (Libre Franklin, two phrases on one line with a gap). BOTTOM-RIGHT: a centered stack — "Firsts" (serif) → subtitle (serif) → BMS-purple rule → Bristol Myers Squibb logo. No other text. Both text blocks are present on load, then fade out on the one-way cover→intro grow. Copy is verbatim from 02_credits_TEXT_a / _b. ========================================================================== */ .cover{ position:relative; min-height:100svh; min-height:100vh; overflow:hidden; background:var(--black); } .cover__media{ position:absolute; inset:0; width:100%; overflow:hidden; } /* insets (top/right/bottom/left) into the square's padded frame on the cover→intro tandem */ .cover__media video{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; } /* legibility scrims — localized to the two text corners so the hero stays open in the middle */ .cover__scrim{ /* bottom-right — subtle DARK wash so the WHITE title block reads over the field */ position:absolute; inset:0; pointer-events:none; background:radial-gradient(64% 64% at 100% 100%, rgba(8,8,10,.55) 0%, rgba(8,8,10,.18) 44%, transparent 70%); } .cover__scrim--tl{ /* top-left — subtle LIGHT lift so the DARK credit line reads over the bright sky */ position:absolute; inset:0; pointer-events:none; background:radial-gradient(52% 60% at 0% 0%, rgba(249,245,238,.34) 0%, rgba(249,245,238,.10) 46%, transparent 64%); } /* TOP-LEFT — small lowercase treatment credit (DARK, over the bright sky), left-aligned on the --pad grid. Two phrases on one line with a gap, wrapping safely at narrow widths. */ .cover__credit{ position:absolute; top:clamp(1.4rem, 5vh, 3rem); left:var(--pad-x); z-index:3; display:flex; flex-wrap:wrap; align-items:baseline; gap:clamp(.5rem,3vw,2.6rem); max-width:calc(100vw - var(--pad-x) - 1.2rem); font-family:var(--sans); text-transform:lowercase; font-weight:400; font-size:clamp(.72rem, min(1.02vw,1.7vh), .92rem); letter-spacing:.05em; color:rgba(26,23,18,.9); text-shadow:0 1px 10px rgba(249,245,238,.5); } /* BOTTOM-RIGHT — CENTER-aligned title stack in the lower-right, present on load. "Firsts" centers over the (widest) subtitle; rule + logo center under it — matches the reference. WHITE type over the field. Type is HEIGHT-AWARE — min(vw,vh) — so the stack shrinks on short/wide viewports, never clipping. */ .cover__titleblock{ position:absolute; right:var(--pad-x); bottom:clamp(2.5rem, 16vh, 11rem); z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(.35rem,1vh,.8rem); max-width:min(46ch,62vw); } .cover__title{ /* "Firsts" — serif, largest, sentence case (white over the field) */ font-family:var(--serif-cheltenham); font-weight:400; color:#fff; font-size:clamp(2rem, min(5vw,7vh), 4.2rem); line-height:1.0; letter-spacing:.01em; text-shadow:0 2px 26px rgba(0,0,0,.45); } .cover__subtitle{ /* "The Brain Health Commitment" — serif, smaller (white) */ font-family:var(--serif-cheltenham); font-weight:400; color:rgba(255,255,255,.94); font-size:clamp(.92rem, min(1.5vw,2.2vh), 1.4rem); line-height:1.25; letter-spacing:.02em; text-shadow:0 1px 16px rgba(0,0,0,.45); } .cover__rule{ /* short thin horizontal rule in BMS brand purple (centered) */ width:clamp(48px, min(6vw,8vh), 92px); height:2px; border:0; border-radius:2px; margin:clamp(.25rem,.9vh,.6rem) 0 0; background:var(--bms-purple); } .cover__logo{ /* Bristol Myers Squibb white wordmark (over the darker bottom-right field) */ display:block; height:clamp(14px, min(1.95vw,2.6vh), 26px); width:auto; margin-top:clamp(.45rem,1.4vh,1rem); opacity:.95; } .cover__logo--fallback{ /* clean wordmark if the logo asset is ever missing (height auto) */ height:auto; filter:none; font-family:var(--sans); font-weight:600; color:#fff; text-transform:uppercase; letter-spacing:.22em; font-size:clamp(.7rem, min(1.1vw,1.6vh), .95rem); text-shadow:0 1px 12px rgba(0,0,0,.5); } /* ========================================================================== 03 · INTRO — small B&W video panel over the still-playing hero. Grows in from the RIGHT into a capped bottom-right corner (anchored bottom-right, so it expands up-left from the --pad margin). Triggered by scroll, then self-plays one-way to the cap and locks. The hero (01) stays full-bleed behind it — no inset/recede. ========================================================================== */ .intro{ position:relative; min-height:100svh; min-height:100vh; overflow:hidden; background:var(--black); } .intro.is-stage{ background:transparent; box-shadow:none; } /* transparent stage — the full-bleed hero shows through behind the panel */ .intro__frame{ position:absolute; right:var(--pad-x); bottom:clamp(3.5rem, 13vh, 10rem); z-index:2; /* bottom-right anchor */ width:12vw; height:12vw; /* small start; JS animates width/height in px to the cap at refresh */ overflow:hidden; background:#0c0c0e; border-radius:10px; border:1px solid var(--line-light); box-shadow:0 30px 80px -42px rgba(0,0,0,.8); filter:grayscale(1) contrast(1.05); /* B&W talking-head convention — drop this line for color */ } .intro__frame video{ width:100%; height:100%; object-fit:cover; } /* reduced motion: capped bottom-right corner panel, sized by CSS so it stays put on resize */ .no-anim .intro__frame{ right:var(--pad-x); bottom:clamp(3.5rem,13vh,10rem); width:38vw; height:45vh; left:auto; top:auto; transform:none; } /* -------------------------------------------------------------------------- 03 · intro — locked-state video player (bottom-only controls; NO center disc). The panel autoplays muted at full size; controls reveal on hover (or while sound is playing) once the panel LOCKS (.intro.is-locked). Play unmutes; scrubber seeks. -------------------------------------------------------------------------- */ .intro__controls{ opacity:0; transition:opacity .3s ease; pointer-events:none; } /* minimal controls — Play/Pause bottom-left, Full bottom-right, thin scrubber along the very bottom */ .intro__controls{ position:absolute; inset:0; z-index:6; } .intro__row{ position:absolute; left:0; right:0; bottom:18px; display:flex; justify-content:space-between; align-items:flex-end; padding:0 22px; } .intro__ctrl{ font-family:var(--sans); color:#fff; font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.6); background:none; border:0; cursor:pointer; padding:6px 2px; } .intro__ctrl:hover{ color:rgba(255,255,255,.72); } .intro__scrub{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.18); cursor:pointer; } .intro__scrub-fill{ height:100%; width:0; background:rgba(255,255,255,.92); } /* reveal logic — bottom controls show on hover (locked) or while sound is playing; no center disc */ .intro.is-locked .intro__frame:hover .intro__controls, .intro.is-locked.is-playing .intro__controls{ opacity:1; pointer-events:auto; } /* intro (03) shared Play button: hidden during the grow, fades in once the panel LOCKS; hidden again once playing (the global `.is-engaged .playbtn-wrap` rule). Click plays Marlena from the top with audio. */ .intro .playbtn-wrap{ opacity:0; pointer-events:none; transition:opacity .45s ease; } .intro.is-locked .playbtn-wrap{ opacity:1; pointer-events:auto; } /* fullscreen: fill the screen, drop the framed look (video stays B&W per the convention) */ .intro__frame:fullscreen{ width:100vw; height:100vh; border:0; border-radius:0; box-shadow:none; } .intro__frame:-webkit-full-screen{ width:100vw; height:100vh; border:0; border-radius:0; box-shadow:none; } /* ========================================================================== Talking-head (B&W, two-column, editorial — never full-bleed) ========================================================================== */ .th{ padding:clamp(4rem,11vh,9rem) var(--pad-x); } .th__grid{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5.5rem); align-items:center; } .th--right .th__video{ order:2; } /* alternate sides */ .th--right .th__pair{ order:1; } .th__col-label{ margin-bottom:1.1rem; display:flex; align-items:center; gap:1rem; } .th__col-label .rule{ flex:1; } .th__video{ position:relative; } .th__frame{ position:relative; border:1px solid var(--line); background:#0c0c0e; overflow:hidden; aspect-ratio:3/2; box-shadow:0 24px 60px -28px rgba(21,20,15,.55); } .th__frame video{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.02) brightness(.98); /* TH = black & white, always */ } .th__frame::after{ /* faint film vignette */ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 90px rgba(8,8,8,.4); } .th__playcue{ position:absolute; left:14px; bottom:12px; display:flex; align-items:center; gap:.5rem; font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-size:.6rem; color:rgba(246,242,233,.78); mix-blend-mode:difference; } .th__playcue .dot{ width:7px; height:7px; border-radius:50%; background:#e7e2d6; animation:livepulse 2.4s var(--ease) infinite; } @keyframes livepulse{0%,100%{opacity:.35}50%{opacity:1}} .th__pair{ } .th__callout .lead{ font-family:var(--serif-display); font-weight:400; line-height:1.12; font-size:clamp(1.8rem,3.6vw,3.2rem); letter-spacing:.005em; } .th__callout .sub{ margin-top:1.1rem; font-style:italic; color:var(--muted); font-size:1.08rem; line-height:1.5; } .th__pair-still{ position:relative; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); } .th__pair-still img{ width:100%; height:100%; object-fit:cover; } .th__pair-cap{ margin-top:.7rem; font-family:var(--sans); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } /* ========================================================================== SHARED playback affordances — THs (08,10,12,14,16) + mood reel (05) Big centered Play button (thin ring + triangle) and a bottom Play/Pause + scrubber bar (NO fullscreen). ========================================================================== */ .playbtn-wrap{ position:absolute; inset:0; margin:auto; width:max-content; height:max-content; z-index:7; pointer-events:none; } .playbtn-wrap.is-shown{ pointer-events:auto; } .is-engaged .playbtn-wrap{ opacity:0 !important; pointer-events:none !important; } /* once playing, the bar takes over */ .playbtn{ display:grid; place-items:center; box-sizing:border-box; width:clamp(72px,6.6vw,104px); height:clamp(72px,6.6vw,104px); border-radius:50%; border:1.5px solid rgba(255,255,255,.9); background:rgba(10,10,12,.16); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); cursor:pointer; box-shadow:0 8px 36px rgba(0,0,0,.34); transition:transform .3s var(--ease), background .3s ease, border-color .3s ease; } .playbtn:hover{ transform:scale(1.06); background:rgba(10,10,12,.3); border-color:#fff; } .playbtn:focus-visible{ outline:2px solid #fff; outline-offset:4px; } .playbtn__tri{ width:0; height:0; border-style:solid; border-width:12px 0 12px 21px; border-color:transparent transparent transparent #fff; margin-left:6px; /* optical centering of the triangle inside the ring */ } .playbar{ position:absolute; left:0; right:0; bottom:0; z-index:8; display:flex; align-items:center; gap:.85rem; padding:.7rem .9rem; background:linear-gradient(180deg, transparent, rgba(8,8,10,.7)); opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); } .th.is-engaged .playbar, .reel.is-engaged .playbar{ opacity:1; transform:none; pointer-events:auto; } .playbar__toggle{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.16em; font-size:.6rem; color:#f2efe7; background:rgba(20,20,22,.5); border:1px solid rgba(246,242,233,.3); padding:.42rem .8rem; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); flex:0 0 auto; } .playbar__toggle:hover{ border-color:rgba(246,242,233,.65); } .playbar__scrub{ position:relative; flex:1 1 auto; height:3px; background:rgba(246,242,233,.28); cursor:pointer; } .playbar__fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:#f2efe7; } /* GOODBYE (16) — TH-only single centered column */ .th--solo .th__grid{ grid-template-columns:1fr; max-width:760px; } /* ========================================================================== 04 · QUOTE (centered on near-black) ========================================================================== */ .quote{ background:var(--black); color:var(--paper); text-align:center; padding:18vh var(--pad-x); } .quote__line{ max-width:24ch; margin:0 auto; font-family:var(--serif-display); font-weight:400; font-size:clamp(2.2rem,5.5vw,4.6rem); line-height:1.14; letter-spacing:.01em; } .quote__attr{ margin-top:1.6rem; font-family:var(--sans); text-transform:uppercase; letter-spacing:.3em; font-size:.72rem; color:rgba(246,242,233,.55); } /* 04 — optional soft held frame behind the line (brief-sanctioned alternative to plain near-black) */ .quote__media{ position:absolute; inset:0; overflow:hidden; z-index:0; } .quote__media img{ width:100%; height:100%; object-fit:cover; } .quote__scrim{ position:absolute; inset:0; z-index:1; background:radial-gradient(120% 100% at 50% 45%, rgba(8,8,10,.5) 0%, rgba(8,8,10,.82) 100%); } .quote__inner{ position:relative; z-index:2; } /* ========================================================================== 05 · MOOD REEL (full-bleed video) ========================================================================== */ .reel{ position:relative; min-height:100svh; min-height:100vh; background:var(--black); overflow:hidden; } .reel video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .reel__scrim{ position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 50%,transparent 60%,rgba(8,8,10,.5) 100%); } /* mood-reel copy over the held first frame — holds through a scroll deadzone, then fades as the Play button rises (initMoodReel) */ .reel__copy{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 var(--pad-x); pointer-events:none; background:radial-gradient(58% 50% at 50% 50%, rgba(8,8,10,.58), rgba(8,8,10,.14) 68%, transparent 86%); } .reel__kicker{ color:rgba(246,242,233,.7); margin-bottom:1.1rem; } .reel__head{ max-width:20ch; color:var(--paper); font-family:var(--serif-display); font-weight:400; font-size:clamp(2rem,4.6vw,3.8rem); line-height:1.1; letter-spacing:.01em; text-shadow:0 2px 40px rgba(0,0,0,.55); } .reel__body{ max-width:46ch; margin-top:1.5rem; color:rgba(246,242,233,.92); font-family:var(--sans); font-weight:400; font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.62; text-shadow:0 1px 20px rgba(0,0,0,.55); } .reel.is-engaged .reel__copy{ opacity:0 !important; pointer-events:none; } .no-anim .reel__copy{ opacity:1; } /* reduced motion shows copy AND button together — drop the button to lower-center so it doesn't sit on the body copy */ .no-anim .reel .playbtn-wrap{ inset:auto 0 12% 0; margin:0 auto; } /* ========================================================================== 06 · THE FEELING (editorial reading beat on paper) ========================================================================== */ .read{ padding:clamp(6rem,16vh,12rem) var(--pad-x); } .read__inner{ max-width:var(--measure); margin:0 auto; } .read__head{ margin-bottom:2.6rem; display:flex; align-items:center; gap:1.2rem; } .read__head .rule{ flex:1; } .read p{ margin-bottom:1.5em; font-size:clamp(1.12rem,1.5vw,1.45rem); line-height:1.62; } .read__pull{ margin:2.2rem 0 0; font-family:var(--serif-display); font-weight:400; font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1.2; letter-spacing:.005em; text-indent:0; color:var(--ink); border-top:1px solid var(--line); padding-top:2rem; } /* ========================================================================== 07/09/11/13 · INTERLUDE STILLS (full-bleed parallax) ========================================================================== */ .interlude{ position:relative; min-height:100svh; min-height:100vh; overflow:hidden; background:var(--black); } .interlude__media{ position:absolute; inset:-8% 0 -8% 0; height:116%; width:100%; } .interlude__media img,.interlude__media video{ width:100%; height:100%; object-fit:cover; will-change:transform; } .interlude__media img{ max-width:none; transform:scale(var(--interlude-still-overfill)); transform-origin:center center; } .interlude__scrim{ position:absolute; inset:-8% 0 -8% 0; background:linear-gradient(180deg,rgba(8,8,10,.18),transparent 30%,transparent 70%,rgba(8,8,10,.28)); transform:scale(var(--interlude-still-overfill)); transform-origin:center center; } /* ========================================================================== 14b · BEFORE THE SCRIPT (threshold text, centered) ========================================================================== */ .threshold{ background:var(--paper); color:var(--ink); text-align:center; padding:18vh var(--pad-x); overflow-x:clip; } /* contain the seeded side-entry of the headline (is-flow beats aren't clipped by a stage) */ .threshold__inner{ max-width:46ch; margin:0 auto; } .threshold h2{ font-family:var(--serif-display); font-weight:400; font-size:clamp(2rem,5vw,4rem); line-height:1.12; margin-bottom:1.6rem; } .threshold p{ font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.6; color:#2b2920; } .threshold__pivot{ margin-top:3rem; font-family:var(--sans); text-transform:uppercase; letter-spacing:.34em; font-size:.7rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:.8rem; } .threshold__pivot .arrow{ display:inline-block; } /* ========================================================================== 15 · THE BOARDS — HORIZONTAL ========================================================================== */ .pin-spacer{ width:100% !important; max-width:100% !important; min-width:0 !important; } /* in-flow → content width (scrollbar-safe) */ .boards{ position:relative; background:var(--black); width:var(--viewport-w) !important; max-width:100% !important; /* --viewport-w = clientWidth (JS-maintained, scrollbar-safe) — works pinned (fixed) too */ transform:translateZ(0); will-change:transform; -webkit-backface-visibility:hidden; backface-visibility:hidden; contain:paint; isolation:isolate; /* pre-composite the relative→fixed pin handoff; prevents entry flash */ } .boards[style]{ height:100vh !important; height:100dvh !important; max-height:none !important; } .boards__viewport{ height:100svh; height:100dvh; overflow:hidden; transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; contain:paint; } .boards__track{ display:flex; height:100%; width:max-content; will-change:transform; -webkit-backface-visibility:hidden; backface-visibility:hidden; } .board{ position:relative; width:var(--viewport-w); height:100svh; height:100dvh; flex:0 0 auto; /* clientWidth, not 100vw → boards align to the visible width + no scrollbar overflow */ overflow:hidden; background:var(--black); transform:translateZ(0); will-change:transform; -webkit-backface-visibility:hidden; backface-visibility:hidden; } .board--wide{ width:150vw; width:150dvw; } /* the held black gets room to breathe */ .board__media{ position:absolute; inset:0; transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; } .board__media img,.board__media video{ width:100%; height:100%; object-fit:cover; will-change:transform,clip-path; -webkit-backface-visibility:hidden; backface-visibility:hidden; } .board__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,10,.12) 0%,transparent 22%,transparent 40%,rgba(8,8,10,.46) 62%,rgba(8,8,10,.84) 100%); /* extended lower ramp so the note tier stays legible over brighter stills (soft, no box) */ transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; } .board__caption{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:0 clamp(2rem,7vw,7rem) clamp(3rem,9vh,6rem); -webkit-backface-visibility:hidden; backface-visibility:hidden; } .board__kicker{ margin-bottom:1rem; color:rgba(246,242,233,.7); } .board__vo{ font-family:var(--serif-display); font-weight:400; color:var(--paper); font-size:clamp(1.7rem,4.4vw,4rem); line-height:1.08; max-width:18ch; text-shadow:0 2px 30px rgba(0,0,0,.5); } .board--brand .board__vo{ font-size:clamp(1.3rem,2.8vw,2.4rem); max-width:26ch; } /* director's NOTE — third caption tier beneath the VO title. Body face (Source Serif) at the site body size, leading ~1.5, ~1/3-frame measure, same left edge as the title. The bottom-anchored caption grows UPWARD as the note lengthens (baseline fixed, title floats up). */ .board__note{ margin-top:1rem; max-width:46ch; font-family:var(--serif-body); font-weight:400; font-size:clamp(17px,1.12vw,21px); line-height:1.5; color:rgba(246,242,233,.94); text-shadow:0 1px 16px rgba(0,0,0,.66); } /* hold-black (n=11): a wide, black fold-to-black board with a centered line and no still — its note reads centered-bottom under the line (true lower-left would sit off-screen on the 150vw board). */ .board__caption--hold{ left:50%; right:auto; transform:translateX(-50%); width:min(48ch,82vw); padding:0 0 clamp(3rem,9vh,6rem); } .board__caption--hold .board__note{ margin-top:0; text-shadow:none; color:rgba(246,242,233,.84); } /* The held-black panel (fold to black). The panel itself is black; the VO line inside fades in/out (driven in JS). Container stays visible — only the line animates. */ .holdblack{ position:absolute; inset:0; z-index:6; background:var(--black); display:flex; align-items:center; justify-content:center; opacity:1; pointer-events:none; padding:0 var(--pad-x); } .holdblack__line{ max-width:30ch; text-align:center; color:var(--paper); font-family:var(--serif-display); font-weight:400; font-size:clamp(1.4rem,3vw,2.5rem); line-height:1.22; opacity:.92; } /* Brain end-card / board-16 end card */ .board--end{ background:var(--black); display:flex; align-items:center; justify-content:center; } .endcard{ text-align:center; color:var(--paper); padding:0 var(--pad-x); } .endcard__brand{ font-family:var(--serif-display); font-size:clamp(2rem,5vw,4rem); letter-spacing:.01em; } .endcard__logos{ margin-top:1.8rem; display:flex; align-items:center; justify-content:center; gap:2.4rem; flex-wrap:wrap; } /* Progress dots + scroll hint for the boards */ .boards__dots{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:8; display:flex; gap:8px; pointer-events:none; } .boards__dots i{ width:6px; height:6px; border-radius:50%; background:rgba(246,242,233,.28); transition:background .3s,transform .3s; } .boards__dots i.on{ background:rgba(246,242,233,.95); transform:scale(1.25); } .boards__hint{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:8; font-family:var(--sans); text-transform:uppercase; letter-spacing:.4em; font-size:.72rem; color:rgba(246,242,233,.82); display:flex; align-items:center; gap:1rem; transition:opacity .6s var(--ease); text-shadow:0 2px 20px rgba(0,0,0,.6); } /* ========================================================================== 15b · ALTS (editorial list, back to vertical, on paper) ========================================================================== */ .alts{ padding:clamp(6rem,15vh,11rem) var(--pad-x); overflow-x:clip; } /* contain the seeded side-entry of .alt__media (its off-screen start was the real overflow source) */ .alts__inner{ max-width:980px; margin:0 auto; } .alts__head{ display:flex; align-items:center; gap:1.2rem; margin-bottom:1.6rem; } .alts__head .rule{ flex:1; } .alts__lead{ font-family:var(--serif-body); font-style:italic; color:#34322a; font-size:clamp(1.1rem,1.6vw,1.4rem); max-width:46ch; margin-bottom:3rem; } .alt{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(1.4rem,4vw,3.4rem); align-items:center; padding:2.4rem 0; border-top:1px solid var(--line); } .alt:last-child{ border-bottom:1px solid var(--line); } .alt__title{ font-family:var(--serif-display); font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.12; margin-bottom:.8rem; } .alt__body{ color:#3a382f; font-size:1.05rem; line-height:1.55; } .alt__still{ overflow:hidden; aspect-ratio:16/7; border:1px solid var(--line); } .alt__still img,.alt__still video{ width:100%; height:100%; object-fit:cover; } .alt--rev .alt__media{ order:2; } /* ========================================================================== 17 · CLOSE (over black) ========================================================================== */ .close{ position:relative; background:var(--black); color:var(--paper); text-align:center; padding:22vh var(--pad-x) 16vh; } /* Close with a full-bleed ambient video: the plane (line ~94) centers .close__inner; media + scrim fill it absolutely behind. */ .close--video{ padding:0; } .close__media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--black); } .close__media video{ width:100%; height:100%; object-fit:cover; object-position:center 42%; } .close__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(6,6,8,.66) 0%, rgba(6,6,8,.5) 45%, rgba(6,6,8,.75) 100%); } .close__inner{ position:relative; z-index:2; width:100%; padding:12vh var(--pad-x); } .close__brand{ font-family:var(--serif-display); font-size:clamp(2rem,5vw,3.8rem); letter-spacing:.01em; margin-bottom:3.2rem; } .close__logos{ display:flex; gap:2.6rem; align-items:center; justify-content:center; margin-bottom:3.4rem; flex-wrap:wrap; } .logo-mark{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-size:.84rem; color:rgba(246,242,233,.9); border:1px solid var(--line-light); padding:.7rem 1.2rem; border-radius:2px; } /* real white logo art (BMS wordmark + Gravy mark) on the black close + end card */ .close__logo, .endcard__logo{ height:clamp(20px, 2.5vw, 30px); width:auto; opacity:.95; } .close__logo--gravy, .endcard__logo--gravy{ height:clamp(26px, 3.1vw, 38px); } /* gravy mark reads shorter by cap-height — bump to balance */ .close__names{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.34em; font-size:.84rem; color:rgba(246,242,233,.86); margin-bottom:1.8rem; } .close__conf{ max-width:52ch; margin:0 auto; font-style:italic; font-size:.86rem; line-height:1.6; color:rgba(246,242,233,.5); } /* ========================================================================== Placeholder system (beautiful, consistent — never a broken image) ========================================================================== */ .placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:clamp(2rem,7vw,6rem); background:linear-gradient(150deg,#1a1916 0%,#0c0c0e 70%); } .beat--paper .placeholder, .placeholder--paper{ background:linear-gradient(150deg,#efe9da 0%,#dcd5c4 100%); } .placeholder__tag{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.24em; font-size:.72rem; color:var(--muted); margin-bottom:.9rem; } .placeholder__desc{ font-family:var(--serif-display); font-size:clamp(1.3rem,2.6vw,2.2rem); line-height:1.18; color:rgba(246,242,233,.86); max-width:24ch; } .placeholder--paper .placeholder__desc{ color:var(--ink); } /* ========================================================================== Scroll cue (down-arrow) ========================================================================== */ .scrollcue{ position:absolute; left:50%; bottom:clamp(1.6rem,4vh,3rem); transform:translateX(-50%); z-index:9; display:flex; flex-direction:column; align-items:center; gap:.7rem; color:rgba(246,242,233,.8); font-family:var(--sans); text-transform:uppercase; letter-spacing:.3em; font-size:.62rem; transition:opacity .6s var(--ease); pointer-events:none; } .scrollcue .chev{ width:20px; height:20px; animation:bob 2.2s var(--ease) infinite; } @keyframes bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}} .scrollcue.is-hidden{ opacity:0; } /* Reveal helper for the seeding gesture / fade-ups / cover build (JS-driven; CSS fallback) */ [data-reveal],[data-seed]{ opacity:0; } .no-anim [data-reveal],.no-anim [data-seed]{ opacity:1 !important; transform:none !important; } /* reduced-motion: cover and intro show their finished static states immediately */ /* ========================================================================== Reduced motion / no-anim: keep navigable, fades not scrubs ========================================================================== */ .no-anim .boards__viewport{ height:auto; overflow:visible; } .no-anim .boards__track{ flex-direction:column; width:100%; } .no-anim .board{ width:100%; height:auto; min-height:100svh; } .no-anim .board--wide{ width:100%; min-height:60svh; } .no-anim .interlude__media{ inset:0; width:100%; height:100%; } .no-anim .holdblack{ position:relative; opacity:1; min-height:60svh; } .no-anim .board--hold .board__media{ display:none; } @media (prefers-reduced-motion: reduce){ .scrollcue .chev,.th__playcue .dot{ animation:none; } html{ scroll-behavior:auto; } } /* ========================================================================== Desktop-first. Small-screen safety net (stacked, no errors). ========================================================================== */ @media (max-width:880px){ .th__grid{ grid-template-columns:1fr; gap:2rem; } .th--right .th__video,.th--right .th__pair{ order:initial; } .alt,.alt--rev .alt__media{ grid-template-columns:1fr; order:initial; } }