Reader’s Guide to the Issue-00 Design Study

Pass 0 — builder self-critique · 2026-07-08

Problems found in my own build and fixed before finishing:

1. Masthead overflow at 360px. The kinetic tracking animation’s wide phase (letter-spacing 0.34em on a nowrap headline) pushed the masthead past the viewport edge on narrow screens, causing a horizontal scrollbar flash. Fixed by clipping overflow on the masthead container and reducing the settled tracking to 0.04em below 480px.
2. Receipt card escaping the viewport. Citations near the right column edge opened their card partly off-screen, and markers near the bottom of the viewport pushed it below the fold. Fixed with position clamping on both axes (16px gutters, flip-above when there is no room below) and a min(340px, 100vw − 32px) width so it always fits at 360px.
3. Deks set in cool grey. The first draft styled deks in #6E6A63, which sits barely above the AA contrast threshold on bone and read washed-out at italic sizes. Deks moved to full ink; grey is now reserved for small mono furniture (folios, kickers’ neighbors, ledger headers) where it stays ≥ 4.5:1.
4. Reveal styles could strand content invisible. The paragraph reveal originally applied opacity: 0 unconditionally, so a JS failure would have hidden most of the page. The hidden state is now gated behind a .js class the script adds to the root, and behind the no-preference motion query — no JS, no hiding.
5. Pinned receipt cards drifting on scroll. The fixed-position card visually detached from its citation when the page scrolled while pinned. Rather than re-anchoring on every scroll frame, the card now closes on scroll — the honest, cheap behavior for a footnote peek.

Pass 1 — hostile director critique · 2026-07-08

Problems found by a critic who did not build the page, and what was done:

1. The small-screen tracking fix never actually worked. Pass 0 claims the settled masthead tracking drops to 0.04em below 480px — but the kinetic animation’s to keyframe pinned letter-spacing at 0.08em, and with fill-mode both an animation’s end value overrides any media query indefinitely. The keyframe now declares only its from state, so the settle lands on whatever the stylesheet computes at that width.
2. Masthead clipped at 360px. Even settled, the nowrap masthead at its old clamp floor (2.1rem) measured to roughly the full 312px of available width; overflow: hidden meant it clipped silently instead of scrolling. Retuned to clamp(1.9rem, 8.5vw, 5.2rem), checked against the glyph advances of “THE NEW AI ERA.”
3. Citation buttons were ~12px tap targets. An invisible ::after hit-area extension now pads each marker to a usable size without shifting layout, and vertical-align: super was replaced with a relative baseline shift so the markers no longer knock line spacing uneven.
4. The colophon overclaimed JavaScript. It said the kinetic masthead “runs in vanilla JavaScript”; it is a CSS animation. On a page whose whole argument is precision about claims, the colophon now says which is which.
5. Novelistic micro-details trimmed from Dispatch 02. “Routine follow-up,” “one plan tier up,” and “the owner looked at the number” are not in the record — the record says follow-up happened, the lock cost roughly $150/month, and the owner declined. The copy now says exactly that.
6. Accessibility seams. The skip-link target was not focusable (tabindex="-1" added); the shared receipt card now announces politely (aria-live) and every marker declares aria-controls; the masthead position line and deks got widow control via text-wrap.

