From e89baa5049e3f95e7b587861356a1e2c7a9a8ff9 Mon Sep 17 00:00:00 2001
From: LeOu <theodore.oy2025@gmail.com>
Date: Thu, 5 Nov 2026 18:51:35 -0500
Subject: [PATCH] Redesign the reading grid and add logic architecture diagrams

Use the full ten-column field: item titles hang on axis A and prose runs on
axis B to the reading-end guide, so About, Experience, Coursework and detail
pages no longer leave the right side empty. Structural guides now mark the
axes the text actually uses.

Unify typography to one size per role: title 36, heading 24, subheading 18,
reading 16, interface 15, label 13, index 11.

Replace the timeline ArchitectureFlow with a CSS-grid LogicDiagram on all
eight AI and legal articles: four stages, fan-out and fan-in buses, the
decisive mechanism set in ink, and one blue feedback loop. It reflows to a
vertical sequence below 640px of figure width.

Set Organization, Position, Location and Dates as a labelled record strip,
number Key Contributions, render the manuscript's bold lead sentences, and
show each Experience entry's organization or paper title and dates under its
title.

No approved prose changed. Protected-source hashes are refreshed for the
markup-only component edits, and the visible-copy manifest is regenerated for
the new diagram labels and record lines.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 architecture/index.html                       |  23 +-
 docs/design.md                                | 129 ++++---
 website/app/components/AboutContent.tsx       |  62 +--
 .../components/SectionDirectory.module.css    |   4 +-
 website/app/components/SiteShell.tsx          |   6 +-
 website/app/components/StructuralGrid.tsx     |  11 +-
 .../experience/ArchitectureFlow.module.css    |  65 ----
 .../experience/ArchitectureFlow.tsx           |  17 -
 .../experience/Experience.module.css          | 210 +++++++---
 .../experience/ExperienceContent.tsx          |  24 +-
 .../experience/ExperienceDetails.tsx          |  28 +-
 .../experience/LogicDiagram.module.css        | 363 ++++++++++++++++++
 .../components/experience/LogicDiagram.tsx    |  94 +++++
 .../components/research/ResearchArticle.tsx   |   3 +-
 website/app/coursework/coursework.module.css  |  48 ++-
 website/app/coursework/page.tsx               |   2 +-
 website/app/education/page.tsx                |   2 +-
 website/app/experience/[slug]/page.tsx        |   2 +-
 website/app/experience/page.tsx               |   2 +-
 website/app/globals.css                       |  68 ++--
 website/app/home.module.css                   | 173 ++++++---
 .../app/lib/content/architecture-diagrams.ts  | 213 ++++++++++
 website/app/lib/content/architecture-flows.ts |  21 -
 website/app/page.tsx                          |   2 +-
 .../components/ExperienceDomainPage.tsx       |   2 +-
 .../components/LegalPaperPage.module.css      |  19 +-
 .../components/LegalPaperPage.tsx             |   3 +-
 .../components/LegalPaperReader.module.css    |   2 +-
 website/content/protected-sources.json        |  20 +-
 website/content/visible-copy-manifest.json    | 123 +++---
 website/tests/rendered-html.test.mjs          |  73 +++-
 31 files changed, 1349 insertions(+), 465 deletions(-)
 delete mode 100644 website/app/components/experience/ArchitectureFlow.module.css
 delete mode 100644 website/app/components/experience/ArchitectureFlow.tsx
 create mode 100644 website/app/components/experience/LogicDiagram.module.css
 create mode 100644 website/app/components/experience/LogicDiagram.tsx
 create mode 100644 website/app/lib/content/architecture-diagrams.ts
 delete mode 100644 website/app/lib/content/architecture-flows.ts

diff --git a/architecture/index.html b/architecture/index.html
index 256e63b..e1721c2 100644
--- a/architecture/index.html
+++ b/architecture/index.html
@@ -35,23 +35,24 @@
   <link rel="preload" href="../assets/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin>
   <style>
     :root {
-      --type-title: 2rem;
-      --title-leading: 1.15;
-      --type-heading: 1.25rem;
-      --heading-leading: 1.3;
-      --type-subheading: 0.9375rem;
-      --subheading-leading: 1.5;
-      --type-reading: 0.9375rem;
-      --reading-leading: 1.7;
+      --type-title: 2.25rem;
+      --title-leading: 1.12;
+      --type-heading: 1.5rem;
+      --heading-leading: 1.25;
+      --type-subheading: 1.125rem;
+      --subheading-leading: 1.4;
+      --type-reading: 1rem;
+      --reading-leading: 1.65;
       --type-interface: 0.9375rem;
       --interface-leading: 1.5;
-      --type-label: 0.9375rem;
-      --label-leading: 1.5;
+      --type-label: 0.8125rem;
+      --label-leading: 1.45;
     }
 
     @media (width < 768px) {
       :root {
-        --type-title: 1.75rem;
+        --type-title: 1.875rem;
+        --type-heading: 1.375rem;
       }
     }
 
diff --git a/docs/design.md b/docs/design.md
index 743baf3..ad2e870 100644
--- a/docs/design.md
+++ b/docs/design.md
@@ -36,7 +36,9 @@ The mark's editable master is
 | Text-link underline | `#a6a6a1` |
 | Active state and focus | `#2200ff` |
 | Structural rule | `rgba(0, 0, 0, 0.06)` |
+| Entry rule and diagram node border | `rgba(0, 0, 0, 0.12)` |
 | Strong rule | `rgba(0, 0, 0, 0.24)` |
+| Diagram node surface | `#fcfbfa` |
 
 Inter 4.1 remains the typeface for headings, navigation, directory labels, controls,
 metadata, and the architecture viewer. Source Serif 4 supplies narrative prose and
@@ -79,29 +81,34 @@ scale relative to surrounding text without changing the prose size.
 
 | Role | Shared token | Size and face | Leading |
 | --- | --- | --- | --- |
-| Page title | `--type-title` | 32px desktop / 28px mobile, Inter 400 | 1.15 |
-| Section or chapter heading, directory item | `--type-heading` | 20px, Inter 400 | 1.3 |
-| Item or subsection title: project, paper, institution, article subsection | `--type-subheading` | 15px, Inter 500 | 1.5 |
-| Prose: body, summaries, records, course names, table cells, captions | `--type-reading` | 15px, Source Serif 4 400 | 1.7 |
-| Interface: navigation, metadata, contents, Read More, flow labels, footer | `--type-interface`, `--type-label`, `--type-action` | 15px, Inter 400 | 1.5 |
-| Section margin index and directory number | `--type-index` | 10px, Source Serif 4 400 | 1.5 |
+| Page title | `--type-title` | 36px desktop / 30px mobile, Inter 400, -0.022em | 1.12 |
+| Section or chapter heading, directory item | `--type-heading` | 24px desktop / 22px mobile, Inter 400, -0.015em | 1.25 |
+| Item or subsection title: project, paper, institution, article subsection | `--type-subheading` | 18px, Inter 500 | 1.4 |
+| Prose: body, summaries, record values, course names, table cells, captions | `--type-reading` | 16px, Source Serif 4 400 | 1.65 |
+| Interface: navigation, contents, Read More, degree names, diagram node titles | `--type-interface`, `--type-action` | 15px, Inter 400 (500 for actions and node titles) | 1.5 |
+| Label: field labels, entry record lines, diagram stage and detail text, footer | `--type-label` | 13px, Inter 400 | 1.45 |
+| Section margin index, directory number, contribution number | `--type-index` | 11px, Source Serif 4 400 | 1.5 |
 | Inline mathematical expression | Relative to surrounding text | 1em | Intrinsic mathematical geometry |
 | Displayed mathematical expression | `--type-math` | 1.15em | Intrinsic mathematical geometry |
 
-Three sizes carry the site. A level looks the same on every page, so hierarchy comes
-from size and space. Inter marks structure and Source Serif 4 marks reading. Inline
-`code` inherits the surrounding face. Summaries and contributions carry no bold;
-italic run-ins and bold theorem labels remain inside mathematics papers. The hero
-name is the one display exception.
-
-Whitespace separates entries, chapters, and list items. Rules are reserved for
-page-level sections and the two directories. Do not add metric rows, pills, badges,
-or other pulled-out figures: a result belongs in its sentence.
-
-Text roles use rem units and scale with the user's text setting. Page titles use 32px on desktop and 28px below 768px, including in the architecture
-viewer. The 20px heading, 15px, and 10px index roles remain the same at every viewport. General titles and section headings use -0.02em tracking;
-article names, reading text, and indices use zero tracking. The shared
-`--reading-leading` remains 1.6 for sustained reading.
+Seven roles carry the site, each with one size. A level looks the same on every page,
+so hierarchy comes from size, weight and space. Inter marks structure and Source Serif 4
+marks reading. Inline `code` inherits the surrounding face. Summaries carry no bold.
+In Key Contributions, the lead sentence and results authored in bold in the AI
+manuscript render at weight 600, so each contribution opens with its claim; italic
+run-ins and bold theorem labels remain inside mathematics papers. The hero name is the
+one display exception.
+
+Whitespace separates chapters and list items. Rules mark page-level sections, the
+entries within a section, the two directories, the record strip, and diagram stages.
+Do not add metric rows, pills, badges, or other pulled-out figures: a result belongs in
+its sentence.
+
+Text roles use rem units and scale with the user's text setting. Titles and headings
+step down below 768px, including in the architecture viewer; the other roles remain
+the same at every viewport. Titles, headings and item titles use the `--title-tracking`,
+`--heading-tracking` and `--subheading-tracking` tokens; reading text and indices use
+zero tracking.
 Blue marks active navigation, focus, and link feedback. Editorial surfaces use flat
 rules and typography; the note-preview dialog uses a rounded surface to distinguish
 its temporary reading state.
@@ -113,40 +120,60 @@ paper/ink palette. It is one page with five numbered sections and an anchor
 directory headed Experience: Areas of Focus that stays in one column at every screen width.
 Experience and Coursework use the same `SectionDirectory` component: full-width
 rows separated by thin rules, with small serif numbers at the left and labels in the
-20px heading size at weight 500. A right-aligned View action appears on hover
+heading size. A right-aligned View action appears on hover
 and keyboard focus and remains visible on touch devices; the complete row turns
 blue on hover or focus. Directory numbers run from 01 through 05 for Experience
 and 01 through 04 for Coursework. Both the decorative numbers and repeated View
 actions are hidden from assistive technology, leaving the section title as each
-link's accessible name. Section margin indices use the shared 10px serif index role on
-About, Experience, and Coursework. Section spacing separates
-domains, and 56px of space distinguishes entries within them. Category
-introductions are omitted. Summaries use upright
-black body text at 15px; project titles use the subheading role. No content is truncated to fit a card.
+link's accessible name. Section margin indices use the shared serif index role on
+About, Experience, and Coursework. Category introductions are omitted.
+
+On About, Experience, Coursework and the ten detail pages, content hangs on two axes
+of the ten-column field (`--hang-columns`, 3fr / 7fr). From 1200px, item titles sit on
+axis A and their prose on axis B, three columns in, separated by entry rules; below
+1200px the title stacks above its prose. Each Experience entry shows its title in the
+subheading role and, under it, a record line in the label role: the organization for
+AI projects, the paper title for legal research, the position otherwise, then the
+dates. These lines reuse the approved metadata verbatim. Summaries use upright black
+body text. No content is truncated to fit a card. Sections end on the reading-end
+guide (11 of the 12 content columns).
 
 All body copy uses the shared ink colors. Blue marks navigation, hover, keyboard
 focus, and the decision or feedback path in architecture figures.
 
-AI entries lead with the project name. AI pages show one `ArchitectureFlow` under
-Architectural Context: stage labels on a single rule with the site's blue ticks, then
-a caption in prose. It reflows to a vertical sequence below 620px, and its copy lives
-in `app/lib/content/architecture-flows.ts`. The confidentiality note closes the AI
-section.
-
-Reading columns stay inside the structural reading-measure guide at 560px. On wide layouts the
-contents rail lists chapters and opens subsections only for the chapter being read.
+AI entries lead with the project name. The confidentiality note closes the AI section.
+
+Each of the eight AI and legal articles opens with a `LogicDiagram` in its header,
+under the record strip, as the article's visual abstract. Its data lives in
+`app/lib/content/architecture-diagrams.ts`, keyed by Experience entry ID: four stages
+read left to right, each holding one node or one node per lane, with an optional
+feedback loop to an earlier stage. Stage labels sit on short rules with the site's
+blue ticks; nodes are flat panels with a 1px border, and the stage holding the
+decisive mechanism is set in ink. Connectors are drawn in CSS on the same grid as the
+nodes (arrows, fan-out and fan-in buses), and the loop is the one blue path, labelled
+beneath. Node details accept inline TeX. The figure is pure HTML and CSS, so its text
+keeps the site's roles and works without JavaScript. Below 640px of figure width it
+reflows into a vertical sequence (parallel nodes side by side from 480px) and the
+loop becomes a labelled return note. A prose caption follows. Every stage must have
+one node or as many as the widest stage; the module throws at build time otherwise.
+
+Prose stays within `--reading-measure` (40rem). On wide article layouts the reading
+column takes seven grid columns and the contents rail three, so the split lands on
+the column-12 guide; the rail lists chapters and opens subsections only for the
+chapter being read.
 
 All eighteen entries use real Read More links to dedicated pages. The eight AI and
 legal articles use their manuscript URLs; the other ten entries have pages at
 `/experience/{slug}/`. AI entries lead with the project name, other outer entries with
 the organization, and legal entries with `Duke Law School: {research area} Research`.
 Detail-page H1s use the project or paper title in the page-title role. Organization,
-Position, Location, and Dates appear as four rows with aligned label/value pairs,
-stacking within a row below 420px. The browser title keeps
-`{institution}: {project title}`.
-The rows are followed by the approved Key
-Contributions, with contextual notes as the final bullets in the same list and
-type style. Links work without JavaScript and have accessible
+Position, Location, and Dates form a record strip under a strong rule: four fields on
+desktop, two per row below 1200px and one below 420px, each a label-role caption above
+a value in the reading face. The browser title keeps `{institution}: {project title}`.
+The strip is followed by the approved Key Contributions as an ordered list with
+decorative serif indices (01, 02, ...), with contextual notes as the final items in
+the same list and type style. On the ten non-article detail pages the Key
+Contributions heading hangs on axis A beside its list. Links work without JavaScript and have accessible
 keyboard focus and touch targets. Do not repeat the outer summary in the detail view.
 
 AI pages include the scope disclosure, Key Contributions with any nested method
@@ -157,8 +184,8 @@ before the complete Abstract and manuscript. The shared contents rail includes
 the contribution block and source chapter links. Return links target the matching
 entry on Experience.
 
-Research article prose, emphasis, citations, and table cells use the shared 15px
-reading size. Subsection headings use the shared 20px size with weight 500. Inline
+Research article prose, emphasis, citations, and table cells use the shared
+reading size. Subsection headings use the subheading role. Inline
 formulas use 1em; standalone formulas use 1.15em. Pure inline numerical values,
 including scientific notation and percentages, use the surrounding prose family
 with native superscripts while retaining their accessible MathML and original TeX.
@@ -180,7 +207,7 @@ fine rule, and 2rem of inset; phone spacing is 4rem and 1.5rem. Subsections use
 the site's fonts or type sizes.
 
 Section margin indices use `--type-index`; metadata labels use `--type-label`.
-Top-level directories use the 20px heading role. Navigation, the wordmark name,
+Top-level directories use the heading role. Navigation, the wordmark name,
 the mobile menu, and return links share `--type-interface` at every breakpoint.
 Text links share a 1px underline, `--link-rule`, and `--link-underline-offset`.
 Focus remains a visible blue outline, and hover feedback respects pointer capability.
@@ -190,7 +217,7 @@ Focus remains a visible blue outline, and hover feedback respects pointer capabi
 The desktop frame is capped at 1440px and divided into 15 columns, with a three-column
 sticky navigation rail. The content field reserves one internal track for indices and
 aligns headings and prose to the reading track. Tablet uses 12 outer columns.
-The shared `--reading-measure` caps narrative containers at 720px. Page introductions,
+The shared `--reading-measure` caps narrative containers at 40rem. Page introductions,
 the education list and Coursework sections, Experience records and detail pages,
 and AI project articles align their headings and prose to this common right edge.
 Nested paragraphs fill their container with natural ragged-right wrapping. Each
@@ -221,12 +248,12 @@ with visible keyboard focus and a descriptive accessible name;
 the About page keeps its `#coursework` anchor around this entrance. The dedicated
 page has four subject sections, indexed 01 through 04, and uses the same numbered,
 ruled directory and View interaction as Experience.
-Each section has a shared section heading and a single-column list of course names
-at the shared 15px reading size and leading. All 49 courses retain their original
+Each section has a shared section heading and a list of course names
+at the shared reading size and leading, in two columns on axis B from 1200px. All 49 courses retain their original
 wording and order as static text, available without JavaScript. The rail's
 Back to Education link returns to the Education section. Duke University appears
 once above the two degree records;
