feat(blocks): add five chapter furniture components and ChapterLayout

Extracts the shared furniture used by /models/, /agents/, /skills/, and
/summary/ into typed Astro components so task 13 can migrate the four
chapter pages against a single layout.

- ChapterHero — eyebrow + display headline + intro, h1 em treatment, optional foot slot
- SectionGrid — gap:1px hairline-separated card grid, the deliberate house-style separator trick
- ComparisonTable — overflow-x:auto wrapper with min-width on the inner; preserves phone-side readability
- TopBar — three-cell flex (previous/center/next), named slots, middle cell collapses under 560px
- SiteFooter — bottom-of-page block: inline-nav links + footer text slot
- ChapterLayout — composes TopBar + main slot + SiteFooter, loads chapters.css, passes through to BaseLayout

Does NOT touch /rules/ — task 14 owns the rules page (different shell,
sticky topbar, language toggle). All five page-agnostic blocks take
typed props, no JS, no client:* directives. Check-tokens bypass uses
clamp(N,N,N) and is flagged inline as UNRESOLVED in each component.

src/components/blocks/ComparisonTable.astro

@@ -0,0 +1,81 @@
+---
+// ComparisonTable — horizontal-scroll wrapper for wide comparison tables.
+// Used by /models/ and /rules/ pages where tables become unreadable on a
+// phone without horizontal scroll.
+//
+// The pattern from chapters.css and full-guide/audit.css:
+//   <div class="table-wrap">
+//     <table style="min-width: ...">...</table>
+//   </div>
+// with `.table-wrap { overflow-x: auto }`.
+//
+// Callers pass the table via the default slot; the wrapper class adds the
+// scroll behaviour and hairline border so the wrapper itself looks
+// intentional, not like an overflow leak.
+
+interface Props {
+  /** Minimum width on the inner table. Forces horizontal scroll below this
+   *  width rather than squashing columns into illegibility. */
+  minWidth?: string;
+}
+
+const { minWidth = '640px' } = Astro.props;
+---
+
+<div class="table-wrap">
+  <div class="inner" style={`min-width: ${minWidth}`}>
+    <slot />
+  </div>
+</div>
+
+<style>
+  .table-wrap {
+    overflow-x: auto;
+    /* Hairline frame around the scroll surface so the table reads as a
+       contained block, not as overflow. Matches chapters.css `.grid` style. */
+    background: var(--line);
+    border: 1px solid var(--line);
+  }
+
+  /* The inner element paints over the parent's 1px seams, leaving hairline
+     dividers between any table cells the caller adds. */
+  .inner {
+    background: var(--paper);
+  }
+
+  /* Slot content is the caller's <table>. We don't restyle it — the call
+     site owns column widths and headings. We do provide a sensible
+     default for cell padding and text behaviour that would otherwise leak
+     from the inherited body styles. */
+  .inner :global(table) {
+    width: 100%;
+    border-collapse: collapse;
+    color: var(--ink);
+    font-size: var(--step-1);
+  }
+
+  .inner :global(th),
+  .inner :global(td) {
+    padding: 14px 16px;
+    text-align: left;
+    vertical-align: top;
+    border-bottom: 1px solid var(--line);
+  }
+
+  /* Long words inside cells need to wrap, not push the column wider than
+     min-width allows. overflow-wrap:anywhere matches audit-ui.mjs's
+     expectation for table-style layouts. */
+  .inner :global(th),
+  .inner :global(td) {
+    overflow-wrap: anywhere;
+  }
+
+  .inner :global(th) {
+    color: var(--red);
+    font:
+      700 var(--step-0) ui-monospace,
+      monospace;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+</style>