/* The homepage film. The shared theme (assets/theme.css) gives the type, colour, bar, buttons and footer; assets/landing.css lays out the company on paper (the first screen and the chapters' text). Modes, set on : - none: no script. An essay: the company's first screen on paper, each chapter's era, line and text in order, then the settled poster of the rex with the company's line, then the footer. - "pending", "live", "settled": the film. A fixed canvas behind the page, the company's first screen over its opening shot, then twelve scroll tracks, one per shot, each carrying its chapter's text, which holds in its column or band while the shot plays; the thirteenth card (the page) lets the last chapter show through it. - "essay": script ran but the film could not (no WebGL2, the scene failed, the download failed or timed out, the context was lost for good). data-film-scene ("intro", "film", "end", "past") tells the bar and the chapter bar where the reader is; until the runtime sets it the chapter bar waits. */ html:not(.lenis){scroll-behavior:smooth} html.lenis,html.lenis body{height:auto} .lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip} /* --- the essay (default) ------------------------------------------------ */ .film-stage,.film-hud{display:none} .film-now{position:relative;border-top:1px solid var(--line)} .film-now-art img{display:block;width:100%;height:auto} .film-now-copy{padding-block:clamp(40px,6vw,72px) clamp(72px,10vw,128px)} .film-wordmark{margin:0 0 12px;font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)} .film-thesis{margin:0 0 32px;max-width:22ch;font:600 clamp(34px,4.4vw,60px)/1.04 var(--sans);letter-spacing:-.04em;text-wrap:balance} /* The invitation, under the company's line: the card is where the reader stops, so the page's call to act is here. */ .film-invite{margin:-12px 0 28px;max-width:44ch;font:400 clamp(17px,1.4vw,20px)/1.5 var(--sans);color:var(--text-2);text-wrap:pretty} /* Set like the first screen's line on phones: four lines, "AI-native" whole. */ @media(max-width:640px){.film-thesis{font-size:clamp(26px,8.4vw,34px)}} /* --- the film ---------------------------------------------------------- */ :root:is([data-film="pending"],[data-film="live"],[data-film="settled"]){background:#000} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) body{background:#000} /* The film keeps the reader's place when the page is laid out again (a phone turned, a window resized: main.js keep()); the browser's scroll anchoring, where it applies, would move the page a second time. */ :root:is([data-film="pending"],[data-film="live"],[data-film="settled"]),:is([data-film="pending"],[data-film="live"],[data-film="settled"]) body{overflow-anchor:none} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-stage{display:block;position:fixed;inset:0;z-index:0;width:100%;height:100%;transition:opacity .35s} .film-stage.is-cut{opacity:0} /* Over the film the bar is light type with a soft shadow on a faint top scrim (photographic colour would turn difference blending into false colours), and it firms up into the paper bar once the page has passed the film. The scrim runs under the bar's clear hairline too (a scrim sized to the bar's padding repeated its darkest row there: a dark line across the picture). The bar changes look at once, with what lies under it: faded, its ink type stood on the clear bar over the picture for a quarter of a second. */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .nav{transition:none} :is([data-film="pending"],[data-film="live"],[data-film="settled"]):not([data-film-scene="past"]) .nav{background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,0)) border-box;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:#f2f0ea;text-shadow:0 1px 8px rgba(0,0,0,.45)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]):not([data-film-scene="past"]) .nav :is(.brand,.nav-links a){color:#f2f0ea} :is([data-film="pending"],[data-film="live"],[data-film="settled"]):not([data-film-scene="past"]) .nav .brand-logo{filter:grayscale(1) brightness(1.6)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]):not([data-film-scene="past"]) .nav .button--primary{background:rgba(0,0,0,.18);color:#f2f0ea;box-shadow:inset 0 0 0 1px rgba(242,240,234,.85)} /* An ink focus ring vanishes on the dark picture: over the film it is light. */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]):not([data-film-scene="past"]) .nav :focus-visible, :is([data-film="pending"],[data-film="live"],[data-film="settled"]) :is(.intro,.film-hud,.chapter) :focus-visible{outline-color:#f4f2ec} /* The company's first screen, over the opening shot (which keeps moving): light type, the ways to act and a cue into the film. It fills the view under the bar. A faint scrim under the copy keeps it legible if another shot passes behind. */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .intro{position:relative;z-index:1;min-height:calc(100vh - var(--nav));min-height:calc(100svh - var(--nav));padding-block:24px clamp(20px,4vh,40px);color:#f4f2ec;background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,0) 55%)} /* As the screen leaves, its copy dissolves before it reaches the bar (where scroll-driven animation runs; elsewhere it scrolls on under the bar). The fade follows how far the page has scrolled, so the copy is solid at the top on every screen, even a short one where the line starts close to the bar. The copy sits at the foot of the view, so it reaches the bar after about the view's height less a constant: some 600px for the line, its subhead and its buttons, and 210px for the foot. It is also gone by the time the film begins, which is when the middle of the view reaches the screen's foot (100svh - 50lvh of scroll at the most): the chapter bar and the first chapter's text arrive then. A focused link stays solid. */ @supports (animation-timeline:scroll()){ :is([data-film="pending"],[data-film="live"]) :is(.intro-copy,.intro-foot){animation:intro-leave linear both;animation-timeline:scroll(root block)} :is([data-film="pending"],[data-film="live"]) .intro-copy{animation-range:0px min(max(40px,100vh - 600px),100svh - 50lvh - 20px)} :is([data-film="pending"],[data-film="live"]) .intro-foot{animation-range:max(30px,min(100vh - 520px,100svh - 50lvh - 240px)) max(120px,min(100vh - 210px,100svh - 50lvh - 20px))} :is([data-film="pending"],[data-film="live"]) :is(.intro-copy,.intro-foot):focus-within{animation:none} } @keyframes intro-leave{to{opacity:0;transform:translateY(-24px)}} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .intro-title{text-shadow:0 2px 18px rgba(0,0,0,.55)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .intro-lead{color:rgba(244,242,236,.86);text-shadow:0 1px 12px rgba(0,0,0,.6)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .intro-foot{display:flex;border-top-color:rgba(242,240,234,.22)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .intro-cue{display:inline-flex;align-items:center;gap:12px;padding-block:8px;font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(242,240,234,.8)} .intro-cue::after{--fall:28px;content:"";width:1px;height:var(--fall);background:linear-gradient(currentColor,currentColor) 0 -10px/1px 10px no-repeat,rgba(242,240,234,.24);animation:intro-cue 2.4s cubic-bezier(.4,.14,.3,1) infinite} .intro-cue:hover{color:#f4f2ec} @keyframes intro-cue{to{background-position:0 var(--fall)}} /* Its buttons, and the invitation's, are light on the picture: the paper ones (ink, white) would vanish on its blacks or glare on its lights. */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) :is(.intro,.chapter) .button--primary{background:#f4f2ec;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.25)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) :is(.intro,.chapter) .button--primary:hover{background:#fff} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .intro .button--secondary{background:rgba(0,0,0,.24);color:#f4f2ec;box-shadow:inset 0 0 0 1px rgba(244,242,236,.55);text-shadow:none} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .intro .button--secondary:hover{box-shadow:inset 0 0 0 1px rgba(244,242,236,.9)} @media(max-width:640px){ /* On the label's line: a shorter fall. */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .intro-cue{padding-block:0;gap:10px} .intro-cue::after{--fall:16px} } /* Chapter rail and era counter along the bottom edge, like a timecode, over a faint scrim. */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-hud{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:3;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gutter);font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#f2f0ea;text-shadow:0 1px 6px rgba(0,0,0,.5);background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.28));transition:opacity .4s} .film-index{display:flex;gap:12px} .film-index a{color:inherit;opacity:.5;text-decoration:none;padding:4px 0} .film-index a:hover,.film-index a[aria-current]{opacity:1} .film-index a[aria-current]{text-decoration:underline;text-underline-offset:5px} .film-where{display:flex;gap:14px;margin:0} .film-counter{min-width:8ch;text-align:right;font-variant-numeric:tabular-nums} .film-name{opacity:.7} .film-where{margin-left:auto} .film-sound{margin-left:24px;padding:4px 0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;opacity:.6;cursor:pointer} .film-sound:hover,.film-sound[aria-pressed="true"]{opacity:1} .film-sound[aria-pressed="true"]{text-decoration:underline;text-underline-offset:5px} /* (Scene rules apply to the film only: a film that fails mid-page leaves the scene attribute behind, and the essay must still show every chapter.) */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]):is([data-film-scene="end"],[data-film-scene="past"]) .film-hud{opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s} /* On the company's first screen, and before the runtime knows where the reader is, the chapter bar waits; it arrives as the film begins. */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]):is(:not([data-film-scene]),[data-film-scene="intro"]) .film-hud{opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s} /* --- the chapters over the film ---------------------------------------- Each track is one shot's length of scroll (150vh; 130vh on phones), which the runtime maps to the film. Its chapter's block rides a rail, a box laid over the track: the block rises with the page, holds (sticky) in its column or band while its shot holds the frame, from 0.3 of a chapter before the chapter's centre to 0.3 after it (h1, h2), and is carried off by the rail's end. It fades in and out over the 0.1 beyond, so it is gone before each cut between two shots (k + 0.4 to k + 0.6). The rail is placed by its top (a block held from the top, at --t) or by its bottom (a block held low, --b above the view's foot, clear of the chapter bar), so the hold starts and ends at the same scroll whatever the block's height. With the track's top at 50vh - trackh/2 + (k - s) trackh: top-held: rail top = --t - 50vh + trackh/2 - h1 trackh bottom-held: rail bottom = --b - 50vh + trackh/2 - h2 trackh (from the track's foot), and the hold is a spacer in the rail, (h1 + h2) trackh, either way. */ /* (The blocks' scrims reach past their columns; clipped here, they never widen the page: a column at the right edge made a phone in landscape 878 px wide, zoomed out. Clip, unlike hidden, keeps the blocks sticky.) */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-tracks{position:relative;z-index:1;padding:0;overflow-x:clip} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-track{position:relative;height:150vh} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail{--trackh:150vh;--h1:.3;--h2:.3;--t:30vh;--b:76px;position:absolute;left:0;right:0;top:calc(var(--t) - 50vh + var(--trackh) / 2 - var(--h1) * var(--trackh));pointer-events:none} /* (The hold is a spacer inside the rail: a sticky box moves only within its parent's content box, which padding is not part of.) */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail::after{content:"";display:block;height:calc((var(--h1) + var(--h2)) * var(--trackh))} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-row="low"]{top:auto;bottom:calc(var(--b) - 50vh + var(--trackh) / 2 - var(--h2) * var(--trackh))} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-row="low"]::before{content:"";display:block;height:calc((var(--h1) + var(--h2)) * var(--trackh))} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-row="low"]::after{content:none} /* The block: light type on a soft scrim that moves with it, deeper over the bright shots (--scrim). Its column sits on the page's wrap. */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter{--scrim:.4;display:block;position:sticky;top:var(--t);width:min(440px,40vw);margin:0 0 0 max(var(--gutter),(100% - var(--wrap)) / 2);padding:0;border:0;color:#f4f2ec;text-shadow:0 1px 2px rgba(0,0,0,.3),0 2px 18px rgba(0,0,0,.42);isolation:isolate;pointer-events:auto} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-row="low"] > .chapter{top:auto;bottom:var(--b)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-col="right"] > .chapter{margin:0 max(var(--gutter),(100% - var(--wrap)) / 2) 0 auto} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter::before{content:"";position:absolute;z-index:-1;inset:-12vh -8vw;pointer-events:none;background:radial-gradient(closest-side,rgb(5 6 8 / var(--scrim)),rgb(5 6 8 / calc(var(--scrim) * .66)) 56%,rgb(5 6 8 / 0))} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-film{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:14px} /* (the small type, the era, the film's line, the eyebrow and the text, at full strength with a close halo: in softer greys it measured under 4.5:1 over the sunlit sea, the misty floodplain and the dusk) */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter :is(.film-era,.chapter-line,.eyebrow,.chapter-text){color:#f4f2ec;text-shadow:0 0 2px rgba(0,0,0,.5),0 1px 8px rgba(0,0,0,.55)} /* (the era, the smallest, with a closer halo: at the top of a tall block the scrim thins, and over the sunlit sea's surface it measured 3.4:1) */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter .film-era{text-shadow:0 0 1px rgba(0,0,0,.6),0 0 3px rgba(0,0,0,.5),0 1px 8px rgba(0,0,0,.55)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-line{font-size:15px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter .eyebrow::before{background:#f4f2ec} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-title{font-size:clamp(26px,2.4vw,36px);line-height:1.14} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter--pillar .chapter-title{font-size:clamp(40px,4.4vw,64px)} /* A narrower column (on wide screens): the twelfth's, low on the left, under the rex's tail and short of its legs, wherever it walks while the block holds; the screen's, left of the spreadsheet's figures, which fill the frame at the chapter's centre. */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter--short{width:min(380px,32vw)} /* Deeper scrims over the bright shots: the fireball, the cell, the sunlit sea, the misty floodplain, the ledger's paper. */ #ch-2,#ch-5,#ch-9{--scrim:.5} #ch-7{--scrim:.58} #ch-6{--scrim:.66} /* Over the brightest skies (the savanna, the dusk) a dark scrim would read as a smudge on the sky: there the type is ink on a light veil, as the closing card's is on the same dusk (data-tone="ink"). */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-tone="ink"] > .chapter{--veil:.5;color:var(--ink);text-shadow:0 0 1px rgba(255,253,248,.4),0 1px 14px rgba(255,253,248,.55)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-tone="ink"] > .chapter::before{background:radial-gradient(closest-side,rgb(250 247 241 / var(--veil)),rgb(250 247 241 / calc(var(--veil) * .62)) 56%,rgb(250 247 241 / 0))} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-tone="ink"] > .chapter :is(.film-era,.chapter-line,.chapter-text,.eyebrow){color:var(--ink);text-shadow:0 0 2px rgba(255,253,248,.6),0 1px 8px rgba(255,253,248,.6)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-tone="ink"] > .chapter .eyebrow::before{background:var(--ink)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-tone="ink"] > .chapter .button--primary{background:var(--ink);color:#fff;text-shadow:none} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-tone="ink"] > .chapter .button--primary:hover{background:#262626} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-tone="ink"] > .chapter :focus-visible{outline-color:var(--ink)} /* Each block fades in as it reaches its hold and out as it leaves, keyed to its track's place in the view (where scroll-driven animation runs), not to the film's frame loop: a slow picture never hides text from a reader who is there. Settled, it simply stays. */ @supports (animation-timeline:view()){ /* (inset 0: by default a view timeline leaves out the page's scroll padding, the bar's height, and runs some 4% fast) */ :is([data-film="pending"],[data-film="live"]) .film-track{view-timeline:--chapter block;view-timeline-inset:0px} :is([data-film="pending"],[data-film="live"]) .chapter{animation:chapter-hold linear both;animation-timeline:--chapter;animation-range:cover 26% cover 74%} } @keyframes chapter-hold{0%{opacity:0}12.5%{opacity:1}87.5%{opacity:1}100%{opacity:0}} /* The thirteenth card: the page, over the last chapter still on the canvas. */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-now{z-index:1;min-height:100vh;min-height:100svh;border-top:0;background:transparent;color:var(--ink)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-now-art{display:none} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-now-copy{padding-block:calc(var(--nav) + 12vh) 0} /* (over the dusk and the field of code, the invitation is in ink like the line above it: grey, it sank into the code's light) */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) :is(.film-wordmark,.film-invite){color:var(--ink)} /* On a phone the rex walks the lower half of the closing card's frame and the dusk sky is above it: the card's words sit in the sky, under the bar (lower, the invitation lay over the rex, ink on its hide). On its side, a narrower measure keeps them left of the rex and within the view. */ @media(max-width:809.98px){ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-now-copy{padding-block:calc(var(--nav) + 12px) 0} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-thesis{margin-bottom:20px;font-size:28px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-invite{margin:-6px 0 18px;font-size:16px} } @media(max-height:560px) and (min-width:810px){ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-now-copy{padding-block:calc(var(--nav) + 10px) 0} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-wordmark{margin-bottom:6px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-thesis{max-width:18ch;margin-bottom:18px;font-size:26px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-invite{max-width:40ch;margin:-6px 0 14px;font-size:15px} } /* After the film the page is paper again and covers the canvas. */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .site-footer{position:relative;z-index:1;background:var(--bg)} /* A short screen (a phone on its side, a small laptop window): the blocks hold just under the bar or above the chapter bar, set smaller. */ @media(max-height:560px) and (min-width:810px){ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail{--t:calc(var(--nav) + 18px);--b:62px} /* (narrow, at the frame's edges: on a phone on its side the shots' subjects fill the middle, and a wider block sat on the walker, the knapper's hands and the rex) */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter{width:min(300px,36vw)} /* (the frame's: the chordate passes the lens at the chapter's centre with its head at 64% of the width, past where a 300 px block on the right begins, at 60%) */ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) #ch-6{width:min(240px,29vw)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-film{margin-bottom:8px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-line{font-size:13px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-title{font-size:21px;line-height:1.16} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter--pillar .chapter-title{font-size:34px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-text{margin-top:6px;font-size:16px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter .eyebrow{margin-bottom:6px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter .actions{margin-top:12px} } /* Phones: the blocks take the width and hold in a band, low above the chapter bar or high under the page's bar (data-band), on a band of scrim. */ @media(max-width:809.98px){ :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-track{height:130vh} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail{--trackh:130vh;--h1:.3;--h2:.3;--t:calc(var(--nav) + 14px);--b:64px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-band]{top:calc(var(--t) - 50vh + var(--trackh) / 2 - var(--h1) * var(--trackh));bottom:auto} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-band]::before{content:none} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-band]::after{content:"";display:block;height:calc((var(--h1) + var(--h2)) * var(--trackh))} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-band="lower"]{top:auto;bottom:calc(var(--b) - 50vh + var(--trackh) / 2 - var(--h2) * var(--trackh))} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-band="lower"]::before{content:"";display:block;height:calc((var(--h1) + var(--h2)) * var(--trackh))} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-band="lower"]::after{content:none} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-band] > .chapter{top:var(--t);bottom:auto;width:auto;margin:0 var(--gutter)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-band="lower"] > .chapter{top:auto;bottom:var(--b)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter::before{inset:-8vh calc(-1 * var(--gutter));background:linear-gradient(rgb(5 6 8 / 0),rgb(5 6 8 / var(--scrim)) 30%,rgb(5 6 8 / var(--scrim)) 70%,rgb(5 6 8 / 0))} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-rail[data-tone="ink"] > .chapter::before{background:linear-gradient(rgb(250 247 241 / 0),rgb(250 247 241 / var(--veil)) 30%,rgb(250 247 241 / var(--veil)) 70%,rgb(250 247 241 / 0))} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-film{margin-bottom:10px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-line{font-size:14px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-title{font-size:clamp(22px,6.2vw,27px);line-height:1.16} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter--pillar .chapter-title{font-size:clamp(36px,11vw,46px)} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter-text{margin-top:8px;font-size:17px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .chapter .actions{margin-top:16px} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-index{display:none} :is([data-film="pending"],[data-film="live"],[data-film="settled"]) .film-hud{justify-content:flex-end} @supports (animation-timeline:view()){ :is([data-film="pending"],[data-film="live"]) .chapter{animation-range:cover 27.4% cover 72.6%} } } @media(prefers-reduced-motion:reduce){ html:not(.lenis){scroll-behavior:auto} .chapter{animation:none!important} .film-stage{transition:none} .intro-cue::after{animation:none;background:rgba(242,240,234,.5)} } @media print{ /* A WebGL canvas prints blank: print the essay. */ .film-stage,.film-hud,.intro-cue,.intro-actions{display:none!important} .intro{min-height:0!important;color:var(--ink)!important;background:none!important} .intro-title,.intro-lead{text-shadow:none!important} .intro-lead{color:var(--text-2)!important} .film-track{height:auto!important} .chapter-rail{position:static!important} .chapter-rail::before,.chapter-rail::after{content:none!important} .chapter{position:static!important;width:auto!important;opacity:1!important;color:var(--ink)!important;text-shadow:none!important;animation:none!important} .chapter::before{content:none!important} .chapter :is(.film-era,.chapter-line,.chapter-text,.eyebrow){color:var(--text-2)!important} .film-now-art{display:block!important} }