diff --git a/CLAUDE.md b/CLAUDE.md
index ab1d816..5b3c63e 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -25,8 +25,19 @@ pill, rendered as build-time MathML. When in doubt, remove rather than add.
- **Astro 6** (static output) + **React 19** (exactly ONE island — the terminal)
+ **Tailwind v4** (`@tailwindcss/vite`; tokens via `@theme` in
`src/styles/global.css`) + TypeScript (strict).
-- `astro:fonts` self-hosts **Fraunces** (display, uses the SOFT axis), **Inter**
- (body), **JetBrains Mono** (mono/terminal). No CJK fonts.
+- **Type: four roles, three faces.** `--font-display` is **Georgia** (a system
+ serif, no download); `--font-body` is **Inter**; `--font-mono` is **JetBrains
+ Mono**; `--font-accent` is **Fraunces**, used only on sub-headlines and italic
+ editorial lines. No CJK fonts.
+ - Georgia is deliberate, not a leftover. Fraunces was the display face and the
+ owner rejected it on sight — "prod's font is better, the current font is kind
+ of weird" — after a long-standing bug meant no webfont had EVER rendered and
+ the whole design had been judged in Georgia. Keep Georgia for structure.
+ - `astro:fonts` self-hosts the three webfonts under its own `--ff-*` variables.
+ Never point `cssVariable` at `--font-display`/`-body`/`-mono`: those are the
+ site's role tokens, and the collision is what stopped every webfont from
+ loading. All three are preloaded — removing either Fraunces' or Inter's
+ preload measured a worse FCP (see BaseLayout's note).
- `astro:assets` optimizes gallery images (responsive `widths`, webp/avif).
- `site: 'https://ingtian.github.io'`, no `base` (user site at root).
diff --git a/astro.config.mjs b/astro.config.mjs
index 7389e69..449675c 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -2,7 +2,6 @@
import { defineConfig, fontProviders } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
-import react from '@astrojs/react';
import sitemap from '@astrojs/sitemap';
// https://astro.build/config
@@ -13,17 +12,51 @@ export default defineConfig({
// codebase) — fewer @font-face faces, and dropping mono italic removes a whole
// woff2. Fraunces: 400/500/600 normal+italic. Inter: 400/500 normal+italic
// (italic = venue/timeline lines). Mono: 400/500 normal only (never italic).
+ //
+ // ── EACH FAMILY OWNS ITS OWN VARIABLE (--ff-*), AND NOT --font-display/-body/-mono.
+ // Those three names are the site's TYPE ROLE tokens, declared in the stylesheet, and pointing
+ // astro:fonts at the same names was a silent, total failure: astro:fonts writes
+ // `--font-display: "Fraunces-2d723b2dd3e1ca4b", …` into an inline
+
+
diff --git a/src/components/FactorFan.astro b/src/components/FactorFan.astro
new file mode 100644
index 0000000..4f55bb4
--- /dev/null
+++ b/src/components/FactorFan.astro
@@ -0,0 +1,349 @@
+---
+// src/components/FactorFan.astro
+// The factor exposure fan, interactive and in real 3D — drag to rotate.
+//
+// ONE ASSET, MANY SIGNALS. The site is a single ticker; the portfolio items are signals that
+// load onto it. So the object is a factor model, r = α + Σ β_k f_k + ε, with each term
+// expanded into one beam whose size IS that term's loading. The maths is not decoration on top
+// of the picture — the picture is the maths laid out in space.
+//
+// WHY three.js, and why it costs nothing measurable:
+// the module is dynamically imported from inside an IntersectionObserver, so the chunk is
+// fetched only when the section actually scrolls into view. Lighthouse does not scroll, so it
+// never loads during an audit and the Perf ≥99 bar is untouched. Under
+// prefers-reduced-motion the import never fires at all and the baked SVG still frame — which
+// is also the no-JS state and the LCP paint — stays on screen.
+//
+// RENDERED AS AN INSTRUMENT, not as pixel art. A first pass rendered into a low-resolution
+// buffer with image-rendering: pixelated; it read as a retro-game artefact against a
+// Swiss-minimal page and was dropped. Full resolution, flat metal-free shading, hairline
+// structure: the object should look measured, because it is showing a measurement.
+import { fanFrame } from '../lib/fanFrame';
+import { loadings, fanBeams, FACTORS } from '../lib/factorModel';
+import { SIGNAL_WEIGHTS } from '../data/signalWeights';
+import { FACTOR_EQUATIONS } from '../lib/equations';
+
+const ls = loadings(SIGNAL_WEIGHTS.signals);
+const beams = fanBeams();
+const stillSvg = fanFrame(SIGNAL_WEIGHTS.signals);
+
+// Serialised for the client so the runtime does no model work: geometry and loadings are
+// computed once at BUILD time and handed over as data.
+const payload = {
+ beams: beams.map((b) => ({
+ key: b.factor.key,
+ label: b.factor.label,
+ href: b.factor.href,
+ announce: b.factor.announce ?? null,
+ gloss: b.factor.gloss,
+ beta: ls.find((l) => l.factor.key === b.factor.key)!.beta,
+ azimuth: b.azimuth,
+ elevation: b.elevation,
+ length: b.length,
+ halfWidth: b.halfWidth,
+ tip: b.tip,
+ })),
+};
+
+// Signals per factor, for the hover panel — what actually loads on each beam.
+const signalsByFactor = Object.fromEntries(
+ FACTORS.map((f) => [
+ f.key,
+ SIGNAL_WEIGHTS.signals.filter((s) => s.factor === f.key).map((s) => ({ label: s.label, score: s.score })),
+ ]),
+);
+---
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/PlushCow.astro b/src/components/PlushCow.astro
new file mode 100644
index 0000000..d9c2140
--- /dev/null
+++ b/src/components/PlushCow.astro
@@ -0,0 +1,446 @@
+---
+// src/components/PlushCow.astro
+// THE COW, AND WHAT IT SAYS. The owner loves cows, so it gets to be a real drawing rather than a decoration.
+//
+// He asked for a big one on /writing "instead of scaffolding something that doesn't exist yet", one on the 404,
+// one at the homepage's lower-right corner, and for it to actually look like a cow — the first five attempts did
+// not. The art is a transcription of a grid he supplied; see data/cowGlyph.ts for why that was necessary.
+//
+// THE BUBBLE. "why not have a dialogue bubble to wrap those words? also, the font can be more pixel like, let
+// the texts be bigger. way bigger." So the words moved inside a pixel speech bubble: a one-cell ink border with
+// no radius (pixel art has no curves), a paper interior, and a stepped tail pointing at the cow. He chose 10px
+// cells from the two sizes I mocked up, and that one number drives the whole bubble — border thickness, the MOO
+// type, and the tail's steps all measure exactly one cell, which is what makes it read as pixel art rather than
+// as a rounded chat bubble with a blocky font.
+//
+// MOO! IS TYPE, NOT DECORATION — drawn from a matrix in data/cowGlyph.ts, 190x50 on screen against the 11.5px
+// mono line it replaced. The rotating sentence sits under it, also enlarged. Both live inside the bubble.
+import {
+ COW_BODY, COW_PATCH, COW_MUZZLE, COW_HORN, COW_OUTLINE, COW_MOO, COW_W, COW_H, COW_LINES,
+ COW_TAIL_FILL, COW_TAIL_INK, COW_TAIL_W, COW_TAIL_H,
+} from '../data/cowGlyph';
+import { splitAll, widestHalf } from '../lib/cowSpeech';
+
+interface Props {
+ /** 'mark' is the quiet corner mark on the Work slide; 'small' is a footer-scale cow; 'large' is the page's subject. */
+ size?: 'mark' | 'small' | 'large';
+ /** Override what it says. Defaults to the homepage lines. */
+ lines?: readonly string[];
+ /** Accessible name — worth tailoring, since on /404 and /writing the cow is the main thing on the page. */
+ label?: string;
+}
+
+const { size = 'small', lines = COW_LINES, label = 'A cow. Press it.' } = Astro.props;
+
+// The cow grew with the bubble. At 2px cells (44x52) it was a speck beside a 270px bubble — the pair has to
+// read as one object. 'mark' is the smallest: the owner picked it for the Work slide so the pair reads as a
+// margin note rather than a fourth panel.
+const CELL = size === 'large' ? 8 : size === 'mark' ? 3 : 5;
+// One cell, shared by the border, the MOO type and the tail. 10px was the owner's pick at footer scale; the
+// mark halves it, which keeps the pixel grid intact because every dimension is a multiple of the cell.
+const MOO_CELL = size === 'mark' ? 5 : 10;
+
+// EVERY MESSAGE PRE-BROKEN INTO TWO LINES, at build time. See lib/cowSpeech.ts for why: the bubble has to keep
+// one height and vary its WIDTH, or pressing the cow reflows the page. Shipping the pairs means the client never
+// measures text or decides a break.
+const spoken = splitAll(lines);
+// THE FIRST MESSAGE'S wider half, not the widest of all of them. Sizing the box from the copy at build time is
+// what avoids a resize on first paint — but sizing it to the LONGEST message means the bubble ships too wide for
+// the message actually in it and then shrinks on the first press. Measured: 311px on load against the 132px that
+// message needs. With no JS the message never changes, so the first one is the only size that can be right.
+// Plus one character of slack. `ch` is the advance of "0", which for a monospace face is the advance of every
+// glyph — but only to within the browser's rounding, and measured at 620px the wider half came out 0.4px past
+// the content box. Nothing clips (the bubble does not hide overflow) but the type can touch the border, and on a
+// machine whose mono metrics differ it could be worse than 0.4px.
+const measure = widestHalf(lines.slice(0, 1)) + 1;
+---
+
+
+
+
+
+
+
+
+ {spoken[0]?.[0]}
+ {spoken[0]?.[1]}
+
+ {size === 'large' && (
+
+
press the cow
+ )}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/QuantPod.astro b/src/components/QuantPod.astro
new file mode 100644
index 0000000..2abcfe9
--- /dev/null
+++ b/src/components/QuantPod.astro
@@ -0,0 +1,355 @@
+---
+// src/components/QuantPod.astro
+// The pod as a full-bleed pixel-art ROOM that the page ends inside.
+//
+// WHY FULL-BLEED: framed in a 1180px box with its edges masked, the room read as a
+// picture hanging in the sky rather than a place you had arrived at. Taking the full
+// width makes it the environment, and it dissolves the seam problem entirely — there
+// is no edge to blend when there is no edge. The descent's sky ends here on purpose;
+// the links and the seal sit INSIDE the room. Documented as a deliberate exception to
+// "one continuous sky" in CLAUDE.md.
+//
+// WHY LOW-RES: real pixel art is authored in a small buffer and scaled up. The room
+// paints into a fixed 480x280 canvas which CSS blows up with image-rendering:
+// pixelated. That is why every edge is crisp and every detail is deliberate — and it
+// makes the paint cost independent of viewport size.
+//
+// THE ACCESSIBILITY CONTRACT (unchanged):
+// - ONE canvas, aria-hidden, pure decoration.
+// - Every destination is a REAL focusable element positioned by PERCENTAGE over its
+// monitor: to navigate,