feat: build step 1 — scaffold, layout, header, footer, SEO; zero JavaScript

Build order step 1 (docs/01): scaffold, tokens, base layout, header, footer, SEO component, plus a temporary /type-scale/ proof sheet that step 2 deletes. THE FONTS WERE NEVER ON DISK. global.css declared six @font-face rules pointing at /fonts/*.woff2 and public/fonts/ did not exist, so every face had been silently falling back to Georgia and the system sans. Six cuts committed, 123,804 bytes, SIL OFL 1.1, provenance in docs/reference/fonts-provenance.md. ?v=1 on every URL because the deploy script serves them immutable for a year. ZERO JAVASCRIPT. The reveal was an inline IntersectionObserver in <head>; docs/05 specifies script-src 'self' with no unsafe-inline, so the only script on the site was the one thing the site's own CSP would refuse to execute. Replaced with animation-timeline: view() behind @supports. 0 script tags and 0 .js files in dist. The infinity mark is lifted verbatim from the deployed site's own smlMark loading thumbnail, not redrawn (Q32 asks whether a canonical vector exists). The proof sheet computes its contrast table from tokens.css rather than restating docs/02 — all eleven ratios reproduce the measured table exactly. Register: Canadian Tax Foundation added (§4, R10 widened); Q30 closed — SML Company Ltd is federally incorporated under the CBCA, and the footer publishes neither that nor the place of business; Q31 closed — Plausible, on EU-only data residency (D15 amended). ROLE constants added for "Director of Firm Operations" and "active litigation exposure" so step 3 does not hand-type them. Lighthouse unavailability now stated in six places rather than left as a control that had silently stopped existing (§7, R11). Both review agents ran twice. The second pass found four defects in the first pass's fixes, including the minifier bug written back into its own fix and a colour-alone repair that used the banned gold-on- cream pairing at 2.10:1. Measured in headless Chrome at thirteen widths with a seventh nav item injected: 0 overflow, 0 tap targets under 44x44, 0 focus-order inversions, state indicators at 12.29:1, 755 words of body text with no JavaScript. Opened: Q32-Q37. Closed: Q30, Q31. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012XquaEq4BgWMCwUqLEyNkF
2026-08-26 15:57:02 -04:00
parent 8f1df2c27c
commit 8134709548
33 changed files with 2575 additions and 147 deletions
@@ -0,0 +1,79 @@
+---
+/**
+ * The page shell. Every route renders through this.
+ *
+ * Metadata is not optional and not a prop this layout can default: it forwards
+ * whatever it is given straight to SEO.astro, which throws if the title or
+ * description is out of the range docs/04-seo-spec.md sets.
+ */
+import '../styles/global.css';
+import type { Props as SeoProps } from '../components/SEO.astro';
+import SEO from '../components/SEO.astro';
+import SiteHeader from '../components/SiteHeader.astro';
+import SiteFooter from '../components/SiteFooter.astro';
+import { SITE } from '../data/site';
+
+export type Props = SeoProps;
+
+// SITE.locale is `en_CA` — Open Graph's underscore form. The lang attribute
+// takes the BCP 47 hyphen form. One source, two spellings, no second constant.
+const lang = SITE.locale.replace('_', '-');
+---
+
+<!doctype html>
+<html lang={lang}>
+  <head>
+    <SEO {...Astro.props} />
+
+    {
+      /* .ico first for clients that ignore the SVG, and because some crawlers
+        request /favicon.ico at the root regardless of what is declared here. */
+    }
+    <link rel="icon" href="/favicon.ico" sizes="48x48" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+
+    {
+      /* Only the two faces used above the fold, per docs/02. Fonts are always
+        fetched in CORS mode, so a preload without `crossorigin` is a second,
+        wasted request rather than a warmed cache. */
+    }
+    <link
+      rel="preload"
+      href="/fonts/instrument-serif-latin-400-normal.woff2?v=1"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="/fonts/geist-latin-wght-normal.woff2?v=1"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    {
+      /* No script tag. Not "no framework", not "minimal JS" — none.
+
+        The reveal used to be an inline IntersectionObserver here. It ran before
+        first paint so nothing flashed, and it took its own class back off if
+        anything threw. It was still wrong: docs/05-backend-spec.md specifies
+        `script-src 'self'` with no `unsafe-inline`, so the single script on the
+        site was the one thing the site's own CSP would refuse to execute — and
+        a per-build hash drifts from the policy that is supposed to pin it.
+
+        `animation-timeline: view()` in global.css does the same job in CSS. See
+        the Reveal block there for why the @supports gate is load-bearing. */
+    }
+  </head>
+
+  <body>
+    <a class="skip-link" href="#main">Skip to content</a>
+    <SiteHeader />
+    <main id="main" tabindex="-1">
+      <slot />
+    </main>
+    <SiteFooter />
+  </body>
+</html>