Refine editorial typography and unify section directories

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

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;

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

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