Unify capitalization, punctuation and record fields; consolidate shared UI

.github/README.md

@@ -36,7 +36,7 @@ All three papers can be read on the site, with equations, chapter navigation, re
 | **Finance and Consulting** | Real estate underwriting at JLL, satellite commercialization research for Hubble, investment diligence at SAIF, equity research at CITIC, and business restructuring at EY-Parthenon. |
 | **STEM Academic Competitions and Training** | Advanced physics and mathematics training, competition awards, peer mentoring, and independent Olympiad instruction. |
 
-Every entry has a Read More page with its role, location, dates, and Key Contributions. The AI and legal pages also include the research articles, so visitors can follow the underlying reasoning.
+Every entry has a Read More page with its role, location, dates, and Key Contributions. The AI and legal pages also include the research articles, each opening with a diagram of its system or argument, so visitors can follow the underlying reasoning.
 
 ## About the site
 

docs/design.md

@@ -140,7 +140,7 @@ 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`, 4fr / 6fr). A section's entries share one
-frame (`.entries` on Experience, `.rows` on About). From 1200px each title sits alone
+frame, built from the shared `ledger` classes in `globals.css`. From 1200px each title sits alone
 on the left, and one continuous dashed spine runs down the frame between titles and
 prose, with 72px of space between entries. Below 1200px each title stacks above its
 prose and entries are separated by a dashed line inside the frame. On About, the
@@ -170,7 +170,8 @@ reflows into a vertical sequence (parallel nodes side by side from 480px) and th
 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
+Prose stays within `--reading-measure` (36rem, about seventy characters of Source
+Serif 4 at the reading size) at every width. 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.
@@ -230,9 +231,10 @@ 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 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.
+The shared `--reading-measure` caps narrative containers at 36rem. Introductions,
+standfirsts, stacked ledger prose, detail pages, captions, and article reading columns
+share this measure; phones run at 30 to 45 characters per line and desktops at about
+seventy.
 Nested paragraphs fill their container with natural ragged-right wrapping. Each
 coursework category uses one text column at every width; legal articles retain
 their own reading and contents layout.
@@ -286,8 +288,8 @@ without forced line breaks. Section headings, entry headings, and reading text u
 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.
+main heading. The "Thinking Mathematically / Working in AI" introduction
+is an H2 below the hero; it is the H1 on the `/education/` alias page.
 Its two lines share the title size, the second in the muted tone, and the biography
 sits below on the same left edge within the reading measure.
 Experience domains use `01`–`05` indices; individual entries have no leading markers.
@@ -358,22 +360,22 @@ Legal section symbols, paragraph symbols, mathematical notation, and author name
 with diacritics remain part of the source text.
 
 Top-level pages retain the About and Experience primary navigation, including the
-`/education/`, `/now/`, and `/past-experience/` compatibility pages. The 27 detail
+`/education/`, `/now/`, and `/past-experience/` alias pages. The 27 detail
 pages replace those primary links with parent navigation while retaining the home
 wordmark: Coursework, three Selected Research manuscripts, eighteen Experience
-detail pages, and five Experience domain compatibility pages. About at
+detail pages, and five Experience domain alias pages. About at
 `/` combines the introduction, Selected Research, Education with a coursework
 entrance, and contact details in sections 01 through 04. The first-person
 introduction opens the reading content beneath the hero; both
 Duke degrees, the advisor, scholarships, and all 49 courses are
 available. The canonical `/coursework/` page presents the four subject groups,
 returns to Education through its parent navigation, and appears in the sitemap. The
 homepage's `#coursework` anchor remains a valid entrance to this page.
-The `/education/` compatibility
+The `/education/` alias
 page shares the About content without repeating the clarinet hero, uses `/`
 as its canonical URL, and remains outside primary navigation and the sitemap.
 Experience contains all five domains and eighteen entries. The five category
-URLs provide compatibility pages with `/experience/` as their canonical URL and a
+URLs are alias pages with `/experience/` as their canonical URL and a
 return link to the matching Experience section. Domain `03` is Legal Research and
 Policy Analysis; its four selected papers
 use dedicated article URLs. Domain `01`, AI Research and Engineering,
@@ -408,7 +410,7 @@ section references link to the matching heading and preserve their source numera
 
 The website has twenty-four canonical content routes: About, Experience, Coursework,
 three Selected Research articles, eight Experience manuscripts, and ten other Experience