Complexity upgrade added — the Late Edition. From the brief’s menu: a dark “late edition” under prefers-color-scheme: dark, same restraint. The broadsheet’s custom properties invert (bone ground → late-edition ink #16130F, ink text → #EDE6D8), the red and grey move to lighter cuts, and every reading pair was verified numerically: text 14.9:1, red 5.9:1, grey 6.2:1. Hairlines, endmark fleurons (now currentColor), receipt-card shadow, form chrome (color-scheme), and browser theme-color all follow; the dateline gains a “Late edition” flag. No JavaScript, no toggle, no new motion.

Pass 2 — hostile director critique · 2026-07-08

Problems found by a second critic who did not build the page, and what was done:

1. The pull quote was a quotation of nobody. Dispatch 01’s pull quote sat inside curly quotation marks but appears nowhere in the article and is attributed to no one — on a page whose entire argument is sourced claims, punctuation that implies a source is a small fabrication. The quotation marks were removed; the line now reads as the publication’s own display statement, which is what it is.
2. The skip link depended on :focus-visible alone. A browser that does not support the selector drops the rule wholesale, leaving the skip link permanently off-screen. It now uses plain :focus — a skip link only ever receives keyboard focus, so the distinction bought nothing.
3. Receipt cards were silent to screen readers. The shared card is aria-live, but its text was written while the element was still hidden, and live regions inside hidden containers are not reliably announced. The card now re-assigns its text one frame after becoming visible — a real DOM mutation the live region picks up.
4. The guide broke the late edition. Pass 1 gave the front page a dark reprint, but following “Reader’s guide” from a dark front page flashed a full-bright bone page — the inside page had no night plate. The guide now carries the same verified dark palette, color-scheme, and theme-color metas.
5. A hand-broken word in this guide. Pass 0’s fourth entry contained a hard-coded hyphen (“uncondition-ally”) that rendered mid-line wherever the paragraph happened to wrap. Rejoined.

Complexity upgrade added — the citation return trail. The receipts ledger gained a “Cited in” column: each row carries a ¶ link that jumps to the exact inline citation it backs and focuses the marker, so the existing focus handler opens the receipt card at the claim. The jump is instant (no new motion, so reduced-motion behavior is unchanged), keyboard-first by construction, and degrades to native anchor jumps without JavaScript. The in-source sync comment and “For the Next Builder” now name all three places a new receipt must be added. The ledger no longer merely lists the records — it proves each one is attached to a live sentence.

Pass 3 — director rendered inspection (browser) · 2026-07-08

Verified by rendering the page live in Chrome at ~500px and 1280px:

1. Masthead and layout verified. Masthead settle, standing-rules box, in-this-issue index rail, and dispatch typography (kicker, drop cap, pull quote) verified.
2. Receipt system verified live. Receipt marker [R1] opens its record card with the honest “Internal record — summarized here; pending owner voice pass” footer.
3. Console check. Zero console errors.

No defects found; no changes made this pass.

Complexity upgrade added — none this pass. Stability preserved after two verified upgrade passes.

V1B — Approved owner voice applied · 2026-07-08

Alex approved a set of replacements on the WEB_SONNET_V1A_APPROVAL_WORKSHEET.md (ready to hand to next edit pass: YES, 2026-07-08). This pass applied them verbatim to ../index.html:

1. TNAE-shared — all three provenance lines ("Drafted from internal records — pending owner voice pass") and the receipt-card hover label replaced with "Record-sourced draft. Voice pass: pending."
2. TNAE-01 — Dispatch 01 dek replaced.
3. TNAE-02 — Dispatch 02 dek replaced.
4. TNAE-03 — Dispatch 03 dek replaced.
5. TNAE-04a — masthead position line replaced.
6. TNAE-04b — issue-00 disclosure paragraph replaced with the approved Option C text.
7. TNAE-04c — newsletter line replaced.

No new facts were added — every replacement is a register/voice change to a dek, provenance line, or disclosure paragraph already scoped by the brief; no dates, counts, or claims changed. The dispatch body-copy paragraphs (the lead and secondary article text under each dek) were not rewritten, per the owner's explicit "no full-body voice pass for now" constraint — only deks, the shared provenance line, the masthead position line, the issue-00 paragraph, the newsletter line, and the receipt-card hover label were touched. The "pending owner voice pass" status itself is preserved in the new copy; only its wording changed, not the fact that a voice pass is still outstanding. Validation: exact approved strings confirmed present, prior draft strings confirmed absent outside this guide's own references, no fake claims, no KDP references, no external assets introduced — see WEB_SONNET_V1B_VALIDATION_REPORT.md in the V1B output folder for the full record.

V1C — Stale voice marker cleanup · 2026-07-08

V1B flagged a stale quoted-string reference left over after its provenance-line wording change (see its Recommended Next Run). This pass reconciled it in this guide only:

1. §07 "For the Next Builder" step 1 quoted the old provenance phrase "pending owner voice pass" as the literal string to remove; the live page's provenance line was changed by V1B to "Record-sourced draft. Voice pass: pending." — updated the quoted phrase to match the current live text.

What intentionally remains unchanged: the instruction's substance — the dispatch body-copy voice pass is genuinely still outstanding, per the owner's "no full-body voice pass for now" constraint, so the underlying status was not altered, only the stale quoted string. The §05 real-vs-prototype table row and §06 Business Direction paragraph (both describing the voice pass as still pending) were left as-is — their substance remains accurate. The Pass 3 and V1B critique-log entries above were also left as-is — dated historical records accurate to what was true when written. No approved V1B copy (TNAE-shared/01/02/03/04a/04b/04c) was changed — confirmed present, verbatim, by string match against the V1B changelog. No dispatch body-copy paragraphs were altered. No new facts or claims were introduced. Validation: WEB_SONNET_V1C_VALIDATION_REPORT.md in the V1C output folder.