[130U]

Summary

A design pass over the whole site, with Cognition's grid as the reference. No approved prose changed.

Why the right side felt empty. The site already used Cognition's 15-column grid, but prose was capped at 560px and never reached the column guides drawn beside it, and every section was a single narrow column. Cognition keeps prose narrow too, but alternates it with modules that run to the right guide.

Layout

• Hanging two-axis layout on About, Experience, Coursework and the ten detail pages: item titles on axis A (3 of 10 columns), prose on axis B (7 of 10) running to the reading-end guide. Below 1200px titles stack above prose.
• Structural guides now mark the axes the text uses (column 8 on index pages, column 12 on articles). Section rules end on the reading-end guide.
• Article pages split 7 / 3 between reading column and contents rail, so the split lands on a guide.

Typography: one size per role

Role	Size
Title	36px (30 mobile), Inter 400
Heading	24px (22 mobile), Inter 400
Subheading	18px, Inter 500
Reading	16px, Source Serif 4
Interface	15px, Inter
Label	13px, Inter
Index	11px, Source Serif 4

The architecture viewer's tokens are re-synced via scripts/integrate-architecture.mjs.

Logic architecture diagrams. ArchitectureFlow (a labelled timeline) is replaced by LogicDiagram on all eight AI and legal articles, placed in the header under the record strip:

• Four stages left to right; parallel nodes share lanes, joined by fan-out and fan-in buses.
• The decisive mechanism is set in ink; the single feedback loop is the one blue path.
• Pure HTML/CSS on one grid, so text keeps the site's type roles and needs no JavaScript. Below 640px of figure width it reflows vertically (parallel nodes side by side from 480px).
• Data lives in app/lib/content/architecture-diagrams.ts, which validates lane counts at build time.

Detail pages

• Organization / Position / Location / Dates become a record strip: label-role captions over values in the reading face; four fields on desktop, two below 1200px, one below 420px.
• Key Contributions is an ordered list with decorative serif indices; the bold lead sentences already in the AI manuscript now render at weight 600.

Experience listing. Each entry shows a record line under its title (organization for AI, paper title for legal, position otherwise, then dates), reusing the approved metadata verbatim.

Copy and contracts

• New visible text is limited to the diagrams (stage names, node labels, loop labels; captions for the four legal diagrams) and the Experience record lines. The four AI captions are reused from the old flows.
• content/protected-sources.json: hashes refreshed only for components whose markup changed; their diffs were checked to contain no prose edits.
• content/visible-copy-manifest.json: regenerated. Only /experience/, its compatibility routes and the eight articles changed; About, Coursework, the ten detail pages and the Selected Research papers are unchanged.
• Design-snapshot assertions in tests/rendered-html.test.mjs now encode the new contract; a new test requires one logic diagram in each article header. docs/design.md is updated.
• The clarinet hero is unchanged.

Test plan

• npm run check (protected sources, lint, build, 146/146 artifact tests, visible copy)
• npm run typecheck
• Visual review at 1536, 1100 and 390px: About, Experience, Coursework, a detail page, and all eight diagrams
• Review the diagram wording in architecture-diagrams.ts

🤖 Generated with Claude Code