/* ═══════════════════════════════════════════════════════════════════════════ MARBLELENS · SECTIONS One book, different chapters (§12). Every chapter shares the typography, spacing, paper and physics; each performs its OWN mechanic: OPENING draw · write · assemble AI CONTENT cut · assemble · generate · transform BUILD grid · align · build · reflow HEADSHOTS crop · frame · mount · reveal STORY sequence · track · edit · play WORK mount · stack · peel · present PROCESS stamp · pin · mark · advance PRICING layer · lift · unfold CLOSER the book closes THE ACCENT SYSTEM IS PHYSICAL (§6, §8). A chapter's ground is its accent mixed into the paper at a few percent — so the accent ENTERS as a tinted sheet. It EXITS because the next chapter's own sheet is physically TORN over the top of it (.paper-cover). No gradient soup, no colour bleeding forward: at any scroll position the eye reads BASE + ONE ACCENT. ═══════════════════════════════════════════════════════════════════════════ */ /* PACING (§34). The page must not run at full intensity end to end: chapters whose whole argument is one visual event get less air around them, so the creative chapters and the breath between them are felt as different weights rather than as an even column of blocks. */ .section.tight { padding-block: calc(var(--sec-pad-y) * 0.62); } .section.tight .section-head { margin-bottom: calc(var(--sec-gap) * 0.8); } /* ── THE TINTED GROUND + THE TORN COVER ────────────────────────────────────*/ .section, .closer, .opening { --sec-bg: var(--paper); background: var(--sec-bg); position: relative; isolation: isolate; } /* an accented chapter tints its own stock. 3.5% — enough to feel like a different sheet was loaded, never enough to read as "a coloured section". */ .section[data-accent] { --sec-bg: color-mix(in srgb, var(--accent) 3.5%, var(--paper)); } .closer { --sec-bg: var(--paper); } /* accents gone, book closed */ /* the fresh sheet that covers the chapter above. The ragged boundary lives ENTIRELY ABOVE the section's own straight top edge, so the two meet seamlessly in the same colour and only the rip is visible. */ .paper-cover { position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 0; pointer-events: none; } .paper-cover .torn { position: absolute; left: -5%; right: -5%; top: -46px; height: 132px; background: var(--sec-bg); } .paper-cover .torn[data-tear="0"] { filter: url(#tear0); } .paper-cover .torn[data-tear="1"] { filter: url(#tear1); } .paper-cover .torn[data-tear="2"] { filter: url(#tear2); } .paper-cover .torn[data-tear="3"] { filter: url(#tear3); } /* content always sits above the ground layer */ .section > .container, .section > .canvas-stage, .closer > .container { position: relative; z-index: 1; } /* the fibre highlight along a fresh rip — the pale pulp of torn stock */ .paper-cover::after { content: ""; position: absolute; left: -5%; right: -5%; top: -8px; height: 3px; background: linear-gradient(var(--paper-hi), transparent); opacity: 0.55; filter: blur(0.5px); } /* ═══ 1 · OPENING — THE APPROVED LANDING TAKE, THEN THE REAL PAGE ══════════ The old opening was a two-column composition: a headline beside a coded "living surface" that posed between an editorial collage and a squared page. The approved take does that argument properly and photographically, so this whole block is now the presentation of ONE FRAME and the registration of real DOM against it. TWO ELEMENTS, ONE GRID CELL, ONE WIDTH VARIABLE. .lp-stage (the canvas) and .lp-ui (the real page) are siblings at grid-area 1/1 reading the same --lp-w. That is what makes registration exact with nothing measured in JS — and the UI has to be a SIBLING, because the stage clips and an overlay inside a clipping box could never reflow into stacked rows on a phone. */ /* ── THE TRAVEL ─────────────────────────────────────────────────────────── THE OPENING IS SCRUBBED, NOT PLAYED. The visitor drives the assembly: forward builds it, backward un-builds it through the identical frames, stopping freezes on the exact frame, and a jump resolves straight to it. There is no clock, no playhead and no video, so there is nothing that can keep running, restart or replay — the frame on screen is a pure function of where the page is scrolled to. Same architecture as .canvas-stage / .canvas-sticky below. THE CONSTANT IS vh PER SECOND OF TRAVEL, and it is the one already tuned on the AI CONTENT beat: 44.0 vh/s desktop, which puts ~2.5 frames under a wheel notch — the difference between dragging a timeline and moving through one. The take is 6.00s, so travel is 264vh and the section is that plus the one viewport the pin occupies. Re-derive all three breakpoints together if this changes; scaling one alone silently makes the phone scrub at a different speed from the desktop. */ .opening { position: relative; height: 364vh; /* 264vh travel (44.0 vh/s × 6.00s) + 100vh pin */ /* the take's own paper, sampled from the frame's edge (#e9e2d5 at the last frame, #ede3d7 at the first) rather than --paper (#ece6da). The difference is under 2%, which is the whole point: the film is CONTAINED, not cropped, and the few pixels of page either side of it have to be the same sheet or the containment reads as a letterbox. */ background: #ebe4d8; } .lp-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; /* --lp-w LIVES HERE, NOT ON .lp. The scroll cue is a sibling of the frame rather than a child (it is page furniture, not part of the composition) and still has to be placed against the frame's edges. Declared on .lp it is invisible to the cue — the calc silently fails to resolve and the cue drops to the middle of the section, which is exactly what happened once. */ --lp-w: min(100vw, calc(100svh * 16 / 9)); } /* ── THE BOX ────────────────────────────────────────────────────────────── One 16:9 box, as large as the viewport allows, and every coordinate below is a percentage of it. CONTAIN, NOT COVER: the composition runs edge to edge — the runner enters at the very top, the verbs sit at the very bottom, the collage reaches the right margin — so cover would crop away the parts of the take that carry the idea. Against a matched paper the letterbox is invisible. container-type gives .lp-ui its own cqw, so every registered coordinate is a fraction of the FRAME rather than of the viewport. A vw unit would decouple the type from the box it has to sit inside the moment height is what binds. */ .lp { position: relative; width: var(--lp-w); aspect-ratio: 16 / 9; display: grid; } .lp-stage { grid-area: 1 / 1; position: relative; overflow: hidden; } .lp-stage .ml-seq { display: block; width: 100%; height: auto; } .lp-ui { grid-area: 1 / 1; position: relative; container-type: inline-size; /* --ch is the fraction of the SOURCE FRAME HEIGHT this box is showing. 1 on desktop (the whole frame); on a phone the box is a top-anchored band and every y coordinate below is divided by it. */ --ch: 1; } /* ── REGISTRATION ───────────────────────────────────────────────────────── Percentages measured off the take's final frame, not chosen: title x 4.30-57.81 y 24.31-71.53 lede x 4.30-40.62 y 72.92-78.47 button x 4.30-18.59 y 84.72-91.94 alt x 25.78-34.22 y 85.83-89.31 verbs x 4.45-20.50 y 93.33-98.06 scroll x 86.88-96.33 y 93.33-96.39 y is written as `calc(% / var(--ch))` so one set of numbers serves the full frame and the phone band. */ /* .bridge-ui carries the same registered children, so it needs the same rule. Without it the bridge's verbs were position:static and simply flowed to the top of the box — measured at y 62 instead of y 801, i.e. under the header rather than on the composition's bottom-left. `top`/`left` are inert on a static element, which is exactly the kind of failure that looks like a z-index problem and is not one. */ .lp-ui > *, .bridge-ui > * { position: absolute; margin: 0; } /* THE BOX IS THE MEASURED INK BOX, and that is the thing to get right — a transparent element is never seen, but its box is what a focus ring draws and what a pointer hits, so it has to be the generated headline's own extent. Type metrics inside it are set to the take's rhythm rather than chased to the glyph: the frame is 56.25cqw tall, the take's line pitch is 15.8% of that (8.89cqw) and its cap height 12.8% (7.2cqw), which at Playfair's ~0.70 cap ratio is a 10.28cqw face on a 0.865 line. Three lines then measure 47.4% of frame height against the 47.22% measured off the frame. */ .lp-title { left: 4.3%; width: 53.6%; top: calc(24.31% / var(--ch)); height: calc(47.22% / var(--ch)); font-family: var(--serif); font-weight: 700; font-size: 10.28cqw; line-height: 0.865; letter-spacing: -0.015em; color: var(--ink); } /* NEVER LET A LINE WRAP. "motion, code" measures 53.5% of frame width, which is close enough to any width cap that a font fallback or a hinting difference can push it onto a second line — and a wrap does not degrade the block, it destroys it: every line below shifts by a full pitch and the registration is gone. The line breaks are authored in the markup; nothing else may break. */ .lp-title .line { display: block; white-space: nowrap; } .lp-title .accent-word { color: var(--accent); font-style: italic; } .lp-lede { left: 4.3%; width: 26%; top: calc(72.92% / var(--ch)); /* the take's own label metric: 27 characters spanning 25.7% of frame width in mono at --ls-label works back to a 1.3cqw face. Sized to the frame like everything else here, never to the viewport. */ font-family: var(--mono); font-size: 1.3cqw; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--graphite); } .lp-cta { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; } .lp-cta > * { position: absolute; pointer-events: auto; } .lp-btn { left: 4.3%; width: 14.3%; top: calc(84.72% / var(--ch)); height: calc(7.22% / var(--ch)); display: grid; place-items: center; font-family: var(--sans); font-weight: 600; font-size: 1.75cqw; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--paper-hi); cursor: pointer; } .lp-alt { left: 25.78%; width: 8.5%; top: calc(85.83% / var(--ch)); height: calc(3.48% / var(--ch)); display: grid; place-items: center; font-family: var(--sans); font-weight: 600; font-size: 1.75cqw; color: var(--ink); text-decoration: none; } /* ── .lp-ghost — REGISTERED OVER PIXELS THE TAKE STILL HOLDS ────────────── The take never stops painting the headline, the lede, the Start creating button or See what it makes. So these four elements must be real DOM — real text, real focus, real routes, real screen-reader output — WITHOUT painting a second copy of type that is already on screen. Transparent ink is the whole mechanism: exactly one visible rendering of every word (the generated one), nothing to double, and nothing that can visibly "swap" at activation, because activation changes no pixel at all. `color: transparent` rather than opacity/visibility deliberately — the element stays hit-testable, focusable and readable by assistive tech, which `visibility: hidden` and `opacity: 0` (plus its usual pointer-events removal) would all cost. */ .lp-ghost { color: transparent; } .lp-ghost.lp-btn { background: transparent; box-shadow: none; } .lp-ghost .accent-word { color: transparent; } /* interaction still has to be legible, and it cannot be legible in ink that is not there — so hover and focus are drawn AROUND the generated glyphs, never over them. A ring on the button's own measured box reads as the generated button lighting up, because it is exactly the generated button's edge. */ .lp-ui[data-live="1"] .lp-ghost:is(:hover, :focus-visible) { outline: 1.5px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--radius-sm); } .lp-ui[data-live="1"] .lp-btn:is(:hover, :focus-visible) { outline-offset: 0; } /* nothing in here is reachable until the frame it is registered against is the frame on screen. A control that is hittable before it is legible is worse than no control. */ .lp-ui[data-live="0"] { pointer-events: none; } .lp-ui[data-live="0"] :is(a, button) { visibility: hidden; } /* ── THE VACATED HALF — REAL VISIBLE INK ────────────────────────────────── DRAW / WRITE / ASSEMBLE and SCROLL are painted by the take and then removed by it (measured: 9.4% ink down to nothing across the last 0.3s), so real DOM paints them at full strength with nothing underneath to double. --ui-in is the staged handoff value written by js/opening.js; it only ever runs after the generated ink has gone. */ .lp-verbs { left: 4.45%; top: calc(93.33% / var(--ch)); /* measured off the frame the take last paints them in: DRAW 4.6-8.1%, WRITE 10.7-14.5%, ASSEMBLE 16.9-23.7% — a 1.2cqw face on a 2.5cqw gap. */ display: flex; gap: 2.5cqw; padding: 0; list-style: none; font-family: var(--mono); font-size: 1.2cqw; letter-spacing: var(--ls-label); color: var(--graphite); opacity: var(--ui-in, 0); } .lp-verbs li { position: relative; } .lp-verbs li + li::before { content: ""; position: absolute; left: -1.4cqw; top: 50%; width: 0.25cqw; height: 1px; background: currentColor; } .scrollcue { position: absolute; z-index: 2; right: calc(50% - var(--lp-w) / 2 + var(--lp-w) * 0.0367); bottom: calc(50% - var(--lp-w) * 0.5625 / 2 + var(--lp-w) * 0.5625 * 0.0194); display: flex; align-items: center; gap: 0.6em; font-family: var(--mono); font-size: 0.58rem; letter-spacing: var(--ls-label); color: var(--graphite-2); text-decoration: none; /* ON AT REST, GONE THE MOMENT THE SCRUB MOVES. It used to ride --ui-in with the rest of the vacated chrome, which was right for a film that played itself: the cue belonged at the end, pointing out of the beat. Driven by the visitor it belongs at the START, because it is the only thing telling them the assembly is theirs to move. js/opening.js takes it out by u 0.05, which is also well before the take paints its own SCROLL mark at u 0.65. */ opacity: var(--cue, 1); transition: opacity var(--dur) var(--ease-out); } /* app.js retires the cue once the visitor has actually started scrolling; two classes beat one custom property, so this stays the winning rule */ .scrollcue.gone { opacity: 0; } .scrollcue i { display: block; width: 1px; height: 22px; background: currentColor; transform-origin: top; animation: cue 2.1s var(--ease-out) infinite; } @keyframes cue { 0%,100% { transform: scaleY(0.3); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } } /* ── NO SEQUENCE, NO GHOSTS ─────────────────────────────────────────────── Registration is only meaningful against a frame that exists. If the manifest or the frames cannot be fetched, transparent type over an empty box is an invisible homepage — so js/opening.js drops the whole registration and this leaves ordinary ink on paper. It is the same shape the narrow breakpoint renders, which is why it needs so little: a stack of real, legible DOM. */ .lp-fallback { --lp-w: min(100vw, 78rem); aspect-ratio: auto; display: block; padding: clamp(6rem, 16vh, 9rem) var(--gutter) clamp(3rem, 8vh, 5rem); } .lp-fallback .lp-stage { display: none; } .lp-fallback .lp-ui { display: block; } .lp-fallback .lp-ui > *, .lp-fallback .lp-cta > * { position: static; } .lp-fallback .lp-title { width: auto; font-size: var(--t-hero); line-height: var(--lh-tight); color: var(--ink); } .lp-fallback .lp-title .accent-word { color: var(--accent); } .lp-fallback .lp-lede { width: auto; margin-top: var(--s-5); font-size: var(--t-label); color: var(--graphite); } .lp-fallback .lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); inset: auto; } .lp-fallback .lp-btn { width: auto; height: auto; padding: 0.85em 1.4em; font-size: var(--t-body); background: var(--accent); color: var(--paper-hi); } .lp-fallback .lp-alt { width: auto; height: auto; font-size: var(--t-body); color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; } .lp-fallback .lp-verbs { margin-top: var(--s-6); gap: clamp(0.9rem, 2vw, 1.8rem); font-size: var(--t-label); opacity: 1; } .lp-fallback .lp-verbs li + li::before { left: -0.9rem; width: 3px; } /* ── NARROW SCREENS REFLOW, THEY DO NOT SHRINK (≤ 900px) ────────────────── A 16:9 film contained in a portrait viewport is a thin strip over a lot of empty paper, and the desktop answer — register everything against the frame — would then be a photograph of a website at about a third of readable size. That is the exact failure this breakpoint exists to avoid. So the frame becomes a TOP-ANCHORED BAND of its own top 73% (aspect 2.44), and that number is not a taste value: the take's baked lede begins at y 72.92%, so 73% is the last row that keeps the runner, the whole headline and the whole ochre sweep while leaving every baked word below it OUT OF FRAME. Everything the crop drops — the lede, both buttons — is then supplied by real DOM at a real size, in a real reading order, with nothing duplicated: the generated copies are not on screen to duplicate. The headline alone stays registered over the band, because it is the one piece of type the crop keeps. --ch: 0.7307 rescales its y for the band. */ @media (max-width: 900px) { /* 35.54 vh/s × 6.00s = 213vh travel, + the pin — the same rate the AI CONTENT beat uses at this width. Derived with the desktop number, never alone. */ .opening { height: 313vh; } .lp-pin { place-items: stretch; /* ── START, NOT CENTRE — this is what registers the seam on narrow ────── Centred, the band's y depends on how tall the DOM rows under it happen to be, because the whole group is centred as one. The bridge pin has no such rows, so it centred a lone band and the same picture landed 66px lower on a tablet and 49px lower on a phone at the exact handover. Measured, both bands were the right SIZE (768x316 / 390x160) and the wrong PLACE. Anchored to the top with a shared pad, both bands start at the same offset by construction and the rows simply flow beneath. --pin-pad is read by .bridge-pin too, so the two can never drift apart again. */ align-content: start; --pin-pad: clamp(5rem, 13vh, 7rem); padding-block: var(--pin-pad) clamp(3rem, 8vh, 4.5rem); --lp-w: 100vw; } .lp { width: 100%; aspect-ratio: auto; grid-template-rows: auto auto auto auto; row-gap: clamp(1.1rem, 3.5vw, 1.9rem); } /* the band's aspect is the frame's DIVIDED by the crop it keeps: 1.7778 / 0.7307 = 2.433. It must match `aspect.narrow` in js/opening.js — that value is what makes the player take a 73%-tall window, and this one is what gives the window somewhere to land. THE BRIDGE SHARES THIS EXACT NUMBER (.bridge-stage below, and aspect.narrow in js/bridge.js): the two beats hand over on one geometry, so all four places move together. */ .lp-stage { grid-area: 1 / 1; aspect-ratio: 2.433; } .lp-ui { display: contents; --ch: 0.7307; } /* the one registered element left: it sits in the band's own cell */ .lp-title { grid-area: 1 / 1; position: absolute; } /* everything else becomes ordinary, readable, full-size DOM */ .lp-lede, .lp-cta, .lp-verbs { position: static; left: auto; top: auto; width: auto; } .lp-lede { grid-row: 2; padding-inline: var(--gutter); font-size: var(--t-label); } .lp-cta { grid-row: 3; padding-inline: var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); inset: auto; pointer-events: auto; } .lp-cta > * { position: static; } .lp-btn { width: auto; height: auto; padding: 0.85em 1.4em; font-size: var(--t-body); background: var(--accent); color: var(--paper-hi); } .lp-alt { width: auto; height: auto; font-size: var(--t-body); color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-color: var(--line); } /* ── UN-GHOSTING, AND WHY IT HAS TO BE WRITTEN LIKE THIS ──────────────── Below this breakpoint the crop leaves the take's own lede and buttons out of frame, so there are no generated pixels for these three to hide behind: they are ordinary controls and must carry real ink. The obvious way to say that — a plain `.lp-btn { background: var(--accent) }` in here — SILENTLY LOSES, because `.lp-ghost.lp-btn` is two classes to its one and specificity beats source order. That shipped once as a "Start creating" with no fill and near-invisible text on every phone and tablet. Match the ghost rule's specificity or it does not apply. Only .lp-title stays ghosted here, since the headline is the one piece of type the band keeps. */ .lp-lede.lp-ghost { color: var(--graphite); } .lp-btn.lp-ghost { color: var(--paper-hi); background: var(--accent); } .lp-alt.lp-ghost { color: var(--ink); } .lp-ui[data-live="0"] :is(a, button) { visibility: visible; } .lp-cta { pointer-events: auto; } /* THE PHONE ASSEMBLES TOO, ON THE TAKE'S OWN BEAT. These rows are outside the film, so left alone they would be a finished page sitting under a blank canvas for the four seconds before the artwork catches up. --ui-body is written by js/opening.js across the exact window in which the take paints its own lede and buttons (u 0.65-0.72), so the words arrive here at the moment they arrive on desktop — where they are the generated pixels themselves. Same beat, different mechanism. */ .lp-lede, .lp-cta, .lp-verbs { opacity: var(--ui-body, 1); } .lp-verbs { grid-row: 4; padding-inline: var(--gutter); gap: clamp(0.9rem, 4vw, 1.8rem); font-size: var(--t-label); /* NO `opacity: 1` HERE. It was overriding the --ui-body rule above on equal specificity by being later in the block, so the verbs were the one row that sat there fully lit under a blank canvas from the very first frame while the lede and buttons correctly waited for the take's own beat. */ } .lp-verbs li + li::before { left: calc(-0.5 * clamp(0.9rem, 4vw, 1.8rem) - 1px); width: 3px; } .scrollcue { display: none; } } /* 31.59 vh/s × 6.00s = 190vh travel, + the pin. Third of the three rates. */ @media (max-width: 560px) { .opening { height: 290vh; } } /* ═══ 1b · THE PAINT BRIDGE — the homepage becomes AI CONTENT ══════════════ The approved bridge take, scrubbed on the same transport as everything else. It carries no typography of its own in the DOM: the landing's registered type is in the pin above and has scrolled away, AI CONTENT's real section head is below and has not arrived, and the take clears its own generated words off the top of frame before its last sampled second. THE SPAN IS SHORT ON PURPOSE. 130vh of travel against the opening's 264vh — about 27 vh/s rather than the 44 vh/s the chapters use. A join is not a chapter: it has to feel like the page giving way, so every wheel notch has to move real paint. At 130vh over 60 frames a 100px notch advances ~5 frames. The take's own static head was trimmed in extraction rather than being given cheap scroll here, so there is no dead travel at either end to absorb. */ .bridge { position: relative; /* ── THE SEAM IS A HANDOVER AT ONE SHARED RESTING POSITION ──────────────── Both pins park their 16:9 canvas at exactly the same place — measured 1440x810 at x 0, y 45 in a 900px viewport, because both are a contained 16:9 box centred in a 100svh sticky pin. The boxes were never the problem. THE PROBLEM WAS A FULL VIEWPORT OF SCROLL BETWEEN THEM. .opening's travel ended at scrollY 2376 while .bridge's pin could not engage until its own top reached 0 at scrollY 3276 — a 900px gap in which the outgoing frame slid from y 45 up to y -955 while the incoming one climbed from y 845 to y 45. Same image, same size, never on screen together: the seam read as the page scrolling off and a new one arriving, which is exactly what it must not do. Pulling .bridge up by one pin height makes its sticky engage on the very scroll offset where .opening's travel ends, so the handover happens with both canvases at that shared resting position and neither ever moves. It also removes 900px of dead scroll. The -100vh fallback matters on phones, where svh and vh differ — the margin has to cancel the pin height in the SAME unit the pin was sized in. */ margin-top: -100vh; margin-top: -100svh; /* 70vh travel + 100vh pin. The beat is 2.54s now — it stops on the boundary frame the owner chose partway through the take rather than running to the take's own end — so the span came down with it (it was 130vh for 4.64s). Same ~27 vh/s as before: a join has to give way under every notch, and a span sized for a longer beat would be dead travel at the tail. */ /* 190vh travel + 100vh pin, at the usual ~26 vh/s for 7.31s of motion (1.23-8.54s of the 070542 take). IT STOPS AT SOURCE FRAME 206 ON PURPOSE. From frame 210 the take begins baking its OWN page chrome — measured, nav ink jumps 1.9% -> 4.3-7.5% — and those last frames carry a second MARBLELENS/HOME/ABOUT/CONTACT bar under the real header plus garbled generated type ("Esserl, one idea coonc, adive."). Ending on 206 leaves the settled bottle composition, which has no baked chrome at all, and the real AI CONTENT chapter below supplies the heading in real DOM as it always has. No still was substituted to achieve this; the span simply ends on an approved frame. */ height: 290vh; /* NO BACKGROUND ON THE SECTION — it would cover the beat above it. .bridge is positioned and comes after .opening in the DOM, so with the negative margin its own background painted ABOVE .lp-pin's canvas for the whole overlapping viewport: the landing's last screenful of film rendered as flat paper. Measured in the hit-test stack as `bridge` sitting above `ml-seq ml-landing`. The ground belongs to the pin, and only once the pin has actually taken over. */ } .bridge.is-armed .bridge-pin { background: #ebe4d8; } .bridge-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; --bw: min(100vw, calc(100svh * 16 / 9)); } /* invisible until its pin has actually reached the resting position — see the ownership block in js/bridge.js. Unpinned it sits partway down the screen during the landing's last viewport and would paint over the live beat. */ /* 2.0, not 16/9 — the take's baked browser chrome is cut at extraction, so the shipped frame is 1280x640. Must match wideAspect in js/bridge.js. */ .bridge-stage { position: relative; width: var(--bw); aspect-ratio: 2; overflow: hidden; visibility: hidden; } .bridge.is-armed .bridge-stage { visibility: visible; } /* the same cell and the same box as the stage, so the verbs sit on exactly the coordinates they occupied a pixel earlier in the landing's pin. Everything about their look comes from .lp-verbs — one definition, two pins. */ .bridge-stage, .bridge-ui { grid-area: 1 / 1; } .bridge-ui { position: relative; width: var(--bw); aspect-ratio: 16 / 9; container-type: inline-size; --ch: 1; pointer-events: none; visibility: hidden; } .bridge.is-armed .bridge-ui { visibility: visible; } .bridge-stage .ml-bridge { display: block; width: 100%; height: auto; } /* ── NARROW SCREENS CROP WIDTH, NOT HEIGHT — the opposite of the opening ── The landing take's band keeps its top 73% because its subject is laid out ACROSS the frame. This take's subject TRAVELS DOWN it: the shear, the drips and the window opening are all vertical events, so height is the axis that must survive and width is what gives. A full-height 70% centre crop, pushed 5% left so the take's own kicker and "Watch one idea come alive." (which start at x 0.12) stay inside it while the drips and the torn window (out to x 0.82) stay in too. 1.7778 x 0.70 = 1.2444, and that number must match `aspect.narrow` in js/bridge.js. */ @media (max-width: 900px) { .bridge { height: 265vh; } .bridge-pin { --bw: 100vw; /* the landing's narrow placement, to the pixel — same anchor, same pad */ place-items: stretch; align-content: start; --pin-pad: clamp(5rem, 13vh, 7rem); padding-block: var(--pin-pad) clamp(3rem, 8vh, 4.5rem); } /* the pour-and-bottle window — see narrowAspect in js/bridge.js */ .bridge-stage { width: 100%; aspect-ratio: 1.16; } /* narrow puts the verbs in flow under the band, exactly as the landing does, so the row keeps its place across the seam here too */ .bridge-ui { display: contents; --ch: 0.7307; } .bridge-ui .lp-verbs { grid-row: 2; } } @media (max-width: 560px) { .bridge { height: 250vh; } } /* the continuation is 3.25s against the bridge's 2.71s, so it gets proportional travel at the same ~26 vh/s. Same three breakpoints, derived together. */ /* 120vh travel, deliberately TIGHTER than the ~26 vh/s the other beats use. This take is 6.96s but its motion is gentle — peak interframe delta 1.33 against 12-24 elsewhere — so at the house rate it would be 1.8 screens of almost no visible change, which is dead scroll by any other name. Compressed to ~17 vh/s every notch moves the pour and the fill visibly. */ /* nothing to scrub, nothing to travel through — same law as the opening */ .bridge.is-static { height: auto; } .bridge.is-static .bridge-pin { position: static; height: auto; } .bridge.bridge-off { display: none; } /* SEQUENCE OWNERSHIP. The two sections now overlap by one viewport, so once the bridge has moved off its first frame the landing pin is still down there sliding away underneath it. The bridge paints over it (later in DOM order, both sticky, both z-index auto) but "covered" is not "gone" — a rounding gap at an edge would show a second composition drifting. Hidden from the first step instead, and restored the moment progress returns to 0, so reverse is unaffected: this is read from progress, never latched. */ /* whoever owns the ground hides every beat above it, so nothing older is left sliding away underneath. Explicit per beat rather than clever: there are two of them and the list is the whole story. */ .bridge-owns .lp-stage { visibility: hidden; } @media (prefers-reduced-motion: reduce) { .bridge { height: auto; } .bridge-pin { position: static; height: auto; } } /* ── DROP THE PIN WHEN THERE IS NOTHING TO SCRUB ────────────────────────── Reduced motion gets the finished composition and a live page immediately (js/opening.js seeks straight to the last frame), and the fallback has no sequence at all. In both cases the travel would be three empty screens the visitor has to scroll past to reach the site — the same trap .canvas-stage avoids with .is-static. Height collapses to the content. */ .opening.is-static { height: auto; } .opening.is-static .lp-pin { position: static; height: auto; } .lp-fallback-host { height: auto !important; } .lp-fallback-host .lp-pin { position: static; height: auto; overflow: visible; } @media (prefers-reduced-motion: reduce) { .opening { height: auto; } .lp-pin { position: static; height: auto; } } /* ═══ SHARED · the media window ════════════════════════════════════════════ Every picture on the page is mounted behind a paper window. Until its file decodes the window keeps a developing-tray hatch — never a broken image, so this ships before the footage exists (§40, media slots ship empty). */ .mw { position: relative; overflow: hidden; background: var(--paper-deep); border-radius: var(--radius-sm); box-shadow: var(--sh-press); } .mw::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,0.22), transparent 60%), repeating-linear-gradient(115deg, var(--paper-deep) 0 10px, var(--paper-lo) 10px 20px); animation: develop 2.4s var(--ease-out) infinite alternate; } .mw.loaded::after { display: none; } .mw img, .mw video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; /* stepped, not a smooth dissolve — a print arriving, in held frames */ transition: opacity 0.5s steps(5, end); } .mw.loaded img, .mw.loaded video { opacity: 1; } /* ═══ 2 · AI CONTENT → BUILD YOUR WEBSITE — THE FILM ═══════════════════════ ONE APPROVED TAKE, SCRUBBED. Everything this beat shows is decoded source pixels from hf_20260815_103834 (30.04s, 721 frames), extracted into four sequences by site/tools/extract-film.py and driven by js/film.js. WHAT THIS BLOCK REPLACED. It used to be ~600 lines describing a CODED depiction of the same idea: a graphite construction on a 2D canvas, a photograph arriving in six torn
s with their own crossfade, a