/* ============================================================ Traidy Naidoo ministry site: layout + colour preview Type: Atkinson Hyperlegible (brand kit, one face doing every job) Palette: brand kit. Indigo #282562 anchors, five carry the colour. Three colour directions, switchable. Same layout in each. ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0} img{max-width:100%;display:block} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :root{ /* GEIST EVERYWHERE, 2026-08-19. Rokas: "the whole web should be in the geist font." It started as the hero name only (chosen off a four-way render); he then took it site-wide, so --f is Geist and every face on the site follows it through --f-display and --f-name below. Atkinson Hyperlegible was the previous single face; it is dropped from the font load entirely. One note kept for the record: Geist ships no italic, so the few italic runs (the section counts) render as a synthesised oblique, which is acceptable at that size. */ --f: "Geist", system-ui, sans-serif; --f-display: var(--f); /* swapped by the FACE toggle */ --f-name: var(--f-display); /* the name is the same Geist as the rest now */ --display-case: uppercase; /* the reference look; CASE toggle reverts it */ --display-weight: 700; --display-tracking: -.035em; --pad: clamp(1.25rem, 5vw, 5.5rem); --maxw: 1400px; /* section coding, shared across all three directions. Used as marks, rules and dots only, never as small text. */ --a-story: #FFA100; /* amber */ --a-music: #B23C7A; /* plum */ --a-messages: #3D63C4; /* blue */ --a-speak: #C7563B; /* rust */ --a-rose: #F499BC; /* rose, interaction */ } /* ---- Direction 1: Spiritual Precipitation (cool dark) ---- */ [data-theme="precipitation"]{ /* BLACK WITH THE ZONE PAIR, 2026-08-15, and it has to move WITH it. `--ground` is not just the fallback background: it is the colour every scrim fades TO. The hero and the poster both dissolve their photograph into the page with `linear-gradient(... var(--ground) ...)` stops, so leaving this at the old #0B0A14 while the body went black would have hazed a navy edge around each photograph against a black page, which is precisely the seam he asked to remove. --ground-2 and --ground-3 stay lifted on purpose: they are component surfaces (the skip link, the media wells behind an image that has not decoded), and those need to be visible AGAINST the ground, not equal to it. */ --ground:#000000; --ground-2:#15132A; --ground-3:#1E1B38; --ink:#F7F1E6; --ink-dim:var(--ink); --ink-faint:var(--ink); /* 2026-09-17 Rokas: no dimmed body text, all bright */ --line:rgba(247,241,230,.14); --line-strong:rgba(247,241,230,.28); --shadow: 0 24px 70px -20px rgba(0,0,0,.85); /* THE ISLAND'S OWN FOUR, and they are per direction rather than derived from `--ground` because the pill floats over PHOTOGRAPHS as often as over the page. `--ground` at 78% would be black over a black jacket and invisible; these are lifted off the ground on all three directions so the pill always reads as an object in front of the page rather than a hole in it. The key is the inverse pair, which is the only high-contrast control on the site and is why the play button never needs a border. */ --isl-bg:rgba(22,20,36,.80); --isl-line:rgba(247,241,230,.20); --isl-key:#F7F1E6; --isl-keyink:#0B0A14; } /* ---- Direction 2: Banqueting Table (warm dark) ---- */ [data-theme="banquet"]{ --ground:#2B140F; --ground-2:#3A1C15; --ground-3:#4A251B; --ink:#FBEEDF; --ink-dim:var(--ink); --ink-faint:var(--ink); /* 2026-09-17 Rokas: no dimmed body text, all bright */ --line:rgba(251,238,223,.16); --line-strong:rgba(251,238,223,.32); --shadow: 0 24px 70px -20px rgba(20,7,4,.8); --isl-bg:rgba(62,30,22,.82); --isl-line:rgba(251,238,223,.22); --isl-key:#FBEEDF; --isl-keyink:#2B140F; } /* ---- Direction 3: Covenant (ivory) ---- */ [data-theme="covenant"]{ --ground:#F7F1E6; --ground-2:#FFFDF8; --ground-3:#EFE6D5; --ink:#282562; --ink-dim:rgba(40,37,98,.76); --ink-faint:rgba(40,37,98,.74); --line:rgba(40,37,98,.16); --line-strong:rgba(40,37,98,.34); --shadow: 0 24px 60px -24px rgba(40,37,98,.28); /* The pale direction inverts the pair rather than lightening it. Ivory on ivory would be the pill disappearing into the page, which is the same failure the dark directions avoid from the other side. */ --isl-bg:rgba(255,253,248,.88); --isl-line:rgba(40,37,98,.22); --isl-key:#282562; --isl-keyink:#F7F1E6; } /* ---- THE TWO ZONES --------------------------------------------------------- Rokas, 2026-08-14: "take one of the brand colours of the logo, and music is one colour, uniformity across the music section, and then once you scroll down into the ministry section it fades into a different colour, just to signify a different side of him... but how all these different callings come together into one person. We could integrate that theme into the background." THE TWO COLOURS ARE HIS MARK'S OWN, WHICH IS WHAT MAKES THIS AN ARGUMENT RATHER THAN A GRADIENT. Sampling `img/traidy-lion-primary.png` returns two poles either side of a navy base: a royal blue (#3060A8, #304890) and a rust (#A84830, #C04830) with gold and pink between them. The music half takes the blue side, the ministry half takes the rust side, and BOTH ARE IN ONE MARK — which is the brief's thesis (§2, many callings, one person) said in colour instead of in a sentence. The rust is also, by accident and usefully, the colour of the jacket he preaches in. THE SHIFT IS TINY ON PURPOSE. These are casts on a near-black (or on ivory), not two different backgrounds: measured, every pair sits within 1.5% of the other's relative luminance, so nothing the contrast suite has already passed can be broken by scrolling. If the difference reads as "the page changed colour" rather than "the light changed", it has gone too far. IT WORKS ON ALL THREE DIRECTIONS because it is expressed as a pair per direction rather than as two fixed colours. The direction decision stays open. */ /* PRECIPITATION'S PAIR IS BLACK TO BLACK, 2026-08-15. Rokas: "the background should be all black so it's a nice continuous background." THE PAIR WAS #090B18 AND #160C0B, a cool near-black and a warm near-black. The note above says the shift should read as "the light changed" and not as "the page changed colour", and on his screen it was reading as the second thing: the cool cast met the warm cast at the hinge and the two halves looked like two backgrounds with a seam, which is the opposite of what the crossfade was for. SETTING BOTH ENDS TO THE SAME VALUE RETIRES THE EFFECT WITHOUT REMOVING THE MACHINERY. js/zones.js still writes --zone-t and the mix still runs; it simply resolves black to black at every scroll position, so the hinge is flat. That is deliberate rather than lazy: the pair is per direction and the direction decision is still open, so banquet and covenant keep their shift and this stays one line to reverse. If precipitation is ever confirmed as the only direction, THEN zones.js and the mix can go. Pure #000 and not a lifted near-black: he asked for black, the ink is ivory at full contrast against it, and the photographs on this page are dark enough at their edges that a true black is what makes them dissolve into the page rather than sit on a slightly different rectangle. */ [data-theme="precipitation"]{ --g-music:#000000; --g-ministry:#000000 } [data-theme="banquet"] { --g-music:#21151F; --g-ministry:#2B140F } [data-theme="covenant"] { --g-music:#EFF2F8; --g-ministry:#F9F0E4 } /* `--zone-t` is 0 in the music half and 1 in the ministry half. On the HOME page js/zones.js drives it per frame across the hinge; on every inner page it is set once from `data-zone`, because those pages belong to one half or the other and have no hinge to cross. */ [data-zone="ministry"]{ --zone-t:1 } /* WHITE, NOT GREY, ON THE MUSIC PAGE, 2026-09-10. Rokas: "make sure all the writing on the page is white-coloured and not grey." The page's body copy (ledes, the album passage, FAQ answers) runs at --ink-dim (70% ivory) and a few micro-labels at --ink-faint (56%); on this page both collapse to full --ink, so every run of text reads at one bright ivory. Scoped to data-page="music" only; every other page keeps its dim/faint reading hierarchy. The scrub statement is unaffected (it dims via --stmt-dim, a separate token). */ [data-page="music"]{ --ink-dim:var(--ink); --ink-faint:var(--ink) } body{ font-family:var(--f); color:var(--ink); /* faux-BOLD OFF, 2026-09-10. Real weights 400-700 are all loaded, so nothing meant to be bold relies on synthesis; disabling weight synthesis stops the browser drawing a heavier fallback for a beat while the face loads, which is the brief "bold then normal" flash Rokas saw on the music lede (a Safari font-load quirk Chromium hides). `style` keeps faux-italic for the . */ font-synthesis:style; /* THE MIX IS THE BACKGROUND, and `--ground` is the fallback rather than the value. A browser without color-mix gets the direction's flat ground and loses nothing but the shift; the WebKit support check for color-mix is already in verify/webkit-pass.js, which is why this is safe to rely on. NO TRANSITION ON THIS. Custom properties do not animate without @property, and that is exactly what is wanted: the transition below is for the DIRECTION switch (a discrete change), while the zone is driven per frame from scroll position and must land on the frame it is given. A .5s ease on top of a per-frame update is what makes a scroll-linked colour feel like lag. */ background: var(--ground); background: color-mix(in oklab, var(--g-ministry) calc(var(--zone-t, 0) * 100%), var(--g-music)); font-size:clamp(1rem,.96rem + .2vw,1.0625rem); line-height:1.6; transition: color .5s ease; /* A stacking context, so `body::before` (the aura, z-index -1) paints ABOVE this ground and BEHIND the content rather than being hidden under the opaque ground. isolation makes the context without touching layout or the fixed header/island's containing block. */ isolation:isolate; } /* ---- THE AURA — a warm sunset wash behind everything ----------------------- Added 2026-08-17. Rokas: "a subtle subtle gradient behind everything that would move with the scroll ... a nice sunsetty kind of colour that would appear and reappear around the background when you scroll." A FIXED ::before, NOT `background-attachment: fixed`, because iOS Safari ignores the latter and a real fixed layer is the only one that parallaxes there. `pointer-events:none` so it never eats a click; z-index -1 so it is under all content and over the ground. TWO SOFT LIGHTS THAT CROSS. `--gy` is driven by js/glow.js as a slow cosine of the scroll, so the two glows slide in opposite directions and warm light wells up in one corner as it recedes from the other. With no JS or reduced motion, `--gy` holds at .5 and the wash is simply static. DARK DIRECTIONS ONLY. The glow image is scoped to precipitation and banquet; on the light covenant ground a warm wash reads as a stain, so it gets the bare layer. SOFTER AND WIDER, 2026-08-17 (Rokas, on the first pass). The alphas came down to the .07 range and the glows grew past a viewport across, so the light is a broad diffuse wash rather than two readable shapes. On a near-black ground this is a whisper, which is the "subtle subtle" the brief asked for twice. */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; } [data-theme="precipitation"] body::before, [data-theme="banquet"] body::before{ background-image: radial-gradient(closest-side, rgba(255,168,84,.075), rgba(255,168,84,0) 74%), radial-gradient(closest-side, rgba(210,86,96,.06), rgba(210,86,96,0) 74%); background-repeat:no-repeat, no-repeat; background-size: 125vmax 125vmax, 104vmax 104vmax; background-position: 14% calc(var(--gy, .5) * 100%), 86% calc((1 - var(--gy, .5)) * 100%); } .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} /* type scale */ .display{font-size:clamp(2.75rem,1.4rem + 6.4vw,7rem);line-height:.92;letter-spacing:-.035em;margin:0} h2{font-size:clamp(1.75rem,1.2rem + 2vw,3rem);line-height:1.05;letter-spacing:-.025em;margin:0} h3{font-size:clamp(1.125rem,1rem + .5vw,1.4rem);line-height:1.2;letter-spacing:-.012em;margin:0} .lede{font-size:clamp(1.0625rem,1rem + .5vw,1.375rem);line-height:1.5;color:var(--ink-dim);max-width:46ch} .kicker{ font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint); display:flex;align-items:center;gap:.6rem;margin:0 0 1.25rem } .kicker::before{content:"";width:1.75rem;height:2px;background:var(--dot,var(--line-strong));flex:none} a{color:inherit;text-decoration:none} :focus-visible{outline:2.5px solid var(--a-rose);outline-offset:3px;border-radius:2px} /* PIECE 1 SAFETY PASS, 2026-08-13. --a-rose measures 1.5:1 on the covenant ground and it is currently the WHOLE focus indicator, so a keyboard visitor on the ivory direction gets an invisible ring. Per-theme --focus token, exactly as ARCHITECTURE §3.0 specifies. Scoped to main/footer ON PURPOSE: the shared rule directly above governs the signed-off header, and this pass does not get to rewrite it. The header therefore keeps --a-rose and is flagged, not fixed. The var() fallback is there so a document with no data-theme still gets a visible ring rather than an invalid outline colour, which resolves to none. */ [data-theme="precipitation"]{ --focus:#F7F1E6 } [data-theme="banquet"]{ --focus:#FBEEDF } [data-theme="covenant"]{ --focus:#282562 } main :focus-visible, footer :focus-visible{ outline:2.5px solid var(--focus,var(--ink)); outline-offset:3px } /* ---------- header ---------- REBUILT 2026-08-13 (Rokas), off the two references Traidy himself shared: jasonbergh.com and markclennon.com. Both run PLAIN TEXT nav, wide-tracked uppercase, grouped, and between them they carry not one capsule, fill, border or corner radius. vanmorrison.com agrees and supplies the third fact, measured: its wordmark centre sits at x=720.5 in a 1440 viewport, i.e. genuinely centred, not approximately. So: links left, NAME CENTRE, links right, nothing boxed. WHAT THIS BREAKS, AND IT IS NOT OPTIONAL TO FIX. The three frosted capsules it replaces were NOT decoration. They were the fix for a measured failure: the mark strap read 3.69:1 over the footage with no backing. Deleting them brings that straight back, so the film's wash now carries a TOP BAND (see the name-mode .hero-film::after) and the header gets measured on composited pixels rather than reasoned about. Full take/leave note: reference-capture.md */ .top{ position:fixed;top:0;left:0;right:0;z-index:60; padding:clamp(1.1rem,2.1vh,1.7rem) clamp(1.25rem,3vw,2.25rem); pointer-events:none; background:transparent } /* ---- THE BAR FADES WITH THE SCROLL, 2026-08-17 --------------------------- Rokas: the bar "should come in smoothly and not just appear out of nowhere. fade in nicely as you're scrolling down." It used to flip: js/hdr.js set `data-scrolled` past 24px and `.top` transitioned transparent to black over 260ms, so it arrived all at once the instant the page was nudged. Now the bar is this ::before and its OPACITY is the scroll position: js/hdr.js writes `--bar-o` from 0 at the top to 1 by ~150px, so the black wells up under the nav as you go. ON ::before, NOT `.top`'s BACKGROUND, so the value is an opacity on the ground colour rather than an alpha baked into one colour. That keeps it theme-safe (it is var(--ground), whatever the ground is) and keeps the fade on the compositor. z-index:-1 sits it inside `.top`'s own stacking context, behind the links and the lion, so only the bar fades and the nav never does. */ .top::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--ground); opacity:var(--bar-o,0) } /* ---- THE SCROLLED BAR: WHY IT IS SOLID `--ground` ------------------------- Rokas, 2026-08-16: "make like a black bar behind the nav so that it's easy to see when you're scrolling." The bar itself is drawn by `.top::before` above and its opacity fades with the scroll (2026-08-17, see that block). This note keeps the one decision that is still true regardless of how it fades in: `--ground` AND NOT A TRANSLUCENT WASH at full strength. A semi-transparent black would let the photograph under it show through as a grey haze, which is the "dark band across a continuous lit studio" the header script's own note warns about, and worse, a haze reads as a mistake where a solid bar reads as a bar. The fade passes through that haze on its way in, but it does not rest there: by ~150px the bar is the page colour at full opacity rather than a new one. NO BOTTOM HAIRLINE. Every band below meets the bar on the same black, so a rule there would be the only line on the site drawn against nothing. THE INTRO NEEDS NO SEPARATE GUARD ANY MORE. It used to, because the bar was the header's own background; the whole `.top` is held at opacity:0 during the intro (see the intro block) and fades in as one thing, so the bar rides in with the nav and a deep link that lands scrolled mid-intro no longer paints a strip early. */ .top-in{ display:grid;align-items:center;grid-template-columns:1fr auto 1fr; gap:clamp(1rem,3vw,2.5rem);max-width:var(--maxw);margin-inline:auto } .top-in > *{pointer-events:auto} /* THE CENTRE SLOT holds the lion (Rokas, 2026-08-13). It used to be an invisible wordmark reserving a landing box for the scroll dock; the dock is gone and the mark is what sits here instead. This is also what settles the open question from earlier the same day about whether the mark had a home: it does, and it is the middle of the nav rather than the footer. */ .top-slot{display:block;justify-self:center;line-height:0} .top-slot img{height:2.75rem;width:auto;display:block} .nav{display:flex;align-items:center;gap:clamp(.9rem,2.1vw,1.9rem)} /* .nav-r went with the second nav on 2026-08-14: the right slot is .social now, which right-aligns itself. Deleted rather than left dormant, same call as the scroll dock and .nav-cta. */ .nav a{ font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase; /* WHITE, not var(--ink-dim). Rokas 2026-08-13: "just put the letters as white." Deliberately a literal rather than the ivory token, because it is a decision about type over film and must not silently follow a palette change. See the note on the removed wash above for the measured cost. */ color:#FFF;padding:.3rem 0;transition:color .4s var(--ease-smooth) } .nav a:hover,.nav a:focus-visible{color:#FFF;text-decoration:underline;text-underline-offset:.35em} /* ---- THE MINISTRY PANEL ---------------------------------------------------- Eight themes on hover or on focus. Three things here are load-bearing: 1. `visibility`, NOT opacity alone. A panel faded to 0 is still focusable, so a keyboard visitor would tab through eight invisible links to reach Contact. visibility:hidden takes them out of the tab order, and the :focus-within rule below puts them back the moment Ministry is focused. 2. IT DOES NOT INHERIT `.nav a`'s WHITE. That white is a decision about type over the hero FILM (Rokas, 2026-08-13). This panel is a solid surface, and white on it would be invisible on Covenant — the exact defect the header already has open on that direction. It follows the tokens instead, so it is correct on all three. 3. The bridge. There is a gap between the nav row and the panel, and a mouse crossing it would close the panel mid-journey. `::before` fills that gap with an invisible block so the pointer never leaves the group. */ /* DORMANT SINCE 2026-08-17: no element on the site carries `.navdrop` any more. Rokas removed the Ministry dropdown and the eight theme pages it opened onto. Kept rather than stripped because those pages are turned OFF behind `BUILD_THEMES` in build-pages.js rather than deleted, and this is the panel they came back to. js/nav.js's handler carries the same note. */ .navdrop{ position:relative; display:inline-flex } .navpanel{ position:absolute; top:calc(100% + .85rem); left:-1rem; z-index:60; display:grid; gap:.15rem; min-width:15rem; padding:.75rem 0; background:var(--ground-2); color:var(--ink); border:1px solid var(--line-strong); border-radius:2px; box-shadow:var(--shadow); visibility:hidden; opacity:0; transform:translateY(-.25rem); transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s } .navdrop::before{ content:''; position:absolute; top:100%; left:0; right:0; height:.9rem } .navdrop:hover .navpanel, .navdrop:focus-within .navpanel{ visibility:visible; opacity:1; transform:none; transition:opacity .18s ease, transform .18s ease, visibility 0s } /* Closed by Escape: the script sets this and clears it on the next pointer or focus move, so one keystroke does not disable the menu for the session. */ .navdrop[data-shut] .navpanel{ visibility:hidden; opacity:0 } /* Reading size and sentence case, unlike the nav row above it. Eight themes at 13px/.14em tracking in caps is a wall; these are content, not furniture. */ .navpanel a{ color:var(--ink); font-size:.9375rem; letter-spacing:0; text-transform:none; line-height:1.35; padding:.5rem 1.25rem; text-shadow:none } .navpanel a:hover,.navpanel a:focus-visible{ color:var(--ink); background:var(--ground-3); text-decoration:none } @media (max-width:900px){ /* The row is display:none below 900 and the burger takes over, so the panel has nothing to hang off. The themes are reachable from ministry.html. */ .navpanel{ display:none } } /* Bergh's active marker is a bullet. One character, no box, same grammar. */ .nav a[aria-current]::before{content:"\2022";margin-right:.45em;color:var(--ink)} /* .nav-cta ("Book Traidy", underlined rather than pilled) went with the nav rework on 2026-08-14: it duplicated the Speaking route, and its action is now the solid button in the statement. Its rules are deleted rather than left dormant, same call as the scroll dock: dead code rots, git does not. */ /* ---- The socials, hard right ------------------------------------------------ Rokas 2026-08-14, off the Matt Redman header he sent: pages left, mark centre, monochrome glyphs right, no labels, no capsules, no brand colours. The glyphs are drawn here as inline SVG rather than pulled from an icon set, because this file loads zero external anything and that is not being broken for four paths. Each was rendered at 120px and looked at before it went in, since a path recalled from memory is a guess until someone sees it. BRAND COLOURS ARE DELIBERATELY NOT USED. Four saturated logos in a row would be the loudest thing on a page whose whole argument is restraint, and they would fight all three colour directions at once. currentColor means they follow the nav, including whatever Rokas decides about white-on-Covenant. 44x44 HIT AREA ON A 20px GLYPH. The icon is the size the reference runs; the link is the size a thumb needs. The padding is invisible and the gap is set against the 44px box, not against the glyph. */ .social{ display:flex; align-items:center; justify-content:flex-end; gap:clamp(.15rem,.9vw,.7rem) } .social a{ display:grid; place-items:center; width:44px; height:44px; color:#FFF; transition:transform .3s var(--ease-respond) } .social svg{ width:20px; height:20px; display:block } /* ---- THE HEADER'S INK OVER THE PALE CONTACT -------------------------------- js/hdr.js sets data-hdr="light" on while the contact section is under the fixed header. The nav and the social icons are a hardcoded #FFF, which was correct while every ground was near-black and is about 1.2:1 on the studio grey, so they take the light-ground ink for exactly that stretch. COVENANT'S INK AGAIN, the same value the section itself uses, so the header and the words under it are one decision rather than two. SCOPED OUT OF THE OPEN MOBILE MENU. Below 900 the panel drops its own dark ground behind these links; flipping them dark there would put dark ink on dark and trade one unreadable state for another. The menu is the one case where the header has a plate, so it does not need the ink change. */ [data-hdr="light"]:not([data-nav="open"]) .nav a, [data-hdr="light"]:not([data-nav="open"]) .social a{ color:#282562 } [data-hdr="light"]:not([data-nav="open"]) .nav a[aria-current]{ color:#282562 } /* The nav links underline on hover; a glyph cannot, so it lifts. 2px, the same grammar as the 4px the .arw routes use, scaled to a smaller object. It moves rather than dims on purpose: dimming would cost contrast over the film, which is the one thing the header has already had to pay for once. */ .social a:hover, .social a:focus-visible{ transform:translateY(-2px) } @media (prefers-reduced-motion: reduce){ .social a{ transition:none } .social a:hover, .social a:focus-visible{ transform:none } } /* ---- GLYPH-LEVEL SHADOW, and it is ROKAS'S CALL, not a shipped default ------ Toggle: . Set to "off" (or the attribute removed) and every rule below stops applying, with nothing else to unpick. WHY IT IS HERE. The nav row was mapped across the whole 17.5s loop, worst pixel per 60px column, white against the film (verify/nav-film-map.js): x 0-180 4.71 - 6.08:1 the only stretch that clears 4.5 for 13px text x 180-540 3.07 - 3.93:1 clears the 3:1 icon bar, fails 13px text x 540-1020 2.02 - 3.33:1 fails both x 1020-1320 1.77 - 1.83:1 the worst on the row, by a distance x 1320-1440 2.73 - 2.89:1 fails both TWO THINGS FOLLOW, AND THE SECOND ONE MATTERS MORE THAN THE FIRST. 1. The four social glyphs now sit at x 1180-1404, which is the worst zone on the row. Measured 2.10 - 2.52:1 against a 3:1 non-text floor. 2. THAT ZONE WAS ALREADY OCCUPIED. Before this rework it held Speaking, Contact and Book Traidy, so three 13px links were sitting at roughly 1.8:1 against a 4.5 bar and nothing had reported it. The header suite could not see it: it only measures boxes that exist NOW, and the README's "worst 7.45:1" is stale by the suite's own admission further up that file. So this is not a defect the social row introduced. It is one it uncovered, and moving the text links leftward actually improved them, from ~1.8:1 to 2.88-3.78:1. WHY A SHADOW AND NOT A SCRIM. The file already forbids the two easy answers: the band is capped at .30 ("Do not raise it past .30 without asking") and "Do not quietly reintroduce a scrim." It also names the three routes that DO work: a glyph-level shadow, a darker grade on the film, or re-cutting the loop from darker beats. Only the first is available without new footage, so that is what this is. It is tight and dark rather than broad and soft, so on the dark passages of the loop it is invisible and on the bright wall it reads as an edge on the letterform, never as a bar behind the row. IT NARROWS THE GAP, IT DOES NOT CLOSE IT. A shadow darkens what is directly under and around a stroke; it cannot make a blown-out wall dark. Treat this as the same knowing trade the .30 band already is, not as a pass. The routes that would actually close it both need the footage changed, which is a bigger decision than a header rework. */ [data-navshadow="on"] .nav a{ text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.65) } [data-navshadow="on"] .social a{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 5px rgba(0,0,0,.65)) } /* The lion is a raster with its own transparency and sits dead centre, x ~698, in the 2.02:1 column. Same treatment, same reason. */ [data-navshadow="on"] .top-slot img{ filter: drop-shadow(0 1px 3px rgba(0,0,0,.8)) } /* Skip link. Codex 2026-08-10 #25: there was none, so a keyboard visitor traversed the entire header before reaching any content. */ .skip{ position:fixed;top:.6rem;left:.6rem;z-index:200; padding:.7rem 1.15rem;border-radius:4px; background:var(--ink);color:var(--ground);font-size:.875rem; transform:translateY(-180%);transition:transform .18s } .skip:focus{transform:none} .foot-mark{display:inline-flex;align-items:center;gap:.6rem} .foot-mark img{height:2.25rem;width:auto;flex:none} .btn{ display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.5rem;border-radius:100px; border:1.5px solid var(--ink);font-size:.9375rem;letter-spacing:.01em; transition:background-color .4s var(--ease-smooth),color .4s var(--ease-smooth),border-color .4s var(--ease-smooth) } .btn:hover{background:var(--ink);color:var(--ground)} .btn-solid{background:var(--ink);color:var(--ground)} .btn-solid:hover{background:transparent;color:var(--ink)} .nav-toggle{display:none} /* ---------- hero: the BTS film, full bleed ---------- Refs: dsgngroup.it for the shape (one full-bleed muted loop, huge type bottom-left, capsule nav floating over it, pill CTA) and jasonbergh.com for the register (warm dark ground, cream type, film-instrument furniture in tiny letterspaced caps). LEFT from dsgn: they run type straight onto footage with no wash, and their own sub-copy is illegible over the light floor. We keep a wash and measure it on rendered pixels. LEFT from bergh: the numbered nav (01. 02. 03.) is a house no. */ .hero{ position:relative;overflow:hidden;display:flex;isolation:isolate; min-height:100svh } .hero-film{position:absolute;inset:0;z-index:0;background:var(--ground)} .hero-film video{ width:100%;height:100%;object-fit:cover;object-position:50% 34%;display:block } /* wash: heaviest bottom-left where the type lives. Ground colour only, no saturated tint, or it casts the studio's magenta and teal into mud. */ .hero-film::after{ content:"";position:absolute;inset:0;z-index:1; /* The last three stops are the TOP SCRIM. Note this gradient runs `to top`, so 100% is the TOP of the frame. It used to end at 16% ground there, which was fine while the header carried its own frosted capsules and became a real AA failure the moment they were removed: measured SPEAKING at 2.02:1 and BOOK TRAIDY at 2.04:1 in WebKit over the film. The name hero got its scrim first and passed; this is the same fix for the statement hero, which is preview-only and does not ship, but a measured failure left in the file is how a measured failure eventually ships. */ background: linear-gradient(to top, var(--ground) 0%, color-mix(in srgb,var(--ground) 94%,transparent) 30%, color-mix(in srgb,var(--ground) 66%,transparent) 52%, color-mix(in srgb,var(--ground) 14%,transparent) 76%, color-mix(in srgb,var(--ground) 20%,transparent) 89%, color-mix(in srgb,var(--ground) 52%,transparent) 94%, color-mix(in srgb,var(--ground) 88%,transparent) 100%), linear-gradient(100deg, color-mix(in srgb,var(--ground) 82%,transparent) 0%, color-mix(in srgb,var(--ground) 44%,transparent) 30%, color-mix(in srgb,var(--ground) 8%,transparent) 56%, transparent 74%) } /* Measured off dsgn: their headline is 44px at 1470 wide, about 3vw, NOT the 9rem monster I had. Their impact comes from uppercase in a tight display face at a controlled size, over three lines, hugging a 15px left margin. Over-scaling was the single biggest reason this did not read like the ref. */ .hero .wrap{max-width:none;padding-inline:clamp(1.25rem,1.6vw,2rem)} .hero-in{ position:relative;z-index:2;width:100%;display:flex;flex-direction:column; justify-content:flex-end;gap:clamp(1.75rem,4vh,3rem); padding:clamp(6rem,12vh,9rem) 0 clamp(2rem,4vw,3rem) } .hero .display{ margin:0;font-family:var(--f-display); font-size:clamp(1.85rem,.7rem + 2.5vw,3.15rem); line-height:1.06;letter-spacing:var(--display-tracking); text-transform:var(--display-case);font-weight:var(--display-weight); max-width:22ch } .hero .display em{font-style:italic;color:var(--ink)} /* ---- HERO B, the name block (vanmorrison.com pattern, our tokens) ---- */ /* Only one of the two heroes exists at a time. */ [data-hero="name"] .hero .display{display:none} [data-hero="statement"] .hero-line{display:none} /* Codex 2026-08-10 #24: the page carried TWO

