. It is also shared with fourteen other pages through footer.css, so none of this can go there. It goes here instead, and here is already the right scope: landing.css is linked by index.html and by nothing else, so a bare .foot2 rule in this file cannot reach another page. The first attempt hung a data-overlap attribute on index's footer to make the intent visible in the markup. Gate check 8c immediately failed with fourteen lines of "differs from index.html" — that check compares every footer to index's byte for byte, and it was right to. The attribute came back out; nothing in the markup changed at all. main + .foot2, not .foot2 alone, because footer.css loads AFTER this sheet and sets `margin` as a shorthand. At equal specificity the later sheet wins and the overlap would silently not happen. The combinator costs one point, which is all it takes, and it states a fact that is true: this is the footer that directly follows main. Only the top strip is shaped. The footer has no plate below it to meet, so the second mask layer runs flat all the way down. */ /* the footer overlap moved to edges.css so every page shares the seam. */ #door { padding-bottom: calc(var(--band-pad, 96px) + var(--seam) * 1.5); } @media (max-width: 640px) { main + .foot2 { margin-inline: 10px; } } /* ══ THE MEASURES AND THE RHYTHM ══════════════════════════════════════════ THIRTY-SEVEN OF THESE WERE INLINE style ATTRIBUTES AND ALL THIRTY-SEVEN WERE DEAD IN PRODUCTION. netlify.toml ships Content-Security-Policy with `style-src 'self'` and deliberately WITHOUT 'unsafe-inline' — its own comment says "There is not one inline style attribute in the site; the orbit's angles live in the stylesheet precisely so this line can stay strict." That was true when it was written. This page then accumulated thirty-seven of them. A style-src without 'unsafe-inline' does not merely discourage the style attribute; the browser refuses to parse it. Loaded with the production CSP applied as a meta tag, this page reported element.style.length === 0 on every one of them: the headline in §2 computed max-width: none instead of 23ch, and .l-facts computed the stylesheet's 34px instead of its intended 26px. Every measure and every rhythm value on the landing page was being silently discarded by the host and by nothing else — which is why it looked perfect on localhost, where no CSP header is sent at all. WHY THESE ARE RULES AND NOT UTILITY CLASSES. Seven of the thirty-seven said the same thing: margin-top:16px on the headline directly under an eyebrow. That is not thirty-seven decisions, it is one rule and a set of editorial measures. So the repeated case became a single adjacency rule, and what genuinely varies — how wide each headline is allowed to be, which is a judgement per section — is scoped to the section that made it. */ /* THE NEARLY-ONE RULE. Eight of the nine headlines that follow an eyebrow carried margin-top:16px. The ninth, in #network, carried nothing and took the 14px it inherits — and writing this as a bare .l-eye + .l-h1 gave it 16px, which the geometry diff caught as a two-pixel shift in a section I had not touched. So it is a list, not a generalisation. A rule that is true eight times out of nine is not a rule; it is eight facts and a bug. */ #who .l-h1, #engine .l-h1, #reservoir .l-h1, #subsidiaries .l-h1, #numbers .l-h1, #tiers .l-h1, #museum .l-h1, #door .l-h1 { margin-top: 16px; } /* THE MEASURES. How many characters each headline is allowed before it wraps — a per-section editorial decision, which is why these are not one value. */ #who .l-h1 { max-width: 20ch; } #engine .l-h1 { max-width: 20ch; } #subsidiaries .l-h1 { max-width: 18ch; } #numbers .l-h1 { max-width: 17ch; } #tiers .l-h1 { max-width: 20ch; } #museum .l-h1 { max-width: 20ch; } #door .l-h1 { max-width: 19ch; } /* THE RHYTHM, band by band. AND SCOPED BY ADJACENCY, NOT BY SECTION. #numbers .l-body.l-muted looked like a faithful translation of the one attribute it replaced; the section also contains a chart caption built from the same class, which duly took a 58ch measure it never had and lost 56px of width. The attribute applied to ONE element, so the rule has to as well — and what actually identifies that element is its position: the paragraph directly under the headline. THE BUTTON WRAPPERS ARE SELECTED STRUCTURALLY AND THAT IS NOT STYLE. The first attempt gave each of those four paragraphs class="l-cmd". .l-cmd already exists at line 691 — it is the command palette block, and it carries max-width: 620px. All four wrappers duly halved from 1240 to 620 and the geometry diff caught it. A new class name can always collide with an old one; p:has(> .l-cmd__btn) introduces no name at all and says exactly what it means: the paragraph that holds the button. */ #open .l-cmd__btn > svg[aria-hidden] { flex: none; opacity: .5; } /* The two Museum/About buttons carried text-decoration:none inline and the class never declared it, so removing the attribute would have put an underline under two pill buttons. It belongs on the class. */ .l-cmd__btn { text-decoration: none; } #company .l-facts { margin-top: 26px; } #thesis .l-lead { max-width: 23ch; margin-top: 18px; } #thesis .l-lead + .l-body { margin-top: 40px; max-width: 64ch; } #who .l-cards { margin-top: 52px; } #engine .l-split { margin-top: 34px; } #engine p:has(> .l-cmd__btn) { margin-top: 34px; } #reservoir .l-h1 + .l-body { margin-top: 22px; } #reservoir p:has(> .l-cmd__btn) { margin-top: 34px; } #subsidiaries .l-stack { margin-top: 56px; } #numbers .l-h1 + .l-body { margin-top: 20px; max-width: 58ch; } #numbers .l-eye + .l-spec { margin-top: 48px; } #numbers .l-restate { margin-top: 76px; } #numbers .l-spec + .l-body { margin-top: 28px; max-width: 62ch; } #tiers .l-h1 + .l-body { margin-top: 20px; max-width: 58ch; } #museum .l-split { margin-top: 34px; } #museum .l-split .l-body + .l-body { margin-top: 20px; } #museum p:has(> .l-cmd__btn) { margin-top: 26px; } #museum .l-card + .l-card { margin-top: 14px; } #founder .l-fnd__frame { margin: 0; } #founder .l-lead { margin: 14px 0 24px; } #founder p:has(> .l-cmd__btn) { margin-top: 28px; } #world .l-col { margin-bottom: 40px; } #world .l-lead { margin-top: 14px; max-width: 30ch; } #door .l-spec { margin-top: 30px; } /* ══ THE NAV OVER THE VIDEO ═══════════════════════════════════════════════ Kevin: "the text at the top of the screen gets washed out by the background video." MEASURED, PER CLIP, AT FOUR TIMECODES EACH. The nav band was sampled out of every hero clip and composited with the text colour actually rendering there. The links came back between 1.80:1 and 7.18:1 and the tag between 1.85:1 and 2.95:1, against a 4.5 requirement for 11px and 13px type. Three of the four clips failed on both runs of text. This is the most-seen text on the site. THE CAUSE WAS NOT THE VIDEO. It was a token that was declared and never spent. .l-nav sets --nav-fg: var(--on-media) at the top and .l-nav.is-pill overrides it to var(--fg) when the pill arrives — a complete two-state colour system, written correctly, and referenced by NOTHING. grep counts two declarations of --nav-fg and zero uses of var(--nav-fg). The links say color: inherit, so with nothing setting the nav's colour they inherited ink from