fix: navigation blink root-caused — defer search-client.js (was parser-blocking mid-body), npm run demo serves the production build through the tunnel; DESIGN.md documents the VT removal + font-swap decision

DESIGN.md

@@ -45,6 +45,16 @@ Type scale — the ONLY font sizes in the codebase (no ad-hoc rem values):
 
 Always end `font-family` with a generic (`sans-serif`) — lint requirement.
 
+Font loading (decided after the navigation-blink incident): self-hosted latin
+woff2, preloaded in `Base.astro`, `font-display: swap` + metric-matched Arial
+fallbacks for BOTH families (`Inter Fallback`, `Space Grotesk Fallback` —
+size-adjust/ascent/descent computed from the real font metrics, capsize
+method). Never `optional`: its ~100ms window loses to per-navigation
+revalidation (dev/preview serve `Cache-Control: no-cache`), which randomly
+committed whole pageviews to Arial — the "fonts flash between navigations"
+bug. With swap + matched metrics every page converges on brand fonts and the
+swap is layout-neutral.
+
 ## Spacing scale (fluid; mobile ≈ min, desktop ≈ max)
 
 | Token | Value | Use |
@@ -122,6 +132,12 @@ Rules:
 - ALL `animation`/`transition` declarations live inside the single
   `@media (prefers-reduced-motion: no-preference)` block at the end of
   global.css; the `reduce` block additionally force-disables everything.
+- NO cross-document view transitions (`@view-transition`). The root crossfade
+  snapshots the incoming page at its first render opportunity — on slow
+  networks that is a half-parsed page, so every navigation read as a
+  full-page blink (the diagnosed symptom); scrolled→top navigations crossfade
+  two unrelated frames even when it works. Navigation feel comes from static
+  HTML + Astro prefetch, not from animating the swap.
 - Animate `transform`/`opacity` only (compositor-only); never
   background-position/box-shadow in keyframes. No `will-change`. No
   `filter: blur` on large layers and no `background-attachment: fixed`
@@ -276,6 +292,15 @@ inventing a section order. The navy band is reserved for `/` and `/login`.
   caps, aria-hidden; 26px Galaxy) ABOVE the label — never instead of it.
   Glyphs are wayfinding, not decoration.
 
+## Serving the demo
+
+Phone/tunnel demos run the **production build**: `npm run demo`
+(= `astro build && astro preview`, same port 4321 so the tunnel URL keeps
+working). `astro dev` through the tunnel adds HMR + dev-toolbar module
+traffic and serves everything `no-cache` — every navigation re-negotiates
+assets over the tunnel, which reads as blinking/slow paints that do NOT
+exist in the built site. Dev mode is for local editing only.
+
 ## Do not
 
 - No new hues, tints, or grays — derive via `color-mix` from brand tokens only.
@@ -283,7 +308,11 @@ inventing a section order. The navy band is reserved for `/` and `/login`.
   Typography); headline weight stays 500 (brand D.3.4).
 - No font sizes outside the type-scale tokens; no ad-hoc spacing/shadow/radius.
 - No animation/transition outside the `no-preference` block; no JS motion;
-  no transition durations/easings outside `--dur`/`--ease`.
+  no transition durations/easings outside `--dur`/`--ease`; no
+  `@view-transition` (see Motion policy).
+- No parser-blocking `<script>` in the body — enhancement scripts are
+  `defer`/`type="module"` (a sync script stalls rendering below the header
+  on every navigation).
 - No dependencies/frameworks (CSS or JS). No removal of mock disclosure at
   interaction points. No phase banner — do not reintroduce it.
 - No Cherenkov outside: primary CTA, flash, hero subtitle, logo cluster