docs: article anatomy map in CLAUDE.md

CLAUDE.md

@@ -65,6 +65,8 @@ Thin per-section wrappers (`lib/hydras.js`, `lib/poems.js`, `lib/talks.js`) just
 
 ## Architecture notes
 
+- **Article anatomy (`app/blog/`)**: `PostArticle.jsx` renders all blog routes. Layout is `[TOC rail][core][margin band]` at ≥80rem, single column below; the TOC (built at build time by `buildTocFromHtml` in `lib/markdown.ts`, which also mints heading ids) ships only for posts with ≥3 h2/h3. Footnotes get build-time inline clones (`rehypeMarginNotes`) that CSS promotes to Tufte margin notes on wide screens, hover/focus popovers in between, endnotes everywhere (the no-JS/screen-reader source). Code copy bars + figure lightbox + language memory are one enhancement island (`ArticleEnhance.jsx`); the page reads fully without JS. The body face is Source Serif 4 by default; `?fonts=1` (dev only) previews the Atkinson Hyperlegible alternative — `dev-fonts.js` is replaced by a stub in prod builds (`next.config.js`), so the alternative pair never ships.
+
 - **Hydra & p5 sketches**: canvas/WebGL code must be client-only — `next/dynamic({ ssr: false })` is only valid inside a client component, so it lives in a `'use client'` leaf (see `app/hydra/[id]/page.js` → `app/hydra/[id]/HydraClient.js` → `components/hydra-view.js`; `/fleurs` follows the same server-page → client-leaf split).
 - **One root shell + a ParVagues sub-layout.** `app/layout.tsx` is the single `<html>/<body>` shell (global CSS + shared `metadata`). The landing/content pages wrap their content in the `components/layout.js` client component (header/footer/back-button). ParVagues has its own segment layout `app/parvagues/layout.tsx` (Syne font, `parvagues-root` wrapper, scroll header + reveal observer as client leaves). The legacy `ParVaguesHeader`/`ParVaguesFooter` and `components/parvagues/Layout.js` shells are gone.