From fa936ab44c2c01b430c48df88b3a76ac6b33a5ff Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 27 Aug 2026 14:55:45 +0000
Subject: [PATCH 01/12] Add website overhaul implementation plan

Complete phased plan for the Next.js -> Astro rewrite: toolchain
(pnpm/mise/oxlint/oxfmt/ESLint/Prettier split), design system,
shadcn-convention Astro primitives, content collections, page ports,
event landing pattern, asset/performance budgets, SEO/AI-SEO,
analytics, and cutover. plan/00-overview.md records all locked
decisions from the planning interview.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DU6XwSGRUDZtz5DuXjzKnn
---
 plan/00-overview.md           | 135 ++++++++++++++++++++++++++++++++++
 plan/01-foundation.md         | 119 ++++++++++++++++++++++++++++++
 plan/02-design-system.md      |  60 +++++++++++++++
 plan/03-primitives.md         |  58 +++++++++++++++
 plan/04-content-model.md      |  95 ++++++++++++++++++++++++
 plan/05-app-shell.md          |  61 +++++++++++++++
 plan/06-homepage.md           |  52 +++++++++++++
 plan/07-pages.md              |  72 ++++++++++++++++++
 plan/08-events.md             |  40 ++++++++++
 plan/09-assets-performance.md |  49 ++++++++++++
 plan/10-seo.md                |  60 +++++++++++++++
 plan/11-cutover.md            |  58 +++++++++++++++
 plan/12-content-strategy.md   |  41 +++++++++++
 13 files changed, 900 insertions(+)
 create mode 100644 plan/00-overview.md
 create mode 100644 plan/01-foundation.md
 create mode 100644 plan/02-design-system.md
 create mode 100644 plan/03-primitives.md
 create mode 100644 plan/04-content-model.md
 create mode 100644 plan/05-app-shell.md
 create mode 100644 plan/06-homepage.md
 create mode 100644 plan/07-pages.md
 create mode 100644 plan/08-events.md
 create mode 100644 plan/09-assets-performance.md
 create mode 100644 plan/10-seo.md
 create mode 100644 plan/11-cutover.md
 create mode 100644 plan/12-content-strategy.md

