The reference demo

The budgets, measured — not asserted

BUDGETS.md declared four bars before any host code existed, and the numbers ran inside the look loop, not after it. The instrument: Lighthouse 13.4.0, form-factor mobile, default mobile emulation, simulated throttling — RTT 150 ms, 1.6 Mbps down, 4× CPU (the standard slow-4G, mid-tier-phone profile), median of three runs, Chromium via Playwright, run locally at $0. The numbers below are from the instrument pointed at this live served page after the served-bytes gate went green; the local pass (uncompressed serve, the conservative weight bound) read LCP 1.51 s / CLS 0 / a11y 100 / 92.0 KB.

• B1 · Mobile LCP 1.79 s — budget < 2.0 s, green. The LCP element is the hero image itself (picture.hero-art > img): AVIF at two widths with a WebP ladder, preloaded at high priority, intrinsic dimensions in markup, 1.6 KB on a phone. The Scribner 7.28 s class is impossible here by construction — every render-path byte is enumerated, and the largest image the page can ever fetch is 7.9 KB.
• B2 · CLS 0 — budget < 0.01, green, and exactly zero. №005 measured a 0.0016 residual from web-font arrival and owned it in print. Here it is engineered out at birth: the fallback faces are metric-compatible (Arial size-adjusted to 105.12% carries DM Sans's tables; Georgia at 100.88% carries the serif's — computed from the actual font files by fallback_metrics.py), so the swap re-metrics nothing. The browser's own PerformanceObserver read total load shift 0.0000, live; the widget's taps moved exactly zero, as №005's standard demands.
• B3 · Weight 75.4 KB transferred over 7 requests — budget ≤ 250 KB / ≤ 10, green. All same-origin; no third-party anything. The ledger, largest first: two fonts (61 KB), stylesheet, document, widget, hero, favicon.
• B4 · Accessibility 100 — floor ≥ 95, green. The lawncare-79 lesson answered: landmarks, one h1, labeled radios in real fieldsets, ≥44 px tap targets, visible focus, 4.5:1 text contrast on every surface — scored 100 by the same instrument, mobile run.

Performance score rode along at 99 (live) / 100 (local). Raw run data: experiments/006-reference-demo/results/. The declared escape hatch — "if 2.0 s and the house look genuinely conflict, the measured tension is the finding" — was not needed: DM Serif Display, a dark hero with real art, and a sub-1.8 s LCP coexist with 225 KB of budget to spare.

Designed in from birth — what each choice teaches the fleet

• No-JS complete by construction (the F11 fix as architecture). The base document is fully visible; hide-and-reveal rules exist only under an html.js scope, and the class is stamped by the same file that performs the reveal — a page whose script never arrives is a page where nothing was ever hidden. This is strictly stronger than <noscript> or @media (scripting), which only cover scripting-off, not script-failed-to-load. Proven with a full-page no-JS photograph, below.
• Reduced motion collapses to none. The reveal's hiding rule lives inside (prefers-reduced-motion: no-preference) — under reduce, content simply stands there. Not an override; an absence.
• The hero image never fights the headline. Full-bleed art behind a scrim is a wide-screen privilege; below 700 px the same preloaded image takes its own fixed-height band beneath the text. On a phone, a left-set headline and background art want the same pixels — so they stop sharing them.
• The widget slot is furniture (№005's shaper, plumbing vocabulary). Three taps — issue · urgency · where — refine a live preview that IS the outgoing text, and the claims ruling rides along verbatim: the demo never invents a price; the price question becomes the text. sms: primary, tel: quietly beside it, stateless, no-JS band complete. Five inert kdg-d1-spine-v1 beacon sites sit exactly placed (visited · widget_open · shape_complete · tap_text+shaped · tap_call) — graduation wiring is one sendBeacon line each, shape keys only, never bodies.
• Trust surfaces on the claims ladder, even on fictional ground. Reviews are verbatim-style and render undated (the F10 standard); the hero carries stars and no count; no fabricated badges; the one dollar figure on the page is the house's own $5,000 bar.
• Copy DNA machine-enforced. A fresh V1-class headline ("Fixed today. Tight for years."), no emojis, and the №003 banned-words list asserted by the harness against both the source files and the rendered page.

The retrofit — 1,023 bytes for the standing fleet

The ~442 standing demos can't wait for rebuilds, so Part B reconstructed the old pattern's defect from the F11 finding as filed — .reveal{opacity:0}, visibility granted only by script, no noscript, no reduced-motion fallback — on a synthetic replica (Harville Plumbing, before), never from production files. The smallest safe patch, kdg-retrofit-f11 v1, is two append-only touches: one delimited CSS block (@media (scripting: none) + @media (prefers-reduced-motion: reduce)) and one self-identifying <noscript><style> line — JavaScript untouched (the same page, after).

The proof standard: with JS on and normal motion, full-page screenshots of before and after are byte-identical (sha256-equal, locally and live) — the patch moves nothing in the world visitors actually see. Without JS, before is a hero above a blank page and after is complete; under reduced motion, before still hides and animates, after stands still. Both no-JS covers were observed firing in the harness (scripting: none matched; the noscript style active). One boundary, stated plainly: append-only CSS cannot cover the script-arrives-never world — scripting is on, the media query is false, and the bands stay blank. Only the clean sheet's architecture removes that world, which is exactly why the retrofit is the fast lane and not the destination.

RECIPE.md carries the mechanical steps, the per-engine reconciliation note (selectors reconciled per engine, patterns not files), the acceptance harness, and the diff-gate bucket the fleet pass needs: retrofit-f11-appendix — stylesheet byte-equal except one delimited appendix at EOF, HTML byte-equal except one inserted line before </head>, every other file hash-equal, any other delta refused.

Photographed live, at phone width

Every figure is the deployed page, not a mock.

The finding

The clean sheet and the budgets do not fight: with the lessons designed in from birth — fonts that swap without moving, an image that can only paint and never push, reveal that is an enhancement instead of a hostage-taking — the house look reads at LCP 1.79 s on a throttled phone with zero layout shift and a 100 accessibility score, using less than a third of the declared weight budget. And the standing fleet does not have to wait: the filed F11 defect dies under 1,023 appended bytes whose only proof requirement is that the JS-on pixels do not change — a patch shape the existing diff-gates can hold once they learn one new bucket. The boundary between the two lanes is now measured, not argued: the retrofit cures scripting-off; only the rebuild cures script-never-arrived.

Graduation

GRADUATION.md in the Lab repo is the fleet pass's contract: port patterns, not files, reconciled per engine against the real templates (which this Lab never read — the current fleet is batch-1's live instrument and stayed frozen); every change diff-gated, with retrofit-f11-appendix as the one new bucket; the retrofit as the fast lane for the ~442, the clean sheet as the rebuild target for new builds; paying clients individually-justified-only, always; and the whole rollout gated post-Jul-31, after the batch-1 read. Through the front door only.