-degree names use the reading size at weight 500. Compact notes and a thin rule
+degree names use the interface size at weight 500, on axis B beside the institution. Compact notes and a thin rule
 separate the degree records. Profile details and contact values also use the reading
 scale; field labels use the label scale. Email, GitHub, and X occupy three columns
 above 540px and stack in one column at 540px and below. Long contact values can wrap
@@ -242,14 +269,14 @@ matches Experience's underlined text and decorative right arrow, with blue hover
 and keyboard-focus feedback. Its accessible name identifies the manuscript.
 The list omits dates. Paragraphs wrap naturally
 without forced line breaks. Section headings, entry headings, and reading text use
-the shared heading, 20px heading, and 15px reading hierarchy; scoped spacing overrides do not affect other pages.
+the shared title, heading, subheading and reading hierarchy; scoped spacing overrides do not affect other pages.
 
 Page titles own the H1 position. About's two-line "Theodore / Ouyang" supplies its
 main heading. The "Thinking mathematically / Working in AI" introduction
 is an H2 below the hero; it remains the H1 on the `/education/` compatibility page.
 Experience domains use `01`–`05` indices; individual entries have no leading markers.
 Top-level contributions are plain paragraphs without bullets or rules. Narrative lines stay within
-the shared 560px reading measure and reflow with the viewport.
+the shared reading measure and reflow with the viewport.
 
 ## Interaction
 
@@ -343,7 +370,7 @@ hover and keyboard-focus feedback. Titles and complete summaries remain outside
 the link. Summaries retain selected bold emphasis. Numerical guarantees retain their
 model, horizon, payoff, and comparison scope.
 It does not repeat the abstracts. Titles use the same
-20px heading role; supporting paragraphs use the 15px reading role. Thin
+subheading role on axis A; supporting paragraphs use the reading role on axis B. Thin
 horizontal rules separate entries. Typography, spacing, and wrapping adapt within
 the shared reading frame without introducing cards or changing the palette.
 
@@ -377,7 +404,7 @@ measure. Preserve the source title, subtitle, author name, date, abstract, origi
 chapter numbering, paragraph order, legal citations, and acknowledgments. The
 detail-page H1 is the approved project title; chapters and subsections use semantic
 H2 and H3 headings.
-Chapter headings use the 20px heading role at weight 400; subsections use the 15px
+Chapter headings use the heading role at weight 400; subsections use the
 subheading role at weight 500. Preserve source capitalization and emphasis; italics
 in subsection headings render upright so a heading stays in one face.
 Legal citations within a paragraph use its body size and spacing, including text
