/* bands.css — the band system BELOW the hero: a run of full-width SECTIONS * standing on the page's own ground, each one a column-structured stage. * Nothing here is a box any more: no fill, no radius, no inset. The hero * (`.toy` / `.scene-figure--hero`, a different class entirely) and every band * share one ground — the warm cream `--bg` — which is also the ground the * crew artwork is drawn on, so a scene now bleeds into the page with no seam. * * @docs ../../../plot-os/specs/sections/stage-component.md — "The section * stage, a reusable primitive": §3.1 is elbow-room, §4 the count-driven * column grid. That document is the SOURCE OF RECORD for the layout below. * ../../../terminal-c/site/src/css/page.stage.css — the pilot the spec was * written from; the unprefixed variable names used here (`--edge-pad`, * `--elbow-cap`, `--elbow-room`) are its names, line for line. PlotOS's own * framework-prefixed spellings (`--stage-elbow-*`) are for a FRAMEWORK; * Touchtone is a consumer, so it takes the pilot's names (§0.3). * ../../docs/designs/site-home-sell-the-app.md. * * Concatenated by pipeline/emit.mjs's writeStylesheet, which sorts src/css/* * by filename (`bands` < `base` < `components` < `toy`) — this file therefore * loads FIRST. That is safe here specifically because every selector below is * a brand-new class (`.band`, `.say`, `.sub`, `.plate`, `.spec`, `.shot`, * `.row`, `.facts-list`, `.cta`) that nothing in base.css/components.css/ * toy.css also targets, so there is no cascade-order tie to win or lose — * confirmed by reading all three before adding this file, not assumed. The * one genuine override this page needs (`.cta-final-actions` no longer wants * components.css's rounded-card `.cta-final` look) is made IN components.css * itself, not fought for here — see that file's own "closing cta / cta band" * section. * * 🔴 NO COLOUR LITERALS BELOW. Every fill is a token: `--void`/`--ink`/ * `--structure`/`--bg` (theme/law.css). `--void` MUST stay exactly `#000000` * — the one band that uses it (`#world`) draws the app's own play surface, * and the hero's own law is "pitch black, not near-black." `--bg` (the page * ground) is a warm cream since 2026-09-26 ("the black page background does * not feel kid-friendly"); the two are DELIBERATELY DECOUPLED, not aliases * of each other the way they were when the whole page was black. * * ══════════════════════════════════════════════════════════════════════════ * 🔴 THE CARD SYSTEM IS RETIRED — 2026-09-29, OWNER CALL. * READ THIS BEFORE RE-ADDING A FILL, A RADIUS OR AN INSET TO `.band`. * ══════════════════════════════════════════════════════════════════════════ * * WHAT IS GONE, and what it was. From 2026-09-26 until this change every * band was an inset, rounded, TINTED rectangle floating on the page ground — * `--card-inset: clamp(12px,2.8vw,40px)` / `--card-radius: clamp(8px,1.5vw, * 12px)` / `--card-gap: 24px` on `:root`, plus `place-items: center` and * `text-align: center` on `.band`, plus four tone fills * (`.band.paper` `--theme-keys`, `.band.steel` `--steel`, `.band.accent` * `--theme-drums`, `.band.void` `--void`). It was measured off frame.work/de/de * and it was a faithful port. It is deleted anyway. Git history has every * line if it is ever wanted back. * * WHY. The owner, looking at the built page: "I need to remove the cards and * align more like we did in terminal-c — using the section with col structure * and elbow-room… we have too many colors that clash — less is best here." * Three separate faults, one shape: * * 1. SIX CARDS in one scroll read as six posters stacked, not as one * spread. Air between boxes is a gutter; air inside a section is rhythm. * 2. `place-items: center` + `text-align: center` FORBADE a column * structure by construction. A `.scene-band` is exactly two children — * copy and picture — and could never be two columns while the parent * centred everything into one stack. * 3. THE TINTS BROKE THE SITE'S OWN LAW. theme/law.css, quoting the app: * "White is structure, colour is content. Colour means a note. Always — * never decoration." `.band.accent` was `--theme-drums`, the app's DRUMS * voice-identity colour; `--paper` was `--theme-keys`, the KEYS colour; * `--accent` was `--theme-flute`. Three app-voice colours conscripted as * mood tint behind a headline. A band does not mean a note. (`--steel` * was worse in a different way — a bare Riffmix literal, a COLD grey on * a warm cream page, with no counterpart in the app at all.) * * THE ARTWORK SETTLES IT. The crew scenes (site/_proto/crew/) are governed by * their own stated rule: "Kids stay muted; the coloured note discs are the * only saturated thing in every frame, so law.css's 'colour means a note, * never decoration' survives the move to cream." A #FF9E33 band behind a * picture whose entire compositional discipline is "the notes are the only * saturated things" cancels the picture. And the scenes are drawn on #FAECD7 * — `--bg` EXACTLY — so with the tints gone every scene bleeds into the page * with no seam, which is also why `.band .scene-img`'s border-radius could go * (see that rule's own note further down). * * 🔴 `.band.void` NOW HAS NO CONSUMER, 2026-09-29 (later the same day). The * sentence that stood here — "ONE TONE SURVIVES: `.band.void`. `#world` draws * the app's real play surface, white-on-black" — became false the moment * `#world` was retired (owner: "the stage behind 'Push past a limit' and the * three kids is the zoom-in-out animation"). The app's real play surface is * still on the page and still white-on-black, but it is a PANEL inside * `no-wrong-way`'s picture now, not a section: its black is `src/css/ * wall.css`'s `.wall-surface`, and nothing on the page fires law.css's * dark-surface override any more. The declaration below is kept — one line, * inert, and the correct home for the next band that genuinely needs the * app's ground — but it is documentation of an intent, not a live rule. * * ⚠️ THE HONEST COST, stated up front so the next reader does not "fix" it: * the page is cream → cream → cream → cream → cream → cream and it reads * FLATTER at first glance than the tinted version did — flatter still now * that the one black band is gone. That is expected and it is the trade. The * rhythm comes from air, scale and the column structure below — NOT from a * fifth ground. If it still reads flat, the next move is more air and more * scale contrast, never another tint, and never a second copy of the world * animation put back purely to be dark. */ /* ── the band itself — a stage, not a card ──────────────────────────────── */ /* Ported from PlotOS `specs/sections/stage-component.md` §3.1, via the * terminal-c pilot. `--edge-pad`, `--elbow-cap` and `--elbow-room` are * declared once in base.css's `:root` (beside `--page`/`--page-wide`, with * the full derivation of each) rather than here, because the illustration * hero has to land on the SAME column to the pixel and two copies of that * arithmetic is exactly how it drifted before. * * `overflow: clip` is terminal-c's own guard (`page.stage.css:342`) and it is * not decoration: `--elbow-room` is computed from `100vw`, which includes the * classic scrollbar on some engines, so a bled child could in principle out- * reach the real viewport by a scrollbar's width at one narrow band of sizes. * Clipping costs nothing here (no sticky descendant, no shadow that needs to * escape) and makes a horizontal scrollbar impossible rather than unlikely. * * 🔴 KEEP `margin: 0`. It is load-bearing, not tidy-up: base.css's * `main > section, main > header { margin: 0 0 var(--space-6); }` otherwise * wins on margin-block. A class selector outranks those two bare type * selectors, so this is order-independent however bands.css sorts among its * siblings. (Unchanged reasoning, carried across the card's retirement — the * `margin-inline`/`margin-block` re-sets that used to follow it are gone, * this line is not.) * * 🔴 `align-items`/`align-content: center`, NOT `place-items: center`. The * block axis is the one the stage actually wants centred; the inline axis * must stay `stretch` or a two-column split collapses to two shrink-wrapped * lumps in the middle of the page. terminal-c's `page.stage.css:308-340` * carries two documented reversals on this exact line — read them before * changing it a third time. Inline ALIGNMENT (as opposed to sizing) is the * children's business, never the container's: see the positional block below. * * `grid-column: full` is unchanged — `main` is a 5-track full-bleed grid * (base.css) and `.band` still spans it edge to edge. What changed is that * the band no longer steps back in from those edges; its PADDING does the * work the old `margin-inline: var(--card-inset)` did, so the ground runs * unbroken behind everything. */ .band { grid-column: full; position: relative; overflow: clip; margin: 0; padding-inline: var(--edge-pad); /* 🔴 FLAT 23px — owner, 2026-09-30: "the padding-block of .band can just be * 23px cap". Third value today and each one tighter: `clamp(72px, 11vh, * 150px)` → halved to `clamp(36px, 5.5vh, 75px)` → this. * * A FLAT VALUE, NOT A CLAMP, and that is the literal reading of the * instruction rather than a liberty: `clamp(36px, 5.5vh, 23px)` is * degenerate — when the floor exceeds the ceiling CSS returns the floor, so * it would have silently shipped 36px everywhere and looked like the cap * was being ignored. One number says what it means. * * ⚠️ WHAT THIS SPENDS. bands.css's own card-retirement argument at the top * of this file rests on "air between boxes is a gutter; air inside a * section is rhythm" — there is now 23px of that air, down from 150px at * the widest. The sections are still stages rather than cards, so the * argument holds, but essentially none of the page's rhythm can come from * vertical air any more: it has to come from scale contrast and from the * pictures. Worth re-reading that block before adding anything back. */ padding-block: 23px; display: grid; align-items: center; align-content: center; gap: var(--space-4); } /* Unbound since 2026-09-29 — `#world`, its only consumer, is retired. Kept * as the declared home of the app's own ground. See the header. */ .band.void { background: var(--void); color: var(--structure); } /* ── the count-driven column grid — stage-component.md §4 ────────────────── */ /* The shape follows from HOW MANY children the section has, with no layout * class to author and nothing for wireframe.yml to get wrong. * * 🔴 `:not(:has(> .plate))` ON EVERY SELECTOR BELOW IS LOAD-BEARING, not * noise: the count counts STAGE CHILDREN, and an absolutely-positioned * corner plate is chrome, not one. See the note on `.band:has(> .plate)` * further down for what it cost to learn that, and for why the guard lives * here rather than in an override. * * 1 → full width 2 → two columns 3 → one across, two below * 4 → 2×2 5 → one across, then two rows of two * * Only 1 and 2 are exercised by today's home page (`scene-band` is exactly * two children — copy + figure — so the split it never had is free, with no * markup change). 3/4/5 are stated now so the next band does not rebuild the * block: terminal-c did exactly this and said so (`page.stage.css:2382-2385`). * * Below 900px `.band` declares no columns at all and its children stack on * their own — same boundary terminal-c uses, and no undo rule to write. */ .band:not(:has(> .plate)):has(> :nth-child(1):last-child) { grid-template-columns: 1fr; } @media (min-width: 900px) { .band:not(:has(> .plate)):has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); } .band:not(:has(> .plate)):has(> :nth-child(3):last-child) { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "a a" "b c"; } .band:not(:has(> .plate)):has(> :nth-child(3):last-child) > :nth-child(1) { grid-area: a; } .band:not(:has(> .plate)):has(> :nth-child(3):last-child) > :nth-child(2) { grid-area: b; } .band:not(:has(> .plate)):has(> :nth-child(3):last-child) > :nth-child(3) { grid-area: c; } .band:not(:has(> .plate)):has(> :nth-child(4):last-child) { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .band:not(:has(> .plate)):has(> :nth-child(5):last-child) { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a a" "b c" "d e"; } .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(1) { grid-area: a; } .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(2) { grid-area: b; } .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(3) { grid-area: c; } .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(4) { grid-area: d; } .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(5) { grid-area: e; } } /* Grid items default to `min-width: auto`, which lets a long unbroken string * or a wide image push a track past its share. `0` makes `1fr` mean `1fr`. */ .band > * { min-width: 0; } /* ── per-child positional alignment — stage-component.md §4.3 ───────────── */ /* This is what replaces `text-align: center` on the container, and it is the * single biggest reason the page used to read as a stack of posters rather * than a spread. The owner's own rule, quoted in the spec: "the .container * should not have .text-left — the children get those classes." * * The default is POSITIONAL: a full-span child centres, a real left column * aligns left, a real right column aligns right. * * 🔴 It rides the SAME `:has(> :nth-child(N):last-child)` selectors the shape * is keyed on — never `:first-child`/`:last-child`. stage-component.md §3.1 * [C6] is emphatic, and states the rule generally: NEVER GUESS POSITION * INDEPENDENTLY A SECOND TIME. Two independent guesses drift the first time * a count changes. */ .band:not(:has(> .plate)):has(> :nth-child(1):last-child) > :nth-child(1) { text-align: center; } @media (min-width: 900px) { .band:not(:has(> .plate)):has(> :nth-child(2):last-child) > :nth-child(1), .band:not(:has(> .plate)):has(> :nth-child(3):last-child) > :nth-child(2), .band:not(:has(> .plate)):has(> :nth-child(4):last-child) > :nth-child(1), .band:not(:has(> .plate)):has(> :nth-child(4):last-child) > :nth-child(3), .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(2), .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(4) { text-align: start; } .band:not(:has(> .plate)):has(> :nth-child(2):last-child) > :nth-child(2), .band:not(:has(> .plate)):has(> :nth-child(3):last-child) > :nth-child(3), .band:not(:has(> .plate)):has(> :nth-child(4):last-child) > :nth-child(2), .band:not(:has(> .plate)):has(> :nth-child(4):last-child) > :nth-child(4), .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(3), .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(5) { text-align: end; } /* the header row of an odd count spans both tracks, so it centres */ .band:not(:has(> .plate)):has(> :nth-child(3):last-child) > :nth-child(1), .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(1) { text-align: center; } } /* ── elbow-room — stage-component.md §3.1, pilot names ──────────────────── */ /* A child wearing `.elbow-room` may grow OUTWARD past the page column, up to * `--elbow-cap` per side, and not at all once the viewport is at or below the * page column. A bare `.elbow-room` bleeds both ways; a real left or right * column cancels its INWARD edge so the gutter between the two columns stays * a gutter. * * 🔴 DO NOT also port `.col-bleed`. stage-component.md:478-501: the two "must * never be worn together — two negative margins on one box is two bleeds." * Touchtone has no page-wide column image yet; add it when one exists. */ .band > .elbow-room { margin-inline: calc(var(--elbow-room) * -1); } @media (min-width: 900px) { .band:not(:has(> .plate)):has(> :nth-child(2):last-child) > :nth-child(1).elbow-room, .band:not(:has(> .plate)):has(> :nth-child(3):last-child) > :nth-child(2).elbow-room, .band:not(:has(> .plate)):has(> :nth-child(4):last-child) > :nth-child(1).elbow-room, .band:not(:has(> .plate)):has(> :nth-child(4):last-child) > :nth-child(3).elbow-room, .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(2).elbow-room, .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(4).elbow-room { margin-inline-end: 0; } .band:not(:has(> .plate)):has(> :nth-child(2):last-child) > :nth-child(2).elbow-room, .band:not(:has(> .plate)):has(> :nth-child(3):last-child) > :nth-child(3).elbow-room, .band:not(:has(> .plate)):has(> :nth-child(4):last-child) > :nth-child(2).elbow-room, .band:not(:has(> .plate)):has(> :nth-child(4):last-child) > :nth-child(4).elbow-room, .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(3).elbow-room, .band:not(:has(> .plate)):has(> :nth-child(5):last-child) > :nth-child(5).elbow-room { margin-inline-start: 0; } } /* Focus rings: NO per-band override needed (and none lives here as of * 2026-09-26). base.css's global `:focus-visible` reads `var(--text-bright)` * — the ADAPTIVE token (dark ink by default, white only inside `.toy, * .band.void`, theme/law.css) — which already resolves correctly on every * ground with zero per-band CSS — RE-CONFIRMED 2026-09-29 after the card * system was retired, by tabbing the whole page and reading * `getComputedStyle` on all six focusables: every one computes `outline: * solid 2px rgb(17, 17, 17)` (`--ink`) on the cream ground, and the token * still flips to a light value inside `.band.void`. (The original check was * made on the closing CTA when it was a `.band.steel` card; the tone is gone, * the conclusion is not.) A scoped `.band:not(.void) :focus-visible { outline-color: * var(--ink) }` used to live here, written before base.css's own fix landed * sitewide; removed once confirmed redundant rather than kept as * belt-and-suspenders — two sources of the same fact is how they drift. */ /* ── .say / .sub — variant-R, verbatim ───────────────────────────────────── */ /* 🔴 `color: var(--text-bright)`, 2026-09-29 — REVERSING this rule's own * `color: inherit`, and the reversal is instructive rather than a correction * of a mistake. `inherit` was RIGHT while the tone grounds existed: each * `.band.` declared its own `color` (ink on paper/steel/accent, * structure on void), and base.css's global `h1, h2, h3 { color: * var(--text-bright) }` targets `.say` DIRECTLY, which beats inheritance from * an ancestor no matter what that ancestor's specificity is. Without * `inherit` every headline took `--text-bright`'s then-dark-theme `#dadada` * and measured 2.33:1 on the red band — below even the large-text floor. * * Two things changed. The tone grounds are gone (this file's header), so * there is no longer an ancestor colour worth inheriting; and `--text-bright` * is now the ADAPTIVE token (theme/law.css scopes it per surface: `--ink` on * the light ground, a light value inside `.band.void`), which is exactly the * job `inherit` was standing in for. Measured, not assumed: `inherit` was * resolving to ``'s `--text-primary` (#444444 then, #4a433b since the * 2026-09-29 warm-neutral pass — same luminance, see theme/law.css) — 8.37:1, * passing, but the * SAME value as the body copy beneath it, so the page's largest type carried * no more weight of colour than a sentence. `--text-bright` measures 16.23:1 * and restores the hierarchy the `

` already had. */ /* 🔴 RE-CUT 2026-09-29 with the one-family type change (theme/law.css's * Type note carries the owner call). Four changes, each with its own reason: * * weight 800 → 600 `--disp` is General Sans now, not Cabinet Grotesk; 800 * does not exist in it and 600 is the cut this site * newly ships. It is also the right WEIGHT: the crew * artwork's heaviest mark anywhere is a 2px hairline, * and a slab of ExtraBold over dusty-sage trousers read * as a magazine cover pasted onto a picture book. * * text-transform GONE. Forcing lowercase was softening applied to the * wrong variable — the problem was weight and contrast, * never case — and it silently contradicted * content/copy.json, which authors these lines in * sentence case. The rendered page now says what the * content file says. * * line-height .92 → 1.02. `.92` set the headline as a dense brick, the * exact opposite of the artwork's defining generous * negative space. Just over 1 lets a two-line headline * breathe without opening into a gap. * * font-size `clamp(2.3rem, 7.4vw, 5.2rem)` → * `clamp(2rem, 4.6vw, 3.6rem)`. The old scale was * measured for a headline that had the FULL page width * to itself, which is what a centred card gave it. In * the two-column stage a `.say` gets half a column * (556px at 1440), where 5.2rem wrapped every headline * to three and four lines. The `vw` term drops with it, * since the viewport is now roughly twice the box. */ .say { font-family: var(--disp); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.02; font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 17ch; /* 🔴 `margin-inline: 0`, NOT `0 auto` — changed with the card's retirement. * `max-width: 17ch` is narrower than a half-column at 1440, so an `auto` * inline margin re-CENTRED the headline inside a left column and silently * undid the positional alignment above. `text-align` alone cannot fix that: * it aligns the text inside the box, and the box was already floating in * the middle of the track. Same trap on `.sub` and `.toy-description`. */ margin: 0; margin-inline: 0; color: var(--text-bright); } /* 🔴 OFF MONO, 2026-09-29. This was `var(--mono)` at 11px/+0.14em/`.62` * opacity — a laboratory instrument panel under every headline on the page, * and the single most-used wrong face on it. It is a SENTENCE: it gets the * body face, a readable size, and the body's own tracking. * * 🔴 COLOUR, NOT OPACITY — the same correction `toy.css`'s * `.toy-description` already made and for the same reason: an opacity is a * contrast number you cannot look up, it changes meaning the moment the * ground under it changes, and it took TWO per-band patch rules to keep AA * (`.band.steel .sub` at `.72`, `.band.accent .sub` at `.75`) — both now * deleted with the tints. `--text-muted` is a real token, solved against * this ground (4.89:1, see theme/law.css), and it ALREADY adapts on the one * dark band via law.css's `.band.void` override. One value, measured once. * * At ≥16px this also stops being "small text" under WCAG 1.4.3 — but the * token clears the stricter 4.5:1 floor anyway, so nothing here depends on * that carve-out. */ .sub { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.55; letter-spacing: var(--tracking-tight); color: var(--text-muted); /* see `.say` above for why the inline margin is 0 and not `auto` */ margin: 20px 0 0; max-width: 42ch; } /* 🔴 TWO CONTRAST PATCHES DELETED HERE, 2026-09-29, and they are worth a * note because they are the clearest evidence the tints were costing more * than they earned. `.band.steel .sub { opacity: .72 }` existed because * `--ink` on `--steel` at the base `.62` measured 4.37:1 — an AA miss. * `.band.accent .sub { opacity: .75 }` existed because `--ink` on * `--theme-drums` measured 4.01:1 — a worse one. Two per-band overrides, both * propping up a decorative ground. With the tints retired the base `.62` is * measured on `--bg` and there is one number to keep, not three. See the * measured table in this file's `.sub` note above. */ /* ── .plate — corner labels naming what's on screen ──────────────────────── */ /* 🔴 NOW PASSES AA OUTRIGHT, 2026-09-29 — and the rule it replaces was a * DECISION, not an omission, so here is why the decision is withdrawn rather * than overturned. `.plate` used to be `opacity: .55`, and the note here * argued (correctly, on the evidence it had) that raising it to clear 4.5:1 * "would mean a visibly heavier corner label on EVERY band, including * `--void` where it is already comfortably compliant (~6:1+) — the wrong * trade." That objection was entirely about the MECHANISM: an opacity is one * number applied to every ground at once, so fixing the worst case * over-corrects the best one. * * `--text-muted` is not one number. theme/law.css scopes it per surface, so * the light ground gets #6B665E and `.band.void` keeps its own #848484 — the * exact value already measured at 6.25:1 there. The objection's premise is * gone, so the carve-out is no longer needed and is not claimed. MEASURED on * the built page: was 2.72:1 on the cream ground (worse than the 3.57:1 the * old note recorded on `--steel`, because the ground got lighter); now * 4.89:1 on cream, 6.25:1 on void. design.md's standing rule decides it — * "Muted ≠ illegible … darken the tier, don't argue the aesthetics." * * The `aria-hidden="true"` on every `.plate` in the markup is UNCHANGED and * still correct for its own reason: none of them carries information not * already stated in plainer text (the view name is in the screenshot's `alt`, * the platforms line repeats `app.json`). It is simply no longer doing double * duty as a contrast excuse. */ .plate { font-family: var(--mono); font-size: 11px; letter-spacing: var(--tracking-mono); color: var(--text-muted); pointer-events: none; } /* Direct children of a band (or the toy hero) are true corner plates — * variant-R's own `.bl`/`.br`. A `.plate` living inside `.shot-figure` * (below) is a per-screenshot caption instead and gets its own, in-flow * position there — see that rule's comment for why. */ .band > .plate.bl, .toy > .plate.bl { position: absolute; left: 20px; bottom: 18px; } .band > .plate.br, .toy > .plate.br { position: absolute; right: 20px; bottom: 18px; } /* ── `.plate--requirement` — the platform line, centred under the buttons ─── * Owner, 2026-09-30: "move iOS 17+ to the center under the buttons and change * to 'Requires iOS 17 or newer'. and som distance above and below it with a * small text." * * It keeps `.plate`'s FACE (mono, 11px, the mono tracking) and drops its * PLACEMENT: a corner plate is absolutely positioned, this is in flow. The * class is still `.plate` on purpose — `.band:not(:has(> .plate))` is what * keeps this four-child section as one centred column instead of a 2×2 grid; * see the layout's own comment. * * `--text-secondary`, not `.plate`'s `--text-muted`: this is the only place * the site states a system requirement, so it is information a visitor may * need rather than a decorative chip. Measured on the page ground — muted is * 4.89:1 and secondary is 6.11:1, both pass, and the brighter one is right * for something meant to be read. * * `pointer-events` is re-enabled for the same reason: `.plate` disables them * because a decorative chip should never eat a click, but text a user might * want to select should not be unselectable. */ .plate--requirement { position: static; margin-block: var(--space-3) var(--space-2); text-align: center; color: var(--text-secondary); pointer-events: auto; } /* See `.spec`'s own comment just below — same fix, same reason: `.toy` sets * no `color` of its own, so its corner plate ("↓") needs an explicit * `--structure` rather than inheriting ``'s ordinary grey. */ .toy > .plate.bl, .toy > .plate.br { color: var(--structure); } /* ── .spec — the hero's terse, cited fact column (toy.yml only) ─────────── */ /* `color: var(--structure)` is explicit here (and on `.toy > .plate.br` * above) for the same reason `.say` needs `color: inherit` — measured, not * assumed: `.toy` itself never sets `color` (only `.toy-scene` does, scoped * to the SVGs), so without this `.spec`/`.plate` fell back to ``'s own * `--text-primary` (`#b3b3b3`, base.css's ordinary body-copy grey) rather * than the hero's actual white structure colour — confirmed via * `getComputedStyle` before this fix (`rgb(179, 179, 179)`, not `#fff`). */ .spec { position: absolute; left: 20px; /* 🔴 BOTTOM-LEFT, NOT VERTICALLY CENTRED. variant-R pins its spec column at * `top:50%; transform:translateY(-50%)`, and that is correct THERE because * its hero is a 1:1 video with dead space at the left edge. Ours is the live * 91% ring, which at a centred left edge runs straight through the column — * owner instruction 2026-09-25: "not overlaying the outer circle". Bottom * `18px` matches `.plate.bl`'s own offset, so the spec column and the corner * plates sit on one baseline; the hero uses only `.br`, so `.bl` is free and * there is no collision. A DECLARED DIVERGENCE from the approved variant, * driven by our hero's geometry rather than by taste. */ bottom: 18px; font-family: var(--mono); font-size: 11px; line-height: 2.2; letter-spacing: var(--tracking-mono); opacity: 0.62; text-align: left; pointer-events: none; color: var(--structure); } /* variant-R joins its facts with literal `
`s in one text node; * layouts/toy.yml instead wraps each in its own `` (mustache has no * "join with separator" form, and a trailing `
` after the last item would * add an asymmetric blank line). ⚠️ The original reason given here was that a * blank line would pull a VERTICALLY CENTRED column off-centre — that is now * stale, since the column is bottom-anchored and a trailing blank line would * instead lift the whole block off its baseline. Same conclusion, different * mechanism; the `` form is still the right one. */ .spec span { display: block; } /* ── .shot / .row — screenshots, void bands only (THE LAW) ──────────────── */ .shot { width: min(66vmin, 470px); height: auto; display: block; } .row { display: flex; gap: clamp(16px, 3.4vw, 44px); flex-wrap: wrap; justify-content: center; align-items: flex-start; } /* ⚠️ UNBOUND since 2026-09-29 — `layouts/shot-band.yml`, the only layout that * ever emitted `.shot-figure`, is deleted. Kept because the pattern it * states is still the right one for the next multi-image band: one * screenshot + its own view-naming caption, in flow rather than absolutely * pinned to a corner, because it captions ONE image among several rather * than the whole band. Two inert rules; nothing reads them today. */ .shot-figure { margin: 0; } .shot-figure .plate { display: block; margin-top: 10px; } /* ── .facts-list — the five parent facts (facts-band.yml only) ──────────── */ /* 🔴 OFF MONO, 2026-09-29, and this one mattered most. These are the five * parent facts — docs/designs/site-home-the-toy.md calls them "the single * highest-value non-hero element on the page" — and they were set at 13px in * IBM Plex Mono with +0.14em tracking and `.85` opacity, i.e. as a READOUT. * An evaluating parent scanning for "free / no ads / no accounts / what is * the microphone for" was being handed telemetry. They should read as * sentences, because they are sentences. * * The old note said the mono voice made this band read as "one more band in * the same system rather than a bespoke fourth thing." That was true and it * is still the goal — the system is simply a different one now: every band * on the page shares ONE face, so belonging costs nothing and no longer * requires borrowing the instrument-panel voice to get it. * * Opacity dropped rather than converted: at this size and importance the * facts want the body's own `--text-primary` (8.37:1 on the cream ground), * not a muted tier. */ .facts-list { list-style: none; margin: 24px 0 0; padding: 0; font-size: 1.0625rem; letter-spacing: var(--tracking-tight); line-height: 1.7; max-width: 38ch; } .facts-list li { margin: 0; } /* 🔴 A CHILD'S OWN OVERRIDE, which the positional default explicitly allows * (stage-component.md §4.3's three-step resolution: "the part's own align … * wins outright"; only step 3 is positional). `parent-facts` is two children, * so the list lands in the RIGHT column and the positional default would * right-align it. That answer is right for a figure — the spec's own measured * example is a figure, where alignment is meaningless — and wrong for five * sentences: a ragged LEFT edge on a list makes the reader re-find the start * of every line. Weighs (0,3,0) to answer the positional rule at its own * weight, and sits below it in the file. */ .band:not(:has(> .plate)):has(> :nth-child(2):last-child) > .facts-list { text-align: start; } /* ── .cta — one button style for every intent, live or not ──────────────── */ /* variant-R's own `.cta`: a bordered box, mono, no fill — the SAME look * whether the intent is disabled (content/cta.json's coming-soon badge, * rendered as a non-navigating ``, the same rule * src/html/_footer.html's Riffmix cross-link and this schema's own * `isDisabled` already follow) or live (``, e.g. the /support link) — * REPLACING components.css's `.btn`/`.badge` variant system for this layout * (layouts/cta-final.yml no longer branches on `{{variant}}`; see that * file's own header for why). `color: inherit` + `border-color: currentColor` * so the same rule is correct on every band tone with zero per-tone override. * * 🔴 PILL, 2026-09-26 — owner-approved. `border-radius: 999px` replaces the * squared corners: `.cta` is site chrome, not the play surface, so THE LAW's * "circles only" doesn't forbid it — a pill is arguably CLOSER to * circles-only than a rectangle was, and it removes the last hard-cornered * element on a page that, at the time, was otherwise all soft corners (the * Framework-inspired cards). ⚠️ THOSE CARDS ARE GONE as of 2026-09-29 and the * pill SURVIVES them, deliberately: the second half of the original argument * (a pill is chrome, and closer to circles-only than a rectangle) never * depended on the cards and still holds. It is now the only rounded thing on * the page, which reads as a deliberate control rather than as a leftover. * Both states re-checked on the one remaining ground: the disabled * `app-coming-soon` span and the live `/support` link. `border-color: * currentColor` means the border tracks whatever `color` the state sets — * see the `[aria-disabled]` rule below, where that is load-bearing. */ /* 🔴 OFF MONO, 2026-09-29. Every button on `/` was 12px machine-tracked * IBM Plex Mono — so the one moment the page asked a parent to act, it did so * in the voice of an engineering readout. docs/designs/site-home-sell-the-app.md * had already named the CTA as the page's problem without naming the typeface * as the cause. Body face, 500 (a control wants a touch more weight than the * prose around it), 1rem, body tracking. * * THE PILL STAYS — owner-approved 2026-09-26, see the note above. It is the * one rounded thing left on a page that used to be all soft corners, and that * is fine: a pill is chrome, and arguably closer to the app's circles-only * law than a rectangle ever was. */ .cta { display: inline-block; font-size: 1rem; font-weight: 500; letter-spacing: var(--tracking-tight); padding-block: 14px; color: inherit; border: 1px solid currentColor; border-radius: 999px; padding-inline: 22px; text-decoration: none; transition: background var(--motion-duration) var(--motion-ease); } /* A faint currentColor wash, not a hard invert — the only hover treatment * that is correct on every band tone (void/paper/steel/red) without knowing * which one it's on: inverting to a FIXED colour (e.g. always var(--bg)) * would render invisible text-on-background the moment currentColor itself * is dark (paper/steel's `--ink`). color-mix keeps the same foreground, * lightly filled, regardless of tone. */ a.cta:hover { background: color-mix(in srgb, currentColor 14%, transparent); } /* 🔴 `color`, NOT `opacity: .75` — changed 2026-09-29 because the measured * number failed. The disabled CTA is a `` carrying * REAL, non-decorative text ("Touchtone — coming to the App Store"), so the * full 4.5:1 applies to it; `--text-primary` (#444444 then, #4a433b since the * 2026-09-29 warm-neutral pass — identical luminance, so this number stands) * at `.75` over the cream * ground composites to rgb(114,110,105) and measures 4.35:1. `--text-muted` * measures 4.89:1, adapts on `.band.void` by itself, and dims the 1px border * with it for free since that reads `currentColor` — which also keeps the * control's own boundary past 1.4.11's 3:1. A disabled control still has to * be readable: it is telling the visitor what is coming, which is the only * reason it is on the page at all. */ /* 🔴 NO LONGER DIMS THE INK — 2026-09-30. This used to set `--text-muted`, * which was right on a fill-free bordered box (the button had the page's own * ground behind it, and muted-on-cream measured 4.89:1). The buttons have a * COLOURED FILL now, and `--text-muted` on #de7969 measures 1.91:1 — it was * shipped and caught by an in-browser sweep, not by reading the CSS. The * disabled state is already carried by `cursor` and by the element being a * non-navigating ``, which is what assistive tech * reads; dimming the text on top of that only made it illegible to everyone. * ⚠️ This rule is more specific than `.cta`'s own `color`, so anything set * here WINS — do not reintroduce a colour without measuring it on the fill. */ .cta[aria-disabled="true"] { cursor: default; } /* ── .compact — the PROMOTED, near-top CTA (layouts/cta-final.yml, reused * verbatim at a second placement: wireframe.yml's `cta-top` section) ────── */ /* Owner correction, 2026-09-25: "the CTA should be after the hero, or it is * hidden... promote the app." The SAME layout/markup as the closing * cta-final band, scaled down here so it reads as a quick reminder mid-page * rather than repeating the full closing moment's weight this early — `.say` * drops from the ~37-83px headline scale to a body-adjacent 1.4-2.2rem, the * band's own vertical padding shrinks, and the corner plate is hidden * entirely (redundant so soon after the hero's own spec column, and at this * reduced scale it would crowd the button). The two CTAs read as the same * instrument at two volumes, not two different treatments — which as of * 2026-09-29 is literally true, since neither carries a tone any more (both * were `steel`; see this file's header on the card's retirement). */ /* 🔴 A CORNER PLATE IS CHROME, NOT A STAGE CHILD — the one place the * count-driven shape above needs telling, and the reason every selector in * that block carries `:not(:has(> .plate))`. * * Three sections on this page end in an absolutely-positioned, `aria-hidden` * corner label: `cta-top` and `cta-final` (`{{app.platformsLine}}`, from * layouts/cta-final.yml) and `#world` (the journey caption). The element takes * no grid space — but `:nth-child()` counts DOM POSITION, not layout * participation, so `cta-final` read as FOUR children and matched the 2×2 * rule, dealing headline / line / buttons into three separate quadrants. * * ⚠️ MEASURED, TWICE, BECAUSE THE FIRST TWO FIXES WERE WRONG — written down * so the next person does not repeat either: * 1. A bare `.band.cta-final { grid-template-columns: 1fr }` silently did * NOTHING. `:has()` takes the specificity of its most specific ARGUMENT, * and `> :nth-child(4):last-child` is two pseudo-classes, so the count * rules weigh (0,3,0) — not the (0,2,0) a quick reading suggests. * 2. Winning on `grid-template-columns` alone was still not enough: the * 3-child rule ALSO assigns `grid-area: a/b/c` to the children. Named * areas that no longer exist become IMPLICIT ones, so the band grew a * third column out of nowhere — measured `655.6px 0px 416.4px`. Reset * the shape as a whole or do not reset it. * Guarding the count block itself is what finally holds, because then there * is no competing declaration left to out-weigh. It also states a true and * general rule instead of naming one layout. * * A band with a corner plate is a single centred column: that is right for * both CTAs (a call to action is one centred moment, not a split) and * harmless for `#world`, whose only real child is taken out of flow entirely * (`position: absolute; inset: 0`, see scenes.css). */ .band:has(> .plate) { grid-template-columns: 1fr; grid-template-areas: none; justify-items: center; } .band:has(> .plate) > * { text-align: center; } .cta-final.compact { padding-block: clamp(40px, 6vw, 70px); } .cta-final.compact .say { font-size: clamp(1.4rem, 4vw, 2.2rem); max-width: 24ch; } .cta-final.compact .plate { display: none; } /* ══════════════════════════════════════════════════════════════════════════ * SCENE BANDS — the crew illustrations (layouts/scene-band.yml, 2026-09-29) * ══════════════════════════════════════════════════════════════════════════ * A `.band` that carries a picture as well as a line. Every tone class * (`paper`/`steel`/`accent`/`void`) still applies exactly as it does to a * say-band, so these inherit the card treatment and the contrast work already * done on each ground — nothing about colour is re-decided here. * * WHY THE ART IS NOT INSET IN A FRAME. The scenes are drawn ON the page's own * cream — #FAECD7, which is `--bg` EXACTLY (theme/law.css) — so giving them a * border, a card or a radius would put a visible box around a picture whose * whole point is that it sits on the paper. * * 🔴 SUPERSEDED 2026-09-29, and this is the whole argument for the card's * retirement in miniature. Until this change there WAS an exception: on a * TINTED band (`.band.accent`'s orange, `.band.paper`'s near-cream) the * artwork's own cream was unavoidably a lighter rectangle, so `.band * .scene-img` carried `border-radius: clamp(10px,1.4vw,20px)` to make that * rectangle read as a deliberate sheet rather than a seam. That was a card * inside a card — a radius invented to paper over a tint nothing needed. The * tints are gone; the rectangle is gone with them; the rule is DELETED, not * moved. There is nothing left to round. */ /* 🔴 `.scene-band` NO LONGER DECLARES A LAYOUT. It was * `display: flex; flex-direction: column; align-items: center` — copy stacked * above a centred, shrink-wrapped picture, at every width. The section's own * count-driven grid (above) is the layout now: a scene-band is exactly two * children, so it becomes two real columns at ≥900px for free, with no markup * change and no layout class. Below 900px it stacks, as it always did. * Nothing replaces the old `gap` either — `.band`'s own `gap: var(--space-4)` * is the gutter, one value for every band. */ /* Copy first by default; `class: scene-band--flip` in wireframe.yml puts the * picture first. A per-PLACEMENT decision, not a property of the layout. * `order` rather than `flex-direction: column-reverse` now that the parent is * a grid: same effect in both axes, and it works in the stacked case too. */ .scene-band--flip > .scene-band-copy { order: 2; } .scene-figure { margin: 0; width: 100%; } .scene-img { display: block; width: 100%; height: auto; /* with the intrinsic width/height attributes this keeps the aspect ratio AND lets the browser reserve the box, so nothing below shifts as a scene loads. */ /* 🔴 THE HEIGHT CEILING IS GONE — `max-height: min(62vh, 560px)` plus * `width: auto; margin-inline: auto` used to shrink-wrap every scene. It * existed for one reason, recorded honestly at the time: at FULL COLUMN * WIDTH the 3:2 scenes stood ~900px tall, each one ate more than a laptop * viewport, and the page measured 7,492px. In half a column that pressure * is gone — the picture is half as wide and roughly half as tall — so the * cap is no longer buying anything and the shrink-wrap was only ever there * to give the deleted border-radius something to hug. Re-measure page * height after any change here; if it climbs back past ~6,000px the * two-column split has stopped doing its job. */ } /* ── The hero's scene ──────────────────────────────────────────────────── * `.toy` still supplies the section's grid placement and ground (the class is * reused deliberately — see layouts/hero-scene.yml's header on why the toy's * class names survive it being parked); `.hero-scene` is the class that means * "this one, the illustration hero" and never reaches the parked toy. * * 🔴 THE HERO JOINS THE PAGE COLUMN, 2026-09-29. It used to sit on its own * `margin-inline: clamp(12px, 3vw, 56px)` — the inset the black `.toy-stage` * had, kept so the swap would not move the rhythm. That was defensible while * every band below was an inset card on a different inset again; with the * cards gone it is just a third width on a page that should have one. The * hero now takes `--edge-pad` like every band, and the PICTURE bleeds back * out by exactly `--elbow-room` — so it is the widest thing on the page by a * stated amount (96px per side at ≥1344px, tapering to 0 by the time the * viewport reaches the page column) instead of by coincidence. It is the * page's first and largest beat; earning that with the bleed rather than an * unrelated clamp is the whole point of porting elbow-room. * * `.toy-copy` drops its own 24px inline padding here ONLY — the parked * toy.yml still renders `.toy-copy` over a full-bleed black stage where that * padding is the only thing keeping the heading off the screen edge. */ /* 🔴 THE HERO MEASURES ITSELF NOW — `--toy-copy-h` IS NO LONGER IN THE SUM. * * The art's height used to be `100dvh - header - copy - peek`, where `copy` * was `--toy-copy-h: 190px`, described in toy.css's own comment as "an * ESTIMATE, not a measurement". Measured on the built page at 768×1024 it * renders 229px — 39px out — and the error lands exactly where it is most * visible: `--hero-peek` exists so the next band shows at the fold (owner * correction, 2026-09-25), and at 768 the next band began at 1049px in a * 1024px viewport. Nothing peeked. The reserve was spent on the estimate's * own error. * * A grid with `1fr auto` rows removes the estimate rather than re-tuning it: * the copy takes whatever height it actually needs, the art takes the rest, * and the hero is exactly `100dvh - --hero-peek` tall by construction at * every width and every copy length. One less number that can drift out of * agreement with the page it describes — the same class of coupling bug that * `sizes` had with `.scene-img`'s cap, fixed the same way: delete the second * copy of the fact instead of re-syncing it. * * `min-height` and not `height`: if the copy ever grows past the row it is * given, the hero grows rather than clipping it. */ .hero-scene { padding-inline: var(--edge-pad); display: grid; grid-template-rows: 1fr auto; min-height: calc(100dvh - var(--hero-peek)); } /* 🔴 THE ART FILLS ITS ROW BY `object-fit`, NOT BY `max-height: 100%`. * * The obvious version — `min-height: 0` on the figure and `max-height: 100%` * on the image — was built first and measured WORSE than what it replaced * (hero 1070px tall in a 1024px viewport, against 953px before). The reason * is a percentage-resolution rule, not a tuning error: a percentage height * resolves against the parent's height, the figure's height is `auto`, so * `max-height: 100%` resolves to nothing and is DROPPED. The image then sizes * itself from `max-width: 100%` alone — 691px wide × 1.2166 = 841px tall — * and pushes the row open instead of fitting into it. * * Taking the image out of flow removes the circular dependency: the `1fr` * row is sized by the grid from the container's own min-height, the figure * stretches to that row, and `object-fit: contain` fits the drawing inside * whatever box it is handed without distorting it or cropping it. The art is * still centred, still uncropped, still one file at any DPR. * * `min-height: 0` stays and is still load-bearing: a grid item's automatic * minimum size is its content, so without it the row refuses to shrink. */ .scene-figure--hero { min-height: 0; position: relative; } .scene-figure--hero .scene-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; margin: 0; } .hero-scene > .toy-copy { padding-inline: 0; } .scene-figure--hero { margin-inline: calc(var(--elbow-room) * -1); max-width: none; width: auto; } /* ══════════════════════════════════════════════════════════════════════════ * 🔴 THE HERO IS PORTRAIT NOW — 2026-09-30. DESIGNED FOR, NOT ABSORBED. * ══════════════════════════════════════════════════════════════════════════ * The owner replaced the generated hero raster with his own drawing, * `assets/artwork/crew-overhead.svg`, viewBox 1441×1753. That is 0.822:1 * PORTRAIT where the picture it replaces was 1.79:1 landscape, and asked * directly whether the flip was intended he said: "yes - the flip is on * purpose." So this block treats portrait as the shape of the opening, not * as a constraint to squeeze the art through. * * ── WHY TWO COLUMNS AT ≥900px ──────────────────────────────────────────── * A landscape hero wants the full width and the copy above it; that is why * this section was a plain block stack. A PORTRAIT hero does not: at the * full 1344px page-plus-elbow width the drawing stands 1635px tall, more * than a laptop viewport and a half, and capping it back down to behave * leaves a narrow column of art marooned in a sea of cream. Standing the * figure BESIDE the copy is the composition the new aspect actually wants — * four children around an iPad, read at a believable size, with the headline * holding the left half. It is also what every band below already does * (src/css/bands.css's count-driven grid, ≥900px, two children → two * columns); the hero was the one section not taking it, for a reason that * expired with the landscape art. * * Reproduced here rather than borrowed from that grid on purpose: the hero * is a `
`, not a `.band`, so none of the * `.band:not(:has(> .plate))` selectors reach it. Giving it `.band` to * inherit them would drag the band padding, the tone classes and the plate * machinery along with the columns. Three declarations is cheaper than that, * and the 900px breakpoint is deliberately THE SAME NUMBER so the page * changes shape once, not twice. * * ── THE HEIGHT BUDGET: `--hero-peek` IS LIVE AGAIN ─────────────────────── * src/css/toy.css records an owner correction of 2026-09-25 — "the main hero * section should never be 100vh... we need to somehow show part of 'First * touch makes sound'" — and the two tokens that serve it, `--hero-peek` and * `--toy-copy-h`. Both went INERT when the playable toy was parked: they * were read only by `.toy-stage`, which no longer renders. The landscape * illustration did not need them (it was short enough that the fold looked * after itself, measured at the time). A portrait one does, so they are read * again here, by the element that now owns the fold. This is the tokens' * original job, not a new one invented for them. * * TWO BUDGETS, BECAUSE THE COPY MOVES: * stacked (<900px) the copy sits ABOVE the figure, so its height is spent * out of the same viewport — subtract `--toy-copy-h`. * This is `.toy-stage`'s own formula, unchanged. * columns (≥900px) the copy sits BESIDE the figure and costs it no * vertical budget at all, so that term comes out. Keeping * it would shrink the desktop figure by 190px for a * reason that stops being true at exactly this * breakpoint. * * ── WHY `max-height` AND NOT `max-width` ───────────────────────────────── * For a portrait image HEIGHT is the binding dimension — it is what runs out * of viewport first, at every width tested. Constraining the axis that is * actually scarce keeps one rule doing the work; a width cap would have to * be re-derived per breakpoint from the aspect ratio and would say nothing * about the fold, which is the thing being protected. * * `width/height: auto` + `max-width: 100%` + `max-height` is the pair that * makes the browser honour BOTH caps while preserving the ratio (CSS2.1 * §10.4's constraint-violation table). `max-width: 100%` is load-bearing and * not belt-and-braces: without it `width: auto` resolves to the SVG's own * 1441px intrinsic width and the picture overflows its column. * * MEASURED AFTER THE CHANGE (built page, not predicted) — see the report. * If a future pass changes the hero art's aspect again, re-measure the three * viewports rather than trusting these numbers; they are consequences of * 0.822:1, not constants. */ /* The sizing rule that used to stand here (`width/height: auto` + * `max-width: 100%` + a `max-height` budget) is REPLACED by the out-of-flow * `object-fit` rule further up this file — see its own note for why the * percentage budget could never have worked. Kept as a marker rather than a * silent deletion: three separate passes on 2026-09-29/30 each wrote a * `max-height` here, and each one was dropped by the same CSS rule. * * 🔴 `--toy-header-h` IS DELIBERATELY ABSENT FROM THE HERO'S HEIGHT SUM, and * that part survives the rewrite. Every other hero budget in this file * subtracted the masthead because it sat ABOVE the art. On the home page it * does not: the header is transparent and overlays the drawing so the logo * can land in the wedge between the two upper children's legs (owner, * 2026-09-30 — the overlay and the measured wedge are in components.css's * `.site-header` home block). Art sized `100dvh - header - …` would reserve a * band of empty cream exactly where the logo is meant to sit ON the picture. */ /* 🔴 THE TWO-COLUMN HERO IS GONE — OWNER INSTRUCTION, 2026-09-30. * * A pass earlier the same day read "portrait art + a wide viewport" and built * a ≥900px spread: copy in the left column, the standing figure in the right, * on the reasoning that a portrait hero does not want the full page width the * way a landscape one did. That reasoning was sound and it was still wrong, * because it was answering a question the owner had already answered: * * "the top hero, use stack with the hero image above the text" * * So the hero stacks at EVERY width. In the stage vocabulary this is * `arrange: stack` beating the count-driven default for two children * (plot-os/specs/sections/stage-component.md §4) — a declared arrangement * wins outright over the undeclared one it would otherwise get. Kept as a * dated note rather than deleted, because "portrait art wants two columns on * a wide screen" is a genuinely reasonable thing for the next reader to * propose, and this records that it was built, looked at, and overruled. * * The consequence to watch: stacked portrait art on a wide viewport is * height-bound, not width-bound — the budget below is what stops it running * past the fold, and `--hero-peek` is what leaves the next band showing. */ @media (min-width: 900px) { /* Nothing to widen and nothing to re-order: the stack is the shape. The * figure keeps its symmetric elbow bleed from the base rule above, so the * drawing is allowed past the page column on both sides while the copy * under it stays in the column where it is read. */ /* Nothing to override: the object-fit rule already fits the art to * whatever height the grid row hands it, at every width. */ } /* THE LAW does not reach the marketing page's motion, but design.md does: * under 200ms, ease-out, and `prefers-reduced-motion` honoured — which here * means the scenes simply appear, with no entrance at all. */ @media (prefers-reduced-motion: no-preference) { .scene-img { animation: scene-in 180ms ease-out both; } @keyframes scene-in { from { opacity: 0; } to { opacity: 1; } } } /* ══════════════════════════════════════════════════════════════════════════ * PER-PLACEMENT ARRANGEMENTS — 2026-09-30, owner, band by band * ══════════════════════════════════════════════════════════════════════════ * Three classes the PAGE applies (wireframe.yml's `class:`), never the * layout. Same division rule the flip above already follows: a layout says * what a band IS, a placement says how this one instance sits. */ /* ── `scene-band--stack` — arrange: stack ─────────────────────────────────── * Owner, on `no-wrong-way`: "I want that figure to be also above the text as * a stack, making it larger." * * This is the stage spec's `arrange:` override (stage-component.md §4): a * DECLARED arrangement beats the count-driven default outright rather than * composing with it. Two children would otherwise become two columns at * ≥900px and the picture would get half the width; stacked, it gets all of * it, which is the "making it larger" — no scale factor, just a column that * stopped being shared. * * ⚠️ THE SELECTOR MATCHES THE COUNT RULE'S FULL SHAPE, AND THAT IS NOT * COSMETIC — the first version of this rule was BUILT AND DID NOTHING. * `.band:not(:has(> .plate)):has(> :nth-child(2):last-child)` scores (0,4,0): * `.band` 1, `:not()` takes its argument's 1, and `:has()` takes its most * specific argument's — `:nth-child(2):last-child` — which is 2. * `.band.scene-band--stack:not(:has(> .plate))` scores only (0,3,0) and lost, * so the band stayed in two columns with no warning of any kind. Carrying the * `:has(> :nth-child(2):last-child)` too takes it to (0,5,0) and answers the * count rule at its own weight rather than reaching for `!important`. */ .band.scene-band--stack:not(:has(> .plate)):has(> :nth-child(2):last-child) { grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: none; } .scene-band--stack > .scene-figure { order: 1; } .scene-band--stack > .scene-band-copy { order: 2; text-align: center; } /* ── the two picture columns are not equal ───────────────────────────────── * Owner, 2026-09-30: "increase the x-kids column making them about 10% * larger and decrease the boy column above, but keep the boy size." * * TWO DIFFERENT ASKS THAT LOOK LIKE ONE. The X-kids get a BIGGER COLUMN AND * A BIGGER DRAWING — the picture fills its column, so widening the column * is the whole change. The boy gets a SMALLER COLUMN AND THE SAME DRAWING, * which means his width percentage has to go UP by exactly as much as his * column goes down, or "decrease the column" would silently shrink him too. * * Measured at 1440 before the change: both bands `556px 556px`, the boy * rendering 371px (66.7% of his column), the X-kids filling theirs at 556px. * * ⚠️ BOTH SELECTORS CARRY THE COUNT RULE'S FULL SHAPE — `.band` + * `:not(:has(> .plate))` + `:has(> :nth-child(2):last-child)` — for the same * reason `scene-band--stack` does: the two-column rule weighs (0,4,0) and a * bare class at (0,1,0) loses to it silently, leaving the band looking * untouched. And they sit inside the SAME `min-width: 900px` query, because * below it there is only one column and nothing to re-balance. */ @media (min-width: 900px) { /* first-touch. Figure column 556 → 444.8 (0.8fr against 1.2fr). Tracks are * written in VISUAL order: `scene-band--flip` moves the copy to track 2 * with `order`, so track 1 is the figure here. */ .band.scene-band--fig-narrow:not(:has(> .plate)):has(> :nth-child(2):last-child) { grid-template-columns: 0.8fr 1.2fr; } /* 371 ÷ 444.8 = 83.4%. This number EXISTS ONLY TO CANCEL the column change * above — it is not a taste value. If the 0.8fr moves, re-derive it as * (old rendered width ÷ new column width) or the boy changes size, which * is the one thing this pair of rules promises not to do. */ .scene-band--fig-narrow > .scene-figure > .scene-img { width: 83.4%; margin-inline: auto; } /* no-wrong-way. Figure column 556 → 611.6 (1.1fr against 0.9fr) = the 10% * asked for. Tracks in DOM order here: no flip, so copy is track 1. The * drawing already fills its column at 100%, so it grows with it and needs * no second rule. */ .band.scene-band--fig-wide:not(:has(> .plate)):has(> :nth-child(2):last-child) { grid-template-columns: 0.9fr 1.1fr; } } /* ── `.crew-figure` — the crew close out the page ─────────────────────────── * Owner: "The image is to be 100vw with the max width of the centered content * of 1024px" (later 769px), then "move the crew out of the cta scene so it * can follow that rule." * * 🔴 THE ESCAPE HATCH IS GONE, and that is the point of the move. While this * lived inside `cta-final` it had to break out of a `.band` — a stage that * holds its children to the page column — with `width: calc(100% + 2 * * --edge-pad)` and a matching negative margin, plus a second rule switching * the parent's bottom padding off so the two would touch. The width was * therefore described in two places: here, and in the parent it was * escaping. `layouts/crew-band.yml` is its own section with no page-column * padding to cancel, so the rule below is simply the contract, stated once. * * It is the SAME contract the hero panel uses (src/css/wall.css) — full * bleed to 769px, then centred, switching at the derived 860 — and the two * resolve to the identical box at every viewport. * * NO BOTTOM GAP, still load-bearing: the cropped knees have to meet the * footer's colour change or the crop reads as a severed drawing rather than * as occlusion. `base.css` drops main's floor padding when this is present. */ .crew-band { padding: 0; } .crew-figure { width: 100%; margin: 0; display: block; } .crew-figure > .scene-img { width: 100%; } @media (min-width: 860px) { .crew-figure { width: 769px; max-width: 769px; margin-inline: auto; } } /* ── `.hero-actions` — the opening's own call to action ───────────────────── * Owner, 2026-09-30: the hero's text "is followed by a Touchtone — coming to * the App Store button - allowing us to remove the cta-top section." So the * action that used to be a band of its own is a row under the hero copy. * Sizing and the border come from `.cta` (above) so the opening's button and * every other button on the page cannot drift apart; this only places it. */ .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-block-start: var(--space-3); } /* ══════════════════════════════════════════════════════════════════════════ * 🔴 THE BUTTONS GET COLOUR — owner, 2026-09-30 * ══════════════════════════════════════════════════════════════════════════ * "CTA buttons get #de7969 as bg color and #25222b as border and #fefaf0 as * text, and secondary button #ceb6c3 as bg" * * This reverses the `.cta` rule above, which was deliberately FILL-FREE — one * bordered, mono box whether the intent was live or disabled. That uniformity * had a purpose (a disabled span and a live link looked identical, so nothing * false was implied by weight alone) and it is being traded for hierarchy: * the store button now reads as the primary action. * * ⚠️ ONE OF THE FOUR SPECIFIED COLOURS FAILS AA AND IS NOT SHIPPED AS GIVEN. * Computed, sRGB relative luminance: * #fefaf0 on #de7969 = 2.86:1 ← specified pair, FAILS the 4.5 floor * #25222b on #de7969 = 5.25:1 ← what ships instead * #25222b on #ceb6c3 = 8.27:1 ← secondary, passes comfortably * #fefaf0 on #ceb6c3 = 1.81:1 ← light text on the secondary: hopeless * design.md makes AA a launch blocker under BFSG and says in as many words: * "When a muted tier fails contrast, darken the tier — don't shrink its usage * or argue the aesthetics." So the BACKGROUNDS are exactly as specified and * the text is the dark ink on both. The alternative that keeps light text is * a darker coral at the same hue and saturation, #ce432d (4.51:1) — offered * to the owner; if he takes it, swap `--cta-ink` back to #fefaf0 HERE and * change `--cta-fill` there, and nothing else moves. */ .cta { --cta-fill: #de7969; --cta-ink: #25222b; /* 🔴 THE HOVER IS ITS OWN PAIR NOW — owner, 2026-09-30: "the hover effect * on the CTA can be #d83426 and #362c81 for the questions button bg". * This REPLACES the inversion that shipped an hour earlier (fill and ink * swapping places). The rest state is unchanged: a pastel with dark ink. * The hover is now a saturated ground with LIGHT ink, which is a bigger, * more deliberate change of state than the swap was. * * ⚠️ THE LIGHT INK IS NOT OPTIONAL — it is what makes these two colours * legal. Measured: * #25222b on #d83426 = 3.31:1 FAIL #fefaf0 on #d83426 = 4.54:1 * #25222b on #362c81 = 1.37:1 FAIL #fefaf0 on #362c81 = 10.98:1 * Keeping the dark ink through the hover would have failed AA on BOTH * buttons, and the indigo one catastrophically. So hovering flips the ink * as well as the ground — which also finally puts #fefaf0 to work, the * off-white specified for these buttons on 2026-09-29 that could not be * used at rest because it measured 2.86:1 on the coral. * ⚠️ #d83426 clears the 4.5 floor by 0.04. There is no room to lighten it. */ --cta-hover-fill: #d83426; --cta-hover-ink: #fefaf0; background: var(--cta-fill); color: var(--cta-ink); /* 🔴 NO BORDER — owner, 2026-09-30: "for the buttons remove the border - * doesnt look right". The `#25222b` edge he specified earlier the same day * is gone; the fill defines the shape now. `border: 0` rather than * `border-color: transparent` so the button does not keep reserving 1px of * box it no longer draws — otherwise the two buttons in a row would sit 2px * wider than they look and the padding would read asymmetrically. */ border: 0; transition: background-color 140ms ease-out, color 140ms ease-out, translate 140ms ease-out; } /* ── the hover ───────────────────────────────────────────────────────────── * Owner: "add a cool hover effect on those." * * The button INVERTS: the fill becomes the ink and the ink becomes the fill. * Chosen over a lift-and-shadow or a brightness shift for three reasons — * 1. it introduces NO new colour, which matters on a site whose own law is * "colour means a note, never decoration" (theme/law.css). Both halves * of the swap are already this button's own two colours. * 2. it is legible by construction: an inversion preserves the contrast * ratio exactly, so the hover state cannot fail AA if the rest state * passes. Measured both ways — #de7969 on #25222b is 5.25:1, #ceb6c3 on * #25222b is 8.27:1, identical to the rest states. * 3. design.md: "motion exists to communicate state change, not to * delight… under 200ms, ease-out, no bounces." 140ms, ease-out, and the * 1px lift is a nudge rather than a bounce. * * 🔴 `a.cta` ONLY — never the disabled span. A hover on a control that * cannot be activated is a lie told on contact, and it is exactly what a * coming-soon pill must not do. `.cta[aria-disabled]` keeps `cursor: default` * and stays completely still. */ a.cta:hover, a.cta:focus-visible { background: var(--cta-hover-fill); color: var(--cta-hover-ink); translate: 0 -1px; } a.cta:active { translate: 0 0; } /* The lift is motion; the colour swap is the message. Under `reduce` the * message survives and the movement does not — the site measures zero running * animations under that query and this must not be the one that breaks it. */ @media (prefers-reduced-motion: reduce) { .cta { transition: none; } a.cta:hover, a.cta:focus-visible { translate: none; } } /* The SECOND action in a group is the quieter one. Keyed off order rather * than a variant flag because `content: { cta: [...] }` in wireframe.yml * already states the order, and a layout that had to know which button was * primary would be a second copy of that fact. */ .cta ~ .cta { --cta-fill: #ceb6c3; --cta-hover-fill: #362c81; } /* ── `.accent` — the one inline emphasis the content may ask for ──────────── * Owner, 2026-09-30: "so can we have it in bold letters somehow within 'all * of it lives in the app.'" * * 🔴 THIS CLASS WAS RENDERING NOTHING AT ALL. `{{accent:…}}` has been in * `content/copy.json` since the hero was written and pipeline/template.mjs * has always wrapped it in `` — but the only rule that * ever styled it was `.hero-title .accent`, and `.hero-title` was deleted on * 2026-09-29 with the card system. Measured before this rule existed: the * span computed `font-weight: 400` and `rgb(107,102,94)` — byte-identical to * its parent. "Make Music." in the hero has been marked up as emphasis and * displayed as ordinary text ever since. * * WEIGHT, NOT COLOUR, and that is not a preference: theme/law.css holds that * "colour means a note, never decoration", so tinting a phrase of body copy * to make it stand out is exactly what this site forbids. Weight carries the * emphasis and `--text-bright` supplies the contrast step, which is an INK * change rather than a hue — the same move the warm-neutral pass used. * * Measured: `--text-bright` on the page ground is 16.22:1 against the muted * 4.89:1 it replaces, so the emphasis reads and cannot fail AA. It is also * adaptive — inside `.band.void`/`.toy` the token resolves to white, so an * accent on a dark ground keeps working with no second rule. */ .accent { font-weight: 600; color: var(--text-bright); } /* A heading is already 700 and already `--text-bright`, so the rule above * would make an accented phrase LIGHTER than the words around it — the exact * inverse of emphasis. Headings opt out and keep whatever they set. * ⚠️ Consequence worth knowing: `{{accent:…}}` in a heading is therefore * still a no-op. The hero's "Make Music." is marked and renders plain. That * is now a deliberate null rather than a broken rule — if the hero wants the * phrase to separate, it needs its own treatment (a different weight step, or * a line break), not this class. */ .toy-heading .accent, .say .accent { font-weight: inherit; color: inherit; } /* base.css — reset, typography, rhythm. * * @docs ../../README.md * * Concatenated (with components.css, filename order) into public/site.css by * pipeline/emit.mjs. theme/tokens.css is NOT concatenated in — theme/head.html * links it, and it loads FIRST, so every token below is already in scope here. * * 🔴 NO LITERAL COLOURS BELOW THE FALLBACK BLOCK. design.md's rule: colour * comes from theme tokens, never hand-picked, so switching a theme repaints * everything with zero JS and zero edits here. A hex in a rule further down is * a bug, not a shortcut. */ /* ── The token contract, and the window before it exists ──────────────────── * * These are the tokens src/css/ consumes. They are generated by the theme * build (theme/tokens.css) from the vendored ColorTheme documents; this block * is a floor for the window where a scaffolded site has run `npm run build` * but not yet `npm run tokens`, so the page reads as designed rather than as * unstyled black-on-white. * * 🔴 `:where()` is load-bearing, not decoration. It has ZERO specificity, so * theme/tokens.css's own `:root { … }` beats every line below without needing * !important, without depending on file order, and without this block ever * fighting a real theme. A plain `:root` here would silently override the * whole palette. * * The values are design.md's stated defaults: off-black on off-white, never * #000 or #fff, one muted accent held for emphasis. */ :where(:root) { --bg: #FBFAF8; --surface: #F4F2ED; --surface-lift: #EAE7E0; --border: #E0DCD3; --border-bright: #9A948A; --text-primary: #23211E; --text-bright: #121110; --text-secondary: #55514B; --text-muted: #6B665E; --accent: #7A5C3E; --accent-bright: #5E4630; --link: #5E4630; --ink-on-accent: #FBFAF8; --font-body: system-ui, -apple-system, "Helvetica Neue", sans-serif; --font-display: system-ui, -apple-system, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, monospace; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; --motion-duration: 160ms; --motion-ease: cubic-bezier(0, 0, 0.2, 1); } /* Type-led rhythm the theme has no opinion about. `--measure` is the reading * line-length ceiling — roughly 70 characters, the editorial register design.md * asks for (a well-set spread, not a full-bleed dashboard). */ :root { --measure: 46rem; /* 🔴 769px — owner, 2026-09-30: "lets change the container max-width from * 1024 to 769px", then, measuring the built page, "but the sections above * are still wider than 769 - for no-wrong-way i am measuring 1464px?" * * THAT SECOND MESSAGE IS THE CORRECTION THAT MATTERS, and the first pass * got it wrong: 769 was applied only to the two full-bleed PICTURES (the * hero panel and the closing crew), while `--page` stayed at 72rem = 1152px * — so every band's reading column was still 1152 and the `
` * elements themselves still spanned the viewport. The cap belongs HERE, on * the page column itself, which is the one place every band, the footer and * the grid's own `content` track all read from. * * A px value, not rem, deliberately: a container cap is a LAYOUT * measurement and must not scale with a user's root font size the way the * reading measure above it should. `--measure` stays in rem for exactly the * opposite reason. * * ⚠️ IT FEEDS THREE DERIVED TOKENS BELOW — `--edge-pad`, `--elbow-cap` and * `--elbow-room` are all expressed against it, so changing this moves the * band padding and the bleed ceiling too. That is intended (they were * written to track the column, not to be independent), but it means the * effect of this line is much wider than one max-width. */ --page: 769px; /* The WIDER frame a bled child is measured against — never the reading column, only the ceiling on how far something may grow outward past it. `--elbow-cap` in bands.css is half the difference between the two (PlotOS specs/sections/stage-component.md §3.1); terminal-c/site/src/css/ base.css:101 carries the same 84rem, and the pair of values is what makes that arithmetic port verbatim rather than get re-derived. PlotOS itself records this token as its own UNMET dependency — it has no page column — which is why the bleed classes never shipped there and can here. */ --page-wide: 84rem; --tracking-tight: -0.011em; /* ── the page column and the bleed, PlotOS stage-component.md §3.1 ────── Declared ONCE here rather than per-section (terminal-c declares them on each stage it uses) because this site has exactly one page column, and two consumers that must agree about it to the pixel: `.band` (src/css/bands.css) and the illustration hero (`.hero-scene`, src/css/toy.css). Two copies of this arithmetic is how the hero ends up a different width from the bands for no stated reason — which is what it was before 2026-09-29. --edge-pad ONE var owns the page column: the larger of the edge padding and whatever centres `var(--page)`. No max-width wrapper element is needed anywhere — the padding IS the column. --elbow-cap the CEILING. The most a bled child may EVER take, per side, at any viewport: half the difference between the wide frame and the page column. 96px at these values. --elbow-room what a bled child actually gets right now. 🔴 The `max(0px, …)` floor is LOAD-BEARING and is why there is no second condition to write: it delivers "ignored once the viewport is at or below the page column" for free, with no media query (stage-component.md:399-414). ⚠️ These are the one place `vw` survives base.css's own zero-viewport- units rule (see `main`, below). It is safe HERE and was not there: the old breakout cancelled a `vw`-derived box against a percentage one, and iOS Safari's layout/visual viewport split made the two disagree. These resolve to PADDING (a `max()`, so a `vw` overshoot only ever makes the column narrower, never wider) and to a capped negative margin. `.band` carries `overflow: clip` as the belt to that braces. */ --edge-pad: max(clamp(20px, 5vw, 72px), calc((100vw - var(--page)) / 2)); --elbow-cap: calc((var(--page-wide) - var(--page)) / 2); --elbow-room: min(var(--elbow-cap), max(0px, calc((100vw - var(--page)) / 2))); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; letter-spacing: var(--tracking-tight); } /* Tighter than the browser default on purpose: loose-tracked type reads as * decorative, tight reads as confident (design.md). */ h1, h2, h3 { font-family: var(--font-display); color: var(--text-bright); letter-spacing: var(--tracking-tight); line-height: 1.15; text-wrap: balance; margin: 0 0 var(--space-2); } h1 { font-size: clamp(2rem, 5vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); } h3 { font-size: 1.125rem; } p { margin: 0 0 var(--space-2); max-width: var(--measure); } a { color: var(--link); text-decoration-color: var(--border-bright); text-underline-offset: 0.15em; } a:hover { text-decoration-color: currentColor; } img { display: block; max-width: 100%; } /* WCAG 2.1 AA is a launch blocker, not a preference. A * visible focus ring on EVERY interactive element, verified with tooling rather * than eyeballed — theme/tokens.css floors --border-bright at 3:1 (1.4.11) for * exactly this. * * The ring is WHITE (--structure, theme/law.css), not --accent. Owner decision * 2026-09-25: colour is only ever a note, never decoration — and the corollary * an implementer must not get wrong is that "no decorative colour" never * licenses "no focus indicator" (WCAG 2.4.7). A focus ring is a structural * line, so it is white like every other structural line. * See theme/law.css and docs/designs/site-home-the-toy.md. */ :focus-visible { /* 🔴 `--text-bright`, NOT `--structure`. `--structure` is pinned white * forever (`toy.css` hardcodes it for the hero's own structural lines) — * so once the page ground went light on 2026-09-26 a white ring became * invisible on every light surface. `--text-bright` is the ADAPTIVE token: * dark ink by default, white inside `.toy, .band.void`. See theme/law.css. * (The nav's own `mix-blend-mode: difference` — the other reason * `--structure` used to matter here — is gone as of the SAME day's * "separate the header onto its own cream ground" correction; the header * is opaque now and needed no ring change of its own, see components.css.) */ outline: 2px solid var(--text-bright); outline-offset: 2px; border-radius: 2px; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--surface); color: var(--text-bright); padding: var(--space-1) var(--space-2); } .skip-link:focus { left: var(--space-2); top: var(--space-2); } /* ── page frame ─────────────────────────────────────────────────────────── */ /* The footer floor (wireframe.yml `frame.footer: sticky`, the default — the * shell stamps it as data-frame-footer). This is the LAYOUT sense of "sticky * footer", not position:sticky: a min-100vh flex column floats a SHORT page's * footer to the bottom of the viewport instead of leaving it stranded * mid-screen, while a long page's footer still scrolls in after the content. * main takes the slack. Auto side margins on main keep it centred inside the * flex column (they win over the default stretch, so max-width still holds). * `frame.footer: static` opts out — the footer just follows the content. */ body[data-frame-footer="sticky"] { min-height: 100vh; display: flex; flex-direction: column; } body[data-frame-footer="sticky"] > main { flex: 1 0 auto; } /* Full-bleed grid, zero viewport units. `main` used to be a centred, * padded column (`max-width: var(--page); margin: 0 auto; padding: 0 * var(--space-3) var(--space-6);`) and every full-bleed element (`.toy`, * `.band`) escaped it with a `100vw` breakout — `calc(100vw - 2 * * var(--card-inset))` + `margin-left/-right: calc(50% - 50vw + …)`. That * technique is exact in headless engines (where the layout and visual * viewports are identical) but overshoots on real iOS Safari, where `vw` * tracks the LAYOUT viewport, not the visual one, while `%`/`fr` do not. * * The fix: `main` IS the breakout now, as a 5-track grid. The outer two * tracks are `minmax(var(--space-3), 1fr)` — the SAME floor the old * padding used, but as a flexible track instead of a fixed inset, so they * grow to fill whatever's left of the physical viewport edge. The centre * track is `minmax(0, var(--page))`, the old `max-width` cap, still * capping the measured column at wide viewports. Ordinary content sits in * `[content-start … content-end]` (`main > * { grid-column: content; }`, * below); `.toy`/`.band` opt into `[full-start … full-end]` instead, which * spans the whole grid, physical edge to physical edge — no `vw`, no `50% * - 50vw` cancellation, nothing that can diverge from the visual viewport. * `padding-bottom` is the one thing this cap doesn't replace: the outer * tracks give left/right for free, but the page still wants breathing room * under the last band. */ main { display: grid; grid-template-columns: [full-start] minmax(var(--space-3), 1fr) [content-start] minmax(0, var(--page)) [content-end] minmax(var(--space-3), 1fr) [full-end]; padding-bottom: var(--space-6); } /* 🔴 NO FLOOR GAP WHEN THE PAGE ENDS ON A PICTURE — 2026-09-30. * (Keyed on `.crew-band` since the frieze became its own section; it was * `.cta-frieze` while the picture lived inside the closing CTA.) * Owner: the closing frieze tucks behind the footer "so that the cut off legs * make sense". `crew-frieze.svg` is cropped at the knee, and the illusion is * that the footer occludes the children — which needs the picture and the * footer's ground to TOUCH. * * `.cta-final`'s own bottom padding was already dropped (bands.css) and the * figure carries no margin, and the gap survived anyway: it was THIS rule's * `padding-bottom: var(--space-6)` — 96px of main, below the last section and * outside anything the section could reach. Measured, not guessed: the * section ended at 537px and the footer began at 633px. * * Scoped by presence rather than by page so it can never apply to a page that * ends on text, where the floor gap is correct and wanted. */ body:has(.crew-band) main { padding-bottom: 0; } main > * { grid-column: content; } /* 🔴 THE CLOSING CREW SPANS THE WHOLE GRID, AND CARRIES NO FLOOR MARGIN. * Added 2026-09-30, immediately after the frieze became its own section. * Moving it out of `cta-final` cost it two things it had been getting from * the negative-margin escape it used in there, and BOTH regressed on the * first build — measured at 390: the picture rendered 342px wide inset 24px * instead of edge-to-edge, and sat 48px above the footer instead of touching. * - `grid-column: full` — `main > *` defaults every child to the CONTENT * track, which is inset by `--space-3`. This section is one of the two * full-bleed elements on the site and has to reach the viewport edge. * - `margin-bottom: 0` — `main > section` carries the inter-section gap * (`--space-6 / 2`), which is right between bands and wrong under the * last one: the cropped knees must MEET the footer's colour change or the * crop reads as a severed drawing rather than as occlusion. */ main > .crew-band { grid-column: full; margin-bottom: 0; } main > h1 { margin: var(--space-5) 0 var(--space-4); } /* 🔴 CENTRE THE READING COLUMN INSIDE THE PAGE COLUMN — 2026-09-30. * Owner: "do that to the rest of the pages too - center the content at a max * 769". * * `--page` (769px) is the PAGE column and `--measure` (46rem = 736px) is the * READING column; they are different things on purpose, and `--measure` stays * in rem because a line length should scale with a user's font size while a * container cap should not. But a 736px block sitting at the start of a 769px * track is left-aligned by 33px — measured on /support, where `#contact` * landed at 336 while the h1 above it and the footer below it both landed on * 769 centred. Three different left edges on one page. * * Auto inline margins put the narrower block in the middle of the wider one, * so every page now centres on a single axis whatever its inner cap is. Home * is unaffected: its bands are full-width stages that centre their own * content already. */ main > section, main > article, main > .legal, main > .issue-report { margin-inline: auto; } /* One main idea per screen (design.md: roomy, low density by default). Bands * are separated by air, not by rules. */ main > section, main > header { /* 🔴 HALVED with the band padding, 2026-09-30 (owner: sections are twice as * far apart as wanted). `--space-6` is 6rem and is used elsewhere, so this * halves the GAP here rather than redefining the token under everything * that shares it. The two halvings compound: a seam between two bands was * 2×padding + this margin, and every term is now half. * `calc(--space-6 / 2)` = 3rem literally, NOT `--space-5` (4rem) — that * would have been two thirds and called itself a half. */ margin: 0 0 calc(var(--space-6) / 2); } /* A structural SLOT — scaffolded, not yet written. It renders as nothing at * all rather than as an empty box, so an unfinished page looks unfinished in * the source and finished on the screen. */ .slot { display: none; } /* Motion is under 200ms, ease-out, and only ever on a state change * (design.md). `prefers-reduced-motion` is honoured here AND in tokens.css, * which zeroes --motion-duration at the root — belt and braces, because this * rule is the one that survives a theme that forgot. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* components.css — the chrome partials and the eight section layouts. * * @docs ../../README.md * * One class per layout id, in the order layouts/ lists them, so a layout and * its styling are findable from either end. Everything reads theme tokens * (base.css documents the contract); a literal colour here is a bug. */ /* ── site header (src/html/_header.html) ──────────────────────────────────── */ /* 🔴 RESTRUCTURED per the header-mark exploration (2026-09-28): this was a * horizontal nav bar (wordmark + a `.nav` link list from _nav.html) through * several earlier passes (see git history for the fixed/blend-mode phase, * then the 2026-09-26 "own cream ground, position: sticky" phase). The nav * bar is gone — Support and any future page live in the footer only * (_footer.html's footerNav) — and what's left is a centered nameplate: the * real assets/brand/touchtone.masthead.svg, inlined directly in * _header.html. `.nav`/`.nav a` are deleted along with it: nothing renders * a `