/* Self-hosted variable font (replaces the Google Fonts call). The single TTF covers the whole 100–900 weight range used across the page. */ @font-face { font-family: "Lexend Deca"; src: url('/LexendDeca-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; font-family: "Lexend Deca", sans-serif; font-weight: 600; text-decoration: none; } /* ── Layout model ────────────────────────────────────────────────────────────── The page is a "stage": a box exactly the size of the visible area, which never scrolls and never moves. Every scroll happens INSIDE it — in #scroller, and independently in the image panel. Two facts make the whole thing static, and they depend on each other: 1. THE DOCUMENT IS LOCKED (html, body { overflow: hidden }). Because it can never scroll, the browser's chrome can never retract — so the visible height is a CONSTANT, not something to track. That constant is --stage-h, and it is plain CSS: no JavaScript, no measurement, no resize listeners. (The cost is real and deliberate: the URL bar will never collapse. Undoing that means unlocking the document and making it the scroller again — see the note on #scroller.) 2. IS THE CONTAINING BLOCK for the stage layers, because it is position:relative and they are position:absolute. Since the document cannot scroll, absolute and fixed are behaviourally identical here — and absolute resolves against the stage box, which is what we want, whereas fixed resolves against the initial containing block, which on mobile is the LARGE viewport (chrome retracted) and would put anything bottom-anchored behind the chrome. This is load-bearing: it is why #navDiv's bottom clears the browser bar. An earlier version got the same effect with transform:translateY() on , which works only as a side effect (a transform establishes a containing block for fixed descendants) and drags in hit-testing that doesn't follow the paint, a forced stacking context and a whole-page compositing layer. Don't go back. viewport-fit=cover (index.php) extends the stage under the system bars, so anything anchored to an edge pays it back with env(safe-area-inset-*) — see #navDiv and #contactDiv. On Chrome 135+ Android that inset is live and non-zero in a normal tab, not only in an installed PWA. TWO ARRANGEMENTS, chosen by ONE condition (see the single two-column block near the bottom of this file; everything above it is the stacked base): stacked — image panel across the top half, headline list below it. The selection line sits on the panel's bottom edge. Needs vertical room, since it spends half the stage on the panel. 2-column — image panel is a left column, headline list a right column. The selection line moves to the top of the scroller, so the topmost headline is the selected one. Spends width instead of height. Which is why the condition is not a width alone: a phone held sideways is wide and short, so it wants the 2-column arrangement for the same reason a desktop does. The block spells this out. Every SIZE on the page comes from the fluid scale in :root below — there is no second breakpoint, and no bare px font-size anywhere. Anything that has to fit vertically as well as horizontally clamps against svh too; see the note there. Stacking order (page level; .still has its own local ladder, see below): 0 #intro fullscreen video, behind everything 1 #scroller the one real scroller 2 .content-buffer image panel, over the scroller 3 #navDiv 4 body::before top edge mask 5 body::after contact scrim — over the mask, so the dimming has no seam 6 #contactDiv contact card, the only thing above the scrim */ :root { /* ── Geometry ── */ /* THE STAGE HEIGHT — the one number the whole layout derives from. svh is the viewport with the browser chrome EXPANDED, which (see the layout model above) is the only state this page can ever be in, so this is exact rather than an estimate. dvh where available: it is identical while the chrome is up, but self-corrects in the cases svh cannot see — Chrome's dynamic bottom "chin" retracting, or a manual "hide toolbar". It cannot jitter here, because jitter comes from scrolling and this document can't. Do NOT reintroduce 100vh: it is an alias for 100lvh (chrome retracted) and is exactly the "too tall, bottom swallowed" bug. */ --stage-h: 100svh; /* The divider line where the image panel ends. Desktop overrides it (the panel becomes a column). */ --divider: calc(var(--stage-h) * (11 / 20)); /* Breathing room between the selection line and where a headline settles. */ --snap-offset: 0px; /* THE selection line: where a headline settles and, by definition, which headline counts as active. Everything downstream derives from this — #scroller's scroll-padding-top, both spacers, and script.js, which reads it back off the resolved scroll-padding-top rather than re-deriving the geometry from the panel. */ --snap-line: calc(var(--divider) + var(--snap-offset)); /* How far the list runs on past the selected headline before it is cut off. A section hugs its text and carries no vertical spacing at all (the * reset at the top zeroes every margin, and #scroller section sets only side padding), so one section IS one line box of --fs-headline — the 1.25 is Lexend Deca's `normal` line-height. Adjust --sections-ahead alone; the cut follows the fluid type at every size because --section-h is derived, not typed in. #scroller masks itself to --list-cut. */ --section-h: calc(var(--fs-headline) * 1.25); --sections-ahead: 6; --list-cut: calc(var(--snap-line) + var(--sections-ahead) * var(--section-h)); /* How long the cut takes to happen. Measured BACK from --list-cut, so that stays the honest end of the list and --sections-ahead keeps meaning what it says: one section's worth of fade = four solid headlines and a fifth that dissolves. 0px puts the hard edge back. */ --list-fade: calc(var(--section-h) * 3); /* Desktop two-column split: the panel's width/height and its left inset. The headline column takes the rest, so these three are the only numbers that define the desktop layout. Unused on mobile. */ --panel-width: 45%; --panel-height: 80%; /* Zero, deliberately: the panel already carries --grid-gap of padding of its own (see .content-buffer), so with no margin on top of it the space to the LEFT of the images is exactly the space BETWEEN them — the stills sit in one even 5px frame instead of a wide left margin and hairline gutters. Still a token, and still the only inset in the layout: the headline column and the top mask are both positioned off it, so all three move together if it ever goes back to being a number. */ --panel-inset: 0px; --max-width: 1600px; /* ── Fluid scale ─────────────────────────────────────────────────────────── Every size that used to be a bare px literal now comes from one of these, and every one of them is a clamp(): a floor for the narrowest phone, a viewport-linked middle term, and a ceiling so nothing runs away on a 4K desktop. Two rules govern how they're written: 1. The middle term is `rem + vw`, never a bare vw. A bare vw ignores the user's browser font-size entirely — the value stops responding to text-zoom, which is how "fluid type" so often ends up an accessibility regression. Keeping a rem in the sum preserves that response. 2. Several carry a `min(…, Nsvh)` cap. Width alone is the wrong input for anything that has to FIT vertically: a phone in landscape is 926px "desktop-wide" and 428px pocket-short, and a width-only clamp hands it a headline sized for a monitor. The svh term is the second axis, so the shorter dimension wins whenever it's the binding one. svh (not vh) for the same reason --stage-h uses it: this document can't scroll, so the chrome is always up and svh is exact rather than optimistic. The anchors are chosen so a typical phone (~390px) gets what it gets today — this widens the range at both ends, it doesn't shift the middle. */ --fs-headline: clamp(2rem, min(1.37rem + 3.34vw, 9svh), 3.25rem); --fs-nav: clamp(0.8125rem, 0.71rem + 0.52vw, 1rem); --fs-cta: var(--fs-nav); /* the CONTACT button; desktop blows it up */ --fs-credits: clamp(0.75rem, 0.68rem + 0.35vw, 1rem); --fs-body: clamp(0.75rem, 0.7rem + 0.25vw, 0.95rem); --fs-title-lg: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem); --fs-link: clamp(1.125rem, 0.95rem + 0.9vw, 1.75rem); /* ── Spacing ── --gutter is the page's side margin: 10px on a 320px phone (i.e. unchanged), opening up to 24px by desktop. Everything that touches a page edge uses it, so the whole page breathes from one number. */ --gutter: clamp(0.625rem, 0.35rem + 1.4vw, 1.5rem); /* The gap between stills is deliberately NOT fluid. It's a hairline grid rule, not spacing — scaling it makes the panel look gappy on a tablet without making anything fit better, and it's baked into .still.portrait's width and into the srcset `sizes` in index.php. Keep the three in step. */ --grid-gap: 5px; /* Minimum comfortable hit area (WCAG 2.5.5 AAA / iOS HIG / Material). Applied as a min-height + centring rather than padding, so it can enlarge a control without changing how the control looks. */ --tap: 44px; /* ── Contact transition ─────────────────────────────────────────────────── The contact overlay is TWO layers that move as one gesture: the black (body::after) and the card over it (#contactDiv). On the stacked layout they wipe in from the left, black first and card a beat behind, so the black reads as the card's own shadow arriving ahead of it. Closing runs it backwards — card out first, black last — which is why the lead delay is declared per direction rather than as one number. All of it is tokens, and the two-column block redefines them rather than restating the rules. That is the whole reason they exist: on desktop the card is a centred box, not a sheet, so it has nowhere to slide FROM — there --sheet-out and --sheet-in are the same centring transform, the wipe silently becomes a no-op, and the black goes back to being a dim that fades. One set of rules, two behaviours, no duplicated declarations. */ --sheet-ms: 320ms; /* the card's travel */ --sheet-lead: 120ms; /* how long the card waits for the black, opening */ --sheet-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --sheet-out: translateX(-100%); --sheet-in: translateX(0); --scrim-ms: 320ms; /* the black's travel */ --scrim-lead: 120ms; /* how long the black waits for the card, closing */ --scrim-bg: #000000; --scrim-out: translateX(-100%); --scrim-in: translateX(0); /* The stacked black is opaque and moves; the desktop dim doesn't move and fades instead. Both states are tokens so one rule covers both. */ --scrim-o-out: 1; --scrim-o-in: 1; /* ── Colours ── --ink is the real text colour and is never themed; --ink is the one body.intro-active flips to white. Anything that keeps its own light background while the video is up (the contact card) points back at --ink. */ --ink: #2C2C2C; --background: #EBEBEB; --off-background: #e3e3e3; /* Loading placeholder: how long one sweep through a still's sampled colours takes (see @keyframes tint). Shared by the stills and the intro placeholder. */ --tint-dur: 32s; } @supports (height: 100dvh) { :root { --stage-h: 100dvh; } } html, body { overflow: hidden; /* the document lock — see the layout model */ background-color: var(--background); height: var(--stage-h); } body { /* The stage box, and the containing block for every absolutely-positioned layer below. Both halves are load-bearing — see point 2 of the layout model. */ position: relative; /* ── Y AXIS ONLY, and that goes for every overscroll-behavior on this page ── `overscroll-behavior` is a shorthand: writing it unqualified sets the X axis too, and a non-auto X is precisely what tells the browser to suppress its horizontal swipe-to-go-back. Every one of these declarations was written for a vertical reason — no rubber-band here, no scroll chaining out of the panel and the contact sheet — and the back gesture was collateral damage, on the main page where there is nothing to go back to but the site you came from. There is nothing to lose by naming the axis: this document cannot scroll at all, and the three scrollers below are all overflow-x:hidden, so the X axis has no overscroll of its own to govern in the first place. */ overscroll-behavior-y: none; /* no rubber-band */ } /* The one real scroller: the full stage, with the image panel laid over its top half. Headlines live in normal flow in here between two tall spacers. position:absolute, not fixed — the document can't scroll, so they render identically, but absolute resolves against (the stage) instead of the initial containing block (the large viewport). Same for every layer below. */ #scroller { position: absolute; top: 0; left: 0; width: 100%; height: var(--stage-h); overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: none; /* axis named on purpose — see body */ scroll-behavior: smooth; /* Native CSS scroll-snap on all devices — one headline per step. */ scroll-snap-type: y mandatory; /* Aligns the snap landing and anchor-link jumps to the selection line. script.js reads this back to decide which headline is active. */ scroll-padding-top: var(--snap-line); z-index: 1; /* The list stops --sections-ahead headlines past the selection line. A mask, not a shorter box: the mask applies to the scroller's OWN box, so the edge is a fixed place on the stage and the headlines scroll up under it, while the sections beyond it keep their height, their snap positions and their scrollable extent — they are simply not painted. Sizing the element down instead would take the scroll range with it. The last headline dissolves over --list-fade rather than being sliced: a hard edge cuts glyphs in half mid-scroll, which reads as a rendering fault rather than as the list ending. Set --list-fade to 0 for the hard cut. */ -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--list-cut) - var(--list-fade)), transparent var(--list-cut)); mask-image: linear-gradient(to bottom, #000 calc(var(--list-cut) - var(--list-fade)), transparent var(--list-cut)); } /* ── Image area: two stacked buffers, only .active is visible ───────────────── Mobile: full width across the top half. Desktop: a left column (see the desktop block). */ .content-buffer { position: absolute; top: 0; width: 100%; max-width: var(--max-width); height: var(--divider); /* Explicitly one-axis. `overflow: auto` let a too-wide child (a long .credit-name was the case that surfaced it) turn the panel into a horizontal scroller, which on a touch device steals the horizontal swipe. */ overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; /* axis named on purpose — see body */ scroll-snap-type: y proximity; padding: 0 var(--grid-gap); /* Wrapping row, not a column: it's what lets two portrait stills share a row (see .still.portrait). Landscape stills are width:100%, so they still take a row each and the reading order is unchanged. align-items:flex-start is load-bearing — the default `stretch` would set each still's height to the row's, overriding the aspect-ratio that reserves its space. */ display: flex; flex-flow: row wrap; align-items: flex-start; column-gap: var(--grid-gap); opacity: 0; pointer-events: none; z-index: 2; /* above #scroller, so the panel scrolls itself */ background-color: var(--background); border-bottom: 5px solid var(--background); /* No height transition. The panel's height derives from --stage-h, exactly like both spacers and #scroller — but those have no transition, so animating this one made the panel lag the rest of the stage by 300ms on every viewport change and tore the divider line. Now nothing animates and they move as one. */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* Hide scrollbar for Chrome, Safari and Opera */ .content-buffer::-webkit-scrollbar { display: none; } .content-buffer.active { opacity: 1; pointer-events: auto; } /* Off-screen buffers (prefetched, cached, or simply not the active one) skip their own layout and paint entirely. content-visibility:hidden, NOT :auto — every buffer is absolutely positioned at top:0 over the same box, so :auto would judge them on-screen and skip nothing. hidden also pauses their colour-cycle and keeps their lazy stills from fetching until shown. Width and height are explicit (above, and in the desktop block), so size containment has nothing to suppress; the srcset `sizes` are viewport-relative (vw), so the eager hero still picks the right variant while hidden. Positioning + credit-fitting happen on activation (activateBuffer), because a hidden buffer's geometry reads 0. */ .content-buffer:not(.active) { content-visibility: hidden; } /* ── Intro: looping self-hosted background video, fullscreen behind everything ── Not a .content-buffer — it's a full-stage background sized exactly like #scroller, sitting BEHIND the transparent #scroller. Decorative → pointer-events none so touches reach #scroller. Fades out when .active is removed; the