diff --git a/architecture/README.md b/architecture/README.md
index cada650..cc3a14c 100644
--- a/architecture/README.md
+++ b/architecture/README.md
@@ -52,9 +52,11 @@ preserving SVG geometry. It handles both freshly generated and already integrate
 viewers; running it again should leave the current viewer unchanged.
 
 The viewer loads `../assets/fonts/inter.css`, preloads regular Inter, and inherits
-the site's fixed optical axis of 14 and lining numerals. General page and module
-headings use 22px, secondary headings 18px, and body/control text 14px at every
-viewport. Diagram labels retain their own SVG coordinate sizes. On the main site,
+the site's fixed optical axis of 14 and lining numerals. The tool UI remains entirely
+in Inter while the main site's narrative prose uses Source Serif 4. General page and
+module headings share the site's 32px desktop / 28px mobile scale at weight 500;
+secondary headings remain 18px and body/control text 14px at every viewport.
+Diagram labels retain their own SVG coordinate sizes. On the main site,
 inline formulas use 1em and displayed formulas 1.15em.
 
 SVG exports embed the local regular and italic Inter files and retain the same
diff --git a/architecture/index.html b/architecture/index.html
index fca01ec..127f3af 100644
--- a/architecture/index.html
+++ b/architecture/index.html
@@ -35,10 +35,10 @@
   <link rel="preload" href="../assets/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin>
   <style>
     :root {
-      --type-title: 1.375rem;
-      --title-leading: 1.25;
-      --type-heading: 1.375rem;
-      --heading-leading: 1.25;
+      --type-title: 2rem;
+      --title-leading: 1.2;
+      --type-heading: 2rem;
+      --heading-leading: 1.2;
       --type-subheading: 1.125rem;
       --subheading-leading: 1.45;
       --type-reading: 0.875rem;
@@ -51,8 +51,8 @@
 
     @media (width < 768px) {
       :root {
-        --type-title: 1.375rem;
-        --type-heading: 1.375rem;
+        --type-title: 1.75rem;
+        --type-heading: 1.75rem;
       }
     }
 
@@ -669,7 +669,7 @@
     h1 {
       font-size: var(--type-title);
       line-height: var(--title-leading);
-      font-weight: 400;
+      font-weight: 500;
       letter-spacing: -0.025em;
     }
 
@@ -725,7 +725,7 @@
       letter-spacing: -0.02em;
     }
     html[data-preset="editorial"] h1 { font-size: var(--type-title);
-      line-height: var(--title-leading); font-weight: 400; }
+      line-height: var(--title-leading); font-weight: 500; }
     html[data-preset="editorial"] .pulse-dot {
       width: 9px;
       height: 9px;
@@ -3042,7 +3042,7 @@
     .card-dot.slate    { background: var(--external-stroke); }
 
     .card h2 { font-size: var(--type-heading);
-      line-height: var(--heading-leading); font-weight: 400; color: var(--text); }
+      line-height: var(--heading-leading); font-weight: 500; color: var(--text); }
 
     .card ul {
       list-style: none;
diff --git a/docs/design.md b/docs/design.md
index 72101e2..f05c3df 100644
--- a/docs/design.md
+++ b/docs/design.md
@@ -3,7 +3,7 @@
 Theodore Ouyang's site uses a precise editorial reading frame: warm paper, black ink,
 clear typography, a monochrome LO mark, and selective blue feedback. Its grid, paper
 color, restrained rules, and spacing take their reference from [Cognition](https://cognition.com/).
-The site uses self-hosted Inter and its own content hierarchy.
+The site pairs self-hosted Inter with Source Serif 4 and its own content hierarchy.
 
 ## Identity
 
@@ -27,16 +27,19 @@ link, static fallback, and reduced-motion behavior. The mark's editable master i
 | Structural rule | `rgba(0, 0, 0, 0.06)` |
 | Strong rule | `rgba(0, 0, 0, 0.24)` |
 
-Inter 4.1 is the shared typeface for headings, prose, navigation, directories, controls,
-metadata, and the architecture viewer. Two self-hosted WOFF2 files provide variable
-weights and true italics. `website/public/assets/fonts/inter.css` owns `--font-text`,
-the fixed optical sizing, lining numerals, and the font faces. The regular face is preloaded; italic loads when used.
-System sans fallbacks cover unavailable glyphs.
-The LO mark uses independent artwork.
-Every reading frame uses this same Inter family with automatic optical sizing
-disabled and the `opsz` axis fixed at 14. Prose numerals use proportional widths;
-directory indices and numeric tables can use tabular widths within the same family.
-Inline code labels inherit Inter, and shared bold emphasis uses weight 600.
+Inter 4.1 remains the typeface for headings, navigation, directory labels, controls,
+metadata, and the architecture viewer. Source Serif 4 supplies narrative prose and
+the small section and directory indices. This sans-serif/serif pairing follows
+Cognition's distinction between headings and reading text while retaining the site's
+original Inter lettering and content hierarchy.
+`website/public/assets/fonts/inter.css` owns `--font-text`, the fixed optical sizing,
+lining numerals, and the Inter faces. `source-serif.css` owns `--font-prose` and the
+Source Serif 4 faces. Both families use self-hosted variable WOFF2 files with true
+italics and bundled licenses. Inter retains automatic optical sizing disabled and
+the `opsz` axis fixed at 14. Prose numerals use proportional widths; section indices
+and numeric tables can use tabular widths. Shared bold emphasis uses weight 600.
+The LO mark uses independent artwork, and the particle wordmark retains Inter and
+its original composition and interaction.
 
 Typography follows semantic roles. At any viewport, text with the same role uses
 the same size across every section and page. Weight, color, spacing, and italics
@@ -46,39 +49,44 @@ scale relative to surrounding text without changing the prose size.
 
 | Role | Shared token | Size at the default text setting | Leading |
 | --- | --- | --- | --- |
-| General page title | `--type-title` | 22px, weight 400 | 1.25 |
-| Section heading, coursework category heading | `--type-heading` | 22px, weight 400 | 1.25 |
+| General page title | `--type-title` | 32px desktop / 28px mobile, weight 500 | 1.2 |
+| Section heading, coursework category heading | `--type-heading` | 32px desktop / 28px mobile, weight 500 | 1.2 |
 | Institution, project or paper name | `--type-subheading` | 18px, weight 600 | 1.45 |
 | About degree | `--type-reading` | 14px, weight 500 | 1.6 |
 | Body, records, introductions, course names, metadata values | `--type-reading` | 14px | 1.6 |
 | Navigation, menu, wordmark name, return link | `--type-interface` | 14px | 1.4 |
-| Top-level directory item and Research list title | `--type-subheading` | 18px, weight 400 | 1.45 |
-| Section margin index and directory number | `--type-index` | 18px, weight 400 | 1.45 |
+| Top-level directory item | `--type-subheading` | 18px, weight 500 | 1.45 |
+| Research list title | `--type-subheading` | 18px, weight 600 | 1.45 |
+| Section margin index and directory number | `--type-index` | 10px, weight 400 | 1.5 |
 | Project reading action | `--type-action`, alias of `--type-interface` | 14px, weight 500 | 1.4 |
 | Research prose and table cells | `--type-reading` | 14px | 1.6 |
 | Inline mathematical expression | Relative to surrounding text | 1em | Intrinsic mathematical geometry |
 | Displayed mathematical expression | `--type-math` | 1.15em | Intrinsic mathematical geometry |
 | Field label, footer | `--type-label` | 14px | 1.4 |
 
-Text roles use rem units and scale with the user's text setting. The 22px, 18px,
-and 14px hierarchy stays the same at every viewport across the site and architecture
-viewer; mobile layouts do not reduce type sizes. About, Experience, and Coursework
-headings use zero tracking. General page introductions and article chapter headings
-use -0.02em tracking; article titles use zero. Reading text stays near zero. The shared
-`--reading-leading` supports sustained reading.
+Text roles use rem units and scale with the user's text setting. General titles and
+section headings use 32px on desktop and 28px below 768px, including in the architecture
+viewer. The 18px subheading, 14px reading/interface, 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.
 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.
 
 ### Experience presentation
 
-Experience shares About's Inter family, fixed optical size, role sizes, grid, and
+Experience shares About's Inter headings, Source Serif 4 prose, role sizes, grid, and
 paper/ink palette. It is one page with five numbered sections and an anchor
-directory that stays in one column at every screen width. The directory uses
-full-width rows separated by thin rules, with no leading numbers. Labels use the
-18px subheading size at weight 400. A right-aligned View action appears on hover
+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
+18px subheading size at weight 500. 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. Section margin indices use the shared 18px index role on
+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; thin rules and 28px gaps distinguish entries within them. Category
 introductions are omitted. Summaries use upright
@@ -113,7 +121,7 @@ entry on Experience.
 Research article prose, emphasis, citations, and table cells use the shared 14px
 reading size. Subsection headings use the shared 18px size with weight 600. Inline
 formulas use 1em; standalone formulas use 1.15em. Pure inline numerical values,
-including scientific notation and percentages, use the surrounding Inter family
+including scientific notation and percentages, use the surrounding prose family
 with native superscripts while retaining their accessible MathML and original TeX.
 Genuine expressions retain the mathematical glyph renderer. Subscripts,
 superscripts, fractions, accents, and equation labels retain their mathematical
@@ -171,8 +179,9 @@ emergency wrapping when an unbroken word would exceed its container.
 Coursework opens at `/coursework/` from the View Coursework link below the Education
 records. The link uses a compact dark gray button with visible keyboard focus;
 the About page keeps its `#coursework` anchor around this entrance. The dedicated
-page has a numbered directory and four subject sections, indexed 01 through 04.
-Each section has a 22px category heading and a single-column list of course names
+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 14px reading size and leading. 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
@@ -188,11 +197,11 @@ and standalone link targets.
 About uses compact spacing inside each research or education record and larger
 breaks between its numbered sections. Each Research entry is one manuscript link
 containing its title and complete summary, separated from the next entry by a thin
-rule. Titles use weight 400 without underlines; titles and summaries share black
+rule. Titles use weight 600 without underlines; titles and summaries share black
 ink at rest and turn blue together on hover or keyboard focus. The title supplies
 the link's accessible name. The list omits dates. Paragraphs wrap naturally
 without forced line breaks. Section headings, entry headings, and reading text use
-the shared 22px, 18px, and 14px hierarchy; scoped spacing overrides do not affect other pages.
+the shared heading, 18px subheading, and 14px reading hierarchy; scoped spacing overrides do not affect other pages.
 
 Page titles own the H1 position. About's two-line "Thinking mathematically / Working in AI"
 supplies its main heading; the particle wordmark retains the full name artwork.
@@ -300,16 +309,16 @@ Keep factual claims, metadata, copy, and content order aligned with the integrit
 
 ### Legal articles
 
-Each paper uses the shared shell and Inter type system with a restrained reading
+Each paper uses the shared shell, Inter headings, and Source Serif 4 prose with a restrained reading
 measure. Preserve the source title, subtitle, author name, date, abstract, original
 chapter numbering, paragraph order, legal citations, and acknowledgments. The
 detail-page H1 combines the institution and approved project title; chapters and
 subsections use semantic H2 and H3 headings.
-Chapter headings use the section role at weight 400; subsections use the 18px
+Chapter headings use the section role at weight 500; subsections use the 18px
 subheading role at weight 600. Preserve source capitalization, italics, and emphasis.
 Legal citations within a paragraph use its body size and spacing, including text
 marked as small capitals in the source. Note previews use the same reading role;
-their headings use the section role at weight 400.
+their headings use the section role at weight 500.
 
 A contents navigation links to Key Contributions, the abstract, chapters, and
 footnotes. It occupies a
diff --git a/docs/maintenance.md b/docs/maintenance.md
index 4b3d506..dc76b95 100644
--- a/docs/maintenance.md
+++ b/docs/maintenance.md
@@ -17,13 +17,19 @@ Use Node.js 24 to match deployment. Run application commands from `website/`, or
 | `website/content/` | Maintained content, research source inputs, provenance, and integrity contracts |
 | `website/public/` | Assets included in the static export |
 | `website/source-assets/` | Editable brand masters |
-| `website/scripts/`, `tests/`, `tooling/` | Import, build, verification, and lint utilities |
+| `website/scripts/`, `website/tests/`, `website/tooling/` | Import, build, verification, and lint utilities |
 
 `website/.gitignore` excludes installed dependencies, build output, caches, logs,
 generated Next.js types, and TypeScript build metadata. Keep local screenshots,
 audit logs, and original source documents outside the repository unless they are
 explicitly maintained research inputs. Only visitor-facing assets belong in `public/`.
 
+Documentation has one responsibility per entry point: [the website README](../website/README.md)
+provides setup and a directory map; [design](design.md) defines the visual system;
+this guide owns content and release procedures; [the architecture README](../architecture/README.md)
+owns viewer generation. Keep these guides about the maintained system. Source-version
+history belongs in manuscript provenance, and implementation history belongs in Git.
+
 ## Content ownership and routes
 
 Paths below are relative to `website/`.
@@ -132,8 +138,10 @@ and mobile menu on top-level pages, or one parent link on detail pages. Detail l
 return to the originating Education, Selected Research, or Experience anchor.
 `ArticleReadingLayout`/`ArticleContents` own the article structure and responsive
 navigation. `ExperienceSection` and `ExperienceDetails` keep all categories and
-detail pages consistent. Browser interaction stays in focused client components;
-the About entrance is isolated in `components/dithered-entrance/`.
+detail pages consistent. `SectionDirectory` owns the shared numbered anchor directory
+for Experience and Coursework, including row rules, decorative indices, and View
+feedback for pointer, keyboard, and touch input. Browser interaction stays in focused client components;
+the About entrance is isolated in `app/components/dithered-entrance/`.
 
 `ResearchArticle` serves AI and Selected Research. The Markdown parser supports
 typed prose, emphasis, links, headings, tables, and formulas rather than arbitrary
@@ -142,11 +150,11 @@ the build; no browser math engine is loaded. Original TeX remains in accessible
 annotations. Invalid formulas fail the build. Wide equations and tables scroll
 locally without shrinking the reading text.
 
-Use the shared Inter and typography tokens: 22px general titles and module headings,
-18px institution/project/paper names, top-level directory items, and section indices; 14px prose,
-metadata, and auxiliary navigation. Inline formulas use 1em; displayed formulas
-use 1.15em. Pure inline numbers inherit Inter. These roles remain unchanged on
-mobile. See [design](design.md) for spacing and mathematical geometry.
+Use the semantic typography tokens in `app/globals.css` and the shared font files.
+The [design guide](design.md#color-and-type) defines each role's size, weight, family,
+and responsive behavior. Apply a role by meaning: an institution or paper name is
+a subheading even when it is the page's H1. Shared components own the corresponding
+layout and interaction rules.
 
 When adding content, update its source, loader/slug registry, route mapping, sitemap
 expectations, and output tests together. Experience routes are keyed by stable
@@ -171,10 +179,12 @@ behavior and consumer tests when changing dependencies.
 `npm run optimize:images` produces `public/assets/brand/og-1774.jpg`.
 The repository cover lives in `.github/assets/readme-cover.jpg`.
 
-The Inter variable fonts and SIL Open Font License live in `public/assets/fonts/`.
-The site and architecture viewer load the same stylesheet, with automatic optical
-sizing disabled, the optical axis fixed at 14, and lining numerals. Retain font
-licenses and use separate lettering only for brand artwork.
+The Inter and Source Serif 4 variable fonts and their SIL Open Font Licenses live
+in `public/assets/fonts/`. The site and architecture viewer share `inter.css`;
+Inter retains automatic optical sizing disabled, the optical axis fixed at 14,
+and lining numerals. The main site also loads `source-serif.css` for prose and
+small indices. Keep the architecture tool UI and original particle wordmark in
+Inter. Retain both font licenses when updating or redistributing the assets.
 
 `npm run build` runs Next.js, then `scripts/assemble-static.mjs`. Assembly includes
 the architecture viewer and its license, normalizes segment payload filenames, and
@@ -210,9 +220,9 @@ with Pages write and OIDC permissions confined to the deployment job. Every acti
 is SHA-pinned. After publishing, verify the workflow for the exact commit and read
 back the live routes separately.
 
-Dependabot alerts, secret scanning, and push protection are enabled for the
-repository. Review open dependency and secret alerts when maintaining a release;
-the workflow's dependency audit also checks the installed lockfile on every build.
+Review the repository's Dependabot alerts, secret scanning, and push-protection
+settings when maintaining a release. The workflow's dependency audit checks the
+installed lockfile on every build.
 
 Each exported HTML page receives hashes for its exact inline scripts before any
 script executes. Production CSP blocks arbitrary inline scripts, eval, inline event
diff --git a/website/README.md b/website/README.md
index ba111d4..5dd215d 100644
--- a/website/README.md
+++ b/website/README.md
@@ -1,24 +1,18 @@
 # Website
 
-Theodore Ouyang's personal site, built with Next.js App Router, React, and native CSS.
-The primary navigation contains About and Experience. Twenty-four canonical content
-routes cover these two pages, Coursework, three Selected Research manuscripts, and eighteen
-Experience detail pages. Eight compatibility pages bring the content export to
-thirty-two routes; the architecture viewer makes thirty-three exported routes, excluding
-404. Node.js 24 matches the deployment runtime.
+Theodore Ouyang's personal site uses Next.js App Router, React, TypeScript, and
+native CSS. GitHub Pages serves a static export. About introduces the profile,
+education, and selected research; Experience organizes eighteen projects and roles
+across five fields. Dedicated readers present coursework and research
+articles with mathematical notation, chapter navigation, and legal footnotes.
 
-The design follows Cognition's editorial grid, warm paper color, and fine rules with
-self-hosted Inter. About opens with the interactive name entrance, followed
-by the profile. General page titles and section headings are 22px with 1.25 leading;
-institution, project, and paper names are 18px, including detail-page H1s. Body
-text is 14px with 1.6 leading. Metadata, navigation,
-field labels, and footers also use 14px. Top-level directory labels and section indices
-use 18px. This hierarchy stays the same at every viewport. Inter uses a shared fixed
-optical size of 14 and lining numerals. Inline mathematical expressions use 1em;
-displayed expressions use 1.15em. Pure inline numeric values use Inter while
-preserving their original TeX in accessible MathML.
-View Coursework below Education opens a dedicated page containing all 49 courses
-in four subject groups. Each group uses one column at every width.
+The visual system pairs Inter headings with Source Serif 4 prose, a warm paper
+background, and a restrained editorial grid. The original interactive name entrance
+opens About. Experience and Coursework share a numbered section directory.
+
+## Local development
+
+Use Node.js 24 to match deployment. Run these commands from the repository root:
 
 ```sh
 cd website
@@ -26,55 +20,46 @@ npm ci --ignore-scripts
 npm run dev
 ```
 
+For the production export:
+
+```sh
+npm run check
+npm run typecheck
+npm audit --audit-level=low
+npm run preview:static
+```
+
+`check` verifies protected sources, lints, builds, tests the exported artifact, and
+checks visible text and metadata. The static preview serves `out/` at
+`http://127.0.0.1:8123`. Pull requests run validation; pushes to `main` also deploy
+the assembled export through the Pages workflow.
+
+## Application structure
+
 | Directory | Responsibility |
 | --- | --- |
-| `app/` | Pages, shared shell and research readers, content registry, and client interactions |
-| `content/` | Experience copy, research manuscripts, authoritative source material, and integrity manifests |
-| `public/` | Assets served directly by GitHub Pages |
+| `app/` | Pages, shared navigation and readers, content loaders, and client interactions |
+| `content/` | Maintained copy, research manuscripts, source provenance, and integrity manifests |
+| `public/` | Assets served directly with the static site |
 | `source-assets/` | Editable brand masters |
-| `scripts/` | Content checks, asset generation, build assembly, and local preview |
-| `tests/` | Static output, interaction, and repository policy checks |
+| `scripts/` | Content import and validation, asset generation, build assembly, and local preview |
+| `tests/` | Content, rendering, interaction, static output, and repository policy checks |
 | `tooling/` | Private build and lint utilities |
 
-`npm run check` verifies protected sources, lints, builds, tests the export, and
-checks visible text and metadata. `npm run preview:static` serves `out/` on
-`http://127.0.0.1:8123`.
-
-`npm run typecheck` validates TypeScript and `npm audit --audit-level=low` checks
-dependency advisories. Browser interaction in the main site is limited to the
-interactive name entrance, top-level navigation menu, shared article contents, and legal-note
-previews. Article links and site navigation also work without JavaScript.
-Detail pages retain the wordmark and a visible parent link in the navigation rail;
-on phones, that link stays in the header without a Menu toggle.
-
-About's three Selected Research entries link to on-site manuscripts and include
-concise research summaries. Critical Dependence Stress for Portfolio Diversification
-appears first, followed by the Asian-options and Rough Heston papers. Article headers
-contain the title, GitHub link, and Full Manuscript link. Back to Selected Research
-appears in the navigation rail. Reading content
-starts at Abstract; pre-abstract front matter remains in the protected source.
-The pages include the core chapters and references: chapters 1–5 for dependence
-stress, 1–10 for Asian options, and 1–8 for Rough Heston. Appendices and supporting
-material are linked on GitHub. The JSON files in `content/selected-research/` record
-the exact source commit, blob, and manuscript URL for each imported paper. Frozen
-manuscript evidence lives in `content/sources/selected-research/`. The dependence-stress
-paper has its own TeX sources and provenance in the `dependence/` subdirectory and
-uses `scripts/import-dependence-research.mjs` for deterministic import.
+Content is maintained in its source document or data file and passed through shared
+loaders. AI and Selected Research articles have deterministic importers; their
+generated JSON records the corresponding source version. Read the content ownership
+table in the maintenance guide before editing generated article data.
 
-`content/experience-showcase.json` holds the approved English copy for all eighteen
-Experience entries. `app/lib/content/experience-domains.ts` defines the five categories;
-`app/lib/content/experience-showcase.ts` maps entries to their detail pages. Each page
-starts with Position, Location, Dates, and Key Contributions. The four AI and four
-legal pages continue into their protected manuscripts.
+The main site's browser interactions are the name entrance, top-level navigation
+menu, article contents, and legal-note previews. Page content, ordinary navigation,
+chapter links, and endnotes also work without JavaScript. The build includes the
+standalone architecture viewer.
 
-The four AI entries share one authoritative manuscript:
-`content/sources/ai-portfolio/ai-research-and-engineering.md`. Edit that file and run
-`node scripts/import-ai-portfolio.mjs` from `website/` to generate their briefs,
-disclosures, contributions, architectural contexts, nested method lists, and
-mathematical bodies. The importer validates the document structure before writing
-the generated JSON. Tests independently compare all text, citation links, tables,
-and TeX with this source and check the exported mathematical rendering.
+## Maintained references
 
-The build includes the standalone [architecture viewer](../architecture/).
-See [maintenance](../docs/maintenance.md) for routes, publishing, and extension
-guidance, and [design](../docs/design.md) for the visual system.
+- [Design](../docs/design.md): typography, layout, identity, and interaction rules.
+- [Maintenance](../docs/maintenance.md): content ownership, import commands, routes,
+  assets, validation, security, and publishing.
+- [Architecture](../architecture/README.md): system-map definition, viewer generation,
+  and export integration.
diff --git a/website/app/components/SectionDirectory.module.css b/website/app/components/SectionDirectory.module.css
new file mode 100644
index 0000000..a2753d7
--- /dev/null
+++ b/website/app/components/SectionDirectory.module.css
@@ -0,0 +1,83 @@
+.directory {
+  display: grid;
+  grid-template-columns: 1fr;
+  margin-top: 24px;
+  font-family: var(--font-text);
+}
+
+.directory a {
+  display: grid;
+  grid-template-columns: 1rem minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: 16px;
+  width: 100%;
+  min-height: 68px;
+  padding-block: 20px;
+  border-top: 1px solid var(--rule);
+  color: var(--ink);
+  font-size: var(--type-subheading);
+  font-weight: 500;
+  line-height: var(--subheading-leading);
+  transition: color 180ms var(--ease-out);
+}
+
+.index {
+  color: var(--muted);
+  font-family: var(--font-prose);
+  font-size: var(--type-index);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.title {
+  min-width: 0;
+}
+
+.action {
+  font-size: var(--type-action);
+  font-weight: 400;
+  line-height: var(--interface-leading);
+  opacity: 0;
+  transition: opacity 180ms var(--ease-out);
+}
+
+.directory a:focus-visible,
+.directory a:active {
+  color: var(--accent);
+}
+
+.directory a:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 4px;
+}
+
+.directory a:focus-visible .action,
+.directory a:active .action {
+  opacity: 1;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .directory a:hover {
+    color: var(--accent);
+  }
+
+  .directory a:hover .action {
+    opacity: 1;
+  }
+}
+
+@media (hover: none), (pointer: coarse) {
+  .action {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .directory a,
+  .action {
+    transition: none;
+  }
+}
diff --git a/website/app/components/SectionDirectory.tsx b/website/app/components/SectionDirectory.tsx
new file mode 100644
index 0000000..b7f31d8
--- /dev/null
+++ b/website/app/components/SectionDirectory.tsx
@@ -0,0 +1,24 @@
+import styles from "./SectionDirectory.module.css";
+
+type DirectoryItem = {
+  number: string;
+  title: string;
+  href: string;
+};
+
+export function SectionDirectory({ label, items }: {
+  label: string;
+  items: readonly DirectoryItem[];
+}) {
+  return (
+    <nav className={styles.directory} aria-label={label}>
+      {items.map((item) => (
+        <a href={item.href} key={item.href}>
+          <span className={styles.index} aria-hidden="true">{item.number}</span>
+          <span className={styles.title}>{item.title}</span>
+          <span className={styles.action} aria-hidden="true">View</span>
+        </a>
+      ))}
+    </nav>
+  );
+}
diff --git a/website/app/components/experience/Experience.module.css b/website/app/components/experience/Experience.module.css
index fa76ecf..a64cea8 100644
--- a/website/app/components/experience/Experience.module.css
+++ b/website/app/components/experience/Experience.module.css
@@ -7,40 +7,16 @@
   margin: 0;
   font-size: var(--type-title);
   line-height: var(--title-leading);
-  font-weight: 400;
-  letter-spacing: 0;
-}
-.directory { display: grid; grid-template-columns: 1fr; margin-top: 24px; }
-.directory a {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-height: 68px;
-  padding-block: 20px;
-  border-top: 1px solid var(--rule);
-  gap: 24px;
-  color: var(--ink);
-  font-size: var(--type-subheading);
-  line-height: var(--subheading-leading);
-  transition: color 180ms var(--ease-out);
-}
-.directoryTitle { min-width: 0; }
-.directoryAction {
-  flex-shrink: 0;
-  font-size: var(--type-action);
-  line-height: var(--interface-leading);
-  opacity: 0;
-  transition: opacity 180ms var(--ease-out);
+  font-weight: 500;
+  letter-spacing: -0.02em;
 }
-.directory a:focus-visible,
-.directory a:active { color: var(--accent); }
-.directory a:focus-visible .directoryAction,
-.directory a:active .directoryAction { opacity: 1; }
 .sectionIndex {
   color: var(--muted);
+  font-family: var(--font-prose);
   font-size: var(--type-index);
-  line-height: var(--subheading-leading);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0;
   font-variant-numeric: tabular-nums;
 }
 .section {
@@ -56,9 +32,9 @@
 .sectionTitle {
   margin: 0 0 28px;
   font-size: var(--type-heading);
-  font-weight: 400;
+  font-weight: 500;
   line-height: var(--heading-leading);
-  letter-spacing: 0;
+  letter-spacing: -0.02em;
   text-wrap: balance;
 }
 .entry { scroll-margin-top: 40px; }
@@ -72,6 +48,13 @@
   text-wrap: balance;
 }
 .summary { margin: 10px 0 0; font-size: var(--type-reading); line-height: var(--reading-leading); text-wrap: pretty; }
+.summary,
+.indexDisclosure p,
+.disclosure p,
+.architecturalContext p,
+.contributions > ul {
+  font-family: var(--font-prose);
+}
 .indexDisclosure { margin-bottom: 28px; }
 .indexDisclosure h3, .disclosure h2 {
   margin: 0 0 10px;
@@ -90,8 +73,8 @@
   margin: 0 0 16px;
   font-size: var(--type-heading);
   line-height: var(--heading-leading);
-  font-weight: 400;
-  letter-spacing: 0;
+  font-weight: 500;
+  letter-spacing: -0.02em;
   scroll-margin-top: 6rem;
 }
 .architecturalContext p + p { margin-top: 16px; }
@@ -115,7 +98,7 @@
   cursor: pointer;
 }
 .readMore svg { width: 14px; height: 14px; flex-shrink: 0; }
-.readMore:focus-visible, .directory a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
+.readMore:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
 .detailPage { max-width: var(--reading-measure); }
 .detailHeader { margin-bottom: 3rem; }
 .detailPage .detailHeader h1 { font-size: var(--type-subheading); font-weight: 600; line-height: var(--subheading-leading); letter-spacing: 0; }
@@ -138,9 +121,9 @@
 .contributions h2 {
   margin: 0 0 16px;
   font-size: var(--type-heading);
-  font-weight: 400;
+  font-weight: 500;
   line-height: var(--heading-leading);
-  letter-spacing: 0;
+  letter-spacing: -0.02em;
   scroll-margin-top: 6rem;
 }
 .contributions > ul {
@@ -163,11 +146,7 @@
   line-height: var(--reading-leading);
 }
 @media (hover: hover) and (pointer: fine) {
-  .readMore:hover, .directory a:hover { color: var(--accent); text-decoration-color: var(--accent); }
-  .directory a:hover .directoryAction { opacity: 1; }
-}
-@media (hover: none), (pointer: coarse) {
-  .directoryAction { opacity: 1; }
+  .readMore:hover { color: var(--accent); text-decoration-color: var(--accent); }
 }
 @media (768px <= width < 1024px) {
   .section { grid-template-columns: repeat(9, minmax(0, 1fr)); }
@@ -176,7 +155,6 @@
 @media (width < 768px) {
   .frame :global(.content-column) { padding-top: 52px; }
   .intro { margin-bottom: 32px; }
-  .directory { grid-template-columns: 1fr; }
   .section { display: block; padding: 36px 0 44px; scroll-margin-top: 6rem; }
   .sectionIndex { display: block; margin-bottom: 10px; }
   .sectionTitle { margin-bottom: 24px; }
@@ -187,8 +165,3 @@
 @media (width < 420px) {
   .metadata > div { grid-template-columns: 1fr; gap: 3px; }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .directory a,
-  .directoryAction { transition: none; }
-}
diff --git a/website/app/components/experience/ExperienceContent.tsx b/website/app/components/experience/ExperienceContent.tsx
index 45d1962..7432842 100644
--- a/website/app/components/experience/ExperienceContent.tsx
+++ b/website/app/components/experience/ExperienceContent.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { showcaseDomains, type ShowcaseDomain, type ShowcaseEntry } from "../../lib/content/experience-showcase";
 import { InlineMarkdown } from "../research/ResearchInline";
+import { SectionDirectory } from "../SectionDirectory";
 import styles from "./Experience.module.css";
 
 function ReadingArrow() {
@@ -37,15 +38,12 @@ export function ExperienceContent() {
   return (
     <>
       <header className={styles.intro}>
-        <h1>Experience</h1>
-        <nav className={styles.directory} aria-label="Experience sections">
-          {showcaseDomains.map((domain) => (
-            <a href={`#${domain.slug}`} key={domain.number}>
-              <span className={styles.directoryTitle}>{domain.name}</span>
-              <span className={styles.directoryAction} aria-hidden="true">View</span>
-            </a>
-          ))}
-        </nav>
+        <h1>Experience: Areas of Focus</h1>
+        <SectionDirectory label="Experience sections" items={showcaseDomains.map((domain) => ({
+          number: domain.number,
+          title: domain.name,
+          href: `#${domain.slug}`,
+        }))} />
       </header>
       {showcaseDomains.map((domain) => <ExperienceSection domain={domain} key={domain.number} />)}
     </>
diff --git a/website/app/components/research/ResearchArticle.module.css b/website/app/components/research/ResearchArticle.module.css
index 69c6103..4f216b1 100644
--- a/website/app/components/research/ResearchArticle.module.css
+++ b/website/app/components/research/ResearchArticle.module.css
@@ -1,5 +1,6 @@
 .frontMatter {
   margin-top: 1.5rem;
+  font-family: var(--font-prose);
   font-size: var(--type-reading);
   line-height: var(--reading-leading);
 }
diff --git a/website/app/coursework/coursework.module.css b/website/app/coursework/coursework.module.css
index 2257c23..b89653a 100644
--- a/website/app/coursework/coursework.module.css
+++ b/website/app/coursework/coursework.module.css
@@ -15,37 +15,9 @@
 .sectionBody h2 {
   margin: 0;
   font-size: var(--type-heading);
-  font-weight: 400;
+  font-weight: 500;
   line-height: var(--heading-leading);
-  letter-spacing: 0;
-}
-
-.directory {
-  display: grid;
-  margin-top: 24px;
-}
-
-.directory a {
-  display: flex;
-  align-items: baseline;
-  gap: 16px;
-  min-height: 44px;
-  padding: 8px 0;
-  font-size: var(--type-subheading);
-  line-height: var(--subheading-leading);
-}
-
-.directoryIndex {
-  flex: 0 0 2.5ch;
-  color: var(--muted);
-  font-size: var(--type-index);
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.directory a:focus-visible,
-.directory a:active {
-  color: var(--accent);
+  letter-spacing: -0.02em;
 }
 
 .section {
@@ -66,8 +38,11 @@
   grid-column: 1;
   padding-top: 1px;
   color: var(--muted);
+  font-family: var(--font-prose);
   font-size: var(--type-index);
-  line-height: var(--subheading-leading);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0;
   font-variant-numeric: tabular-nums;
 }
 
@@ -87,6 +62,7 @@
   padding: 0;
   list-style: none;
   color: var(--ink);
+  font-family: var(--font-prose);
   font-size: var(--type-reading);
   line-height: var(--reading-leading);
 }
@@ -96,12 +72,6 @@
   border-top: 1px solid var(--rule);
 }
 
-@media (hover: hover) and (pointer: fine) {
-  .directory a:hover {
-    color: var(--accent);
-  }
-}
-
 @media (768px <= width < 1024px) {
   .section {
     grid-template-columns: repeat(9, minmax(0, 1fr));
diff --git a/website/app/coursework/page.tsx b/website/app/coursework/page.tsx
index ef1e24c..7acb4d8 100644
--- a/website/app/coursework/page.tsx
+++ b/website/app/coursework/page.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { SiteShell } from "../components/SiteShell";
+import { SectionDirectory } from "../components/SectionDirectory";
 import { courseworkGroups } from "../lib/content/about";
 import { createPageMetadata } from "../lib/content/site";
 import styles from "./coursework.module.css";
@@ -22,14 +23,11 @@ export default function CourseworkPage() {
     <SiteShell active="about" parent={{ href: "/#education", label: "Education" }} frameClassName={styles.frame}>
       <header className={styles.intro}>
         <h1>Selected Coursework</h1>
-        <nav className={styles.directory} aria-label="Coursework sections">
-          {courseworkGroups.map((group, index) => (
-            <a key={group.title} href={`#${sectionIds[index]}`}>
-              <span className={styles.directoryIndex} aria-hidden="true">{String(index + 1).padStart(2, "0")}</span>
-              <span>{group.title}</span>
-            </a>
-          ))}
-        </nav>
+        <SectionDirectory label="Coursework sections" items={courseworkGroups.map((group, index) => ({
+          number: String(index + 1).padStart(2, "0"),
+          title: group.title,
+          href: `#${sectionIds[index]}`,
+        }))} />
       </header>
 
       {courseworkGroups.map((group, index) => (
diff --git a/website/app/globals.css b/website/app/globals.css
index df667d0..d03ec57 100644
--- a/website/app/globals.css
+++ b/website/app/globals.css
@@ -9,10 +9,10 @@
   --rule-strong: rgba(0, 0, 0, 0.24);
   --accent: #2200ff;
   --dither: #070707;
-  --type-title: 1.375rem;
-  --type-heading: 1.375rem;
+  --type-title: 2rem;
+  --type-heading: 2rem;
   --type-subheading: 1.125rem;
-  --type-index: 1.125rem;
+  --type-index: 0.625rem;
   --type-reading: 0.875rem;
   --type-label: 0.875rem;
   --type-interface: 0.875rem;
@@ -20,8 +20,8 @@
   --type-math: 1.15em;
   --reading-measure: 720px;
   --rail-min-width: calc(5 * var(--type-interface) + 13px + clamp(20px, 2vw, 24px) + 22px + 10px);
-  --title-leading: 1.25;
-  --heading-leading: 1.25;
+  --title-leading: 1.2;
+  --heading-leading: 1.2;
   --subheading-leading: 1.45;
   --reading-leading: 1.6;
   --interface-leading: 1.4;
@@ -59,6 +59,12 @@ body.menu-open {
   overflow: hidden;
 }
 
+h1,
+h2,
+h3 {
+  font-family: var(--font-text);
+}
+
 strong,
 b {
   font-weight: 600;
@@ -397,7 +403,7 @@ button:focus-visible {
 .page-intro h1 {
   margin: 0;
   color: var(--ink);
-  font-weight: 400;
+  font-weight: 500;
   letter-spacing: -0.02em;
   text-wrap: balance;
 }
@@ -422,6 +428,7 @@ button:focus-visible {
 .lede {
   margin: 27px 0 0;
   color: var(--ink);
+  font-family: var(--font-prose);
   font-size: var(--type-reading);
   line-height: var(--reading-leading);
 }
@@ -452,6 +459,7 @@ button:focus-visible {
 .entry-subtitle,
 .education-note {
   margin: 6px 0 0;
+  font-family: var(--font-prose);
   font-size: var(--type-reading);
   line-height: var(--reading-leading);
 }
@@ -572,8 +580,8 @@ button:focus-visible {
 
 @media (width < 768px) {
   :root {
-    --type-title: 1.375rem;
-    --type-heading: 1.375rem;
+    --type-title: 1.75rem;
+    --type-heading: 1.75rem;
   }
 
   html {
diff --git a/website/app/home.module.css b/website/app/home.module.css
index 711ca0d..49737fa 100644
--- a/website/app/home.module.css
+++ b/website/app/home.module.css
@@ -43,18 +43,20 @@
   margin: 0;
   padding-top: 1px;
   color: var(--muted);
+  font-family: var(--font-prose);
   font-size: var(--type-index);
+  font-weight: 400;
   font-variant-numeric: tabular-nums;
-  line-height: var(--subheading-leading);
-  letter-spacing: 0.015em;
+  line-height: 1.5;
+  letter-spacing: 0;
   user-select: none;
 }
 
 .identity h1 {
   margin: 0;
   font-size: var(--type-title);
-  font-weight: 400;
-  letter-spacing: 0;
+  font-weight: 500;
+  letter-spacing: -0.02em;
   line-height: var(--title-leading);
   text-wrap: balance;
 }
@@ -65,6 +67,7 @@
 
 .biographyCopy {
   margin-top: 24px;
+  font-family: var(--font-prose);
   font-size: var(--type-reading);
   line-height: var(--reading-leading);
   text-wrap: pretty;
@@ -81,9 +84,9 @@
 .sectionTitle {
   margin: 0 0 24px;
   font-size: var(--type-heading);
-  font-weight: 400;
+  font-weight: 500;
   line-height: var(--heading-leading);
-  letter-spacing: 0;
+  letter-spacing: -0.02em;
 }
 
 .researchEntry {
@@ -119,13 +122,13 @@
 .researchSummary {
   margin: 8px 0 0;
   color: inherit;
+  font-family: var(--font-prose);
   font-size: var(--type-reading);
   line-height: var(--reading-leading);
   text-wrap: pretty;
 }
 
 .researchTitle {
-  font-weight: 400;
   text-wrap: pretty;
 }
 
diff --git a/website/app/layout.tsx b/website/app/layout.tsx
index 035aeb6..8f84258 100644
--- a/website/app/layout.tsx
+++ b/website/app/layout.tsx
@@ -7,6 +7,7 @@ import {
   absoluteUrl,
 } from "./lib/content/site";
 import "../public/assets/fonts/inter.css";
+import "../public/assets/fonts/source-serif.css";
 import "./globals.css";
 
 const DEVELOPMENT_SECURITY_POLICY = [
diff --git a/website/app/past-experience/components/LegalPaperPage.module.css b/website/app/past-experience/components/LegalPaperPage.module.css
index f98b290..5fcce28 100644
--- a/website/app/past-experience/components/LegalPaperPage.module.css
+++ b/website/app/past-experience/components/LegalPaperPage.module.css
@@ -44,6 +44,21 @@
   border-top: 1px solid var(--rule-strong);
 }
 
+.abstract,
+.manuscriptAbstract,
+.body,
+.footnotes {
+  font-family: var(--font-prose);
+}
+
+.contents,
+.manuscriptByline,
+.backlinks,
+.authorNote > div > a,
+.paperFooter {
+  font-family: var(--font-text);
+}
+
 .contents {
   margin-bottom: 2rem;
   padding: 0.5rem 0;
@@ -57,7 +72,7 @@
 .footnotes h2 {
   margin: 0 0 1.25rem;
   font-size: var(--type-heading);
-  font-weight: 400;
+  font-weight: 500;
   line-height: var(--heading-leading);
   letter-spacing: -0.02em;
   text-wrap: balance;
@@ -296,7 +311,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@media (width < 768px) {
   .header {
     margin-bottom: 2rem;
   }
diff --git a/website/app/past-experience/components/LegalPaperReader.module.css b/website/app/past-experience/components/LegalPaperReader.module.css
index 6776055..553567a 100644
--- a/website/app/past-experience/components/LegalPaperReader.module.css
+++ b/website/app/past-experience/components/LegalPaperReader.module.css
@@ -44,7 +44,7 @@
   max-width: 100%;
   margin: 0;
   font-size: var(--type-heading);
-  font-weight: 400;
+  font-weight: 500;
   line-height: var(--heading-leading);
   letter-spacing: -0.02em;
 }
@@ -76,6 +76,7 @@
 
 .content {
   min-height: 0;
+  font-family: var(--font-prose);
   padding: 0 1.5rem 1.5rem;
   overflow-y: auto;
   overflow-wrap: anywhere;
diff --git a/website/content/protected-sources.json b/website/content/protected-sources.json
index 7030176..1f8b2b3 100644
--- a/website/content/protected-sources.json
+++ b/website/content/protected-sources.json
@@ -3,7 +3,7 @@
   "normalization": "LF",
   "sources": {
     "app/experience/page.tsx": "993f5aa641588d4cd2d5ea7ef7d7826e1b5cafbd06b1bc2bc704f802e23df777",
-    "app/components/experience/ExperienceContent.tsx": "0673dc16794a98f134eda5ba400c9115dbec4a52a781971b27c1e8b3f87dd674",
+    "app/components/experience/ExperienceContent.tsx": "cdac8faf9025e6ce8d5aaa7ffa1687cf4ede045d18fc416dd15c3135efb53790",
     "app/components/experience/ExperienceDetails.tsx": "a47f62f2a973e7681684d757b8c31017634ee00c2cd7dced8affd2a832109540",
     "app/lib/content/experience-showcase.ts": "c769e21ec5ba92d66d439746d1090eee5c83ea129e69b30b21943d18325512dd",
     "content/experience-showcase.json": "5003dd0195067ee81adff9cc80ec70f7b35d474f1d717e6da0ba9e1eff8f33f3",
@@ -45,6 +45,6 @@
     "scripts/import-ai-portfolio.mjs": "2279e6dfe815b467d59effe6c8b333a61a6bbf605e9d5bdfa2c01d9fefc1498c",
     "app/lib/content/research-number.ts": "2d29d06ffde33580bd5e655b547b28c953d64b0d2b0fa7fe31663da68dd1276b",
     "content/sources/ai-portfolio/ai-research-and-engineering.md": "bc688374f1ca56e7c5eafbd06a7f33e6d7d752f4c8d0dd98b05f30164921405d",
-    "app/coursework/page.tsx": "0a975c5e8d446b0e66852015bcb3ffc7ef761665d8b7904a42d690d6f1d2a4b6"
+    "app/coursework/page.tsx": "0d061cfb681b1975f96c92d609f35dff15ab53a86451372569e8f14cb7eaef14"
   }
 }
diff --git a/website/content/visible-copy-manifest.json b/website/content/visible-copy-manifest.json
index cb23cfe..786077c 100644
--- a/website/content/visible-copy-manifest.json
+++ b/website/content/visible-copy-manifest.json
@@ -766,10 +766,10 @@
       "formulaCount": 965
     },
     "/experience/": {
-      "textSha256": "c349e74c97508d15322ef97b96fac8a281eaf8dfcc7ac1de366d16d38d17433a",
-      "characterCount": 12686,
-      "wordCount": 1615,
-      "preview": "Skip to main content Theodore Ouyang About Experience Experience AI Research and Engineering Data Science Legal Research and Policy Analysis Finance and Consult",
+      "textSha256": "599369625e0647cd1c25327a0de3acb3c0fcde39dcf6f998122dcddd5b8cc873",
+      "characterCount": 12702,
+      "wordCount": 1618,
+      "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": [
         "Theodore Ouyang home",
@@ -1016,10 +1016,10 @@
       }
     },
     "/past-experience/": {
-      "textSha256": "c349e74c97508d15322ef97b96fac8a281eaf8dfcc7ac1de366d16d38d17433a",
-      "characterCount": 12686,
-      "wordCount": 1615,
-      "preview": "Skip to main content Theodore Ouyang About Experience Experience AI Research and Engineering Data Science Legal Research and Policy Analysis Finance and Consult",
+      "textSha256": "599369625e0647cd1c25327a0de3acb3c0fcde39dcf6f998122dcddd5b8cc873",
+      "characterCount": 12702,
+      "wordCount": 1618,
+      "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": [
         "Theodore Ouyang home",
@@ -1780,10 +1780,10 @@
       }
     },
     "/now/": {
-      "textSha256": "c349e74c97508d15322ef97b96fac8a281eaf8dfcc7ac1de366d16d38d17433a",
-      "characterCount": 12686,
-      "wordCount": 1615,
-      "preview": "Skip to main content Theodore Ouyang About Experience Experience AI Research and Engineering Data Science Legal Research and Policy Analysis Finance and Consult",
+      "textSha256": "599369625e0647cd1c25327a0de3acb3c0fcde39dcf6f998122dcddd5b8cc873",
+      "characterCount": 12702,
+      "wordCount": 1618,
+      "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": [
         "Theodore Ouyang home",
diff --git a/website/public/assets/fonts/SourceSerif4-LICENSE.md b/website/public/assets/fonts/SourceSerif4-LICENSE.md
new file mode 100644
index 0000000..5871e1f
--- /dev/null
+++ b/website/public/assets/fonts/SourceSerif4-LICENSE.md
@@ -0,0 +1,93 @@
+Copyright 2014 - 2023 Adobe (http://www.adobe.com/), with Reserved Font Name ‘Source’. All Rights Reserved. Source is a trademark of Adobe in the United States and/or other countries.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/website/public/assets/fonts/SourceSerif4Variable-Italic.woff2 b/website/public/assets/fonts/SourceSerif4Variable-Italic.woff2
new file mode 100644
index 0000000..9fcf474
Binary files /dev/null and b/website/public/assets/fonts/SourceSerif4Variable-Italic.woff2 differ
diff --git a/website/public/assets/fonts/SourceSerif4Variable-Roman.woff2 b/website/public/assets/fonts/SourceSerif4Variable-Roman.woff2
new file mode 100644
index 0000000..cca344b
Binary files /dev/null and b/website/public/assets/fonts/SourceSerif4Variable-Roman.woff2 differ
diff --git a/website/public/assets/fonts/source-serif.css b/website/public/assets/fonts/source-serif.css
new file mode 100644
index 0000000..f983c9c
--- /dev/null
+++ b/website/public/assets/fonts/source-serif.css
@@ -0,0 +1,25 @@
+/*
+ * Source Serif 4, version 4.005R; SIL Open Font License 1.1.
+ * https://github.com/adobe-fonts/source-serif/releases/tag/4.005R
+ * Original files: WOFF2/VAR/SourceSerif4Variable-{Roman,Italic}.ttf.woff2
+ * See SourceSerif4-LICENSE.md for the complete license.
+ */
+@font-face {
+  font-family: "Source Serif 4";
+  font-style: normal;
+  font-weight: 200 900;
+  font-display: swap;
+  src: url("/assets/fonts/SourceSerif4Variable-Roman.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Source Serif 4";
+  font-style: italic;
+  font-weight: 200 900;
+  font-display: swap;
+  src: url("/assets/fonts/SourceSerif4Variable-Italic.woff2") format("woff2");
+}
+
+:root {
+  --font-prose: "Source Serif 4", Georgia, serif;
+}
diff --git a/website/scripts/integrate-architecture.mjs b/website/scripts/integrate-architecture.mjs
index a4c52b6..acf80c7 100644
--- a/website/scripts/integrate-architecture.mjs
+++ b/website/scripts/integrate-architecture.mjs
@@ -161,7 +161,8 @@ let source = original.replaceAll(".card h3", ".card h2")
   .replace(/(<div class="card-header">[\s\S]*?)<h3>([^<]+)<\/h3>/gu, "$1<h2>$2</h2>")
   .replace(/\n(?:      \/\/[^\n]*\n)+      try \{\n        if \(new URLSearchParams\(window\.location\.search\)\.get\('openExport'\) === '1'\) \{[\s\S]*?\n      \} catch \(_\) \{\}/u, "");
 assert.equal((source.match(/<h2>/gu) ?? []).length, 3, "Expected three major information cards.");
-source = source.replace(/(\.card h2\s*\{[^}]*font-weight:)\s*[^;]+;/gu, "$1 400;");
+source = source.replace(/(\.card h2\s*\{[^}]*font-weight:)\s*[^;]+;/gu, "$1 500;");
+source = source.replace(/(line-height: var\(--(?:title|heading)-leading\);\s+font-weight:)\s*\d+;/gu, "$1 500;");
 source = source.replace(/(\.semantic-passport-reach-actions strong\s*\{[^}]*font-size:)\s*[^;]+;/gu,
   "$1 var(--type-interface);");
 source = source.replace(/(\.semantic-passport-reach-actions strong\s*\{[^}]*line-height:)\s*[^;]+;/gu,
@@ -207,7 +208,7 @@ if (source.includes("data-site-typography")) {
       } else {
         updated = updated.replace(/font-size:[^;]+;/u, (size) => `${size}\n      line-height: var(--${role}-leading);`);
       }
-      if (role === "title") updated = updated.replace(/font-weight:\s*[^;}]+;/gu, "font-weight: 400;");
+      if (role === "title" || role === "heading") updated = updated.replace(/font-weight:\s*[^;}]+;/gu, "font-weight: 500;");
       return `${selector}{${updated}}`;
     });
     css = replaceOnce(css, /    body \{\n/u,
diff --git a/website/tests/rendered-html.test.mjs b/website/tests/rendered-html.test.mjs
index d4259d8..d673c53 100644
--- a/website/tests/rendered-html.test.mjs
+++ b/website/tests/rendered-html.test.mjs
@@ -119,7 +119,11 @@ const EXPECTED_PUBLIC_ASSETS = [
   "assets/fonts/InterVariable-Italic.woff2",
   "assets/fonts/InterVariable.woff2",
   "assets/fonts/LICENSE.txt",
+  "assets/fonts/SourceSerif4-LICENSE.md",
+  "assets/fonts/SourceSerif4Variable-Italic.woff2",
+  "assets/fonts/SourceSerif4Variable-Roman.woff2",
   "assets/fonts/inter.css",
+  "assets/fonts/source-serif.css",
   "assets/research/dependence/budget-comparison.png",
   "assets/research/dependence/corner-capacity.png",
   "assets/research/dependence/optimal-flow-shares.png",
@@ -554,16 +558,19 @@ test("Experience presents five numbered sections and all eighteen approved entri
   assert.deepEqual(expected.map(({ keyContributions }) => keyContributions.length), [7, 5, 6, 6, 9, 7, 6, 5, 5, 5, 5, 7, 5, 6, 1, 1, 2, 4]);
   assert.deepEqual(experienceEntries(html).map(({ id }) => id), expected.map(({ id }) => id));
   assert.equal(openingTags(html, "h1").length, 1);
-  assert.match(html, /<h1>Experience<\/h1>/u);
+  assert.match(html, /<h1>Experience: Areas of Focus<\/h1>/u);
   const directory = [...html.matchAll(/<nav\b([^>]*)>([\s\S]*?)<\/nav>/giu)]
     .find((match) => attribute(match[1], "aria-label") === "Experience sections");
   assert.ok(directory);
   const sectionLinks = [...directory[2].matchAll(/<a\b([^>]*)>([\s\S]*?)<\/a>/giu)];
   assert.deepEqual(sectionLinks.map((match) => attribute(match[1], "href")), DOMAINS.map(([, slug]) => `#${slug}`));
   for (const [index, [name, slug, ids]] of DOMAINS.entries()) {
+    const number = String(index + 1).padStart(2, "0");
     const directoryLabels = [...sectionLinks[index][2].matchAll(/<span\b([^>]*)>([\s\S]*?)<\/span>/gu)];
-    assert.deepEqual(directoryLabels.map((match) => stripMarkup(match[2])), [name, "View"]);
-    assert.equal(attribute(directoryLabels[1][1], "aria-hidden"), "true", "The repeated visual action must not lengthen each section link's accessible name.");
+    assert.deepEqual(directoryLabels.map((match) => stripMarkup(match[2])), [number, name, "View"]);
+    assert.equal(attribute(directoryLabels[0][1], "aria-hidden"), "true", "The decorative number must not lengthen the section link's accessible name.");
+    assert.notEqual(attribute(directoryLabels[1][1], "aria-hidden"), "true", "The domain title supplies the section link's accessible name.");
+    assert.equal(attribute(directoryLabels[2][1], "aria-hidden"), "true", "The repeated visual action must not lengthen each section link's accessible name.");
     assert.ok(openingTags(html, "section").some((tag) => attribute(tag, "id") === slug));
     assert.equal(stripMarkup(elementHtmlById(html, `${slug}-heading`)), name);
     assert.deepEqual(expected.filter(({ categoryId }) => categoryId === String(index + 1).padStart(2, "0")).map(({ id }) => id), ids);
@@ -839,7 +846,11 @@ test("About preserves both degrees and the advisor record while linking to all 4
   assert.equal(lists.reduce((total, list) => total + (list[2].match(/<li\b/giu) ?? []).length, 0), 49);
   for (const [index, group] of courseworkGroups.entries()) {
     const number = String(index + 1).padStart(2, "0");
-    assert.equal(inlineText(links[index][2]), `${number}${group.title}`);
+    const directoryLabels = [...links[index][2].matchAll(/<span\b([^>]*)>([\s\S]*?)<\/span>/gu)];
+    assert.deepEqual(directoryLabels.map((match) => stripMarkup(match[2])), [number, group.title, "View"]);
+    assert.equal(attribute(directoryLabels[0][1], "aria-hidden"), "true", "The decorative number must not lengthen the section link's accessible name.");
+    assert.notEqual(attribute(directoryLabels[1][1], "aria-hidden"), "true", "The coursework category supplies the section link's accessible name.");
+    assert.equal(attribute(directoryLabels[2][1], "aria-hidden"), "true", "The repeated visual action must not lengthen each section link's accessible name.");
     const section = elementHtmlById(html, categories[index]);
     assert.match(section, new RegExp(`aria-hidden="true"[^>]*>${number}<`, "u"));
     assert.equal(stripMarkup(section.match(/<h2\b[^>]*>([\s\S]*?)<\/h2>/u)?.[1] ?? ""), group.title);
@@ -910,12 +921,13 @@ test("the production design contract is restrained and dependency-light", async
   assert.doesNotMatch(home, /box-shadow|backdrop-filter|linear-gradient/u);
   assert.match(homePage, /<DitheredEntrance \/>/u);
   const experience = await readFile(path.join(ROOT, "app", "components", "experience", "Experience.module.css"), "utf8");
+  const directory = await readFile(path.join(ROOT, "app", "components", "SectionDirectory.module.css"), "utf8");
   assert.match(globals, /@media \(pointer:\s*coarse\)[\s\S]*?\.primary-nav a\s*\{[^}]*min-height:\s*44px/u);
   assert.match(home, /@media \(pointer:\s*coarse\)[\s\S]*?\.contactStrip a[\s\S]*?min-height:\s*44px/u);
   assert.match(globals, /width:\s*min\(100%,\s*1440px\)/u);
   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(experience, /\.directory\s*\{[^}]*grid-template-columns:\s*1fr/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*10[^}]*max-width:\s*var\(--reading-measure\)/u);
   assert.doesNotMatch(globals, /\.education-entry\s*\{[^}]*grid-template-columns/u);
@@ -937,8 +949,8 @@ test("the production design contract is restrained and dependency-light", async
   assert.equal(packageJson.dependencies["@mathjax/mathjax-tex-font"], "4.1.3");
 });
 
-test("shared typography source roles preserve Inter numerals, article names, metadata, and mathematical scale", async () => {
-  const [fonts, exportedFonts, globals, articles, experience, math, home, coursework] = await Promise.all([
+test("shared typography source roles preserve article names, compact indices, metadata, and mathematical scale", async () => {
+  const [fonts, exportedFonts, globals, articles, experience, math, home, coursework, directory] = await Promise.all([
     readFile(path.join(ROOT, "public", "assets", "fonts", "inter.css"), "utf8"),
     readFile(path.join(OUT, "assets", "fonts", "inter.css"), "utf8"),
     readFile(path.join(ROOT, "app", "globals.css"), "utf8"),
@@ -947,6 +959,7 @@ test("shared typography source roles preserve Inter numerals, article names, met
     readFile(path.join(ROOT, "app", "components", "research", "ResearchMath.module.css"), "utf8"),
     readFile(path.join(ROOT, "app", "home.module.css"), "utf8"),
     readFile(path.join(ROOT, "app", "coursework", "coursework.module.css"), "utf8"),
+    readFile(path.join(ROOT, "app", "components", "SectionDirectory.module.css"), "utf8"),
   ]);
   const rule = (css, selector) => {
     const escaped = selector.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&");
@@ -965,15 +978,14 @@ test("shared typography source roles preserve Inter numerals, article names, met
   assert.match(rule(globals, "body"), /font-family:\s*var\(--font-text\)/u);
   const tokens = rule(globals, ":root");
   assert.match(tokens, /--type-subheading:\s*1\.125rem\s*;/u);
-  assert.match(tokens, /--type-index:\s*1\.125rem\s*;/u);
+  assert.match(tokens, /--type-index:\s*0\.625rem\s*;/u);
   assert.match(tokens, /--type-reading:\s*0\.875rem\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 18px semantic role.");
-  }
-  for (const css of [experience, coursework]) {
-    assert.match(rule(css, ".directory a"), /font-size:\s*var\(--type-subheading\)\s*;/u, "Top-level directories share the 18px semantic role.");
+    assert.match(rule(css, ".sectionIndex"), /font-size:\s*var\(--type-index\)\s*;/u, "Section indices share the compact 10px semantic role.");
   }
+  assert.match(rule(directory, ".directory a"), /font-size:\s*var\(--type-subheading\)\s*;/u, "Both top-level directories share the 18px semantic 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);
   for (const declarations of [rule(articles, ".paper .header h1"), rule(experience, ".detailPage .detailHeader h1"), rule(experience, ".entryTitle")]) {