/* ============================================================ 05 · The Reality (stats). Unpinned; the fall is driven by travel through the viewport. Ported from 04_Stats/agency-stats_2.html. Spec: Board Specs/landing-04-stats.md ============================================================ */ /* overflow:clip, not base.css's hidden (Julian, 10 Sep 2026): hidden makes the chapter a scroll container, and the fall's view timeline (below) would then measure the board against the chapter's own scrollport, which never scrolls — the timeline sat inactive. clip clips the same and leaves the page as the scroller. */ #reality{--chapter-bg:var(--moss);color:var(--cream);overflow:clip} /* the 1440×1488 frame at full width; cqw units are board-relative */ #reality .board{position:relative;width:100%;aspect-ratio:1440/1488;overflow:hidden; background:var(--moss);container-type:size;container-name:b} /* the layers are board-positioned; the three wrappers (.stack .slot .hole) are display:contents here — see the html */ #reality .board :is(.head,.rule,.n,.t,.circle,.people,.mask){position:absolute} #reality .stack,#reality .slot,#reality .stats,#reality .hole{display:contents} #reality .board img{display:block} /* width narrowed from the spec's 42.067% (605.77 board px): the kit's Forma DJR DISPLAY is narrower than the drawn Deck, so at 605 "first" crept onto line 1. 39.2% (564 px) holds the drawn break — the Display wrap window at 48px is [528, 603) px (measured 25 Aug 2026). */ #reality .head{left:50.677%;top:9.409%;width:39.2%; font-size:3.3333cqw;line-height:1.0833em;letter-spacing:-.02em;font-weight:500} #reality .rule{left:50.694%;width:42.292%;height:1px;background:currentColor;opacity:.4} #reality .n{font-family:var(--display);font-weight:900;color:var(--beige); font-size:5.5556cqw;line-height:1;letter-spacing:-.02em} #reality .t{font-size:1.6667cqw;line-height:1.25em;font-weight:400} /* body/L Regular, no tracking (brand book, 10 Sep 2026; was −.02em) */ /* the citation under each stat: block inside the caption, so it sits on the caption's left edge below its last line. Size matches the depth section's captions (clamp(12px,1vw,15px) — cqw = vw on this board); colour inherits the caption's. */ /* left on the caption's edge, clear air above, the caption's face one weight up (Julian, 26 Aug 2026). Lifted from clamp(12px,1cqw,15px)/500 to clamp(14px,1.25cqw,18px)/600 — it read too thin and small — while staying well under the caption's 24px so it still reads as subtext. Dimmed like the board's Depth captions (paper, greyed on the ground) so it sits back behind the caption. .6 matches the comp's look on cobalt but paper at .6 over moss is ~3.6:1; 0.75 is the lowest that clears the §8 4.5:1 body-text rule (Julian, 2 Sep 2026). Undimmed 10 Sep 2026: the book's pairings are full-strength colours. No px cap: the caption is pure cqw, and an 18px ceiling left the citation at 0.56 of it on a 1920 window (0.75 on the 1440 board); the 14px floor stays for narrow windows. Then eased from 1.25cqw to 1.1cqw (16px on the board, ~0.66 of the caption) — at full board scale 0.75 read a touch big (Julian, 2 Sep 2026) */ #reality .t .src{display:block;margin-top:1.4cqw; font-size:max(14px,1.1cqw);line-height:1.3;font-weight:400} /* body/S Regular (brand book); full strength since 10 Sep 2026 — .75 pulled cream on moss to ~5:1 and thinned it to the eye */ /* BACK TO FRONT: circle, people, mask. The green front lip is a real layer sitting over the figures, so they sink behind it rather than being cut. */ #reality .circle{left:7.326%;top:86.753%;width:35.069%;height:7.630%;z-index:1} #reality .people{left:9.500%;top:-16.801%;width:30.722%;height:50.937%;z-index:2; will-change:transform} /* one PNG, two copies: the cut sits in the empty band between the figures (rows 51–56.6% of the image) — together they are the whole image */ #reality .people.man{clip-path:inset(0 0 46% 0)} #reality .people.woman{clip-path:inset(54% 0 0 0)} #reality .mask{left:7.361%;top:90.690%;width:34.514%;height:20.497%;z-index:3} /* THE FALL ON THE COMPOSITOR (Julian, 10 Sep 2026): the desktop fall was a per-frame JS translate keyed to the board's travel — 1680 board px, smoothstepped over the 18–85% window — and it wobbled, the one unpinned chapter with scripted motion: the compositor scrolls the board first, the transform lands a frame later, and on a trackpad's uneven deltas that lag flickers. Where the browser has scroll-driven animations, the same fall runs as a view timeline on the board — cover 18% → 85% is throughProgress's window, cubic-bezier(1/3,0,2/3,1) IS smoothstep (3t²−2t³, exactly), 116.6667cqw is 1680/1440 — and the compositor moves the figures in the same frame as the page. Still 1:1 with scroll, still reverses exactly (§4.1); nothing eases in time. 05-stats.js keeps the scripted fall for browsers without it and for the ?p= hook (an inline !important transform beats the animation). Phones cancel it (the sticky hold, below); reduced motion cancels it. */ @supports (animation-timeline: view()){ #reality .board{view-timeline:--reality-board block} #reality .people{animation:reality-fall cubic-bezier(.3333,0,.6667,1) both; animation-timeline:--reality-board;animation-range:cover 18% cover 85%} @keyframes reality-fall{from{transform:translateY(0)}to{transform:translateY(116.6667cqw)}} } /* reduced motion: the figures hold above the hole (spec fallback) */ @media(prefers-reduced-motion:reduce),(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){#reality .people{transform:none!important;animation:none}} /* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */ #reality .head,#reality .t{white-space:pre-line} /* ---- mobile (§3 stacked flow; Julian, 6 Sep 2026) ---- The 1440×1488 board goes (at 375 it put 6px captions in a 388px strip). The chapter is a left-aligned stack inside --m, and the fall becomes a small choreography, back to front: · the HEADLINE is sticky under the nav (top 72px, a 16px moss cap above the type) and stays as the stats scroll — they slide under it. · the two FIGURES are sticky below the headline (05-stats.js sets the offset from the headline's measured height) — you see them once you have read it. Two sticky slots, one figure each (sticky makes a stacking context, so one slot could not straddle the panel). · the four STATS are one moss panel scrolling BETWEEN the figures: over the woman, behind the man; she vanishes and comes out beneath its foot. · the HOLE (rim + lip) is at the foot, a full figure-height below the panel — and INSIDE the stack, so the slots' sticky range runs to the hole's foot: the figures simply keep holding on screen while the rim rises over their feet, the lip covers them, and the board's clip takes them (their top is a --gap below the slot, so they are gone before the stack's end releases the slot). The hold is the browser's own sticky, nothing per frame: a JS translate giving back the stack's rise lagged the compositor by a frame and wobbled (Julian, 10 Sep 2026; before that, a smoothstepped fall let them ride up with the stack first). The headline holds to the same end. Layers: rim 1 · woman 2 · stats panel 3 · man 4 · lip 5 · headline 6. overflow:clip (never hidden) on the chapter and the board: hidden would make them the sticky's scroll container and nothing would stick; clip still cuts the fallen figures at the hole's foot. --hu = 1 board px at the hole's scale (a 72vw rim, 505 board px); the figures and the lip keep their board offsets from the rim. Type carries the board's height ratios (the mobile type rule): headline 3.6svh, numbers 8.9svh, captions 2.5svh, with floors; citations 14px. */ @media(max-width:760px),(pointer:fine) and (max-height:560px){ #reality{overflow:clip} #reality .board{--hu:calc(72vw / 505);--gap:2svh; --shelf:calc(var(--gap) + var(--hu) * 757.94 * 0.53); /* the man's shelf, nominal — 05-stats.js snaps it to whole pixels via --slot-top / --rule-top */ aspect-ratio:auto;height:auto;overflow:clip;container-type:normal; padding:max(80px,9svh) var(--m) 0} #reality .board :is(.rule,.n,.t){position:static} #reality .stack,#reality .hole{display:block;position:relative} #reality .board .head{position:sticky;top:72px;left:auto;z-index:6;width:auto;padding-top:16px; /* .board .head: outranks the desktop's :is() absolute */ background:var(--moss);font-size:clamp(24px,3.6svh,34px);line-height:1.1;will-change:transform} /* OWN LAYERS (Julian, 10 Sep 2026): below 760 this chapter is a sticky composition — headline, slots (the man's shelf and the resting line ride in his slot's layer with him) — and un-layered sticky content re-snaps to device pixels a frame behind the compositor on fractional scrolls. Same cure as the pinned chapters' text, see 02-hero.css. */ #reality .slot{display:block;position:sticky;top:var(--slot-top,0px);height:0;will-change:transform} /* --slot-top: the JS's, a whole pixel */ #reality .slot-woman{z-index:2} #reality .slot-man{z-index:4} /* THE SHELF: a moss band behind the man, the column's width, from the headline's foot to his lower edge (his figure ends at 51.4% of the image; the band runs to 53%). The stats panel slides under it — and so vanishes at his lower edge — the way it slides under the headline's cap. It holds with the headline (no fall): when he drops into the hole he leaves it behind, and it leaves upward with the stack. (A first cut backed only his silhouette; the stats stayed visible around him. Julian, 6 Sep 2026) */ #reality .slot-man::before{content:"";position:absolute;left:0;right:0;top:0; height:calc(var(--rule-top,var(--shelf)) - var(--slot-top,0px));background:transparent; /* exactly to the rules' line — the same whole pixel, no seam (Julian, 10 Sep 2026) */ box-sizing:content-box;border-bottom:1px solid transparent} /* THE RESTING LINE is the shelf's own bottom edge (Julian, 10 Sep 2026): one pixel, in the man's layer, so it can only move if he does. It is on — a cut, no transition — while the stats panel is behind him (05-stats.js: the panel's top has reached the line, its foot has not), the exact span the sticky rules used to cover. Before that the sticky rules, each stuck on this line in a layer of its own, flickered against the shelf's foot on phones — two composited stickies sharing one hard edge — and no layering or opacity fixed it. The colour is the desktop rule's paper at .4 over moss, solid. */ #reality .slot-man.is-shelved::before{background:var(--moss)} /* only while the stats can pass behind him — 05-stats.js; off, the rising hole shows through */ #reality .slot-man.is-lined::before{border-bottom-color:color-mix(in srgb,var(--cream) 40%,var(--moss))} #reality .slot-man .man{z-index:1} #reality .people{animation:none;position:absolute;top:var(--gap); /* the sticky hold, not the desktop's timeline */ left:calc(50vw - var(--m) - var(--hu) * 221.2); /* 31.3 board px right of the rim's left */ width:calc(var(--hu) * 442.4);height:auto;will-change:transform} #reality .stats{display:block;position:relative;z-index:3;background:var(--moss); margin-top:calc(var(--hu) * 757.94 + 2 * var(--gap));padding-bottom:4svh} /* below the figures' resting box */ /* the rules scroll with their stats and slide under the shelf, each merging into the resting line as it arrives (the line, above, is the shelf's edge; 6 Sep–10 Sep 2026 they were sticky on it instead). position:static outranks the inline board % and the :is() above. */ #reality .board .rule{width:100%;margin-top:5svh;position:static!important} /* .board .rule outranks the static :is() above; !important beats the inline board % */ #reality .stats .rule:first-child{margin-top:0} #reality .n{margin-top:2.2svh;font-size:clamp(48px,8.9svh,80px);line-height:1} #reality .t{width:auto!important;margin-top:1.4svh;font-size:clamp(17px,2.5svh,22px);line-height:1.3;max-width:34em} #reality .t .src{margin-top:1.2svh;font-size:14px} #reality .hole{width:100vw;margin:calc(var(--hu) * 757.94 + var(--gap)) 0 0 calc(-1 * var(--m)); /* the figures' box + their gap under the headline: the rim meets their feet as the panel's end passes the slot */ height:calc(var(--hu) * 363.6)} /* rim top to lip bottom */ #reality .circle{position:absolute;left:calc(50% - var(--hu) * 252.5);top:0; width:calc(var(--hu) * 505);height:auto;z-index:1} #reality .mask{position:absolute;left:calc(50% - var(--hu) * 252);top:calc(var(--hu) * 58.57); width:calc(var(--hu) * 497);height:auto;z-index:5} } /* ZOOMED (WCAG 1.4.4 — the zoom pass, Julian, 25 Sep 2026): on a computer at a narrow or short window — where 200% browser zoom lands — this section is in its stacked, still layout, and its type is set at the size the board draws it, in rem, so zoom enlarges it (the phone sizes above are fitted to the screen and would cancel the zoom). !important beats the sizes the js writes inline; utils.js zoomFit() then eases back any line whose longest word would run past the edge. */ @media(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){ #reality .head{font-size:4rem!important;line-height:1.1!important} /* above its drawn 48: on a 1920 monitor it renders at 64 at 100%, so 3rem only reached 1.5x there */ #reality .n{font-size:6.7rem!important;line-height:1!important} /* the Reality's board fills a 1920 monitor's width, so its type renders a third above drawn at 100%; the floors here match that */ #reality .t{font-size:2rem!important;line-height:1.35!important} #reality .t .src{font-size:1.25rem!important;line-height:1.35!important} /* .t and .src above their drawn 24/16 for the same reason as .head */ /* zoomed, the stats alone pass under the sticky headline — the falling figures and the hole go (Julian, 25 Sep 2026): at this size they filled the screen and hid the numbers */ #reality .slot,#reality .hole{display:none!important} #reality .stats{margin-top:0!important;padding-top:2rem} #reality .board .head{padding-bottom:1.25rem} /* a clean edge for the stats to pass under */ /* the phone layout reserves the figures' fall above the stats */ #reality .n{display:block;margin-top:2.5rem} #reality .t{margin:.6rem 0 0} #reality .board .rule{margin-top:2.5rem!important} }