docs: add .agents workspace and the Astro refactor plan

Adds the agent-facing workspace and a 20-task plan for migrating the site
to Astro. Nothing here implements the refactor; these are briefs, rules and
templates that the task agents read.

- .agents/ holds context, rules, checklists, skills, specialist agents,
  component/page/config templates and gate scripts. It is vendor-neutral so
  MiniMax, Gemini and Codex can all read it; CLAUDE.md just points at
  AGENTS.md.
- .husky/ plus .lintstagedrc.json wire the three gate tiers. gate.sh locks on
  the shared git-common-dir so parallel worktrees serialise, and guards the
  assertion count in scripts/verify.mjs against a coverage drop.
- plans/astro-refactor/ carries the phase graph, per-task briefs and the
  model-routing recommendation.

These files must be tracked before fanning out: a worktree only checks out
tracked files, so an untracked plan is invisible to every agent working in one.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

.agents/templates/pages/chapter.astro

@@ -0,0 +1,61 @@
+---
+// Chapter page template — for the numbered chapters (models, agents, skills,
+// rules). These ship ZERO JavaScript today and must continue to.
+//
+// Copy to src/pages/<slug>.astro. The route must match the existing URL
+// exactly, trailing slash included.
+
+import ChapterLayout from '../layouts/ChapterLayout.astro';
+import GridGroup from '../components/blocks/GridGroup.astro';
+import StaticBlock from '../components/blocks/StaticBlock.astro';
+import { getEntry } from 'astro:content';
+
+// Content comes from a collection, never hard-coded in the page.
+// Both `en` and `pt` are required by the schema.
+const chapter = await getEntry('chapters', 'models');
+const lang = 'en'; // TODO: wire to the language toggle decision (task 03)
+---
+
+<ChapterLayout
+  number={chapter.data.number}
+  title={chapter.data.title[lang]}
+  description={chapter.data.description[lang]}
+>
+  <section class="hero">
+    <p class="eyebrow">{chapter.data.eyebrow[lang]}</p>
+    <h1 set:html={chapter.data.heading[lang]} />
+    <p class="lede">{chapter.data.lede[lang]}</p>
+  </section>
+
+  <GridGroup label="Chapter sections" columns={3}>
+    {chapter.data.sections.map((section) => (
+      <StaticBlock
+        eyebrow={section.eyebrow[lang]}
+        title={section.title[lang]}
+        body={section.body[lang]}
+      />
+    ))}
+  </GridGroup>
+</ChapterLayout>
+
+<style>
+  /* Page-level layout only. Anything reusable belongs in a component. */
+  .hero { max-width: 780px; padding: clamp(75px, 12vh, 145px) 0 85px; }
+
+  h1 {
+    margin: 16px 0 24px;
+    font-size: var(--step-display);
+    line-height: .86;
+    letter-spacing: -.08em;
+  }
+
+  /* Georgia is a real system font and DOES render — unlike Manrope/DM Mono.
+     See .agents/context/design-system.md */
+  h1 :global(em) {
+    color: var(--blue);
+    font-family: Georgia, serif;
+    font-weight: 400;
+  }
+
+  .lede { max-width: 570px; color: var(--muted); line-height: 1.65; }
+</style>

.agents/templates/pages/interactive.astro

@@ -0,0 +1,45 @@
+---
+// Interactive page template — for pages that genuinely need client-side
+// behaviour (the full guide, the review desk).
+//
+// The page itself is still server-rendered. Only the islands hydrate.
+// If you are copying this for a page that has no interaction, use
+// chapter.astro instead.
+
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Island from '../components/islands/Island.astro';
+import { getCollection } from 'astro:content';
+
+const entries = await getCollection('guide');
+const lang = 'en'; // TODO: wire to the language toggle decision (task 03)
+
+const items = entries.map((entry) => ({
+  id: entry.id,
+  label: entry.data.title[lang],
+  body: entry.data.copy[lang],
+}));
+---
+
+<BaseLayout title="Full field guide" description="TODO">
+  <!-- Static content is server-rendered. No hydration cost. -->
+  <section class="hero">
+    <p class="eyebrow">The full guide</p>
+    <h1>Ship the <em>system.</em></h1>
+  </section>
+
+  <!--
+    client:visible, not client:load — this is below the fold and the page must
+    stay interactive-free until it matters. Justification belongs in the PR:
+    "tab panel requires click-driven state; no server equivalent."
+  -->
+  <Island client:visible items={items} />
+
+  <!-- More static content after the island. Islands are leaves, not wrappers. -->
+  <slot />
+</BaseLayout>
+
+<style>
+  .hero { max-width: 780px; padding: clamp(75px, 12vh, 145px) 0 85px; }
+  h1 { font-size: var(--step-display); line-height: .86; letter-spacing: -.08em; }
+  h1 em { color: var(--blue); font-family: Georgia, serif; font-weight: 400; }
+</style>