diff --git a/plan/00-overview.md b/plan/00-overview.md
new file mode 100644
index 0000000..6c40f2e
--- /dev/null
+++ b/plan/00-overview.md
@@ -0,0 +1,135 @@
+# scstem.org Overhaul — Plan Overview
+
+This directory is the complete implementation plan for rewriting scstem.org from Next.js 16 to Astro. Each numbered file is a **self-contained agent brief**: an implementing agent should be able to execute a phase given only that file, this overview, and the repository.
+
+## How to use this plan
+
+- Execute phases **in order**. Each phase file lists its prerequisites; do not start a phase whose prerequisites are unmet.
+- All implementation happens on the long-running branch **`astro-rewrite`** (created from `main` in Phase 01). Each phase is developed on a short-lived branch off `astro-rewrite` and merged into it via PR — one PR per phase, titled `overhaul: <phase name>`.
+- `staging` and `main` are untouched until Phase 11 (cutover). Cloudflare Pages gives `astro-rewrite` an automatic preview URL (`astro-rewrite.<project>.pages.dev`), which the existing `public/_headers` rules keep noindexed.
+- The old site lives in **`legacy/`** during the rewrite (moved there in Phase 01). It is the *reference* for content, copy, URLs, and behavior. **Never import from `legacy/`; never copy components.** Copy *content and intent*, rebuild the implementation.
+- Before every commit: `pnpm check && pnpm build` must pass. A phase is done when its acceptance criteria are all checked and CI is green.
+- When a phase makes a decision not covered here, record it in `docs/adr/NNNN-<slug>.md` and note it in the phase PR description.
+
+## Objectives (from project owner)
+
+1. Keep the brand (colors, dark look, voice) while making the design *genuinely better* — SEO + accessibility improvements, consistent brand feel, no "AI slop" aesthetic.
+2. Content (sponsors, events, FAQ, robots, etc.) becomes markdown/data files — adding a sponsor should take 2 minutes and one small PR.
+3. Astro, fully static, minimal dependencies, **zero client-side framework runtime**.
+4. SEO across the board, including AI/agent SEO (llms.txt, structured data, semantic HTML).
+5. Components split into `ui/` (composed, site-level) and `ui/primitives/` (low-level, shadcn-convention).
+6. pnpm + mise + cnfast; strict linting via oxlint/oxfmt (TS/JS/JSON/CSS) and ESLint/Prettier (Astro/MD), ready to collapse onto oxc when it supports Astro.
+7. Code health, DX, DRY — kill the page forks and triplicate carousels.
+8. 10/10 mobile experience, enforced by Lighthouse CI budgets.
+9. A well-defined `DESIGN.md`; design review gate before mass page porting.
+10. Agent configs: format/lint hooks on every agent edit, concise `AGENTS.md`.
+
+## Locked decisions (from planning interview)
+
+| # | Decision |
+|---|----------|
+| D1 | Clean rewrite; `legacy/` in-tree for reference only; staging site used for verification before go-live. |
+| D2 | Content via Astro Content Collections (zod-validated markdown). No CMS now; schemas kept flat/simple so a git-backed CMS (e.g. Keystatic) can be added later without restructuring. |
+| D3 | Zero framework runtime. `.astro` components + vanilla `<script>` only. No React/Preact islands. |
+| D4 | `ui/primitives/` = Astro-native, shadcn-*convention* primitives (CVA variants, shadcn token naming). A repo agent skill (`.claude/skills/shadcn-astro/`) codifies porting shadcn components to Astro. |
+| D5 | `output: 'static'`, no adapter. Dynamic bits stay in Cloudflare Pages Functions (`functions/`). |
+| D6 | Brand-faithful refresh: keep palette/logo/voice; rebuild type scale, spacing, and polish deliberately. Not jarring — intuitively better. |
+| D7 | `cn()` comes from `cnfast` everywhere; `clsx`/`classnames`/`tailwind-merge` are banned imports. |
+| D8 | Technical SEO fully in this overhaul, using existing marketing copy/images. Copy revision + content strategy is a phase-2 backlog (`12-content-strategy.md`). |
+| D9 | Plan = this directory. |
+| D10 | Maximum strictness: type-aware linting, `--max-warnings 0` semantics, strictest tsconfig, blocking CI. |
+| D11 | Old source moved to `legacy/`, excluded from all tooling, deleted at cutover. |
+| D12 | Vendor `dmmulroy/anti-slop` (oxlint jsPlugin; rules are ESLint-API-compatible). Import sorting/organizing required (oxfmt `sortImports` + ESLint sorting for `.astro`). |
+| D13 | Zero test frameworks. Correctness = typecheck + zod content schemas + `astro check` + build-output verification (link check) + Lighthouse CI budgets. |
+| D14 | Deploys stay on Cloudflare Pages dashboard git integration. GitHub Actions = PR gates only. |
+| D15 | Dark-only. Tokens are semantic (`--color-background`, etc.) so a light theme / theme switcher is a future token-set addition, not a refactor. |
+| D16 | Per-program accent themes kept, via `data-theme="frc" | "fll"` remapping accent tokens in pure CSS. |
+| D17 | All current URLs preserved exactly; `_redirects`/`_headers` carried over. `/openhouse` and `/programs/frc/kickoff` become instances of a reusable event-landing pattern driven by an `events` collection — seasonal events are markdown files that are easy to update or hide. |
+| D18 | Collections: `sponsors`, `events`, `faq`, `news` (scaffold), plus FRC/FLL-specific content nested under `frc/` and `fll/` directories (`frc/robots`, `frc/team-photos`, …). Typed `src/data/site.ts` replaces `legacy/data/config.ts` and hardcoded constants. Former sponsors migrate as `active: false`, not comments. |
+| D19 | Calendar pages: vanilla-TS client script rendering a branded agenda, fed by a new Pages Function that proxies the public Google Calendar feed (keys/parsing server-side). Fallback link to Google Calendar for no-JS/agents. |
+| D20 | Hero video kept but re-encoded to ≤3 MB with poster, `preload="none"`, `prefers-reduced-motion` respected. All motion is CSS-only; framer-motion/parallax/embla are gone. |
+| D21 | Analytics: GA4 via direct deferred gtag (fixes the current GTM-loader-with-GA4-id oddity) **plus** Cloudflare Web Analytics; tracking audit + event taxonomy in Phase 10. |
+| D22 | DESIGN.md written analytically first (Phase 02); homepage built against it (Phase 06); then a **visual review gate** with the owner before porting remaining pages. Bar: "start with great." |
+| D23 | Branch flow per "How to use this plan" above. |
+| D24 | Toolchain split (oxc-first hybrid): oxlint + oxfmt own `.ts/.js/.mjs/.cjs/.json/.jsonc/.css`; ESLint + Prettier own `.astro` and `.md`. When oxlint/oxfmt gain Astro support, migration = delete the ESLint/Prettier half (seam documented in `docs/adr/`). |
+
+## Current-state facts (verified 2026-08)
+
+- Next.js 16 App Router, static export to `build/`, React 19, HeroUI (dark-only, three theme variants: default yellow, FRC "bio" green, FLL), Tailwind v4 (CSS-first), framer-motion, embla (three carousel implementations), react-scroll-parallax, react-hook-form + valibot, Turnstile via React wrapper. ~5,100 LOC, 13 routes, 24 components.
+- Hosting: Cloudflare Pages (dashboard-configured; no wrangler config in repo). `functions/api/form/submit.ts` = Turnstile verify + Slack webhook. `public/_redirects` and `public/_headers` (staging/pages.dev noindex, `/team/*` noindex) exist and must survive.
+- Content is hardcoded: `data/sponsors.ts` (half commented-out), inline page arrays, JSX robot-history slides, hardcoded calendar IDs and kickoff config.
+- Known duplication: `/openhouse` forks the homepage; `/programs/frc/kickoff` forks `/programs/frc`; FLL layout is a copy of FRC layout (still named `FRCLayout`).
+- SEO gaps: no sitemap, no OG/twitter meta objects, no JSON-LD, no canonicals, several routes missing metadata entirely, robots.txt has no Sitemap directive, keyword-stuffed `keywords` meta.
+- Perf gaps: 72 MB in `public/` (22 MB hero MP4, 11.3 MB parallax WebP, 26 files > 300 KB), `images.unoptimized: true`, no responsive images.
+- Tooling today: npm + Biome (write-only scripts, no CI at all), `.nvmrc` v26.5.0.
+- Analytics today: GA4 measurement ID `G-3TPD3DLYBR` passed to the Next GTM component.
+
+## Target architecture
+
+```
+/
+├── AGENTS.md                    # concise agent guide (CLAUDE.md -> symlink)
+├── DESIGN.md                    # design system source of truth
+├── mise.toml / mise.lock
+├── pnpm-workspace.yaml          # install policy (release-age cooldown, allowBuilds)
+├── astro.config.ts              # static, site: https://scstem.org, sitemap
+├── .oxlintrc.json / .oxfmtrc.json
+├── eslint.config.ts             # scoped to *.astro (+ md via Prettier)
+├── .prettierrc / .prettierignore
+├── .github/workflows/           # ci.yml (check+build+links), lighthouse.yml
+├── .claude/
+│   ├── settings.json            # PostToolUse format+lint hook
+│   ├── hooks/format-lint.sh     # routes files to the right toolchain
+│   └── skills/shadcn-astro/     # shadcn -> Astro porting skill
+├── docs/                        # adr/, content.md, analytics.md, tooling.md
+├── plan/                        # this plan
+├── tools/lint/anti-slop/        # vendored oxlint rules
+├── functions/                   # CF Pages Functions (form, calendar proxy)
+├── public/                      # only true statics: favicons, og, robots, _redirects, _headers
+├── src/
+│   ├── assets/                  # processed images (brand/, frc/, fll/, sponsors/, team/)
+│   ├── components/
+│   │   ├── ui/primitives/       # Button, Card, Badge, Input, Accordion, Dialog, Carousel…
+│   │   └── ui/                  # SponsorCard, Hero, FeatureGrid, Countdown, FaqList…
+│   ├── content/                 # sponsors/, events/, faq/, news/, frc/{robots,team-photos}/, fll/
+│   ├── content.config.ts
+│   ├── data/site.ts             # org info, URLs, calendar IDs, analytics IDs
+│   ├── layouts/                 # BaseLayout.astro, ProgramLayout.astro, EventLayout.astro
+│   ├── lib/                     # cn re-export, jsonld helpers, misc
+│   ├── pages/                   # routes incl. llms.txt.ts, styleguide (dev-only)
+│   └── styles/global.css        # @theme tokens, dark color-scheme, program themes
+└── legacy/                      # old site (reference only; deleted in Phase 11)
+```
+
+## Phases
+
+| Phase | File | Gate |
+|-------|------|------|
+| 01 | `01-foundation.md` — branch, legacy move, pnpm/mise, Astro scaffold, full toolchain, hooks, AGENTS.md, CI | CI green on scaffold |
+| 02 | `02-design-system.md` — DESIGN.md, tokens, fonts, program themes | DESIGN.md reviewed by owner |
+| 03 | `03-primitives.md` — `ui/primitives`, shadcn-astro skill, styleguide page | — |
+| 04 | `04-content-model.md` — collections, schemas, data migration, `site.ts` | — |
+| 05 | `05-app-shell.md` — BaseLayout, SEO component, base JSON-LD, Navbar, Footer, 404 | — |
+| 06 | `06-homepage.md` — homepage port | **Visual review gate: owner sign-off required before Phase 07** |
+| 07 | `07-pages.md` — all remaining non-event pages | — |
+| 08 | `08-events.md` — event-landing pattern, `/openhouse`, `/programs/frc/kickoff` | — |
+| 09 | `09-assets-performance.md` — image/video pipeline, Lighthouse CI budgets | Budgets green in CI |
+| 10 | `10-seo.md` — sitemap/robots/llms.txt/OG/JSON-LD completion, analytics | — |
+| 11 | `11-cutover.md` — parity verification, staging QA, launch, legacy deletion | Owner approves staging → main |
+| 12 | `12-content-strategy.md` — phase-2 backlog (copy revision, content SEO) | Not part of this overhaul |
+
+## Global definition of done (applies to every phase)
+
+- [ ] `pnpm check` passes (typecheck + oxlint + eslint + format checks + knip) with zero warnings.
+- [ ] `pnpm build` succeeds.
+- [ ] No imports from `legacy/`.
+- [ ] New pages have `title` + `description` and pass `astro check`.
+- [ ] Anything user-visible respects `DESIGN.md` (from Phase 02 onward).
+- [ ] Phase file's acceptance checkboxes updated in the phase PR.
+
+## Performance & quality budgets (enforced from Phase 09; targeted from Phase 01)
+
+- Lighthouse (mobile emulation, throttled): Performance ≥ 95, Accessibility = 100, SEO = 100, Best Practices ≥ 95.
+- LCP < 2.0 s, CLS < 0.05, TBT < 100 ms on every page.
+- Total client JS < 35 KB gzipped per page including analytics; zero framework runtime.
+- No image served larger than 300 KB at any rendered size; hero video ≤ 3 MB, never blocks LCP.
diff --git a/plan/01-foundation.md b/plan/01-foundation.md
new file mode 100644
index 0000000..aac451c
--- /dev/null
+++ b/plan/01-foundation.md
@@ -0,0 +1,119 @@
+# Phase 01 — Foundation: branch, toolchain, scaffold, agent config, CI
+
+**Prerequisites:** none (first phase).
+**Branch:** create `astro-rewrite` from latest `main`; do this phase on `overhaul/01-foundation` off it.
+
+## Objective
+
+An empty-but-real Astro project at the repo root with the complete final toolchain: pnpm + mise, oxlint/oxfmt + scoped ESLint/Prettier, strictest TypeScript, knip, Claude Code hooks, `AGENTS.md`, and blocking CI. The old site parked in `legacy/`. Everything later phases build on.
+
+## Tasks
+
+### 1. Park the old site
+
+- `git mv` into `legacy/`: `src/`, `data/`, `next.config.ts`, `postcss.config.mjs`, `biome.json`, `components.json`, `tsconfig.json`, `package.json`, `package-lock.json`, `.nvmrc`, `.env.development`, `.env.production`, `next-env.d.ts`.
+- **Keep at root:** `public/` (shared; pruned in Phase 09), `functions/` (kept as-is), `README.md`, `plan/`, `.vscode/` (rewritten below).
+- Add `legacy/README.md`: "Reference only. Do not import, copy, or build. Deleted at cutover (Phase 11)."
+- Ensure every tool configured below ignores `legacy/` (tsconfig exclude, oxlint/oxfmt ignorePatterns, eslint ignores, prettierignore, knip ignore, `.gitignore` untouched).
+
+### 2. Runtime + package manager (mise, pnpm) — spark conventions
+
+- `mise.toml`:
+  - `[settings]`: `minimum_release_age = "7d"`, `npm.package_manager = "pnpm"`.
+  - `[tools]`: pin exact current versions — `node` (latest LTS line matching or newer than legacy's v26.5.0; pick current at implementation time) and `pnpm` (latest).
+  - `[env]`: `_.path = ["{{config_root}}/node_modules/.bin"]`.
+  - `[tasks]`: thin forwarders only (`run = "pnpm run <name>"` + `description`) for: `install`, `dev`, `build`, `preview`, `check`, `typecheck`, `lint`, `lint:fix`, `fmt`, `fmt:check`, `knip`. **mise tasks never hold real commands; `package.json` scripts are the single source of truth.**
+- Commit `mise.lock` (`mise install` generates it).
+- Root `package.json`: `"private": true`, `"type": "module"`, `"packageManager": "pnpm@<exact>"` (must match mise pin), `"engines": { "node": ">=<major>" }`.
+- `pnpm-workspace.yaml` (install policy only, no `packages:` key):
+  ```yaml
+  minimumReleaseAge: 10080 # 7 days, supply-chain cooldown
+  allowBuilds:
+    sharp: true    # astro:assets image processing
+    esbuild: true
+  ```
+  Add `minimumReleaseAgeExclude` entries only when a specific fix is needed; comment why.
+- Document the corepack footgun in `docs/tooling.md`: corepack's pnpm shim can shadow the mise-pinned one and rewrite the lockfile — `which pnpm` must resolve to mise shims; otherwise `corepack disable pnpm`.
+
+### 3. Astro scaffold
+
+- Dependencies (latest stable at implementation time): `astro`, `@astrojs/check`, `@astrojs/sitemap`, `typescript`, `tailwindcss` + `@tailwindcss/vite` (Tailwind v4, CSS-first — no tailwind.config file), `cnfast`.
+- `astro.config.ts`: `site: "https://scstem.org"`, `output: "static"`, `outDir: "dist"`, `integrations: [sitemap()]`, vite plugin for tailwind. Match current URL shape (no trailing slashes in links; default `build.format: "directory"` is fine — CF Pages serves both).
+- `src/pages/index.astro` placeholder ("rewrite in progress" — never deployed to prod) and `src/styles/global.css` with `@import "tailwindcss";` (tokens come in Phase 02).
+- `src/lib/cn.ts`: `export { cn } from "cnfast";` — the only sanctioned import site.
+- `tsconfig.json`: `extends: "astro/tsconfigs/strictest"` plus explicitly ensure: `noUncheckedIndexedAccess`, `exactOptionalPropertyTypes`, `noImplicitOverride`, `noFallthroughCasesInSwitch`, `verbatimModuleSyntax`, `isolatedModules`, `forceConsistentCasingInFileNames`. Path alias `@/*` → `./src/*`. Exclude `legacy`, `dist`, `functions` (functions keep their own tsconfig).
+
+### 4. Lint/format toolchain (D12, D24)
+
+**oxlint + oxfmt own `.ts/.js/.mjs/.cjs/.json/.jsonc/.css`. ESLint + Prettier own `.astro` and `.md`.** Write this ownership table into `docs/tooling.md` and `AGENTS.md`.
+
+- Vendor anti-slop: `npx skills add dmmulroy/anti-slop --skill install-anti-slop`, or manually copy the plugin's `src/` into `tools/lint/anti-slop/` (skip the Effect-specific rule). Excluded from lint/format ignores like spark does.
+- `.oxlintrc.json` (model on spark's):
+  - `plugins`: `typescript`, `unicorn`, `oxc`, `import`.
+  - `options`: `typeAware: true`, `typeCheck: true` (add `oxlint-tsgolint` if required by the oxlint version).
+  - `categories`: `correctness: "error"`, `suspicious: "error"`, `perf: "warn"`, `style: "off"`.
+  - `jsPlugins`: `{ "name": "anti-slop", "specifier": "./tools/lint/anti-slop/index.ts" }`, all its rules `error`.
+  - `no-restricted-imports` (error): `clsx`, `classnames`, `tailwind-merge` (message: "use cn from @/lib/cn (cnfast)"), and any path matching `legacy/`.
+  - `ignorePatterns`: `legacy/**`, `dist/**`, `.astro/**`, `tools/lint/anti-slop/**`, `.claude/**`, `plan/**`.
+- `.oxfmtrc.json`: `sortTailwindcss: true`, `sortImports: true`, `sortPackageJson: true`; ignore `legacy/**`, `dist/**`, `.astro/**`, `.claude/**`, `tools/lint/anti-slop/**`, `**/*.md`, `**/*.astro`.
+- ESLint (flat, `eslint.config.ts`), **scoped to `**/*.astro` only**:
+  - `eslint-plugin-astro` flat recommended + its `jsx-a11y-strict` config; `typescript-eslint` parser for frontmatter with type-aware rules (`strictTypeChecked` applied to astro files).
+  - Import sorting for `.astro` frontmatter: `eslint-plugin-perfectionist` `sort-imports` (autofixable) — mirrors oxfmt's `sortImports` so the whole repo is sorted.
+  - Best-effort task: register the vendored anti-slop rules as a local ESLint plugin for `.astro` frontmatter (the rules use the ESLint rule API). If any rule fails to load under ESLint, skip that rule and note it in `docs/adr/0001-toolchain-split.md` — do not fork the rule source.
+  - Global ignores: everything except `**/*.astro` (plus `legacy/**`, `dist/**`, `.astro/**`).
+- Prettier: `.prettierrc` with `plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]` (tailwind plugin last), astro override (`parser: "astro"`). `.prettierignore`: everything except `**/*.astro`, `**/*.md` (`*`, `!*.astro`, `!*.md`, plus re-ignore `legacy/**`, `dist/**`, `plan/**` markdown stays formatted-by-hand: ignore `plan/**` and `docs/adr/**` if churn is unwanted — implementer's call, document it).
+- `.editorconfig` for what neither formatter covers (yaml/toml/shell): utf-8, lf, 2-space, final newline, trim trailing whitespace except `*.md`.
+- `knip.json`: all rules `"error"`; entry points: `astro.config.ts`, `src/pages/**`, `functions/**`, `eslint.config.ts`; ignore `legacy/**`, `tools/lint/anti-slop/**`.
+- `package.json` scripts (single source of truth):
+  ```jsonc
+  {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "typecheck": "astro check",
+    "lint": "oxlint --type-aware && eslint --max-warnings 0 .",
+    "lint:fix": "oxlint --type-aware --fix && eslint --max-warnings 0 --fix .",
+    "fmt": "oxfmt && prettier --write .",
+    "fmt:check": "oxfmt --check && prettier --check .",
+    "knip": "knip",
+    "check": "pnpm run typecheck && pnpm run lint && pnpm run fmt:check && pnpm run knip"
+  }
+  ```
+- `docs/adr/0001-toolchain-split.md`: record D24 and the exact oxc-Astro migration seam — "when oxlint/oxfmt ship Astro support: delete `eslint.config.ts`, Prettier config + plugins and their devDependencies; remove `.astro`/`.md` from oxfmt ignores; move anti-slop ESLint registration (if any) back to jsPlugins-only; update hook script and `docs/tooling.md` ownership table."
+
+### 5. Editor + agent config
+
+- `.vscode/settings.json`: Prettier as default formatter for `astro`/`markdown`, oxc extension (`oxc.oxc-vscode`) as default for ts/js/json/css with `source.fixAll.oxc` + `source.organizeImports.oxc` on save, `formatOnSave: true`, Tailwind `classRegex` for `cn(...)` and `cva(...)`, `files.associations: {"*.css": "tailwindcss"}`. `.vscode/extensions.json`: `astro-build.astro-vscode`, `oxc.oxc-vscode`, `esbenp.prettier-vscode`, `bradlc.vscode-tailwindcss`, `hverlin.mise-vscode`.
+- `AGENTS.md` (concise — aim for one screen) with sections:
+  1. What this is (3 lines: static Astro site for South Central STEM Collective, Cloudflare Pages, zero client frameworks).
+  2. Commands (`mise run check` / `pnpm check`, dev, build).
+  3. Toolchain ownership table (which linter/formatter owns which extensions) + "hooks run them automatically on every edit."
+  4. Architecture map (5 lines: pages, layouts, ui vs ui/primitives, content collections, data/site.ts, functions/).
+  5. Rules: `cn` only from `@/lib/cn`; no new dependencies without an ADR; no client-side frameworks; content edits go in `src/content/` (see `docs/content.md`); design decisions come from `DESIGN.md`.
+  6. Comments policy (adopt spark's): describe what is there, never what is not; no narrating edits; rejected alternatives go in `docs/adr/`.
+- `ln -s AGENTS.md CLAUDE.md` (symlink, committed).
+- `.claude/settings.json` PostToolUse hook on `Edit|Write|NotebookEdit` → `.claude/hooks/format-lint.sh` (timeout 60).
+- `.claude/hooks/format-lint.sh` (adapt spark's `oxc.sh`): read hook JSON from stdin; resolve `.tool_response.filePath // .tool_input.file_path`; exit 0 for files outside repo, in `legacy/`, `dist/`, `.astro/`, `node_modules/`, `plan/`, or vendored rule dirs. Route by extension:
+  - `ts|tsx|js|jsx|mjs|cjs|json|jsonc|css` → `oxfmt <file>` then `oxlint --type-aware <file>`; on lint failure print findings to stderr and `exit 2` (feeds back to the agent).
+  - `astro` → `prettier --write <file>` then `eslint --max-warnings 0 <file>`; same exit-2 behavior.
+  - `md` → `prettier --write <file>` only.
+
+### 6. CI (D14)
+
+- `.github/workflows/ci.yml` — on `pull_request` and pushes to `astro-rewrite`:
+  1. Checkout; install mise (`jdx/mise-action`) → tools from `mise.toml`/`mise.lock`.
+  2. `pnpm install --frozen-lockfile`.
+  3. `pnpm check`.
+  4. `pnpm build`.
+  5. Link check over output: `lycheeverse/lychee-action` in `--offline` mode against `dist/` (internal links + anchors).
+  All steps blocking. (Lighthouse workflow arrives in Phase 09.)
+- Do NOT touch Cloudflare Pages settings yet (Phase 11).
+
+## Acceptance criteria
+
+- [ ] `mise install && pnpm install && pnpm check && pnpm build` all green on a fresh clone.
+- [ ] `legacy/` contains the entire old app; no tool reads it; `git grep -l "from \"legacy" src` is empty.
+- [ ] Deliberately adding `import clsx from "clsx"` to a `.ts` file fails `pnpm lint`; same for a chained type assertion (anti-slop active).
+- [ ] Editing a `.ts` and an `.astro` file via Claude Code triggers the hook and auto-formats each with the correct toolchain; a lint error is fed back to the agent.
+- [ ] CI workflow runs and blocks on a seeded lint error (verify once, then fix).
+- [ ] `AGENTS.md` + `CLAUDE.md` symlink, `docs/tooling.md`, `docs/adr/0001-toolchain-split.md` exist.
diff --git a/plan/02-design-system.md b/plan/02-design-system.md
new file mode 100644
index 0000000..62550b4
--- /dev/null
+++ b/plan/02-design-system.md
@@ -0,0 +1,60 @@
+# Phase 02 — Design system: DESIGN.md, tokens, typography, program themes
+
+**Prerequisites:** Phase 01.
+**Branch:** `overhaul/02-design-system` off `astro-rewrite`.
+**Gate:** DESIGN.md is reviewed by the owner before Phase 03 begins (post the doc in the PR; iterate there).
+
+## Objective
+
+A written design system (`DESIGN.md`) and its CSS implementation (tokens, fonts, themes). This is where "brand-faithful refresh, genuinely better, no AI feel" gets engineered. The current UI is *good*; the target is *great* — deliberate, specific, and consistent.
+
+## Reference material (in `legacy/`)
+
+- Brand colors: `legacy/src/styles/theme.ts` (hand-authored yellow/green/blue/orange/red/gray scales) and `legacy/src/styles/hero.ts` (HeroUI themes: default dark w/ yellow primary, `bio` green for FRC, `fll` theme).
+- Fonts: `legacy/src/styles/fonts.ts` — Inter (sans), Orbitron (headings), Source Code Pro (mono).
+- Heading utilities + selection styles: `legacy/src/styles/globals.css`.
+- Existing look: run the legacy site (`cd legacy && npm ci && npm run dev`) or browse https://scstem.org for screenshots.
+
+## Tasks
+
+### 1. Write `DESIGN.md` (repo root)
+
+Structure it as the single source of truth agents design against. Required sections:
+
+1. **Brand essence & voice** — who SC2 is (regional STEM nonprofit, FIRST robotics), tone (energetic, credible, community-driven; write for parents, sponsors, and students simultaneously). 3–5 adjectives with "this, not that" contrasts.
+2. **Color** — semantic token table (shadcn naming: `background`, `foreground`, `card`, `muted`, `primary`, `secondary`, `accent`, `destructive`, `border`, `ring`, …) with the dark values derived from the legacy palette (yellow `#FACC15`-family primary). Rules: where yellow is allowed (CTAs, accents, focus — never long body text), contrast minimums (WCAG AA at minimum; AAA for body text), and the program accent remapping (`frc` → green, `fll` → FLL palette). Document that light theme is future work: **every color in components must come from a token; raw hex/tailwind palette classes are banned in components.**
+3. **Typography** — exact scale. Orbitron for display/headings (define weights and where it stops — e.g. h1–h3 only; overuse of a techno font is the fastest route to "AI slop"), Inter for UI/body, Source Code Pro only where code/numbers demand it. Fluid type via `clamp()`; define the ramp (e.g. 6 steps), line-heights, letter-spacing for Orbitron caps, max line length (`65–75ch`).
+4. **Spacing, radius, elevation** — 4px-base spacing scale; radius tokens; shadows/borders for a dark UI (prefer borders + subtle surface shifts over heavy shadows).
+5. **Layout** — container widths, section rhythm (consistent vertical padding scale), grid patterns for card grids, breakpoints. Mobile-first: every pattern defined at 360px before desktop.
+6. **Motion** — CSS-only. Durations (e.g. 150/250/400ms), easings, what animates (opacity/transform only), scroll behavior, `prefers-reduced-motion` always honored. Principle: fewer, more deliberate animations; nothing moves without a reason.
+7. **Imagery & art direction** — real team photography over stock/illustration. Define treatments (duotone/overlay for text-over-photo legibility, consistent corner radius). Explicitly flag the legacy unDraw SVG illustrations for retirement where a photo exists (anti-AI-feel); where kept temporarily, recolor to brand tokens.
+8. **Components tone** — buttons (one primary per view), cards, forms (visible labels, no placeholder-as-label), iconography (Tabler, one stroke weight, sizes).
+9. **Accessibility** — dark-mode contrast table for token pairs, focus-visible style (high-contrast ring token), touch targets ≥ 44px, skip link, landmark rules.
+10. **Do / Don't gallery** — 8–10 concrete pairs (e.g. "Don't: three different yellows on one screen. Do: primary token only.").
+
+Anti-AI-feel checklist to embed: no gradient-on-everything, no emoji-as-icons, no generic hero copy ("Empowering the future of…"), no purple-gradient defaults, consistent icon stroke, real photos of real students, specific numbers over vague claims.
+
+### 2. Implement tokens — `src/styles/global.css`
+
+- Tailwind v4 `@theme` block defining the full token set from DESIGN.md: colors (semantic names → `--color-*` so utilities like `bg-background`, `text-primary` exist), font families, fluid type scale (`--text-*`), spacing/radius additions, `--breakpoint-3xl` (legacy had one).
+- `:root { color-scheme: dark; }` on html; body gets `bg-background text-foreground`.
+- Program themes (D16): `[data-theme="frc"]` and `[data-theme="fll"]` blocks remapping only the accent-family tokens (`--color-primary`, `--color-ring`, etc.). Adding a future program theme = one new block. Document the pattern in DESIGN.md §2.
+- Port/replace heading utilities and `::selection` styling; define `:focus-visible` globally.
+- Structure the file so a future light theme is additive: base tokens on `:root`, dark values are the defaults (site is dark-only for now — no media queries needed yet), with a comment marking where `[data-theme="light"]` would land.
+
+### 3. Fonts
+
+- Self-hosted via `@fontsource-variable/inter`, `@fontsource-variable/orbitron`, `@fontsource-variable/source-code-pro` (fall back to static @fontsource package for any without a variable axis). Latin subset only.
+- `font-display: swap`; preload the two woff2 files used above the fold (Inter var, Orbitron var) in the base layout (Phase 05 wires the preload — export the font file paths from a small `src/styles/fonts.ts`).
+
+### 4. Sanity page
+
+- `src/pages/styleguide.astro` (temporary skeleton): renders the color tokens as swatches with computed contrast ratios, the type ramp, and spacing scale. Phase 03 extends it with primitives. Must be excluded from sitemap + `noindex` (wire the exclusion when sitemap config exists; leave a `TODO(phase-10)` marker is NOT allowed under the comments policy — instead add the exclusion to the Phase 10 task list, already done).
+
+## Acceptance criteria
+
+- [ ] `DESIGN.md` complete with all 10 sections + do/don't gallery; reviewed by owner in the PR.
+- [ ] Every color used in `global.css` is a defined token; `frc`/`fll` themes remap accents only.
+- [ ] `/styleguide` renders tokens/type ramp; all body-text token pairs pass AA (shown on the page).
+- [ ] Fonts self-hosted, subset, swap; no Google Fonts network requests in dev tools.
+- [ ] `pnpm check && pnpm build` green.
diff --git a/plan/03-primitives.md b/plan/03-primitives.md
new file mode 100644
index 0000000..98033f6
--- /dev/null
+++ b/plan/03-primitives.md
@@ -0,0 +1,58 @@
+# Phase 03 — UI primitives + shadcn-astro agent skill
+
+**Prerequisites:** Phase 02 (tokens exist).
+**Branch:** `overhaul/03-primitives` off `astro-rewrite`.
+
+## Objective
+
+`src/components/ui/primitives/` — low-level, zero-JS-by-default, shadcn-*convention* Astro components — plus the repo agent skill that codifies how to port any shadcn component to Astro later. `src/components/ui/` (composed components) is populated in Phases 05–08 as pages need them; this phase only establishes the primitive layer.
+
+## Conventions (write these into `src/components/ui/primitives/README.md`)
+
+- **API mirrors shadcn**: same component names, `variant`/`size` prop vocabulary, CVA (`class-variance-authority`) for variants, `cn()` from `@/lib/cn` for merging, `class` prop + `...rest` spread onto the root element so callers can extend.
+- **Zero JS by default.** Interactivity ladder: (1) native HTML (`<details>`, `<dialog>`, popover attribute), (2) CSS-only, (3) a small inline `<script>` with no dependencies — only when 1–2 can't deliver, and always progressive-enhancement (content readable without JS).
+- **Accessibility is part of the primitive**, not the caller's job: focus-visible styles, aria wiring, keyboard behavior.
+- Polymorphism where shadcn uses `asChild`: an `as` prop (e.g. Button renders `a` when `href` is passed) — replaces legacy's separate `LinkButton`.
+- Types: each primitive exports its `Props` interface extending the appropriate `astroHTML.JSX` element attributes.
+
+## Tasks
+
+### 1. Build the initial primitive set
+
+Only what the site actually needs (verified against legacy usage). For each, follow shadcn's anatomy/naming, styled with Phase 02 tokens:
+
+| Primitive | Notes / replaces |
+|---|---|
+| `Button` | variants: default/secondary/outline/ghost/link; sizes sm/md/lg/icon; renders `<a>` with `href`. Replaces HeroUI Button, `LinkButton`, `legacy/src/components/shadcn/ui/button.tsx`. |
+| `Card` (+ Header/Title/Description/Content/Footer sub-parts as named slots or subcomponents) | Base for FeatureCard/SponsorCard later. |
+| `Badge` | sponsor levels, program tags. |
+| `Input`, `Textarea`, `Label`, `FieldError` | native elements + token styling; visible labels per DESIGN.md. Replaces `legacy/src/components/forms/fields/*`. |
+| `Separator` | |
+| `Accordion` | native `<details>/<summary>` + CSS; grouped via `name` attribute for exclusive-open. Replaces HeroUI accordion usage (FAQ). |
+| `Dialog` | native `<dialog>` + ~15-line inline script for open/close triggers. Replaces `Modal.tsx` (280 LOC). |
+| `Carousel` | CSS scroll-snap track + optional small script for prev/next buttons and dots; touch = native scrolling. Replaces all three legacy carousels (`Carousel`, `ManualCarousel`, `shadcn/ui/carousel`). |
+| `Icon` | via `astro-icon` + `@iconify-json/tabler` (build-time inlined SVG, zero runtime). Replaces `@tabler/icons-react`/`lucide-react`. |
+| `Skeleton`/`Spinner` | only if a page needs one (calendar loading state does). |
+
+Dependencies added this phase: `class-variance-authority`, `astro-icon`, `@iconify-json/tabler`. Nothing else.
+
+### 2. Extend `/styleguide`
+
+Every primitive rendered in all variants/sizes/states (hover/focus/disabled shown via a class toggle), on both default and `data-theme="frc"`/`"fll"` sections. This page is the visual-review artifact for the Phase 06 gate.
+
+### 3. Create `.claude/skills/shadcn-astro/SKILL.md`
+
+An agent skill for "add/port a shadcn component as an Astro primitive". Contents:
+
+- **When to use**: a needed primitive doesn't exist in `ui/primitives/`.
+- **Process**: fetch the component's source from the shadcn registry (`https://ui.shadcn.com/r/styles/default/<name>.json` — verify current registry URL at time of use); read its anatomy, variants, and Radix behavior; re-implement per the conventions README (link it): CVA variants copied nearly verbatim, tokens already align (shadcn naming), Radix behavior mapped down the interactivity ladder (native element → CSS → small script). Document any intentionally dropped behavior in the component's Props JSDoc.
+- **Rules**: no React/Radix dependencies ever; token names must already exist in `global.css` (if not, stop and propose a DESIGN.md addition); register the new primitive on `/styleguide`; run `pnpm check`.
+- Include one worked example in the skill (e.g. the Accordion mapping: Radix Accordion → `<details name>`).
+
+## Acceptance criteria
+
+- [ ] All primitives in the table exist, typed, token-only styling, and render on `/styleguide` in all variants and all three themes.
+- [ ] Keyboard test: Dialog (Esc/backdrop close, focus trap via native `<dialog>`), Accordion (Enter/Space), Carousel buttons focusable; icons are `aria-hidden` with text alternatives where needed.
+- [ ] Zero client JS shipped for a page using only Button/Card/Badge/Input/Accordion (`dist` inspection).
+- [ ] `ui/primitives/README.md` conventions written; `shadcn-astro` skill present and self-consistent.
+- [ ] `pnpm check && pnpm build` green.
diff --git a/plan/04-content-model.md b/plan/04-content-model.md
new file mode 100644
index 0000000..8e38edf
--- /dev/null
+++ b/plan/04-content-model.md
@@ -0,0 +1,95 @@
+# Phase 04 — Content model: collections, schemas, data migration
+
+**Prerequisites:** Phase 01 (Phase 02/03 not strictly required; can run in parallel with 03).
+**Branch:** `overhaul/04-content-model` off `astro-rewrite`.
+
+## Objective
+
+All maintainable content moves out of code into zod-validated Astro Content Collections (markdown + frontmatter) and one typed config module. Editing content = editing a small file. Schemas stay flat and CMS-friendly (D2): strings, enums, booleans, dates, image paths — no nested cleverness.
+
+## Structure
+
+```
+src/content/
+├── sponsors/           # one .md per sponsor (all programs)
+├── events/             # one .md per seasonal event (openhouse, kickoff, …)
+├── faq/                # one .md per Q&A entry
+├── news/               # scaffold only; empty + _TEMPLATE.md
+├── frc/
+│   ├── robots/         # one .md per season robot
+│   └── team-photos/    # one .md per year photo entry
+└── fll/
+    └── team-photos/    # same schema as frc/team-photos
+src/content.config.ts    # all collections, glob loaders, zod schemas
+src/data/site.ts          # typed site config (not a collection)
+```
+
+FRC/FLL-specific content is always nested under `frc/`/`fll/` (D18). Cross-program collections (`sponsors`, `events`, `faq`, `news`) carry an optional `program: "frc" | "fll" | "sc2"` field instead.
+
+## Tasks
+
+### 1. Define collections in `src/content.config.ts`
+
+Use the content-layer `glob()` loader and the `image()` schema helper so logos/photos are validated + processed by astro:assets.
+
+- **`sponsors`** — migrate from `legacy/data/sponsors.ts`:
+  ```
+  name: string
+  level: enum (keep legacy SponsorLevel tiers exactly)
+  url: string.url().optional()
+  logo: image()
+  active: boolean (default true)
+  since: number().int().optional()   # first year sponsoring
+  notes: string.optional()
+  ```
+  Migrate **every** entry including the commented-out former sponsors (Wellspan, VFW, Fives, …) as `active: false` (D18). Logos move to `src/assets/sponsors/`. Any commented entry whose logo no longer exists: create the file with `active: false` and a `notes` field naming the missing asset; list these in the PR description for the owner.
+- **`events`** (D17) — drives Phase 08's landing pattern:
+  ```
+  title, slug-independent route (route comes from page wiring, not collection)
+  program: enum sc2|frc|fll
+  start: date, end: date.optional()
+  location: { name, address }  # flat strings
+  description: string (meta description)
+  heroImage: image().optional()
+  cta: { label, href }
+  registrationUrl: string.url().optional()
+  faq: array of faq entry ids (reference("faq")).optional()
+  hidden: boolean (default false)   # hidden => page 404s/redirects + excluded from sitemap
+  ```
+  Body markdown = the event's long-form copy. Seed: `openhouse.md` (from `legacy/src/app/openhouse/page.tsx` incl. its faq array and date logic) and `frc-kickoff.md` (from `legacy/src/app/programs/frc/kickoff/page.tsx` `KICKOFF_CONFIG` + copy).
+- **`faq`** — `question` (frontmatter), body = answer markdown, `program` optional, `tags` optional. Seed from the openhouse FAQ array.
+- **`news`** — schema now (`title`, `date`, `description`, `heroImage?`, `draft`), directory empty except `_TEMPLATE.md` showing the frontmatter. Exists so Phase 12 needs no code.
+- **`frc/robots`** — from the inline JSX slides in `legacy/src/app/programs/frc/robots/page.tsx`:
+  ```
+  year: int, name: string, game: string
+  image: image(), imageAlt: string
+  achievements: string[] .optional()
+  ```
+  Body = the season/robot description prose extracted from the JSX.
+- **`frc/team-photos`** + **`fll/team-photos`** — from the 14 static imports in `legacy/src/app/about/components.tsx`: `year: int`, `photo: image()`, `alt: string`, `caption?`.
+
+### 2. `src/data/site.ts`
+
+Typed constants module (single import site for site facts):
+- Org: name ("South Central STEM Collective"), short name (SC2), legal/EIN if present in legacy footer, address, contact email, social URLs (from `legacy/src/components/Footer.tsx`).
+- External URLs from `legacy/data/config.ts`: donate, wishlist, sponsor packet, get-involved form.
+- Google Calendar IDs (from `legacy/src/app/calendar/[name]/page.tsx`) keyed by `frc` / `sc2`.
+- Analytics IDs (GA4 `G-3TPD3DLYBR`, CF beacon token added Phase 10).
+- Default SEO strings (site title, template, default description).
+
+### 3. Editing documentation
+
+`docs/content.md` — the "2-minute sponsor" guide: add/remove/deactivate a sponsor, add an event / hide last year's, add an FAQ, add a robot. Include exact file templates. Link from `AGENTS.md` and README. Note the CMS-future constraint: keep schemas flat; schema changes need an ADR.
+
+### 4. Guardrail
+
+Add a lint restriction (oxlint `no-restricted-imports` or a small check script in `check`) preventing `src/pages/**` from declaring inline content arrays of the legacy sort where a collection exists — enforcement is soft (review guidance in AGENTS.md) if a clean lint rule isn't feasible; don't over-engineer.
+
+## Acceptance criteria
+
+- [ ] `astro check`/build validates all collections; a deliberately broken frontmatter field fails the build with a readable zod error.
+- [ ] Sponsor migration is lossless: every active + commented legacy sponsor is represented; count and names listed in PR description.
+- [ ] Robots, team photos, FAQ, and both events fully migrated; no content invented — copy comes verbatim from legacy (D8: revision is Phase 12).
+- [ ] `src/data/site.ts` replaces every hardcoded constant found in legacy pages (config URLs, calendar IDs, kickoff config).
+- [ ] `docs/content.md` written; a non-author following it can add a sponsor without touching TS.
+- [ ] `pnpm check && pnpm build` green.
diff --git a/plan/05-app-shell.md b/plan/05-app-shell.md
new file mode 100644
index 0000000..cf038ba
--- /dev/null
+++ b/plan/05-app-shell.md
@@ -0,0 +1,61 @@
+# Phase 05 — App shell: BaseLayout, SEO component, Navbar, Footer, 404
+
+**Prerequisites:** Phases 02, 03, 04.
+**Branch:** `overhaul/05-app-shell` off `astro-rewrite`.
+
+## Objective
+
+The chrome every page shares, with SEO correctness built in so page phases can't forget it: a `BaseLayout` whose props *force* good metadata, plus rebuilt Navbar/Footer per DESIGN.md.
+
+## Tasks
+
+### 1. `src/components/Seo.astro`
+
+Rendered inside `<head>` by BaseLayout. Props:
+- `title: string` (required), `description: string` (**required** — compile error if missing), `ogImage?: ImageMetadata | string` (default: site-wide OG image), `ogType?: "website" | "article"`, `canonical?: URL` (default: `Astro.url` against `site`), `noindex?: boolean`.
+- Emits: `<title>` with template `%s | South Central STEM Collective` (bare site title on the homepage), meta description, canonical link, full Open Graph set (`og:title/description/type/url/image` + image dimensions/alt), Twitter card (`summary_large_image`), `theme-color`.
+- **No `keywords` meta** (legacy's 22-keyword list is dropped — obsolete signal).
+
+### 2. JSON-LD foundation — `src/lib/jsonld.ts`
+
+Typed builder helpers returning `schema.org` objects, serialized via a tiny `<JsonLd data={...} />` component (`<script type="application/ld+json">` with `JSON.stringify` — set:html safe since data is our own):
+- `organization()` — `@type: NGO` (nonprofit): name, alternateName "SC2", url, logo, email, address, `sameAs` socials — all from `src/data/site.ts`. Emitted on every page via BaseLayout.
+- `webSite()` — name + url, homepage only.
+- `breadcrumbs(items)` — used by nested pages (Phases 07/08).
+- (Event/FAQPage builders added in Phase 08.)
+
+### 3. `src/layouts/BaseLayout.astro`
+
+- HTML skeleton: `lang="en"`, `color-scheme` meta, viewport, font preloads (from Phase 02 `fonts.ts`), `global.css`, Seo component (props passed through — every page must supply title/description), favicon set, org JSON-LD, named slot for extra head (per-page JSON-LD).
+- Body: skip link ("Skip to content"), `<Navbar />`, `<main id="main">` slot, `<Footer />`. Optional `theme?: "frc" | "fll"` prop → `data-theme` on `<html>`.
+- Favicon/manifest set in `public/`: `favicon.ico` (carry over), new `icon.svg`, `apple-touch-icon.png` (180px), `site.webmanifest` (name, short_name SC2, theme/background colors from tokens, icons 192/512). Generate from the legacy logo asset.
+- `src/layouts/ProgramLayout.astro`: thin wrapper setting `theme` — replaces the duplicated legacy FRC/FLL layouts.
+
+### 4. Navbar — `src/components/ui/Navbar.astro`
+
+Rebuild (reference `legacy/src/components/Navbar.tsx`, 261 LOC, for link inventory and grouping only):
+- Semantic `<header><nav aria-label="Main">`, logo (Phase 02 treatment), current-page indication via `aria-current="page"`.
+- Mobile: disclosure menu — button with `aria-expanded` + small inline script toggling; CSS transition; no focus trap needed (non-modal); Esc closes. Works at 360px.
+- Desktop: programs dropdown (if legacy has one) via CSS `:focus-within`/popover attribute — keyboard reachable.
+- Sticky behavior only if DESIGN.md says so; no scroll-linked JS.
+
+### 5. Footer — `src/components/ui/Footer.astro`
+
+Reference `legacy/src/components/Footer.tsx` (195 LOC) for content inventory: nav links, social icons (Icon primitive), contact info, legal line. All data from `src/data/site.ts`. Semantic `<footer>`, one `<nav aria-label="Footer">`.
+
+### 6. 404 — `src/pages/404.astro`
+
+Branded, helpful links (home, programs, contact), noindex. CF Pages serves `404.html` from static output automatically.
+
+### 7. Placeholder wiring
+
+Point `src/pages/index.astro` (still placeholder) at BaseLayout so the shell is visible on the preview URL and `/styleguide`.
+
+## Acceptance criteria
+
+- [ ] Omitting `description` on a page using BaseLayout is a type error.
+- [ ] View-source on any page: title, description, canonical, OG/Twitter set, NGO JSON-LD present and valid (paste into Google Rich Results test manually once).
+- [ ] Navbar: keyboard-only operation works (tab order, Esc, aria-expanded state); usable at 360px; zero JS beyond the disclosure toggle.
+- [ ] Skip link functions; landmarks: exactly one `header`, `main`, `footer`, labeled `nav`s.
+- [ ] Web manifest + icons valid (Lighthouse PWA-adjacent audits pass; no console 404s).
+- [ ] `pnpm check && pnpm build` green.
diff --git a/plan/06-homepage.md b/plan/06-homepage.md
new file mode 100644
index 0000000..fd4ab02
--- /dev/null
+++ b/plan/06-homepage.md
@@ -0,0 +1,52 @@
+# Phase 06 — Homepage + visual review gate
+
+**Prerequisites:** Phase 05.
+**Branch:** `overhaul/06-homepage` off `astro-rewrite`.
+**Gate:** ⛔ **Owner visual sign-off required before Phase 07 starts.** This is the checkpoint where "good → great" is settled while only one page is at stake.
+
+## Objective
+
+The homepage rebuilt to DESIGN.md quality with existing marketing copy (D8), plus the composed `ui/` components the rest of the site will reuse. Then a structured visual review loop with the owner.
+
+## Reference
+
+`legacy/src/app/page.tsx` (323 LOC): hero with background video + CTA, `programCards` array, `joinCards` array, sponsors strip, video CTA section. Copy is ported verbatim; layout/polish follows DESIGN.md, not the legacy page.
+
+## Tasks
+
+### 1. Composed components (in `src/components/ui/`)
+
+Built from primitives; these are the reusable section vocabulary for all later pages:
+- `Hero.astro` — full-bleed hero with media slot (video or image), heading, subhead, CTA group. Video handling per D20: `<video muted loop playsinline preload="none" poster>` with the existing MP4/WebM sources *for now* (re-encode lands in Phase 09 — structure the component so only the source files change), poster shown until user interaction/in-view, `prefers-reduced-motion` → poster only.
+- `Section.astro` — consistent vertical rhythm wrapper (replaces `legacy/src/components/page/Section.tsx`), optional heading/eyebrow/intro slots.
+- `FeatureCard.astro` / `FeatureGrid.astro` — replaces `legacy/src/components/cards/FeatureCard.tsx`; used for program cards and join cards.
+- `SponsorStrip.astro` — pulls **active** sponsors from the `sponsors` collection, ordered by level; logos via astro:assets with fixed dimensions (no CLS); links out with `rel="sponsored noopener"`.
+- `CtaBanner.astro` — the "get involved / donate" band.
+- Page-local data (program cards, join cards) lives as a typed const in the page frontmatter — fine for layout-coupled copy (D18 note: collections are for *repeating, editor-owned* content).
+
+### 2. Assemble `src/pages/index.astro`
+
+- BaseLayout with title = site name, homepage description (port legacy meta description), `webSite()` JSON-LD added.
+- Sections per legacy content order unless DESIGN.md argues otherwise: hero → programs → sponsors → join/CTA. The `/openhouse` fork is *not* consulted (Phase 08 handles events).
+- LCP element (hero poster/heading) must not depend on JS; hero image/poster gets `fetchpriority="high"` + eager loading; everything below the fold lazy.
+
+### 3. Visual review loop (the gate)
+
+1. Merge-ready PR → CF Pages preview URL on `astro-rewrite` after merge, or the PR's own preview.
+2. Produce a review pack for the owner: full-page screenshots at 360px, 768px, 1440px (light on nothing — dark only), plus side-by-side with production scstem.org (use the pre-installed Chromium/Playwright).
+3. Owner critiques → iterate on the homepage **and fold every generalizable decision back into DESIGN.md** (that's the deliverable that keeps Phase 07 fast). Repeat until explicit sign-off.
+4. Record sign-off: check the box below, note date + iteration count in the PR.
+
+### 4. Housekeeping
+
+- Local Lighthouse run (mobile) recorded in PR description — targets: Perf ≥ 90 at this stage (video not yet re-encoded), A11y = 100, SEO = 100. Note the video weight as the known gap closed by Phase 09.
+
+## Acceptance criteria
+
+- [ ] Homepage copy parity with legacy (diff the visible text; intentional omissions listed in PR).
+- [ ] All sections built from `ui/` + `ui/primitives/` — zero one-off styling that bypasses tokens.
+- [ ] Sponsors render from the collection; deactivating a sponsor file removes it without code changes.
+- [ ] Zero client JS except the video poster/in-view script and nav toggle; reduced-motion shows poster.
+- [ ] Lighthouse A11y = 100, SEO = 100 (mobile) on the preview.
+- [ ] ⛔ **Owner visual sign-off recorded; DESIGN.md updated with review outcomes.**
+- [ ] `pnpm check && pnpm build` green.
diff --git a/plan/07-pages.md b/plan/07-pages.md
new file mode 100644
index 0000000..a5295a6
--- /dev/null
+++ b/plan/07-pages.md
@@ -0,0 +1,72 @@
+# Phase 07 — Remaining pages
+
+**Prerequisites:** Phase 06 **including owner sign-off**.
+**Branch:** one branch per group is fine (`overhaul/07a-…`), all off `astro-rewrite`. Groups below are independent and can run as parallel agents.
+
+## Objective
+
+Port every remaining non-event route at DESIGN.md quality with verbatim legacy copy (D8). URLs unchanged (D17). Every page: BaseLayout, unique title + description, breadcrumbs JSON-LD where nested.
+
+Shared rules for all groups:
+- Reference the legacy page for copy/content inventory only; rebuild with `ui/` + primitives.
+- Images via astro:assets with explicit dimensions (sources may still be heavy — Phase 09 fixes sources; markup must already be responsive: `widths`/`sizes`, lazy below the fold).
+- Any repeating content discovered that should be a collection → add to Phase 04's collections in the same PR (schema + ADR note), don't inline it.
+
+## Group A — About & Sponsors
+
+### `/about` (`legacy/src/app/about/page.tsx` + `components.tsx`)
+- Port history/mission copy; team-year photo section renders from `frc/team-photos` + `fll/team-photos` collections (replaces 14 hardcoded imports). Consider a `Carousel` primitive or a grid per DESIGN.md.
+- `breadcrumbs()` JSON-LD.
+
+### `/sponsors` (`legacy/src/app/sponsors/page.tsx`)
+- Grid grouped by level (Badge for tier), from the collection, `active: true` only; "become a sponsor" CTA + sponsor-packet link from `site.ts`.
+- Optional past-sponsors acknowledgment section (active:false, name-only) — implementer's judgment, flag in PR.
+
+## Group B — Contact, Donate, Get involved
+
+### `/contact` (`legacy/src/app/contact/page.tsx`, `legacy/src/components/forms/*`)
+- Rebuild form with Input/Textarea/Label/FieldError primitives: native validation attributes + a small vanilla `<script>` for fetch submit to the existing `/api/form/submit` Pages Function, inline success/error states, disabled-while-pending.
+- Turnstile: vanilla widget (`https://challenges.cloudflare.com/turnstile/v0/api.js` with `defer`, explicit render into a div) — replaces the React wrapper. Site key via `PUBLIC_TURNSTILE_SITE_KEY` env (document in `docs/tooling.md`; dev uses the always-pass test key from `legacy/.env.development`).
+- No-JS fallback: form still renders; if fetch-submit requires JS, include a `<noscript>` note with the contact email.
+- `functions/` stays as-is this phase; only fix types/lint if `check` requires.
+
+### `/donate` (`legacy/src/app/donate/page.tsx`)
+- `donateCards` → typed const in frontmatter; CTAs to donate/wishlist URLs from `site.ts`.
+
+### `/get-involved` (`legacy/src/app/get-involved/page.tsx`)
+- Keep the embedded Google Form; lazy-load the iframe (`loading="lazy"` + optional click-to-load facade if DESIGN.md prefers); intro copy + fallback direct link to the form URL from `site.ts`.
+
+## Group C — Programs (FRC/FLL)
+
+### `/programs/frc` (`legacy/src/app/programs/frc/page.tsx` + `components.tsx`)
+- ProgramLayout `theme="frc"`. Port copy/sections; team identity (Biohazard) media from `src/assets/frc/`.
+
+### `/programs/fll` (`legacy/src/app/programs/fll/page.tsx`)
+- ProgramLayout `theme="fll"`. Port copy.
+
+### `/programs/frc/robots` (`legacy/src/app/programs/frc/robots/page.tsx`)
+- Renders `frc/robots` collection newest-first: robot cards/sections with image, name, game, achievements, prose body.
+- Replace `react-scroll-parallax` background with a static treated image or CSS-only effect per DESIGN.md motion rules. The 11.3 MB background source gets resized properly by astro:assets markup now, re-encoded in Phase 09.
+- Breadcrumbs JSON-LD (Programs → FRC → Robots).
+
+## Group D — Calendars (D19)
+
+### New Pages Function: `functions/api/calendar/[name].ts`
+- Validates `name` against the calendar IDs in a shared server-side map (mirror `site.ts` values; functions can't import from `src/` — duplicate the two IDs with a comment pointing at `site.ts`).
+- Fetches the calendar's public ICS feed server-side, parses upcoming events (next ~90 days) into JSON `{title, start, end, location, description}[]`. Parse with a minimal hand-rolled ICS parser (the feed shape is stable) — avoid adding a heavy dependency; if parsing proves gnarly, a micro ICS lib is acceptable with an ADR.
+- Cache: `Cache-Control: public, max-age=900` + CF cache API.
+
+### `/calendar/frc`, `/calendar/sc2` (`legacy/src/app/calendar/[name]/page.tsx`)
+- Static paths for `frc` | `sc2` (keep `[name].astro` with `getStaticPaths`).
+- Branded agenda list rendered by a small vanilla `<script>` fetching `/api/calendar/<name>`; Skeleton primitive while loading; error state.
+- No-JS/agent fallback rendered statically: a link "View on Google Calendar" (public embed URL) — always present.
+
+## Acceptance criteria
+
+- [ ] All routes above build at their exact legacy URLs; visible-copy parity per page (intentional diffs listed in PRs).
+- [ ] No page defines colors/spacing outside tokens; all imagery through astro:assets with dimensions.
+- [ ] Contact form: successful submit verified against the real function on a preview deploy (test Turnstile key), error path exercised.
+- [ ] Calendar pages show live events on preview; no-JS fallback link present in static HTML.
+- [ ] Each page: unique title + description, breadcrumbs JSON-LD on nested routes, Lighthouse A11y = 100 spot-checked.
+- [ ] `react-hook-form`, `valibot`, `@marsidev/react-turnstile`, `react-scroll-parallax`, `react-player` have no successors in the new tree (knip stays green).
+- [ ] `pnpm check && pnpm build` green.
diff --git a/plan/08-events.md b/plan/08-events.md
new file mode 100644
index 0000000..e48f98e
--- /dev/null
+++ b/plan/08-events.md
@@ -0,0 +1,40 @@
+# Phase 08 — Event landing pattern: /openhouse and /programs/frc/kickoff
+
+**Prerequisites:** Phases 06, 07 (uses Hero/Section/FeatureGrid/FaqList vocabulary).
+**Branch:** `overhaul/08-events` off `astro-rewrite`.
+
+## Objective
+
+Kill the seasonal-fork problem (D17): `/openhouse` (fork of homepage) and `/programs/frc/kickoff` (fork of FRC page) become thin routes rendering entries from the `events` collection through one `EventLayout`. Next season's event = edit one markdown file; hiding it = flip `hidden: true`.
+
+## Reference
+
+- `legacy/src/app/openhouse/page.tsx` (335 LOC; hero, program cards, FAQ array, date handling).
+- `legacy/src/app/programs/frc/kickoff/page.tsx` (442 LOC; `KICKOFF_CONFIG`, countdown, schedule copy).
+- Collection entries already migrated in Phase 04 (`events/openhouse.md`, `events/frc-kickoff.md`).
+
+## Tasks
+
+### 1. `src/layouts/EventLayout.astro` + composed pieces
+
+- Renders an `events` entry: Hero (heroImage or program-themed fallback), date/time/location block (semantic `<time datetime>`), body markdown (typographic styles per DESIGN.md), CTA (registration/cta from frontmatter), FAQ section from referenced `faq` entries (Accordion primitive), program theming via `program` field → `data-theme`.
+- `Countdown.astro` (`ui/`): renders server-side absolute date always (agents/no-JS see the real date); a ~20-line inline script upgrades it to a live countdown; past-start state ("Happening now" / "This event has passed") handled in markup logic.
+- **Structured data**: `event()` builder in `src/lib/jsonld.ts` (`@type: Event` — name, startDate/endDate ISO, location as `Place` with address, organizer = the NGO org, image, eventStatus, offers if registrationUrl) and `faqPage()` (`@type: FAQPage` from the FAQ entries). Both emitted by EventLayout.
+
+### 2. Routes
+
+- `src/pages/openhouse.astro` and `src/pages/programs/frc/kickoff.astro`: fetch their entry by id, render EventLayout. ~15 lines each.
+- **Hidden behavior**: when `hidden: true`, the route must not render content — emit a redirect to the most sensible parent (`/` for openhouse, `/programs/frc` for kickoff) via `Astro.redirect` at build (static: generates meta-refresh) **or** add a `_redirects` line; pick one, document it. Hidden events are excluded from the sitemap (wire in Phase 10's filter via a shared `getVisibleEvents()` helper in `src/lib/`).
+
+### 3. Documentation
+
+Extend `docs/content.md`: "Update the open house for a new season" (edit dates/copy), "Hide an event after it passes", "Create a new event page" (new .md + a thin route file — note the route file step until a dynamic `[event].astro` is justified; don't build the dynamic route now, two events don't earn it).
+
+## Acceptance criteria
+
+- [ ] Both URLs render from collection data; zero copy hardcoded in the route files; visible-copy parity with legacy pages.
+- [ ] Flipping `hidden: true` on an entry removes the page content (redirect) with no code change; flipping back restores it.
+- [ ] Event + FAQPage JSON-LD validate (Google Rich Results test, manual, once per template).
+- [ ] Countdown shows correct absolute date without JS; upgrades with JS; handles passed events.
+- [ ] Program theming correct (kickoff = frc green).
+- [ ] `pnpm check && pnpm build` green.
diff --git a/plan/09-assets-performance.md b/plan/09-assets-performance.md
new file mode 100644
index 0000000..9dca56b
--- /dev/null
+++ b/plan/09-assets-performance.md
@@ -0,0 +1,49 @@
+# Phase 09 — Assets & performance: media pipeline, budgets in CI
+
+**Prerequisites:** Phases 06–08 (all pages exist; this phase optimizes what they serve).
+**Branch:** `overhaul/09-assets-performance` off `astro-rewrite`.
+
+## Objective
+
+Close the biggest mobile-perf gaps (72 MB `public/`, 22 MB hero video, 11 MB backgrounds, no responsive images) and make the budgets *enforced* — Lighthouse CI becomes a blocking PR gate. This is where "10/10 mobile" stops being aspirational.
+
+## Current worst offenders (from audit)
+
+`public/video/biohazard/home-video.mp4` 22.1 MB, `home-video.webm` 14.7 MB, `image/biohazard/2019-robot-field.webp` 11.3 MB, `2021-robot-field.webp` 4.1 MB, `team/frc/2023.webp` 2.5 MB, `2021-robot-pits.webp` 2.2 MB, `electronics.webp` 1.0 MB, `openhouse-header.webp` 931 KB, `legos.webp` 808 KB — 26 files > 300 KB total.
+
+## Tasks
+
+### 1. Asset inventory & relocation
+
+- Enumerate every asset in `public/image`, `public/video` and map to consumers in the new `src/`. Anything unused by the new site (legacy leftovers, Docusaurus-era art, unDraw SVGs retired by DESIGN.md §7): delete. List deletions in the PR.
+- Move all page-consumed raster images to `src/assets/<domain>/` (brand/, frc/, fll/, sponsors/, team/, events/) so astro:assets processes them. `public/` keeps only: favicons/manifest icons, default OG image(s), `robots.txt`, `_redirects`, `_headers`, video files.
+
+### 2. Source re-encoding
+
+- Script `tools/assets/optimize-sources.mjs` (sharp, run manually, documented): re-export any source > 500 KB — max dimension 2560px, quality-tuned WebP/JPEG sources (astro:assets derives AVIF/WebP variants at build). Commit re-encoded sources; keep originals only if under size, otherwise they're gone (git history preserves them).
+- Verify astro:assets output: every `<Image>`/`<Picture>` use has `widths` + `sizes` appropriate to its rendered layout, AVIF+WebP formats, explicit dimensions (CLS = 0). LCP image per page: `loading="eager"` + `fetchpriority="high"`; all others lazy.
+
+### 3. Hero video (D20)
+
+- Re-encode with ffmpeg from the best source available: target ≤ 3 MB total per format — trim to a short loop (~10–15 s), 1080p max (consider 720p if quality holds), CRF-tuned H.264 MP4 + AV1/VP9 WebM, no audio track, `movflags +faststart`.
+- Poster: AVIF/WebP frame ~1200 w, wired as the hero's LCP element.
+- Behavior (already structured in Phase 06's Hero): `preload="none"`, in-view + `prefers-reduced-motion` + `saveData` gating in the small hero script.
+
+### 4. Fonts & head hygiene
+
+- Confirm subsetting (latin), exactly two preloaded font files, no unused weights shipped (`dist` inspection).
+- Audit `<head>`: no render-blocking scripts; analytics (Phase 10) must load deferred.
+
+### 5. Lighthouse CI as a gate
+
+- `.github/workflows/lighthouse.yml` (or a job in `ci.yml`): build, serve `dist/` locally, run `@lhci/cli autorun` (mobile emulation, simulated throttling) against representative URLs: `/`, `/programs/frc`, `/programs/frc/robots`, `/sponsors`, `/openhouse`, `/contact`.
+- `lighthouserc` assertions (blocking): performance ≥ 0.95, accessibility = 1.0, seo = 1.0, best-practices ≥ 0.95; `largest-contentful-paint` < 2000 ms, `cumulative-layout-shift` < 0.05, `total-blocking-time` < 100 ms; resource budgets: script < 35 KB gzip, total page weight < 1 MB (excluding `preload="none"` video, which doesn't count against initial load).
+- Add the budget table to `docs/tooling.md`; failures block merge.
+
+## Acceptance criteria
+
+- [ ] `public/` + `src/assets/` combined size reduced from 72 MB to < 15 MB (video included); no image source > 500 KB unless justified in the PR.
+- [ ] Every page's images: responsive srcset, modern formats, zero CLS from media.
+- [ ] Hero video ≤ 3 MB per format, poster is the LCP, plays only when in-view/motion-allowed.
+- [ ] Lighthouse CI green on all six URLs at the thresholds above, wired as a required PR check.
+- [ ] `pnpm check && pnpm build` green; knip/link-check still green after deletions.
diff --git a/plan/10-seo.md b/plan/10-seo.md
new file mode 100644
index 0000000..05079fc
--- /dev/null
+++ b/plan/10-seo.md
@@ -0,0 +1,60 @@
+# Phase 10 — SEO completion, AI SEO, analytics
+
+**Prerequisites:** Phases 05–09 (all pages + budgets in place).
+**Branch:** `overhaul/10-seo` off `astro-rewrite`.
+
+## Objective
+
+Finish everything discoverability: sitemap/robots, per-page OG images, structured-data completion, llms.txt for AI agents, redirects parity, and the analytics stack (D21) with an audited event taxonomy.
+
+## Tasks
+
+### 1. Sitemap & robots
+
+- `@astrojs/sitemap` (installed Phase 01): filter out `/styleguide`, `404`, and hidden events (use `getVisibleEvents()` from Phase 08). Verify `<lastmod>` behavior; set `changefreq` only if honest.
+- Replace `public/robots.txt`: `User-agent: *` allow-all, plus `Sitemap: https://scstem.org/sitemap-index.xml`. **Changes from legacy:** drop `Disallow: /image` and `/video` (blocks Google Images/video indexing of team content — we want that traffic; the privacy-sensitive `/team/*` paths remain protected by the `X-Robots-Tag: noindex` rule in `_headers`, which is carried over). Do not block AI crawlers (GPTBot, ClaudeBot, PerplexityBot, etc.) — being in AI answers is an objective. Record this in `docs/adr/` as a deliberate posture.
+- Add `noindex` meta to `/styleguide` via Seo prop.
+
+### 2. Metadata verification (CI teeth)
+
+- Small build-check script (`tools/checks/verify-meta.mjs`, run in `check` or CI after build): parse every `dist/**/*.html` and assert — exactly one `<title>` (unique across pages), meta description present (unique, 50–160 chars), exactly one canonical, one `<h1>`, OG image resolves to a real file. Fail loudly with the offending page list.
+
+### 3. OG images
+
+- Produce a curated set of 1200×630 OG images from brand photography + logo treatment (per DESIGN.md; created during this phase, stored `src/assets/og/` → emitted to `public/og/` or referenced via astro:assets `getImage`): one default, one per major section (programs/FRC, FLL, sponsors, events/openhouse, donate).
+- Wire per-page via the Seo `ogImage` prop; verify absolute URLs in output. (A generated-per-page satori pipeline is deliberately out of scope — note as future work in `12-content-strategy.md`.)
+
+### 4. Structured data completion
+
+- Audit: NGO org (site-wide, from Phase 05), WebSite (home), BreadcrumbList (all nested pages), Event + FAQPage (events, Phase 08). Add `FAQPage` anywhere else FAQs render.
+- Validate every distinct JSON-LD template with Google's Rich Results test + schema.org validator; record results in the PR.
+
+### 5. AI SEO (llms.txt + agent-readability)
+
+- `src/pages/llms.txt.ts` endpoint emitting the llms.txt convention: H1 site name, blockquote summary of SC2, then sectioned link lists (Programs, Get Involved, Sponsors, Events, Contact) with one-line descriptions — sourced from a small manifest + collections so it never goes stale. Include the sitemap URL and contact email.
+- Optional `llms-full.txt` only if cheap: concatenated page descriptions; skip if it adds maintenance burden.
+- Agent-readability audit across pages: meaningful heading hierarchy (one h1, ordered h2/h3), all key facts (dates, addresses, program names, sponsor tiers) present as text in static HTML (never image/JS-only — the calendar fallback link from Phase 07 covers the one dynamic surface), descriptive link text (no bare "click here"), `<time datetime>` on all dates.
+
+### 6. Redirects/headers parity
+
+- Carry over `public/_redirects` verbatim (`/join`, `/biohazard/*`, `/calendar`, `/wiki` rules) and `public/_headers` (pages.dev/staging noindex, `/team/*` noindex). Confirm behavior on the preview deploy (spot-check each redirect).
+- Verify apex/www canonical behavior at the Cloudflare level; note the finding (dashboard config, not repo).
+
+### 7. Analytics (D21)
+
+- **GA4**: direct `gtag.js` snippet (measurement ID from `site.ts`), loaded with `defer`/`partytown-free`, after-load init; replaces the legacy GTM-component oddity (a GA4 ID was being passed to the GTM loader — works, but non-standard; fix = plain gtag).
+- **Cloudflare Web Analytics**: beacon snippet (token via env/`site.ts`).
+- Both load only in production (`import.meta.env.PROD`) **and** only on the production hostname (guard against preview/staging polluting data — check `location.hostname === "scstem.org"`).
+- **Consent Mode v2 defaults** set before gtag config (`analytics_storage: granted`-by-default is acceptable for a US nonprofit today; set the default explicitly so adding a banner later is config, not surgery).
+- **Event taxonomy** (delegated single listener script, `data-track` attributes): `donate_click`, `wishlist_click`, `sponsor_packet_download`, `get_involved_click`, `contact_submit` (fired on successful form response), `outbound_sponsor_click`. Document in `docs/analytics.md`.
+- **Audit/upgrade checklist** (execute + document outcomes in `docs/analytics.md`): GA4 property settings reviewed (data retention, internal-traffic filter for staging IPs if any, unwanted-referral exclusions), Search Console verified + linked to GA4, Bing Webmaster Tools verified, GA4 key events configured for the taxonomy above.
+
+## Acceptance criteria
+
+- [ ] Sitemap live on preview, excludes styleguide/hidden events; robots.txt points at it.
+- [ ] `verify-meta` script green across the full build and wired into CI.
+- [ ] Every distinct JSON-LD shape validates; OG images resolve absolute and render in a card debugger (e.g. opengraph.xyz) on preview.
+- [ ] `/llms.txt` serves accurate, collection-backed content.
+- [ ] All legacy redirects verified working on preview; `_headers` noindex intact for staging + `/team/*`.
+- [ ] GA4 + CF Analytics fire on production hostname only (verified via GA DebugView on a hostname-spoofed check or temporary debug flag), events in taxonomy fire; `docs/analytics.md` written with audit results.
+- [ ] `pnpm check && pnpm build` green; Lighthouse SEO = 1.0 holds.
diff --git a/plan/11-cutover.md b/plan/11-cutover.md
new file mode 100644
index 0000000..4f414ab
--- /dev/null
+++ b/plan/11-cutover.md
@@ -0,0 +1,58 @@
+# Phase 11 — Cutover: parity verification, staging QA, launch, cleanup
+
+**Prerequisites:** Phases 01–10 all merged to `astro-rewrite`, CI + Lighthouse gates green.
+**Gate:** ⛔ Owner approves staging before merge to `main`. This phase touches production.
+
+## Tasks
+
+### 1. Pre-flight parity verification (on `astro-rewrite` preview)
+
+- **URL parity**: script or manual table — every legacy route returns 200 on the new build at the identical path (`/`, `/about`, `/contact`, `/donate`, `/get-involved`, `/openhouse`, `/sponsors`, `/programs/fll`, `/programs/frc`, `/programs/frc/robots`, `/programs/frc/kickoff`, `/calendar/frc`, `/calendar/sc2`, 404 behavior). Every `_redirects` rule verified.
+- **Copy parity spot-check**: owner-visible text diff per page against production (intentional changes were logged in phase PRs — compile them into one summary for the owner).
+- **Functionality**: contact form end-to-end (Slack message arrives), calendars live, video plays, event pages correct, styleguide noindexed.
+- Full `pnpm check && pnpm build` + Lighthouse CI green on the final merge commit.
+
+### 2. Cloudflare Pages configuration (dashboard — coordinate with owner; not in repo)
+
+- Build command: `pnpm build` (or `pnpm install --frozen-lockfile && pnpm build` per Pages' pnpm handling — it respects `packageManager`); output directory: `dist` (was `build`); Node version env var matching the mise pin.
+- Confirm preview deployments still noindexed (`_headers` covers `*.pages.dev` + `staging.scstem.org`).
+- Env vars: set `PUBLIC_TURNSTILE_SITE_KEY` (real key for production, test key acceptable for previews), confirm `SLACK_FORM_POST_GENERIC` secret still bound for Functions, CF Web Analytics token if env-injected.
+- Apply settings to a **preview first**: trigger a deploy of `astro-rewrite` with the new settings and verify before touching branch mappings.
+
+### 3. Staging soak
+
+- Merge `astro-rewrite` → `staging`. Full QA on https://staging.scstem.org:
+  - Device pass: physical phone (small Android/iPhone), tablet, desktop; keyboard-only pass; screen-reader smoke (VoiceOver/NVDA on nav + form).
+  - Lighthouse against staging (real CF serving): budgets hold.
+  - Forms with production-mode Turnstile.
+  - Analytics: confirm staging does NOT report (hostname guard), using GA DebugView.
+- Fix-forward on `astro-rewrite` → re-merge as needed.
+- ⛔ **Owner sign-off on staging.**
+
+### 4. Launch
+
+- Merge `staging` → `main`. Verify production deploy: spot-check pages, redirects, form, calendar, analytics now firing (GA Realtime + CF dashboard).
+- Google Search Console: submit new sitemap; URL-inspect 3–4 key pages; confirm no coverage regressions over the following days. Bing: submit sitemap.
+- Validate live structured data (Rich Results test on production URLs) and OG cards (share-debugger on the domain).
+
+### 5. Cleanup (same day or immediately after)
+
+- Delete `legacy/` entirely; delete `plan/` files' obsolete TODO markers (plan stays in-repo as history or moves to `docs/` — owner's call, ask in PR).
+- Final `knip` + dependency audit: dependency tree contains no React, HeroUI, framer-motion, embla, Biome, or Next remnants.
+- Rewrite `README.md`: what the site is, prerequisites (mise), `mise install && pnpm install && pnpm dev`, links to `AGENTS.md`, `DESIGN.md`, `docs/content.md`, `docs/tooling.md`, deploy model (CF Pages, staging→main).
+- Confirm `.claude/` hooks + skill and CI all still green post-deletion.
+
+### 6. Post-launch watch (first 2 weeks)
+
+- Search Console: coverage, Core Web Vitals field data trending, 404 reports (add `_redirects` entries for any missed URLs).
+- GA4: traffic continuity vs. pre-launch baseline; key events flowing.
+- CF Analytics/Pages: error rates on Functions.
+- File follow-ups as issues; content work proceeds via `12-content-strategy.md`.
+
+## Acceptance criteria
+
+- [ ] URL + redirect parity table complete, all green.
+- [ ] Staging QA checklist complete; owner sign-off recorded.
+- [ ] Production live on Astro; sitemap submitted; structured data + OG validated on prod URLs.
+- [ ] `legacy/` deleted; dependency tree clean; README rewritten.
+- [ ] Post-launch watch notes captured after two weeks (Search Console + GA4 baselines recorded in `docs/analytics.md`).
diff --git a/plan/12-content-strategy.md b/plan/12-content-strategy.md
new file mode 100644
index 0000000..a441065
--- /dev/null
+++ b/plan/12-content-strategy.md
@@ -0,0 +1,41 @@
+# Phase 12 — Content strategy (post-overhaul backlog)
+
+**Status:** NOT part of the overhaul. This is the phase-2 backlog (D8): the overhaul ships with existing marketing copy; this file outlines the content work that actually wins search + AI-answer share afterward. Treat each item as a candidate issue, not a spec.
+
+## Why this matters
+
+Technical SEO (Phases 05/10) makes the site *eligible* to rank. Content is what ranks. For a regional STEM nonprofit the competition is thin — consistent, specific content can dominate local queries ("FIRST robotics team near Hanover PA", "youth STEM programs South Central PA", "FLL team for kids York County") and be the cited source when AI assistants answer them.
+
+## Backlog
+
+### Copy revision pass
+- Rewrite page copy against DESIGN.md voice: specific over generic (numbers of students, seasons, awards; real names with permission), one clear next action per page. The overhaul deliberately ported legacy copy verbatim — this is where it gets good.
+- Audit headings as search intents: each page's h1/h2s should answer a question someone actually asks.
+
+### News/updates cadence (`news` collection is already scaffolded)
+- Publish 1–2 posts/month: competition recaps, sponsor spotlights (they'll share/link them — genuine backlinks), season announcements, student stories (with media releases).
+- Add `news` index + detail routes, RSS feed, `Article` JSON-LD, news entries in llms.txt when the collection goes live.
+
+### Program landing depth
+- Expand `/programs/frc` and `/programs/fll` to genuinely answer: what is it, ages/grades, season calendar, costs, time commitment, how to join — the questions parents search. Consider a page per common query (e.g. "What is FIRST LEGO League?") only if it earns its own intent.
+- Location signals: consistent NAP (name/address) in footer + org schema; consider a Google Business Profile if eligible; get listed on FIRST's official team directories with links back.
+
+### FAQ expansion
+- Grow the `faq` collection from real inbound questions (contact form themes); FAQPage schema already wired.
+
+### Link building (nonprofit advantage)
+- Sponsor logos should be reciprocal: ask each sponsor for a link from their community/sponsorship page.
+- Local press for competition results; school district newsletters; FIRST/Chesapeake district listings; chamber-of-commerce and volunteer directories.
+
+### Media
+- Replace remaining stock/unDraw imagery with team photography (photo-day checklist per DESIGN.md art direction); build an approved-photo library with releases noted.
+
+### Measurement
+- Quarterly review against GA4 key events + Search Console queries; steer topics toward queries with impressions-but-low-CTR.
+
+### Future infrastructure (only when justified)
+- Keystatic (git-backed CMS UI) once a non-git editor actually needs it — schemas are already compatible (D2).
+- Per-page generated OG images (satori) if news volume makes curated OGs tedious.
+- Light theme + theme switcher (tokens already structured for it, D15).
+- oxc migration when oxlint/oxfmt support Astro (`docs/adr/0001-toolchain-split.md` has the seam).
+- Playwright smoke tests if manual QA starts missing regressions (D13 said zero tests; revisit only with evidence).

From aadd9c97064ad2a5f5477f3e52ba72d91dcf0c1b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 27 Aug 2026 15:10:57 +0000
Subject: [PATCH 02/12] Add DESIGN.md; settle design up front and drop
 private-path noindex rules

DESIGN.md is now authored with the plan (grounded in the extracted
legacy palette, fonts, and live-site audit) rather than deferred to
Phase 02, which becomes pure implementation. Phase 06's gate becomes a
conformance check. New decision D25: no private/internal content on
the main domain - _headers noindex reduced to preview/staging hosts
only, dropping /team/*, /image/*, /video/* and enabling media
indexing.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DU6XwSGRUDZtz5DuXjzKnn
---
 DESIGN.md                | 157 +++++++++++++++++++++++++++++++++++++++
 plan/00-overview.md      |   7 +-
 plan/02-design-system.md |  74 +++++++++---------
 plan/06-homepage.md      |  12 +--
 plan/10-seo.md           |   8 +-
 plan/11-cutover.md       |   2 +-
 6 files changed, 208 insertions(+), 52 deletions(-)
 create mode 100644 DESIGN.md

diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..7732d0a
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,157 @@
+# SC2 Design System
+
+Source of truth for the visual design of scstem.org. Every UI decision an implementer makes should be answerable from this document; if it isn't, propose an addition here first (PR + owner review), then build.
+
+The system is a **brand-faithful refresh** of the 2024–2026 site: same identity — dark, electric-yellow, gear-and-bulb, circuit texture, real photos of real students — with the execution tightened. The bar is *great, not just good*: fewer competing treatments, stronger hierarchy, deliberate everything.
+
+## 1. Brand essence & voice
+
+South Central STEM Collective (SC2) is a 501(c)(3) making hands-on STEM — FIRST robotics first among it — accessible to students aged 9–18 in and around Franklin County, PA. The site speaks to three audiences at once: **students** (this looks fun and serious), **parents** (this is safe, organized, worth our time), **sponsors** (this is a credible investment in the community).
+
+Voice: **energetic, concrete, community-proud.**
+- This, not that: *workshop*, not *startup*. *Confident*, not *hype*. *Specific* ("12+ years, 9 competition robots"), not *vague* ("empowering the future"). *Warm*, not *corporate*.
+- Sentence case everywhere — headings, buttons, nav. No Title Case, no ALL CAPS except tiny eyebrow labels.
+- First person plural ("we build", "join us"); address the reader as "you".
+- Numbers beat adjectives. Real names, real seasons, real awards (with permission).
+
+## 2. Color
+
+Dark-only for now (D15). All component color comes from **semantic tokens** — raw hex values and Tailwind palette classes (`bg-yellow-400`, `text-neutral-300`) are banned in components. Tokens live in `src/styles/global.css` `@theme`; a future light theme or theme switcher is a new token block, not a refactor.
+
+### Base tokens (default / SC2 yellow theme)
+
+| Token | Value | Use |
+|---|---|---|
+| `background` | `#161616` | Page ground |
+| `card` | `#1E1E1E` | Cards, panels, form fields |
+| `card-raised` | `#262626` | Nested surfaces, hover lift |
+| `border` | `#2F2F2F` | Hairlines, card borders, dividers |
+| `foreground` | `#EDEDED` | Body text, headings |
+| `muted-foreground` | `#A3A3A3` | Secondary text, captions, meta |
+| `primary` | `#FACC15` | CTAs, accents, focus, key-word emphasis |
+| `primary-foreground` | `#171717` | Text/icons on primary |
+| `secondary` | `#3B82F6` | Rare second accent (informational chips, FLL card icon) |
+| `success` / `warning` / `destructive` | `#46C769` / `#FB9F4F` / `#FF6B64` | Form + status states only (brightened 400-steps of the legacy scales for dark-bg contrast) |
+| `ring` | `#FACC15` | Focus ring |
+
+Legacy full scales (yellow/green/blue/orange/red from `legacy/src/styles/theme.ts`) are the source palette; only the tokens above are exposed to components.
+
+### Program themes (D16)
+
+`data-theme="frc"` / `data-theme="fll"` on the page root remap **only** `primary`, `primary-foreground`, and `ring`. Everything else is identical — program pages feel like the same site wearing team colors.
+
+| Theme | `primary` | `primary-foreground` | Notes |
+|---|---|---|---|
+| default (SC2) | `#FACC15` yellow | `#171717` | |
+| `frc` (Biohazard) | `#3ECF6E` green (brightened from brand `#16A34A` for dark-bg contrast; the deep green stays in imagery/logos) | `#08240F` | |
+| `fll` | `#FB923C` orange | `#241102` | |
+
+Rules:
+- **One accent per view.** The page's `primary` does accent work; `secondary` blue appears only where meaning demands a second hue. The legacy mix (yellow CTA + blue links + orange button on one page) is retired.
+- Accent-colored text is allowed only at ≥ AA contrast on `background` (all three primaries above pass; verify on `/styleguide`).
+- Long body text is never accent-colored, never pure white — `foreground` only.
+- `muted-foreground` is the floor: nothing text-bearing goes dimmer.
+
+### Signature motifs (the brand carry-overs — keep, but disciplined)
+
+1. **Key-word emphasis**: display headings may color exactly one phrase in `primary` ("Robots are in Franklin County. **So are we.**"). One treatment only — colored text; no underlines/highlighter marks in headings (underlines belong to links).
+2. **Accent hairline**: heroes end with a 2px `primary` rule, full-bleed. Card titles may carry a 32px × 2px `primary` rule beneath (FeatureCard motif).
+3. **Circuit texture**: the circuit-board pattern survives as a *quiet* signature — max ~4% opacity, on heroes and section breaks only, never behind body copy, never competing with photos.
+4. **Framed media**: photo collages/feature media get a 2px `primary` border + `radius-lg` — the "team picture frame" from the legacy home/FRC pages.
+
+## 3. Typography
+
+| Role | Font | Weights | Where |
+|---|---|---|---|
+| Display/headings | **Orbitron** (variable) | 500–700 | h1–h3, stat numerals, eyebrow labels. Never below h3 size, never italic, never long lines (≤ ~40 chars) — Orbitron is the brand's voice, and it shouts; ration it. |
+| UI & body | **Inter** (variable) | 400/500/600 | Everything else: body, h4–h6, nav, buttons, forms, captions |
+| Mono | **Source Code Pro** | 400/600 | Tabular numbers (countdowns), code-ish accents only |
+
+Fluid scale (clamp between 360px and 1440px viewports), defined as tokens:
+
+| Token | Size (min → max) | Line height | Font |
+|---|---|---|---|
+| `display` | 2.5rem → 4.25rem | 1.05 | Orbitron 700 |
+| `h1` | 2rem → 3rem | 1.1 | Orbitron 700 |
+| `h2` | 1.5rem → 2.25rem | 1.15 | Orbitron 600 |
+| `h3` | 1.25rem → 1.5rem | 1.25 | Orbitron 600 |
+| `h4` | 1.125rem → 1.25rem | 1.35 | Inter 600 |
+| `body-lg` | 1.0625rem → 1.1875rem | 1.65 | Inter 400 (intro paragraphs, hero subheads) |
+| `body` | 1rem → 1.0625rem | 1.65 | Inter 400 |
+| `small` | 0.875rem | 1.5 | Inter 400/500 (captions, meta, badges) |
+
+- Eyebrow labels: `small`, Orbitron 500, uppercase, `+0.08em` tracking, `muted-foreground` or `primary` — the only sanctioned all-caps.
+- Prose measure: 65–75ch (`max-w-prose`). The about page's full-width text walls are retired.
+- Headings: sentence case; one `h1` per page; no skipped levels.
+
+## 4. Spacing, radius, elevation
+
+- **Spacing**: 4px base scale (Tailwind default). Component-internal spacing 8–24px; between-component 24–48px.
+- **Section rhythm**: vertical padding `py-16` (mobile) / `py-24` (≥ md). Consistent on every section — the current uneven gaps are a bug, not a style.
+- **Radius tokens**: `radius-sm` 6px (badges, inputs), `radius-md` 8px (buttons), `radius-lg` 12px (cards), `radius-xl` 16px (framed media, heroes' inner panels). Nothing fully-pill except avatar-like elements; the legacy pill CTA becomes `radius-md`.
+- **Elevation**: borders over shadows (dark UI). Resting card: `card` bg + 1px `border`. Hover (interactive cards only): bg → `card-raised`, border → 40%-alpha `primary`, translate-y -2px. No glows, no colored drop shadows.
+
+## 5. Layout
+
+- Container: `max-w-6xl` (72rem) + `px-4` / `px-6` (≥ sm). Heroes and accent rules full-bleed; content aligned to container.
+- Grids: card grids are 1-col (mobile) / 2-col (≥ md) / 3-col (≥ lg). **No orphan rows**: design content to fill (5 cards → 2+3 intentional split or a 5-col feature treatment at lg, never a centered floater).
+- Breakpoints: Tailwind defaults + `3xl` = 120rem (legacy carry-over). Design mobile-first at 360px; every pattern must be specified at 360px before desktop.
+- The about page moves from the 3-column photo-rail layout to a single flowing column (prose measure) with photo groupings as full-width interleaved sections (timeline treatment).
+
+## 6. Motion
+
+CSS-only (D3, D20). Motion confirms — it never decorates.
+
+- Durations: 150ms (hover/focus micro), 250ms (menus, accordions), 500ms (scroll-in entrances). Easing: `ease-out` for entrances, `ease-in-out` for state toggles.
+- Only `opacity` and `transform` animate.
+- Scroll entrances: single fade-up (8px), once, on section children; CSS scroll-driven animations with graceful no-support fallback (content visible by default — animation is enhancement).
+- Hero video: `preload="none"`, poster-first, plays when in-view; `prefers-reduced-motion` disables video autoplay and all entrances (instant states). No parallax anywhere (retires `react-scroll-parallax`).
+- Carousels: CSS scroll-snap; user-driven; no autoplay except the sponsor strip's slow marquee — pausable on hover/focus and disabled under reduced-motion.
+
+## 7. Imagery & art direction
+
+- **Real photos of real students and robots** are the brand. Stock imagery and the legacy unDraw illustrations are retired wherever a photo can serve (recolor to token colors in the interim if one must stay).
+- Text over photos requires a scrim: gradient from `background` (100% at text edge → 20% opposite), plus, on mobile, prefer text on solid `background` below the photo instead of overlaid. The legacy mobile hero (thin scrim, low contrast) is the canonical anti-example.
+- Photo treatment: `radius-xl` when framed inside sections; full-bleed only in heroes. Consistent warm/neutral grading — no filters wars between adjacent photos.
+- Every image: honest `alt`; decorative pattern images `alt=""` + `aria-hidden`.
+- OG images (1200×630): photo + scrim + Orbitron title + logo, one template, per-section variants.
+
+## 8. Components tone
+
+- **Buttons**: variants `primary` (filled `primary`/`primary-foreground`), `outline` (1px `border`, `foreground` text, hover border-primary), `ghost` (nav/tertiary). One `primary` button per view region. Min touch target 44×44px. Icon+label spacing 8px.
+- **Links**: in-prose links are `primary`-colored **and underlined**; UI links (cards, nav) may drop underline at rest but must underline on hover/focus. External links get the external icon at 0.8em + `rel="noopener"`.
+- **Cards**: FeatureCard = icon in a `radius-sm` accent-tinted square (12% alpha `primary` bg, `primary` icon), `h4` title with the 32px accent rule, `body` copy, optional footer link. Sponsor card = logo on `card` bg (padded, contain), name, tier badge, "since YYYY" meta, external link icon.
+- **Tier badges**: outline style, `small` weight-500 — platinum `#CBD5E1`, gold `#FACC15`, silver `#A3A3A3`, bronze `#D08954`; text = badge color, 1px border same color at 40% alpha, transparent bg. (Retires the muddy filled pills.)
+- **Forms**: visible `Label` above every field (no placeholder-as-label); `card` bg inputs with 1px `border`, focus = `ring` 2px; errors in `destructive` with icon + text, tied via `aria-describedby`.
+- **Icons**: Tabler, outline style, 2px stroke, sizes 20/24/32. Icons always accompany text or carry `aria-label`. No emoji as UI.
+- **Stat band** (FRC page motif, generalizable): Orbitron numeral (`h2` size, `primary`) + Inter label; on `card` panel with accent hairline top.
+
+## 9. Accessibility
+
+- WCAG 2.2 AA minimum everywhere; body text targets AAA (≥ 7:1). Contrast pairs verified live on `/styleguide` (computed ratios rendered next to swatches); the token values above were chosen to pass — changes must re-verify.
+- Focus: 2px `ring` outline + 2px offset on every interactive element, never removed, high-visibility on dark.
+- Keyboard: everything operable; skip link first in DOM; `aria-current="page"` in nav; disclosure menus close on Esc.
+- Landmarks: one `header`/`main`/`footer`; labeled `nav`s; headings form an outline.
+- Touch targets ≥ 44px; hover-only affordances forbidden (what hovers must also focus).
+- `prefers-reduced-motion` honored globally (see §6); `color-scheme: dark` declared so native controls match.
+
+## 10. Do / Don't
+
+| Don't (seen in legacy) | Do |
+|---|---|
+| Yellow words, yellow underlines, and blue links competing in one viewport | One accent treatment per view: `primary` key-word in the heading, `primary` CTA, done |
+| Orange "Join the Revolution" button on the green FRC page | The page theme's `primary` button — Biohazard green |
+| Hero copy on a busy photo behind a thin scrim (mobile home) | Scrim recipe from §7, or text on solid ground below the photo |
+| Circuit pattern behind paragraphs | Pattern on heroes/section breaks at ≤ 4% opacity only |
+| 5 cards centered as 3+2 with a floating orphan | Grid math planned: 2+3 split, or redesign to 4/6 |
+| `"Biohazard" - 2013` caption strips down page margins | Timeline section with framed, captioned photos in flow |
+| Orbitron paragraphs / tiny Orbitron labels everywhere | Orbitron = h1–h3, stats, eyebrows; Inter for the rest |
+| Filled dark-on-dark tier pills (navy "Platinum") | Outline tier badges per §8 |
+| Grayscale washed-out footer logo | Full-color logo on `background`, `muted-foreground` text |
+| Title Case Buttons And Headings | Sentence case |
+| `alt="image"` / missing alt | Descriptive alt or explicit `alt=""` |
+| Generic hero copy ("Empowering the future…") | Specific, local, human ("Robots are in Franklin County. So are we.") |
+
+## 11. Change process
+
+DESIGN.md changes ship as PRs with a rendered before/after (screenshot or `/styleguide` diff) and owner review. Implementation follows the doc — when code and doc disagree, the doc wins; when the doc is silent, add to it before building.
diff --git a/plan/00-overview.md b/plan/00-overview.md
index 6c40f2e..2d7dbea 100644
--- a/plan/00-overview.md
+++ b/plan/00-overview.md
@@ -49,14 +49,15 @@ This directory is the complete implementation plan for rewriting scstem.org from
 | D19 | Calendar pages: vanilla-TS client script rendering a branded agenda, fed by a new Pages Function that proxies the public Google Calendar feed (keys/parsing server-side). Fallback link to Google Calendar for no-JS/agents. |
 | D20 | Hero video kept but re-encoded to ≤3 MB with poster, `preload="none"`, `prefers-reduced-motion` respected. All motion is CSS-only; framer-motion/parallax/embla are gone. |
 | D21 | Analytics: GA4 via direct deferred gtag (fixes the current GTM-loader-with-GA4-id oddity) **plus** Cloudflare Web Analytics; tracking audit + event taxonomy in Phase 10. |
-| D22 | DESIGN.md written analytically first (Phase 02); homepage built against it (Phase 06); then a **visual review gate** with the owner before porting remaining pages. Bar: "start with great." |
+| D22 | **Design nailed down up front, in the plan PR**: `DESIGN.md` is authored at the repo root alongside this plan, and the visual direction is reviewed with the owner via design mockups *before implementation begins*. Phase 02 implements the approved doc (tokens/fonts/themes); Phase 06's gate verifies the built homepage *conforms* to it. Bar: "start with great." |
 | D23 | Branch flow per "How to use this plan" above. |
 | D24 | Toolchain split (oxc-first hybrid): oxlint + oxfmt own `.ts/.js/.mjs/.cjs/.json/.jsonc/.css`; ESLint + Prettier own `.astro` and `.md`. When oxlint/oxfmt gain Astro support, migration = delete the ESLint/Prettier half (seam documented in `docs/adr/`). |
+| D25 | **No private/internal content on the main domain.** The legacy `_headers` per-path noindex rules (`/team/*`, `/image/*`, `/video/*`) are dropped entirely; only the preview/staging host rules (`*.pages.dev`, `staging.scstem.org`) carry over. Anything private lives off-domain. Image/video indexing is thereby enabled (helps image SEO). |
 
 ## Current-state facts (verified 2026-08)
 
 - Next.js 16 App Router, static export to `build/`, React 19, HeroUI (dark-only, three theme variants: default yellow, FRC "bio" green, FLL), Tailwind v4 (CSS-first), framer-motion, embla (three carousel implementations), react-scroll-parallax, react-hook-form + valibot, Turnstile via React wrapper. ~5,100 LOC, 13 routes, 24 components.
-- Hosting: Cloudflare Pages (dashboard-configured; no wrangler config in repo). `functions/api/form/submit.ts` = Turnstile verify + Slack webhook. `public/_redirects` and `public/_headers` (staging/pages.dev noindex, `/team/*` noindex) exist and must survive.
+- Hosting: Cloudflare Pages (dashboard-configured; no wrangler config in repo). `functions/api/form/submit.ts` = Turnstile verify + Slack webhook. `public/_redirects` must survive verbatim; `public/_headers` survives **reduced per D25** (preview/staging noindex only).
 - Content is hardcoded: `data/sponsors.ts` (half commented-out), inline page arrays, JSX robot-history slides, hardcoded calendar IDs and kickoff config.
 - Known duplication: `/openhouse` forks the homepage; `/programs/frc/kickoff` forks `/programs/frc`; FLL layout is a copy of FRC layout (still named `FRCLayout`).
 - SEO gaps: no sitemap, no OG/twitter meta objects, no JSON-LD, no canonicals, several routes missing metadata entirely, robots.txt has no Sitemap directive, keyword-stuffed `keywords` meta.
@@ -106,7 +107,7 @@ This directory is the complete implementation plan for rewriting scstem.org from
 | Phase | File | Gate |
 |-------|------|------|
 | 01 | `01-foundation.md` — branch, legacy move, pnpm/mise, Astro scaffold, full toolchain, hooks, AGENTS.md, CI | CI green on scaffold |
-| 02 | `02-design-system.md` — DESIGN.md, tokens, fonts, program themes | DESIGN.md reviewed by owner |
+| 02 | `02-design-system.md` — implement the approved `DESIGN.md`: tokens, fonts, program themes | `DESIGN.md` already authored + owner-reviewed with the plan |
 | 03 | `03-primitives.md` — `ui/primitives`, shadcn-astro skill, styleguide page | — |
 | 04 | `04-content-model.md` — collections, schemas, data migration, `site.ts` | — |
 | 05 | `05-app-shell.md` — BaseLayout, SEO component, base JSON-LD, Navbar, Footer, 404 | — |
diff --git a/plan/02-design-system.md b/plan/02-design-system.md
index 62550b4..256d3ba 100644
--- a/plan/02-design-system.md
+++ b/plan/02-design-system.md
@@ -1,60 +1,56 @@
-# Phase 02 — Design system: DESIGN.md, tokens, typography, program themes
+# Phase 02 — Design system implementation: tokens, typography, program themes
+
+**Prerequisites:** Phase 01. `DESIGN.md` already exists at the repo root — it was authored and owner-reviewed as part of the plan PR, alongside visual mockups. **This phase implements it; it does not redesign.** If implementation exposes a gap or contradiction in DESIGN.md, follow its §11 change process (small PR to the doc, owner review) rather than improvising.
 
-**Prerequisites:** Phase 01.
 **Branch:** `overhaul/02-design-system` off `astro-rewrite`.
-**Gate:** DESIGN.md is reviewed by the owner before Phase 03 begins (post the doc in the PR; iterate there).
 
 ## Objective
 
-A written design system (`DESIGN.md`) and its CSS implementation (tokens, fonts, themes). This is where "brand-faithful refresh, genuinely better, no AI feel" gets engineered. The current UI is *good*; the target is *great* — deliberate, specific, and consistent.
+`DESIGN.md` turned into working CSS: the full token set, fluid type scale, fonts, program themes, and a `/styleguide` page that proves it (including live contrast verification).
 
-## Reference material (in `legacy/`)
+## Reference material
 
-- Brand colors: `legacy/src/styles/theme.ts` (hand-authored yellow/green/blue/orange/red/gray scales) and `legacy/src/styles/hero.ts` (HeroUI themes: default dark w/ yellow primary, `bio` green for FRC, `fll` theme).
-- Fonts: `legacy/src/styles/fonts.ts` — Inter (sans), Orbitron (headings), Source Code Pro (mono).
-- Heading utilities + selection styles: `legacy/src/styles/globals.css`.
-- Existing look: run the legacy site (`cd legacy && npm ci && npm run dev`) or browse https://scstem.org for screenshots.
+- **`DESIGN.md`** (repo root) — normative. Sections: §2 color tokens + program themes, §3 type scale, §4 spacing/radius/elevation, §6 motion tokens, §9 a11y requirements.
+- `legacy/src/styles/theme.ts` — the source palette scales referenced by DESIGN.md §2.
+- `legacy/src/styles/globals.css`, `legacy/src/styles/hero.ts` — for tracing where legacy styles came from; not targets.
 
 ## Tasks
 
-### 1. Write `DESIGN.md` (repo root)
-
-Structure it as the single source of truth agents design against. Required sections:
-
-1. **Brand essence & voice** — who SC2 is (regional STEM nonprofit, FIRST robotics), tone (energetic, credible, community-driven; write for parents, sponsors, and students simultaneously). 3–5 adjectives with "this, not that" contrasts.
-2. **Color** — semantic token table (shadcn naming: `background`, `foreground`, `card`, `muted`, `primary`, `secondary`, `accent`, `destructive`, `border`, `ring`, …) with the dark values derived from the legacy palette (yellow `#FACC15`-family primary). Rules: where yellow is allowed (CTAs, accents, focus — never long body text), contrast minimums (WCAG AA at minimum; AAA for body text), and the program accent remapping (`frc` → green, `fll` → FLL palette). Document that light theme is future work: **every color in components must come from a token; raw hex/tailwind palette classes are banned in components.**
-3. **Typography** — exact scale. Orbitron for display/headings (define weights and where it stops — e.g. h1–h3 only; overuse of a techno font is the fastest route to "AI slop"), Inter for UI/body, Source Code Pro only where code/numbers demand it. Fluid type via `clamp()`; define the ramp (e.g. 6 steps), line-heights, letter-spacing for Orbitron caps, max line length (`65–75ch`).
-4. **Spacing, radius, elevation** — 4px-base spacing scale; radius tokens; shadows/borders for a dark UI (prefer borders + subtle surface shifts over heavy shadows).
-5. **Layout** — container widths, section rhythm (consistent vertical padding scale), grid patterns for card grids, breakpoints. Mobile-first: every pattern defined at 360px before desktop.
-6. **Motion** — CSS-only. Durations (e.g. 150/250/400ms), easings, what animates (opacity/transform only), scroll behavior, `prefers-reduced-motion` always honored. Principle: fewer, more deliberate animations; nothing moves without a reason.
-7. **Imagery & art direction** — real team photography over stock/illustration. Define treatments (duotone/overlay for text-over-photo legibility, consistent corner radius). Explicitly flag the legacy unDraw SVG illustrations for retirement where a photo exists (anti-AI-feel); where kept temporarily, recolor to brand tokens.
-8. **Components tone** — buttons (one primary per view), cards, forms (visible labels, no placeholder-as-label), iconography (Tabler, one stroke weight, sizes).
-9. **Accessibility** — dark-mode contrast table for token pairs, focus-visible style (high-contrast ring token), touch targets ≥ 44px, skip link, landmark rules.
-10. **Do / Don't gallery** — 8–10 concrete pairs (e.g. "Don't: three different yellows on one screen. Do: primary token only.").
+### 1. Tokens — `src/styles/global.css`
 
-Anti-AI-feel checklist to embed: no gradient-on-everything, no emoji-as-icons, no generic hero copy ("Empowering the future of…"), no purple-gradient defaults, consistent icon stroke, real photos of real students, specific numbers over vague claims.
+- Tailwind v4 `@theme` block implementing DESIGN.md exactly:
+  - Color tokens from §2 as `--color-*` (so `bg-background`, `text-muted-foreground`, `border-border`, etc. exist as utilities).
+  - Fluid type scale from §3 as `--text-*` tokens with `clamp()` values and paired line-heights.
+  - Radius tokens from §4 (`--radius-sm/md/lg/xl`), `--breakpoint-3xl: 120rem`.
+  - Motion tokens from §6 (`--duration-micro/ui/entrance`, easings).
+  - Font family tokens (§3) wired to the self-hosted fonts below.
+- `:root { color-scheme: dark }`; body `bg-background text-foreground`.
+- Program themes (§2): `[data-theme="frc"]` and `[data-theme="fll"]` blocks remapping **only** `--color-primary`, `--color-primary-foreground`, `--color-ring`.
+- Global element styles: `::selection` (primary/primary-foreground), `:focus-visible` ring per §9, reduced-motion global kill-switch per §6, heading defaults per §3.
+- Structure for the future light theme per D15: base tokens on `:root` with dark values as defaults; a comment marks where a `[data-theme="light"]` block would land.
 
-### 2. Implement tokens — `src/styles/global.css`
+### 2. Fonts (§3)
 
-- Tailwind v4 `@theme` block defining the full token set from DESIGN.md: colors (semantic names → `--color-*` so utilities like `bg-background`, `text-primary` exist), font families, fluid type scale (`--text-*`), spacing/radius additions, `--breakpoint-3xl` (legacy had one).
-- `:root { color-scheme: dark; }` on html; body gets `bg-background text-foreground`.
-- Program themes (D16): `[data-theme="frc"]` and `[data-theme="fll"]` blocks remapping only the accent-family tokens (`--color-primary`, `--color-ring`, etc.). Adding a future program theme = one new block. Document the pattern in DESIGN.md §2.
-- Port/replace heading utilities and `::selection` styling; define `:focus-visible` globally.
-- Structure the file so a future light theme is additive: base tokens on `:root`, dark values are the defaults (site is dark-only for now — no media queries needed yet), with a comment marking where `[data-theme="light"]` would land.
+- Self-hosted: `@fontsource-variable/inter`, `@fontsource-variable/orbitron`, `@fontsource-variable/source-code-pro` (static @fontsource fallback for any without a variable axis). Latin subset only, `font-display: swap`.
+- `src/styles/fonts.ts` exports the two above-the-fold woff2 paths (Inter var, Orbitron var) for BaseLayout's `<link rel="preload">` (wired in Phase 05).
 
-### 3. Fonts
+### 3. Signature motifs as utilities/components
 
-- Self-hosted via `@fontsource-variable/inter`, `@fontsource-variable/orbitron`, `@fontsource-variable/source-code-pro` (fall back to static @fontsource package for any without a variable axis). Latin subset only.
-- `font-display: swap`; preload the two woff2 files used above the fold (Inter var, Orbitron var) in the base layout (Phase 05 wires the preload — export the font file paths from a small `src/styles/fonts.ts`).
+Implement DESIGN.md §2 "signature motifs" as reusable pieces so pages can't reinvent them:
+- `.accent-rule` (2px primary hairline) + hero-bottom full-bleed variant.
+- Key-word emphasis: documented pattern (`<span class="text-primary">` inside headings) — note in styleguide, no component needed.
+- Circuit texture: one `Pattern.astro` background component (≤ 4% opacity, `aria-hidden`, positioned behind hero/section-break content only) using the existing pattern asset re-exported to `src/assets/brand/`.
+- Framed-media treatment: `.media-frame` utility (2px primary border, `radius-xl`).
 
-### 4. Sanity page
+### 4. `/styleguide` page
 
-- `src/pages/styleguide.astro` (temporary skeleton): renders the color tokens as swatches with computed contrast ratios, the type ramp, and spacing scale. Phase 03 extends it with primitives. Must be excluded from sitemap + `noindex` (wire the exclusion when sitemap config exists; leave a `TODO(phase-10)` marker is NOT allowed under the comments policy — instead add the exclusion to the Phase 10 task list, already done).
+`src/pages/styleguide.astro`: color swatches with **computed contrast ratios** against `background`/`card` (inline calculation at build; DESIGN.md §9 requires body pairs ≥ 7:1, all text ≥ 4.5:1), full type ramp, spacing/radius scales, motif demos, and the same rendered under `data-theme="frc"` and `"fll"`. Noindexed (Seo prop in Phase 05; excluded from sitemap in Phase 10 — both already tasked there).
 
 ## Acceptance criteria
 
-- [ ] `DESIGN.md` complete with all 10 sections + do/don't gallery; reviewed by owner in the PR.
-- [ ] Every color used in `global.css` is a defined token; `frc`/`fll` themes remap accents only.
-- [ ] `/styleguide` renders tokens/type ramp; all body-text token pairs pass AA (shown on the page).
-- [ ] Fonts self-hosted, subset, swap; no Google Fonts network requests in dev tools.
+- [ ] Every token in DESIGN.md §2–§4/§6 exists in `@theme` with the exact documented value; no extra ad-hoc colors.
+- [ ] `/styleguide` renders swatches + ratios; every pair required by §9 passes (build fails or page flags red if not — implement the flag).
+- [ ] Theme blocks remap only the three sanctioned tokens (diff-check the CSS).
+- [ ] Fonts self-hosted/subset/swap; zero external font requests.
+- [ ] Reduced-motion: toggling the OS setting disables entrance/hover transitions on `/styleguide`.
 - [ ] `pnpm check && pnpm build` green.
diff --git a/plan/06-homepage.md b/plan/06-homepage.md
index fd4ab02..1f15131 100644
--- a/plan/06-homepage.md
+++ b/plan/06-homepage.md
@@ -2,11 +2,11 @@
 
 **Prerequisites:** Phase 05.
 **Branch:** `overhaul/06-homepage` off `astro-rewrite`.
-**Gate:** ⛔ **Owner visual sign-off required before Phase 07 starts.** This is the checkpoint where "good → great" is settled while only one page is at stake.
+**Gate:** ⛔ **Owner sign-off required before Phase 07 starts.** The design itself was settled up front (DESIGN.md + owner-reviewed mockups shipped with the plan — D22), so this gate is a **conformance check**: does the built homepage match the approved design, and does it hold up on real devices?
 
 ## Objective
 
-The homepage rebuilt to DESIGN.md quality with existing marketing copy (D8), plus the composed `ui/` components the rest of the site will reuse. Then a structured visual review loop with the owner.
+The homepage rebuilt to the approved DESIGN.md/mockups with existing marketing copy (D8), plus the composed `ui/` components the rest of the site will reuse. Then a focused review with the owner.
 
 ## Reference
 
@@ -30,11 +30,11 @@ Built from primitives; these are the reusable section vocabulary for all later p
 - Sections per legacy content order unless DESIGN.md argues otherwise: hero → programs → sponsors → join/CTA. The `/openhouse` fork is *not* consulted (Phase 08 handles events).
 - LCP element (hero poster/heading) must not depend on JS; hero image/poster gets `fetchpriority="high"` + eager loading; everything below the fold lazy.
 
-### 3. Visual review loop (the gate)
+### 3. Conformance review (the gate)
 
 1. Merge-ready PR → CF Pages preview URL on `astro-rewrite` after merge, or the PR's own preview.
-2. Produce a review pack for the owner: full-page screenshots at 360px, 768px, 1440px (light on nothing — dark only), plus side-by-side with production scstem.org (use the pre-installed Chromium/Playwright).
-3. Owner critiques → iterate on the homepage **and fold every generalizable decision back into DESIGN.md** (that's the deliverable that keeps Phase 07 fast). Repeat until explicit sign-off.
+2. Produce a review pack for the owner: full-page screenshots at 360px, 768px, 1440px, side-by-side with the **approved mockups** and with production scstem.org (use the pre-installed Chromium/Playwright).
+3. Owner reviews for conformance + real-device feel. Deviations from DESIGN.md are bugs — fix them; genuine design changes discovered here go through DESIGN.md §11 (doc PR first). Repeat until explicit sign-off.
 4. Record sign-off: check the box below, note date + iteration count in the PR.
 
 ### 4. Housekeeping
@@ -48,5 +48,5 @@ Built from primitives; these are the reusable section vocabulary for all later p
 - [ ] Sponsors render from the collection; deactivating a sponsor file removes it without code changes.
 - [ ] Zero client JS except the video poster/in-view script and nav toggle; reduced-motion shows poster.
 - [ ] Lighthouse A11y = 100, SEO = 100 (mobile) on the preview.
-- [ ] ⛔ **Owner visual sign-off recorded; DESIGN.md updated with review outcomes.**
+- [ ] ⛔ **Owner conformance sign-off recorded; any DESIGN.md amendments merged via §11 process.**
 - [ ] `pnpm check && pnpm build` green.
diff --git a/plan/10-seo.md b/plan/10-seo.md
index 05079fc..0c85d7a 100644
--- a/plan/10-seo.md
+++ b/plan/10-seo.md
@@ -12,7 +12,7 @@ Finish everything discoverability: sitemap/robots, per-page OG images, structure
 ### 1. Sitemap & robots
 
 - `@astrojs/sitemap` (installed Phase 01): filter out `/styleguide`, `404`, and hidden events (use `getVisibleEvents()` from Phase 08). Verify `<lastmod>` behavior; set `changefreq` only if honest.
-- Replace `public/robots.txt`: `User-agent: *` allow-all, plus `Sitemap: https://scstem.org/sitemap-index.xml`. **Changes from legacy:** drop `Disallow: /image` and `/video` (blocks Google Images/video indexing of team content — we want that traffic; the privacy-sensitive `/team/*` paths remain protected by the `X-Robots-Tag: noindex` rule in `_headers`, which is carried over). Do not block AI crawlers (GPTBot, ClaudeBot, PerplexityBot, etc.) — being in AI answers is an objective. Record this in `docs/adr/` as a deliberate posture.
+- Replace `public/robots.txt`: `User-agent: *` allow-all, plus `Sitemap: https://scstem.org/sitemap-index.xml`. **Changes from legacy:** drop `Disallow: /image` and `/video` (blocks Google Images/video indexing of team content — we want that traffic). Do not block AI crawlers (GPTBot, ClaudeBot, PerplexityBot, etc.) — being in AI answers is an objective. Record this in `docs/adr/` as a deliberate posture alongside D25.
 - Add `noindex` meta to `/styleguide` via Seo prop.
 
 ### 2. Metadata verification (CI teeth)
@@ -37,7 +37,9 @@ Finish everything discoverability: sitemap/robots, per-page OG images, structure
 
 ### 6. Redirects/headers parity
 
-- Carry over `public/_redirects` verbatim (`/join`, `/biohazard/*`, `/calendar`, `/wiki` rules) and `public/_headers` (pages.dev/staging noindex, `/team/*` noindex). Confirm behavior on the preview deploy (spot-check each redirect).
+- Carry over `public/_redirects` verbatim (`/join`, `/biohazard/*`, `/calendar`, `/wiki` rules).
+- Rewrite `public/_headers` per **D25**: keep ONLY the preview/staging noindex rules (`https://scstem-org.pages.dev/*`, `https://*scstem-org.pages.dev/*`, `https://staging.scstem.org/*`). The legacy `/team/*`, `/image/*`, `/video/*` noindex rules are **dropped** — no private/internal content lives on the main domain, and media indexing is wanted. Verify nothing on the new site serves content that should be private (grep routes/assets for anything internal — meeting docs, rosters, etc.); anything found goes to the owner, not onto the domain.
+- Confirm behavior on the preview deploy (spot-check each redirect + a preview-host noindex header).
 - Verify apex/www canonical behavior at the Cloudflare level; note the finding (dashboard config, not repo).
 
 ### 7. Analytics (D21)
@@ -55,6 +57,6 @@ Finish everything discoverability: sitemap/robots, per-page OG images, structure
 - [ ] `verify-meta` script green across the full build and wired into CI.
 - [ ] Every distinct JSON-LD shape validates; OG images resolve absolute and render in a card debugger (e.g. opengraph.xyz) on preview.
 - [ ] `/llms.txt` serves accurate, collection-backed content.
-- [ ] All legacy redirects verified working on preview; `_headers` noindex intact for staging + `/team/*`.
+- [ ] All legacy redirects verified working on preview; `_headers` reduced to preview/staging noindex only (D25) and verified.
 - [ ] GA4 + CF Analytics fire on production hostname only (verified via GA DebugView on a hostname-spoofed check or temporary debug flag), events in taxonomy fire; `docs/analytics.md` written with audit results.
 - [ ] `pnpm check && pnpm build` green; Lighthouse SEO = 1.0 holds.
diff --git a/plan/11-cutover.md b/plan/11-cutover.md
index 4f414ab..0afa3cc 100644
--- a/plan/11-cutover.md
+++ b/plan/11-cutover.md
@@ -15,7 +15,7 @@
 ### 2. Cloudflare Pages configuration (dashboard — coordinate with owner; not in repo)
 
 - Build command: `pnpm build` (or `pnpm install --frozen-lockfile && pnpm build` per Pages' pnpm handling — it respects `packageManager`); output directory: `dist` (was `build`); Node version env var matching the mise pin.
-- Confirm preview deployments still noindexed (`_headers` covers `*.pages.dev` + `staging.scstem.org`).
+- Confirm preview deployments still noindexed (`_headers` covers `*.pages.dev` + `staging.scstem.org`; per D25 those are the only noindex rules left — `/team/*`, `/image/*`, `/video/*` are gone deliberately).
 - Env vars: set `PUBLIC_TURNSTILE_SITE_KEY` (real key for production, test key acceptable for previews), confirm `SLACK_FORM_POST_GENERIC` secret still bound for Functions, CF Web Analytics token if env-injected.
 - Apply settings to a **preview first**: trigger a deploy of `astro-rewrite` with the new settings and verify before touching branch mappings.
 

From 0789c6fc2526565c1921ca8aa5c985ee054e68ff Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 27 Aug 2026 15:21:25 +0000
Subject: [PATCH 03/12] Clarify outline-button-on-photo and logo-mark color
 exemption in DESIGN.md

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DU6XwSGRUDZtz5DuXjzKnn
---
 DESIGN.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 7732d0a..08e7069 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -34,7 +34,7 @@ Dark-only for now (D15). All component color comes from **semantic tokens** —
 | `success` / `warning` / `destructive` | `#46C769` / `#FB9F4F` / `#FF6B64` | Form + status states only (brightened 400-steps of the legacy scales for dark-bg contrast) |
 | `ring` | `#FACC15` | Focus ring |
 
-Legacy full scales (yellow/green/blue/orange/red from `legacy/src/styles/theme.ts`) are the source palette; only the tokens above are exposed to components.
+Legacy full scales (yellow/green/blue/orange/red from `legacy/src/styles/theme.ts`) are the source palette; only the tokens above are exposed to components. The logo mark's fixed colors (gray gear `#4B5563`, yellow bulb) are brand-asset colors, exempt from the token rule like any other image.
 
 ### Program themes (D16)
 
@@ -118,7 +118,7 @@ CSS-only (D3, D20). Motion confirms — it never decorates.
 
 ## 8. Components tone
 
-- **Buttons**: variants `primary` (filled `primary`/`primary-foreground`), `outline` (1px `border`, `foreground` text, hover border-primary), `ghost` (nav/tertiary). One `primary` button per view region. Min touch target 44×44px. Icon+label spacing 8px.
+- **Buttons**: variants `primary` (filled `primary`/`primary-foreground`), `outline` (1px `border`, `foreground` text, hover border-primary; over photography it gains a translucent `card` background for legibility), `ghost` (nav/tertiary). One `primary` button per view region. Min touch target 44×44px. Icon+label spacing 8px.
 - **Links**: in-prose links are `primary`-colored **and underlined**; UI links (cards, nav) may drop underline at rest but must underline on hover/focus. External links get the external icon at 0.8em + `rel="noopener"`.
 - **Cards**: FeatureCard = icon in a `radius-sm` accent-tinted square (12% alpha `primary` bg, `primary` icon), `h4` title with the 32px accent rule, `body` copy, optional footer link. Sponsor card = logo on `card` bg (padded, contain), name, tier badge, "since YYYY" meta, external link icon.
 - **Tier badges**: outline style, `small` weight-500 — platinum `#CBD5E1`, gold `#FACC15`, silver `#A3A3A3`, bronze `#D08954`; text = badge color, 1px border same color at 40% alpha, transparent bg. (Retires the muddy filled pills.)

From 4438f0d0a168138bc149b38d98931664a41ad6a0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 27 Aug 2026 16:00:45 +0000
Subject: [PATCH 04/12] Encode design-review decisions in DESIGN.md and plan

Settled in owner review against Brand Guidelines v1: brand-literal
recessed surfaces (#262626 page / #171717 machined-pocket cards, grid
floor on feature moments), AAA text ramp, fill-vs-text accent token
pairs for all brand colors, Science Blue as informational + reserved
light-theme primary, Source Code Pro as the data voice, engineering
grid motif replacing the circuit pattern, real logo lockups in chrome,
sticky header, /programs hub behind the nav dropdown, full-height
mobile menu, and brand naming rules. Recorded as D26; navbar/footer
specs and the new /programs page added to phases 02/05/07.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DU6XwSGRUDZtz5DuXjzKnn
---
 DESIGN.md                | 191 ++++++++++++++++++++++-----------------
 plan/00-overview.md      |   1 +
 plan/02-design-system.md |   6 +-
 plan/05-app-shell.md     |  15 +--
 plan/07-pages.md         |   3 +
 5 files changed, 126 insertions(+), 90 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 08e7069..4bb7793 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -2,70 +2,89 @@
 
 Source of truth for the visual design of scstem.org. Every UI decision an implementer makes should be answerable from this document; if it isn't, propose an addition here first (PR + owner review), then build.
 
-The system is a **brand-faithful refresh** of the 2024–2026 site: same identity — dark, electric-yellow, gear-and-bulb, circuit texture, real photos of real students — with the execution tightened. The bar is *great, not just good*: fewer competing treatments, stronger hierarchy, deliberate everything.
+The system is a **brand-faithful refresh** of the 2024–2026 site, grounded in the official **Brand Guidelines v1** (colors, fonts, logo, and naming rules below are normative from that document) and settled through an owner design review in 2026-08. The organizing metaphor is the **build document**: the page is a machined surface, cards are pockets cut into it, the texture is engineering graph paper, and data speaks in a monospaced spec-sheet voice. The bar is *great, not just good*: fewer competing treatments, stronger hierarchy, deliberate everything.
 
-## 1. Brand essence & voice
+## 1. Brand essence, voice, and naming
 
 South Central STEM Collective (SC2) is a 501(c)(3) making hands-on STEM — FIRST robotics first among it — accessible to students aged 9–18 in and around Franklin County, PA. The site speaks to three audiences at once: **students** (this looks fun and serious), **parents** (this is safe, organized, worth our time), **sponsors** (this is a credible investment in the community).
 
 Voice: **energetic, concrete, community-proud.**
 - This, not that: *workshop*, not *startup*. *Confident*, not *hype*. *Specific* ("12+ years, 9 competition robots"), not *vague* ("empowering the future"). *Warm*, not *corporate*.
-- Sentence case everywhere — headings, buttons, nav. No Title Case, no ALL CAPS except tiny eyebrow labels.
+- Sentence case everywhere — headings, buttons, nav. Title Case only for proper nouns. No ALL CAPS except eyebrow labels and SCP spec labels (§3).
 - First person plural ("we build", "join us"); address the reader as "you".
 - Numbers beat adjectives. Real names, real seasons, real awards (with permission).
 
+**Name usage (from Brand Guidelines):** full name "South Central STEM Collective" with capitalized *STEM*; may break to two lines after "Central". Short name "SC2" (capitalized SC) — **never in headings**, and never on a page where the full name isn't present elsewhere. "SCSTEM" only for domains/handles, never in prose.
+
 ## 2. Color
 
-Dark-only for now (D15). All component color comes from **semantic tokens** — raw hex values and Tailwind palette classes (`bg-yellow-400`, `text-neutral-300`) are banned in components. Tokens live in `src/styles/global.css` `@theme`; a future light theme or theme switcher is a new token block, not a refactor.
+Dark-only for now (D15). All component color comes from **semantic tokens** — raw hex values and Tailwind palette classes are banned in components (the logo mark's fixed colors are brand-asset colors, exempt like any other image). Tokens live in `src/styles/global.css` `@theme`; a future light theme is a new token block, not a refactor.
+
+### Brand palette (normative, Brand Guidelines v1)
+
+Safety Yellow `#FACC15` · Science Blue `#3B82F6` · Foundation Gray `#4B5563` · Black `#171717` · White `#FAFAFA` · Hazard Green `#16A34A` · Danger Orange `#F97316` · Background Black `#262626`.
+
+### Surfaces — the recessed system
 
-### Base tokens (default / SC2 yellow theme)
+The page is the raised material; cards are **pockets machined into it**. (This is the *opposite* of the default elevated-lighter-card dark UI — deliberately.)
 
 | Token | Value | Use |
 |---|---|---|
-| `background` | `#161616` | Page ground |
-| `card` | `#1E1E1E` | Cards, panels, form fields |
-| `card-raised` | `#262626` | Nested surfaces, hover lift |
-| `border` | `#2F2F2F` | Hairlines, card borders, dividers |
-| `foreground` | `#EDEDED` | Body text, headings |
-| `muted-foreground` | `#A3A3A3` | Secondary text, captions, meta |
-| `primary` | `#FACC15` | CTAs, accents, focus, key-word emphasis |
-| `primary-foreground` | `#171717` | Text/icons on primary |
-| `secondary` | `#3B82F6` | Rare second accent (informational chips, FLL card icon) |
-| `success` / `warning` / `destructive` | `#46C769` / `#FB9F4F` / `#FF6B64` | Form + status states only (brightened 400-steps of the legacy scales for dark-bg contrast) |
-| `ring` | `#FACC15` | Focus ring |
-
-Legacy full scales (yellow/green/blue/orange/red from `legacy/src/styles/theme.ts`) are the source palette; only the tokens above are exposed to components. The logo mark's fixed colors (gray gear `#4B5563`, yellow bulb) are brand-asset colors, exempt from the token rule like any other image.
+| `background` | `#262626` | Page ground (brand Background Black) |
+| `card` | `#171717` | Pockets: cards, panels, form fields, footer band (brand Black) |
+| `section-tint` | `#212121` | Full-width alternate section bands |
+| `border` | `#3A3A3A` | Hairlines, card borders, dividers |
 
-### Program themes (D16)
+**Pocket anatomy (V2, "machined pocket")** — the standard card treatment: `card` fill, 1px `#383838` border, `radius-lg`, and inset edge physics: `box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.55), inset 0 -1px 0 rgb(255 255 255 / 0.05)`.
+**Feature pocket (V2+V3, "drawing pocket")**: the same, plus the engineering grid (§2 motifs) rendered *inside* the pocket at ~5% opacity — reserved for feature moments (program cards, CTA panels, stat bands) on ≥ md screens; dense card grids and mobile stay plain V2.
+**Hover (interactive pockets)**: pockets don't float — border warms to 40%-alpha `primary`, floor lifts `#171717 → #1A1A1A`, no translate, no glow, no shadow change.
+
+### Text
+
+| Token | Value | Contrast on `#262626` | Use |
+|---|---|---|---|
+| `foreground` | `#FAFAFA` | ≈14.5:1 (AAA) | Headings, nav, emphasis (brand White) |
+| `body` | `#D4D4D4` | ≈11.5:1 (AAA) | **All reading copy** |
+| `muted` | `#A3A3A3` | ≈6.0:1 (AA) | Captions, meta, labels only — never paragraphs |
+
+Rule: **AAA (≥7:1) for anything longer than a caption.** `muted` is the floor; nothing text-bearing goes dimmer.
 
-`data-theme="frc"` / `data-theme="fll"` on the page root remap **only** `primary`, `primary-foreground`, and `ring`. Everything else is identical — program pages feel like the same site wearing team colors.
+### Accents — the fill-vs-text law
 
-| Theme | `primary` | `primary-foreground` | Notes |
+Every brand accent is a **token pair**: the brand hex for *fills* (buttons, bands, chips, large graphics — with a near-black label), and a brightened variant for *text/icons/focus on dark* (the brand hexes other than yellow fail AA as dark-bg text). No exceptions, no third variants.
+
+| Accent | Fill (brand hex / label color) | Text-on-dark (≈ contrast) | Role |
 |---|---|---|---|
-| default (SC2) | `#FACC15` yellow | `#171717` | |
-| `frc` (Biohazard) | `#3ECF6E` green (brightened from brand `#16A34A` for dark-bg contrast; the deep green stays in imagery/logos) | `#08240F` | |
-| `fll` | `#FB923C` orange | `#241102` | |
+| Safety Yellow | `#FACC15` / `#171717` | `#FACC15` (9.9:1 — bright enough to be both) | **Action**: CTAs, links, focus ring, key-word emphasis. The default `primary`. |
+| Science Blue | `#3B82F6` / `#FAFAFA` | `#60A5FA` (6.0:1) | **Informational**: info callouts, calendar/event chips, data UI. Also the **designated primary of a future light theme** (yellow is illegible on white) — do not repurpose. |
+| Hazard Green | `#16A34A` / `#08240F` | `#3ECF6E` (7.4:1) | FRC/Biohazard theme accent pair |
+| Danger Orange | `#F97316` / `#241102` | `#FB923C` (8.0:1) | FLL theme accent pair |
+
+### Program themes (D16)
+
+`data-theme="frc"` / `data-theme="fll"` on the page root remap **only** `primary`, `primary-bright`, `primary-foreground`, and `ring` to the program's accent pair. Everything else is identical — program pages are the same site wearing team colors. Adding a program = one token block.
 
 Rules:
-- **One accent per view.** The page's `primary` does accent work; `secondary` blue appears only where meaning demands a second hue. The legacy mix (yellow CTA + blue links + orange button on one page) is retired.
-- Accent-colored text is allowed only at ≥ AA contrast on `background` (all three primaries above pass; verify on `/styleguide`).
-- Long body text is never accent-colored, never pure white — `foreground` only.
-- `muted-foreground` is the floor: nothing text-bearing goes dimmer.
+- **One action accent per view** (the theme's `primary`). Blue may appear alongside it only in its informational role. The legacy mix (yellow CTA + blue links + orange button on one page) stays dead.
+- Long body text is never accent-colored, never pure white — `body` token only.
+- Foundation Gray `#4B5563` lives in the logo and imagery; it is not a UI token.
 
-### Signature motifs (the brand carry-overs — keep, but disciplined)
+### Signature motifs
 
-1. **Key-word emphasis**: display headings may color exactly one phrase in `primary` ("Robots are in Franklin County. **So are we.**"). One treatment only — colored text; no underlines/highlighter marks in headings (underlines belong to links).
-2. **Accent hairline**: heroes end with a 2px `primary` rule, full-bleed. Card titles may carry a 32px × 2px `primary` rule beneath (FeatureCard motif).
-3. **Circuit texture**: the circuit-board pattern survives as a *quiet* signature — max ~4% opacity, on heroes and section breaks only, never behind body copy, never competing with photos.
-4. **Framed media**: photo collages/feature media get a 2px `primary` border + `radius-lg` — the "team picture frame" from the legacy home/FRC pages.
+1. **Key-word emphasis**: display headings may color exactly one phrase in `primary` ("Robots are in Franklin County. **So are we.**"). Colored text only — no underlines/highlighter marks in headings.
+2. **Accent hairline**: heroes end with a 2px `primary` rule, full-bleed. Card titles may carry a 32px × 2px `primary` rule beneath.
+3. **Engineering grid** (replaces the legacy circuit-board texture): fine graph-paper grid (~24–28px cell, 1px `#FAFAFA` strokes) at 4–7% opacity, on heroes and section breaks — never behind body copy. Optional **dimension-line ticks** (measure lines with arrowheads, `primary` at ≤50% opacity, SCP annotation) as rare garnish on heroes/section dividers. Inside feature pockets per the V2+V3 spec above.
+4. **Framed media**: photo collages/feature media get a 2px `primary` border + `radius-xl` — the "team picture frame".
 
 ## 3. Typography
 
+Per Brand Guidelines: Orbitron for page headings/titles (avoid very long or small lines), Inter for body/subheadings, Source Code Pro for monospaced/stylistic elements.
+
 | Role | Font | Weights | Where |
 |---|---|---|---|
-| Display/headings | **Orbitron** (variable) | 500–700 | h1–h3, stat numerals, eyebrow labels. Never below h3 size, never italic, never long lines (≤ ~40 chars) — Orbitron is the brand's voice, and it shouts; ration it. |
+| Display/headings | **Orbitron** (variable) | 500–700 | h1–h3 and eyebrow labels only. Never below h3 size, never italic, never long lines (≤ ~40 chars/line) — ration the display voice. |
 | UI & body | **Inter** (variable) | 400/500/600 | Everything else: body, h4–h6, nav, buttons, forms, captions |
-| Mono | **Source Code Pro** | 400/600 | Tabular numbers (countdowns), code-ish accents only |
+| Data voice | **Source Code Pro** | 400/600 | **Stats and numerals, countdowns, dates, spec labels** (ages chips, tier badges, "REF" annotations). The spec-sheet register of the build-document metaphor. |
 
 Fluid scale (clamp between 360px and 1440px viewports), defined as tokens:
 
@@ -76,81 +95,89 @@ Fluid scale (clamp between 360px and 1440px viewports), defined as tokens:
 | `h2` | 1.5rem → 2.25rem | 1.15 | Orbitron 600 |
 | `h3` | 1.25rem → 1.5rem | 1.25 | Orbitron 600 |
 | `h4` | 1.125rem → 1.25rem | 1.35 | Inter 600 |
-| `body-lg` | 1.0625rem → 1.1875rem | 1.65 | Inter 400 (intro paragraphs, hero subheads) |
+| `stat` | 1.75rem → 2.25rem | 1.1 | Source Code Pro 600, `primary` |
+| `body-lg` | 1.0625rem → 1.1875rem | 1.65 | Inter 400 |
 | `body` | 1rem → 1.0625rem | 1.65 | Inter 400 |
-| `small` | 0.875rem | 1.5 | Inter 400/500 (captions, meta, badges) |
+| `small` | 0.875rem | 1.5 | Inter 400/500 |
+| `label` | 0.6875–0.75rem | 1.4 | Source Code Pro 600, +0.05em tracking, uppercase (spec labels/chips) |
 
-- Eyebrow labels: `small`, Orbitron 500, uppercase, `+0.08em` tracking, `muted-foreground` or `primary` — the only sanctioned all-caps.
-- Prose measure: 65–75ch (`max-w-prose`). The about page's full-width text walls are retired.
-- Headings: sentence case; one `h1` per page; no skipped levels.
+- Eyebrow labels: Orbitron 500, 12px, uppercase, `+0.08em` tracking, `primary` or `muted` — Orbitron's one all-caps use; SCP `label` is the other sanctioned caps.
+- Prose measure: 65–75ch (`max-w-prose`).
+- Headings: sentence case; one `h1` per page; no skipped levels; never "SC2" in a heading (§1).
 
 ## 4. Spacing, radius, elevation
 
-- **Spacing**: 4px base scale (Tailwind default). Component-internal spacing 8–24px; between-component 24–48px.
-- **Section rhythm**: vertical padding `py-16` (mobile) / `py-24` (≥ md). Consistent on every section — the current uneven gaps are a bug, not a style.
-- **Radius tokens**: `radius-sm` 6px (badges, inputs), `radius-md` 8px (buttons), `radius-lg` 12px (cards), `radius-xl` 16px (framed media, heroes' inner panels). Nothing fully-pill except avatar-like elements; the legacy pill CTA becomes `radius-md`.
-- **Elevation**: borders over shadows (dark UI). Resting card: `card` bg + 1px `border`. Hover (interactive cards only): bg → `card-raised`, border → 40%-alpha `primary`, translate-y -2px. No glows, no colored drop shadows.
+- **Spacing**: 4px base scale. Component-internal 8–24px; between-component 24–48px.
+- **Section rhythm**: `py-16` (mobile) / `py-24` (≥ md), consistent on every section.
+- **Radius**: `radius-sm` 6px (badges, inputs), `radius-md` 8px (buttons), `radius-lg` 12px (cards/pockets), `radius-xl` 16px (framed media, feature panels).
+- **Elevation**: there is none — depth goes *down*, not up (§2 pocket anatomy). No drop shadows anywhere; the inset pocket shadows are the only shadows in the system.
 
-## 5. Layout
+## 5. Layout & navigation
 
-- Container: `max-w-6xl` (72rem) + `px-4` / `px-6` (≥ sm). Heroes and accent rules full-bleed; content aligned to container.
-- Grids: card grids are 1-col (mobile) / 2-col (≥ md) / 3-col (≥ lg). **No orphan rows**: design content to fill (5 cards → 2+3 intentional split or a 5-col feature treatment at lg, never a centered floater).
-- Breakpoints: Tailwind defaults + `3xl` = 120rem (legacy carry-over). Design mobile-first at 360px; every pattern must be specified at 360px before desktop.
-- The about page moves from the 3-column photo-rail layout to a single flowing column (prose measure) with photo groupings as full-width interleaved sections (timeline treatment).
+- Container: `max-w-6xl` (72rem) + `px-4`/`px-6`. Heroes and accent rules full-bleed; content aligned to container.
+- Grids: 1-col → 2-col (≥ md) → 3-col (≥ lg). **No orphan rows**: plan the math (5 cards = intentional 2+3).
+- Breakpoints: Tailwind defaults + `3xl` = 120rem. Design mobile-first at 360px.
+- **Header (sticky)**: sticky on all viewports, condensing slightly after scroll (pure CSS); `background`/95 with blur fallback, bottom hairline. Desktop: the **full-width color lockup** (`logo-color-full.svg`, ~40px) — the wordmark *is* the identity — then About / Programs ▾ / Sponsors / Donate + primary "Get involved" button. Mobile: the **square mark alone** (brand rules forbid subbing "SC2"; the full name must appear in page content — hero/footer satisfy this).
+- **Programs**: desktop hover/focus dropdown (FLL, FRC, Robots, Calendar) whose click/tap target is a real **`/programs` hub page** — zero-JS fallback and the mobile path. Never hover-only.
+- **Mobile menu**: full-height sheet; ≥48px rows (About, Programs, Sponsors, Donate, Calendar); "Get involved" and "Donate" as large buttons pinned at the bottom; Esc/backdrop closes; `aria-expanded` wired. Nothing is more than two taps away.
+- The about page: single flowing column (prose measure) with photo groupings as interleaved timeline sections — the legacy 3-column photo rails are retired.
 
 ## 6. Motion
 
 CSS-only (D3, D20). Motion confirms — it never decorates.
 
-- Durations: 150ms (hover/focus micro), 250ms (menus, accordions), 500ms (scroll-in entrances). Easing: `ease-out` for entrances, `ease-in-out` for state toggles.
+- Durations: 150ms (hover/focus), 250ms (menus, accordions), 500ms (scroll-in entrances). `ease-out` entrances, `ease-in-out` toggles.
 - Only `opacity` and `transform` animate.
-- Scroll entrances: single fade-up (8px), once, on section children; CSS scroll-driven animations with graceful no-support fallback (content visible by default — animation is enhancement).
-- Hero video: `preload="none"`, poster-first, plays when in-view; `prefers-reduced-motion` disables video autoplay and all entrances (instant states). No parallax anywhere (retires `react-scroll-parallax`).
-- Carousels: CSS scroll-snap; user-driven; no autoplay except the sponsor strip's slow marquee — pausable on hover/focus and disabled under reduced-motion.
+- Scroll entrances: single fade-up (8px), once; CSS scroll-driven animations with content-visible-by-default fallback.
+- Hero video: `preload="none"`, poster-first, plays in-view; `prefers-reduced-motion` disables video autoplay and all entrances. No parallax anywhere.
+- Carousels: CSS scroll-snap, user-driven; sponsor strip may slow-marquee — pausable, reduced-motion-off.
 
 ## 7. Imagery & art direction
 
-- **Real photos of real students and robots** are the brand. Stock imagery and the legacy unDraw illustrations are retired wherever a photo can serve (recolor to token colors in the interim if one must stay).
-- Text over photos requires a scrim: gradient from `background` (100% at text edge → 20% opposite), plus, on mobile, prefer text on solid `background` below the photo instead of overlaid. The legacy mobile hero (thin scrim, low contrast) is the canonical anti-example.
-- Photo treatment: `radius-xl` when framed inside sections; full-bleed only in heroes. Consistent warm/neutral grading — no filters wars between adjacent photos.
-- Every image: honest `alt`; decorative pattern images `alt=""` + `aria-hidden`.
-- OG images (1200×630): photo + scrim + Orbitron title + logo, one template, per-section variants.
+- **Real photos of real students and robots** are the brand. Stock and unDraw illustrations retire wherever a photo can serve (recolor to tokens if one must stay temporarily).
+- Text over photos requires a scrim built from `background` (rgb(38 38 38)): gradient 100% at the text edge → ~20% opposite. **On mobile, heroes put text on solid ground below the photo** (photo fades into `background` via bottom gradient) — never gamble on scrims at small sizes.
+- Photo treatment: `radius-xl` framed in sections; full-bleed only in heroes. Consistent warm/neutral grading.
+- Every image: honest `alt`; decorative pattern/grid SVGs `aria-hidden` with `alt=""`.
+- OG images (1200×630): photo + scrim + Orbitron title + lockup; one template, per-section variants.
+- **Logo usage** (Brand Guidelines): color lockup on light *and* dark; dark/light monochrome variants per background; never recolor, never set the name in another font as a substitute for the lockup where the lockup fits.
 
 ## 8. Components tone
 
-- **Buttons**: variants `primary` (filled `primary`/`primary-foreground`), `outline` (1px `border`, `foreground` text, hover border-primary; over photography it gains a translucent `card` background for legibility), `ghost` (nav/tertiary). One `primary` button per view region. Min touch target 44×44px. Icon+label spacing 8px.
-- **Links**: in-prose links are `primary`-colored **and underlined**; UI links (cards, nav) may drop underline at rest but must underline on hover/focus. External links get the external icon at 0.8em + `rel="noopener"`.
-- **Cards**: FeatureCard = icon in a `radius-sm` accent-tinted square (12% alpha `primary` bg, `primary` icon), `h4` title with the 32px accent rule, `body` copy, optional footer link. Sponsor card = logo on `card` bg (padded, contain), name, tier badge, "since YYYY" meta, external link icon.
-- **Tier badges**: outline style, `small` weight-500 — platinum `#CBD5E1`, gold `#FACC15`, silver `#A3A3A3`, bronze `#D08954`; text = badge color, 1px border same color at 40% alpha, transparent bg. (Retires the muddy filled pills.)
-- **Forms**: visible `Label` above every field (no placeholder-as-label); `card` bg inputs with 1px `border`, focus = `ring` 2px; errors in `destructive` with icon + text, tied via `aria-describedby`.
-- **Icons**: Tabler, outline style, 2px stroke, sizes 20/24/32. Icons always accompany text or carry `aria-label`. No emoji as UI.
-- **Stat band** (FRC page motif, generalizable): Orbitron numeral (`h2` size, `primary`) + Inter label; on `card` panel with accent hairline top.
+- **Buttons**: `primary` (theme accent fill + its near-black label — on FRC pages that's Hazard Green fill, etc.), `outline` (1px `border`, `foreground` text; over photography gains a translucent `card` background), `ghost`. One primary per view region. Min touch target 44×44px (nav CTA included). `radius-md`.
+- **Links**: in-prose links `primary`-colored **and underlined**; UI links may drop underline at rest but underline on hover/focus. External links: icon at 0.8em + `rel="noopener"`.
+- **Cards**: pocket anatomy per §2. FeatureCard = icon in `radius-sm` accent-tinted square (12% alpha `primary` bg, `primary` icon), Inter 600 title with the 32px accent rule, `body` copy, optional footer link.
+- **Chips/spec labels**: SCP `label` style — uppercase, tracked, 1px 40%-alpha border in the chip's color, transparent bg. Ages ("AGES 9–16"), sponsor tiers (platinum `#CBD5E1`, gold `#FACC15`, silver `#A3A3A3`, bronze `#D08954`), event dates.
+- **Stat band**: SCP 600 numeral in `primary` + Inter caption in `body`, on a pocket (feature moments get the grid floor).
+- **Forms**: visible `Label` above every field; `card` bg inputs, 1px `border`, focus = `ring` 2px; errors in the destructive text token with icon + `aria-describedby`.
+- **Icons**: Tabler, outline, 2px stroke, 20/24/32. Always with text or `aria-label`. No emoji as UI.
 
 ## 9. Accessibility
 
-- WCAG 2.2 AA minimum everywhere; body text targets AAA (≥ 7:1). Contrast pairs verified live on `/styleguide` (computed ratios rendered next to swatches); the token values above were chosen to pass — changes must re-verify.
-- Focus: 2px `ring` outline + 2px offset on every interactive element, never removed, high-visibility on dark.
-- Keyboard: everything operable; skip link first in DOM; `aria-current="page"` in nav; disclosure menus close on Esc.
+- WCAG 2.2 AA minimum everywhere; **body text AAA (≥7:1)** per §2. Contrast pairs verified live on `/styleguide` (computed ratios rendered); token changes must re-verify.
+- Focus: 2px `ring` (theme accent) + 2px offset on every interactive element, never removed.
+- Keyboard: everything operable; skip link first in DOM; `aria-current="page"` in nav; menus close on Esc.
 - Landmarks: one `header`/`main`/`footer`; labeled `nav`s; headings form an outline.
-- Touch targets ≥ 44px; hover-only affordances forbidden (what hovers must also focus).
-- `prefers-reduced-motion` honored globally (see §6); `color-scheme: dark` declared so native controls match.
+- Touch targets ≥ 44px; hover-only affordances forbidden (dropdowns have focus + tap paths per §5).
+- `prefers-reduced-motion` honored globally; `color-scheme: dark` declared.
 
 ## 10. Do / Don't
 
-| Don't (seen in legacy) | Do |
+| Don't | Do |
 |---|---|
-| Yellow words, yellow underlines, and blue links competing in one viewport | One accent treatment per view: `primary` key-word in the heading, `primary` CTA, done |
-| Orange "Join the Revolution" button on the green FRC page | The page theme's `primary` button — Biohazard green |
-| Hero copy on a busy photo behind a thin scrim (mobile home) | Scrim recipe from §7, or text on solid ground below the photo |
-| Circuit pattern behind paragraphs | Pattern on heroes/section breaks at ≤ 4% opacity only |
-| 5 cards centered as 3+2 with a floating orphan | Grid math planned: 2+3 split, or redesign to 4/6 |
-| `"Biohazard" - 2013` caption strips down page margins | Timeline section with framed, captioned photos in flow |
-| Orbitron paragraphs / tiny Orbitron labels everywhere | Orbitron = h1–h3, stats, eyebrows; Inter for the rest |
-| Filled dark-on-dark tier pills (navy "Platinum") | Outline tier badges per §8 |
-| Grayscale washed-out footer logo | Full-color logo on `background`, `muted-foreground` text |
-| Title Case Buttons And Headings | Sentence case |
+| Elevated lighter-than-page cards (the stock AI dark-UI look) | Pockets: darker cards machined *into* the page (§2) |
+| Circuit-board wallpaper | Engineering grid + dimension ticks, ≤7%, heroes/section breaks only |
+| Yellow words, yellow underlines, and blue links competing in one viewport | One action accent per view; blue only in its informational role |
+| Orange button on the green FRC page | The page theme's primary pair |
+| Hero copy on a busy photo behind a thin scrim on mobile | Text on solid ground below the photo (§7) |
+| Body copy in `#A3A3A3` or dimmer | `body #D4D4D4` minimum; muted is captions-only |
+| Orbitron paragraphs, tiny Orbitron labels, Orbitron stats | Orbitron = h1–h3 + eyebrows; **SCP owns numbers and spec labels** |
+| "SC2" in a heading; "Scstem" in prose | Full name (capitalized STEM); SC2 only in prose with the full name present |
+| Faking the logo: gear SVG + name in Inter | Real lockup assets: full-width on desktop chrome, square mark on mobile |
+| Filled dark-on-dark tier pills | SCP outline chips per §8 |
+| 5 cards centered as 3+2 with a floating orphan | Grid math planned: intentional 2+3 |
+| Drop shadows, glows, hover-lift on pockets | Border warms + floor lifts one step; depth only goes down |
 | `alt="image"` / missing alt | Descriptive alt or explicit `alt=""` |
-| Generic hero copy ("Empowering the future…") | Specific, local, human ("Robots are in Franklin County. So are we.") |
+| Generic hero copy ("Empowering the future…") | Specific, local, human |
 
 ## 11. Change process
 
diff --git a/plan/00-overview.md b/plan/00-overview.md
index 2d7dbea..e931caa 100644
--- a/plan/00-overview.md
+++ b/plan/00-overview.md
@@ -53,6 +53,7 @@ This directory is the complete implementation plan for rewriting scstem.org from
 | D23 | Branch flow per "How to use this plan" above. |
 | D24 | Toolchain split (oxc-first hybrid): oxlint + oxfmt own `.ts/.js/.mjs/.cjs/.json/.jsonc/.css`; ESLint + Prettier own `.astro` and `.md`. When oxlint/oxfmt gain Astro support, migration = delete the ESLint/Prettier half (seam documented in `docs/adr/`). |
 | D25 | **No private/internal content on the main domain.** The legacy `_headers` per-path noindex rules (`/team/*`, `/image/*`, `/video/*`) are dropped entirely; only the preview/staging host rules (`*.pages.dev`, `staging.scstem.org`) carry over. Anything private lives off-domain. Image/video indexing is thereby enabled (helps image SEO). |
+| D26 | **Design review outcomes (owner-settled, 2026-08, recorded in DESIGN.md):** brand-literal recessed surfaces (`#262626` page, `#171717` "machined pocket" cards; V2+V3 grid-floor variant for feature moments); AAA text ramp (`#FAFAFA`/`#D4D4D4`, `#A3A3A3` captions-only); fill-vs-text token pairs for all brand accents; Science Blue = informational on dark and reserved light-theme primary; Source Code Pro owns numerals/spec labels; engineering-grid + dimension-tick motif replaces the circuit pattern; sentence-case headings; real logo lockups in chrome (full-width desktop, square mark mobile); sticky condensed header; Programs dropdown backed by a new `/programs` hub page; full-height mobile menu sheet; mobile heroes put text on solid ground below the photo. |
 
 ## Current-state facts (verified 2026-08)
 
diff --git a/plan/02-design-system.md b/plan/02-design-system.md
index 256d3ba..2767504 100644
--- a/plan/02-design-system.md
+++ b/plan/02-design-system.md
@@ -31,9 +31,13 @@
 
 ### 2. Fonts (§3)
 
-- Self-hosted: `@fontsource-variable/inter`, `@fontsource-variable/orbitron`, `@fontsource-variable/source-code-pro` (static @fontsource fallback for any without a variable axis). Latin subset only, `font-display: swap`.
+- Self-hosted: `@fontsource-variable/inter`, `@fontsource-variable/orbitron`, `@fontsource-variable/source-code-pro` (static @fontsource fallback for any without a variable axis). Latin subset only, `font-display: swap`. Source Code Pro is a first-class working face (stats, spec labels, chips — DESIGN.md §3), not an afterthought.
 - `src/styles/fonts.ts` exports the two above-the-fold woff2 paths (Inter var, Orbitron var) for BaseLayout's `<link rel="preload">` (wired in Phase 05).
 
+### 2b. Brand assets
+
+- Copy the official logo assets from `legacy/public/image/svg/` (`logo-color-full.svg`, `logo-color.svg`, plus the black/white variants) into `src/assets/brand/`. These are the only sanctioned marks (DESIGN.md §7): full-width lockup in desktop chrome, square mark in mobile chrome. Never rebuild the logo as inline SVG or set the name in Inter as a lockup substitute.
+
 ### 3. Signature motifs as utilities/components
 
 Implement DESIGN.md §2 "signature motifs" as reusable pieces so pages can't reinvent them:
diff --git a/plan/05-app-shell.md b/plan/05-app-shell.md
index cf038ba..91dc830 100644
--- a/plan/05-app-shell.md
+++ b/plan/05-app-shell.md
@@ -31,17 +31,18 @@ Typed builder helpers returning `schema.org` objects, serialized via a tiny `<Js
 - Favicon/manifest set in `public/`: `favicon.ico` (carry over), new `icon.svg`, `apple-touch-icon.png` (180px), `site.webmanifest` (name, short_name SC2, theme/background colors from tokens, icons 192/512). Generate from the legacy logo asset.
 - `src/layouts/ProgramLayout.astro`: thin wrapper setting `theme` — replaces the duplicated legacy FRC/FLL layouts.
 
-### 4. Navbar — `src/components/ui/Navbar.astro`
+### 4. Navbar — `src/components/ui/Navbar.astro` (spec: DESIGN.md §5, D26)
 
-Rebuild (reference `legacy/src/components/Navbar.tsx`, 261 LOC, for link inventory and grouping only):
-- Semantic `<header><nav aria-label="Main">`, logo (Phase 02 treatment), current-page indication via `aria-current="page"`.
-- Mobile: disclosure menu — button with `aria-expanded` + small inline script toggling; CSS transition; no focus trap needed (non-modal); Esc closes. Works at 360px.
-- Desktop: programs dropdown (if legacy has one) via CSS `:focus-within`/popover attribute — keyboard reachable.
-- Sticky behavior only if DESIGN.md says so; no scroll-linked JS.
+Rebuild (reference `legacy/src/components/Navbar.tsx`, 261 LOC, for link inventory only):
+- Semantic `<header><nav aria-label="Main">`; **sticky on all viewports**, condensing slightly after scroll via pure CSS (scroll-driven animation with graceful no-support fallback); `background`/95 bg, bottom hairline.
+- Identity: **full-width color lockup** (`src/assets/brand/logo-color-full.svg`, ~40px) on ≥ md; **square mark alone** on mobile (brand rules: never "SC2" as a name substitute; the full name appears in page content).
+- Links: About / Programs ▾ / Sponsors / Donate + primary "Get involved" button (≥44px target). `aria-current="page"` states.
+- **Programs dropdown**: CSS `:focus-within`/popover-attribute disclosure listing FLL, FRC, Robots, Calendar — while the "Programs" link itself navigates to the **`/programs` hub page** (Phase 07), so touch and no-JS users get a real destination. Keyboard reachable, Esc closes.
+- Mobile menu: **full-height sheet** — ≥48px rows (About, Programs, Sponsors, Calendar), "Get involved" + "Donate" as large buttons pinned at the bottom; `aria-expanded` toggle script (~20 lines), Esc/backdrop close, body scroll locked while open.
 
 ### 5. Footer — `src/components/ui/Footer.astro`
 
-Reference `legacy/src/components/Footer.tsx` (195 LOC) for content inventory: nav links, social icons (Icon primitive), contact info, legal line. All data from `src/data/site.ts`. Semantic `<footer>`, one `<nav aria-label="Footer">`.
+Reference `legacy/src/components/Footer.tsx` (195 LOC) for content inventory: nav links, social icons (Icon primitive), contact info, legal line. All data from `src/data/site.ts`. Semantic `<footer>`, one `<nav aria-label="Footer">`. Styled as a recessed `card` band (DESIGN.md §2) with the full-width color lockup — never a grayscale logo.
 
 ### 6. 404 — `src/pages/404.astro`
 
diff --git a/plan/07-pages.md b/plan/07-pages.md
index a5295a6..2d59b0d 100644
--- a/plan/07-pages.md
+++ b/plan/07-pages.md
@@ -38,6 +38,9 @@ Shared rules for all groups:
 
 ## Group C — Programs (FRC/FLL)
 
+### `/programs` (new — the hub page backing the nav dropdown, D26)
+- No legacy counterpart. Program cards for FLL and FRC (same `ui/` components as the homepage programs section, fuller copy), plus links to Robots and the calendars. Title/description written fresh; breadcrumbs JSON-LD. This is the tap target for "Programs" on touch/no-JS (Phase 05 navbar).
+
 ### `/programs/frc` (`legacy/src/app/programs/frc/page.tsx` + `components.tsx`)
 - ProgramLayout `theme="frc"`. Port copy/sections; team identity (Biohazard) media from `src/assets/frc/`.
 

From 7ebe54cb43d2014c5764d5d0b6a6233a1ea0721f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 27 Aug 2026 16:57:12 +0000
Subject: [PATCH 05/12] Add atmosphere layer to DESIGN.md

Between-section devices for the dark ground: ambient pools, ghost
section numerals (from the brand guidelines' section pages), ruler
dividers, and tint bands - exactly one per boundary, with a restraint
rule. Closes the flat/sterile-background review feedback.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DU6XwSGRUDZtz5DuXjzKnn
---
 DESIGN.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/DESIGN.md b/DESIGN.md
index 4bb7793..8d8f8b0 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -76,6 +76,16 @@ Rules:
 3. **Engineering grid** (replaces the legacy circuit-board texture): fine graph-paper grid (~24–28px cell, 1px `#FAFAFA` strokes) at 4–7% opacity, on heroes and section breaks — never behind body copy. Optional **dimension-line ticks** (measure lines with arrowheads, `primary` at ≤50% opacity, SCP annotation) as rare garnish on heroes/section dividers. Inside feature pockets per the V2+V3 spec above.
 4. **Framed media**: photo collages/feature media get a 2px `primary` border + `radius-xl` — the "team picture frame".
 
+### Atmosphere layer
+
+Large unmodulated `background` fields read sterile. Between the hero and the footer, every major section boundary carries **exactly one** of these devices (never stacked, never behind photos):
+
+5. **Ambient pools**: one radial gradient anchored to a section's top or its heading — `primary` at 2–4% alpha (or `#FAFAFA` at ~2% for neutral sections), fading to transparent by ~70%. A ±2-lightness modulation of the ground; text contrast is unaffected. Max one per section.
+6. **Ghost section numerals**: oversized Source Code Pro 600 numerals (`01`, `02`, …) at 3–5% alpha `foreground`, placed behind section headings — the device from the Brand Guidelines' own section pages. Decorative (`aria-hidden`), numbering only top-level page sections, 3–4 per page max.
+7. **Ruler dividers**: a full-container tick-mark strip (baseline + graduated ticks, `foreground` at ≤12%) as the *strong* section divider; plain 1px hairlines remain the quiet default.
+
+Restraint rule: these are atmosphere, not decoration — if a device is noticeable before the content is, it's too loud. `section-tint` bands (§2 surfaces) count as a device for their boundary.
+
 ## 3. Typography
 
 Per Brand Guidelines: Orbitron for page headings/titles (avoid very long or small lines), Inter for body/subheadings, Source Code Pro for monospaced/stylistic elements.
@@ -165,6 +175,7 @@ CSS-only (D3, D20). Motion confirms — it never decorates.
 | Don't | Do |
 |---|---|
 | Elevated lighter-than-page cards (the stock AI dark-UI look) | Pockets: darker cards machined *into* the page (§2) |
+| Bare, unmodulated `#262626` voids between sections | One atmosphere device per boundary: ambient pool, ghost numeral, ruler divider, or tint band (§2) |
 | Circuit-board wallpaper | Engineering grid + dimension ticks, ≤7%, heroes/section breaks only |
 | Yellow words, yellow underlines, and blue links competing in one viewport | One action accent per view; blue only in its informational role |
 | Orange button on the green FRC page | The page theme's primary pair |

From 67811cf34e38e97b008c9f8d32da206b9748ceee Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 27 Aug 2026 17:02:04 +0000
Subject: [PATCH 06/12] Tune atmosphere layer: page-ground grid, stronger
 devices, registration marks

The engineering grid now runs on the page ground itself (<=3%) so the
dark surface reads as the drawing sheet the pockets are cut into;
pools/numerals/ruler opacities raised per review; corner registration
marks added as a feature-pocket garnish.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DU6XwSGRUDZtz5DuXjzKnn
---
 DESIGN.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 8d8f8b0..3e2f157 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -73,16 +73,17 @@ Rules:
 
 1. **Key-word emphasis**: display headings may color exactly one phrase in `primary` ("Robots are in Franklin County. **So are we.**"). Colored text only — no underlines/highlighter marks in headings.
 2. **Accent hairline**: heroes end with a 2px `primary` rule, full-bleed. Card titles may carry a 32px × 2px `primary` rule beneath.
-3. **Engineering grid** (replaces the legacy circuit-board texture): fine graph-paper grid (~24–28px cell, 1px `#FAFAFA` strokes) at 4–7% opacity, on heroes and section breaks — never behind body copy. Optional **dimension-line ticks** (measure lines with arrowheads, `primary` at ≤50% opacity, SCP annotation) as rare garnish on heroes/section dividers. Inside feature pockets per the V2+V3 spec above.
+3. **Engineering grid** (replaces the legacy circuit-board texture): fine graph-paper grid (~24–28px cell, 1px `#FAFAFA` strokes). It runs at two levels: (a) **the page ground itself** at ≤3% opacity — the whole page is the drawing sheet (this is what keeps the dark ground from reading barren; it sits beneath everything and is exempt from the reading-zone rule); (b) stronger accents at 4–7% on heroes and section breaks, kept out of reading zones. **Pockets stay smooth** (V2) so the recess reads against the textured ground — the V2+V3 grid floor is the deliberate exception. Optional **dimension-line ticks** (`primary` at ≤50%, SCP annotation) as rare garnish.
 4. **Framed media**: photo collages/feature media get a 2px `primary` border + `radius-xl` — the "team picture frame".
 
 ### Atmosphere layer
 
 Large unmodulated `background` fields read sterile. Between the hero and the footer, every major section boundary carries **exactly one** of these devices (never stacked, never behind photos):
 
-5. **Ambient pools**: one radial gradient anchored to a section's top or its heading — `primary` at 2–4% alpha (or `#FAFAFA` at ~2% for neutral sections), fading to transparent by ~70%. A ±2-lightness modulation of the ground; text contrast is unaffected. Max one per section.
-6. **Ghost section numerals**: oversized Source Code Pro 600 numerals (`01`, `02`, …) at 3–5% alpha `foreground`, placed behind section headings — the device from the Brand Guidelines' own section pages. Decorative (`aria-hidden`), numbering only top-level page sections, 3–4 per page max.
-7. **Ruler dividers**: a full-container tick-mark strip (baseline + graduated ticks, `foreground` at ≤12%) as the *strong* section divider; plain 1px hairlines remain the quiet default.
+5. **Ambient pools**: one radial gradient anchored to a section's top or its heading — `primary` at 3–6% alpha (or `#FAFAFA` at 2–4% for neutral sections), fading to transparent by ~70%. A small lightness modulation of the ground; text contrast is unaffected. Max one per section.
+6. **Ghost section numerals**: oversized Source Code Pro 600 numerals (`01`, `02`, …) at 5–8% alpha `foreground`, placed behind section headings — the device from the Brand Guidelines' own section pages. Decorative (`aria-hidden`), numbering only top-level page sections, 3–4 per page max.
+7. **Ruler dividers**: a full-container tick-mark strip (baseline + graduated ticks, `foreground` at ≤18%) as the *strong* section divider; plain 1px hairlines remain the quiet default.
+8. **Registration marks**: small corner brackets (`primary` at ≤35%, 1.5px stroke, ~20px) on the corners of one feature pocket per view — the drafting-sheet crop-mark garnish. Never on standard cards.
 
 Restraint rule: these are atmosphere, not decoration — if a device is noticeable before the content is, it's too loud. `section-tint` bands (§2 surfaces) count as a device for their boundary.
 

From b9c4204d44452591b9a9768f4279efe0ec83de84 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 27 Aug 2026 17:04:53 +0000
Subject: [PATCH 07/12] Reject page-ground grid; ground stays smooth so pocket
 grid floors read

Review finding: a page-level grid competes with the V2+V3 feature
pocket floors and dulls the recess effect. Grid stays scoped to
heroes, section breaks, and feature-pocket interiors; ground
modulation comes from pools, numerals, ruler dividers, tint bands,
and registration marks.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DU6XwSGRUDZtz5DuXjzKnn
---
 DESIGN.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/DESIGN.md b/DESIGN.md
index 3e2f157..79a87d1 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -73,7 +73,7 @@ Rules:
 
 1. **Key-word emphasis**: display headings may color exactly one phrase in `primary` ("Robots are in Franklin County. **So are we.**"). Colored text only — no underlines/highlighter marks in headings.
 2. **Accent hairline**: heroes end with a 2px `primary` rule, full-bleed. Card titles may carry a 32px × 2px `primary` rule beneath.
-3. **Engineering grid** (replaces the legacy circuit-board texture): fine graph-paper grid (~24–28px cell, 1px `#FAFAFA` strokes). It runs at two levels: (a) **the page ground itself** at ≤3% opacity — the whole page is the drawing sheet (this is what keeps the dark ground from reading barren; it sits beneath everything and is exempt from the reading-zone rule); (b) stronger accents at 4–7% on heroes and section breaks, kept out of reading zones. **Pockets stay smooth** (V2) so the recess reads against the textured ground — the V2+V3 grid floor is the deliberate exception. Optional **dimension-line ticks** (`primary` at ≤50%, SCP annotation) as rare garnish.
+3. **Engineering grid** (replaces the legacy circuit-board texture): fine graph-paper grid (~24–28px cell, 1px `#FAFAFA` strokes) at 4–7% opacity, on heroes and section breaks and inside V2+V3 feature-pocket floors — never behind body copy, and **never on the page ground**: a page-level grid was tried and rejected in review (it competes with the pocket grid floors and dulls the recess effect). The ground stays smooth; its life comes from the atmosphere devices below, so the grid stays special where it appears. Optional **dimension-line ticks** (`primary` at ≤50%, SCP annotation) as rare garnish.
 4. **Framed media**: photo collages/feature media get a 2px `primary` border + `radius-xl` — the "team picture frame".
 
 ### Atmosphere layer

From dd0dd980f70e6fba9d749b4f87c737f9695a7a86 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 27 Aug 2026 17:12:25 +0000
Subject: [PATCH 08/12] Adopt the scribed register from the official t-shirt
 art

New DESIGN.md motif family with the t-shirt art as normative
reference: highlight capsules (the Real Skills/Robots/Fun treatment),
the engineering-drawing title block, scribed wireframe lineart, and
labeled leader-line callouts - plus a register budget capping distinct
blueprint devices at 4 per viewport. Phase 02 gains the task of
sourcing the wireframe gear-bulb vector from the merch files.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DU6XwSGRUDZtz5DuXjzKnn
---
 DESIGN.md                | 13 ++++++++++++-
 plan/02-design-system.md |  1 +
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/DESIGN.md b/DESIGN.md
index 79a87d1..deec428 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -2,7 +2,7 @@
 
 Source of truth for the visual design of scstem.org. Every UI decision an implementer makes should be answerable from this document; if it isn't, propose an addition here first (PR + owner review), then build.
 
-The system is a **brand-faithful refresh** of the 2024–2026 site, grounded in the official **Brand Guidelines v1** (colors, fonts, logo, and naming rules below are normative from that document) and settled through an owner design review in 2026-08. The organizing metaphor is the **build document**: the page is a machined surface, cards are pockets cut into it, the texture is engineering graph paper, and data speaks in a monospaced spec-sheet voice. The bar is *great, not just good*: fewer competing treatments, stronger hierarchy, deliberate everything.
+The system is a **brand-faithful refresh** of the 2024–2026 site, grounded in the official **Brand Guidelines v1** (colors, fonts, logo, and naming rules below are normative from that document) and settled through an owner design review in 2026-08. The organizing metaphor is the **build document**: the page is a machined metal sheet — pockets cut *into* it, blueprint linework and spec labels scribed *onto* it — and data speaks in a monospaced spec-sheet voice. The official t-shirt art (wireframe gear-bulb with dimension callouts, the outlined-capsule tagline, the PROJECT/ORGANIZATION/URL title block) is a normative reference for this scribed register. The balance rule: the sheet stays technical, not themed — the bar is *great, not just good*: fewer competing treatments, stronger hierarchy, deliberate everything.
 
 ## 1. Brand essence, voice, and naming
 
@@ -85,6 +85,17 @@ Large unmodulated `background` fields read sterile. Between the hero and the foo
 7. **Ruler dividers**: a full-container tick-mark strip (baseline + graduated ticks, `foreground` at ≤18%) as the *strong* section divider; plain 1px hairlines remain the quiet default.
 8. **Registration marks**: small corner brackets (`primary` at ≤35%, 1.5px stroke, ~20px) on the corners of one feature pocket per view — the drafting-sheet crop-mark garnish. Never on standard cards.
 
+### Scribed register (from the t-shirt art)
+
+The blueprint devices printed *onto* the sheet. Each appears at most once per page unless noted:
+
+9. **Highlight capsules**: inline key words wrapped in a 1.5px `foreground`-stroke pill (`border-radius: 999px`, ~2px 10–12px padding) — the "Real **Skills**. Real **Robots**. Real **Fun**." treatment. Tagline/display contexts only; never inside headings ≥ h2, never in body copy; one capsule run per view. The tagline itself is sanctioned brand copy for heroes/CTAs.
+10. **Title block**: the engineering-drawing identity strip — bordered compartments, each an SCP uppercase label (`PROJECT:` / `ORGANIZATION:` / `URL:` …) over an Inter (or SCP for URLs/codes) value, 1px `border` dividers. Its home is the footer bottom (the drawing sheet's corner), horizontal strip ≥ md, stacked on mobile; contact/event pages may use the boxed stack as an info card.
+11. **Scribed lineart**: the wireframe gear-bulb (and sibling blueprint drawings) as large, faint decorative art — stroke-only, `foreground` or `primary`, 4–6% opacity, on `card` bands (footer, feature panels), never behind body copy. Obtain the real vector from the merch/brand source files into `src/assets/brand/` (the mockups use a drawn approximation).
+12. **Labeled callouts**: leader line (1px, dot or arrow terminus) + SCP label — figure captions under framed media ("FIG. 01 — BIOHAZARD, 2023 SEASON"), detail annotations on heroes ("DETAIL A" style). `muted` color; captions may double as the image's visible credit.
+
+**Register budget**: across grid, ticks, ruler, numerals, pools, marks, capsules, title block, lineart, and callouts, a viewport shows **at most 4 distinct devices**. If a new one enters a view, another leaves.
+
 Restraint rule: these are atmosphere, not decoration — if a device is noticeable before the content is, it's too loud. `section-tint` bands (§2 surfaces) count as a device for their boundary.
 
 ## 3. Typography
diff --git a/plan/02-design-system.md b/plan/02-design-system.md
index 2767504..e71c260 100644
--- a/plan/02-design-system.md
+++ b/plan/02-design-system.md
@@ -37,6 +37,7 @@
 ### 2b. Brand assets
 
 - Copy the official logo assets from `legacy/public/image/svg/` (`logo-color-full.svg`, `logo-color.svg`, plus the black/white variants) into `src/assets/brand/`. These are the only sanctioned marks (DESIGN.md §7): full-width lockup in desktop chrome, square mark in mobile chrome. Never rebuild the logo as inline SVG or set the name in Inter as a lockup substitute.
+- Request the **wireframe gear-bulb lineart vector** (and any sibling blueprint drawings) from the t-shirt/merch source files from the owner and add to `src/assets/brand/` — it powers the scribed-lineart motif (DESIGN.md §2.11). Until provided, the drawn approximation from the mockups may stand in, flagged in the PR.
 
 ### 3. Signature motifs as utilities/components
 

From 7b3cfbc1ec54cfa2fd49546b2a76b09841edb07f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 27 Aug 2026 17:19:51 +0000
Subject: [PATCH 09/12] Add hand-markup register; ban pill UI

Third metaphor layer: the engineer's hand markup over the machined
sheet - chalk ovals (replacing the rejected pill capsules),
highlighter swipes, chalk underlines, and sketch arrows, with a
draw-on entrance as the one sanctioned decorative animation. Machined
strokes stay perfectly straight; hand strokes stay imperfect - the
contrast is deliberate. Register budget covers all three layers.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DU6XwSGRUDZtz5DuXjzKnn
---
 DESIGN.md | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index deec428..19a7ec8 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -2,7 +2,7 @@
 
 Source of truth for the visual design of scstem.org. Every UI decision an implementer makes should be answerable from this document; if it isn't, propose an addition here first (PR + owner review), then build.
 
-The system is a **brand-faithful refresh** of the 2024–2026 site, grounded in the official **Brand Guidelines v1** (colors, fonts, logo, and naming rules below are normative from that document) and settled through an owner design review in 2026-08. The organizing metaphor is the **build document**: the page is a machined metal sheet — pockets cut *into* it, blueprint linework and spec labels scribed *onto* it — and data speaks in a monospaced spec-sheet voice. The official t-shirt art (wireframe gear-bulb with dimension callouts, the outlined-capsule tagline, the PROJECT/ORGANIZATION/URL title block) is a normative reference for this scribed register. The balance rule: the sheet stays technical, not themed — the bar is *great, not just good*: fewer competing treatments, stronger hierarchy, deliberate everything.
+The system is a **brand-faithful refresh** of the 2024–2026 site, grounded in the official **Brand Guidelines v1** (colors, fonts, logo, and naming rules below are normative from that document) and settled through an owner design review in 2026-08. The organizing metaphor is the **build document**, in three layers: the page is a machined metal sheet (pockets cut *into* it), blueprint linework and spec labels are scribed *onto* it, and an **engineer's hand markup** — highlighter swipes, chalk circles and underlines, sketched arrows — sits over the top. The machine provides structure; the hand provides warmth; data speaks in a monospaced spec-sheet voice. The official t-shirt art (wireframe gear-bulb with dimension callouts, the circled-word tagline, the PROJECT/ORGANIZATION/URL title block) is a normative reference. The balance rule: the sheet stays technical, not themed — the bar is *great, not just good*: fewer competing treatments, stronger hierarchy, deliberate everything.
 
 ## 1. Brand essence, voice, and naming
 
@@ -89,12 +89,22 @@ Large unmodulated `background` fields read sterile. Between the hero and the foo
 
 The blueprint devices printed *onto* the sheet. Each appears at most once per page unless noted:
 
-9. **Highlight capsules**: inline key words wrapped in a 1.5px `foreground`-stroke pill (`border-radius: 999px`, ~2px 10–12px padding) — the "Real **Skills**. Real **Robots**. Real **Fun**." treatment. Tagline/display contexts only; never inside headings ≥ h2, never in body copy; one capsule run per view. The tagline itself is sanctioned brand copy for heroes/CTAs.
-10. **Title block**: the engineering-drawing identity strip — bordered compartments, each an SCP uppercase label (`PROJECT:` / `ORGANIZATION:` / `URL:` …) over an Inter (or SCP for URLs/codes) value, 1px `border` dividers. Its home is the footer bottom (the drawing sheet's corner), horizontal strip ≥ md, stacked on mobile; contact/event pages may use the boxed stack as an info card.
-11. **Scribed lineart**: the wireframe gear-bulb (and sibling blueprint drawings) as large, faint decorative art — stroke-only, `foreground` or `primary`, 4–6% opacity, on `card` bands (footer, feature panels), never behind body copy. Obtain the real vector from the merch/brand source files into `src/assets/brand/` (the mockups use a drawn approximation).
-12. **Labeled callouts**: leader line (1px, dot or arrow terminus) + SCP label — figure captions under framed media ("FIG. 01 — BIOHAZARD, 2023 SEASON"), detail annotations on heroes ("DETAIL A" style). `muted` color; captions may double as the image's visible credit.
+9. **Title block**: the engineering-drawing identity strip — bordered compartments, each an SCP uppercase label (`PROJECT:` / `ORGANIZATION:` / `URL:` …) over an Inter (or SCP for URLs/codes) value, 1px `border` dividers. Its home is the footer bottom (the drawing sheet's corner), horizontal strip ≥ md, stacked on mobile; contact/event pages may use the boxed stack as an info card.
+10. **Scribed lineart**: the wireframe gear-bulb (and sibling blueprint drawings) as large, faint decorative art — stroke-only, `foreground` or `primary`, 4–6% opacity, on `card` bands (footer, feature panels), never behind body copy. Obtain the real vector from the merch/brand source files into `src/assets/brand/` (the mockups use a drawn approximation).
+11. **Labeled callouts**: leader line (1px, dot or arrow terminus) + SCP label — figure captions under framed media ("FIG. 01 — BIOHAZARD, 2023 SEASON"), detail annotations on heroes ("DETAIL A" style). `muted` color; captions may double as the image's visible credit.
 
-**Register budget**: across grid, ticks, ruler, numerals, pools, marks, capsules, title block, lineart, and callouts, a viewport shows **at most 4 distinct devices**. If a new one enters a view, another leaves.
+### Hand markup register (the human layer)
+
+The engineer's markup drawn *over* the sheet — this is what keeps the machined language from feeling sterile. All strokes are deliberately imperfect (hand-drawn SVG paths: slight curve, open ends, small rotation), 2–3px, `stroke-linecap: round`. **Pill-shaped UI is banned** (reviewed and rejected): a circled word is a chalk oval, never a `border-radius: 999px` box.
+
+12. **Chalk ovals**: key words circled with a hand-drawn open ellipse — `foreground` white (chalk) in hero/photo contexts, `primary` (grease pencil) on the ground. The "Real ⬭Skills⬭. Real ⬭Robots⬭. Real ⬭Fun⬭." treatment; the tagline itself is sanctioned brand copy for heroes/CTAs. Tagline/display contexts only, one run per view.
+13. **Highlighter swipes**: a skewed translucent `primary` rectangle (25–35% alpha, ~-1.5° rotation, 2–3px radius) behind white key words — the marker-highlight alternative to `primary`-colored text. A heading uses colored text *or* a swipe, never both; verify the white-on-swipe contrast on `/styleguide`.
+14. **Chalk underlines**: one hand-drawn, slightly curved underline stroke beneath a heading (`primary`). Distinct from the machined 32px card rule, which stays perfectly straight — machined vs. hand is a deliberate contrast, never blended.
+15. **Sketch arrows**: one hand-drawn curved arrow per page, pointing at exactly one action or detail (e.g. "Become a sponsor"). `primary`, 2px.
+
+Motion note (§6 applies): hand-markup strokes may *draw on* as their entrance (stroke-dashoffset, once, ~500ms, reduced-motion disables) — the one sanctioned decorative animation, because it enacts the metaphor.
+
+**Register budget**: across all machined, scribed, and hand-markup devices (grid, ticks, ruler, numerals, pools, marks, title block, lineart, callouts, ovals, swipes, underlines, arrows), a viewport shows **at most 4 distinct devices**. If a new one enters a view, another leaves.
 
 Restraint rule: these are atmosphere, not decoration — if a device is noticeable before the content is, it's too loud. `section-tint` bands (§2 surfaces) count as a device for their boundary.
 
@@ -197,6 +207,7 @@ CSS-only (D3, D20). Motion confirms — it never decorates.
 | "SC2" in a heading; "Scstem" in prose | Full name (capitalized STEM); SC2 only in prose with the full name present |
 | Faking the logo: gear SVG + name in Inter | Real lockup assets: full-width on desktop chrome, square mark on mobile |
 | Filled dark-on-dark tier pills | SCP outline chips per §8 |
+| Pill-shaped UI (`border-radius: 999px` capsules) | Radius tokens only; circled words are hand-drawn chalk ovals (§2.12) |
 | 5 cards centered as 3+2 with a floating orphan | Grid math planned: intentional 2+3 |
 | Drop shadows, glows, hover-lift on pockets | Border warms + floor lifts one step; depth only goes down |
 | `alt="image"` / missing alt | Descriptive alt or explicit `alt=""` |

From c5df66dbe3e51b94dc74c95b2d74f93b8a21f3b5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 27 Aug 2026 17:30:23 +0000
Subject: [PATCH 10/12] Markup variation rules, annotation hand, inline
 underlines, unified radii

Per design review: every hand-markup device ships >=3 SVG path
variants (adjacent instances never match); highlighter swipes vary
rotation/inset/alpha; chalk underlines work inline under short phrases
as the sanctioned in-prose emphasis; sketch arrows may only target
handwritten annotation text (new Architects Daughter annotation face,
markup-only); machined/scribed layers stay perfectly geometric. Radius
scale unified to the one-end-mill system: 4/8/12, 16px and pills
retired.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DU6XwSGRUDZtz5DuXjzKnn
---
 DESIGN.md                | 19 +++++++++++--------
 plan/02-design-system.md |  2 +-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 19a7ec8..6485e4d 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -71,10 +71,10 @@ Rules:
 
 ### Signature motifs
 
-1. **Key-word emphasis**: display headings may color exactly one phrase in `primary` ("Robots are in Franklin County. **So are we.**"). Colored text only — no underlines/highlighter marks in headings.
+1. **Key-word emphasis**: display headings may emphasize exactly one phrase — either `primary`-colored text or a highlighter swipe (hand markup §13), never both, never more than one phrase. Link-style underlines never appear in headings.
 2. **Accent hairline**: heroes end with a 2px `primary` rule, full-bleed. Card titles may carry a 32px × 2px `primary` rule beneath.
 3. **Engineering grid** (replaces the legacy circuit-board texture): fine graph-paper grid (~24–28px cell, 1px `#FAFAFA` strokes) at 4–7% opacity, on heroes and section breaks and inside V2+V3 feature-pocket floors — never behind body copy, and **never on the page ground**: a page-level grid was tried and rejected in review (it competes with the pocket grid floors and dulls the recess effect). The ground stays smooth; its life comes from the atmosphere devices below, so the grid stays special where it appears. Optional **dimension-line ticks** (`primary` at ≤50%, SCP annotation) as rare garnish.
-4. **Framed media**: photo collages/feature media get a 2px `primary` border + `radius-xl` — the "team picture frame".
+4. **Framed media**: photo collages/feature media get a 2px `primary` border + `radius-lg` — the "team picture frame".
 
 ### Atmosphere layer
 
@@ -95,12 +95,14 @@ The blueprint devices printed *onto* the sheet. Each appears at most once per pa
 
 ### Hand markup register (the human layer)
 
-The engineer's markup drawn *over* the sheet — this is what keeps the machined language from feeling sterile. All strokes are deliberately imperfect (hand-drawn SVG paths: slight curve, open ends, small rotation), 2–3px, `stroke-linecap: round`. **Pill-shaped UI is banned** (reviewed and rejected): a circled word is a chalk oval, never a `border-radius: 999px` box.
+The engineer's markup drawn *over* the sheet — this is what keeps the machined language from feeling sterile. **The machined and scribed layers stay perfectly geometric everywhere; hand markup never earns more real estate than it has now — minor touches, not a style.** All strokes are deliberately imperfect (hand-drawn SVG paths: slight curve, open ends, small rotation), 2–3px, `stroke-linecap: round`. **Pill-shaped UI is banned** (reviewed and rejected): a circled word is a chalk oval, never a `border-radius: 999px` box.
+
+**Variation rule**: every markup device ships as a set of **at least 3 distinct SVG path variants** (implemented as primitives, e.g. `ChalkOval variant={1|2|3}`), further varied per-instance by small rotation/flip. Two adjacent instances never share a variant — identical "hand-drawn" marks read as a stamp and break the illusion. Swipes vary by rotation (±0.5–2°), inset, and alpha within their range.
 
 12. **Chalk ovals**: key words circled with a hand-drawn open ellipse — `foreground` white (chalk) in hero/photo contexts, `primary` (grease pencil) on the ground. The "Real ⬭Skills⬭. Real ⬭Robots⬭. Real ⬭Fun⬭." treatment; the tagline itself is sanctioned brand copy for heroes/CTAs. Tagline/display contexts only, one run per view.
-13. **Highlighter swipes**: a skewed translucent `primary` rectangle (25–35% alpha, ~-1.5° rotation, 2–3px radius) behind white key words — the marker-highlight alternative to `primary`-colored text. A heading uses colored text *or* a swipe, never both; verify the white-on-swipe contrast on `/styleguide`.
-14. **Chalk underlines**: one hand-drawn, slightly curved underline stroke beneath a heading (`primary`). Distinct from the machined 32px card rule, which stays perfectly straight — machined vs. hand is a deliberate contrast, never blended.
-15. **Sketch arrows**: one hand-drawn curved arrow per page, pointing at exactly one action or detail (e.g. "Become a sponsor"). `primary`, 2px.
+13. **Highlighter swipes**: a skewed translucent `primary` rectangle (25–35% alpha, ±0.5–2° rotation, 2–3px radius) behind white key words — the marker-highlight alternative to `primary`-colored text. A heading uses colored text *or* a swipe, never both; verify the white-on-swipe contrast on `/styleguide`.
+14. **Chalk underlines**: hand-drawn, slightly curved underline strokes (`primary`). Two uses: beneath a heading, and **inline within a sentence** under a short key phrase (≤3 words — e.g. "building the ~future of STEM~") as the sanctioned in-prose emphasis. Distinct from the machined 32px card rule, which stays perfectly straight — machined vs. hand is a deliberate contrast, never blended.
+15. **Sketch arrows**: one hand-drawn curved arrow per page. **An arrow's target is always handwritten annotation text (§3), never a regular-font element** — a sketched arrow pointing at typeset UI breaks the fiction. The annotation may itself be a link (e.g. the handwritten "Become a sponsor").
 
 Motion note (§6 applies): hand-markup strokes may *draw on* as their entrance (stroke-dashoffset, once, ~500ms, reduced-motion disables) — the one sanctioned decorative animation, because it enacts the metaphor.
 
@@ -117,6 +119,7 @@ Per Brand Guidelines: Orbitron for page headings/titles (avoid very long or smal
 | Display/headings | **Orbitron** (variable) | 500–700 | h1–h3 and eyebrow labels only. Never below h3 size, never italic, never long lines (≤ ~40 chars/line) — ration the display voice. |
 | UI & body | **Inter** (variable) | 400/500/600 | Everything else: body, h4–h6, nav, buttons, forms, captions |
 | Data voice | **Source Code Pro** | 400/600 | **Stats and numerals, countdowns, dates, spec labels** (ages chips, tier badges, "REF" annotations). The spec-sheet register of the build-document metaphor. |
+| Annotation hand | **Architects Daughter** | 400 | Hand-markup annotations only (≤5 words): sketch-arrow targets, margin notes, the handwritten link they point at. Never UI chrome, body copy, headings, or labels. |
 
 Fluid scale (clamp between 360px and 1440px viewports), defined as tokens:
 
@@ -141,7 +144,7 @@ Fluid scale (clamp between 360px and 1440px viewports), defined as tokens:
 
 - **Spacing**: 4px base scale. Component-internal 8–24px; between-component 24–48px.
 - **Section rhythm**: `py-16` (mobile) / `py-24` (≥ md), consistent on every section.
-- **Radius**: `radius-sm` 6px (badges, inputs), `radius-md` 8px (buttons), `radius-lg` 12px (cards/pockets), `radius-xl` 16px (framed media, feature panels).
+- **Radius — one end-mill**: three values, unified to the machining story. `radius-sm` **4px** (chips, spec labels, badges — stamped plates), `radius-md` **8px** (all controls: buttons, inputs, icon tiles), `radius-lg` **12px** (every cut feature: pockets, panels, framed media — one tool radius for everything machined). Nothing else; `16px` and pill radii are retired.
 - **Elevation**: there is none — depth goes *down*, not up (§2 pocket anatomy). No drop shadows anywhere; the inset pocket shadows are the only shadows in the system.
 
 ## 5. Layout & navigation
@@ -168,7 +171,7 @@ CSS-only (D3, D20). Motion confirms — it never decorates.
 
 - **Real photos of real students and robots** are the brand. Stock and unDraw illustrations retire wherever a photo can serve (recolor to tokens if one must stay temporarily).
 - Text over photos requires a scrim built from `background` (rgb(38 38 38)): gradient 100% at the text edge → ~20% opposite. **On mobile, heroes put text on solid ground below the photo** (photo fades into `background` via bottom gradient) — never gamble on scrims at small sizes.
-- Photo treatment: `radius-xl` framed in sections; full-bleed only in heroes. Consistent warm/neutral grading.
+- Photo treatment: `radius-lg` framed in sections; full-bleed only in heroes. Consistent warm/neutral grading.
 - Every image: honest `alt`; decorative pattern/grid SVGs `aria-hidden` with `alt=""`.
 - OG images (1200×630): photo + scrim + Orbitron title + lockup; one template, per-section variants.
 - **Logo usage** (Brand Guidelines): color lockup on light *and* dark; dark/light monochrome variants per background; never recolor, never set the name in another font as a substitute for the lockup where the lockup fits.
diff --git a/plan/02-design-system.md b/plan/02-design-system.md
index e71c260..59e7105 100644
--- a/plan/02-design-system.md
+++ b/plan/02-design-system.md
@@ -31,7 +31,7 @@
 
 ### 2. Fonts (§3)
 
-- Self-hosted: `@fontsource-variable/inter`, `@fontsource-variable/orbitron`, `@fontsource-variable/source-code-pro` (static @fontsource fallback for any without a variable axis). Latin subset only, `font-display: swap`. Source Code Pro is a first-class working face (stats, spec labels, chips — DESIGN.md §3), not an afterthought.
+- Self-hosted: `@fontsource-variable/inter`, `@fontsource-variable/orbitron`, `@fontsource-variable/source-code-pro`, `@fontsource/architects-daughter` (static @fontsource fallback for any without a variable axis). Latin subset only, `font-display: swap`. Source Code Pro is a first-class working face (stats, spec labels, chips — DESIGN.md §3); Architects Daughter is the annotation hand, markup-only, loaded lazily/subset aggressively since it renders ≤5 words per page.
 - `src/styles/fonts.ts` exports the two above-the-fold woff2 paths (Inter var, Orbitron var) for BaseLayout's `<link rel="preload">` (wired in Phase 05).
 
 ### 2b. Brand assets

From 12e5c6a535a37f61c8cb3c54d4cadc9f1cd13d4e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 27 Aug 2026 19:39:52 +0000
Subject: [PATCH 11/12] Switch implementation flow to GitHub stacked PRs

The overhaul lands as one gh-stack: this plan/DESIGN branch is the
bottom layer targeting staging, each phase is a branch stacked on the
previous phase's branch, and the whole stack cascade-merges into
staging at cutover - no long-running astro-rewrite branch, no manual
merge sequencing. Restack rules, per-layer CI/preview notes, and
cutover mechanics updated; stale radius-xl references in phase 02
cleaned up and hand-markup primitives added to its task list.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DU6XwSGRUDZtz5DuXjzKnn
---
 plan/00-overview.md           |  8 +++++---
 plan/01-foundation.md         |  6 +++---
 plan/02-design-system.md      |  9 +++++----
 plan/03-primitives.md         |  2 +-
 plan/04-content-model.md      |  2 +-
 plan/05-app-shell.md          |  2 +-
 plan/06-homepage.md           |  4 ++--
 plan/07-pages.md              |  2 +-
 plan/08-events.md             |  2 +-
 plan/09-assets-performance.md |  2 +-
 plan/10-seo.md                |  2 +-
 plan/11-cutover.md            | 11 ++++++-----
 12 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/plan/00-overview.md b/plan/00-overview.md
index e931caa..27251b8 100644
--- a/plan/00-overview.md
+++ b/plan/00-overview.md
@@ -5,8 +5,10 @@ This directory is the complete implementation plan for rewriting scstem.org from
 ## How to use this plan
 
 - Execute phases **in order**. Each phase file lists its prerequisites; do not start a phase whose prerequisites are unmet.
-- All implementation happens on the long-running branch **`astro-rewrite`** (created from `main` in Phase 01). Each phase is developed on a short-lived branch off `astro-rewrite` and merged into it via PR — one PR per phase, titled `overhaul: <phase name>`.
-- `staging` and `main` are untouched until Phase 11 (cutover). Cloudflare Pages gives `astro-rewrite` an automatic preview URL (`astro-rewrite.<project>.pages.dev`), which the existing `public/_headers` rules keep noindexed.
+- The overhaul lands as one **GitHub stacked PR** (https://github.github.com/gh-stack/). The stack's first branch is **`claude/website-overhaul-plan-38czl6`** (this plan + DESIGN.md), whose PR targets `staging`. Each phase is a **new branch stacked on the previous phase's branch** (`gs add overhaul/<NN>-<name>` with the gh-stack CLI, or plain `git switch -c` from the layer below): `claude/website-overhaul-plan-38czl6` ← `overhaul/01-foundation` ← `overhaul/02-design-system` ← … ← `overhaul/11-cutover`. One PR per layer, titled `overhaul: <phase name>`, each targeting the branch below it (`gs submit`, or set the PR base manually).
+- **Never merge layers individually or resequence merges by hand** — that's the point of the stack: merging a PR cascades every unmerged PR below it, bottom-up, and GitHub auto-rebases what remains. The whole stack lands into `staging` in one cascade at Phase 11.
+- **Review fixes on a lower layer**: commit on that layer's branch, then restack the branches above (`git rebase --update-refs` from the top of the stack, or the gh-stack tooling) and `gs push`/force-push-with-lease the rebased layers. Never let layers drift.
+- `staging` and `main` are untouched until Phase 11 (cutover). Cloudflare Pages gives every stack branch its own preview URL, kept noindexed by the existing `public/_headers` rules — **the topmost layer's preview is always the full-site preview** (each layer contains everything below it).
 - The old site lives in **`legacy/`** during the rewrite (moved there in Phase 01). It is the *reference* for content, copy, URLs, and behavior. **Never import from `legacy/`; never copy components.** Copy *content and intent*, rebuild the implementation.
 - Before every commit: `pnpm check && pnpm build` must pass. A phase is done when its acceptance criteria are all checked and CI is green.
 - When a phase makes a decision not covered here, record it in `docs/adr/NNNN-<slug>.md` and note it in the phase PR description.
@@ -50,7 +52,7 @@ This directory is the complete implementation plan for rewriting scstem.org from
 | D20 | Hero video kept but re-encoded to ≤3 MB with poster, `preload="none"`, `prefers-reduced-motion` respected. All motion is CSS-only; framer-motion/parallax/embla are gone. |
 | D21 | Analytics: GA4 via direct deferred gtag (fixes the current GTM-loader-with-GA4-id oddity) **plus** Cloudflare Web Analytics; tracking audit + event taxonomy in Phase 10. |
 | D22 | **Design nailed down up front, in the plan PR**: `DESIGN.md` is authored at the repo root alongside this plan, and the visual direction is reviewed with the owner via design mockups *before implementation begins*. Phase 02 implements the approved doc (tokens/fonts/themes); Phase 06's gate verifies the built homepage *conforms* to it. Bar: "start with great." |
-| D23 | Branch flow per "How to use this plan" above. |
+| D23 | **Stacked-PR flow** (revised from the original long-running-branch plan): the overhaul is one gh-stack of PRs — plan branch at the bottom targeting `staging`, one stacked layer per phase, cascade-merged at cutover. See "How to use this plan". |
 | D24 | Toolchain split (oxc-first hybrid): oxlint + oxfmt own `.ts/.js/.mjs/.cjs/.json/.jsonc/.css`; ESLint + Prettier own `.astro` and `.md`. When oxlint/oxfmt gain Astro support, migration = delete the ESLint/Prettier half (seam documented in `docs/adr/`). |
 | D25 | **No private/internal content on the main domain.** The legacy `_headers` per-path noindex rules (`/team/*`, `/image/*`, `/video/*`) are dropped entirely; only the preview/staging host rules (`*.pages.dev`, `staging.scstem.org`) carry over. Anything private lives off-domain. Image/video indexing is thereby enabled (helps image SEO). |
 | D26 | **Design review outcomes (owner-settled, 2026-08, recorded in DESIGN.md):** brand-literal recessed surfaces (`#262626` page, `#171717` "machined pocket" cards; V2+V3 grid-floor variant for feature moments); AAA text ramp (`#FAFAFA`/`#D4D4D4`, `#A3A3A3` captions-only); fill-vs-text token pairs for all brand accents; Science Blue = informational on dark and reserved light-theme primary; Source Code Pro owns numerals/spec labels; engineering-grid + dimension-tick motif replaces the circuit pattern; sentence-case headings; real logo lockups in chrome (full-width desktop, square mark mobile); sticky condensed header; Programs dropdown backed by a new `/programs` hub page; full-height mobile menu sheet; mobile heroes put text on solid ground below the photo. |
diff --git a/plan/01-foundation.md b/plan/01-foundation.md
index aac451c..0096b33 100644
--- a/plan/01-foundation.md
+++ b/plan/01-foundation.md
@@ -1,7 +1,7 @@
 # Phase 01 — Foundation: branch, toolchain, scaffold, agent config, CI
 
-**Prerequisites:** none (first phase).
-**Branch:** create `astro-rewrite` from latest `main`; do this phase on `overhaul/01-foundation` off it.
+**Prerequisites:** none (first implementation phase).
+**Stack layer:** `overhaul/01-foundation`, stacked on `claude/website-overhaul-plan-38czl6` (the plan/DESIGN branch — bottom of the stack, targets `staging`). PR targets that branch (D23).
 
 ## Objective
 
@@ -100,7 +100,7 @@ An empty-but-real Astro project at the repo root with the complete final toolcha
 
 ### 6. CI (D14)
 
-- `.github/workflows/ci.yml` — on `pull_request` and pushes to `astro-rewrite`:
+- `.github/workflows/ci.yml` — on `pull_request` (every stack layer's PR gets checks; a stacked PR's diff is only that layer's changes, which keeps reviews and CI focused):
   1. Checkout; install mise (`jdx/mise-action`) → tools from `mise.toml`/`mise.lock`.
   2. `pnpm install --frozen-lockfile`.
   3. `pnpm check`.
diff --git a/plan/02-design-system.md b/plan/02-design-system.md
index 59e7105..e580a8a 100644
--- a/plan/02-design-system.md
+++ b/plan/02-design-system.md
@@ -2,7 +2,7 @@
 
 **Prerequisites:** Phase 01. `DESIGN.md` already exists at the repo root — it was authored and owner-reviewed as part of the plan PR, alongside visual mockups. **This phase implements it; it does not redesign.** If implementation exposes a gap or contradiction in DESIGN.md, follow its §11 change process (small PR to the doc, owner review) rather than improvising.
 
-**Branch:** `overhaul/02-design-system` off `astro-rewrite`.
+**Stack layer:** `overhaul/02-design-system`, stacked on `overhaul/01-foundation` (D23).
 
 ## Objective
 
@@ -21,7 +21,7 @@
 - Tailwind v4 `@theme` block implementing DESIGN.md exactly:
   - Color tokens from §2 as `--color-*` (so `bg-background`, `text-muted-foreground`, `border-border`, etc. exist as utilities).
   - Fluid type scale from §3 as `--text-*` tokens with `clamp()` values and paired line-heights.
-  - Radius tokens from §4 (`--radius-sm/md/lg/xl`), `--breakpoint-3xl: 120rem`.
+  - Radius tokens from §4 (`--radius-sm/md/lg` — the 4/8/12 "one end-mill" scale, nothing else), `--breakpoint-3xl: 120rem`.
   - Motion tokens from §6 (`--duration-micro/ui/entrance`, easings).
   - Font family tokens (§3) wired to the self-hosted fonts below.
 - `:root { color-scheme: dark }`; body `bg-background text-foreground`.
@@ -44,8 +44,9 @@
 Implement DESIGN.md §2 "signature motifs" as reusable pieces so pages can't reinvent them:
 - `.accent-rule` (2px primary hairline) + hero-bottom full-bleed variant.
 - Key-word emphasis: documented pattern (`<span class="text-primary">` inside headings) — note in styleguide, no component needed.
-- Circuit texture: one `Pattern.astro` background component (≤ 4% opacity, `aria-hidden`, positioned behind hero/section-break content only) using the existing pattern asset re-exported to `src/assets/brand/`.
-- Framed-media treatment: `.media-frame` utility (2px primary border, `radius-xl`).
+- Engineering grid: one `Pattern.astro` background component (§2.3 opacities, `aria-hidden`, heroes/section breaks/feature-pocket floors only — never the page ground).
+- Framed-media treatment: `.media-frame` utility (2px primary border, `radius-lg`).
+- Hand-markup primitives (§ hand markup register): `ChalkOval`, `ChalkUnderline`, `SketchArrow` (each with ≥3 path variants + variant prop), highlighter-swipe utility, and the atmosphere/scribed pieces (`GhostNumeral`, `RulerDivider`, `RegistrationMarks`, `TitleBlock`) — all demoed on `/styleguide`.
 
 ### 4. `/styleguide` page
 
diff --git a/plan/03-primitives.md b/plan/03-primitives.md
index 98033f6..b4f35cd 100644
--- a/plan/03-primitives.md
+++ b/plan/03-primitives.md
@@ -1,7 +1,7 @@
 # Phase 03 — UI primitives + shadcn-astro agent skill
 
 **Prerequisites:** Phase 02 (tokens exist).
-**Branch:** `overhaul/03-primitives` off `astro-rewrite`.
+**Stack layer:** `overhaul/03-primitives`, stacked on `overhaul/02-design-system` (D23).
 
 ## Objective
 
diff --git a/plan/04-content-model.md b/plan/04-content-model.md
index 8e38edf..0b44789 100644
--- a/plan/04-content-model.md
+++ b/plan/04-content-model.md
@@ -1,7 +1,7 @@
 # Phase 04 — Content model: collections, schemas, data migration
 
 **Prerequisites:** Phase 01 (Phase 02/03 not strictly required; can run in parallel with 03).
-**Branch:** `overhaul/04-content-model` off `astro-rewrite`.
+**Stack layer:** `overhaul/04-content-model`, stacked on `overhaul/03-primitives` (D23). (Content work has no code dependency on 02/03, but the stack is linear — landing order is fixed even when work is done in parallel.)
 
 ## Objective
 
diff --git a/plan/05-app-shell.md b/plan/05-app-shell.md
index 91dc830..5219e15 100644
--- a/plan/05-app-shell.md
+++ b/plan/05-app-shell.md
@@ -1,7 +1,7 @@
 # Phase 05 — App shell: BaseLayout, SEO component, Navbar, Footer, 404
 
 **Prerequisites:** Phases 02, 03, 04.
-**Branch:** `overhaul/05-app-shell` off `astro-rewrite`.
+**Stack layer:** `overhaul/05-app-shell`, stacked on `overhaul/04-content-model` (D23).
 
 ## Objective
 
diff --git a/plan/06-homepage.md b/plan/06-homepage.md
index 1f15131..9f10fc1 100644
--- a/plan/06-homepage.md
+++ b/plan/06-homepage.md
@@ -1,7 +1,7 @@
 # Phase 06 — Homepage + visual review gate
 
 **Prerequisites:** Phase 05.
-**Branch:** `overhaul/06-homepage` off `astro-rewrite`.
+**Stack layer:** `overhaul/06-homepage`, stacked on `overhaul/05-app-shell` (D23).
 **Gate:** ⛔ **Owner sign-off required before Phase 07 starts.** The design itself was settled up front (DESIGN.md + owner-reviewed mockups shipped with the plan — D22), so this gate is a **conformance check**: does the built homepage match the approved design, and does it hold up on real devices?
 
 ## Objective
@@ -32,7 +32,7 @@ Built from primitives; these are the reusable section vocabulary for all later p
 
 ### 3. Conformance review (the gate)
 
-1. Merge-ready PR → CF Pages preview URL on `astro-rewrite` after merge, or the PR's own preview.
+1. Review-ready stack layer → this branch's own CF Pages preview URL (it contains every layer below it, so it previews the full site so far).
 2. Produce a review pack for the owner: full-page screenshots at 360px, 768px, 1440px, side-by-side with the **approved mockups** and with production scstem.org (use the pre-installed Chromium/Playwright).
 3. Owner reviews for conformance + real-device feel. Deviations from DESIGN.md are bugs — fix them; genuine design changes discovered here go through DESIGN.md §11 (doc PR first). Repeat until explicit sign-off.
 4. Record sign-off: check the box below, note date + iteration count in the PR.
diff --git a/plan/07-pages.md b/plan/07-pages.md
index 2d59b0d..601fc2c 100644
--- a/plan/07-pages.md
+++ b/plan/07-pages.md
@@ -1,7 +1,7 @@
 # Phase 07 — Remaining pages
 
 **Prerequisites:** Phase 06 **including owner sign-off**.
-**Branch:** one branch per group is fine (`overhaul/07a-…`), all off `astro-rewrite`. Groups below are independent and can run as parallel agents.
+**Stack layers:** the groups below may land as sub-layers `overhaul/07a-…` through `overhaul/07d-…`, stacked in group order on `overhaul/06-homepage` (D23) — or as one `overhaul/07-pages` layer with one commit series per group. Groups are content-independent and can be *built* by parallel agents (worktrees), but they *land* in stack order.
 
 ## Objective
 
diff --git a/plan/08-events.md b/plan/08-events.md
index e48f98e..8a62595 100644
--- a/plan/08-events.md
+++ b/plan/08-events.md
@@ -1,7 +1,7 @@
 # Phase 08 — Event landing pattern: /openhouse and /programs/frc/kickoff
 
 **Prerequisites:** Phases 06, 07 (uses Hero/Section/FeatureGrid/FaqList vocabulary).
-**Branch:** `overhaul/08-events` off `astro-rewrite`.
+**Stack layer:** `overhaul/08-events`, stacked on the last Phase 07 layer (D23).
 
 ## Objective
 
diff --git a/plan/09-assets-performance.md b/plan/09-assets-performance.md
index 9dca56b..c64d896 100644
--- a/plan/09-assets-performance.md
+++ b/plan/09-assets-performance.md
@@ -1,7 +1,7 @@
 # Phase 09 — Assets & performance: media pipeline, budgets in CI
 
 **Prerequisites:** Phases 06–08 (all pages exist; this phase optimizes what they serve).
-**Branch:** `overhaul/09-assets-performance` off `astro-rewrite`.
+**Stack layer:** `overhaul/09-assets-performance`, stacked on `overhaul/08-events` (D23).
 
 ## Objective
 
diff --git a/plan/10-seo.md b/plan/10-seo.md
index 0c85d7a..b142daf 100644
--- a/plan/10-seo.md
+++ b/plan/10-seo.md
@@ -1,7 +1,7 @@
 # Phase 10 — SEO completion, AI SEO, analytics
 
 **Prerequisites:** Phases 05–09 (all pages + budgets in place).
-**Branch:** `overhaul/10-seo` off `astro-rewrite`.
+**Stack layer:** `overhaul/10-seo`, stacked on `overhaul/09-assets-performance` (D23).
 
 ## Objective
 
diff --git a/plan/11-cutover.md b/plan/11-cutover.md
index 0afa3cc..e58ab49 100644
--- a/plan/11-cutover.md
+++ b/plan/11-cutover.md
@@ -1,11 +1,12 @@
 # Phase 11 — Cutover: parity verification, staging QA, launch, cleanup
 
-**Prerequisites:** Phases 01–10 all merged to `astro-rewrite`, CI + Lighthouse gates green.
+**Prerequisites:** all Phase 01–10 stack layers pushed, reviewed, and green (CI + Lighthouse) — the full stack intact from `claude/website-overhaul-plan-38czl6` to the top layer, nothing merged yet (D23).
+**Stack layer:** `overhaul/11-cutover` (top of the stack), stacked on `overhaul/10-seo`.
 **Gate:** ⛔ Owner approves staging before merge to `main`. This phase touches production.
 
 ## Tasks
 
-### 1. Pre-flight parity verification (on `astro-rewrite` preview)
+### 1. Pre-flight parity verification (on the top-of-stack preview — it contains every layer)
 
 - **URL parity**: script or manual table — every legacy route returns 200 on the new build at the identical path (`/`, `/about`, `/contact`, `/donate`, `/get-involved`, `/openhouse`, `/sponsors`, `/programs/fll`, `/programs/frc`, `/programs/frc/robots`, `/programs/frc/kickoff`, `/calendar/frc`, `/calendar/sc2`, 404 behavior). Every `_redirects` rule verified.
 - **Copy parity spot-check**: owner-visible text diff per page against production (intentional changes were logged in phase PRs — compile them into one summary for the owner).
@@ -17,16 +18,16 @@
 - Build command: `pnpm build` (or `pnpm install --frozen-lockfile && pnpm build` per Pages' pnpm handling — it respects `packageManager`); output directory: `dist` (was `build`); Node version env var matching the mise pin.
 - Confirm preview deployments still noindexed (`_headers` covers `*.pages.dev` + `staging.scstem.org`; per D25 those are the only noindex rules left — `/team/*`, `/image/*`, `/video/*` are gone deliberately).
 - Env vars: set `PUBLIC_TURNSTILE_SITE_KEY` (real key for production, test key acceptable for previews), confirm `SLACK_FORM_POST_GENERIC` secret still bound for Functions, CF Web Analytics token if env-injected.
-- Apply settings to a **preview first**: trigger a deploy of `astro-rewrite` with the new settings and verify before touching branch mappings.
+- Apply settings to a **preview first**: trigger a deploy of the top stack branch with the new settings and verify before touching branch mappings.
 
 ### 3. Staging soak
 
-- Merge `astro-rewrite` → `staging`. Full QA on https://staging.scstem.org:
+- **Land the stack**: merge the top-of-stack PR — gh-stack cascades every unmerged PR below it, bottom-up, into `staging` in one action. Never merge layers individually or hand-sequence; the cascade *is* the merge plan. Full QA on https://staging.scstem.org:
   - Device pass: physical phone (small Android/iPhone), tablet, desktop; keyboard-only pass; screen-reader smoke (VoiceOver/NVDA on nav + form).
   - Lighthouse against staging (real CF serving): budgets hold.
   - Forms with production-mode Turnstile.
   - Analytics: confirm staging does NOT report (hostname guard), using GA DebugView.
-- Fix-forward on `astro-rewrite` → re-merge as needed.
+- Fix-forward: before the cascade, fixes land on the layer they belong to (restack above per D23); after the cascade, fixes are normal PRs to `staging`.
 - ⛔ **Owner sign-off on staging.**
 
 ### 4. Launch

From 7c5fcd3cdd79cd7cba71962051cc134b44c0a7e6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 27 Aug 2026 19:41:37 +0000
Subject: [PATCH 12/12] Reference PR #14 as the bottom of the stack

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DU6XwSGRUDZtz5DuXjzKnn
---
 plan/00-overview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plan/00-overview.md b/plan/00-overview.md
index 27251b8..f30b4c8 100644
--- a/plan/00-overview.md
+++ b/plan/00-overview.md
@@ -5,7 +5,7 @@ This directory is the complete implementation plan for rewriting scstem.org from
 ## How to use this plan
 
 - Execute phases **in order**. Each phase file lists its prerequisites; do not start a phase whose prerequisites are unmet.
-- The overhaul lands as one **GitHub stacked PR** (https://github.github.com/gh-stack/). The stack's first branch is **`claude/website-overhaul-plan-38czl6`** (this plan + DESIGN.md), whose PR targets `staging`. Each phase is a **new branch stacked on the previous phase's branch** (`gs add overhaul/<NN>-<name>` with the gh-stack CLI, or plain `git switch -c` from the layer below): `claude/website-overhaul-plan-38czl6` ← `overhaul/01-foundation` ← `overhaul/02-design-system` ← … ← `overhaul/11-cutover`. One PR per layer, titled `overhaul: <phase name>`, each targeting the branch below it (`gs submit`, or set the PR base manually).
+- The overhaul lands as one **GitHub stacked PR** (https://github.github.com/gh-stack/). The stack's first branch is **`claude/website-overhaul-plan-38czl6`** (this plan + DESIGN.md) — its PR is **[#14](https://github.com/SCSTEM/scstem.org/pull/14)**, the bottom of the stack. Each phase is a **new branch stacked on the previous phase's branch** (`gs add overhaul/<NN>-<name>` with the gh-stack CLI, or plain `git switch -c` from the layer below): `claude/website-overhaul-plan-38czl6` ← `overhaul/01-foundation` ← `overhaul/02-design-system` ← … ← `overhaul/11-cutover`. One PR per layer, titled `overhaul: <phase name>`, each targeting the branch below it (`gs submit`, or set the PR base manually).
 - **Never merge layers individually or resequence merges by hand** — that's the point of the stack: merging a PR cascades every unmerged PR below it, bottom-up, and GitHub auto-rebases what remains. The whole stack lands into `staging` in one cascade at Phase 11.
 - **Review fixes on a lower layer**: commit on that layer's branch, then restack the branches above (`git rebase --update-refs` from the top of the stack, or the gh-stack tooling) and `gs push`/force-push-with-lease the rebased layers. Never let layers drift.
 - `staging` and `main` are untouched until Phase 11 (cutover). Cloudflare Pages gives every stack branch its own preview URL, kept noindexed by the existing `public/_headers` rules — **the topmost layer's preview is always the full-site preview** (each layer contains everything below it).