s, one hidden by CSS per preview state, so whichever mode you were in the document still had two level-1 headings. The name is now the only h1 and the statement line is a

. In the statement PREVIEW mode the h1 is visually hidden rather than display:none, so the document keeps exactly one h1 with the right text in both modes. Hero shape is settled (Name, Rokas 2026-08-13); statement survives only so the two can still be compared, and it does not ship. */ [data-hero="statement"] .hero-name{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;transform:none!important } /* the name hero centres its stack rather than bottom-anchoring it: the block IS the composition, so hanging it off the bottom edge leaves a hole where the type used to be */ /* Everything in this hero centres, not just the name. A perfectly centred 12vw name with a 17px line hard left below it is two compositions arguing, and "centred perfectly" was the brief (Rokas, 2026-08-13). Scoped to name mode: the statement hero is bottom-left by design and must stay that way. */ [data-hero="name"] .hero-in{ justify-content:center;align-items:center;text-align:center; gap:clamp(1.25rem,3vh,2.25rem) } [data-hero="name"] .hero-foot{justify-content:center} [data-hero="name"] .hero-line{margin-inline:auto} /* The default wash is weighted BOTTOM-LEFT because that is where the statement hero's type sits. Reuse it here and you get both failures at once: the name sits mid-frame where the wash is weakest, and the bottom 40% becomes a dead black band with nothing in it. So the wash follows the type: strongest through the middle where the name, line and CTA are, lighter top and bottom so the film reads as film instead of as a void. */ /* The first three stops are the TOP SCRIM and they are load-bearing, not taste. The header lost its three frosted capsules on 2026-08-13, and those capsules existed because the mark strap measured 3.69:1 over the footage with no backing. This band is what replaces them: strong at the very top where the nav row sits (~20-70px), gone by about 14% so the film still reads as film. Van Morrison solves the same problem with a #0F0F0F ground; Bergh's footage is simply dark; Clennon puts the header on white with the video below it. A scrim is the only one of the three available to us. Measured, not assumed: verify/webkit-film-contrast.js. Re-measure separately under Covenant, which washes the film pale and therefore fails differently. */ /* THE NAME NOW SITS FLAT ON THE FILM (Rokas, 2026-08-13): "there's some black shading behind it to make it more visible, but get rid of that because the text should be flat on the video, it just looks a lot better that way." So the mid-frame body wash is GONE. What survives is a top band and nothing else, and that band is not about the name — it is the only thing standing between the 13px nav and the footage now that the frosted capsules are gone (the mark strap measured 3.69:1 with no backing). It is done by 16%, well clear of the name, which is centred. THE NAME CAN AFFORD THIS AND THE NAV CANNOT, and the reason is the WCAG large -text rule rather than taste: at ~178px the name is large text and needs 3:1, while 13px nav links need 4.5:1. Measured after the change, all frames, both viewports: see the README. If the name is ever made smaller than 24px, or the nav is moved down over the picture, this stops being true and must be re-measured rather than assumed. */ /* NO WASH AT ALL. Rokas, 2026-08-13, twice: the shading behind the name went first, then the top band over the nav, then "just put the letters as white". So the film is completely unmodified and the type sits directly on it. THE MEASURED COST, recorded because it is a knowing trade and not an oversight. Sampled across the whole 17.5s loop at every nav item: the film runs L=0.005 (his dark background) to L=0.689 (the lit wall). White is L=1.0, so it swings between about 19:1 on dark frames and 1.4:1 on the brightest ones. AA wants 4.5:1 for the 13px nav and 3:1 for the name. On the brightest passages of the loop this does not meet either. No flat colour can: a light one would need L>=3.28 and a dark one L<=-0.04, both outside the possible range. It is the footage, not the colour. His call, made after the numbers were put in front of him. If it is ever revisited, the three routes that DO work are a glyph-level shadow, a darker grade on the film, or re-cutting the loop from darker beats. Do not quietly reintroduce a scrim. */ /* A FAINT, SHORT BLACK BAND BEHIND THE NAV ONLY (Rokas, 2026-08-13, after the full wash and then the ground-coloured scrim were both removed). Deliberately black rather than var(--ground): it is a shadow under the nav, not a tint on the picture, and it must not shift with the colour direction. Peaks at .30 and is gone by 11% of the hero, roughly the top 100px at desktop, so it sits under the nav row (~20-70px) and nowhere near the name, which is centred. Everything below it is untouched film. WHAT THIS DOES AND DOES NOT BUY, measured rather than claimed. Full AA on the 13px nav over the brightest frame needs about .40 alpha, which is visibly a bar. At .30 it lifts the worst frames without reading as a band. So this narrows the gap, it does not close it, and that is the deliberate trade. Numbers in the README. Do not raise it past .30 without asking. */ [data-hero="name"] .hero-film::after{ background: /* THE TOP FADE, unchanged: keeps the header legible over the film. */ linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,.20) 4%, rgba(0,0,0,.08) 8%, rgba(0,0,0,0) 11%), /* THE NAME BAND, added 2026-08-19. When the hero was re-cut to open on the keyboard shot (rotate-hero-start.sh), the loop's bright studio-wall frame moved under the centred white name, and verify/webkit-film-contrast.js measured it at 2.32:1 against a 3:1 bar at 390 — a real dip that the old cut also had at a time the check happened not to sample. This is a soft vertical scrim darkest behind the name and faded to nothing above and below, so the film stays clean at top and bottom and only the band the name sits in is protected. Tuned against the checker, not by eye. */ linear-gradient(to bottom, transparent 20%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.42) 56%, transparent 82%) } /* the long thesis is hidden here on purpose: under a 11.6vw name it reads as a wall, and the roles it carries are already in the mark strap under his name in the header */ [data-hero="name"] .hero-foot .thesis{display:none} /* ---- THE NAME, THE INTRO, AND THE DOCK ---- Mechanism measured live off vanmorrison.com 2026-08-13 (reference-capture.md), which CORRECTS the 2026-08-10 note in the README: that pass recorded "solid type, no knockout" and no hollow state. There is one, and it is two sibling spans inside one h1 — outline: -webkit-text-fill-color:transparent + 1px stroke, fading 1 -> 0 fill: solid, revealed by clip-path inset(0% 50%) -> inset(0%) inset(0% 50%) is 50% in from BOTH sides, so the fill opens from the centre OUTWARD in both directions at once. It is not a left-to-right wipe, and that symmetry is the whole reason it suits a centred name. Assuming "wipe" is the single easiest way to get this wrong. FAIL-SAFE BY DEFAULT: the settled state is the base rule and only [data-intro="run"] hides anything. No JS, no session support, a thrown error anywhere — the page still renders a solid name, a visible film and a visible header. The intro is an enhancement, never a gate. */ /* THE SCROLL DOCK IS GONE (Rokas, 2026-08-13): "the animation where it goes and dumps into the middle. It looks goofy." So the name is a plain in-flow block again — no fixed positioning, no transform, no measured slot, no scroll handler. The header's centre slot now holds the lion mark permanently instead of being a landing zone. Recoverable from git if it is ever wanted back. */ .hero-name{ position:relative;margin:0; font-family:var(--f-name);font-weight:700; text-transform:uppercase; /* a NAME, not a sentence: the all-caps bar does not apply */ /* set by measurement, not by eye: see --name-size below */ font-size:var(--name-size); line-height:.86;letter-spacing:var(--name-tracking); white-space:nowrap;text-wrap:nowrap; text-align:center; color:#FFF /* Rokas: white, not the ivory token */ } .hero-name .hn{display:block} .hn-out{ position:absolute;inset:0; -webkit-text-fill-color:transparent;color:transparent; -webkit-text-stroke:1px #FFF; opacity:0;transition:opacity 300ms linear 1000ms } .hn-fill{clip-path:inset(0%);transition:clip-path 640ms cubic-bezier(.25,.85,.3,1) 460ms} /* ---- the running intro. Everything below is the ONLY thing that hides. ---- */ [data-intro="run"] .hn-fill{clip-path:inset(0% 50%);transition:none} [data-intro="run"] .hn-out{opacity:1;transition:none} /* THE NAME DOES NOT PAINT UNTIL THE DISPLAY FACE HAS LOADED, and this is a fix rather than a nicety. Measured: the h1 sat at y=446 during the intro and y=311 once settled, a 135px lurch, because the flow slot it is measured against moves when Atkinson replaces the fallback face. The hollow also spent the first frames outlined in the WRONG face, since Atkinson is materially wider. Waiting for fonts kills both at once. JS adds .fonts-in; a hard timeout in the JS guarantees it is added even if fonts.ready never settles, so this can never strand the page on a blank hero. */ [data-intro="run"] .hero-name{opacity:0} [data-intro="run"].fonts-in .hero-name{animation:hnOut 340ms ease both} @keyframes hnOut{from{opacity:0}to{opacity:1}} /* The film is held back until the name is solid, and this is the finding that matters most from the reference: frames 0 to 2200ms measured mean 15.0 with standard deviation EXACTLY 0.00, i.e. flat ground, no imagery. The name arrives in silence on black and the world appears behind it once it is solid. Not incidental: a 1px hairline over his lit BTS footage would be mush. */ .hero-film video,.hero-film::after{opacity:1;transition:opacity 900ms ease 1180ms} [data-intro="run"] .hero-film video, [data-intro="run"] .hero-film::after{opacity:0;transition:none} .top{opacity:1;transition:opacity 700ms ease 1300ms} [data-intro="run"] .top{opacity:0;transition:none} /* The hero is name-only now, so there is nothing left in .hero-in to hold back besides the name itself, and the name must NOT be held back. Kept scoped to the statement hero's copy, which still exists as a comparison mode. THE EXCLUSION IS LOAD-BEARING. The h1 is a direct child of .hero-in, so the first version of this rule set the NAME to opacity 0 and the intro rendered a black screen — while every check passed, because they asserted .hn-out's own opacity (a truthful 1) and never asked whether a pixel had been painted. Same class as the guide articles with a perfect DOM and zero glyphs. Do not simplify this selector. */ [data-intro="run"] .hero-in > :not(.hero-name){opacity:0;transition:none} .hero-in > :not(.hero-name){opacity:1;transition:opacity 700ms ease 1300ms} /* Skipping zeroes the DELAYS but keeps the durations, so an impatient visitor gets the ending played quickly rather than a hard cut. A cut here would flash the film in, which is the one thing the whole sequence exists to avoid. */ .intro-skip .hn-fill{transition-delay:0ms;transition-duration:260ms} .intro-skip .hn-out{transition-delay:60ms;transition-duration:180ms} .intro-skip .hero-film video,.intro-skip .hero-film::after, .intro-skip .top,.intro-skip .hero-in > *{transition-delay:120ms;transition-duration:320ms} /* The fill size differs per face and is TUNED FROM MEASUREMENT, not derived: the two faces carry different tracking here (-.035em vs -.01em), which moves the width more than the glyph shapes do. First guess underfilled Atkinson at 92% and overflowed Clash at 390. Measured fill now sits at 96-98% of the column at every width from 390 to 1440. */ /* 12.1 -> 12.4vw on 2026-08-13, and this is measured rather than nudged. The old number was tuned against a padded column; the h1 is now full-bleed, and a Range around the text node (the ELEMENT box is display:block and therefore always 100%, which made the previous fill check unfailable) put the real run at 93%. The reference is 1374/1440 = 95.4%. Swept 390/560/834/1024/1280/1440/ 1920: 12.4vw holds 95% at every desktop width with no overflow; 12.6vw is unstable and collapses to 90% at 1024. Do not raise it further. */ :root{--name-size:12.4vw;--name-size-m:22.2vw;--name-tracking:-.035em; /* the size the name lands at once docked in the header row */ --dock-size:clamp(.95rem,1.15vw,1.2rem)} .hero-line{ margin:0;max-width:34ch; font-size:clamp(1rem,.72rem + .55vw,1.35rem);line-height:1.42; color:color-mix(in srgb,var(--ink) 88%,transparent) } /* sub-copy in a narrow column with the CTA BESIDE it, not under it. Theirs is a 356px column with the pill at x=391, bottom-aligned to the same baseline. */ .hero-foot{display:flex;align-items:flex-end;gap:clamp(1.25rem,3vw,2.5rem);flex-wrap:wrap} .hero-foot .thesis{ margin:0;max-width:24rem;flex:0 1 24rem; font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem);line-height:1.5;color:var(--ink-dim) } .hero-cta{display:flex;gap:.875rem;flex-wrap:wrap;flex:none} /* The preview-furniture CSS went with its markup on 2026-08-13. Dead CSS rots, git does not. */ @media (max-width:900px){ .flag-long{display:none} .flag-short{display:block;min-width:0;flex:0 0 auto} .flag-in{gap:.5rem;justify-content:space-between} } .demo-flag{ position:fixed;left:0;right:0;bottom:0;z-index:95; background:var(--a-story);color:#1a1000;font-size:.75rem;letter-spacing:.04em; padding:.45rem 0;line-height:1.4 } @media (max-width:900px){ /* MOBILE DROPS THE MORPH, deliberately. The name stacks to two lines here (see the 560 block), and docking a two-line name into a header row is a different animation, not a smaller one. So below 900 the wordmark is simply always visible at header size, which is what markclennon.com does anyway, and the hero name stays in normal flow. One behaviour each, both honest. */ /* .social goes with .nav, not separately. Below 900 the row is lion + a hamburger that STILL has no handler anywhere in this file, so leaving the four glyphs visible would put them beside a dead button in a two-column grid built for two children. Mobile keeps exactly the behaviour it had; the header's real mobile defect is unchanged and still open. */ .nav,.social{display:none} .top-in{grid-template-columns:1fr auto;gap:.75rem} .top-slot{justify-self:start} .hero-name{ /* relative, NOT static: .hn-out is position:absolute inset:0, so with a static parent it escapes to .hero (which is positioned) and the outline renders offset from the fill by the whole padding. Caught by looking at a 390 screenshot; every automated check passed with it present. */ /* NO padding-inline here. The parent .hero-in already carries .wrap's padding, and adding it again put the content box 20px inside the padding box while .hn-out (absolute, inset:0) resolved against the PADDING box — so the outline rendered 20px off and 40px wide of the fill. */ /* CENTRED, 2026-08-17 (Rokas, on a phone: the name is "off centre ... horizontally"). name mode already sets text-align:center on .hero-in, but this rule overrode it to left and the two block spans then hung left. */ position:relative;transform:none!important;text-align:center } .nav-toggle{ display:grid;place-items:center;justify-self:end; width:2.75rem;height:2.75rem;margin-right:-.5rem } .hero-copy{max-width:100%} .hero-film video{object-position:54% 30%} /* stacked type runs the full width, so the horizontal half of the wash cannot carry it. Measured on rendered pixels. */ /* Top scrim here too. Mobile is where this was easiest to miss: the header wordmark is only VISIBLE below 900px (desktop hides it and docks the h1 into its box instead), so this surface carries text that no other breakpoint has. Measured at 2.32:1 over the film and 2.61:1 over the poster before the last three stops existed. Name mode escaped it purely on specificity, which is not a reason to leave it. */ .hero-film::after{ background:linear-gradient(to top, var(--ground) 0%, color-mix(in srgb,var(--ground) 95%,transparent) 28%, color-mix(in srgb,var(--ground) 80%,transparent) 46%, color-mix(in srgb,var(--ground) 38%,transparent) 68%, color-mix(in srgb,var(--ground) 24%,transparent) 86%, color-mix(in srgb,var(--ground) 58%,transparent) 93%, color-mix(in srgb,var(--ground) 90%,transparent) 100%) } } @media (max-width:900px){ } @media (max-width:560px){ .switch b{display:none} /* "TRAIDY NAIDOO" on ONE line at 390 is only 41px in Atkinson, which is not a hero. Van Morrison keeps one line at 390 because Oswald is condensed; we cannot, so we stack and get the size back: 23vw a line, measured the same way. */ .hero-name{white-space:normal;--name-size:var(--name-size-m);line-height:.92} .hero-name span{display:block} /* CENTRE IN THE FRAME BELOW THE HEADER, 2026-08-17 (Rokas, on a phone: the name is "off centre vertically"). `.hero-in`'s base padding is top-heavy (top clamp(6rem,12vh,9rem) against bottom clamp(2rem,4vw,3rem)), so name mode, which justify-content:centers, dropped the name low. Setting the top pad to the header height and the bottom pad to near zero centres the stack in the area under the nav rather than in the whole viewport. */ [data-hero="name"] .hero-in{ padding-top:calc(var(--header-h) + env(safe-area-inset-top)); padding-bottom:calc(1.25rem + env(safe-area-inset-bottom)) } } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001s!important;transition-duration:.001s!important} /* motion-sensitive visitors get the poster frame, not a looping film */ .hero-film video{display:none} .hero-film{background:var(--ground) center/cover no-repeat url("video/traidy-bts-poster.jpg")} /* THE INTRO IS OFF, and this is where we part company with the reference. vanmorrison.com was traced under reducedMotion:reduce and plays the identical ~700ms fill anyway. His own brief makes readable, accessible typography a stated differentiator, so ours lands solid in the same tick. Belt and braces: the JS also never sets data-intro="run" here, but these !importants mean a stale attribute cannot strand anyone on a hidden page. */ [data-intro="run"] .hn-fill{clip-path:inset(0%)!important} [data-intro="run"] .hn-out{opacity:0!important;animation:none!important} [data-intro="run"] .top, [data-intro="run"] .hero-film::after, [data-intro="run"] .hero-in > *{opacity:1!important} /* no scroll morph either: the name is simply where it is */ .hero-name{position:relative;transform:none!important;text-align:center} } /* ========================================================================== BELOW THE HERO — integrated 2026-08-14 (ARCHITECTURE §6, piece 7). The old callings / release+tracklist / archive+chips / speaking-band CSS was deleted above and is replaced by the shared rig plus one block per section. Order matters and mirrors the piece pages exactly: the tokens above stand in for _tokens.css (it was extracted from them), then _rig.css, then each piece. ========================================================================== */ /* ---------- SHARED: pieces/_rig.css, verbatim, once ---------- */ /* ============================================================================ THE RIG — ARCHITECTURE §3.0 + AMENDMENT A7. SHARED. Three later pieces inherit this file. Built against §3.1's payload (the ledger) because a rig with no payload is not judgeable, but nothing in here knows anything about the ledger. What lives here: the frame, the 3-column rig, the gate + brackets, the two rails, the display split and its measure, the FULL-BLEED photographic field + scrim, the covenant polarity branch, the two easing tokens, the entrance, reduced motion, focus. What does NOT: anything a section owns (the ledger table, the lens radiogroup, the shapes band, the doors). Those stay in each piece's own