-detail pages. Eight compatibility pages bring the content export to thirty-two routes. The
+detail pages. Eight alias pages bring the content export to thirty-two routes. The
 architecture viewer adds one technical reference route, making thirty-three exported
 routes in total, excluding 404.
 Keep factual claims, metadata, copy, and content order aligned with the integrity manifests.

docs/maintenance.md

@@ -52,7 +52,7 @@ manuscripts, and ten ordinary detail pages.
 About's Education section links to the dedicated Coursework page through Read More.
 The page presents all 49 courses in four subject groups.
 
-Compatibility routes remain functional: `/education/` renders shared About content;
+Alias routes: `/education/` renders shared About content;
 `/past-experience/` and `/now/` render Experience; the five
 `/past-experience/[slug]/` category pages filter the same approved entries. Their
 canonical URLs point to the corresponding primary page. Keep these shared renderers
@@ -148,8 +148,12 @@ 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. `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;
+for Experience and Coursework, including its frame, dashed row dividers, decorative
+indices, and View feedback for pointer, keyboard, and touch input. Framed lists use the
+global `ledger`, `ledger-item`, `ledger-title`, `ledger-body`, and `ledger-prose` classes,
+and every Read More link uses `read-more` with the shared `ReadingArrow`; reuse them for
+any new list. `LogicDiagram` renders the article diagrams from
+`app/lib/content/architecture-diagrams.ts`. Browser interaction stays in focused client components;
 the About hero is isolated in `app/components/clarinet-hero/`.
 
 `ResearchArticle` serves AI and Selected Research. The Markdown parser supports

website/README.md

@@ -7,7 +7,9 @@ across five fields. Dedicated readers present coursework and research
 articles with mathematical notation, chapter navigation, and legal footnotes.
 
 The visual system pairs Inter headings with Source Serif 4 prose, a warm paper
-background, and a restrained editorial grid. About opens with a two-column name
+background, and a restrained editorial grid: faint frames hold each list, dashed
+hairlines divide them, and each AI and legal article opens with a logic architecture
+diagram. About opens with a two-column name
 and recognizable clarinet hero. The dense Canvas 2D particle field aggregates on entry,
 responds locally to the pointer, disperses with scrolling, and returns to its
 shape, with six silver ring keys, joint bands and pads, two long rods, and
@@ -17,8 +19,8 @@ The name and institutions use Inter; the credential roles use Source Serif 4.
 Blue corner marks, a single solid blue oval, and four solid, continuously breathing
 musical notes accompany the field. The open blue arc has larger, more closely
 spaced points and retains its occlusion behind the instrument.
-Selected Research and Education use the same Read More link pattern as Experience.
-Experience and Coursework share a numbered section directory.
+Selected Research, Education, and Experience share the framed ledger and Read More
+link; Experience and Coursework share a framed section index.
 
 ## Local development
 

website/app/components/AboutContent.tsx

@@ -1,28 +1,17 @@
 import Link from "next/link";
-import type { ReactNode } from "react";
 import { selectedResearchProjects } from "../lib/content/selected-research";
+import { ReadingArrow } from "./ReadingArrow";
 import styles from "../home.module.css";
 
-const researchSummaries: Record<string, ReactNode[]> = {
-  "critical-dependence-stress-for-portfolio-diversification": [
-    <>
-      I develop a variational framework that measures how much dependence stress it takes to reverse a portfolio’s Expected Shortfall advantage while every individual loss distribution stays fixed. I prove a quadratic law for the critical stress budget, introduce the marginal-restoration premium, and characterize exactly when it is positive. In a uniform benchmark, the asymptotic reversal budget is at least 30% higher than the initial-sensitivity prediction. At equal effective costs, continuous flow–cut duality characterizes how the premium responds to background displacement costs. Together these results turn local risk sensitivity into a mathematically derived threshold for portfolio decision reversal.
-    </>,
-  ],
-  "certified-valuation-arithmetic-asian-options": [
+const researchSummaries: Record<string, string> = {
+  "critical-dependence-stress-for-portfolio-diversification":
+    "I develop a variational framework that measures how much dependence stress it takes to reverse a portfolio's Expected Shortfall advantage while every individual loss distribution stays fixed. I prove a quadratic law for the critical stress budget, introduce the marginal-restoration premium, and characterize exactly when it is positive. In a uniform benchmark, the asymptotic reversal budget is at least 30% higher than the initial-sensitivity prediction. At equal effective costs, continuous flow–cut duality characterizes how the premium responds to background displacement costs. Together these results turn local risk sensitivity into a mathematically derived threshold for portfolio decision reversal.",
+  "certified-valuation-arithmetic-asian-options":
     "I develop a weighted payoff-remainder method and use it to turn an exact conditional price representation into certified valuations of arithmetic Asian options. Shared Gaussian smoothing and validated Heston transforms together give a complete projected Euler discretization-error bound below 0.011025 price units for a one-year call spread with twelve monthly fixings at a specified Heston parameter point and step size. I also derive a direct coupling bound, which cuts the nonlinear remainder width by 99.4% in a deterministic-variance example. Both results come with proofs and executable certificates.",
-  ],
-  "certified-rough-heston-valuation": [
-    <>
-      I develop a deterministic framework for certifying rough Heston portfolio valuations. I derive a finite-history propagation kernel and the exact support function of a joint error enclosure, which captures the shared Fourier errors that separate option-by-option bounds lose. In a matched benchmark, finite-history propagation tightens the complete pricing-error upper bound by 72.91% with the pricing output unchanged. Mathematical proofs and executable certificates tie these theoretical advances to financial results that can be verified.
-    </>,
-  ],
+  "certified-rough-heston-valuation":
+    "I develop a deterministic framework for certifying rough Heston portfolio valuations. I derive a finite-history propagation kernel and the exact support function of a joint error enclosure, which captures the shared Fourier errors that separate option-by-option bounds lose. In a matched benchmark, finite-history propagation tightens the complete pricing-error upper bound by 72.91% with the pricing output unchanged. Mathematical proofs and executable certificates tie these theoretical advances to financial results that can be verified.",
 };
 
-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>;
-}
-
 export function AboutContent({ hasHero = false }: { hasHero?: boolean }) {
   const Heading = hasHero ? "h2" : "h1";
   return (
@@ -31,7 +20,7 @@ export function AboutContent({ hasHero = false }: { hasHero?: boolean }) {
         <p className={styles.sectionIndex} aria-hidden="true">01</p>
         <div className={styles.sectionBody}>
           <Heading id="home-heading">
-            <span>Thinking mathematically</span>{" "}
+            <span>Thinking Mathematically</span>{" "}
             <span>Working in AI</span>
           </Heading>
           <div className={styles.biographyCopy}>
@@ -53,15 +42,13 @@ export function AboutContent({ hasHero = false }: { hasHero?: boolean }) {
         <p className={styles.sectionIndex} aria-hidden="true">02</p>
         <div className={styles.sectionBody}>
           <h2 className={styles.sectionTitle} id="research-heading">Selected Research</h2>
-          <div className={styles.rows}>
+          <div className="ledger">
             {selectedResearchProjects.map((project) => (
-              <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}`}>
+              <article className="ledger-item" key={project.slug} id={project.slug}>
+                <h3 className="ledger-title" id={`${project.slug}-title`}>{project.title}</h3>
+                <div className="ledger-body">
+                  <p className="ledger-prose">{researchSummaries[project.slug]}</p>
+                  <Link className="read-more" href={project.path} aria-label={`Read more about ${project.title}`}>
                     Read More<ReadingArrow />
                   </Link>
                 </div>
@@ -75,10 +62,10 @@ 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>
-          <div className={styles.rows}>
-            <div className={styles.row}>
-              <h3 className={styles.institution}>Duke University</h3>
-              <div className={styles.rowBody}>
+          <div className="ledger">
+            <div className="ledger-item">
+              <h3 className="ledger-title">Duke University</h3>
+              <div className="ledger-body">
                 <div className={styles.educationList}>
                   <article className="education-entry">
                     <h4 className="education-degree">Master of Engineering in Risk Engineering</h4>
@@ -98,7 +85,7 @@ export function AboutContent({ hasHero = false }: { hasHero?: boolean }) {
                   </article>
                 </div>
                 <div className={styles.coursework} id="coursework">
-                  <Link className={styles.readMore} href="/coursework/" aria-label="Read more about coursework">Read More<ReadingArrow /></Link>
+                  <Link className="read-more" href="/coursework/" aria-label="Read more about coursework">Read More<ReadingArrow /></Link>
                 </div>
               </div>
             </div>

website/app/components/ReadingArrow.tsx

@@ -0,0 +1,8 @@
+/** The decorative chevron that follows every Read More link. */
+export 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>
+  );
+}