diff --git a/website/app/components/AboutContent.tsx b/website/app/components/AboutContent.tsx
index fe09522..1882324 100644
--- a/website/app/components/AboutContent.tsx
+++ b/website/app/components/AboutContent.tsx
@@ -55,14 +55,16 @@ export function AboutContent({ hasHero = false }: { hasHero?: boolean }) {
           <h2 className={styles.sectionTitle} id="research-heading">Selected Research</h2>
           <div>
             {selectedResearchProjects.map((project) => (
-              <article className={styles.researchEntry} key={project.slug} id={project.slug}>
-                <h3 className={styles.researchTitle} id={`${project.slug}-title`}>{project.title}</h3>
-                {researchSummaries[project.slug].map((paragraph, index) => (
-                  <p className={styles.researchSummary} key={index}>{paragraph}</p>
-                ))}
-                <Link className={styles.readMore} href={project.path} aria-label={`Read more about ${project.title}`}>
-                  Read More<ReadingArrow />
-                </Link>
+              <article className={styles.row} key={project.slug} id={project.slug}>
+                <h3 className={styles.rowTitle} id={`${project.slug}-title`}>{project.title}</h3>
+                <div className={styles.rowBody}>
+                  {researchSummaries[project.slug].map((paragraph, index) => (
+                    <p className={styles.researchSummary} key={index}>{paragraph}</p>
+                  ))}
+                  <Link className={styles.readMore} href={project.path} aria-label={`Read more about ${project.title}`}>
+                    Read More<ReadingArrow />
+                  </Link>
+                </div>
               </article>
             ))}
           </div>
@@ -73,27 +75,31 @@ export function AboutContent({ hasHero = false }: { hasHero?: boolean }) {
         <p className={styles.sectionIndex} aria-hidden="true">03</p>
         <div className={styles.sectionBody}>
           <h2 className={styles.sectionTitle} id="education-heading">Education</h2>
-          <h3 className={styles.institution}>Duke University</h3>
-          <div className={styles.educationList}>
-            <article className="education-entry">
-              <h4 className="education-degree">Master of Engineering in Risk Engineering</h4>
-              <p className="entry-subtitle">Financial Risk Concentration</p>
-              <div className="education-notes">
-                <p className="education-note education-advisor">
-                  Academic Advisor:{" "}
-                  <a href="https://cee.duke.edu/people/mark-borsuk/" target="_blank" rel="noopener noreferrer">Mark Borsuk, Ph.D.</a>
-                </p>
-                <p className="education-note">Pratt School of Engineering Merit Scholarship</p>
+          <div className={styles.row}>
+            <h3 className={styles.institution}>Duke University</h3>
+            <div className={styles.rowBody}>
+              <div className={styles.educationList}>
+                <article className="education-entry">
+                  <h4 className="education-degree">Master of Engineering in Risk Engineering</h4>
+                  <p className="entry-subtitle">Financial Risk Concentration</p>
+                  <div className="education-notes">
+                    <p className="education-note education-advisor">
+                      Academic Advisor:{" "}
+                      <a href="https://cee.duke.edu/people/mark-borsuk/" target="_blank" rel="noopener noreferrer">Mark Borsuk, Ph.D.</a>
+                    </p>
+                    <p className="education-note">Pratt School of Engineering Merit Scholarship</p>
+                  </div>
+                </article>
+                <article className="education-entry">
+                  <h4 className="education-degree">Bachelor of Science in Mathematics</h4>
+                  <p className="entry-subtitle">Dual-Degree Undergraduate Program</p>
+                  <p className="education-note">Undergraduate Merit Scholarship</p>
+                </article>
               </div>
-            </article>
-            <article className="education-entry">
-              <h4 className="education-degree">Bachelor of Science in Mathematics</h4>
-              <p className="entry-subtitle">Dual-Degree Undergraduate Program</p>
-              <p className="education-note">Undergraduate Merit Scholarship</p>
-            </article>
-          </div>
-          <div className={styles.coursework} id="coursework">
-            <Link className={styles.readMore} href="/coursework/" aria-label="Read more about coursework">Read More<ReadingArrow /></Link>
+              <div className={styles.coursework} id="coursework">
+                <Link className={styles.readMore} href="/coursework/" aria-label="Read more about coursework">Read More<ReadingArrow /></Link>
+              </div>
+            </div>
           </div>
         </div>
       </section>
diff --git a/website/app/components/SectionDirectory.module.css b/website/app/components/SectionDirectory.module.css
index 8f4a3d1..b9fa815 100644
--- a/website/app/components/SectionDirectory.module.css
+++ b/website/app/components/SectionDirectory.module.css
@@ -1,7 +1,7 @@
 .directory {
   display: grid;
   grid-template-columns: 1fr;
-  margin-top: 24px;
+  margin-top: 48px;
   font-family: var(--font-text);
 }
 
@@ -17,7 +17,7 @@
   color: var(--ink);
   font-size: var(--type-heading);
   font-weight: 400;
-  letter-spacing: -0.01em;
+  letter-spacing: var(--heading-tracking);
   line-height: var(--heading-leading);
   transition: color 180ms var(--ease-out);
 }
diff --git a/website/app/components/SiteShell.tsx b/website/app/components/SiteShell.tsx
index f45e96c..ee23bae 100644
--- a/website/app/components/SiteShell.tsx
+++ b/website/app/components/SiteShell.tsx
@@ -1,13 +1,14 @@
 import type { ReactNode } from "react";
 import type { ActivePage, ParentPage } from "../lib/content/site";
 import { SiteNavigation } from "./SiteNavigation";
-import { StructuralGrid } from "./StructuralGrid";
+import { StructuralGrid, type GuideLayout } from "./StructuralGrid";
 
 export function SiteShell({
   active,
   parent,
   children,
   frameClassName,
+  guides = "article",
   showSkipLink = true,
   skipHref = "#main-content",
 }: {
@@ -15,6 +16,7 @@ export function SiteShell({
   parent?: ParentPage;
   children: ReactNode;
   frameClassName?: string;
+  guides?: GuideLayout;
   showSkipLink?: boolean;
   skipHref?: `#${string}`;
 }) {
@@ -28,7 +30,7 @@ export function SiteShell({
       <div
         className={frameClassName ? `site-frame ${frameClassName}` : "site-frame"}
       >
-        <StructuralGrid />
+        <StructuralGrid layout={guides} />
         <SiteNavigation active={active} parent={parent} />
 
         <main className="content-column" id="main-content">
diff --git a/website/app/components/StructuralGrid.tsx b/website/app/components/StructuralGrid.tsx
index 828d3b3..4cf6d68 100644
--- a/website/app/components/StructuralGrid.tsx
+++ b/website/app/components/StructuralGrid.tsx
@@ -6,9 +6,16 @@ const guides = [
   "reading-end",
 ] as const;
 
-export function StructuralGrid() {
+/**
+ * Decorative column guides. "index" pages hang titles on the reading start and
+ * set prose on a second axis three columns in; "article" pages end their
+ * reading column where the contents rail begins.
+ */
+export type GuideLayout = "index" | "article";
+
+export function StructuralGrid({ layout = "article" }: { layout?: GuideLayout }) {
   return (
-    <div className="structural-grid" aria-hidden="true">
+    <div className="structural-grid" data-guides={layout} aria-hidden="true">
       {guides.map((guide) => (
         <span
           className={`structural-guide structural-guide-${guide}`}
diff --git a/website/app/components/experience/ArchitectureFlow.module.css b/website/app/components/experience/ArchitectureFlow.module.css
deleted file mode 100644
index 64acc03..0000000
--- a/website/app/components/experience/ArchitectureFlow.module.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.flow {
-  margin: 3rem 0 0;
-}
-
-.stages {
-  position: relative;
-  display: grid;
-  grid-auto-columns: minmax(0, 1fr);
-  grid-auto-flow: column;
-  gap: 16px;
-  margin: 0;
-  padding: 0;
-  border-top: 1px solid var(--rule-strong);
-  font-family: var(--font-text);
-  font-size: var(--type-interface);
-  line-height: var(--interface-leading);
-  list-style: none;
-}
-
-.stages li {
-  position: relative;
-  display: grid;
-  align-content: start;
-  gap: 6px;
-  padding-top: 16px;
-}
-
-.stages li::before {
-  position: absolute;
-  top: -5px;
-  left: 0;
-  width: 2px;
-  height: 9px;
-  background: var(--accent);
-  content: "";
-}
-
-.flow figcaption {
-  margin-top: 1.5rem;
-  color: var(--supporting-ink);
-  font-family: var(--font-prose);
-  font-size: var(--type-reading);
-  line-height: var(--reading-leading);
-}
-
-@media (width < 620px) {
-  .stages {
-    grid-auto-flow: row;
-    gap: 20px;
-    padding-left: 16px;
-    border-top: 0;
-    border-left: 1px solid var(--rule-strong);
-  }
-
-  .stages li {
-    padding-top: 0;
-  }
-
-  .stages li::before {
-    top: 7px;
-    left: -21px;
-    width: 9px;
-    height: 2px;
-  }
-}
diff --git a/website/app/components/experience/ArchitectureFlow.tsx b/website/app/components/experience/ArchitectureFlow.tsx
deleted file mode 100644
index 243c2b5..0000000
--- a/website/app/components/experience/ArchitectureFlow.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { ArchitectureFlow as Flow } from "../../lib/content/architecture-flows";
-import styles from "./ArchitectureFlow.module.css";
-
-export function ArchitectureFlow({ flow }: { flow: Flow }) {
-  return (
-    <figure className={styles.flow} data-architecture-flow>
-      <ol className={styles.stages}>
-        {flow.stages.map((labels) => (
-          <li key={labels[0]}>
-            {labels.map((label) => <span key={label}>{label}</span>)}
-          </li>
-        ))}
-      </ol>
-      <figcaption>{flow.caption}</figcaption>
-    </figure>
-  );
-}
diff --git a/website/app/components/experience/Experience.module.css b/website/app/components/experience/Experience.module.css
index 44c22a2..41ac059 100644
--- a/website/app/components/experience/Experience.module.css
+++ b/website/app/components/experience/Experience.module.css
@@ -2,14 +2,17 @@
   font-family: var(--font-text);
 }
 .frame :global(.content-column) { padding-top: 112px; }
-.intro { max-width: var(--reading-measure); margin-bottom: 64px; }
+
+.intro { margin-bottom: 80px; }
 .intro h1 {
+  max-width: 80%;
   margin: 0;
   font-size: var(--type-title);
-  line-height: var(--title-leading);
   font-weight: 400;
-  letter-spacing: -0.02em;
+  line-height: var(--title-leading);
+  letter-spacing: var(--title-tracking);
 }
+
 .sectionIndex {
   color: var(--muted);
   font-family: var(--font-prose);
@@ -21,73 +24,105 @@
 }
 .section {
   display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-column: 1 / -1;
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+  grid-column: 1 / span 11;
   border-top: 1px solid var(--rule-strong);
-  padding: 80px 0 96px;
+  padding: 72px 0 104px;
   scroll-margin-top: 32px;
 }
-.sectionIndex { grid-column: 1; padding-top: 1px; }
-.sectionBody { grid-column: 2 / span 8; max-width: var(--reading-measure); min-width: 0; }
+.sectionIndex { grid-column: 1; padding-top: 0.5rem; }
+.sectionBody { grid-column: 2 / span 10; min-width: 0; }
 .sectionTitle {
-  margin: 0 0 32px;
+  margin: 0 0 40px;
   font-size: var(--type-heading);
   font-weight: 400;
   line-height: var(--heading-leading);
-  letter-spacing: -0.01em;
+  letter-spacing: var(--heading-tracking);
   text-wrap: balance;
 }
-.entry { scroll-margin-top: 40px; }
-.entry + .entry { margin-top: 56px; }
+
+/* Entries hang their title and record on axis A and their summary on axis B. */
+.entry {
+  padding: 28px 0 32px;
+  border-top: 1px solid var(--rule-medium);
+  scroll-margin-top: 40px;
+}
+.entryHead { min-width: 0; }
 .entryTitle {
   margin: 0;
+  color: var(--ink);
   font-size: var(--type-subheading);
   font-weight: 500;
   line-height: var(--subheading-leading);
-  letter-spacing: 0;
-  text-wrap: balance;
+  letter-spacing: var(--subheading-tracking);
+  text-wrap: pretty;
+}
+.entryMeta {
+  display: grid;
+  gap: 2px;
+  margin: 10px 0 0;
+  color: var(--muted);
+  font-size: var(--type-label);
+  line-height: var(--label-leading);
+  text-wrap: pretty;
 }
-.summary { margin: 8px 0 0; font-size: var(--type-reading); line-height: var(--reading-leading); text-wrap: pretty; }
+.entryMeta span { display: block; }
+.entryBody { min-width: 0; max-width: var(--reading-measure); }
+.summary { margin: 0; font-size: var(--type-reading); line-height: var(--reading-leading); text-wrap: pretty; }
 .summary,
 .indexDisclosure p,
 .disclosure p,
 .architecturalContext p,
-.contributions > ul {
+.contributions > ol {
   font-family: var(--font-prose);
 }
-.indexDisclosure { margin-top: 56px; }
-.indexDisclosure h3, .disclosure h2 {
+
+.indexDisclosure {
+  padding: 28px 0 0;
+  border-top: 1px solid var(--rule-medium);
+}
+.indexDisclosure h3 {
+  margin: 0 0 8px;
+  color: var(--muted);
+  font-size: var(--type-label);
+  font-weight: 400;
+  line-height: var(--label-leading);
+  letter-spacing: 0;
+}
+.indexDisclosure p { color: var(--supporting-ink); }
+.disclosure h2 {
   margin: 0 0 8px;
   font-size: var(--type-subheading);
   line-height: var(--subheading-leading);
   font-weight: 500;
-  letter-spacing: 0;
+  letter-spacing: var(--subheading-tracking);
 }
 .indexDisclosure p, .disclosure p, .architecturalContext p {
   margin: 0;
   font-size: var(--type-reading);
   line-height: var(--reading-leading);
 }
-.architecturalContext { margin-top: 6rem; }
+.architecturalContext { margin-top: 5rem; }
 .architecturalContext h2 {
   margin: 0 0 1.25rem;
   font-size: var(--type-heading);
   line-height: var(--heading-leading);
   font-weight: 400;
-  letter-spacing: -0.01em;
+  letter-spacing: var(--heading-tracking);
   scroll-margin-top: 6rem;
 }
-.architecturalContext p + p { margin-top: 16px; }
+.architecturalContext p + p { margin-top: 1.25rem; }
 .summary code, .contributions code, .architecturalContext code {
   font: inherit;
   overflow-wrap: anywhere;
 }
+
 .readMore {
   display: flex;
   width: fit-content;
   align-items: center;
   min-height: 44px;
-  margin-top: 4px;
+  margin-top: 8px;
   gap: 6px;
   font-size: var(--type-action);
   font-weight: 500;
@@ -96,46 +131,87 @@
   text-decoration-color: var(--link-rule);
   text-underline-offset: var(--link-underline-offset);
   cursor: pointer;
+  transition: color 180ms var(--ease-out), text-decoration-color 180ms var(--ease-out);
 }
-.readMore svg { width: 14px; height: 14px; flex-shrink: 0; }
+.readMore svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 180ms var(--ease-out); }
 .readMore:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
-.detailPage { max-width: var(--reading-measure); }
-.detailHeader { margin-bottom: 4rem; }
-.detailPage .detailHeader h1 { font-size: var(--type-title); font-weight: 400; line-height: var(--title-leading); letter-spacing: -0.02em; }
-.detailFooter { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--rule); margin-top: 40px; padding-top: 24px; font-size: var(--type-interface); }
+
+/* Detail pages */
+.detailPage { min-width: 0; }
+.detailHeader { margin-bottom: 4.5rem; }
+.detailPage .detailHeader h1 {
+  max-width: 80%;
+  font-size: var(--type-title);
+  font-weight: 400;
+  line-height: var(--title-leading);
+  letter-spacing: var(--title-tracking);
+}
+.detailFooter { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--rule); margin-top: 72px; padding-top: 24px; font-size: var(--type-interface); }
 .detailFooter a { display: inline-flex; align-items: center; min-height: 44px; }
 .detailFooter :global(.back-link) { margin-bottom: 0; }
+
+/* Record strip: four labelled fields on one rule, values in the reading face. */
 .metadata {
   display: grid;
-  grid-template-columns: 1fr;
-  gap: 4px;
-  margin: 24px 0 0;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 20px 32px;
+  margin: 48px 0 0;
+  padding: 18px 0 0;
+  border-top: 1px solid var(--rule-strong);
+}
+.metadata > div { display: grid; align-content: start; gap: 6px; min-width: 0; }
+.metadata dt {
+  margin: 0;
+  color: var(--muted);
   font-family: var(--font-text);
-  font-size: var(--type-interface);
-  line-height: var(--interface-leading);
+  font-size: var(--type-label);
+  line-height: var(--label-leading);
+}
+.metadata dd {
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--font-prose);
+  font-size: var(--type-reading);
+  line-height: 1.5;
+  text-wrap: pretty;
 }
-.position { grid-column: 1 / -1; }
-.metadata dt { color: var(--muted); margin-bottom: 0; }
-.metadata dd { margin: 0; }
-.metadata > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: baseline; gap: 8px 16px; }
+
 .contributions h2 {
-  margin: 0 0 1.25rem;
+  margin: 0 0 1.75rem;
   font-size: var(--type-heading);
   font-weight: 400;
   line-height: var(--heading-leading);
-  letter-spacing: -0.01em;
+  letter-spacing: var(--heading-tracking);
   scroll-margin-top: 6rem;
 }
-.contributions > ul {
+.contributions > ol {
   display: grid;
-  gap: 1.5rem;
+  gap: 1.75rem;
   padding: 0;
   margin: 0;
   font-size: var(--type-reading);
   line-height: var(--reading-leading);
   list-style: none;
+  counter-reset: contribution;
 }
-.contributions > ul strong { font-weight: 400; }
+.contributions > ol > li {
+  display: grid;
+  grid-template-columns: 2.25rem minmax(0, 1fr);
+  align-items: baseline;
+  counter-increment: contribution;
+}
+/* The list already conveys order; the visible index is decorative. */
+.contributions > ol > li::before {
+  content: counter(contribution, decimal-leading-zero);
+  content: counter(contribution, decimal-leading-zero) / "";
+  color: var(--muted);
+  font-family: var(--font-prose);
+  font-size: var(--type-index);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  user-select: none;
+}
+.contributions > ol strong { font-weight: 600; }
 .contributionDetails {
   display: grid;
   gap: 8px;
@@ -144,23 +220,57 @@
   font-size: var(--type-reading);
   line-height: var(--reading-leading);
 }
+
 @media (hover: hover) and (pointer: fine) {
   .readMore:hover { color: var(--accent); text-decoration-color: var(--accent); }
+  .readMore:hover svg { transform: translateX(2px); }
+}
+
+@media (min-width: 1200px) {
+  .entry,
+  .indexDisclosure,
+  .detailPage > .contributions {
+    display: grid;
+    grid-template-columns: var(--hang-columns);
+    align-items: start;
+  }
+  .entryHead,
+  .indexDisclosure h3,
+  .detailPage > .contributions h2 { padding-right: var(--hang-gap); }
+  .entryBody { max-width: none; }
+  .detailPage > .contributions h2 { margin: 0; }
 }
+
 @media (768px <= width < 1024px) {
-  .section { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+  .section { grid-template-columns: repeat(9, minmax(0, 1fr)); grid-column: 1 / -1; }
   .sectionBody { grid-column: 2 / span 7; }
 }
+
+@media (width < 1200px) {
+  .entryMeta { margin-bottom: 14px; }
+  .metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .detailPage > .contributions > ol,
+  .indexDisclosure p { max-width: var(--reading-measure); }
+}
+
 @media (width < 768px) {
   .frame :global(.content-column) { padding-top: 52px; }
-  .intro { margin-bottom: 32px; }
-  .section { display: block; padding: 36px 0 44px; scroll-margin-top: 6rem; }
-  .sectionIndex { display: block; margin-bottom: 10px; }
-  .sectionTitle { margin-bottom: 24px; }
-  .entry { scroll-margin-top: 6rem; }
-  .metadata { grid-template-columns: 1fr; gap: 12px; }
+  .intro { margin-bottom: 40px; }
+  .intro h1,
+  .detailPage .detailHeader h1 { max-width: none; }
+  .section { display: block; padding: 40px 0 56px; scroll-margin-top: 6rem; }
+  .sectionIndex { display: block; margin-bottom: 10px; padding-top: 0; }
+  .sectionTitle { margin-bottom: 28px; }
+  .entry { padding: 24px 0 28px; scroll-margin-top: 6rem; }
+  .metadata { gap: 16px 24px; margin-top: 32px; }
+  .contributions > ol > li { grid-template-columns: 1.75rem minmax(0, 1fr); }
 }
 
 @media (width < 420px) {
-  .metadata > div { grid-template-columns: 1fr; gap: 3px; }
+  .metadata { grid-template-columns: 1fr; gap: 14px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .readMore,
+  .readMore svg { transition: none; }
 }
diff --git a/website/app/components/experience/ExperienceContent.tsx b/website/app/components/experience/ExperienceContent.tsx
index 1aaaaec..aa95e39 100644
--- a/website/app/components/experience/ExperienceContent.tsx
+++ b/website/app/components/experience/ExperienceContent.tsx
@@ -7,14 +7,28 @@ import styles from "./Experience.module.css";
 function ReadingArrow() {
   return <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><path d="m9 5 7 7-7 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>;
 }
+/** The record line under an entry title: who it was with (or the paper it produced), then when. */
+function entryRecord(entry: ShowcaseEntry) {
+  const context = entry.categoryId === "01" ? entry.organization
+    : entry.categoryId === "03" ? entry.detailTitle
+    : entry.metadata.position;
+  return [context, entry.metadata.dates];
+}
 function ExperienceEntry({ entry }: { entry: ShowcaseEntry }) {
   return (
     <article className={styles.entry} id={entry.slug} data-experience-entry={entry.id}>
-      <h3 className={styles.entryTitle}>{entry.listingTitle}</h3>
-      <p className={styles.summary} data-experience-summary>{entry.categoryId === "01" ? <InlineMarkdown text={entry.summary} /> : entry.summary}</p>
-      <Link className={styles.readMore} href={entry.detailPath} aria-label={`Read more about ${entry.pageTitle}`}>
-        {entry.readMoreLabel}<ReadingArrow />
-      </Link>
+      <div className={styles.entryHead}>
+        <h3 className={styles.entryTitle}>{entry.listingTitle}</h3>
+        <p className={styles.entryMeta} data-experience-record>
+          {entryRecord(entry).map((line) => <span key={line}>{line}</span>)}
+        </p>
+      </div>
+      <div className={styles.entryBody}>
+        <p className={styles.summary} data-experience-summary>{entry.categoryId === "01" ? <InlineMarkdown text={entry.summary} /> : entry.summary}</p>
+        <Link className={styles.readMore} href={entry.detailPath} aria-label={`Read more about ${entry.pageTitle}`}>
+          {entry.readMoreLabel}<ReadingArrow />
+        </Link>
+      </div>
     </article>
   );
 }
diff --git a/website/app/components/experience/ExperienceDetails.tsx b/website/app/components/experience/ExperienceDetails.tsx
index 6678380..1eece92 100644
--- a/website/app/components/experience/ExperienceDetails.tsx
+++ b/website/app/components/experience/ExperienceDetails.tsx
@@ -1,6 +1,6 @@
-import { architectureFlows } from "../../lib/content/architecture-flows";
+import { architectureDiagrams } from "../../lib/content/architecture-diagrams";
 import type { ShowcaseEntry } from "../../lib/content/experience-showcase";
-import { ArchitectureFlow } from "./ArchitectureFlow";
+import { LogicDiagram } from "./LogicDiagram";
 import { InlineMarkdown } from "../research/ResearchInline";
 import styles from "./Experience.module.css";
 
@@ -8,7 +8,7 @@ export function ExperienceMetadata({ entry }: { entry: ShowcaseEntry }) {
   return (
     <dl className={styles.metadata} data-experience-metadata>
       <div><dt>Organization</dt><dd>{entry.institution}</dd></div>
-      <div className={styles.position}><dt>Position</dt><dd>{entry.metadata.position}</dd></div>
+      <div><dt>Position</dt><dd>{entry.metadata.position}</dd></div>
       <div><dt>Location</dt><dd>{entry.metadata.location}</dd></div>
       <div><dt>Dates</dt><dd>{entry.metadata.dates}</dd></div>
     </dl>
@@ -25,14 +25,18 @@ export function ExperienceDisclosure({ entry }: { entry: ShowcaseEntry }) {
   );
 }
 
+/** The project's logic architecture, shown under the record strip as the article's visual abstract. */
+export function ExperienceDiagram({ entry }: { entry: ShowcaseEntry }) {
+  const diagram = architectureDiagrams[entry.id];
+  return diagram ? <LogicDiagram diagram={diagram} /> : null;
+}
+
 export function ArchitecturalContext({ entry }: { entry: ShowcaseEntry }) {
   if (!entry.architecturalContext) return null;
-  const flow = architectureFlows[entry.id];
   return (
     <section className={styles.architecturalContext} aria-labelledby="architectural-context" data-architectural-context>
       <h2 id="architectural-context" tabIndex={-1}>{entry.architecturalContext.title}</h2>
       {entry.architecturalContext.text.split(/\n+/u).map((text, index) => <p key={index}><InlineMarkdown text={text} /></p>)}
-      {flow && <ArchitectureFlow flow={flow} />}
     </section>
   );
 }
@@ -41,16 +45,18 @@ export function KeyContributions({ entry }: { entry: ShowcaseEntry }) {
   return (
     <section className={styles.contributions} aria-labelledby="key-contributions" data-experience-contributions={entry.id}>
       <h2 id="key-contributions" tabIndex={-1}>{entry.contributionsLabel}</h2>
-      <ul>{[...entry.keyContributions, ...entry.notes].map((text, index) => {
+      <ol>{[...entry.keyContributions, ...entry.notes].map((text, index) => {
         const detail = entry.keyContributionDetails?.[String(index)];
         const DetailList = detail?.ordered ? "ol" : "ul";
         return <li key={index} data-contribution-item={index}>
-          {entry.categoryId === "01" ? <InlineMarkdown text={text} /> : text}
-          {detail && <DetailList className={styles.contributionDetails} data-contribution-details={index}>
-            {detail.items.map((item, childIndex) => <li key={childIndex} data-contribution-detail={childIndex}><InlineMarkdown text={item} /></li>)}
-          </DetailList>}
+          <div>
+            {entry.categoryId === "01" ? <InlineMarkdown text={text} /> : text}
+            {detail && <DetailList className={styles.contributionDetails} data-contribution-details={index}>
+              {detail.items.map((item, childIndex) => <li key={childIndex} data-contribution-detail={childIndex}><InlineMarkdown text={item} /></li>)}
+            </DetailList>}
+          </div>
         </li>;
-      })}</ul>
+      })}</ol>
     </section>
   );
 }
diff --git a/website/app/components/experience/LogicDiagram.module.css b/website/app/components/experience/LogicDiagram.module.css
new file mode 100644
index 0000000..de75dc4
--- /dev/null
+++ b/website/app/components/experience/LogicDiagram.module.css
@@ -0,0 +1,363 @@
+.diagram {
+  --line: rgba(11, 11, 11, 0.42);
+  --diagram-gap: clamp(28px, 4.6cqi, 44px);
+  --arrow: 6px;
+
+  container: diagram / inline-size;
+  margin: 72px 0 0;
+  padding-top: 18px;
+  border-top: 1px solid var(--rule-strong);
+}
+
+.label {
+  margin: 0 0 32px;
+  color: var(--muted);
+  font-family: var(--font-text);
+  font-size: var(--type-label);
+  line-height: var(--label-leading);
+}
+
+.canvas {
+  display: grid;
+  align-items: stretch;
+  font-family: var(--font-text);
+}
+
+/* Stages are transparent wrappers on the grid; their children carry positions. */
+.stage {
+  display: contents;
+}
+
+.stageLabel {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin: 0 0 18px;
+  padding-top: 10px;
+  border-top: 1px solid var(--rule-medium);
+  color: var(--ink);
+  font-size: var(--type-label);
+  line-height: var(--label-leading);
+}
+
+.stageLabel::before {
+  position: absolute;
+  top: -5px;
+  left: 0;
+  width: 2px;
+  height: 9px;
+  background: var(--accent);
+  content: "";
+}
+
+.stageIndex {
+  color: var(--muted);
+  font-family: var(--font-prose);
+  font-size: var(--type-index);
+  font-variant-numeric: tabular-nums;
+}
+
+.cell {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: center;
+  padding: 6px 0;
+}
+
+.node {
+  display: grid;
+  flex: 1 1 auto;
+  align-content: center;
+  gap: 4px;
+  min-width: 0;
+  padding: 12px 14px 13px;
+  border: 1px solid var(--rule-medium);
+  background: var(--panel);
+}
+
+.cell[data-single] .node {
+  flex: 0 0 auto;
+}
+
+.tag {
+  color: var(--muted);
+  font-family: var(--font-prose);
+  font-size: var(--type-index);
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+}
+
+.nodeTitle {
+  color: var(--ink);
+  font-size: var(--type-interface);
+  font-weight: 500;
+  line-height: 1.35;
+  letter-spacing: -0.003em;
+  text-wrap: balance;
+}
+
+.nodeDetail {
+  color: var(--supporting-ink);
+  font-size: var(--type-label);
+  line-height: var(--label-leading);
+  text-wrap: pretty;
+}
+
+/* The decisive mechanism of each system is set in ink. */
+.emphasis {
+  border-color: var(--ink);
+  background: var(--ink);
+}
+
+.emphasis .nodeTitle {
+  color: var(--page);
+}
+
+.emphasis .tag,
+.emphasis .nodeDetail {
+  color: rgba(247, 246, 245, 0.68);
+}
+
+/* Connectors: one piece per lane in each connector column. */
+.link {
+  position: relative;
+  min-width: 0;
+  color: var(--line);
+  pointer-events: none;
+}
+
+.link::before {
+  position: absolute;
+  top: 50%;
+  border-top: 1px solid currentColor;
+  content: "";
+}
+
+.straight::before,
+.branchOut::before,
+.join::before {
+  right: calc(var(--arrow) - 1px);
+}
+
+.straight::before { left: 0; }
+.stem::before,
+.branchIn::before { left: 0; width: 50%; }
+.branchOut::before,
+.join::before { left: 50%; }
+
+.straight::after,
+.branchOut::after,
+.join::after {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: var(--arrow);
+  height: 7px;
+  margin-top: -3px;
+  background: currentColor;
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+  content: "";
+}
+
+.bus {
+  position: absolute;
+  left: 50%;
+  border-left: 1px solid currentColor;
+}
+
+[data-position="first"] > .bus { top: 50%; bottom: 0; }
+[data-position="middle"] > .bus { top: 0; bottom: 0; }
+[data-position="last"] > .bus { top: 0; height: calc(50% + 1px); }
+
+/* Feedback loop: legs drop from both endpoint nodes into a return rule. */
+.cell[data-loop] {
+  overflow: hidden;
+  overflow: clip;
+}
+
+.cell[data-loop] .node {
+  position: relative;
+}
+
+.cell[data-loop] .node::after {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  height: 100vh;
+  border-left: 1px solid var(--accent);
+  content: "";
+}
+
+.cell[data-loop="target"] .node::before {
+  position: absolute;
+  z-index: 1;
+  top: calc(100% + 1px);
+  left: calc(50% - 3px);
+  width: 7px;
+  height: var(--arrow);
+  background: var(--accent);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+  content: "";
+}
+
+.loop {
+  height: 28px;
+  border-bottom: 1px solid var(--accent);
+}
+
+.loopStart {
+  margin-left: 50%;
+  border-left: 1px solid var(--accent);
+}
+
+.loopEnd {
+  width: calc(50% + 1px);
+  border-right: 1px solid var(--accent);
+}
+
+.loopLabel {
+  margin: 0;
+  padding: 10px 12px 0;
+  color: var(--accent);
+  font-size: var(--type-label);
+  line-height: var(--label-leading);
+  text-align: center;
+  text-wrap: balance;
+}
+
+.loopReturn {
+  display: none;
+}
+
+.caption {
+  max-width: var(--reading-measure);
+  margin-top: 36px;
+  color: var(--supporting-ink);
+  font-family: var(--font-prose);
+  font-size: var(--type-reading);
+  line-height: var(--reading-leading);
+  text-wrap: pretty;
+}
+
+/* Narrow: the same markup becomes a vertical sequence. */
+@container diagram (width < 640px) {
+  .canvas {
+    display: block;
+  }
+
+  .stage {
+    position: relative;
+    display: block;
+  }
+
+  .stage:not([data-stage="1"]) {
+    padding-top: 40px;
+  }
+
+  .stage:not([data-stage="1"])::before {
+    position: absolute;
+    top: 8px;
+    left: 20px;
+    height: 24px;
+    border-left: 1px solid var(--line);
+    content: "";
+  }
+
+  .stage:not([data-stage="1"])::after {
+    position: absolute;
+    top: 26px;
+    left: 17px;
+    width: 7px;
+    height: var(--arrow);
+    background: var(--line);
+    clip-path: polygon(0 0, 100% 0, 50% 100%);
+    content: "";
+  }
+
+  .stageLabel {
+    margin-bottom: 12px;
+  }
+
+  .cell {
+    padding: 0;
+  }
+
+  .cell + .cell {
+    margin-top: 8px;
+  }
+
+  .link,
+  .loop,
+  .cell[data-loop] .node::before,
+  .cell[data-loop] .node::after {
+    display: none;
+  }
+
+  .loopLabel {
+    margin-top: 28px;
+    padding: 2px 0 2px 14px;
+    border-left: 1px solid var(--accent);
+    text-align: left;
+  }
+
+  .loopReturn {
+    display: inline;
+  }
+
+  .caption {
+    margin-top: 28px;
+  }
+}
+
+/* Mid widths: parallel nodes of a stage sit side by side. */
+@container diagram (480px <= width < 640px) {
+  .stage {
+    display: grid;
+    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .stageLabel {
+    grid-column: 1 / -1 !important;
+    grid-row: auto !important;
+  }
+
+  .stage > .cell {
+    grid-column: auto !important;
+    grid-row: auto !important;
+  }
+
+  .stage > .cell + .cell {
+    margin-top: 0;
+  }
+
+  .cell .node {
+    flex: 1 1 auto;
+  }
+}
+
+@media (width < 768px) {
+  .diagram {
+    margin-top: 56px;
+  }
+}
+
+@media (forced-colors: active) {
+  .emphasis {
+    border-color: CanvasText;
+    background: Canvas;
+  }
+
+  .emphasis .nodeTitle,
+  .emphasis .tag,
+  .emphasis .nodeDetail {
+    color: CanvasText;
+  }
+
+  .link::after,
+  .cell[data-loop="target"] .node::before {
+    background: CanvasText;
+  }
+}
diff --git a/website/app/components/experience/LogicDiagram.tsx b/website/app/components/experience/LogicDiagram.tsx
new file mode 100644
index 0000000..948c25e
--- /dev/null
+++ b/website/app/components/experience/LogicDiagram.tsx
@@ -0,0 +1,94 @@
+import { Fragment, type CSSProperties } from "react";
+import type { ArchitectureDiagram } from "../../lib/content/architecture-diagrams";
+import { InlineMarkdown } from "../research/ResearchInline";
+import styles from "./LogicDiagram.module.css";
+
+const pad = (value: number) => String(value).padStart(2, "0");
+type Position = "first" | "middle" | "last";
+const position = (index: number, count: number): Position => index === 0 ? "first" : index === count - 1 ? "last" : "middle";
+
+/**
+ * A left-to-right logic diagram laid out on one CSS grid: node columns alternate
+ * with connector columns, and every multi-node stage shares the same lane rows,
+ * so arrows, fan-out buses and the feedback loop align without measuring.
+ * Below 640px of width the same markup reflows into a vertical sequence.
+ */
+export function LogicDiagram({ diagram }: { diagram: ArchitectureDiagram }) {
+  const { stages, loop } = diagram;
+  const lanes = Math.max(...stages.map((stage) => stage.nodes.length));
+  const nodeColumn = (stage: number) => 2 * stage + 1;
+  const linkColumn = (stage: number) => 2 * stage + 2;
+  const allLanes = `2 / span ${lanes}`;
+  const canvas: CSSProperties = {
+    gridTemplateColumns: stages.map((_, index) => index < stages.length - 1 ? "minmax(0, 1fr) var(--diagram-gap)" : "minmax(0, 1fr)").join(" "),
+    gridTemplateRows: `auto repeat(${lanes}, auto)${loop ? " auto auto" : ""}`,
+  };
+
+  function links(stage: number) {
+    const from = stages[stage].nodes.length;
+    const to = stages[stage + 1].nodes.length;
+    const gridColumn = linkColumn(stage);
+    const span = (kind: string) => <span key={kind} className={`${styles.link} ${styles[kind]}`} style={{ gridColumn, gridRow: allLanes }} />;
+    const lane = (kind: string, index: number) => (
+      <span key={`${kind}-${index}`} className={`${styles.link} ${styles[kind]}`} data-position={position(index, lanes)} style={{ gridColumn, gridRow: index + 2 }}>
+        {kind !== "straight" && <i className={styles.bus} />}
+      </span>
+    );
+    const rows = Array.from({ length: lanes }, (_, index) => index);
+    if (from === to) return from === 1 ? [span("straight")] : rows.map((index) => lane("straight", index));
+    if (from === 1) return [span("stem"), ...rows.map((index) => lane("branchOut", index))];
+    return [...rows.map((index) => lane("branchIn", index)), span("join")];
+  }
+
+  function loopEnd(stage: number, node: number) {
+    if (!loop || node !== stages[stage].nodes.length - 1) return undefined;
+    return stage === loop.from ? "source" : stage === loop.to ? "target" : undefined;
+  }
+
+  return (
+    <figure className={styles.diagram} data-logic-diagram data-architecture-flow>
+      <p className={styles.label}>{diagram.label}</p>
+      <div className={styles.canvas} style={canvas}>
+        {stages.map((stage, stageIndex) => {
+          const single = stage.nodes.length === 1;
+          return (
+            <Fragment key={stage.label}>
+              <div className={styles.stage} data-stage={stageIndex + 1} style={{ "--columns": stage.nodes.length > 3 ? 2 : stage.nodes.length } as CSSProperties}>
+                <p className={styles.stageLabel} style={{ gridColumn: nodeColumn(stageIndex), gridRow: 1 }}>
+                  <span className={styles.stageIndex} aria-hidden="true">{pad(stageIndex + 1)}</span>
+                  {stage.label}
+                </p>
+                {stage.nodes.map((node, nodeIndex) => (
+                  <div
+                    className={styles.cell}
+                    key={node.title}
+                    data-single={single && lanes > 1 ? "" : undefined}
+                    data-loop={loopEnd(stageIndex, nodeIndex)}
+                    style={{ gridColumn: nodeColumn(stageIndex), gridRow: single ? allLanes : nodeIndex + 2 }}
+                  >
+                    <div className={stage.emphasis ? `${styles.node} ${styles.emphasis}` : styles.node}>
+                      {node.tag && <span className={styles.tag}>{node.tag}</span>}
+                      <span className={styles.nodeTitle}>{node.title}</span>
+                      {node.detail && <span className={styles.nodeDetail}><InlineMarkdown text={node.detail} /></span>}
+                    </div>
+                  </div>
+                ))}
+              </div>
+              {stageIndex < stages.length - 1 && links(stageIndex)}
+            </Fragment>
+          );
+        })}
+        {loop && <>
+          <span className={`${styles.loop} ${styles.loopStart}`} style={{ gridColumn: nodeColumn(loop.to), gridRow: lanes + 2 }} />
+          <span className={`${styles.loop} ${styles.loopSpan}`} style={{ gridColumn: `${nodeColumn(loop.to) + 1} / ${nodeColumn(loop.from)}`, gridRow: lanes + 2 }} />
+          <span className={`${styles.loop} ${styles.loopEnd}`} style={{ gridColumn: nodeColumn(loop.from), gridRow: lanes + 2 }} />
+          <p className={styles.loopLabel} style={{ gridColumn: `${nodeColumn(loop.to)} / ${nodeColumn(loop.from) + 1}`, gridRow: lanes + 3 }}>
+            <span className={styles.loopReturn}>Returns to {pad(loop.to + 1)} {stages[loop.to].label}: </span>
+            {loop.label}
+          </p>
+        </>}
+      </div>
+      <figcaption className={styles.caption}>{diagram.caption}</figcaption>
+    </figure>
+  );
+}
diff --git a/website/app/components/research/ResearchArticle.tsx b/website/app/components/research/ResearchArticle.tsx
index 7140fbf..4163a0f 100644
--- a/website/app/components/research/ResearchArticle.tsx
+++ b/website/app/components/research/ResearchArticle.tsx
@@ -4,7 +4,7 @@ import { cache } from "react";
 import sharp from "sharp";
 import { SiteShell } from "../SiteShell";
 import { ArticleReadingLayout } from "../article/ArticleReadingLayout";
-import { ArchitecturalContext, ExperienceDisclosure, ExperienceMetadata, KeyContributions } from "../experience/ExperienceDetails";
+import { ArchitecturalContext, ExperienceDiagram, ExperienceDisclosure, ExperienceMetadata, KeyContributions } from "../experience/ExperienceDetails";
 import type { ShowcaseEntry } from "../../lib/content/experience-showcase";
 import type { ResearchArticleContent } from "../../lib/content/research-markdown";
 import { buildArticleHeadingMap, formatArticleHeadings, linkArticleSectionReferences } from "../../lib/content/article-headings";
@@ -88,6 +88,7 @@ export function ResearchArticle({ project, active, returnPath, returnLabel, titl
           {showcase ? <ExperienceMetadata entry={showcase} /> : !project.repositoryUrl && frontMatterCount > 0 && <div className={styles.frontMatter}>{renderedBlocks.slice(0, frontMatterCount)}</div>}
           {showcase && <ExperienceDisclosure entry={showcase} />}
           {project.repositoryUrl && <p className={styles.sourceLinks}><a href={project.repositoryUrl}>GitHub</a><a href={project.sourceUrl}>Full Manuscript</a></p>}
+          {showcase && <ExperienceDiagram entry={showcase} />}
         </header>
 
         <ArticleReadingLayout
diff --git a/website/app/coursework/coursework.module.css b/website/app/coursework/coursework.module.css
index 8650787..2f7c95c 100644
--- a/website/app/coursework/coursework.module.css
+++ b/website/app/coursework/coursework.module.css
@@ -7,16 +7,16 @@
 }
 
 .intro {
-  max-width: var(--reading-measure);
-  margin-bottom: 64px;
+  margin-bottom: 80px;
 }
 
 .intro h1 {
+  max-width: 80%;
   margin: 0;
   font-size: var(--type-title);
   font-weight: 400;
   line-height: var(--title-leading);
-  letter-spacing: -0.02em;
+  letter-spacing: var(--title-tracking);
 }
 
 .sectionBody h2 {
@@ -24,15 +24,15 @@
   font-size: var(--type-heading);
   font-weight: 400;
   line-height: var(--heading-leading);
-  letter-spacing: -0.01em;
+  letter-spacing: var(--heading-tracking);
 }
 
 .section {
   display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-column: 1 / -1;
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+  grid-column: 1 / span 11;
   align-items: start;
-  padding: 80px 0 96px;
+  padding: 72px 0 104px;
   border-top: 1px solid var(--rule-strong);
   scroll-margin-top: 32px;
 }
@@ -43,7 +43,7 @@
 
 .sectionIndex {
   grid-column: 1;
-  padding-top: 1px;
+  padding-top: 0.5rem;
   color: var(--muted);
   font-family: var(--font-prose);
   font-size: var(--type-index);
@@ -54,8 +54,7 @@
 }
 
 .sectionBody {
-  grid-column: 2 / span 8;
-  max-width: var(--reading-measure);
+  grid-column: 2 / span 10;
   min-width: 0;
 }
 
@@ -78,9 +77,38 @@
   margin-top: 8px;
 }
 
+/* Subject on axis A, its courses in two columns on axis B. */
+@media (min-width: 1200px) {
+  .sectionBody {
+    display: grid;
+    grid-template-columns: var(--hang-columns);
+    align-items: start;
+  }
+
+  .sectionBody h2 {
+    margin-bottom: 0;
+    padding-right: var(--hang-gap);
+  }
+
+  .courseList {
+    columns: 2;
+    column-gap: var(--hang-gap);
+  }
+
+  .courseList li {
+    padding-bottom: 8px;
+    break-inside: avoid;
+  }
+
+  .courseList li + li {
+    margin-top: 0;
+  }
+}
+
 @media (768px <= width < 1024px) {
   .section {
     grid-template-columns: repeat(9, minmax(0, 1fr));
+    grid-column: 1 / -1;
   }
 
   .sectionBody {
diff --git a/website/app/coursework/page.tsx b/website/app/coursework/page.tsx
index 7acb4d8..e053c44 100644
--- a/website/app/coursework/page.tsx
+++ b/website/app/coursework/page.tsx
@@ -20,7 +20,7 @@ const sectionIds = [
 
 export default function CourseworkPage() {
   return (
-    <SiteShell active="about" parent={{ href: "/#education", label: "Education" }} frameClassName={styles.frame}>
+    <SiteShell active="about" parent={{ href: "/#education", label: "Education" }} frameClassName={styles.frame} guides="index">
       <header className={styles.intro}>
         <h1>Selected Coursework</h1>
         <SectionDirectory label="Coursework sections" items={courseworkGroups.map((group, index) => ({
diff --git a/website/app/education/page.tsx b/website/app/education/page.tsx
index 6767bbe..2cc4631 100644
--- a/website/app/education/page.tsx
+++ b/website/app/education/page.tsx
@@ -15,7 +15,7 @@ export const metadata: Metadata = createPageMetadata({
 
 export default function EducationAlias() {
   return (
-    <SiteShell active="about" frameClassName={styles.homeFrame}>
+    <SiteShell active="about" frameClassName={styles.homeFrame} guides="index">
       <AboutContent />
     </SiteShell>
   );
diff --git a/website/app/experience/[slug]/page.tsx b/website/app/experience/[slug]/page.tsx
index 3908226..ec151ec 100644
--- a/website/app/experience/[slug]/page.tsx
+++ b/website/app/experience/[slug]/page.tsx
@@ -26,7 +26,7 @@ export default async function ExperienceDetailPage({ params }: PageProps) {
   if (!entry || entry.articlePath) notFound();
   const returnPath = `/experience/#${entry.slug}`;
   return (
-    <SiteShell active="experience" parent={{ href: returnPath, label: "Experience" }} frameClassName={styles.frame}>
+    <SiteShell active="experience" parent={{ href: returnPath, label: "Experience" }} frameClassName={styles.frame} guides="index">
       <article className={styles.detailPage} aria-labelledby="experience-title">
         <header className={`page-intro plain-page-intro ${styles.detailHeader}`}>
           <h1 id="experience-title" tabIndex={-1}>{entry.headline}</h1>
diff --git a/website/app/experience/page.tsx b/website/app/experience/page.tsx
index 6192b6a..4044ed7 100644
--- a/website/app/experience/page.tsx
+++ b/website/app/experience/page.tsx
@@ -10,5 +10,5 @@ export const metadata: Metadata = createPageMetadata({
   path: "/experience/",
 });
 export default function ExperiencePage() {
-  return <SiteShell active="experience" frameClassName={styles.frame}><ExperienceContent /></SiteShell>;
+  return <SiteShell active="experience" frameClassName={styles.frame} guides="index"><ExperienceContent /></SiteShell>;
 }
diff --git a/website/app/globals.css b/website/app/globals.css
index 3978efb..fe85227 100644
--- a/website/app/globals.css
+++ b/website/app/globals.css
@@ -6,26 +6,37 @@
   --supporting-ink: #5c5c58;
   --link-rule: #a6a6a1;
   --rule: rgba(0, 0, 0, 0.06);
+  --rule-medium: rgba(0, 0, 0, 0.12);
   --rule-strong: rgba(0, 0, 0, 0.24);
+  --panel: #fcfbfa;
   --accent: #2200ff;
   --dither: #070707;
-  --type-title: 2rem;
-  --type-heading: 1.25rem;
-  --type-subheading: 0.9375rem;
-  --type-index: 0.625rem;
-  --type-reading: 0.9375rem;
-  --type-label: 0.9375rem;
+  /* One size per role, everywhere: title 36, heading 24, subheading 18,
+     reading 16, interface 15, label 13, index 11. */
+  --type-title: 2.25rem;
+  --type-heading: 1.5rem;
+  --type-subheading: 1.125rem;
+  --type-index: 0.6875rem;
+  --type-reading: 1rem;
+  --type-label: 0.8125rem;
   --type-interface: 0.9375rem;
   --type-action: var(--type-interface);
   --type-math: 1.15em;
-  --reading-measure: 560px;
+  --reading-measure: 40rem;
   --rail-min-width: calc(5 * var(--type-interface) + 13px + clamp(20px, 2vw, 24px) + 22px + 10px);
-  --title-leading: 1.15;
-  --heading-leading: 1.3;
-  --subheading-leading: 1.5;
-  --reading-leading: 1.7;
+  --title-leading: 1.12;
+  --heading-leading: 1.25;
+  --subheading-leading: 1.4;
+  --reading-leading: 1.65;
   --interface-leading: 1.5;
-  --label-leading: 1.5;
+  --label-leading: 1.45;
+  --title-tracking: -0.022em;
+  --heading-tracking: -0.015em;
+  --subheading-tracking: -0.006em;
+  /* Hanging layout: titles on axis A (3 of 10 columns), prose on axis B (7 of 10).
+     The gap belongs to the title cell so axis B lands exactly on a grid line. */
+  --hang-columns: minmax(0, 3fr) minmax(0, 7fr);
+  --hang-gap: 40px;
   --link-underline-offset: 0.18em;
   --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
   --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
@@ -174,7 +185,17 @@ button:focus-visible {
 }
 
 .structural-guide-reading-measure {
-  grid-column: 13;
+  grid-column: 12;
+}
+
+.structural-grid[data-guides="index"] .structural-guide-reading-measure {
+  grid-column: 8;
+}
+
+@media (width < 1200px) {
+  .structural-grid[data-guides="index"] .structural-guide-reading-measure {
+    display: none;
+  }
 }
 
 .structural-guide-reading-end {
@@ -191,8 +212,9 @@ button:focus-visible {
   height: 220px;
 }
 
+/* Stops above the first line of content, which spans this column on every page. */
 .structural-guide-reading-measure::before {
-  height: 560px;
+  height: 96px;
 }
 
 .structural-guide-tick {
@@ -396,23 +418,18 @@ button:focus-visible {
 }
 
 .page-intro {
-  max-width: var(--reading-measure);
   margin: 0 0 72px;
 }
 
 .page-intro h1 {
+  max-width: 80%;
   margin: 0;
   color: var(--ink);
-  font-weight: 500;
-  letter-spacing: -0.02em;
-  text-wrap: balance;
-}
-
-.page-intro h1 {
-  max-width: 920px;
   font-size: var(--type-title);
+  font-weight: 400;
   line-height: var(--title-leading);
-  letter-spacing: -0.02em;
+  letter-spacing: var(--title-tracking);
+  text-wrap: balance;
 }
 
 .section-kicker {
@@ -552,7 +569,7 @@ button:focus-visible {
   }
 
   .structural-guide-reading-measure {
-    grid-column: 10;
+    display: none;
   }
 
   .structural-guide-reading-end {
@@ -581,7 +598,8 @@ button:focus-visible {
 
 @media (width < 768px) {
   :root {
-    --type-title: 1.75rem;
+    --type-title: 1.875rem;
+    --type-heading: 1.375rem;
   }
 
   html {
diff --git a/website/app/home.module.css b/website/app/home.module.css
index 5f64a1b..99e6b57 100644
--- a/website/app/home.module.css
+++ b/website/app/home.module.css
@@ -7,24 +7,24 @@
 }
 
 .homeFrame .profileSection {
-  grid-column: 1 / -1;
+  grid-column: 1 / span 11;
   padding-top: 176px;
 }
 
 .identity,
 .section {
   display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-template-columns: repeat(11, minmax(0, 1fr));
   align-items: start;
 }
 
 .identity {
-  padding-bottom: 96px;
+  padding-bottom: 112px;
 }
 
 .section {
   border-top: 1px solid var(--rule-strong);
-  padding: 80px 0 96px;
+  padding: 72px 0 104px;
 }
 
 .section:last-child {
@@ -32,16 +32,15 @@
 }
 
 .sectionBody {
-  grid-column: 2 / span 8;
+  grid-column: 2 / span 10;
   width: 100%;
-  max-width: var(--reading-measure);
   min-width: 0;
 }
 
 .sectionIndex {
   grid-column: 1;
   margin: 0;
-  padding-top: 1px;
+  padding-top: 0.5rem;
   color: var(--muted);
   font-family: var(--font-prose);
   font-size: var(--type-index);
@@ -56,7 +55,7 @@
   margin: 0;
   font-size: var(--type-title);
   font-weight: 400;
-  letter-spacing: -0.02em;
+  letter-spacing: var(--title-tracking);
   line-height: var(--title-leading);
   text-wrap: balance;
 }
@@ -66,7 +65,8 @@
 }
 
 .biographyCopy {
-  margin-top: 24px;
+  max-width: var(--reading-measure);
+  margin-top: 32px;
   font-family: var(--font-prose);
   font-size: var(--type-reading);
   line-height: var(--reading-leading);
@@ -78,33 +78,45 @@
 }
 
 .biographyCopy p + p {
-  margin-top: 1.5rem;
+  margin-top: 1.25rem;
 }
 
 .sectionTitle {
-  margin: 0 0 32px;
+  margin: 0 0 40px;
   font-size: var(--type-heading);
   font-weight: 400;
   line-height: var(--heading-leading);
-  letter-spacing: -0.01em;
+  letter-spacing: var(--heading-tracking);
 }
 
-.researchEntry + .researchEntry {
-  margin-top: 56px;
+/* A hanging row: the item title on axis A, its prose on axis B. */
+.row {
+  padding: 28px 0 32px;
+  border-top: 1px solid var(--rule-medium);
+}
+
+.row:last-child {
+  padding-bottom: 0;
 }
 
-.researchTitle,
+.rowTitle,
 .institution {
   margin: 0;
+  color: var(--ink);
   font-size: var(--type-subheading);
   font-weight: 500;
-  letter-spacing: 0;
+  letter-spacing: var(--subheading-tracking);
   line-height: var(--subheading-leading);
-  text-wrap: balance;
+  text-wrap: pretty;
+}
+
+.rowBody {
+  min-width: 0;
+  max-width: var(--reading-measure);
 }
 
 .researchSummary {
-  margin: 8px 0 0;
+  margin: 0;
   color: inherit;
   font-family: var(--font-prose);
   font-size: var(--type-reading);
@@ -112,44 +124,23 @@
   text-wrap: pretty;
 }
 
-.researchTitle {
-  text-wrap: pretty;
-}
-
-.contactStrip a {
-  max-width: 100%;
-  text-decoration: underline;
-  text-decoration-color: var(--link-rule);
-  text-decoration-thickness: 1px;
-  text-underline-offset: var(--link-underline-offset);
-  text-decoration-skip-ink: auto;
-  transition: color 180ms var(--ease-out), text-decoration-color 180ms var(--ease-out);
-}
-
-.contactStrip a:focus-visible,
-.contactStrip a:active {
-  color: var(--accent);
-  text-decoration-color: var(--accent);
-}
-
-.educationList {
-  margin-top: 8px;
-}
-
 .educationList :global(.education-entry) {
   padding: 0;
   border-bottom: 0;
 }
 
 .educationList :global(.education-entry) + :global(.education-entry) {
-  margin-top: 28px;
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid var(--rule);
 }
 
 .educationList :global(.education-degree) {
-  margin-top: 0;
-  font-size: var(--type-reading);
+  margin: 0 0 2px;
+  font-family: var(--font-text);
+  font-size: var(--type-interface);
   font-weight: 500;
-  line-height: var(--reading-leading);
+  line-height: var(--interface-leading);
 }
 
 .educationList :global(.entry-subtitle),
@@ -167,7 +158,7 @@
 }
 
 .coursework {
-  margin-top: 28px;
+  margin-top: 20px;
   scroll-margin-top: 32px;
 }
 
@@ -176,7 +167,7 @@
   width: fit-content;
   align-items: center;
   min-height: 44px;
-  margin-top: 4px;
+  margin-top: 8px;
   gap: 6px;
   font-size: var(--type-action);
   font-weight: 500;
@@ -185,12 +176,14 @@
   text-decoration-color: var(--link-rule);
   text-underline-offset: var(--link-underline-offset);
   cursor: pointer;
+  transition: color 180ms var(--ease-out), text-decoration-color 180ms var(--ease-out);
 }
 
 .readMore svg {
   width: 14px;
   height: 14px;
   flex-shrink: 0;
+  transition: transform 180ms var(--ease-out);
 }
 
 .readMore:focus-visible {
@@ -210,11 +203,11 @@
   display: grid;
   min-width: 0;
   align-content: start;
-  gap: 4px;
+  gap: 6px;
 }
 
 .contactStrip li + li {
-  padding-left: 20px;
+  padding-left: 24px;
   border-left: 1px solid var(--rule);
 }
 
@@ -222,16 +215,29 @@
   color: var(--muted);
   font-size: var(--type-label);
   line-height: var(--label-leading);
-  letter-spacing: 0.015em;
 }
 
 .contactStrip a {
   display: inline-flex;
   align-items: center;
-  min-height: 28px;
   width: fit-content;
+  max-width: 100%;
+  min-height: 28px;
+  font-family: var(--font-prose);
   font-size: var(--type-reading);
+  text-decoration: underline;
+  text-decoration-color: var(--link-rule);
+  text-decoration-thickness: 1px;
+  text-underline-offset: var(--link-underline-offset);
+  text-decoration-skip-ink: auto;
   overflow-wrap: anywhere;
+  transition: color 180ms var(--ease-out), text-decoration-color 180ms var(--ease-out);
+}
+
+.contactStrip a:focus-visible,
+.contactStrip a:active {
+  color: var(--accent);
+  text-decoration-color: var(--accent);
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -240,6 +246,10 @@
     color: var(--accent);
     text-decoration-color: var(--accent);
   }
+
+  .readMore:hover svg {
+    transform: translateX(2px);
+  }
 }
 
 @media (pointer: coarse) {
@@ -248,7 +258,42 @@
   }
 }
 
+@media (min-width: 1200px) {
+  .biographyCopy {
+    max-width: none;
+    margin-left: 30%;
+  }
+
+  .row {
+    display: grid;
+    grid-template-columns: var(--hang-columns);
+    align-items: start;
+  }
+
+  .rowTitle,
+  .institution {
+    padding-right: var(--hang-gap);
+  }
+
+  .rowBody {
+    max-width: none;
+  }
+
+  .contactStrip {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr);
+  }
+
+  .contactStrip li + li {
+    padding-left: 0;
+    border-left: 0;
+  }
+}
+
 @media (768px <= width < 1024px) {
+  .homeFrame .profileSection {
+    grid-column: 1 / -1;
+  }
+
   .identity,
   .section {
     grid-template-columns: repeat(9, minmax(0, 1fr));
@@ -259,6 +304,13 @@
   }
 }
 
+@media (width < 1200px) {
+  .rowTitle,
+  .institution {
+    margin-bottom: 10px;
+  }
+}
+
 @media (width < 768px) {
   .homeFrame .profileSection {
     padding-top: 88px;
@@ -270,11 +322,11 @@
   }
 
   .identity {
-    padding-bottom: 64px;
+    padding-bottom: 72px;
   }
 
   .section {
-    padding: 56px 0 64px;
+    padding: 56px 0 72px;
   }
 
   .sectionIndex {
@@ -286,26 +338,31 @@
   }
 
   .sectionTitle {
-    margin-bottom: 22px;
+    margin-bottom: 28px;
   }
 
+  .row {
+    padding: 24px 0 28px;
+  }
 }
 
 @media (max-width: 540px) {
   .contactStrip {
     grid-template-columns: 1fr;
-    gap: 24px;
+    gap: 20px;
   }
 
   .contactStrip li + li {
-    padding: 24px 0 0;
+    padding: 20px 0 0;
     border-top: 1px solid var(--rule);
     border-left: 0;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .contactStrip a {
+  .contactStrip a,
+  .readMore,
+  .readMore svg {
     transition: none;
   }
 }
diff --git a/website/app/lib/content/architecture-diagrams.ts b/website/app/lib/content/architecture-diagrams.ts
new file mode 100644
index 0000000..1817549
--- /dev/null
+++ b/website/app/lib/content/architecture-diagrams.ts
@@ -0,0 +1,213 @@
+// Logic architecture for each AI and legal article, keyed by Experience entry ID.
+// Each diagram restates the system or argument its manuscript describes:
+// stages run left to right, a stage holds one node or one node per lane, and an
+// optional loop marks the feedback path that returns to an earlier stage.
+// Node details accept the same inline TeX as the manuscripts.
+
+export type DiagramNode = { title: string; detail?: string; tag?: string };
+export type DiagramStage = { label: string; nodes: DiagramNode[]; emphasis?: boolean };
+export type DiagramLoop = { from: number; to: number; label: string };
+export type ArchitectureDiagram = {
+  label: string;
+  stages: DiagramStage[];
+  loop?: DiagramLoop;
+  caption: string;
+};
+
+const SYSTEM = "System architecture";
+const FRAMEWORK = "Analytical framework";
+
+export const architectureDiagrams: Readonly<Record<number, ArchitectureDiagram>> = {
+  1: {
+    label: SYSTEM,
+    stages: [
+      { label: "Intake", nodes: [{ title: "Expert submissions", detail: "300+ specialists and vendor queues; each task carries a risk prior $q_i$" }] },
+      {
+        label: "Allocate",
+        emphasis: true,
+        nodes: [
+          { tag: "Measure", title: "Reference audit", detail: "Random audits sampled by information per cost, $m_i / c_i$" },
+          { tag: "Correct", title: "Review allocation", detail: "Ranked by removable loss $\\Delta_i$ under capacity $H_j$" },
+        ],
+      },
+      {
+        label: "Decide",
+        nodes: [
+          { title: "Prediction-assisted estimate", detail: "Corrects the selection bias $\\operatorname{Cov}(\\pi, q) > 0$" },
+          { title: "Expert adjudication", detail: "Tiered review from Beta-Binomial reliability posteriors" },
+        ],
+      },
+      {
+        label: "Output",
+        nodes: [
+          { title: "Population quality", detail: "Bias-corrected quality inference" },
+          { title: "Post-training data", detail: "Accepted expert feedback" },
+        ],
+      },
+    ],
+    loop: { from: 2, to: 1, label: "Adjudications update reliability posteriors and review intensity" },
+    caption: "Measurement and correction run as separate decisions over the same submissions. Adjudications update reliability posteriors, acceptance criteria and review intensity.",
+  },
+  2: {
+    label: SYSTEM,
+    stages: [
+      { label: "Specify", nodes: [{ title: "Diagnostic task design", detail: "Decisive variables, evidence standards and acceptance criteria at business decision boundaries" }] },
+      {
+        label: "Generate",
+        nodes: [
+          { title: "Gaussian and vine copulas", detail: "Corporate fundamentals keep their joint dependence" },
+          { title: "Constrained projection", detail: "Accounting identities, ratio bounds and date order hold" },
+          { title: "CTGAN and TabDDPM", detail: "Mixed records pass business rules and margin $\\gamma/s$ checks" },
+          { title: "SDEs and Brownian bridges", detail: "Price and rate paths respect the filtration $\\mathcal{F}_s$" },
+        ],
+      },
+      { label: "Calibrate", emphasis: true, nodes: [{ title: "Batch Zero", detail: "Independent execution, reference solutions and five-level pairwise preferences" }] },
+      { label: "Scale", nodes: [{ title: "Batch One", detail: "Large-scale data construction for RLHF and DPO supervision" }] },
+    ],
+    loop: { from: 2, to: 0, label: "Failures and disagreements revise task specifications" },
+    caption: "Batch Zero gates each task family before large-scale data construction. Failures and disagreements revise task instructions, reference solutions and acceptance criteria.",
+  },
+  3: {
+    label: SYSTEM,
+    stages: [
+      { label: "Evidence", nodes: [{ title: "Model run", detail: "Final answer, visible reasoning, tool calls and intermediate outputs" }] },
+      {
+        label: "Review",
+        nodes: [
+          { tag: "Layer 1", title: "Code and rules", detail: "Verifiable answers, deliverables and tool permissions" },
+          { tag: "Layer 2", title: "LLM-as-a-Judge", detail: "Missing evidence, misapplied rules and reasoning gaps" },
+          { tag: "Layer 3", title: "Specialist scholars", detail: "Disputed domain judgments" },
+        ],
+      },
+      { label: "Verify", emphasis: true, nodes: [{ title: "Proof obligations", detail: "Dependency graph $\\Gamma_q \\vdash C_q$ locates the first unsupported step" }] },
+      {
+        label: "Record",
+        nodes: [
+          { title: "Correctness", detail: "Validity of the conclusion" },
+          { title: "Compliance", detail: "Task requirements and approved tools" },
+          { title: "Efficiency", detail: "Progress, repetition and failed assumptions" },
+        ],
+      },
+    ],
+    caption: "Three review layers read the answer, the visible reasoning and the execution evidence together, and correctness, compliance and efficiency are recorded apart.",
+  },
+  4: {
+    label: SYSTEM,
+    stages: [
+      { label: "Evidence", nodes: [{ title: "Versioned evidence", detail: "Reports, audited statements, disclosures and questionnaires with source records" }] },
+      { label: "Score", nodes: [{ title: "Rashomon scoring", detail: "Near-optimal models $\\mathcal{F}_\\alpha$ with SHAP attributions across the set" }] },
+      { label: "Bound", nodes: [{ title: "Ranking bounds", detail: "Support functions over the joint uncertainty set $\\Omega(E)$" }] },
+      { label: "Query", emphasis: true, nodes: [{ title: "Verification query", detail: "Largest guaranteed cut in worst-case regret per cost, $V(q)/c_q$" }] },
+    ],
+    loop: { from: 3, to: 0, label: "Each correction triggers rescoring and attribution updates" },
+    caption: "Minimax regret picks the next fact to verify, and each correction triggers rescoring and attribution updates through versioned evidence.",
+  },
+  8: {
+    label: FRAMEWORK,
+    stages: [
+      { label: "Task", nodes: [{ title: "Autonomous space task", detail: "Delayed spacecraft operations, orbital avoidance, debris capture, SETI" }] },
+      { label: "Test", emphasis: true, nodes: [{ title: "Two-threshold test", detail: "Authority to act, then evidence to delegate while human review can still change the outcome" }] },
+      {
+        label: "Supervise",
+        nodes: [
+          { title: "Individual approval" },
+          { title: "Advance-constrained action" },
+          { title: "Fallback behavior" },
+        ],
+      },
+      { label: "Record", nodes: [{ title: "Authorization record", detail: "Responsible actors, permitted actions, operating conditions, exposed interests, reassessment triggers" }] },
+    ],
+    loop: { from: 3, to: 1, label: "Material changes and event records trigger reassessment" },
+    caption: "The test separates the authority to act from the evidence needed to delegate execution. Each delegated task carries an authorization record, and its reassessment triggers return material changes to review.",
+  },
+  9: {
+    label: FRAMEWORK,
+    stages: [
+      { label: "Function", nodes: [{ title: "Public decision", detail: "A specified lawful decision the state must make and implement" }] },
+      {
+        label: "Cases",
+        nodes: [
+          { tag: "New Zealand", title: "Launch permission", detail: "Retained licensing authority" },
+          { tag: "Norway", title: "Operational capability", detail: "Divided responsibilities in an Arctic partnership" },
+          { tag: "Luxembourg", title: "Asset ownership", detail: "Planning and legislative information for LUXEOSys" },
+        ],
+      },
+      { label: "Standard", emphasis: true, nodes: [{ title: "Accountable acceptance", detail: "Who can interrupt essential services, which rights permit a response, what funded capacity can act" }] },
+      {
+        label: "Remedies",
+        nodes: [
+          { title: "Licensing terms", detail: "Operator information, significant changes, suspension" },
+          { title: "Procurement terms", detail: "Recovery, service transition, lifetime costs" },
+          { title: "Collective restraint", detail: "ESA rules, UN consensus, anti-satellite testing" },
+        ],
+      },
+    ],
+    loop: { from: 2, to: 0, label: "Material gaps require reasoned acceptance or revision before commitment" },
+    caption: "The three cases separate permission, operational capability and information as distinct sources of control. The standard turns them into questions a state must answer before it accepts a strategic dependency.",
+  },
+  10: {
+    label: FRAMEWORK,
+    stages: [
+      {
+        label: "Compare",
+        nodes: [
+          { title: "Historical climate" },
+          { title: "Future without SAI" },
+          { title: "Feasible policy portfolios" },
+        ],
+      },
+      { label: "Justify", emphasis: true, nodes: [{ title: "Comparative justification", detail: "Defend alternatives, disclose distributional choices, answer objections from exposed constituencies" }] },
+      { label: "Authorize", nodes: [{ title: "Authorization", detail: "Assessment, notification and consultation scaled to expected effects" }] },
+      {
+        label: "Continue",
+        nodes: [
+          { title: "Program control", detail: "Political authority can change" },
+          { title: "Operator succession", detail: "Bounded interim succession" },
+          { title: "Cooling trajectory", detail: "Monitored, financed, gradual withdrawal" },
+        ],
+      },
+    ],
+    loop: { from: 3, to: 0, label: "Periodic reassessment of intervention and nondeployment" },
+    caption: "The comparison duty ties risk-risk analysis to authorization. The continuity duty keeps program control, operator succession and the cooling trajectory apart, so a change in political authority does not force abrupt cessation.",
+  },
+  11: {
+    label: FRAMEWORK,
+    stages: [
+      {
+        label: "Classify",
+        nodes: [
+          { title: "Protection" },
+          { title: "Repair" },
+          { title: "Compensation for new loss" },
+        ],
+      },
+      { label: "Evidence", nodes: [{ title: "Functional replacement", detail: "Additionality and timing, not canopy growth or construction alone; West Lake, Deep Bay, San Tin" }] },
+      { label: "Accept", emphasis: true, nodes: [{ title: "Staged acceptance", detail: "Site baselines, functional objectives, monitoring periods, seasonal coverage" }] },
+      {
+        label: "Decide",
+        nodes: [
+          { title: "Fund release" },
+          { title: "Discharge of responsibility" },
+          { title: "Development permission" },
+        ],
+      },
+    ],
+    loop: { from: 2, to: 1, label: "Delayed or failed recovery triggers funded monitoring and correction" },
+    caption: "Engineering completion and ecological performance are accepted separately. Only functions that have been demonstrated can release funds, discharge responsibility or permit the next phase of development.",
+  },
+};
+
+// A stage holds either one node or one node per lane, so connectors can align
+// without measuring the layout.
+for (const [id, diagram] of Object.entries(architectureDiagrams)) {
+  const lanes = Math.max(...diagram.stages.map((stage) => stage.nodes.length));
+  for (const stage of diagram.stages) {
+    if (stage.nodes.length !== 1 && stage.nodes.length !== lanes) {
+      throw new Error(`Diagram ${id}: stage "${stage.label}" must have 1 or ${lanes} nodes.`);
+    }
+  }
+  const { loop } = diagram;
+  if (loop && !(loop.to < loop.from && loop.from < diagram.stages.length)) {
+    throw new Error(`Diagram ${id}: a loop must return to an earlier stage.`);
+  }
+}
diff --git a/website/app/lib/content/architecture-flows.ts b/website/app/lib/content/architecture-flows.ts
deleted file mode 100644
index 1c88514..0000000
--- a/website/app/lib/content/architecture-flows.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export type ArchitectureFlow = { stages: string[][]; caption: string };
-
-// Keyed by Experience entry ID. Each flow restates the system its manuscript describes.
-export const architectureFlows: Readonly<Record<number, ArchitectureFlow>> = {
-  1: {
-    stages: [["Submissions"], ["Reference audit", "Review allocation"], ["Expert adjudication"], ["Population quality", "Post-training data"]],
-    caption: "Measurement and correction run as separate decisions over the same submissions. Adjudications update reliability posteriors, acceptance criteria and review intensity.",
-  },
-  2: {
-    stages: [["Task design"], ["Synthesis"], ["Validity checks"], ["Batch Zero"]],
-    caption: "Batch Zero gates each task family before large-scale data construction. Failures and disagreements revise task instructions, reference solutions and acceptance criteria.",
-  },
-  3: {
-    stages: [["Model run"], ["Code and rules", "LLM-as-a-Judge", "Specialist scholars"], ["Proof obligations"], ["Separate records"]],
-    caption: "Three review layers read the answer, the visible reasoning and the execution evidence together, and correctness, compliance and efficiency are recorded apart.",
-  },
-  4: {
-    stages: [["Evidence ingestion"], ["Rashomon scoring"], ["Ranking bounds"], ["Verification query"]],
-    caption: "Minimax regret picks the next fact to verify, and each correction triggers rescoring and attribution updates through versioned evidence.",
-  },
-};
diff --git a/website/app/page.tsx b/website/app/page.tsx
index b577166..536a88e 100644
--- a/website/app/page.tsx
+++ b/website/app/page.tsx
@@ -17,7 +17,7 @@ export default function AboutPage() {
     <>
       <a className="skip-link" href="#home-profile">Skip to main content</a>
       <ClarinetHero />
-      <SiteShell active="about" frameClassName={styles.homeFrame} showSkipLink={false}>
+      <SiteShell active="about" frameClassName={styles.homeFrame} guides="index" showSkipLink={false}>
         <AboutContent hasHero />
       </SiteShell>
     </>
diff --git a/website/app/past-experience/components/ExperienceDomainPage.tsx b/website/app/past-experience/components/ExperienceDomainPage.tsx
index e2e1a85..db8c6ad 100644
--- a/website/app/past-experience/components/ExperienceDomainPage.tsx
+++ b/website/app/past-experience/components/ExperienceDomainPage.tsx
@@ -6,7 +6,7 @@ import styles from "../../components/experience/Experience.module.css";
 // Compatibility category pages render the approved Experience entries.
 export function ExperienceDomainPage({ domain }: { domain: ShowcaseDomain }) {
   return (
-    <SiteShell active="experience" parent={{ href: `/experience/#${domain.slug}`, label: "Experience" }} frameClassName={styles.frame}>
+    <SiteShell active="experience" parent={{ href: `/experience/#${domain.slug}`, label: "Experience" }} frameClassName={styles.frame} guides="index">
       <ExperienceSection domain={domain} standalone />
     </SiteShell>
   );
diff --git a/website/app/past-experience/components/LegalPaperPage.module.css b/website/app/past-experience/components/LegalPaperPage.module.css
index d5f4cfa..26619dd 100644
--- a/website/app/past-experience/components/LegalPaperPage.module.css
+++ b/website/app/past-experience/components/LegalPaperPage.module.css
@@ -14,15 +14,15 @@
 }
 
 .header {
-  max-width: var(--reading-measure);
-  margin-bottom: 3rem;
+  margin-bottom: 5rem;
 }
 
 .paper .header h1 {
+  max-width: 80%;
   font-size: var(--type-title);
   font-weight: 400;
   line-height: var(--title-leading);
-  letter-spacing: -0.02em;
+  letter-spacing: var(--title-tracking);
 }
 
 .readingLayout {
@@ -75,7 +75,7 @@
   font-size: var(--type-heading);
   font-weight: 400;
   line-height: var(--heading-leading);
-  letter-spacing: -0.01em;
+  letter-spacing: var(--heading-tracking);
   text-wrap: balance;
   scroll-margin-top: 6rem;
 }
@@ -187,6 +187,7 @@
   font-size: var(--type-subheading);
   font-weight: 500;
   line-height: var(--subheading-leading);
+  letter-spacing: var(--subheading-tracking);
   text-wrap: balance;
   scroll-margin-top: 6rem;
 }
@@ -271,11 +272,16 @@
 
 @media (min-width: 1200px) {
   @container (min-width: 44rem) {
+    /* Seven grid columns of reading, three of contents: the split lands on the guides. */
     .readingLayout {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) 12rem;
+      grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
       align-items: start;
-      column-gap: 3rem;
+    }
+
+    .overview,
+    .readingColumn {
+      max-width: none;
     }
 
     .overview {
@@ -296,6 +302,7 @@
       grid-row: 1 / span 2;
       max-height: calc(100dvh - 8rem);
       margin-bottom: 0;
+      margin-left: 2.5rem;
       padding-top: 1rem;
       overflow-y: auto;
       overscroll-behavior: contain;
diff --git a/website/app/past-experience/components/LegalPaperPage.tsx b/website/app/past-experience/components/LegalPaperPage.tsx
index 47e132a..580058c 100644
--- a/website/app/past-experience/components/LegalPaperPage.tsx
+++ b/website/app/past-experience/components/LegalPaperPage.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 import { Fragment, type ReactNode } from "react";
 import { SiteShell } from "../../components/SiteShell";
 import { ArticleReadingLayout } from "../../components/article/ArticleReadingLayout";
-import { ExperienceMetadata, KeyContributions } from "../../components/experience/ExperienceDetails";
+import { ExperienceDiagram, ExperienceMetadata, KeyContributions } from "../../components/experience/ExperienceDetails";
 import { type LegalPaper, type PaperRun } from "../../lib/content/legal-papers";
 import type { ShowcaseEntry } from "../../lib/content/experience-showcase";
 import { LegalPaperReader } from "./LegalPaperReader";
@@ -74,6 +74,7 @@ export function LegalPaperPage({ paper, showcase }: { paper: LegalPaper; showcas
           <header className={`page-intro ${styles.header}`}>
             <h1 id="paper-title" tabIndex={-1}>{showcase.headline}</h1>
             <ExperienceMetadata entry={showcase} />
+            <ExperienceDiagram entry={showcase} />
           </header>
 
           <ArticleReadingLayout
diff --git a/website/app/past-experience/components/LegalPaperReader.module.css b/website/app/past-experience/components/LegalPaperReader.module.css
index fcb6958..3ef15de 100644
--- a/website/app/past-experience/components/LegalPaperReader.module.css
+++ b/website/app/past-experience/components/LegalPaperReader.module.css
@@ -46,7 +46,7 @@
   font-size: var(--type-heading);
   font-weight: 400;
   line-height: var(--heading-leading);
-  letter-spacing: -0.01em;
+  letter-spacing: var(--heading-tracking);
 }
 
 .closeButton {
diff --git a/website/content/protected-sources.json b/website/content/protected-sources.json
index 628f2af..fc06828 100644
--- a/website/content/protected-sources.json
+++ b/website/content/protected-sources.json
@@ -2,23 +2,23 @@
   "version": 1,
   "normalization": "LF",
   "sources": {
-    "app/experience/page.tsx": "993f5aa641588d4cd2d5ea7ef7d7826e1b5cafbd06b1bc2bc704f802e23df777",
-    "app/experience/[slug]/page.tsx": "1fcd774817f9c2ec014b035f823379c790f67f47bea548f94a2c2a14cd2eb6ee",
-    "app/components/experience/ExperienceContent.tsx": "fe605a8d462ea9eab6d00a8ec120d68756cffc13f9b5d33015f901a4a98be271",
-    "app/components/experience/ExperienceDetails.tsx": "8a06886cc4642b5c12e2575579339208493b07ef0a862ae8c5a5f160583be880",
+    "app/experience/page.tsx": "1dbf2ee75f4d859128a5ce92b6a0c7c6df94579962c37bc672544c4d7698c3a6",
+    "app/experience/[slug]/page.tsx": "b57c5422793ec804d64e3da7217762400bf682a8c71a9a7f850201b66c04d6c8",
+    "app/components/experience/ExperienceContent.tsx": "70c80dbc812293c4e38a902fea79fee7fb730f577c7fa2669529a881a1643960",
+    "app/components/experience/ExperienceDetails.tsx": "4d6320c1adf2310a75dea9cb6b4fca037f166b0073da5b5627e4e4ef8a3a3385",
     "app/lib/content/experience-showcase.ts": "2711d4c142e9a48c2cc2e7b0480a6827bba0c4d7898f3b9e3d42918b9b08a544",
     "app/lib/content/experience-domains.ts": "7362085d4857daa83ae476f176163378dde550572d5a1932d2f142d4d1a00c7d",
     "content/experience-showcase.json": "b54c4501155773150c2c8a61e13f948a3aaed0a7bd9ec92933e90b2389e713d8",
-    "app/components/AboutContent.tsx": "a50c38034f9c755faea4b1285be96278d02a92543c731d51f8be7c9553e614d9",
+    "app/components/AboutContent.tsx": "78f376d55aaed4a0d1d66c5319931e2233b0ef99d127c7727128365e419b22d4",
     "app/lib/content/about.ts": "8d79e72133dcbcae9523771a099f53f0aecb879cea384769ff6bb0144e05626f",
-    "app/coursework/page.tsx": "0d061cfb681b1975f96c92d609f35dff15ab53a86451372569e8f14cb7eaef14",
-    "app/components/research/ResearchArticle.tsx": "e855d9e8c25c5f0503acf622dd66461fa168b438d8f6e23f78d9c35e99afb777",
+    "app/coursework/page.tsx": "a1caf4bd363d652ce401c237e06336be26e15296a3ffa19890b3d1c53b6ab63c",
+    "app/components/research/ResearchArticle.tsx": "401433d1b0ab4de56d8f70a1bb4e4f0bc477a8ada5ffb1e410244c9268798222",
     "app/components/research/ResearchInline.tsx": "ad5cae237a294ce103f6edd3aa71ba7beadc972f587861bd39a0d157ddfb4315",
     "app/components/research/ResearchMath.tsx": "a61ffe67375e2c50a7cac7167f39ff39ef7a115d6aa240c14f9240b9361e54cf",
     "app/lib/content/research-markdown.ts": "d2d03cfc6b7bc38d5a409d134f517c9ccdff3a3977b3af0495b437b96850e001",
     "app/lib/content/research-math.ts": "0343a075dba996cd6a96d3ab299eb6bf095b1b7a4c662f84b253cd243c4107ff",
     "app/lib/content/research-number.ts": "2d29d06ffde33580bd5e655b547b28c953d64b0d2b0fa7fe31663da68dd1276b",
-    "app/education/page.tsx": "697f94528f437622c3ddcaf6c4098b6ebf7f59d86ca7d4c9628fadb3606fc8ea",
+    "app/education/page.tsx": "125161867eef63add036cc5f310bc68472b4c068961ee12da7937c4092e81ac0",
     "app/education/certified-valuation-arithmetic-asian-options/page.tsx": "ac50f30d6ba9f95eaf75c44a88ae26334479217ac1a92634371b69ee86d789fa",
     "app/education/certified-rough-heston-valuation/page.tsx": "3891da8f094b8315eff066a95c4aec8a8bca527587f330e6a080e4c6086c1783",
     "app/education/critical-dependence-stress-for-portfolio-diversification/page.tsx": "b0dbb4c593e681c702908a707b8dc31ac1800472f749a8897bc3c7d2550f1f90",
@@ -32,11 +32,11 @@
     "app/now/page.tsx": "701f81ff14577a7860daff4fe83208ee6f5e30fd44fe499a11e97269ec888544",
     "app/past-experience/page.tsx": "92f0f9e0b5129e7644387a6a4ea6967a483c628b521a6dfe0baf9f9bfff521fc",
     "app/past-experience/[slug]/page.tsx": "8ee0cb7500cd04c48e5148b2667eb2efa65a3f0b35d9f7ee45b2383dfbedd16e",
-    "app/past-experience/components/ExperienceDomainPage.tsx": "2f2aed707e09433f2df017a1d7411222ceb77174dad533c041d886b8e757984a",
+    "app/past-experience/components/ExperienceDomainPage.tsx": "7550ac4845ff290d9f249ff735f33a10502cb6dd132f2e383c00bc17a7ad4173",
     "app/lib/content/legal-papers.ts": "8bd1bca63e7211f7c286df97192faf943144ff28be6d12cc5666f704933e9f4c",
     "app/lib/content/metadata-excerpt.ts": "567139663925462cc48584a53dabb91e50e3727acd68afe7ddf61fa2818f0e71",
     "app/past-experience/[slug]/[paper]/page.tsx": "0a54d7899422b36ca794920d635fc93e4771183105041d9504479e4333f444b0",
-    "app/past-experience/components/LegalPaperPage.tsx": "71f4298cf5ecaf10545a44930293e5d4cf3c4d10f02bd725098e9c4d7f949edd",
+    "app/past-experience/components/LegalPaperPage.tsx": "9e05943e9a7d5403d5619d5e9e44f75e8f8f1cc3d91df0a7e49baaf013faa2cb",
     "content/legal-papers/autonomous-authority-in-space.json": "02cbd6db240a1fd069cdb710988747622baddbe41a27b5cda76b95e2ec7554d2",
     "content/legal-papers/small-states-and-strategic-space-dependence.json": "501030c9bbab887d1b5c1ead77a4c2f8e4f1468159a3839a9794a8a9e926f712",
     "content/legal-papers/solar-geoengineering-comparison-and-continuity.json": "29ac0b9c6c371820f7e79e7b55719e7f21059c169a0474a213add745d2a5ba0c",
diff --git a/website/content/visible-copy-manifest.json b/website/content/visible-copy-manifest.json
index 2316a39..b7ae676 100644
--- a/website/content/visible-copy-manifest.json
+++ b/website/content/visible-copy-manifest.json
@@ -775,9 +775,9 @@
       "formulaCount": 973
     },
     "/experience/": {
-      "textSha256": "f640cebdce8a87ab8f1434a718b50a161fcb366a01fbd83dcc211460bdef58f6",
-      "characterCount": 8870,
-      "wordCount": 1156,
+      "textSha256": "78cb36b17f5a155a4e9916e427c238ac811b0b3f2d78d43d43f97c30c68dd9c8",
+      "characterCount": 10317,
+      "wordCount": 1369,
       "preview": "Skip to main content Theodore Ouyang About Experience Experience: Areas of Focus AI Research and Engineering Data Science Legal Research and Policy Analysis Fin",
       "altTexts": [],
       "ariaLabels": [
@@ -1025,9 +1025,9 @@
       }
     },
     "/past-experience/": {
-      "textSha256": "f640cebdce8a87ab8f1434a718b50a161fcb366a01fbd83dcc211460bdef58f6",
-      "characterCount": 8870,
-      "wordCount": 1156,
+      "textSha256": "78cb36b17f5a155a4e9916e427c238ac811b0b3f2d78d43d43f97c30c68dd9c8",
+      "characterCount": 10317,
+      "wordCount": 1369,
       "preview": "Skip to main content Theodore Ouyang About Experience Experience: Areas of Focus AI Research and Engineering Data Science Legal Research and Policy Analysis Fin",
       "altTexts": [],
       "ariaLabels": [
@@ -1065,10 +1065,10 @@
       }
     },
     "/past-experience/artificial-intelligence/": {
-      "textSha256": "f21fbea060c48fcc4f655195f726a7a19c493aa95bacf81ca9d0f32a651a5de3",
-      "characterCount": 2945,
-      "wordCount": 393,
-      "preview": "Skip to main content Theodore Ouyang Back to Experience AI Research and Engineering Large-scale domain expert feedback governance and adaptive review With a lea",
+      "textSha256": "eef9a3bc27efdc436856c74094a53e593440032adc1cf97396190ba7779599d4",
+      "characterCount": 3292,
+      "wordCount": 442,
+      "preview": "Skip to main content Theodore Ouyang Back to Experience AI Research and Engineering Large-scale domain expert feedback governance and adaptive review Duke Unive",
       "altTexts": [],
       "ariaLabels": [
         "Theodore Ouyang home",
@@ -1090,9 +1090,9 @@
       }
     },
     "/past-experience/artificial-intelligence/statistical-inference-and-resource-allocation-in-expert-data-production/": {
-      "textSha256": "54cd301ae344a322b0b670df12f5fd28e531453f4023091404847702f105e119",
-      "characterCount": 22583,
-      "wordCount": 3203,
+      "textSha256": "688f0c76305cb0d307896c92cfa87a15c1348478d8b9d4ea13bbb9847f405b9e",
+      "characterCount": 23116,
+      "wordCount": 3271,
       "preview": "Skip to main content Theodore Ouyang Back to Experience Large-scale domain expert feedback governance and adaptive review Organization Duke University × Leading",
       "altTexts": [],
       "ariaLabels": [
@@ -1100,6 +1100,7 @@
         "Parent navigation",
         "Scrollable mathematical expression",
         "Scrollable mathematical expression",
+        "Scrollable mathematical expression",
         "Article contents",
         "Scrollable mathematical expression",
         "Mathematical equation",
@@ -1148,13 +1149,13 @@
         "twitterTitle": "Duke University × Leading Foundation Model Developer: Large-scale domain expert feedback governance and adaptive review",
         "twitterDescription": "With a leading foundation model developer, I led the statistical system behind expert feedback for LLM post-training, one of the first engineering implementations of prediction-assisted statistical inference and capacity-constrained review allocation in..."
       },
-      "mathSourceSha256": "5295a0f525517511c5308ba90852d58e7f37534677875c25ebb0174a42852a87",
-      "formulaCount": 147
+      "mathSourceSha256": "f3d7ba2b0e0de31349488cd12eaa1b589fd3008d4ed1bde80cef7b7d750ba867",
+      "formulaCount": 152
     },
     "/past-experience/artificial-intelligence/task-validity-in-financial-synthetic-data/": {
-      "textSha256": "cf781998d2a1b4eb3a6bbe04e46cc6799a722d1e2ae55967c882d9561dd99c73",
-      "characterCount": 22100,
-      "wordCount": 3020,
+      "textSha256": "84f1d294d4967f73a8211dffccf6fb239b0f62ebcd91b710f307afbcda0e90c9",
+      "characterCount": 22773,
+      "wordCount": 3108,
       "preview": "Skip to main content Theodore Ouyang Back to Experience Financial task design and synthetic data engineering Organization Duke University × Leading Foundation M",
       "altTexts": [],
       "ariaLabels": [
@@ -1199,13 +1200,13 @@
         "twitterTitle": "Duke University × Leading Foundation Model Developer: Financial task design and synthetic data engineering",
         "twitterDescription": "I designed the data strategy for financial post-training in a frontier foundation model program, one of the first engineering implementations of constraint-preserving synthetic data and structured expert preference supervision for financial LLM post-training."
       },
-      "mathSourceSha256": "a5135c00bb4ad37f87634c0a46f1bedae0f3d2d8368c7a927ba3822b31ac64db",
-      "formulaCount": 107
+      "mathSourceSha256": "e3b1e4f3fece5f26fd7889d0e2fb2cc54cb9d65a6241f589f99a908078fd6bc9",
+      "formulaCount": 109
     },
     "/past-experience/artificial-intelligence/verification-and-supervision-in-scientific-reasoning-tasks/": {
-      "textSha256": "23fff0c854e906302d4d11061beecb990167731c3a20c496982f1b67034d5a59",
-      "characterCount": 22504,
-      "wordCount": 3214,
+      "textSha256": "6242c1966a90ebd923b14158214a4976d1f8bc35a12c4fa7e7c5bb510f51b5e0",
+      "characterCount": 22967,
+      "wordCount": 3274,
       "preview": "Skip to main content Theodore Ouyang Back to Experience General reasoning evaluation and layered verification Organization Duke University × Frontier AI Researc",
       "altTexts": [],
       "ariaLabels": [
@@ -1260,13 +1261,13 @@
         "twitterTitle": "Duke University × Frontier AI Research Laboratory: General reasoning evaluation and layered verification",
         "twitterDescription": "I developed a framework for evaluating and supervising general reasoning with a frontier AI research laboratory, among the first engineering implementations of joint verification across final answers, visible reasoning and execution evidence in frontier..."
       },
-      "mathSourceSha256": "ab3430d55979ab3241a20d4dc8b0b42233ceb872994e1c0149c6d055d23fe704",
-      "formulaCount": 126
+      "mathSourceSha256": "e491a1dd5d5faafa14cf68d9c47f2f42e074c7018698bd6633759998327829e1",
+      "formulaCount": 127
     },
     "/past-experience/artificial-intelligence/evidence-uncertainty-and-decision-guarantees-in-investment-research/": {
-      "textSha256": "8668a9fadc95f4194d6c622b3766fafdc8ad02d9bc38b2681522bdd945427b52",
-      "characterCount": 16813,
-      "wordCount": 2463,
+      "textSha256": "8adbb870af316766c668fcf327036453101d03f7d9ce5e2501e899365a1310c4",
+      "characterCount": 17212,
+      "wordCount": 2516,
       "preview": "Skip to main content Theodore Ouyang Back to Experience Evidence verification and robust comparison in investment research Organization Duke University × Leadin",
       "altTexts": [],
       "ariaLabels": [
@@ -1322,14 +1323,14 @@
         "twitterTitle": "Duke University × Leading Global Alternative Asset Manager: Evidence verification and robust comparison in investment research",
         "twitterDescription": "I developed and implemented a framework for evidence verification and decision assurance with a leading global alternative asset manager, one of the first engineering implementations in institutional investment research to treat model multiplicity,..."
       },
-      "mathSourceSha256": "b5a9f4358cfd16cbcbd639c68f46134326efb2b51391b964e4e0e19470b1669a",
-      "formulaCount": 133
+      "mathSourceSha256": "aac71524ae3c1dd0942d8f8e917c85cc3d245e9e670070edc9e6574d6b73b7fa",
+      "formulaCount": 136
     },
     "/past-experience/data-science/": {
-      "textSha256": "4c28243e2463e440a5821cbeb48f0044ad1a042b262bc5e841ebea2f585cf666",
-      "characterCount": 1187,
-      "wordCount": 157,
-      "preview": "Skip to main content Theodore Ouyang Back to Experience Data Science Jiritsu Network Owned business development for Jiritsu's asset-verification and privacy-pre",
+      "textSha256": "6a0cd7abc26180586f454a18267837381bc2e650b15a761e83cd29129a006064",
+      "characterCount": 1351,
+      "wordCount": 182,
+      "preview": "Skip to main content Theodore Ouyang Back to Experience Data Science Jiritsu Network Business Development and Business Analytics (Full-time) August 2024 – Octob",
       "altTexts": [],
       "ariaLabels": [
         "Theodore Ouyang home",
@@ -1350,10 +1351,10 @@
       }
     },
     "/past-experience/legal-research-and-policy-analysis/": {
-      "textSha256": "e4c6c4d6f51fe85467925f1bf156ee7eca9e5f4223daa6fbe7189e4de7561d63",
-      "characterCount": 2769,
-      "wordCount": 364,
-      "preview": "Skip to main content Theodore Ouyang Back to Experience Legal Research and Policy Analysis Duke Law School: Space Law and Autonomous Systems Research I develope",
+      "textSha256": "e37047334b031b87edad40697698671aaf74cce0c54d102afa0e087e57251ad6",
+      "characterCount": 3244,
+      "wordCount": 432,
+      "preview": "Skip to main content Theodore Ouyang Back to Experience Legal Research and Policy Analysis Duke Law School: Space Law and Autonomous Systems Research Autonomous",
       "altTexts": [],
       "ariaLabels": [
         "Theodore Ouyang home",
@@ -1375,10 +1376,10 @@
       }
     },
     "/past-experience/finance/": {
-      "textSha256": "2fb0fa2cc1489d8c7a9c2960e6b5e831cdd33e4acbe1fe7cfac26360e6390e8f",
-      "characterCount": 1552,
-      "wordCount": 199,
-      "preview": "Skip to main content Theodore Ouyang Back to Experience Finance and Consulting Jones Lang LaSalle Capital Markets Team Served as the project team's ESG lead on ",
+      "textSha256": "71e835a59414372df382e4a9b7fd98ca5b30e914b9aa42b263e58a5f444f16df",
+      "characterCount": 1809,
+      "wordCount": 241,
+      "preview": "Skip to main content Theodore Ouyang Back to Experience Finance and Consulting Jones Lang LaSalle Capital Markets Team Summer Intern June 2024 – August 2024 Ser",
       "altTexts": [],
       "ariaLabels": [
         "Theodore Ouyang home",
@@ -1401,10 +1402,10 @@
       }
     },
     "/past-experience/stem-academic-competitions-and-training/": {
-      "textSha256": "6d84e5a156f15f08ffedf0488b840b1240b579e3c30675a9fb48405441c8c3b3",
-      "characterCount": 633,
-      "wordCount": 85,
-      "preview": "Skip to main content Theodore Ouyang Back to Experience STEM Academic Competitions and Training Independent STEM Olympiad Training Practice Independently coache",
+      "textSha256": "56eefd34f7bb0b901911ae40ed5c347c7445b64e3b62937d808831a034193a00",
+      "characterCount": 837,
+      "wordCount": 114,
+      "preview": "Skip to main content Theodore Ouyang Back to Experience STEM Academic Competitions and Training Independent STEM Olympiad Training Practice IPhO-Level Physics I",
       "altTexts": [],
       "ariaLabels": [
         "Theodore Ouyang home",
@@ -1424,9 +1425,9 @@
       }
     },
     "/past-experience/legal-research-and-policy-analysis/autonomous-authority-in-space/": {
-      "textSha256": "552496e45bb45b141c6ce8997a3b2761dcba34b02af9e2a6feea6de51ae746d7",
-      "characterCount": 66694,
-      "wordCount": 9324,
+      "textSha256": "f7c1100643fcd1ebec082cee98ccaab1a86ef53fd1c7f40494aa7c8d7ed9bb21",
+      "characterCount": 67417,
+      "wordCount": 9418,
       "preview": "Skip to main content Theodore Ouyang Back to Experience Autonomous Authority in Space: Risk Tradeoffs and the Law of Delegation Organization Duke Law School Pos",
       "altTexts": [],
       "ariaLabels": [
@@ -1508,9 +1509,9 @@
       }
     },
     "/past-experience/legal-research-and-policy-analysis/small-states-and-strategic-space-dependence/": {
-      "textSha256": "829c62025481eccb60a0b671d9473a624d0f1ad8f28d21232786dedacf71bc3d",
-      "characterCount": 51464,
-      "wordCount": 7039,
+      "textSha256": "64fd1ef569431686cac353c7034580ce1b827de86ac282bb634cc5d2a897bbed",
+      "characterCount": 52442,
+      "wordCount": 7165,
       "preview": "Skip to main content Theodore Ouyang Back to Experience Small States and the Governance of Strategic Space Dependence Organization Duke Law School Position Auth",
       "altTexts": [],
       "ariaLabels": [
@@ -1596,9 +1597,9 @@
       }
     },
     "/past-experience/legal-research-and-policy-analysis/solar-geoengineering-comparison-and-continuity/": {
-      "textSha256": "e2aee50b00b5d8be6c0c0122ca7f982a876a7e9d2565e06139874970252f71d2",
-      "characterCount": 49113,
-      "wordCount": 6826,
+      "textSha256": "0971213c3ab29da1b544567b6b97ddc304939e5fbd7cb52b7f79957fb11e9431",
+      "characterCount": 49903,
+      "wordCount": 6921,
       "preview": "Skip to main content Theodore Ouyang Back to Experience Who May Choose the Lesser Risk: Solar Geoengineering and the Legal Duties of Comparison and Continuity O",
       "altTexts": [],
       "ariaLabels": [
@@ -1680,9 +1681,9 @@
       }
     },
     "/past-experience/legal-research-and-policy-analysis/mangrove-restoration-and-compensatory-mitigation/": {
-      "textSha256": "f3c1652000d7c23e4f79e4e248b8e66a86758edd7f05e0bf92fb2691c5b39475",
-      "characterCount": 63809,
-      "wordCount": 8886,
+      "textSha256": "ecc0a0b6fea2791f4eeb7aef5632f935ed7a2520203767ffcc8d8a79427d5579",
+      "characterCount": 64481,
+      "wordCount": 8972,
       "preview": "Skip to main content Theodore Ouyang Back to Experience Mangrove Restoration and the Limits of Compensatory Mitigation: Lessons from Florida for the Greater Bay",
       "altTexts": [],
       "ariaLabels": [
@@ -1786,9 +1787,9 @@
       }
     },
     "/now/": {
-      "textSha256": "f640cebdce8a87ab8f1434a718b50a161fcb366a01fbd83dcc211460bdef58f6",
-      "characterCount": 8870,
-      "wordCount": 1156,
+      "textSha256": "78cb36b17f5a155a4e9916e427c238ac811b0b3f2d78d43d43f97c30c68dd9c8",
+      "characterCount": 10317,
+      "wordCount": 1369,
       "preview": "Skip to main content Theodore Ouyang About Experience Experience: Areas of Focus AI Research and Engineering Data Science Legal Research and Policy Analysis Fin",
       "altTexts": [],
       "ariaLabels": [
diff --git a/website/tests/rendered-html.test.mjs b/website/tests/rendered-html.test.mjs
index bcb2971..b0c84cd 100644
--- a/website/tests/rendered-html.test.mjs
+++ b/website/tests/rendered-html.test.mjs
@@ -679,7 +679,13 @@ test("all eighteen approved Experience entries use institution titles and real l
     assert.equal(summaries.length, 1);
     if (entry.categoryId === "01") assertApprovedInline(summaries[0][2], entry.summary);
     else assert.equal(stripMarkup(summaries[0][2]), normalizeSpace(entry.summary));
-    assert.equal(openingTags(rendered, "p").length, 1, `Entry ${entry.id} must have one outer summary`);
+    assert.equal(openingTags(rendered, "p").length, 2, `Entry ${entry.id} must have one outer summary and one record line`);
+    const record = [...rendered.matchAll(/<p\b([^>]*)>([\s\S]*?)<\/p>/giu)]
+      .find((match) => attribute(match[1], "data-experience-record") !== undefined);
+    assert.ok(record, `Entry ${entry.id} needs its record line under the title`);
+    const recordContext = entry.categoryId === "01" ? entry.organization : entry.categoryId === "03" ? entry.detailTitle : entry.metadata.position;
+    assert.deepEqual([...record[2].matchAll(/<span\b[^>]*>([\s\S]*?)<\/span>/giu)].map((match) => stripMarkup(match[1])),
+      [normalizeSpace(recordContext), normalizeSpace(entry.metadata.dates)], "The record line reuses the approved metadata verbatim");
     assert.equal(stripMarkup(rendered.match(/<h3\b[^>]*>([\s\S]*?)<\/h3>/u)?.[1] ?? ""), presentation.listingTitle);
     const links = [...rendered.matchAll(/<a\b([^>]*)>([\s\S]*?)<\/a>/giu)];
     assert.equal(links.length, 1, `Entry ${entry.id} needs one Read More action`);
@@ -713,15 +719,13 @@ test("all eighteen approved Experience entries use institution titles and real l
   ], "All seven original nested contributions must survive under their correct parent items");
 });
 
-test("the ten nonresearch detail routes keep metadata in separate label/value rows", async () => {
-  const metadataStyles = await readFile(path.join(ROOT, "app", "components", "experience", "Experience.module.css"), "utf8");
-  const metadataRules = [...metadataStyles.matchAll(/(?:^|\n)\s*\.metadata\s*\{([^}]+)\}/gu)];
-  assert.ok(metadataRules.length > 0, "Experience metadata needs an explicit layout rule");
-  for (const [, declarations] of metadataRules) {
-    assert.match(declarations, /grid-template-columns:\s*1fr\s*;/u, "Metadata must remain a single column at every defined breakpoint");
-  }
-  assert.match(metadataStyles, /\.metadata\s*>\s*div\s*\{[^}]*display:\s*grid[^}]*grid-template-columns:\s*6\.5em minmax\(0,\s*1fr\)[^}]*align-items:\s*baseline/u, "Metadata labels and values share a baseline, with label width scaling with the text size");
-  assert.match(metadataStyles, /@media\s*\(width\s*<\s*420px\)\s*\{\s*\.metadata\s*>\s*div\s*\{[^}]*grid-template-columns:\s*1fr/u, "Narrow screens stack each label above its value without rearranging metadata rows");
+test("the ten nonresearch detail routes keep metadata in a labelled record strip", async () => {
+  const metadataStyles = (await readFile(path.join(ROOT, "app", "components", "experience", "Experience.module.css"), "utf8")).replace(/\r\n?/gu, "\n");
+  assert.match(metadataStyles, /(?:^|\n)\.metadata\s*\{[^}]*grid-template-columns:\s*repeat\(4,\s*minmax\(0,\s*1fr\)\)[^}]*border-top:\s*1px solid var\(--rule-strong\)/u, "Desktop sets the four fields on one rule");
+  assert.match(metadataStyles, /@media \(width < 1200px\) \{[^@]*?\.metadata\s*\{\s*grid-template-columns:\s*repeat\(2,\s*minmax\(0,\s*1fr\)\)/u, "Narrower layouts use two fields per row");
+  assert.match(metadataStyles, /@media \(width < 420px\) \{\s*\.metadata\s*\{\s*grid-template-columns:\s*1fr/u, "Phones stack the fields");
+  assert.match(metadataStyles, /\.metadata dt\s*\{[^}]*font-size:\s*var\(--type-label\)/u, "Field labels use the label role");
+  assert.match(metadataStyles, /\.metadata dd\s*\{[^}]*font-family:\s*var\(--font-prose\)[^}]*font-size:\s*var\(--type-reading\)/u, "Field values use the reading face and size");
   for (const route of EXPERIENCE_DETAIL_ROUTES) {
     const html = await routeHtml(route);
     assert.equal(openingTags(html, "article").length, 1);
@@ -735,6 +739,23 @@ test("the ten nonresearch detail routes keep metadata in separate label/value ro
   }
 });
 
+test("each AI and legal article opens with one logic architecture diagram", async () => {
+  const routes = [...AI_PROJECT_SLUGS.map((slug) => `${AI_ROUTE}${slug}/`), ...ARTICLES.map(([slug]) => `${LAW_ROUTE}${slug}/`)];
+  assert.equal(routes.length, 8);
+  for (const route of routes) {
+    const html = await routeHtml(route);
+    const figures = [...html.matchAll(/<figure\b([^>]*)>([\s\S]*?)<\/figure>/giu)]
+      .filter((match) => attribute(match[1], "data-logic-diagram") !== undefined);
+    assert.equal(figures.length, 1, `${route} needs exactly one logic diagram`);
+    const header = html.match(/<header\b[^>]*>([\s\S]*?)<\/header>/iu)?.[1] ?? "";
+    assert.ok(header.includes("data-logic-diagram"), `${route}: the diagram belongs in the article header as its visual abstract`);
+    assert.ok(header.indexOf("data-experience-metadata") < header.indexOf("data-logic-diagram"), `${route}: the record strip precedes the diagram`);
+    const stages = [...figures[0][2].matchAll(/\bdata-stage="(\d+)"/gu)].map((match) => Number(match[1]));
+    assert.deepEqual(stages, [1, 2, 3, 4], `${route}: four stages, read left to right`);
+    assert.ok(stripMarkup(figures[0][2].match(/<figcaption\b[^>]*>([\s\S]*?)<\/figcaption>/iu)?.[1] ?? "").length > 40, `${route}: the diagram needs its caption`);
+  }
+});
+
 test("legacy domain routes preserve approved sections, canonicalize to Experience, and return to valid anchors", async () => {
   const main = await routeHtml("/experience/");
   const mainEntries = experienceEntries(main);
@@ -1012,8 +1033,12 @@ test("the production design contract is restrained and dependency-light", async
   assert.match(globals, /\.content-column\s*\{[\s\S]*?grid-template-columns:\s*repeat\(12,[\s\S]*?padding:\s*176px 0 144px/u);
   assert.match(globals, /\.structural-guide-tick\s*\{[\s\S]*?position:\s*sticky[\s\S]*?height:\s*20px/u);
   assert.match(directory, /\.directory\s*\{[^}]*grid-template-columns:\s*1fr/u);
-  assert.match(experience, /\.section\s*\{[^}]*grid-template-columns:\s*repeat\(12,/u);
-  assert.match(experience, /\.sectionBody\s*\{[^}]*grid-column:\s*2\s*\/\s*span\s*8[^}]*max-width:\s*var\(--reading-measure\)/u);
+  assert.match(experience, /\.section\s*\{[^}]*grid-template-columns:\s*repeat\(11,[^}]*grid-column:\s*1 \/ span 11/u, "Sections end on the reading-end guide");
+  assert.match(experience, /\.sectionBody\s*\{[^}]*grid-column:\s*2\s*\/\s*span\s*10/u);
+  assert.match(globals, /--hang-columns:\s*minmax\(0,\s*3fr\)\s+minmax\(0,\s*7fr\)/u, "Hanging rows put titles on 3 of 10 columns and prose on 7");
+  for (const css of [experience, home]) assert.match(css, /@media \(min-width: 1200px\)[\s\S]*?grid-template-columns:\s*var\(--hang-columns\)/u);
+  assert.match(structuralGrid, /data-guides=\{layout\}/u);
+  assert.match(globals, /\.structural-grid\[data-guides="index"\] \.structural-guide-reading-measure\s*\{\s*grid-column:\s*8/u, "Index pages mark the prose axis");
   assert.doesNotMatch(globals, /\.education-entry\s*\{[^}]*grid-template-columns/u);
   for (const guide of ["frame-start", "rail-boundary", "reading-start", "reading-measure", "reading-end"]) assert.ok(structuralGrid.includes(`"${guide}"`));
   for (const contract of ["aria-controls=\"site-menu\"", "aria-expanded={menuOpen}", 'event.key === "Escape"', 'document.body.classList.add("menu-open")', 'querySelectorAll<HTMLElement>']) assert.ok(navigation.includes(contract));
@@ -1024,9 +1049,9 @@ test("the production design contract is restrained and dependency-light", async
   assert.match(globals, /\.site-rail\[data-enhanced="true"\] \.rail-panel\s*\{[^}]*visibility:\s*hidden/u);
   assert.match(navigation, /wordmark-lockup[\s\S]*?wordmark-mark[\s\S]*?wordmark-name[\s\S]*?>Theodore Ouyang<\/span>/u);
   assert.match(layout, /assets\/brand\/lo-mark\.svg/u);
-  assert.match(experience, /\.metadata\s*\{[^}]*grid-template-columns:\s*1fr/u);
+  assert.match(experience, /\.metadata\s*\{[^}]*grid-template-columns:\s*repeat\(4,/u);
   assert.match(experience, /\.entryTitle\s*\{[^}]*font-size:\s*var\(--type-subheading\)/u);
-  assert.match(experience, /\.contributions > ul\s*\{[^}]*padding:\s*0\s*;[^}]*list-style:\s*none\s*;/u);
+  assert.match(experience, /\.contributions > ol\s*\{[^}]*padding:\s*0\s*;[^}]*list-style:\s*none\s*;/u);
   assert.deepEqual(Object.keys(packageJson.dependencies).sort(), ["@mathjax/mathjax-tex-font", "@mathjax/src", "next", "react", "react-dom"]);
   assert.equal(packageJson.dependencies["@mathjax/src"], "4.1.3");
   assert.equal(packageJson.dependencies["@mathjax/mathjax-tex-font"], "4.1.3");
@@ -1060,14 +1085,19 @@ test("shared typography source roles preserve article names, compact indices, me
   assert.doesNotMatch(experience, /font-optical-sizing|font-variation-settings/u, "Experience must inherit the global optical settings rather than create a different font instance");
   assert.match(rule(globals, "body"), /font-family:\s*var\(--font-text\)/u);
   const tokens = rule(globals, ":root");
-  assert.match(tokens, /--type-subheading:\s*0\.9375rem\s*;/u);
-  assert.match(tokens, /--type-index:\s*0\.625rem\s*;/u);
-  assert.match(tokens, /--type-reading:\s*0\.9375rem\s*;/u);
+  // One size per role: title 36, heading 24, subheading 18, reading 16, interface 15, label 13, index 11.
+  assert.match(tokens, /--type-title:\s*2\.25rem\s*;/u);
+  assert.match(tokens, /--type-heading:\s*1\.5rem\s*;/u);
+  assert.match(tokens, /--type-subheading:\s*1\.125rem\s*;/u);
+  assert.match(tokens, /--type-index:\s*0\.6875rem\s*;/u);
+  assert.match(tokens, /--type-reading:\s*1rem\s*;/u);
+  assert.match(tokens, /--type-interface:\s*0\.9375rem\s*;/u);
+  assert.match(tokens, /--type-label:\s*0\.8125rem\s*;/u);
   assert.match(tokens, /--type-math:\s*1\.15em\s*;/u);
   for (const css of [home, experience, coursework]) {
-    assert.match(rule(css, ".sectionIndex"), /font-size:\s*var\(--type-index\)\s*;/u, "Section indices share the compact 10px semantic role.");
+    assert.match(rule(css, ".sectionIndex"), /font-size:\s*var\(--type-index\)\s*;/u, "Section indices share the compact index role.");
   }
-  assert.match(rule(directory, ".directory a"), /font-size:\s*var\(--type-heading\)\s*;/u, "Both top-level directories share the 18px semantic role.");
+  assert.match(rule(directory, ".directory a"), /font-size:\s*var\(--type-heading\)\s*;/u, "Both top-level directories share the heading role.");
   assert.match(rule(directory, ".index"), /font-size:\s*var\(--type-index\)\s*;/u, "Both directories use the compact section-index role.");
   assert.match(rule(coursework, ".sectionBody h2"), /font-size:\s*var\(--type-heading\)\s*;/u);
   assert.match(rule(coursework, ".courseList"), /font-size:\s*var\(--type-reading\)\s*;/u);
@@ -1087,8 +1117,9 @@ test("shared typography source roles preserve article names, compact indices, me
   assert.match(rule(math, ".number"), /font-variant-numeric:\s*lining-nums\s+proportional-nums\s*;/u);
   assert.match(rule(math, ".number sup"), /font-size:\s*0\.75em\s*;/u);
   assert.match(rule(math, ".number sup"), /vertical-align:\s*super\s*;/u);
-  assert.match(rule(experience, ".metadata > div"), /grid-template-columns:\s*6\.5em minmax\(0,\s*1fr\)\s*;/u);
-  assert.match(experience, /\.contributions > ul\s*\{[^}]*gap:\s*1\.5rem\s*;/u);
+  assert.match(rule(experience, ".metadata dd"), /font-size:\s*var\(--type-reading\)\s*;/u);
+  assert.match(experience, /\.contributions > ol\s*\{[^}]*gap:\s*1\.75rem\s*;/u);
+  assert.match(experience, /\.contributions > ol strong\s*\{\s*font-weight:\s*600;/u, "Lead sentences carry the emphasis authored in the manuscript");
   assert.doesNotMatch(experience, /\.contributions\s+li(?:\s*\+\s*li)?\s*\{/u, "Contribution spacing and dividers must not cascade into nested items");
   const nestedDetails = rule(experience, ".contributionDetails");
   assert.match(nestedDetails, /font-size:\s*var\(--type-reading\)\s*;/u);