diff --git a/.gitignore b/.gitignore
index c398cc9..c16fcbc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -51,3 +51,4 @@ next-env.d.ts
 
 # Recovered asset binaries (local backup for manual re-migration)
 assets-backup/
+reports/
diff --git a/docs/accessibility.md b/docs/accessibility.md
index 05a3d42..68d308f 100644
--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@@ -4,35 +4,115 @@ Flixstack targets **WCAG 2.1 Level AA** compliance in both light and dark mode.
 
 ## Audit Tools
 
+Two checks ship with the repo and both exit non-zero on failure, so either can gate CI.
+
 ```bash
-# Run the automated axe-core audit
-npm run a11y
-# Output: reports/a11y-report.json
+# 1. axe-core across every route, in both themes
+npm run dev            # in another terminal (or `npm run build && npm start`)
+npm run a11y           # -> reports/a11y-report.json
+npm run a11y -- --url=http://localhost:3001
+
+# 2. WCAG contrast guard over the design tokens
+npm run check-contrast
+npm run check-contrast -- --json
 ```
 
-Supplemental manual testing with:
-- **macOS VoiceOver** (Cmd + F5)
-- **NVDA** on Windows
-- **axe DevTools** browser extension
-- **Lighthouse** accessibility audit
+[`scripts/a11y.mjs`](../scripts/a11y.mjs) drives headless Chrome over the DevTools Protocol
+— no Selenium or Playwright dependency, and `axe-core` itself has none. Set `CHROME_PATH`
+if your browser is somewhere unusual.
+
+[`scripts/check-contrast.mjs`](../scripts/check-contrast.mjs) parses the real token values
+out of [globals.css](../src/app/globals.css) and checks all 76 shipped pairs. It exists
+because this document once asserted the light accent was 5.0:1 on white when it was
+actually **3.30:1** — a real WCAG 1.4.3 failure that sat unnoticed precisely because the
+number was written by hand. Reverting that token makes the guard fail with 5 errors, so the
+check is known to work rather than merely known to pass.
+
+**Current status:** axe-core 4.13.0, 22 runs (11 routes x 2 themes), **0 violations**.
+Contrast guard: **76/76 pass**.
+
+Manual testing still recommended for what automation cannot judge:
+- **macOS VoiceOver** (Cmd + F5) / **NVDA** on Windows — announcement quality and order
+- **Windows High Contrast** — `forced-colors` fallbacks
+- **Lighthouse** — performance interactions with the texture layer
 
 ---
 
 ## Color Contrast
 
-All green accent values are pre-validated:
+> **Corrected in the cyber redesign (PR 1).** The previous version of this table claimed
+> `#16A34A` on `#FFFFFF` was 5.0:1. Recomputed, it is **3.30:1** — a genuine WCAG 1.4.3
+> failure that affected every light-mode accent link, accent badge, and the entire
+> white-on-green primary button. The light accent is now `#0E7038` (6.19:1). Two other
+> figures in the old table were also inaccurate (`#4ADE80` on `#0D0D0D` was understated as
+> 9.4:1 vs 11.15:1 actual; `#4A4A4A` on `#FFFFFF` was overstated as 9.7:1 vs 8.86:1).
 
-| Token | Light value | Dark value | Ratio | Standard |
+Text pairs must clear **4.5:1** (1.4.3). Control boundaries and focus indicators must clear
+**3:1** (1.4.11). Every value below is verified on **all three** surfaces of its theme —
+base, surface, and elevated — because a token that passes on white can still fail on the
+elevated fill.
+
+### Dark theme — base `#05070A` / surface `#0B0F14` / elevated `#121822`
+
+| Token | Value | base | surface | elevated |
 |---|---|---|---|---|
-| Accent on white | `#16A34A` on `#FFFFFF` | — | 5.0:1 | AA ✓ |
-| Accent on dark | — | `#4ADE80` on `#0D0D0D` | 9.4:1 | AAA ✓ |
-| Body text light | `#111111` on `#F8F9FA` | — | 17.8:1 | AAA ✓ |
-| Body text dark | — | `#F2F2F2` on `#0D0D0D` | 18.1:1 | AAA ✓ |
-| Secondary text light | `#4A4A4A` on `#FFFFFF` | — | 9.7:1 | AAA ✓ |
-| Focus ring | Matches accent | Matches accent | ≥ 3:1 | AA ✓ |
+| `--color-text-primary` | `#E6F1F5` | 17.54 | 16.72 | 15.49 |
+| `--color-text-secondary` | `#94A9B8` | 8.28 | 7.89 | 7.31 |
+| `--color-accent` | `#3DFF9E` | 15.36 | 14.64 | 13.56 |
+| `--color-info` | `#22D3EE` | 11.16 | 10.63 | 9.85 |
+| `--color-signal` | `#FF4FD8` | 7.07 | 6.74 | 6.24 |
+| `--color-premium` | `#FBBF24` | 12.08 | 11.51 | 10.67 |
+| `--color-error` | `#FF6B6B` | 7.27 | 6.93 | 6.42 |
+| `--color-border-control` (≥3:1) | `#56708A` | 3.92 | 3.73 | 3.46 |
+
+`--color-accent-foreground` `#04120A` on the accent fill: **14.59:1**.
+
+### Light theme — base `#EDF1F2` / surface `#FFFFFF` / elevated `#E1E7E9`
+
+| Token | Value | surface | base | elevated |
+|---|---|---|---|---|
+| `--color-text-primary` | `#0A1014` | 19.14 | 16.83 | 15.32 |
+| `--color-text-secondary` | `#47535C` | 7.90 | 6.94 | 6.32 |
+| `--color-accent` | `#0E7038` | 6.19 | 5.44 | 4.95 |
+| `--color-info` | `#0B5F76` | 7.21 | 6.34 | 5.77 |
+| `--color-signal` | `#86198F` | 8.24 | 7.24 | 6.59 |
+| `--color-premium` | `#9A4508` | 6.50 | 5.72 | 5.21 |
+| `--color-error` | `#B91C1C` | 6.47 | 5.69 | 5.18 |
+| `--color-border-control` (≥3:1) | `#6E7D86` | 4.25 | 3.74 | 3.40 |
+
+`--color-accent-foreground` `#FFFFFF` on the accent fill: **6.19:1**.
+
+`--color-text-disabled` is the one token held only to 3:1 (3.42 dark / 3.55 light on
+elevated). **It is for decorative `aria-hidden` icons and genuinely disabled controls only
+— never for text a sighted user is expected to read.** WCAG 1.4.3 exempts inactive
+components, not quiet ones. Using it for card genre names produced 231 axe violations at
+3.41:1 (finding 8 below); real-but-secondary content takes `--color-text-secondary`.
+
+### Two kinds of border
+
+`--color-border` is **decorative** (dividers, card edges) and is exempt from 1.4.11.
+`--color-border-control` is for anything whose boundary identifies a control — inputs,
+buttons, toggles — and clears 3:1 on every surface. Do not use the decorative token on a
+control: the search input previously did, at roughly 1.3:1.
 
 Color is never the sole means of conveying information (paired with icons/labels).
 
+### Focus indicators on notched elements
+
+`clip-path` clips an element's `outline`, and `overflow: hidden` on an ancestor clips a
+descendant's outline. Elements carrying the `.notch` / `.notch-sm` HUD geometry therefore
+take their focus indicator as an **inset `box-shadow`**, which is clipped with the shape and
+stays visible.
+
+That ring is deliberately **two-tone** — an inner band in `--color-bg-base` and an outer
+band in `--color-focus-ring`. A single-tone ring is invisible on the primary button, whose
+fill *is* the accent colour. With two bands, whichever way the fill goes, one always
+contrasts: the ground band carries it on accent/error fills, the accent band carries it on
+surface, elevated, and transparent fills.
+
+Buttons use `transition-colors`, not `transition-all`, so the focus ring appears
+immediately instead of fading in over 150ms.
+
 ---
 
 ## Keyboard Navigation
@@ -41,11 +121,25 @@ Color is never the sole means of conveying information (paired with icons/labels
 - **Skip to main content** link is the first focusable element on every page
 - **Rails** support `ArrowLeft`/`ArrowRight` for horizontal scrolling
 - **Hero carousel** pause/prev/next are keyboard accessible
-- **Mobile nav** can be opened/closed with Enter/Space and dismissed with Escape
-- **Modals / panels** (e.g., CS Inspector) trap focus correctly and return focus on close
+- **Mobile nav** can be opened/closed with Enter/Space
+- **Season accordions** use native `<details>`/`<summary>`
 - **Dropdowns and selects** use native `<select>` for full keyboard support
 
----
+Every focusable element has a visible focus indicator. Verified by focusing each one in turn
+and asserting a non-`none` `outline` or `box-shadow` (or an inset ring on its notched
+ancestor): **414 focusable elements across 7 routes, 0 without an indicator.**
+
+The rail edge fade is disabled on `:focus-within`, because a CSS mask clips painting and
+would otherwise fade out the focus ring of a card scrolled to the boundary.
+
+## Reflow and Zoom
+
+- **320px reflow** (WCAG 1.4.10): verified on all routes with no horizontal overflow. This
+  needed three fixes — see items 13–15 above.
+- **200% zoom** (WCAG 1.4.4): verified on all routes with no overflow or clipping.
+- Uppercase and letter-spacing are applied with `text-transform`/`letter-spacing`, never by
+  changing the source string, so assistive tech reads normal-case text and WCAG 1.4.12
+  text-spacing overrides do not break headings.
 
 ## Semantic HTML
 
@@ -75,12 +169,19 @@ Color is never the sole means of conveying information (paired with icons/labels
 | Profile switches | `role="switch"`, `aria-checked` |
 | Loading spinner | `aria-busy="true"` on button, `aria-live` region |
 | Search results | `aria-live="polite"`, `aria-atomic="true"` |
+| Reduce-effects toggle | `role="switch"`, `aria-checked` |
+| Avatar status dot | `role="img"` + `aria-label` (an `aria-label` on a bare `div` is prohibited) |
+| Loading skeletons | one `role="status"` per *group*, not per placeholder |
 
 ---
 
 ## Motion
 
-All animations respect `prefers-reduced-motion`:
+All animations respect `prefers-reduced-motion`. The blanket duration override is kept for
+inherited transitions, but it is **not sufficient on its own**: forcing a directional
+keyframe (a sweep, a glitch) to `0.01ms` freezes it at an arbitrary offset and can leave an
+element visibly displaced. So every named animation also gets an explicit `animation: none`
+plus a defined safe static state:
 
 ```css
 @media (prefers-reduced-motion: reduce) {
@@ -88,11 +189,37 @@ All animations respect `prefers-reduced-motion`:
     animation-duration: 0.01ms !important;
     transition-duration: 0.01ms !important;
   }
-  .skeleton { animation: none; opacity: 0.6; }
+  html { scroll-behavior: auto; }
+
+  .skeleton { opacity: 0.6; }
+  .skeleton::after { animation: none !important; display: none; }
+  .terminal-caret::after { animation: none !important; opacity: 1; }
+  .chromatic:hover, .chromatic:focus-visible { text-shadow: none; }
 }
 ```
 
-No content flashes more than 3 times per second.
+No content flashes more than 3 times per second. The fastest repeating element on the site is
+the terminal caret at **~0.94 Hz**, and it is a single character block — well under the
+"large flash" area threshold of WCAG 2.3.1.
+
+### Texture is gated at the token level
+
+Scanlines, grain, the wireframe grid, glow, and the chromatic fringe are all driven by CSS
+custom properties (`--scanline-opacity`, `--grain-opacity`, `--grid-opacity`, `--glow-*`,
+`--fx-chromatic`). The `.reduce-fx` class on `<html>` zeroes them all, so texture switches
+off everywhere at once and no effect can escape the gate. Components must never hardcode an
+opacity, glow, or shadow that bypasses these tokens.
+
+`.reduce-fx` is a *user preference* (its UI ships in PR 5) and never a substitute for
+`prefers-reduced-motion` — the OS setting works independently and always wins.
+
+### Other media queries honoured
+
+- `@media (forced-colors: active)` — Windows High Contrast drops `box-shadow` entirely, so
+  notched shapes and glow-only affordances are replaced with real `CanvasText` borders and
+  a `Highlight` outline, and decorative overlays are hidden.
+- `@media (prefers-contrast: more)` — texture opacities drop to 0 and `--color-border` is
+  promoted to the stronger control colour.
 
 ---
 
@@ -106,6 +233,39 @@ All inputs in Flixstack (search, profile preferences) have:
 
 ---
 
+## Defects Found and Fixed
+
+Recorded because several were invisible to inspection and only surfaced under measurement.
+Every ratio below was measured on rendered pixels, not modelled.
+
+| # | Defect | Was | Now |
+|---|---|---|---|
+| 1 | Light accent `#16A34A` failed AA — affected all accent text, accent badges and the whole white-on-green primary button | 3.30:1 | 6.19:1 (`#0E7038`) |
+| 2 | Light-mode `error` and `premium` fell below 4.5:1 on the elevated surface | 3.87 / 4.02:1 | 5.18 / 5.21:1 |
+| 3 | Search input drew its only affordance with the *decorative* divider colour (WCAG 1.4.11) | ~1.3:1 | 3.73:1 (`--color-border-control`) |
+| 4 | Theme toggle read `theme` not `resolvedTheme`, so with `enableSystem` it announced the wrong mode to screen readers while rendering the other one | wrong `aria-label` | correct in all 4 setting/OS combinations |
+| 5 | Hero bottom vignette used `from-background` behind `text-white`, so in light mode the title faded into a near-white ground. Same bug on `/watch/[slug]` and `/genre/[slug]` | 1.12:1 | 16.92 / 13.71:1 (title / subtitle) |
+| 6 | Genre hero put theme-coloured text on an editor-chosen `color_accent` tint, so contrast depended on a CMS field. A light accent (`#FDE047`) computed to 3.40:1 | 4.61:1 measured | 16.27:1, independent of the field |
+| 7 | Title card hover overlay was `aria-hidden` but held a focusable watchlist button (axe `aria-hidden-focus`); keyboard users could focus an invisible control | violation | overlay reveals on `focus-within` |
+| 8 | `--color-text-disabled` (3.41:1) was used for genre names and other real content, not just disabled controls | 231 axe violations | `--color-text-secondary` (7.31:1); the token is now icons-only |
+| 9 | Inline links in prose were distinguished by colour alone (WCAG 1.4.1) | 13 violations | always underlined |
+| 10 | `aria-label` on a `div` with no role (avatar status dot) | violation | `role="img"` |
+| 11 | `getRatingColor` returned raw Tailwind palette classes bypassing the tokens, and failed contrast | 3.73:1 | design tokens, all >= 4.5:1 |
+| 12 | Tailwind v4's `dark:` variant keys off `prefers-color-scheme`, but this app themes with a `.dark` class — so `dark:` utilities tracked the OS, not the app | silent mismatch | `@custom-variant dark` |
+| 13 | Portrait `TitleCard`s in responsive grids kept their fixed 160px width, overflowing a 320px viewport (WCAG 1.4.10) | 328px min | reflows to 320px |
+| 14 | `/setup` prose could not break long env-var names at 320px | 419px min | `break-words` |
+| 15 | Header wordmark in display caps pushed the header past 320px | 349px min | wordmark hides below `sm` |
+
+Two regressions were introduced *during* the redesign and caught the same way:
+
+- A `position` declared in an unlayered utility class silently overrode Tailwind's
+  positioning utilities (unlayered CSS beats `@layer utilities` regardless of specificity).
+  This turned the sticky header into `position: relative`, and separately collapsed the
+  hero scrim to **0px tall** so it painted nothing. No utility declares `position` any
+  more — see the note at the top of the utilities section in `globals.css`.
+- The reduce-effects preference silently failed on the 404 route, which renders its shell
+  on the client where inline scripts in React components never execute.
+
 ## Known Patterns to Watch
 
 1. **Image `alt` text** — Hero backgrounds use `alt=""` (decorative). Thumbnail images include the title name.
diff --git a/docs/cyber-redesign-plan.md b/docs/cyber-redesign-plan.md
new file mode 100644
index 0000000..03c464f
--- /dev/null
+++ b/docs/cyber-redesign-plan.md
@@ -0,0 +1,476 @@
+# Cyber redesign — *Hackers* / *Strange Days* / *eXistenZ*
+
+> **Status:** direction approved. All five open decisions are resolved — see
+> [Decisions (resolved)](#decisions-resolved) and [Delivery sequence](#delivery-sequence).
+> **Branch:** all work lands on `feat/cyber-redesign`; nothing is committed to `main`.
+
+## Context
+
+Flixstack's visual system lives almost entirely in two places:
+
+- [globals.css](../src/app/globals.css) — a flat CSS custom-property token set (`:root` for light,
+  `.dark` for dark), bridged into Tailwind v4 utilities via `@theme inline`.
+- Components consume tokens through arbitrary-value classes — both spellings are in use today:
+  `bg-[var(--color-bg-surface)]` (older, in [header.tsx](../src/components/layout/header.tsx),
+  [rail.tsx](../src/components/streaming/rail.tsx)) and the Tailwind v4 shorthand
+  `text-(--color-text-primary)` / bare aliases `bg-elevated`, `text-accent` (newer, in
+  [title-card.tsx](../src/components/streaming/title-card.tsx), [page.tsx](../src/app/page.tsx)).
+
+Theme switching is `next-themes` with `attribute="class"`, `defaultTheme="system"`
+([providers.tsx](../src/components/layout/providers.tsx)).
+
+**This is good news for a redesign**: most of the visual change can land in `globals.css` as token
+re-tuning, and every component that reads tokens updates for free. The per-component work is
+geometry, typography, and texture — not colour plumbing.
+
+### Why it currently reads as dated (the actual diagnosis)
+
+1. **One radius, everywhere.** `rounded-lg` on cards, buttons, badges, panels, avatars. No shape
+   hierarchy, so nothing feels engineered — it reads as a 2019 Bootstrap/Netflix-clone default.
+2. **Palette carries no brand.** Neutral grays plus a single utility green. The green is used for
+   accents, success, *and* focus ring, so it never means anything specific.
+3. **Zero depth or texture.** No shadow tokens, no glow, no grain, no film. Every surface is a flat
+   fill separated only by a 1px `#e5e7eb` / `#2e2e2e` line.
+4. **`--font-mono` is loaded and almost unused.** Geist Mono ships on every page and is referenced
+   in exactly one place — `Badge variant="rating"`. A monospace voice is the cheapest, most
+   on-theme typographic win available and it's already paid for.
+5. **Motion is one gesture.** `hover:scale-105` on cards and opacity fades. Nothing responds to
+   focus differently than hover; nothing has a state that feels *live*.
+6. **Hero scrim is two plain black gradients** ([hero.tsx:63-70](../src/components/streaming/hero.tsx#L63-L70)),
+   which flattens whatever artwork the CMS supplies.
+
+### Two pre-existing accessibility defects this redesign must fix
+
+I recomputed every ratio asserted in [accessibility.md](./accessibility.md). Some are wrong, and one
+is a real WCAG failure shipping today:
+
+| Claim in `accessibility.md` | Documented | **Actual** | Verdict |
+|---|---|---|---|
+| `#16A34A` on `#FFFFFF` | 5.0:1 AA ✓ | **3.30:1** | ❌ **fails AA for normal text** |
+| `#4ADE80` on `#0D0D0D` | 9.4:1 AAA ✓ | 11.15:1 | ✓ (doc understates) |
+| `#111111` on `#F8F9FA` | 17.8:1 | 17.91:1 | ✓ |
+| `#4A4A4A` on `#FFFFFF` | 9.7:1 | 8.86:1 | ✓ (doc overstates) |
+
+**The live defect:** light mode's `--color-accent: #16A34A` is 3.30:1 on white. That means, in light
+mode today, every `text-accent` link, every `Badge variant="accent"` label, and the **entire primary
+button** (white-on-green, also 3.30:1) fails WCAG 1.4.3 for normal-size text. Fixing this is
+in-scope Phase 1 work, not a follow-up.
+
+Also: `accessibility.md` documents `npm run a11y` → `reports/a11y-report.json`, but **no `a11y`
+script exists** in [package.json](../package.json) and there's no axe dependency. Verification is
+currently manual-only. Phase 8 addresses this.
+
+---
+
+## Aesthetic direction
+
+The three references pull in genuinely different directions, which is useful — taking one ingredient
+from each avoids a pastiche of any single one.
+
+| Film | What we take | What we deliberately *don't* take |
+|---|---|---|
+| **Hackers** (1995) | Phosphor-green-on-black terminal voice; CRT scanlines; isometric wireframe grid as backdrop; wide-letterspaced mono caps for labels; the cyan↔magenta iridescence of the "Gibson" sequences | Literal 3D chrome extrusions, rollerblades-era clip art, rainbow gradients on text |
+| **Strange Days** (1995) | Night-city grime; chromatic fringing (a 1px cyan/magenta offset) on hover/active states; blown-out amber-red highlights against blue-black; the sense of a *recording* being played back | Full VHS tracking distortion, heavy blur, anything that degrades legibility of poster art |
+| **eXistenZ** (1999) | A warm bone/ochre counterpoint so the palette isn't only cold neon; muted rather than luminous; soft pod curves on a *few* elements to break the grid | Fleshy/organic textures, biological imagery |
+
+### The governing guardrail
+
+**Flixstack is a streaming product — the artwork is the hero.** Every effect below is confined to
+*chrome*: panel edges, labels, backdrops, empty states, focus and hover states. Nothing overlays
+poster art or body copy. This is both a design principle and the accessibility strategy: if texture
+never touches text, text contrast stays computable.
+
+---
+
+## Phase 1 — Token foundation (`globals.css`)
+
+The structural change: today's token set is one accent plus neutrals. The new set is **three
+signal hues** (phosphor green = primary/interactive, cyan = informational/data, magenta = alert or
+"live"), a **warm** hue (amber, already present as `--color-premium` — promoted to a first-class
+accent), plus shape, glow, and texture tokens.
+
+### Dark palette (the primary theme)
+
+All ratios below are computed, not estimated.
+
+| Token | Value | Ratio | Against |
+|---|---|---|---|
+| `--color-bg-base` | `#05070A` | — | — |
+| `--color-bg-surface` | `#0B0F14` | — | — |
+| `--color-bg-elevated` | `#121822` | — | — |
+| `--color-text-primary` | `#E6F1F5` | **17.54:1** AAA | base |
+| `--color-text-secondary` | `#94A9B8` | **8.28:1** AAA / 7.31:1 on elevated | base / elevated |
+| `--color-text-disabled` | `#5C6F7E` | 3.42:1 | elevated (non-essential text only) |
+| `--color-accent` (phosphor) | `#3DFF9E` | **15.36:1** AAA / 13.56:1 on elevated | base / elevated |
+| `--color-accent-foreground` | `#04120A` | **14.59:1** | on accent fill |
+| `--color-info` (cyan) | `#22D3EE` | **11.16:1** / 9.85:1 on elevated | base / elevated |
+| `--color-signal` (magenta) | `#FF4FD8` | **7.07:1** / 6.24:1 on elevated | base / elevated |
+| `--color-premium` (amber) | `#FBBF24` | **12.08:1** | base |
+| `--color-error` | `#FF6B6B` | **7.27:1** | base |
+| `--color-border` (decorative) | `#1E2A38` | 1.39:1 | base — dividers only, WCAG 1.4.11 exempt |
+| `--color-border-control` **(new)** | `#56708A` | **3.92 / 3.73 / 3.46:1** | base / surface / elevated — passes 3:1 on *all three* |
+| `--color-focus-ring` | `#3DFF9E` | **15.36:1** | base |
+
+The `--color-border-control` token is the fix for a gap that exists today: inputs like the
+[search field](../src/app/search/page.tsx#L60) use `border-border` (`#2e2e2e`, ~1.3:1), so the
+control's boundary — its only affordance — fails WCAG 1.4.11. Splitting decorative from control
+borders resolves it without making every divider shout.
+
+### Light palette ("daylight terminal")
+
+Cyber is dark-native, so light mode becomes a deliberately plainer variant: same geometry and
+typography, texture dialled to near-zero, hues darkened until they pass on paper.
+
+| Token | Current | **New** | Ratio (white / base `#EDF1F2` / elevated `#E1E7E9`) |
+|---|---|---|---|
+| `--color-bg-base` | `#f8f9fa` | `#EDF1F2` | — |
+| `--color-text-primary` | `#111111` | `#0A1014` | 19.14 / **16.83** / — |
+| `--color-text-secondary` | `#4a4a4a` | `#47535C` | 7.90 / **6.94** / 6.32 |
+| `--color-accent` | `#16a34a` ❌ 3.30 | **`#0E7038`** | 6.19 / **5.44** / — ✓ |
+| `--color-accent-foreground` | `#ffffff` | `#FFFFFF` | **6.19:1 on fill** ✓ (was 3.30 ❌) |
+| `--color-info` | — | `#0B5F76` | 7.21 / 6.34 / **5.77** |
+| `--color-signal` | — | `#86198F` | 8.24 / 7.24 / **6.59** |
+| `--color-premium` | `#d97706` | `#9A4508` | 6.50 / 5.72 / **5.21** |
+| `--color-error` | `#dc2626` (3.87 on elevated ❌) | **`#B91C1C`** | 6.47 / 5.69 / **5.18** ✓ |
+| `--color-border-control` | — | `#6E7D86` | 4.25 / **3.74** / 3.40 ✓ |
+
+Every light value clears 4.5:1 on *all three* light surfaces — the current set does not (today's
+`#dc2626` error is 3.87:1 on elevated, and `#d97706` premium is 4.02:1).
+
+### Shape tokens (new)
+
+Replaces the uniform `rounded-lg`. Registered in `@theme inline` as `--radius-*` so Tailwind
+generates `rounded-panel`, `rounded-control`, `rounded-chip` utilities and we stop hardcoding.
+
+| Token | Value | Used by |
+|---|---|---|
+| `--radius-panel` | `2px` | Cards, hero, surfaces — near-square HUD panels |
+| `--radius-control` | `3px` | Buttons, inputs, rail arrows |
+| `--radius-chip` | `1px` | Badges, genre pills |
+| `--radius-pod` | `999px` | The *few* eXistenZ curved elements (avatar, play FAB, hero dots) |
+| `--notch` | `10px` | Corner-cut size for `clip-path` HUD panels |
+
+### Glow, grid & grain tokens (new)
+
+```
+--glow-accent, --glow-info, --glow-signal   /* layered box-shadows, decorative only */
+--shadow-panel                               /* replaces the current no-shadow flatness */
+--grid-line                                  /* wireframe backdrop line colour */
+--scanline-opacity: 0.035                     /* hard ceiling — see accessibility contract */
+--grain-opacity: 0.025
+```
+
+### The `.reduce-fx` escape hatch — established here, in Phase 1
+
+The user-facing "reduce effects" toggle (approved, Q4) ships in Phase 7, but its **gating
+convention must exist before any effect is authored** — otherwise every effect written in Phases
+3–7 needs retrofitting. So Phase 1 defines the contract, mirroring the existing root-class patterns
+(`.dark`, `.cs-inspect-active`):
+
+```css
+.reduce-fx {
+  --scanline-opacity: 0;
+  --grain-opacity: 0;
+  --glow-accent: none;
+  --glow-info: none;
+  --glow-signal: none;
+}
+```
+
+Gating at the **token** level rather than per-selector means texture switches off everywhere at
+once and no effect can accidentally escape it. Only keyframe animations need a second rule
+(`.reduce-fx` sets `animation: none` plus the same safe static states Phase 8 defines for
+`prefers-reduced-motion` — the two paths share one implementation).
+
+**Rule for Phases 3–7: no effect may hardcode an opacity, glow, or colour that bypasses these
+tokens.** That is what makes the toggle a one-line switch instead of an audit.
+
+---
+
+## Phase 2 — Typography
+
+Three roles instead of one. Body copy stays a humanist sans for readability — this is the main
+accessibility concession and it is not negotiable.
+
+| Role | Face | Why |
+|---|---|---|
+| **Display** — h1/h2, hero title, rail headings | **Chakra Petch** (600/700), uppercase, `letter-spacing: 0.04em` | Squared-off techno face with real legibility; carries *Hackers* without novelty-font cost |
+| **Body** — paragraphs, descriptions, form text | **Geist Sans** (unchanged) | Already loaded; keeps reading comfortable at length |
+| **Data** — badges, runtime, scores, year, metadata, timestamps, counts | **Geist Mono** (already loaded, currently near-unused) | Terminal-readout voice; zero new bytes |
+
+Verified against this Next version's font manifest — `Chakra Petch` resolves via
+`next/font/google` with weights 300–700. Wired in [layout.tsx](../src/app/layout.tsx) exactly like
+the existing Geist calls (`variable: "--font-display"`), then mapped in `@theme inline` as
+`--font-display`. Confirmed against `node_modules/next/dist/docs/01-app/01-getting-started/13-fonts.md`
+— the `variable` + `className` pattern is unchanged in Next 16.
+
+**Decided (Q2): Chakra Petch.** Load **only weights 600 and 700** with `subsets: ["latin"]` and
+`display: "swap"` — it's a display face used for headings and short labels, so the 300/400/500
+weights are dead payload. That keeps the added cost to two subsetted woff2 files, self-hosted by
+`next/font` with no external request and no layout shift.
+
+**Accessibility constraints on the display face:**
+- Uppercase + tracking applies to headings and short labels **only** — never to sentences or
+  paragraphs (screen-reader and dyslexia cost).
+- Uppercase is applied with `text-transform`, not by changing the source string, so assistive tech
+  reads normal-case text.
+- Must hold at 200% zoom and survive WCAG 1.4.12 text-spacing overrides — headings get `text-wrap:
+  balance` and no fixed heights.
+
+---
+
+## Phase 3 — Primitives
+
+[button.tsx](../src/components/ui/button.tsx), [badge.tsx](../src/components/ui/badge.tsx),
+[skeleton.tsx](../src/components/ui/skeleton.tsx), plus new CSS utility classes in `globals.css`.
+
+- **Button** — keep the existing `variant`/`size`/`asChild` API exactly as-is; restyle only the
+  class strings. `primary` becomes phosphor fill with a bracket-notch `clip-path`; `outline`
+  becomes a hairline `--color-border-control` box with an inner glow on hover; add a `terminal`
+  variant (mono, uppercase, `[` `]` bracket affordance via pseudo-elements).
+- **Badge** — add `info` and `signal` variants alongside `default`/`accent`/`premium`/`rating`/`outline`;
+  all switch to mono + `--radius-chip`.
+- **Skeleton** — replace the opacity pulse with a scanline sweep (single direction, 1.8s, no flash).
+- **New utilities** (`globals.css`, alongside the existing `.scroll-rail` / `.skeleton` pattern):
+  `.panel-notch`, `.grid-backdrop`, `.scanlines`, `.grain`, `.glow-accent`, `.chromatic-hover`,
+  `.terminal-caret`.
+
+### ⚠ Known technical trap: `clip-path` clips focus rings
+
+`clip-path` clips an element's **outline**, and `overflow: hidden` on an ancestor clips a
+descendant's outline. Corner-notched panels would therefore silently destroy the `:focus-visible`
+ring that [globals.css:121](../src/app/globals.css#L121) provides globally — an accessibility
+regression that looks like nothing at all in a screenshot.
+
+**Mitigation, applied consistently:** notched elements get their focus indicator as an inset
+`box-shadow` ring (which is clipped *with* the shape, staying visible) rather than `outline`, or the
+notch moves to a pseudo-element sibling while the focusable element stays unclipped. This is
+resolved once here in Phase 3 so Phases 4–6 inherit it. Same trap already applies to
+`.cs-inspect-active [data-cs-entry]`'s dashed outline
+([globals.css:208](../src/app/globals.css#L208)) — the Live Preview inspector must keep working.
+
+---
+
+## Phase 4 — Chrome
+
+[header.tsx](../src/components/layout/header.tsx), [nav.tsx](../src/components/layout/nav.tsx),
+[footer.tsx](../src/components/layout/footer.tsx),
+[site-chrome.tsx](../src/components/layout/site-chrome.tsx),
+[theme-toggle.tsx](../src/components/layout/theme-toggle.tsx).
+
+- Header: hairline phosphor underglow instead of a flat border; nav links get mono uppercase +
+  animated underscore-caret on the active route; logo mark becomes a notched square.
+- Footer: wireframe grid backdrop at low opacity; column headings in mono caps; a `> built with
+  contentstack` terminal-prompt line replacing the current plain text.
+- Theme toggle: swap icons for a `[ DAY ]`/`[ NIGHT ]` mono readout (keeps icon + text, so it isn't
+  colour-only). See the defect below — this one is *not* class-strings-only.
+- **Regression watch:** the fallback nav/footer arrays and all CMS-driven props stay untouched.
+  Apart from the two theme fixes below, this phase is class strings only.
+
+### Dark becomes the default (Q1) — and a bug it exposes
+
+[providers.tsx](../src/components/layout/providers.tsx) changes `defaultTheme="system"` →
+`defaultTheme="dark"`, keeping `enableSystem` so **System stays selectable** — a first-time visitor
+gets the intended dark aesthetic, and anyone who explicitly wants light or system still gets it.
+
+That change exposes a **live bug** in [theme-toggle.tsx](../src/components/layout/theme-toggle.tsx#L16):
+
+```tsx
+const { theme, setTheme } = useTheme();
+const isDark = theme === "dark";   // ❌ `theme` is "system" whenever System is selected
+```
+
+With `enableSystem`, `theme` holds the *setting* (`"system"`), not the active theme. So a visitor on
+a dark OS today sees dark chrome while the toggle renders the Moon icon and announces
+**"Switch to dark mode"** — wrong icon, and a wrong `aria-label` read aloud by screen readers. The
+fix is `resolvedTheme` (confirmed present in `next-themes` 0.4.6's `useTheme` return type):
+
+```tsx
+const { setTheme, resolvedTheme } = useTheme();
+const isDark = resolvedTheme === "dark";
+```
+
+Small fix, real accessibility bug, and it gets worse once dark is the default — so it lands here
+rather than as a follow-up.
+
+## Phase 5 — Streaming surfaces
+
+[hero.tsx](../src/components/streaming/hero.tsx), [rail.tsx](../src/components/streaming/rail.tsx),
+[title-card.tsx](../src/components/streaming/title-card.tsx),
+[video-player.tsx](../src/components/streaming/video-player.tsx).
+
+- **Hero** — replace the two flat black gradients with a three-layer scrim (blue-black base +
+  bottom vignette + faint scanlines), a corner HUD frame, and the title in display caps with a
+  1px chromatic offset. Scrim floor computed: white-on-`#0D1014` = **19.07:1**, and even at the
+  gradient's lightest sampled midpoint (`#26303B`) white holds **13.39:1** — so hero copy stays AA
+  regardless of the artwork the CMS supplies. Carousel dots keep `role="tablist"`, auto-rotate keeps
+  its hover-pause.
+- **Title card** — notched panel, mono metadata row, phosphor score readout, and a scan-sweep on
+  hover instead of `scale-105` (cheaper to paint across a full rail). Existing badge slots, hover
+  play/add controls, and `data-cs-entry` hooks unchanged.
+- **Rail** — heading in display caps with a `//` prefix; arrow buttons become notched squares;
+  a subtle edge-fade mask at the scroll boundaries. `ArrowLeft`/`ArrowRight` keyboard handling and
+  `role="list"`/`listitem` semantics preserved.
+- **Video player** — stays a native `<video>` with `controls`; only the poster frame and its
+  container chrome change. **No custom control UI** — native controls are the accessible default and
+  replacing them is out of scope.
+
+## Phase 6 — Page passes
+
+[browse-client.tsx](../src/app/browse/browse-client.tsx),
+[search/page.tsx](../src/app/search/page.tsx),
+[watch-content.tsx](../src/app/watch/[slug]/watch-content.tsx),
+[profile-client.tsx](../src/app/profile/profile-client.tsx),
+[genre/[slug]/page.tsx](../src/app/genre/[slug]/page.tsx),
+[setup/page.tsx](../src/app/setup/page.tsx), [not-found.tsx](../src/app/not-found.tsx),
+[page.tsx](../src/app/page.tsx), [modular-block-renderer.tsx](../src/components/cms/modular-block-renderer.tsx).
+
+Mostly mechanical once Phases 1–3 land. The ones with actual design work:
+
+- **Search** — the biggest opportunity. Becomes a terminal query line: `> ` prompt, blinking caret,
+  mono result count as `[ 14 MATCHES ]`, and a "no signal" empty state. All existing
+  `aria-live`/`aria-controls`/`aria-describedby` wiring
+  ([search/page.tsx:77-87](../src/app/search/page.tsx#L77-L87)) preserved verbatim.
+- **Browse** — filter pills become notched toggles; keep `aria-pressed` / `role="radiogroup"`.
+- **Not-found** — a *Strange Days* "signal lost" glitch panel. Best single showcase of the
+  aesthetic at zero UX risk.
+- **Setup** — deliberately restrained; it's developer documentation and must stay readable.
+  (Note: its copy is CMS-seeded — see the `/setup` content notes before touching strings.)
+- **Home `FeatureCallouts`** — currently the most generic block on the site; becomes a mono
+  "system modules" readout.
+
+## Phase 7 — Motion & texture layer
+
+Global, additive, and gated. Each effect ships with an explicit reduced-motion static state.
+
+| Effect | Where | Trigger | Duration |
+|---|---|---|---|
+| Scanline overlay | Body backdrop, hero, empty states | Always (static, no animation) | — |
+| Wireframe grid | Footer, empty states, `/setup` | Static | — |
+| Grain | Body, ≤2.5% opacity | Static | — |
+| Chromatic fringe | Headings, card titles | `:hover` / `:focus-visible` | 120ms, single-shot |
+| Scan sweep | Card hover, skeleton loading | `:hover` / loading | 400ms / 1.8s loop |
+| Terminal caret | Search input, footer prompt | Always | 1.06s blink (**~0.94 Hz**) |
+| Glitch displacement | `not-found` only | Mount, plays 3× then stops | 3 × 180ms |
+
+**Every animation above is under 3 flashes/second (WCAG 2.3.1).** The caret blink at ~0.94 Hz is the
+fastest repeating element on the site, and it's a 1-char block, well under the "large flash" area
+threshold.
+
+### The "reduce effects" toggle (Q4 — approved)
+
+Consumes the `.reduce-fx` contract established in Phase 1, so this phase is only persistence plus UI.
+
+**Where it lives:** primary control in **profile preferences**, reusing the existing
+`role="switch"` / `aria-checked` pattern already documented for that page in
+[accessibility.md](./accessibility.md), plus a mirrored control in the footer for discoverability.
+Deliberately **not** in the header — it's already tight on mobile, and this is a set-once
+preference, not a frequent action.
+
+**Persistence — recommended: a cookie read server-side.** `layout.tsx` is already an `async` Server
+Component awaiting three CMS fetches, so it can read the cookie and stamp `class="reduce-fx"` onto
+`<html>` during render. That means **no un-styled flash and no blocking inline script** — strictly
+better than the `localStorage` + inline-script dance `next-themes` has to do.
+
+⚠ Reading cookies opts a route into dynamic rendering. Before implementing, check the current
+caching/dynamic-API rules in `node_modules/next/dist/docs/01-app/` — per
+[AGENTS.md](../AGENTS.md), this Next version's behaviour here may differ from what I'd assume, and
+it's the one part of this plan I won't design blind. If it turns out to force an unacceptable
+rendering change, fall back to `localStorage` + a small pre-hydration script mirroring how
+`next-themes` already does it in this app.
+
+**Accessibility requirements for the toggle itself:**
+- It is a *preference*, never a replacement for `prefers-reduced-motion` — the OS setting keeps
+  working independently, and OS-reduced-motion always wins regardless of the toggle's state.
+- Labelled with text, not an icon alone; state carried by `aria-checked`, not by colour.
+- Turning it on must not shift layout — effects are opacity/shadow only, never geometry.
+
+**Out of scope (noted, not built):** a Contentstack site-config field setting the *default* effect
+intensity per environment. Nice demo surface, but it's a schema change.
+
+## Phase 8 — Accessibility verification
+
+`prefers-reduced-motion` needs real work here, not just inheritance. The current global block
+([globals.css:193-205](../src/app/globals.css#L193-L205)) sets `animation-duration: 0.01ms` — which
+is fine for a symmetric pulse, but **freezes a glitch or sweep keyframe at an arbitrary offset**,
+potentially leaving an element visibly displaced. Each new effect gets an explicit
+`animation: none` plus a defined safe static state.
+
+Also to add:
+- `@media (forced-colors: active)` — Windows High Contrast strips `box-shadow` and ignores custom
+  colours; notched panels and glow-only affordances must fall back to real borders.
+- `@media (prefers-contrast: more)` — drop scanlines/grain to 0, borders to full strength.
+
+**Verification we can actually run** (`npm run a11y` is documented but doesn't exist):
+1. Add a real axe-core script + `reports/` output, *or* correct `accessibility.md` to describe
+   manual-only verification. Recommend adding it — the doc has already drifted into asserting
+   ratios that are wrong.
+2. Re-run the contrast computation over the final token set (the script used for this plan's tables
+   is reusable and can be committed under `scripts/`).
+3. Manual sweep: keyboard-only pass on all 8 routes, VoiceOver on hero/search/browse/watch,
+   200% zoom, reduced-motion on, forced-colors on, light **and** dark.
+4. Update `accessibility.md` with corrected numbers and the new tokens.
+
+---
+
+<a id="decisions-resolved"></a>
+
+## Decisions (resolved)
+
+| # | Question | Decision | Consequence in this plan |
+|---|---|---|---|
+| **Q1** | Light mode | ✅ **Keep it**, redesigned as "daylight terminal" | Full light palette in Phase 1; `defaultTheme="dark"` with `enableSystem` retained; exposes + fixes the `resolvedTheme` toggle bug (Phase 4) |
+| **Q2** | Display font | ✅ **Chakra Petch**, weights 600/700 only | Phase 2; self-hosted via `next/font/google`, two subsetted woff2 files |
+| **Q3** | Effect intensity | ✅ **Restrained** — texture in chrome only | Phase 7 stands as specced; the guardrail above is binding, not aspirational |
+| **Q4** | "Reduce effects" toggle | ✅ **Add it** | `.reduce-fx` token contract in Phase 1; persistence + UI in Phase 7 |
+| **Q5** | Sequencing | ✅ **Foundation first**, then follow-ups | Six PRs — see below |
+
+<a id="delivery-sequence"></a>
+
+## Delivery sequence
+
+All work happens on **`feat/cyber-redesign`**. Nothing is committed to `main`.
+
+Rather than six sibling branches, each PR below targets `feat/cyber-redesign`, which merges to `main`
+once the redesign is coherent end to end. That keeps `main` shippable and avoids a half-redesigned
+site (new tokens, old chrome) ever being the default branch.
+
+| PR | Phases | Contents | Reviewable because |
+|---|---|---|---|
+| **1** | 1–3 | Tokens, both palettes, shape/glow/texture tokens, `.reduce-fx` contract, Chakra Petch, Button/Badge/Skeleton, new CSS utilities, focus-ring fix | Self-contained: the site still renders correctly throughout, just with new primitives. The 3.30:1 AA fix ships here. |
+| **2** | 4 | Header, nav, footer, site-chrome; `defaultTheme="dark"`; `resolvedTheme` toggle fix | Small, visible, includes the second a11y bug fix |
+| **3** | 5 | Hero, rail, title-card, video-player chrome | The highest-visual-impact PR; worth reviewing alone |
+| **4** | 6 | Eight route passes | Mostly mechanical; search + not-found are the real design work |
+| **5** | 7 | Motion/texture layer + reduce-effects toggle | Additive; can be reverted independently if it doesn't land |
+| **6** | 8 | Reduced-motion states, `forced-colors`, `prefers-contrast`, axe script, corrected `accessibility.md` | Verification gate before merging to `main` |
+
+**PR 1 is the only blocking dependency** — Phases 4–7 all assume its tokens, utilities, and
+focus-ring convention exist. PRs 2–5 can then proceed in parallel if useful.
+
+### Suggested checkpoint
+
+PR 1 is a large diff that's hard to evaluate as text. Worth running the app after it lands and
+reviewing the primitives in a browser — the palette, notch geometry, and focus rings in both themes
+— before PRs 2–5 build on top of them.
+
+---
+
+## Risks
+
+| Risk | Mitigation |
+|---|---|
+| `clip-path` / `overflow:hidden` clipping focus rings and the Live Preview inspector outline | Resolved once in Phase 3 via inset `box-shadow` rings; explicit keyboard test on notched components |
+| CMS-supplied artwork is arbitrary — scrims must work over anything | Scrim floor computed at 19.07:1, worst-case midpoint 13.39:1; hero copy never relies on the image being dark |
+| Glow + `backdrop-filter` + many shadows across a full rail = paint cost | Glow capped to two shadow layers; card hover uses a sweep (compositor-friendly) instead of `scale`; profile a 40-card rail before merging Phase 5 |
+| Two token-access spellings in the codebase (`bg-[var(--x)]` vs `bg-(--x)`) | Standardise on the v4 shorthand as each file is touched; don't do a separate churn-only pass |
+| **In-flight uncommitted work** — `search/page.tsx` already has an unstaged v4-shorthand migration, carried onto `feat/cyber-redesign` | Same direction as this plan, so keep it. Commit it as its own change before PR 1 so the token diff stays readable |
+| `Button`'s `asChild` uses `cloneElement` to merge classes ([button.tsx:60-67](../src/components/ui/button.tsx#L60-L67)) | Pseudo-element notches/brackets must be pure CSS on the merged class, not wrapper elements, or `asChild` breaks |
+| Regressing the documented ARIA patterns in [accessibility.md](./accessibility.md) | Phases 4–6 touch `aria-*`/`role`/focus management in exactly two approved places — the `resolvedTheme` toggle fix and the new reduce-effects switch. Everywhere else is class strings only |
+| The reduce-effects toggle could be mistaken for a substitute for `prefers-reduced-motion` | OS-level reduced-motion always wins independently of the toggle; both paths share one set of safe static states |
+| `/setup` copy is CMS-seeded in multiple places | Style-only changes there; no string edits |
+
+## Out of scope
+
+Content model changes; custom video controls; new routes; the `title_grid_block` idea from
+[browse-page-cms-plan.md](./browse-page-cms-plan.md); replacing `lucide-react`; anything requiring a
+Contentstack schema migration; a CMS-driven default effect-intensity field (noted in Phase 7).
diff --git a/package-lock.json b/package-lock.json
index 961c0a2..96b28cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "axe-core": "^4.13.0",
         "dotenv": "^17.4.2",
         "eslint": "^9",
         "eslint-config-next": "16.2.9",
diff --git a/package.json b/package.json
index cbdad30..fb17d8a 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,9 @@
     "customize-fields": "node scripts/customize-editor-fields.mjs",
     "setup-workflow": "node scripts/setup-workflow.mjs",
     "content-governance": "node scripts/content-governance.mjs",
-    "fix-url-patterns": "node scripts/fix-url-patterns.mjs"
+    "fix-url-patterns": "node scripts/fix-url-patterns.mjs",
+    "a11y": "node scripts/a11y.mjs",
+    "check-contrast": "node scripts/check-contrast.mjs"
   },
   "dependencies": {
     "@contentstack/delivery-sdk": "^5.2.2",
@@ -40,6 +42,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "axe-core": "^4.13.0",
     "dotenv": "^17.4.2",
     "eslint": "^9",
     "eslint-config-next": "16.2.9",
diff --git a/scripts/a11y.mjs b/scripts/a11y.mjs
new file mode 100644
index 0000000..6d948e2
--- /dev/null
+++ b/scripts/a11y.mjs
@@ -0,0 +1,179 @@
+#!/usr/bin/env node
+/**
+ * axe-core accessibility audit across every route, in both themes.
+ *
+ * docs/accessibility.md used to document an `npm run a11y` that did not exist.
+ * This is it.
+ *
+ *   npm run dev                 # in another terminal
+ *   npm run a11y                # -> reports/a11y-report.json
+ *   npm run a11y -- --url=http://localhost:3001
+ *
+ * Drives headless Chrome over the DevTools Protocol — no Selenium or Playwright
+ * dependency. Set CHROME_PATH if your browser is somewhere unusual.
+ *
+ * Exits 1 if any violation is found, so it can gate CI.
+ */
+import { spawn } from "node:child_process";
+import { mkdirSync, writeFileSync, existsSync, readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const arg = (name, fallback) => {
+  const hit = process.argv.find((a) => a.startsWith(`--${name}=`));
+  return hit ? hit.slice(name.length + 3) : fallback;
+};
+const BASE = arg("url", "http://localhost:3000").replace(/\/$/, "");
+const PORT = Number(arg("cdp-port", "9222"));
+
+// Routes worth auditing. Dynamic routes use a real slug from the seeded data.
+const ROUTES = [
+  "/", "/browse", "/search", "/movie", "/tv-show",
+  "/genre/sci-fi", "/watch/oppenheimer", "/watch/the-bear",
+  "/profile", "/setup", "/no-such-page-this-404s",
+];
+
+const CHROME_CANDIDATES = [
+  process.env.CHROME_PATH,
+  "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+  "/Applications/Chromium.app/Contents/MacOS/Chromium",
+  "/usr/bin/google-chrome",
+  "/usr/bin/chromium",
+  "/usr/bin/chromium-browser",
+].filter(Boolean);
+
+const chromePath = CHROME_CANDIDATES.find((p) => existsSync(p));
+if (!chromePath) {
+  console.error(
+    "Could not find Chrome. Set CHROME_PATH, e.g.\n" +
+      "  CHROME_PATH='/path/to/chrome' npm run a11y"
+  );
+  process.exit(1);
+}
+
+const axeSource = readFileSync(join(root, "node_modules/axe-core/axe.min.js"), "utf8");
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// --- minimal CDP client -----------------------------------------------------
+const chrome = spawn(
+  chromePath,
+  [
+    "--headless=new",
+    `--remote-debugging-port=${PORT}`,
+    "--hide-scrollbars",
+    "--no-first-run",
+    "--no-default-browser-check",
+    "--user-data-dir=/tmp/flixstack-a11y-profile",
+    "about:blank",
+  ],
+  { stdio: "ignore" }
+);
+
+let wsUrl;
+for (let i = 0; i < 60; i++) {
+  try {
+    const res = await fetch(`http://127.0.0.1:${PORT}/json/version`);
+    const j = await res.json();
+    if (j.webSocketDebuggerUrl) { wsUrl = j.webSocketDebuggerUrl; break; }
+  } catch { /* not up yet */ }
+  await sleep(250);
+}
+if (!wsUrl) { chrome.kill(); console.error("Chrome did not expose a CDP endpoint."); process.exit(1); }
+
+const ws = new WebSocket(wsUrl);
+await new Promise((r) => (ws.onopen = r));
+let msgId = 0;
+const pending = new Map();
+ws.onmessage = (e) => {
+  const m = JSON.parse(e.data);
+  if (m.id && pending.has(m.id)) {
+    const { resolve, reject } = pending.get(m.id);
+    pending.delete(m.id);
+    if (m.error) reject(new Error(JSON.stringify(m.error)));
+    else resolve(m.result);
+  }
+};
+const rawSend = (method, params = {}, sessionId) =>
+  new Promise((resolve, reject) => {
+    const id = ++msgId;
+    pending.set(id, { resolve, reject });
+    ws.send(JSON.stringify({ id, method, params, sessionId }));
+  });
+
+const { targetId } = await rawSend("Target.createTarget", { url: "about:blank" });
+const { sessionId } = await rawSend("Target.attachToTarget", { targetId, flatten: true });
+const send = (m, p) => rawSend(m, p, sessionId);
+const evaluate = async (expression, awaitPromise = false) => {
+  const r = await send("Runtime.evaluate", { expression, returnByValue: true, awaitPromise });
+  if (r.exceptionDetails) throw new Error(r.exceptionDetails.exception?.description ?? r.exceptionDetails.text);
+  return r.result.value;
+};
+
+await send("Page.enable");
+await send("Runtime.enable");
+
+// --- audit ------------------------------------------------------------------
+const report = { base: BASE, generatedAt: null, axeVersion: null, runs: [] };
+let totalViolations = 0;
+
+for (const theme of ["dark", "light"]) {
+  // Theme is a stored preference read by next-themes, so seed it then reload.
+  await send("Emulation.setDeviceMetricsOverride", { width: 1440, height: 900, deviceScaleFactor: 1, mobile: false });
+  await send("Emulation.setEmulatedMedia", { features: [{ name: "prefers-color-scheme", value: "light" }] });
+  await send("Page.navigate", { url: BASE + "/" });
+  await sleep(1500);
+  await evaluate(
+    theme === "light"
+      ? `localStorage.setItem('theme','light')`
+      : `localStorage.removeItem('theme')`
+  );
+
+  for (const route of ROUTES) {
+    await send("Page.navigate", { url: BASE + route });
+    await sleep(2600);
+    await evaluate(axeSource);
+    const result = await evaluate(
+      // Exclude the Next.js dev overlay and the Contentstack Live Preview
+      // widget: third-party UI that is not part of the shipped app.
+      `axe.run(
+         { exclude: [['nextjs-portal'], ['[data-nextjs-toast]'], ['#cs-live-preview-panel']] },
+         { resultTypes: ['violations'], runOnly: { type: 'tag', values: ['wcag2a','wcag2aa','wcag21a','wcag21aa'] } }
+       ).then(r => JSON.stringify({
+         url: r.url,
+         violations: r.violations.map(v => ({
+           id: v.id, impact: v.impact, help: v.help, helpUrl: v.helpUrl,
+           nodes: v.nodes.slice(0, 5).map(n => ({ target: n.target, summary: n.failureSummary })),
+           count: v.nodes.length,
+         })),
+       }))`,
+      true
+    );
+    const parsed = JSON.parse(result);
+    const n = parsed.violations.reduce((s, v) => s + v.count, 0);
+    totalViolations += n;
+    report.runs.push({ theme, route, violations: parsed.violations });
+    const label = `${theme.padEnd(5)} ${route.padEnd(26)}`;
+    if (n === 0) console.log(`${label} clean`);
+    else {
+      console.log(`${label} ${n} violation${n === 1 ? "" : "s"}`);
+      for (const v of parsed.violations) console.log(`    [${v.impact}] ${v.id}: ${v.help} (${v.count})`);
+    }
+  }
+}
+
+report.axeVersion = await evaluate(`axe.version`);
+report.generatedAt = new Date().toISOString();
+
+mkdirSync(join(root, "reports"), { recursive: true });
+writeFileSync(join(root, "reports/a11y-report.json"), JSON.stringify(report, null, 2));
+
+console.log(
+  `\naxe-core ${report.axeVersion} · ${report.runs.length} runs · ` +
+    `${totalViolations} total violation${totalViolations === 1 ? "" : "s"}`
+);
+console.log("report: reports/a11y-report.json");
+
+ws.close();
+chrome.kill();
+process.exit(totalViolations ? 1 : 0);
diff --git a/scripts/check-contrast.mjs b/scripts/check-contrast.mjs
new file mode 100644
index 0000000..e6ab988
--- /dev/null
+++ b/scripts/check-contrast.mjs
@@ -0,0 +1,136 @@
+#!/usr/bin/env node
+/**
+ * WCAG contrast guard for the Flixstack design tokens.
+ *
+ * Parses the real token values out of src/app/globals.css and checks every pair
+ * that ships — so changing a token to a failing value fails this check instead
+ * of shipping. This exists because docs/accessibility.md once asserted that the
+ * light accent was 5.0:1 on white when it was actually 3.30:1, a genuine
+ * WCAG 1.4.3 failure that sat in the codebase unnoticed.
+ *
+ *   node scripts/check-contrast.mjs          # table + exit code
+ *   node scripts/check-contrast.mjs --json   # machine-readable
+ *
+ * Exits 1 if any pair fails.
+ */
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const css = readFileSync(join(root, "src/app/globals.css"), "utf8");
+
+/** Pull `--token: #value;` declarations out of a top-level CSS block. */
+function parseBlock(selector) {
+  // Match the selector's first block. Tokens are flat hex values, so a
+  // non-greedy match to the first closing brace is enough.
+  const re = new RegExp(`(?:^|\\n)${selector}\\s*\\{([^}]*)\\}`, "m");
+  const m = css.match(re);
+  if (!m) throw new Error(`Could not find CSS block for "${selector}"`);
+  const tokens = {};
+  for (const decl of m[1].split(";")) {
+    const t = decl.match(/(--[a-z0-9-]+)\s*:\s*(#[0-9a-fA-F]{6})/);
+    if (t) tokens[t[1]] = t[2].toLowerCase();
+  }
+  return tokens;
+}
+
+const THEMES = { light: parseBlock(":root"), dark: parseBlock("\\.dark") };
+
+const srgb = (c) => {
+  c /= 255;
+  return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+};
+const luminance = (hex) => {
+  const h = hex.replace("#", "");
+  const [r, g, b] = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
+  return 0.2126 * srgb(r) + 0.7152 * srgb(g) + 0.0722 * srgb(b);
+};
+const contrast = (a, b) => {
+  const [x, y] = [luminance(a), luminance(b)];
+  const [hi, lo] = x > y ? [x, y] : [y, x];
+  return (hi + 0.05) / (lo + 0.05);
+};
+
+const SURFACES = ["--color-bg-base", "--color-bg-surface", "--color-bg-elevated"];
+
+/** Text that must clear 4.5:1 (WCAG 1.4.3) on every surface it can sit on. */
+const TEXT_ON_ALL_SURFACES = [
+  "--color-text-primary",
+  "--color-text-secondary",
+  "--color-accent",
+  "--color-accent-hover",
+  "--color-info",
+  "--color-signal",
+  "--color-premium",
+  "--color-error",
+];
+
+/** Non-text UI that must clear 3:1 (WCAG 1.4.11). */
+const UI_ON_ALL_SURFACES = ["--color-border-control", "--color-focus-ring"];
+
+/** Foreground/fill pairs. */
+const FILLS = [
+  ["--color-accent-foreground", "--color-accent", 4.5],
+  ["--color-accent-foreground", "--color-accent-hover", 4.5],
+];
+
+/** Tinted chip backgrounds and the hue that sits on them. */
+const SUBTLE_PAIRS = [
+  ["--color-accent", "--color-accent-subtle"],
+  ["--color-info", "--color-info-subtle"],
+  ["--color-signal", "--color-signal-subtle"],
+  ["--color-premium", "--color-premium-subtle"],
+  ["--color-error", "--color-error-subtle"],
+];
+
+const results = [];
+const add = (theme, fgTok, bgTok, min, tokens) => {
+  const fg = tokens[fgTok];
+  const bg = tokens[bgTok];
+  if (!fg || !bg) {
+    results.push({ theme, fgTok, bgTok, min, missing: true, pass: false });
+    return;
+  }
+  const ratio = contrast(fg, bg);
+  results.push({
+    theme, fgTok, bgTok, fg, bg, min,
+    ratio: Math.round(ratio * 100) / 100,
+    pass: ratio >= min,
+  });
+};
+
+for (const [theme, tokens] of Object.entries(THEMES)) {
+  for (const fg of TEXT_ON_ALL_SURFACES)
+    for (const bg of SURFACES) add(theme, fg, bg, 4.5, tokens);
+  for (const fg of UI_ON_ALL_SURFACES)
+    for (const bg of SURFACES) add(theme, fg, bg, 3.0, tokens);
+  // Disabled text is the one token held only to 3:1, so it is restricted to
+  // non-essential text. Checked on the worst surface it appears on.
+  add(theme, "--color-text-disabled", "--color-bg-elevated", 3.0, tokens);
+  for (const [fg, bg, min] of FILLS) add(theme, fg, bg, min, tokens);
+  for (const [fg, bg] of SUBTLE_PAIRS) add(theme, fg, bg, 4.5, tokens);
+}
+
+const failed = results.filter((r) => !r.pass);
+
+if (process.argv.includes("--json")) {
+  console.log(JSON.stringify({ total: results.length, failed: failed.length, results }, null, 2));
+} else {
+  for (const theme of Object.keys(THEMES)) {
+    console.log(`\n=== ${theme.toUpperCase()} ===`);
+    for (const r of results.filter((x) => x.theme === theme)) {
+      const name = `${r.fgTok.replace("--color-", "")} on ${r.bgTok.replace("--color-", "")}`;
+      console.log(
+        `${r.pass ? "PASS" : "FAIL"}  ${String(r.ratio ?? "—").padStart(6)}:1  (min ${r.min})  ${name}` +
+          (r.missing ? "  [token missing]" : "")
+      );
+    }
+  }
+  console.log(
+    `\n${results.length - failed.length}/${results.length} pass` +
+      (failed.length ? ` — ${failed.length} FAILING` : "")
+  );
+}
+
+process.exit(failed.length ? 1 : 0);
diff --git a/src/app/browse/browse-client.tsx b/src/app/browse/browse-client.tsx
index 5c55823..06c88d6 100644
--- a/src/app/browse/browse-client.tsx
+++ b/src/app/browse/browse-client.tsx
@@ -49,11 +49,11 @@ export function BrowseClient({ titles, genres, heading }: BrowseClientProps) {
     <div className="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8 py-8">
       {/* Page header */}
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-(--color-text-primary) mb-2">
+        <h1 className="font-display text-3xl uppercase text-text-primary mb-2">
           {heading ?? "Browse All Titles"}
         </h1>
-        <p className="text-text-secondary">
-          {filtered.length} title{filtered.length !== 1 ? "s" : ""} available
+        <p className="font-mono text-xs uppercase tracking-widest text-accent tabular-nums">
+          [ {filtered.length} title{filtered.length !== 1 ? "s" : ""} available ]
         </p>
       </div>
 
@@ -64,11 +64,10 @@ export function BrowseClient({ titles, genres, heading }: BrowseClientProps) {
           <button
             onClick={() => setGenreFilter("all")}
             className={cn(
-              "px-4 py-2 rounded-full text-sm font-medium transition-colors",
-              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring)",
+              "notch-sm border px-4 py-2 font-mono text-xs uppercase tracking-wider transition-colors",
               genreFilter === "all"
-                ? "bg-accent text-accent-foreground"
-                : "bg-elevated text-text-secondary hover:text-(--color-text-primary)"
+                ? "border-accent bg-accent text-accent-foreground"
+                : "border-border-control bg-elevated text-text-secondary hover:border-accent hover:text-accent"
             )}
             aria-pressed={genreFilter === "all"}
           >
@@ -79,11 +78,10 @@ export function BrowseClient({ titles, genres, heading }: BrowseClientProps) {
               key={genre.uid}
               onClick={() => setGenreFilter(genre.slug)}
               className={cn(
-                "px-4 py-2 rounded-full text-sm font-medium transition-colors",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring)",
+                "notch-sm border px-4 py-2 font-mono text-xs uppercase tracking-wider transition-colors",
                 genreFilter === genre.slug
-                  ? "bg-accent text-accent-foreground"
-                  : "bg-elevated text-text-secondary hover:text-(--color-text-primary)"
+                  ? "border-accent bg-accent text-accent-foreground"
+                  : "border-border-control bg-elevated text-text-secondary hover:border-accent hover:text-accent"
               )}
               aria-pressed={genreFilter === genre.slug}
             >
@@ -102,7 +100,7 @@ export function BrowseClient({ titles, genres, heading }: BrowseClientProps) {
         <Filter className="h-4 w-4 text-text-secondary" aria-hidden="true" />
 
         {/* Type filter */}
-        <div className="flex items-center gap-1 bg-elevated rounded-lg p-1" role="radiogroup" aria-label="Content type">
+        <div className="flex items-center gap-1 border border-border bg-elevated p-1" role="radiogroup" aria-label="Content type">
           {(["all", "movie", "tv_series"] as ContentFilter[]).map((type) => (
             <button
               key={type}
@@ -110,11 +108,10 @@ export function BrowseClient({ titles, genres, heading }: BrowseClientProps) {
               role="radio"
               aria-checked={typeFilter === type}
               className={cn(
-                "px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
-                "focus-visible:outline-2 focus-visible:outline-(--color-focus-ring)",
+                "px-3 py-1.5 font-mono text-xs uppercase tracking-wider transition-colors",
                 typeFilter === type
-                  ? "bg-surface text-(--color-text-primary) shadow-sm"
-                  : "text-text-secondary hover:text-(--color-text-primary)"
+                  ? "bg-surface text-accent"
+                  : "text-text-secondary hover:text-text-primary"
               )}
             >
               {type === "all" ? "All" : type === "movie" ? "Movies" : "TV Shows"}
@@ -123,7 +120,7 @@ export function BrowseClient({ titles, genres, heading }: BrowseClientProps) {
         </div>
 
         {/* Tier filter */}
-        <div className="flex items-center gap-1 bg-elevated rounded-lg p-1" role="radiogroup" aria-label="Content tier">
+        <div className="flex items-center gap-1 border border-border bg-elevated p-1" role="radiogroup" aria-label="Content tier">
           {["all", "free", "premium"].map((tier) => (
             <button
               key={tier}
@@ -131,11 +128,10 @@ export function BrowseClient({ titles, genres, heading }: BrowseClientProps) {
               role="radio"
               aria-checked={tierFilter === tier}
               className={cn(
-                "px-3 py-1.5 rounded-md text-sm font-medium transition-colors capitalize",
-                "focus-visible:outline-2 focus-visible:outline-(--color-focus-ring)",
+                "px-3 py-1.5 font-mono text-xs uppercase tracking-wider transition-colors",
                 tierFilter === tier
-                  ? "bg-surface text-(--color-text-primary) shadow-sm"
-                  : "text-text-secondary hover:text-(--color-text-primary)"
+                  ? "bg-surface text-accent"
+                  : "text-text-secondary hover:text-text-primary"
               )}
             >
               {tier === "all" ? "All Tiers" : tier}
@@ -145,11 +141,11 @@ export function BrowseClient({ titles, genres, heading }: BrowseClientProps) {
 
         {/* Sort */}
         <label className="flex items-center gap-2 ml-auto text-sm">
-          <span className="text-text-secondary">Sort:</span>
+          <span className="font-mono text-xs uppercase tracking-wider text-text-secondary">Sort:</span>
           <select
             value={sort}
             onChange={(e) => setSort(e.target.value as SortOption)}
-            className="bg-elevated border border-border text-(--color-text-primary) rounded-lg px-3 py-1.5 text-sm focus-visible:outline-2 focus-visible:outline-(--color-focus-ring)"
+            className="border border-border-control bg-elevated px-3 py-1.5 font-mono text-xs uppercase tracking-wider text-text-primary"
             aria-label="Sort titles by"
           >
             <option value="score">Top Rated</option>
@@ -179,9 +175,12 @@ export function BrowseClient({ titles, genres, heading }: BrowseClientProps) {
           ))}
         </div>
       ) : (
-        <div className="flex flex-col items-center justify-center py-24 text-center">
-          <Grid className="h-12 w-12 text-text-disabled mb-4" aria-hidden="true" />
-          <h2 className="text-lg font-semibold text-(--color-text-primary) mb-2">
+        <div className="notch scanlines relative mx-auto max-w-md border border-border-control bg-surface flex flex-col items-center justify-center py-16 px-6 text-center">
+          <Grid className="h-10 w-10 text-text-disabled mb-4" aria-hidden="true" />
+          <p className="font-mono text-xs uppercase tracking-widest text-signal mb-2">
+            No signal
+          </p>
+          <h2 className="font-display text-lg uppercase text-text-primary mb-2">
             No titles found
           </h2>
           <p className="text-text-secondary mb-4">
@@ -189,7 +188,7 @@ export function BrowseClient({ titles, genres, heading }: BrowseClientProps) {
           </p>
           <button
             onClick={() => { setTypeFilter("all"); setGenreFilter("all"); setTierFilter("all"); }}
-            className="text-accent hover:underline text-sm font-medium focus-visible:outline-2 focus-visible:outline-(--color-focus-ring) rounded-sm"
+            className="focus-inset font-mono text-xs uppercase tracking-wider text-accent hover:underline"
           >
             Clear all filters
           </button>
diff --git a/src/app/genre/[slug]/page.tsx b/src/app/genre/[slug]/page.tsx
index b4a4057..1c754ed 100644
--- a/src/app/genre/[slug]/page.tsx
+++ b/src/app/genre/[slug]/page.tsx
@@ -45,21 +45,25 @@ export default async function GenrePage({ params, searchParams }: PageProps) {
     <div>
       {/* Genre hero */}
       <section
-        className="relative h-48 sm:h-64 overflow-hidden"
+        className="hud-frame relative h-48 sm:h-64 overflow-hidden bg-[#05070A]"
         aria-label={`${genre.title} genre`}
         data-cs-entry={genre.uid}
         data-cs-content-type="genre"
-        style={{ backgroundColor: genre.color_accent + "20" }}
       >
         {genre.hero_image && (
           <Image
             src={genre.hero_image.url}
             alt=""
             fill
-            className="object-cover opacity-30"
+            className="object-cover opacity-40"
             aria-hidden="true"
           />
         )}
+        {/* Genre identity tint, then the same fixed-dark scrim as the other
+            heroes. The copy below is white, so its contrast must not depend on
+            color_accent — that field is editor-chosen in Contentstack, and a
+            light accent (e.g. a yellow "Comedy") took the heading to 3.40:1 in
+            dark mode when the text sat directly on the tint. */}
         <div
           className="absolute inset-0"
           style={{
@@ -67,19 +71,20 @@ export default async function GenrePage({ params, searchParams }: PageProps) {
           }}
           aria-hidden="true"
         />
+        <div className="hero-scrim scanlines absolute inset-0" aria-hidden="true" />
         <div className="relative h-full flex flex-col justify-end px-4 sm:px-6 lg:px-8 pb-8">
           <div className="flex items-center gap-3 mb-2">
             <div
-              className="h-1 w-8 rounded-full"
+              className="h-1 w-8"
               style={{ backgroundColor: genre.color_accent }}
               aria-hidden="true"
             />
-            <span className="text-sm font-medium text-[var(--color-text-secondary)]">Genre</span>
+            <span className="font-mono text-xs uppercase tracking-widest text-white/70">Genre</span>
           </div>
-          <h1 className="text-4xl font-bold text-[var(--color-text-primary)]" {...genre.$?.title}>
+          <h1 className="font-display chromatic text-4xl uppercase text-white" {...genre.$?.title}>
             {genre.title}
           </h1>
-          <p className="text-[var(--color-text-secondary)] mt-1 max-w-xl" {...genre.$?.description}>
+          <p className="text-white/85 mt-1 max-w-xl" {...genre.$?.description}>
             {genre.description}
           </p>
         </div>
@@ -88,8 +93,8 @@ export default async function GenrePage({ params, searchParams }: PageProps) {
       {/* Titles grid */}
       <div className="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8 py-8">
         <div className="flex items-center justify-between mb-6">
-          <p className="text-[var(--color-text-secondary)] text-sm">
-            {titles.length} title{titles.length !== 1 ? "s" : ""} in {genre.title}
+          <p className="font-mono text-xs uppercase tracking-widest text-accent tabular-nums">
+            [ {titles.length} title{titles.length !== 1 ? "s" : ""} in {genre.title} ]
           </p>
         </div>
 
@@ -104,6 +109,7 @@ export default async function GenrePage({ params, searchParams }: PageProps) {
                 <TitleCard
                   title={title}
                   layout="portrait"
+                      fullWidth
                   data-cs-entry={title.uid}
                   data-cs-content-type={title.content_type}
                 />
@@ -111,8 +117,11 @@ export default async function GenrePage({ params, searchParams }: PageProps) {
             ))}
           </div>
         ) : (
-          <div className="py-20 text-center">
-            <p className="text-[var(--color-text-secondary)]">
+          <div className="notch scanlines relative mx-auto max-w-md border border-border-control bg-surface py-14 px-6 text-center">
+            <p className="font-mono text-xs uppercase tracking-widest text-signal mb-2">
+              No signal
+            </p>
+            <p className="text-text-secondary">
               No titles found in {genre.title} yet.
             </p>
           </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 19e979d..493c3f3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,99 +1,252 @@
 @import "tailwindcss";
 
+/* Tailwind v4's `dark:` variant defaults to the prefers-color-scheme media
+   query, but this app switches themes with a `.dark` class on <html>
+   (next-themes, attribute="class"). Without this the two disagree: a visitor on
+   a light OS with the app in dark mode would get dark surfaces and light-mode
+   `dark:` utilities. That is not hypothetical — it is how getRatingColor came to
+   render its light-theme red on a dark card, which axe caught at 3.73:1.
+   No `dark:` utilities remain today, so this is preventive: it makes the next
+   one written behave the way its author will expect. */
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* ============================================================
-   FLIXSTACK DESIGN SYSTEM — CSS Custom Properties
-   Light mode = default, dark mode applied via .dark class
-   All green accent values are WCAG AA validated:
-     #16A34A on white → 5.0:1 ratio (AA pass)
-     #4ADE80 on #0D0D0D → 9.4:1 ratio (AAA pass)
+   FLIXSTACK DESIGN SYSTEM v2 — CSS Custom Properties
+   Light mode = default (:root), dark mode applied via .dark class.
+
+   Four signal hues with distinct jobs, replacing the single
+   utility green that previously served as accent + success + focus:
+     accent  (phosphor green) — interactive / primary
+     info    (cyan)           — informational / data
+     signal  (magenta)        — live / attention
+     premium (amber)          — premium tier, the warm counterpoint
+
+   Every value below is computed against every surface it can sit on.
+   Text pairs clear 4.5:1 (WCAG 1.4.3); control borders and focus
+   rings clear 3:1 (WCAG 1.4.11). See docs/cyber-redesign-plan.md
+   for the full ratio tables.
+
+   NOTE: light-mode accent was #16A34A, documented as 5.0:1 on white
+   but actually 3.30:1 — a real AA failure for accent text and for
+   the white-on-green primary button. It is now #0E7038 (6.19:1).
    ============================================================ */
 
 :root {
-  /* Backgrounds */
-  --color-bg-base: #f8f9fa;
+  /* Backgrounds — "daylight terminal" */
+  --color-bg-base: #edf1f2;
   --color-bg-surface: #ffffff;
-  --color-bg-elevated: #f1f3f5;
+  --color-bg-elevated: #e1e7e9;
 
   /* Text */
-  --color-text-primary: #111111;
-  --color-text-secondary: #4a4a4a;
-  --color-text-disabled: #9ca3af;
+  --color-text-primary: #0a1014;    /* 19.14:1 on surface, 16.83:1 on base */
+  --color-text-secondary: #47535c;  /* 7.90 / 6.94 / 6.32:1 */
+  --color-text-disabled: #6b7a83;   /* 3.55:1 on elevated — non-essential text only */
 
-  /* Accent — green, WCAG AA on white */
-  --color-accent: #16a34a;
-  --color-accent-hover: #15803d;
-  --color-accent-subtle: #dcfce7;
-  --color-accent-foreground: #ffffff;
+  /* Accent — phosphor green, darkened for paper */
+  --color-accent: #0e7038;          /* 6.19 / 5.44 / 4.95:1 */
+  --color-accent-hover: #0a5c2e;    /* 8.13 / 7.15 / 6.51:1 */
+  --color-accent-subtle: #dcfce7;   /* accent on subtle = 5.63:1 */
+  --color-accent-foreground: #ffffff; /* 6.19:1 on accent fill */
 
-  /* Borders */
-  --color-border: #e5e7eb;
+  /* Info — cyan */
+  --color-info: #0b5f76;            /* 7.21 / 6.34 / 5.77:1 */
+  --color-info-subtle: #cffafe;     /* info on subtle = 6.44:1 */
+
+  /* Signal — magenta */
+  --color-signal: #86198f;          /* 8.24 / 7.24 / 6.59:1 */
+  --color-signal-subtle: #fae8ff;   /* signal on subtle = 7.08:1 */
+
+  /* Borders — decorative dividers vs. control boundaries.
+     Dividers are exempt from 1.4.11; control borders are not, because
+     the border is the only affordance identifying an input. */
+  --color-border: #d3dbde;
+  --color-border-control: #6e7d86;  /* 4.25 / 3.74 / 3.40:1 */
 
   /* Focus ring */
-  --color-focus-ring: #16a34a;
+  --color-focus-ring: #0e7038;
 
-  /* Premium badge */
-  --color-premium: #d97706;
-  --color-premium-subtle: #fef3c7;
+  /* Premium badge — amber */
+  --color-premium: #9a4508;         /* 6.50 / 5.72 / 5.21:1 */
+  --color-premium-subtle: #fef3c7;  /* premium on subtle = 5.84:1 */
 
   /* Status */
-  --color-error: #dc2626;
-  --color-error-subtle: #fef2f2;
-  --color-success: #16a34a;
-  --color-warning: #d97706;
+  --color-error: #b91c1c;           /* 6.47 / 5.69 / 5.18:1 */
+  --color-error-subtle: #fee2e2;    /* error on subtle = 5.30:1 */
+  --color-success: #0e7038;
+  --color-warning: #9a4508;
+
+  /* --- Texture & glow. Light mode is deliberately near-flat: the
+     cyber treatment is dark-native, so daylight keeps the geometry
+     and typography but almost none of the CRT artefacts. --- */
+  --scanline-color: #0a1014;
+  --scanline-opacity: 0.02;
+  --grain-opacity: 0.015;
+  --grid-line: #c3ccd1;
+  --grid-opacity: 0.5;
+  --underglow-opacity: 0.4;
+  --fx-hud-opacity: 0.5;
+  --fx-sweep-opacity: 0.7;
+  --fx-glitch: glitch-tear 180ms steps(3, end) 3;
+
+  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent);
+  --glow-info: 0 0 0 1px color-mix(in srgb, var(--color-info) 22%, transparent);
+  --glow-signal: 0 0 0 1px color-mix(in srgb, var(--color-signal) 22%, transparent);
+  --shadow-panel: 0 1px 2px rgb(10 16 20 / 0.06), 0 2px 8px -2px rgb(10 16 20 / 0.08);
+  --fx-chromatic: none;
 }
 
 .dark {
-  /* Backgrounds */
-  --color-bg-base: #0d0d0d;
-  --color-bg-surface: #1a1a1a;
-  --color-bg-elevated: #242424;
+  /* Backgrounds — blue-black, not neutral black */
+  --color-bg-base: #05070a;
+  --color-bg-surface: #0b0f14;
+  --color-bg-elevated: #121822;
 
   /* Text */
-  --color-text-primary: #f2f2f2;
-  --color-text-secondary: #a0a0a0;
-  --color-text-disabled: #555555;
+  --color-text-primary: #e6f1f5;    /* 17.54 / 16.72 / 15.49:1 */
+  --color-text-secondary: #94a9b8;  /* 8.28 / 7.89 / 7.31:1 */
+  --color-text-disabled: #5c6f7e;   /* 3.42:1 on elevated */
+
+  /* Accent — phosphor green */
+  --color-accent: #3dff9e;          /* 15.36 / 14.64 / 13.56:1 */
+  --color-accent-hover: #7dffbf;    /* 16.26 / 15.49 / 14.35:1 */
+  --color-accent-subtle: #06231a;   /* accent on subtle = 12.66:1 */
+  --color-accent-foreground: #04120a; /* 14.59:1 on accent fill */
 
-  /* Accent — lighter green, WCAG AA on dark bg */
-  --color-accent: #4ade80;
-  --color-accent-hover: #86efac;
-  --color-accent-subtle: #052e16;
-  --color-accent-foreground: #052e16;
+  /* Info — cyan */
+  --color-info: #22d3ee;            /* 11.16 / 10.63 / 9.85:1 */
+  --color-info-subtle: #04222b;     /* info on subtle = 9.16:1 */
+
+  /* Signal — magenta */
+  --color-signal: #ff4fd8;          /* 7.07 / 6.74 / 6.24:1 */
+  --color-signal-subtle: #2a0724;   /* signal on subtle = 6.38:1 */
 
   /* Borders */
-  --color-border: #2e2e2e;
+  --color-border: #1e2a38;
+  --color-border-control: #56708a;  /* 3.92 / 3.73 / 3.46:1 */
 
   /* Focus ring */
-  --color-focus-ring: #4ade80;
+  --color-focus-ring: #3dff9e;
 
-  /* Premium badge */
-  --color-premium: #fbbf24;
-  --color-premium-subtle: #451a03;
+  /* Premium badge — amber */
+  --color-premium: #fbbf24;         /* 12.08 / 11.51 / 10.67:1 */
+  --color-premium-subtle: #2b1c02;  /* premium on subtle = 9.91:1 */
 
   /* Status */
-  --color-error: #f87171;
-  --color-error-subtle: #450a0a;
-  --color-success: #4ade80;
+  --color-error: #ff6b6b;           /* 7.27 / 6.93 / 6.42:1 */
+  --color-error-subtle: #2b0a0a;    /* error on subtle = 6.58:1 */
+  --color-success: #3dff9e;
   --color-warning: #fbbf24;
+
+  /* --- Texture & glow --- */
+  --scanline-color: #e6f1f5;
+  --scanline-opacity: 0.035;
+  --grain-opacity: 0.025;
+  --grid-line: #1e2a38;
+  --grid-opacity: 1;
+  --underglow-opacity: 0.75;
+  --fx-hud-opacity: 1;
+  --fx-sweep-opacity: 1;
+  --fx-glitch: glitch-tear 180ms steps(3, end) 3;
+
+  /* Capped at two layers — glow is decorative and must never be the
+     only thing carrying contrast or identifying a control. */
+  --glow-accent:
+    0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent),
+    0 0 12px -2px color-mix(in srgb, var(--color-accent) 55%, transparent);
+  --glow-info:
+    0 0 0 1px color-mix(in srgb, var(--color-info) 40%, transparent),
+    0 0 12px -2px color-mix(in srgb, var(--color-info) 55%, transparent);
+  --glow-signal:
+    0 0 0 1px color-mix(in srgb, var(--color-signal) 40%, transparent),
+    0 0 12px -2px color-mix(in srgb, var(--color-signal) 55%, transparent);
+  --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.5), 0 4px 16px -4px rgb(0 0 0 / 0.6);
+
+  /* Strange Days chromatic fringe — 1px cyan/magenta offset */
+  --fx-chromatic:
+    -1px 0 0 color-mix(in srgb, var(--color-signal) 55%, transparent),
+    1px 0 0 color-mix(in srgb, var(--color-info) 55%, transparent);
+}
+
+/* ============================================================
+   .reduce-fx — the user-facing "reduce effects" escape hatch.
+
+   Gating happens at the TOKEN level, not per-selector, so texture
+   switches off everywhere at once and no effect can escape it.
+   Standing rule for every component: never hardcode an opacity,
+   glow, or shadow that bypasses these tokens.
+
+   The class is applied to <html> (see PR 5 for persistence + UI).
+   This is a *preference* and never a substitute for
+   prefers-reduced-motion — that media query works independently
+   below, and always wins.
+   ============================================================ */
+.reduce-fx {
+  --scanline-opacity: 0;
+  --grain-opacity: 0;
+  --grid-opacity: 0;
+  --underglow-opacity: 0;
+  --fx-hud-opacity: 0;
+  --fx-sweep-opacity: 0;
+  --fx-glitch: none;
+  --glow-accent: none;
+  --glow-info: none;
+  --glow-signal: none;
+  --fx-chromatic: none;
 }
 
 @theme inline {
   --color-background: var(--color-bg-base);
   --color-foreground: var(--color-text-primary);
+
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --font-display: var(--font-chakra-petch);
 
   --color-accent: var(--color-accent);
   --color-accent-hover: var(--color-accent-hover);
   --color-accent-subtle: var(--color-accent-subtle);
   --color-accent-foreground: var(--color-accent-foreground);
 
+  --color-info: var(--color-info);
+  --color-info-subtle: var(--color-info-subtle);
+  --color-signal: var(--color-signal);
+  --color-signal-subtle: var(--color-signal-subtle);
+  --color-premium: var(--color-premium);
+  --color-premium-subtle: var(--color-premium-subtle);
+
   --color-surface: var(--color-bg-surface);
   --color-elevated: var(--color-bg-elevated);
   --color-border: var(--color-border);
+  --color-border-control: var(--color-border-control);
 
   --color-text-primary: var(--color-text-primary);
   --color-text-secondary: var(--color-text-secondary);
   --color-text-disabled: var(--color-text-disabled);
+
+  /* Shape scale. Semantic names for new work — and the stock Tailwind
+     radii are deliberately re-pointed at the same sharp scale so the
+     ~40 existing `rounded-lg`/`rounded-md` call sites adopt the new
+     geometry without a churn-only find-and-replace pass. Later phases
+     migrate to the semantic names. `rounded-full` is untouched: it is
+     the eXistenZ pod curve. */
+  --radius-chip: 1px;
+  --radius-panel: 2px;
+  --radius-control: 3px;
+  --radius-pod: 999px;
+
+  --radius-xs: 1px;
+  --radius-sm: 1px;
+  --radius-md: 2px;
+  --radius-lg: 2px;
+  --radius-xl: 3px;
+  --radius-2xl: 4px;
+  --radius-3xl: 6px;
+}
+
+/* Corner-cut size for notched HUD panels */
+:root {
+  --notch: 10px;
+  --notch-sm: 6px;
 }
 
 /* Base resets */
@@ -110,6 +263,24 @@ html {
 
 body {
   background-color: var(--color-bg-base);
+  /* CRT texture lives in the body BACKGROUND, behind every surface, rather
+     than in an overlay on top. A fixed full-screen overlay would put texture
+     over poster art and body copy, which is exactly what the design guardrail
+     forbids. Alpha comes from the gated tokens via color-mix, so .reduce-fx
+     switches it off with everything else. */
+  background-image:
+    repeating-linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--scanline-color) calc(var(--scanline-opacity) * 100%), transparent) 0 1px,
+      transparent 1px 3px
+    ),
+    radial-gradient(
+      circle at 50% 50%,
+      color-mix(in srgb, var(--scanline-color) calc(var(--grain-opacity) * 100%), transparent) 0.5px,
+      transparent 0.5px
+    );
+  background-size: 100% 3px, 3px 3px;
+  background-attachment: fixed;
   color: var(--color-text-primary);
   font-family: var(--font-geist-sans, Arial, Helvetica, sans-serif);
   line-height: 1.6;
@@ -117,11 +288,75 @@ body {
   transition: background-color 0.2s ease, color 0.2s ease;
 }
 
+/* Display face — headings and short labels only. Uppercase is applied
+   with text-transform (never by changing the source string) so
+   assistive tech still reads normal-case text. Never applied to
+   sentences or paragraphs. */
+.font-display {
+  font-family: var(--font-chakra-petch), var(--font-geist-sans, sans-serif);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-wrap: balance;
+}
+
 /* Accessible focus ring — only for keyboard nav */
 :focus-visible {
   outline: 2px solid var(--color-focus-ring);
   outline-offset: 2px;
-  border-radius: 4px;
+  border-radius: 2px;
+}
+
+/* ============================================================
+   Notched HUD panels.
+
+   clip-path clips an element's OUTLINE, and overflow:hidden on an
+   ancestor clips a descendant's outline. So a notch would silently
+   destroy the :focus-visible ring above — an accessibility
+   regression that is invisible in a screenshot.
+
+   Fix: notched elements take their focus indicator as an inset
+   box-shadow ring, which is clipped WITH the shape and stays
+   visible. `:has()` covers notched containers whose focusable
+   child would otherwise have its own ring clipped.
+   ============================================================ */
+.notch {
+  clip-path: polygon(
+    var(--notch) 0,
+    100% 0,
+    100% calc(100% - var(--notch)),
+    calc(100% - var(--notch)) 100%,
+    0 100%,
+    0 var(--notch)
+  );
+}
+
+.notch-sm {
+  clip-path: polygon(
+    var(--notch-sm) 0,
+    100% 0,
+    100% calc(100% - var(--notch-sm)),
+    calc(100% - var(--notch-sm)) 100%,
+    0 100%,
+    0 var(--notch-sm)
+  );
+}
+
+/* Two-tone inset ring, and it has to be two-tone: a single ring in
+   --color-focus-ring is invisible on the primary button, whose fill IS
+   the accent colour. The inner band is the page ground and the outer
+   band is the focus colour, so whichever way the fill goes, one of the
+   two always contrasts:
+     - on accent / error fills → the ground band carries it (>= 7.2:1)
+     - on surface / elevated / transparent → the accent band carries it
+   Both bands are inset, so the notch's clip-path cannot clip them. */
+.notch:focus-visible,
+.notch-sm:focus-visible,
+.notch:has(:focus-visible),
+.notch-sm:has(:focus-visible) {
+  outline: none;
+  box-shadow:
+    inset 0 0 0 2px var(--color-bg-base),
+    inset 0 0 0 4px var(--color-focus-ring);
 }
 
 /* Skip to main content — accessibility */
@@ -145,9 +380,12 @@ body {
   background: var(--color-accent);
   color: var(--color-accent-foreground);
   padding: 0.75rem 1.5rem;
-  border-radius: 0.5rem;
+  border-radius: var(--radius-control);
   font-weight: 600;
   font-size: 1rem;
+  font-family: var(--font-geist-mono, monospace);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 /* Scrollbar styling */
@@ -159,18 +397,17 @@ body {
   background: var(--color-bg-base);
 }
 ::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: 4px;
+  background: var(--color-border-control);
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-disabled);
+  background: var(--color-accent);
 }
 
 /* Rail horizontal scroll */
 .scroll-rail {
   overflow-x: auto;
   scrollbar-width: thin;
-  scrollbar-color: var(--color-border) transparent;
+  scrollbar-color: var(--color-border-control) transparent;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
 }
@@ -178,18 +415,366 @@ body {
   height: 4px;
 }
 
-/* Skeleton animation */
-@keyframes skeleton-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
+/* ============================================================
+   Texture utilities — chrome only. None of these may sit over
+   poster artwork or body copy: if texture never touches text,
+   text contrast stays computable.
+   All are pointer-events:none and driven by gated tokens.
+   ============================================================ */
+
+/* CRT scanlines */
+.scanlines::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    to bottom,
+    var(--scanline-color) 0 1px,
+    transparent 1px 3px
+  );
+  opacity: var(--scanline-opacity);
+}
+
+/* Hackers isometric wireframe grid */
+.grid-backdrop::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+  background-size: 64px 64px;
+  opacity: var(--grid-opacity);
+  z-index: 0;
+  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 0%, transparent 75%);
+}
+
+/* Film grain */
+.grain::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: var(--grain-opacity);
+  background-image: radial-gradient(
+    circle at 50% 50%,
+    var(--scanline-color) 0.5px,
+    transparent 0.5px
+  );
+  background-size: 3px 3px;
+}
+
+/* ============================================================
+   CASCADE RULE for every utility below.
+
+   These classes are UNLAYERED, and Tailwind's utilities live in
+   @layer utilities. Unlayered CSS beats layered CSS regardless of
+   specificity — so a `position` declared here silently overrides
+   `absolute` / `sticky` / `fixed` from a Tailwind class on the same
+   element. That already cost us twice: `.chrome-underglow` turned the
+   sticky header into a relative one, and `.scanlines` collapsed the
+   hero scrim to 0px tall by overriding `absolute inset-0`.
+
+   So: none of these classes declare `position`. Each one needs a
+   positioning context for its pseudo-element, and the CONSUMER
+   supplies it with a Tailwind class (`relative`, `absolute`, `sticky`).
+   ============================================================ */
+
+/* Header underglow — a phosphor hairline instead of a flat divider. Sits on
+   top of the real border, which stays put so the header keeps an edge when
+   .reduce-fx or forced-colors switches the glow off. */
+.chrome-underglow::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: 1px;
+  pointer-events: none;
+  opacity: var(--underglow-opacity);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--color-accent) 60%, transparent) 20%,
+    color-mix(in srgb, var(--color-accent) 60%, transparent) 80%,
+    transparent
+  );
+}
+
+/* Nav links — an underscore caret that grows on hover/focus and sits full
+   width on the active route. Driven by [aria-current="page"], which nav.tsx
+   already sets, so the indicator derives from real semantics rather than a
+   parallel "isActive" class. Never the only cue: the active link also shifts
+   to the accent colour and carries aria-current for assistive tech. */
+.nav-link::after {
+  content: "";
+  position: absolute;
+  left: 0.75rem;
+  right: 0.75rem;
+  bottom: 0.25rem;
+  height: 2px;
+  background: var(--color-accent);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 180ms ease;
+}
+.nav-link:hover::after,
+.nav-link:focus-visible::after {
+  transform: scaleX(0.4);
+}
+.nav-link[aria-current="page"]::after {
+  transform: scaleX(1);
+}
+
+/* ============================================================
+   Hero scrim — three layers: a horizontal wash where the copy sits,
+   a bottom vignette, and scanlines (added separately via .scanlines).
+
+   Both gradients are a FIXED dark ink in both themes, deliberately not
+   a theme token. Hero copy is white in both themes, so a scrim that
+   followed the theme would fade white text into a near-white ground in
+   light mode — which is exactly what shipped before: the old bottom
+   vignette used `from-background` and put the title at 1.12:1 in light
+   mode.
+
+   Worst case over pure-white artwork, sampled across the whole text
+   region: title 10.21:1, subtitle (white/80) 7.23:1. So hero copy never
+   depends on the CMS supplying a dark image.
+   ============================================================ */
+.hero-scrim {
+  background-image:
+    linear-gradient(
+      to right,
+      rgb(5 7 10 / 0.95) 0%,
+      rgb(5 7 10 / 0.8) 30%,
+      rgb(5 7 10 / 0.35) 60%,
+      rgb(5 7 10 / 0) 85%
+    ),
+    linear-gradient(
+      to top,
+      rgb(5 7 10 / 0.98) 0%,
+      rgb(5 7 10 / 0.75) 25%,
+      rgb(5 7 10 / 0.15) 55%,
+      rgb(5 7 10 / 0) 75%
+    );
+}
+
+/* Corner HUD brackets — two corners only, echoing the notch direction */
+.hud-frame::before,
+.hud-frame::after {
+  content: "";
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  pointer-events: none;
+  opacity: var(--fx-hud-opacity);
+  border-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
+  border-style: solid;
+  border-width: 0;
+}
+.hud-frame::before {
+  top: 14px;
+  left: 14px;
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+.hud-frame::after {
+  bottom: 14px;
+  right: 14px;
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+
+/* Scan sweep — replaces hover:scale on cards. A transform on a pseudo
+   element composites, where scaling a whole card forces layout work for
+   every card in a rail. Fires on hover AND focus-within so keyboard
+   users get the same feedback. */
+@keyframes scan-sweep {
+  from {
+    transform: translateX(-110%);
+  }
+  to {
+    transform: translateX(110%);
+  }
+}
+.sweep {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  opacity: 0;
+}
+.sweep::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-110%);
+  background: linear-gradient(
+    105deg,
+    transparent 42%,
+    color-mix(in srgb, var(--color-accent) 22%, transparent) 50%,
+    transparent 58%
+  );
+}
+.sweep-host:hover .sweep,
+.sweep-host:focus-within .sweep {
+  opacity: var(--fx-sweep-opacity);
+}
+.sweep-host:hover .sweep::after,
+.sweep-host:focus-within .sweep::after {
+  animation: scan-sweep 520ms ease-out;
+}
+
+/* Inset focus ring for focusable elements *inside* a notched container.
+   A parent's clip-path clips descendant painting, and outline-offset
+   pushes a ring outward — so a child's outline can land outside the clip
+   and vanish. An inset ring sits within the child's own box and survives.
+   Single-tone is enough here: these sit on neutral surfaces, not on an
+   accent fill (see .notch:focus-visible for why that case needs two). */
+.focus-inset:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--color-focus-ring);
+}
+
+/* Rail edge fade. Disabled while anything inside has focus: a mask clips
+   painting, so a focused card scrolled to the boundary would have its
+   focus ring faded out. Keyboard users get no fade at all. */
+.rail-fade:not(:focus-within) {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 2rem,
+    #000 calc(100% - 2rem),
+    transparent 100%
+  );
+}
+
+/* Terminal bracket affordance for Button variant="terminal".
+   Drawn with borders rather than "[" / "]" characters so screen
+   readers have no punctuation to announce. */
+.btn-terminal::before,
+.btn-terminal::after {
+  content: "";
+  position: absolute;
+  top: 25%;
+  bottom: 25%;
+  width: 4px;
+  border: 1px solid currentColor;
+  opacity: 0.55;
+  pointer-events: none;
+}
+.btn-terminal::before {
+  left: 6px;
+  border-right: 0;
+}
+.btn-terminal::after {
+  right: 6px;
+  border-left: 0;
+}
+
+/* Glow helpers — decorative only, and deliberately not used on
+   focusable controls: a hover glow and an inset focus ring both
+   occupy box-shadow, and the focus indicator must always win. */
+.glow-accent {
+  box-shadow: var(--glow-accent);
+}
+.glow-info {
+  box-shadow: var(--glow-info);
+}
+.glow-signal {
+  box-shadow: var(--glow-signal);
+}
+
+/* Strange Days chromatic fringe — hover/focus only, single-shot */
+.chromatic {
+  transition: text-shadow 120ms ease;
+}
+.chromatic:hover,
+.chromatic:focus-visible {
+  text-shadow: var(--fx-chromatic);
+}
+
+/* Terminal caret — 1.06s ≈ 0.94 Hz, the fastest repeating element
+   on the site and well under the WCAG 2.3.1 three-flashes ceiling. */
+@keyframes caret-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  50.01%,
+  100% {
+    opacity: 0;
+  }
+}
+.terminal-caret::after {
+  content: "";
+  display: inline-block;
+  width: 0.55em;
+  height: 1em;
+  margin-left: 0.15em;
+  vertical-align: -0.15em;
+  background: var(--color-accent);
+  animation: caret-blink 1.06s steps(1, end) infinite;
+}
+
+/* Glitch displacement — Strange Days signal tear. Used on the 404 numeral
+   only, and only three times before stopping for good.
+
+   This is displacement plus a chromatic offset, never a luminance strobe, so
+   it is not a "flash" under WCAG 2.3.1 — and the element is a small decorative
+   numeral, far under the large-flash area threshold. It is still motion, so it
+   is gated by prefers-reduced-motion and by --fx-glitch below. */
+@keyframes glitch-tear {
+  0% { transform: translate3d(0, 0, 0); }
+  20% { transform: translate3d(-4px, 1px, 0); }
+  40% { transform: translate3d(3px, -1px, 0); }
+  60% { transform: translate3d(-2px, 0, 0); }
+  80% { transform: translate3d(2px, 1px, 0); }
+  100% { transform: translate3d(0, 0, 0); }
+}
+.glitch {
+  animation: var(--fx-glitch);
+  text-shadow: var(--fx-chromatic);
+}
+
+/* Skeleton — scanline sweep, single direction, no flash */
+@keyframes skeleton-sweep {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
 }
 .skeleton {
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
+  overflow: hidden;
   background: var(--color-bg-elevated);
-  border-radius: 6px;
+  border-radius: var(--radius-panel);
+}
+.skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--color-accent) 12%, transparent),
+    transparent
+  );
+  animation: skeleton-sweep 1.8s ease-in-out infinite;
 }
 
-/* Reduced motion */
+/* ============================================================
+   Reduced motion.
+
+   The blanket duration override is kept for inherited transitions,
+   but it is NOT safe on its own for directional keyframes: forcing
+   a sweep or glitch to 0.01ms freezes it at an arbitrary offset and
+   can leave an element visibly displaced. So every named animation
+   above also gets an explicit `animation: none` plus a defined safe
+   static state.
+   ============================================================ */
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -198,13 +783,139 @@ body {
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
+
+  html {
+    scroll-behavior: auto;
+  }
+
+  /* Safe static states */
   .skeleton {
-    animation: none;
     opacity: 0.6;
   }
+  .skeleton::after {
+    animation: none !important;
+    display: none;
+  }
+  .terminal-caret::after {
+    animation: none !important;
+    opacity: 1;
+  }
+  .sweep,
+  .sweep-host:hover .sweep,
+  .sweep-host:focus-within .sweep {
+    opacity: 0;
+  }
+  .sweep::after {
+    animation: none !important;
+  }
+  .glitch {
+    animation: none !important;
+    transform: none;
+    text-shadow: none;
+  }
+  .chromatic:hover,
+  .chromatic:focus-visible {
+    text-shadow: none;
+  }
 }
 
-/* Dev overlay highlight */
+/* Same safe static states for the user-facing toggle. Kept separate
+   from the media query so the OS setting always wins on its own. */
+.reduce-fx .skeleton::after {
+  animation: none;
+  display: none;
+}
+.reduce-fx .skeleton {
+  opacity: 0.6;
+}
+.reduce-fx .terminal-caret::after {
+  animation: none;
+  opacity: 1;
+}
+.reduce-fx .sweep::after {
+  animation: none;
+}
+.reduce-fx .glitch {
+  animation: none;
+  transform: none;
+  text-shadow: none;
+}
+
+/* ============================================================
+   Forced colours (Windows High Contrast).
+   The OS replaces the palette and drops box-shadow entirely, so any
+   affordance carried only by a glow or a clipped shape disappears.
+   Restore real borders and remove decorative overlays.
+   ============================================================ */
+@media (forced-colors: active) {
+  .notch,
+  .notch-sm {
+    clip-path: none;
+    border: 1px solid CanvasText;
+  }
+  .notch:focus-visible,
+  .notch-sm:focus-visible,
+  .notch:has(:focus-visible),
+  .notch-sm:has(:focus-visible) {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+  .glow-accent,
+  .glow-info,
+  .glow-signal {
+    box-shadow: none;
+    border: 1px solid CanvasText;
+  }
+  body {
+    background-image: none;
+  }
+  .glitch {
+    animation: none;
+    text-shadow: none;
+  }
+  .scanlines::after,
+  .grid-backdrop::before,
+  .grain::after,
+  .chrome-underglow::after,
+  .hud-frame::before,
+  .hud-frame::after,
+  .sweep {
+    display: none;
+  }
+  .focus-inset:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+  .rail-fade:not(:focus-within) {
+    mask-image: none;
+  }
+  .chromatic:hover,
+  .chromatic:focus-visible {
+    text-shadow: none;
+  }
+}
+
+/* Higher-contrast preference — drop texture, strengthen boundaries */
+@media (prefers-contrast: more) {
+  :root,
+  .dark {
+    --scanline-opacity: 0;
+    --grain-opacity: 0;
+    --grid-opacity: 0;
+    --underglow-opacity: 0;
+    --fx-hud-opacity: 0;
+    --fx-sweep-opacity: 0;
+    --fx-glitch: none;
+    --fx-chromatic: none;
+    --color-border: var(--color-border-control);
+  }
+}
+
+/* Dev overlay highlight.
+   Uses outline, so it is subject to the same clipping trap as the
+   focus ring — notched entries get the inset ring instead. */
 .cs-inspect-active [data-cs-entry] {
   outline: 2px dashed var(--color-accent);
   outline-offset: 2px;
@@ -215,3 +926,8 @@ body {
   outline-color: var(--color-accent-hover);
   background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
 }
+.cs-inspect-active [data-cs-entry].notch,
+.cs-inspect-active [data-cs-entry].notch-sm {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--color-accent);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 08fe294..650269f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Chakra_Petch, Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Providers } from "@/components/layout/providers";
 import { SiteChrome } from "@/components/layout/site-chrome";
@@ -19,6 +19,16 @@ const geistMono = Geist_Mono({
   display: "swap",
 });
 
+// Display face — headings and short labels only, never running text.
+// Chakra Petch is not a variable font, so weights are explicit: 600/700
+// are the only cuts used, and the 300/400/500 files would be dead payload.
+const chakraPetch = Chakra_Petch({
+  variable: "--font-chakra-petch",
+  weight: ["600", "700"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   title: {
     default: "Flixstack — Stream Everything",
@@ -44,10 +54,25 @@ export default async function RootLayout({
   return (
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable}`}
+      className={`${geistSans.variable} ${geistMono.variable} ${chakraPetch.variable}`}
       suppressHydrationWarning
     >
       <body className="min-h-screen flex flex-col">
+        {/* Applies the reduce-effects preference before first paint.
+            A blocking inline script, not next/script: `beforeInteractive`
+            explicitly "does not block page hydration", which would let the
+            effects paint once before being suppressed — the exact flash this
+            preference exists to avoid. next-themes uses the same technique in
+            this app for the same reason.
+            A cookie read in this layout would also work and needs no script,
+            but `cookies()` opts every route into dynamic rendering (per
+            next/dist/docs .../functions/cookies.md), which would deoptimise
+            /search and /_not-found from static. */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `try{if(localStorage.getItem('flixstack-reduce-fx')==='1')document.documentElement.classList.add('reduce-fx')}catch(e){}`,
+          }}
+        />
         <Lytics />
         <LivePreviewInit />
         <Providers>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index faed174..157f045 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -4,31 +4,56 @@ import { Button } from "@/components/ui/button";
 
 export default function NotFound() {
   return (
-    <div className="flex flex-col items-center justify-center min-h-[60vh] px-4 text-center">
-      <div className="mb-6">
-        <span className="text-8xl font-bold text-[var(--color-accent)] opacity-20 select-none">
-          404
-        </span>
-      </div>
-      <h1 className="text-2xl font-bold text-[var(--color-text-primary)] mb-3">
-        Page not found
-      </h1>
-      <p className="text-[var(--color-text-secondary)] mb-8 max-w-sm">
-        We couldn&apos;t find what you were looking for. It may have been moved or removed.
-      </p>
-      <div className="flex items-center gap-3">
-        <Button asChild>
-          <Link href="/">
-            <Home className="h-4 w-4" aria-hidden="true" />
-            Go Home
-          </Link>
-        </Button>
-        <Button variant="outline" asChild>
-          <Link href="/search">
-            <Search className="h-4 w-4" aria-hidden="true" />
-            Search
-          </Link>
-        </Button>
+    <div className="grid-backdrop relative flex flex-col items-center justify-center min-h-[70vh] px-4 py-16">
+      {/* Strange Days "signal lost" panel. The glitch displacement animation
+          lands in PR 5 with the rest of the motion layer; the panel itself is
+          static so this route carries no ungated animation today. */}
+      <div className="notch scanlines relative w-full max-w-lg border border-border-control bg-surface">
+        {/* Status strip */}
+        <div className="flex items-center justify-between gap-3 border-b border-border px-5 py-2.5 font-mono text-xs uppercase tracking-widest">
+          <span className="text-signal">Signal lost</span>
+          <span className="text-text-secondary tabular-nums">err 404</span>
+        </div>
+
+        <div className="px-5 py-8 sm:px-8">
+          <p
+            className="glitch font-display text-6xl sm:text-7xl leading-none text-signal/25 select-none"
+            aria-hidden="true"
+          >
+            404
+          </p>
+
+          <h1 className="font-display mt-4 text-2xl uppercase text-text-primary">
+            No such transmission
+          </h1>
+
+          <p className="mt-3 text-text-secondary">
+            We couldn&apos;t find what you were looking for. It may have been moved
+            or removed.
+          </p>
+
+          <p className="mt-5 font-mono text-xs text-text-secondary">
+            <span className="text-accent" aria-hidden="true">
+              &gt;{" "}
+            </span>
+            trace route --target requested_page
+          </p>
+
+          <div className="mt-7 flex items-center gap-3 flex-wrap">
+            <Button asChild>
+              <Link href="/">
+                <Home className="h-4 w-4" aria-hidden="true" />
+                Go Home
+              </Link>
+            </Button>
+            <Button variant="outline" asChild>
+              <Link href="/search">
+                <Search className="h-4 w-4" aria-hidden="true" />
+                Search
+              </Link>
+            </Button>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9849da5..c06e48b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 import { Suspense } from "react";
 import { Hero } from "@/components/streaming/hero";
 import { Rail } from "@/components/streaming/rail";
-import { HeroSkeleton, TitleCardSkeleton } from "@/components/ui/skeleton";
+import { HeroSkeleton, Skeleton, SkeletonGroup, TitleCardSkeleton } from "@/components/ui/skeleton";
 import { getHeroBanners, getHomepageRails, parseLivePreviewParams } from "@/lib/contentstack/queries";
 import { isCSConfigured } from "@/lib/contentstack/client";
 import { Badge } from "@/components/ui/badge";
@@ -13,13 +13,14 @@ function FeatureCallouts() {
   return (
     <div className="px-4 sm:px-6 lg:px-8 py-6">
       <div className="flex items-center gap-3 mb-4 flex-wrap">
-        <h2 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
-          ContentStack Features on this Page
+        <h2 className="font-mono text-xs font-semibold uppercase tracking-widest text-text-secondary">
+          <span className="text-accent" aria-hidden="true">{"// "}</span>
+          Contentstack modules on this page
         </h2>
         {!isCSConfigured && (
           <Badge variant="outline" className="text-xs">
             Using mock data —{" "}
-            <Link href="/setup" className="text-accent hover:underline">
+            <Link href="/setup" className="text-accent underline underline-offset-2">
               connect ContentStack
             </Link>
           </Badge>
@@ -35,11 +36,11 @@ function FeatureCallouts() {
           <Link
             key={label}
             href={href}
-            className="flex flex-col gap-2 p-3 rounded-lg border border-border bg-surface hover:border-accent hover:bg-accent-subtle transition-colors group focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring)"
+            className="notch-sm group flex flex-col gap-2 border border-border-control bg-surface p-3 transition-colors hover:border-accent hover:bg-accent-subtle"
           >
             <Icon className="h-4 w-4 text-accent" aria-hidden="true" />
             <div>
-              <p className="text-xs font-semibold text-(--color-text-primary) group-hover:text-accent transition-colors">
+              <p className="font-mono text-xs font-semibold uppercase tracking-wider text-text-primary transition-colors group-hover:text-accent">
                 {label}
               </p>
               <p className="text-xs text-text-secondary mt-0.5">{desc}</p>
@@ -69,10 +70,10 @@ async function HomeRails({ livePreview }: { livePreview?: LivePreviewQuery }) {
 
 function RailSkeletonGroup() {
   return (
-    <div className="flex flex-col gap-10 py-8">
+    <SkeletonGroup label="Loading titles…" className="flex flex-col gap-10 py-8">
       {Array.from({ length: 3 }).map((_, i) => (
         <div key={i} className="px-4 sm:px-6 lg:px-8">
-          <div className="h-6 w-40 skeleton rounded mb-4" />
+          <Skeleton className="h-6 w-40 mb-4" />
           <div className="flex gap-4 overflow-hidden">
             {Array.from({ length: 5 }).map((_, j) => (
               <div key={j} className="shrink-0 w-70">
@@ -82,7 +83,7 @@ function RailSkeletonGroup() {
           </div>
         </div>
       ))}
-    </div>
+    </SkeletonGroup>
   );
 }
 
diff --git a/src/app/profile/profile-client.tsx b/src/app/profile/profile-client.tsx
index 578e407..e97a681 100644
--- a/src/app/profile/profile-client.tsx
+++ b/src/app/profile/profile-client.tsx
@@ -1,11 +1,13 @@
 "use client";
 
 import { useState } from "react";
+import Link from "next/link";
 import Image from "next/image";
-import { Bell, Play, Heart, Settings, CheckCircle } from "lucide-react";
+import { Bell, Play, Heart, Settings, CheckCircle, Sparkles } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { TitleCard } from "@/components/streaming/title-card";
+import { ReduceEffectsToggle } from "@/components/layout/reduce-effects-toggle";
 import type { Genre, Movie, TvSeries } from "@/lib/types";
 
 const MOCK_USER = {
@@ -46,7 +48,7 @@ export function ProfileClient({ watchlist, history, genres }: ProfileClientProps
 
   return (
     <div className="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-10">
-      <h1 className="text-3xl font-bold text-[var(--color-text-primary)] mb-8">
+      <h1 className="font-display text-3xl uppercase text-text-primary mb-8">
         My Profile
       </h1>
 
@@ -55,12 +57,12 @@ export function ProfileClient({ watchlist, history, genres }: ProfileClientProps
         <div className="flex flex-col gap-6">
           {/* Avatar card */}
           <section
-            className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-surface)] p-6"
+            className="notch relative border border-border bg-surface p-6"
             aria-label="Profile information"
           >
             <div className="flex items-center gap-4 mb-4">
               <div className="relative">
-                <div className="h-16 w-16 rounded-full overflow-hidden bg-[var(--color-bg-elevated)]">
+                <div className="h-16 w-16 rounded-pod overflow-hidden bg-elevated">
                   <Image
                     src={MOCK_USER.avatar}
                     alt={`${MOCK_USER.name} avatar`}
@@ -70,13 +72,13 @@ export function ProfileClient({ watchlist, history, genres }: ProfileClientProps
                     unoptimized
                   />
                 </div>
-                <div className="absolute -bottom-1 -right-1 h-5 w-5 rounded-full bg-[var(--color-accent)] border-2 border-[var(--color-bg-surface)]" aria-label="Online" />
+                <div role="img" aria-label="Online" className="absolute -bottom-1 -right-1 h-5 w-5 rounded-pod bg-accent border-2 border-(--color-bg-surface)" />
               </div>
               <div>
-                <h2 className="font-bold text-[var(--color-text-primary)] text-lg">
+                <h2 className="font-display text-lg uppercase text-text-primary">
                   {MOCK_USER.name}
                 </h2>
-                <p className="text-sm text-[var(--color-text-secondary)]">{MOCK_USER.email}</p>
+                <p className="font-mono text-xs text-text-secondary">{MOCK_USER.email}</p>
               </div>
             </div>
 
@@ -88,8 +90,9 @@ export function ProfileClient({ watchlist, history, genres }: ProfileClientProps
 
             {/* Lytics segments */}
             <div>
-              <h3 className="text-xs font-semibold text-[var(--color-text-disabled)] uppercase tracking-wider mb-2">
-                Audience Segments (Lytics)
+              <h3 className="font-mono text-xs font-semibold uppercase tracking-widest text-text-secondary mb-2">
+                <span className="text-accent" aria-hidden="true">{"// "}</span>
+                Audience segments (Lytics)
               </h3>
               <div className="flex flex-wrap gap-2">
                 {MOCK_USER.segments.map((seg) => (
@@ -98,30 +101,30 @@ export function ProfileClient({ watchlist, history, genres }: ProfileClientProps
                   </Badge>
                 ))}
               </div>
-              <p className="text-xs text-[var(--color-text-disabled)] mt-2">
+              <p className="text-xs text-text-secondary mt-2">
                 These segments drive personalized content on your home page.{" "}
-                <a href="/setup#personalization" className="text-[var(--color-accent)] hover:underline">
+                <Link href="/setup#personalization" className="text-accent underline underline-offset-2">
                   Learn more →
-                </a>
+                </Link>
               </p>
             </div>
           </section>
 
           {/* Preferences */}
           <section
-            className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-surface)] p-6"
+            className="notch relative border border-border bg-surface p-6"
             aria-label="Content preferences"
             id="preferences"
           >
-            <h2 className="font-bold text-[var(--color-text-primary)] mb-4 flex items-center gap-2">
-              <Settings className="h-4 w-4" aria-hidden="true" />
+            <h2 className="font-display uppercase text-text-primary mb-4 flex items-center gap-2">
+              <Settings className="h-4 w-4 text-accent" aria-hidden="true" />
               Preferences
             </h2>
 
             {/* Genre preferences — feed Lytics */}
             <div className="mb-5">
-              <p className="text-sm font-medium text-[var(--color-text-secondary)] mb-3">
-                Favorite Genres
+              <p className="font-mono text-xs uppercase tracking-widest text-text-secondary mb-3">
+                Favorite genres
               </p>
               <div className="flex flex-wrap gap-2" role="group" aria-label="Select favorite genres">
                 {genres.map((genre) => {
@@ -131,10 +134,10 @@ export function ProfileClient({ watchlist, history, genres }: ProfileClientProps
                       key={genre.uid}
                       onClick={() => toggleGenre(genre.slug)}
                       aria-pressed={isActive}
-                      className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)] ${
+                      className={`notch-sm border px-3 py-1.5 font-mono text-xs uppercase tracking-wider transition-colors ${
                         isActive
-                          ? "bg-[var(--color-accent)] text-[var(--color-accent-foreground)]"
-                          : "bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
+                          ? "border-accent bg-accent text-accent-foreground"
+                          : "border-border-control bg-elevated text-text-secondary hover:border-accent hover:text-accent"
                       }`}
                     >
                       {genre.title}
@@ -152,10 +155,10 @@ export function ProfileClient({ watchlist, history, genres }: ProfileClientProps
               ].map(({ label, desc, value, set, icon: Icon }) => (
                 <div key={label} className="flex items-center justify-between gap-4">
                   <div className="flex items-start gap-3">
-                    <Icon className="h-4 w-4 text-[var(--color-text-secondary)] mt-0.5 shrink-0" aria-hidden="true" />
+                    <Icon className="h-4 w-4 text-text-secondary mt-0.5 shrink-0" aria-hidden="true" />
                     <div>
-                      <p className="text-sm font-medium text-[var(--color-text-primary)]">{label}</p>
-                      <p className="text-xs text-[var(--color-text-secondary)]">{desc}</p>
+                      <p className="font-mono text-xs uppercase tracking-wider text-text-primary">{label}</p>
+                      <p className="text-xs text-text-secondary mt-0.5">{desc}</p>
                     </div>
                   </div>
                   <button
@@ -163,19 +166,40 @@ export function ProfileClient({ watchlist, history, genres }: ProfileClientProps
                     aria-checked={value}
                     aria-label={label}
                     onClick={() => set(!value)}
-                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)] ${
-                      value ? "bg-[var(--color-accent)]" : "bg-[var(--color-border)]"
+                    className={`relative inline-flex h-6 w-11 shrink-0 items-center border transition-colors ${
+                      value
+                        ? "border-accent bg-accent"
+                        : "border-border-control bg-elevated"
                     }`}
                   >
                     <span
-                      className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${
-                        value ? "translate-x-6" : "translate-x-1"
+                      className={`inline-block h-4 w-4 transform rounded-pod transition-transform ${
+                        value ? "translate-x-6 bg-(--color-accent-foreground)" : "translate-x-1 bg-(--color-text-secondary)"
                       }`}
                       aria-hidden="true"
                     />
                   </button>
                 </div>
               ))}
+
+              {/* Reduce effects. Its state lives on <html> + localStorage
+                  rather than in this component, so the pre-hydration script can
+                  apply it before first paint — hence the shared control instead
+                  of another entry in the list above. */}
+              <div className="flex items-center justify-between gap-4">
+                <div className="flex items-start gap-3">
+                  <Sparkles className="h-4 w-4 text-text-secondary mt-0.5 shrink-0" aria-hidden="true" />
+                  <div>
+                    <p className="font-mono text-xs uppercase tracking-wider text-text-primary">
+                      Reduce Effects
+                    </p>
+                    <p className="text-xs text-text-secondary mt-0.5">
+                      Turn off scanlines, grain and glow
+                    </p>
+                  </div>
+                </div>
+                <ReduceEffectsToggle />
+              </div>
             </div>
 
             <Button
@@ -199,8 +223,8 @@ export function ProfileClient({ watchlist, history, genres }: ProfileClientProps
         <div className="lg:col-span-2 flex flex-col gap-8">
           {/* Watchlist */}
           <section id="watchlist" aria-label="My watchlist">
-            <h2 className="text-xl font-bold text-[var(--color-text-primary)] mb-4 flex items-center gap-2">
-              <Heart className="h-5 w-5 text-[var(--color-accent)]" aria-hidden="true" />
+            <h2 className="font-display text-xl uppercase text-text-primary mb-4 flex items-center gap-2">
+              <Heart className="h-5 w-5 text-accent" aria-hidden="true" />
               My Watchlist
               <Badge variant="default" className="ml-auto">
                 {watchlist.length}
@@ -210,12 +234,13 @@ export function ProfileClient({ watchlist, history, genres }: ProfileClientProps
               <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4" role="list">
                 {watchlist.map((title) => (
                   <div key={title.uid} role="listitem">
-                    <TitleCard title={title} layout="portrait" data-cs-entry={title.uid} data-cs-content-type={title.content_type} />
+                    <TitleCard title={title} layout="portrait"
+                      fullWidth data-cs-entry={title.uid} data-cs-content-type={title.content_type} />
                   </div>
                 ))}
               </div>
             ) : (
-              <p className="text-[var(--color-text-secondary)] text-sm">
+              <p className="text-text-secondary text-sm">
                 Your watchlist is empty. Browse titles and click + to add them.
               </p>
             )}
@@ -223,20 +248,21 @@ export function ProfileClient({ watchlist, history, genres }: ProfileClientProps
 
           {/* Watch history */}
           <section id="history" aria-label="Watch history">
-            <h2 className="text-xl font-bold text-[var(--color-text-primary)] mb-4 flex items-center gap-2">
-              <Play className="h-5 w-5 text-[var(--color-accent)]" aria-hidden="true" />
+            <h2 className="font-display text-xl uppercase text-text-primary mb-4 flex items-center gap-2">
+              <Play className="h-5 w-5 text-accent" aria-hidden="true" />
               Continue Watching
             </h2>
             {history.length > 0 ? (
               <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4" role="list">
                 {history.map((title) => (
                   <div key={title.uid} role="listitem">
-                    <TitleCard title={title} layout="portrait" data-cs-entry={title.uid} data-cs-content-type={title.content_type} />
+                    <TitleCard title={title} layout="portrait"
+                      fullWidth data-cs-entry={title.uid} data-cs-content-type={title.content_type} />
                   </div>
                 ))}
               </div>
             ) : (
-              <p className="text-[var(--color-text-secondary)] text-sm">
+              <p className="text-text-secondary text-sm">
                 No watch history yet. Start watching something!
               </p>
             )}
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index cd52a6b..20ef5b3 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useDeferredValue, useEffect } from "react";
-import { Search, X } from "lucide-react";
+import { X } from "lucide-react";
 import { TitleCard } from "@/components/streaming/title-card";
 import { lyticsEvents } from "@/lib/lytics/client";
 import type { Movie, TvSeries } from "@/lib/types";
@@ -37,19 +37,22 @@ export default function SearchPage() {
     <div className="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8 py-8">
       {/* Header */}
       <div className="max-w-2xl mx-auto mb-10">
-        <h1 className="text-3xl font-bold text-[var(--color-text-primary)] mb-6 text-center">
+        <h1 className="font-display text-3xl uppercase text-text-primary mb-6 text-center">
           Search Flixstack
         </h1>
 
         {/* Search input */}
-        <div className="relative">
+        <div className="notch-sm relative border border-border-control bg-surface">
           <label htmlFor="search-input" className="sr-only">
             Search movies and TV shows
           </label>
-          <Search
-            className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-[var(--color-text-disabled)]"
+          {/* Terminal prompt. Decorative — the input keeps its own label. */}
+          <span
+            className="absolute left-4 top-1/2 -translate-y-1/2 font-mono text-base text-accent"
             aria-hidden="true"
-          />
+          >
+            &gt;
+          </span>
           <input
             id="search-input"
             type="search"
@@ -57,7 +60,13 @@ export default function SearchPage() {
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             placeholder="Search movies, shows, genres, cast…"
-            className="w-full h-14 pl-12 pr-12 rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] text-base focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)] transition-colors"
+            // No focus outline on the input itself: the border lives on the
+            // wrapper, whose `notch-sm:has(:focus-visible)` rule draws the inset
+            // ring (an outline here would be clipped by the wrapper's clip-path).
+            // caret-accent turns the *native* text cursor phosphor, which is a
+            // real terminal caret rather than a decorative blinking block —
+            // nothing extra to animate or gate.
+            className="w-full h-14 pl-11 pr-12 bg-transparent font-mono text-base text-text-primary caret-accent placeholder:text-text-secondary focus-visible:outline-none"
             aria-label="Search movies and TV shows"
             aria-controls="search-results"
             aria-describedby="search-status"
@@ -65,10 +74,10 @@ export default function SearchPage() {
           {query && (
             <button
               onClick={() => setQuery("")}
-              className="absolute right-4 top-1/2 -translate-y-1/2 p-1 rounded-md hover:bg-[var(--color-bg-elevated)] transition-colors focus-visible:outline-2 focus-visible:outline-[var(--color-focus-ring)]"
+              className="focus-inset absolute right-3 top-1/2 -translate-y-1/2 p-1.5 text-text-secondary hover:text-accent transition-colors"
               aria-label="Clear search"
             >
-              <X className="h-4 w-4 text-[var(--color-text-secondary)]" aria-hidden="true" />
+              <X className="h-4 w-4" aria-hidden="true" />
             </button>
           )}
         </div>
@@ -90,9 +99,12 @@ export default function SearchPage() {
       <div id="search-results" role="region" aria-label="Search results">
         {hasQuery && results.length > 0 && (
           <>
-            <div className="flex items-center justify-between mb-5">
-              <h2 className="text-lg font-semibold text-[var(--color-text-primary)]">
-                {results.length} result{results.length !== 1 ? "s" : ""} for &ldquo;{deferredQuery}&rdquo;
+            <div className="flex items-baseline gap-3 mb-5 flex-wrap">
+              <span className="font-mono text-xs uppercase tracking-widest text-accent tabular-nums">
+                [ {results.length} {results.length === 1 ? "match" : "matches"} ]
+              </span>
+              <h2 className="font-display text-lg uppercase text-text-primary">
+                for &ldquo;{deferredQuery}&rdquo;
               </h2>
             </div>
             <div
@@ -104,6 +116,7 @@ export default function SearchPage() {
                   <TitleCard
                     title={title}
                     layout="portrait"
+                      fullWidth
                     data-cs-entry={title.uid}
                     data-cs-content-type={title.content_type}
                   />
@@ -114,24 +127,32 @@ export default function SearchPage() {
         )}
 
         {hasQuery && results.length === 0 && (
-          <div className="py-20 text-center max-w-md mx-auto">
-            <Search className="h-12 w-12 text-[var(--color-text-disabled)] mx-auto mb-4" aria-hidden="true" />
-            <h2 className="text-xl font-semibold text-[var(--color-text-primary)] mb-2">
-              No results for &ldquo;{deferredQuery}&rdquo;
-            </h2>
-            <p className="text-[var(--color-text-secondary)]">
-              Try searching by title, genre, cast, or tags.
-            </p>
+          <div className="py-16 max-w-md mx-auto">
+            <div className="notch scanlines relative border border-border-control bg-surface px-6 py-8 text-center">
+              <p className="font-mono text-xs uppercase tracking-widest text-signal mb-3">
+                No signal
+              </p>
+              <h2 className="font-display text-xl uppercase text-text-primary mb-2">
+                Nothing for &ldquo;{deferredQuery}&rdquo;
+              </h2>
+              <p className="text-text-secondary">
+                Try searching by title, genre, cast, or tags.
+              </p>
+            </div>
           </div>
         )}
 
         {!hasQuery && (
-          <div className="py-16 text-center text-[var(--color-text-secondary)]">
-            <p className="text-lg">
-              Start typing to search across all movies, TV shows, and genres.
+          <div className="py-16 text-center">
+            <p className="font-mono text-sm text-text-secondary terminal-caret">
+              <span className="text-accent" aria-hidden="true">
+                &gt;{" "}
+              </span>
+              awaiting query
             </p>
-            <p className="text-sm mt-2 text-[var(--color-text-disabled)]">
-              Search is powered by ContentStack&rsquo;s Delivery API search capability.
+            <p className="text-sm mt-4 text-text-secondary max-w-md mx-auto">
+              Search runs across every movie, TV show and genre, powered by
+              Contentstack&rsquo;s Delivery API search capability.
             </p>
           </div>
         )}
diff --git a/src/app/setup/page.tsx b/src/app/setup/page.tsx
index f9bc2f1..77356a9 100644
--- a/src/app/setup/page.tsx
+++ b/src/app/setup/page.tsx
@@ -22,7 +22,7 @@ export default async function SetupPage({
   const guide = await getSetupGuide(parseLivePreviewParams(await searchParams));
 
   return (
-    <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 py-10">
+    <div className="grid-backdrop relative mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 py-10">
       {/* Header */}
       <div className="mb-10">
         {guide.badge_label && (
@@ -30,18 +30,18 @@ export default async function SetupPage({
             {guide.badge_label}
           </Badge>
         )}
-        <h1 className="text-4xl font-bold text-(--color-text-primary) mb-4" {...guide.$?.title}>
+        <h1 className="font-display text-4xl uppercase text-text-primary mb-4" {...guide.$?.title}>
           {guide.title}
         </h1>
         <div
-          className="text-lg text-text-secondary max-w-2xl leading-relaxed [&_p]:mb-3 [&_p:last-child]:mb-0"
+          className="text-lg text-text-secondary max-w-2xl leading-relaxed break-words [&_p]:mb-3 [&_p:last-child]:mb-0"
           dangerouslySetInnerHTML={{ __html: guide.intro }}
           {...guide.$?.intro}
         />
 
         {/* CS connection status — runtime state, not editorial content */}
         <div
-          className={`mt-5 flex items-center gap-3 px-4 py-3 rounded-xl border text-sm font-medium ${
+          className={`notch-sm mt-5 flex items-center gap-3 px-4 py-3 border font-mono text-xs uppercase tracking-wider ${
             isCSConfigured
               ? "border-accent/30 bg-accent-subtle text-accent"
               : "border-border bg-surface text-text-secondary"
@@ -64,40 +64,40 @@ export default async function SetupPage({
 
       {/* Setup steps */}
       <section aria-label="Setup steps" className="mb-16">
-        <h2 className="text-2xl font-bold text-(--color-text-primary) mb-6" {...guide.$?.steps_heading}>
+        <h2 className="font-display text-2xl uppercase text-text-primary mb-6" {...guide.$?.steps_heading}>
           {guide.steps_heading}
         </h2>
         <ol className="flex flex-col gap-6" role="list">
           {guide.steps.map((step, i) => (
             <li
               key={i}
-              className="flex gap-5 p-6 rounded-2xl border border-border bg-surface"
+              className="notch relative flex gap-4 sm:gap-5 p-4 sm:p-6 border border-border bg-surface"
             >
               <div
-                className="shrink-0 flex h-8 w-8 items-center justify-center rounded-full bg-accent text-accent-foreground font-bold text-sm"
+                className="notch-sm shrink-0 flex h-8 w-8 items-center justify-center bg-accent text-accent-foreground font-mono font-bold text-sm tabular-nums"
                 aria-hidden="true"
               >
                 {i + 1}
               </div>
-              <div className="flex-1 min-w-0">
-                <h3 className="font-bold text-(--color-text-primary) mb-1" {...step.$?.heading}>
+              <div className="flex-1 min-w-0 break-words">
+                <h3 className="font-display uppercase text-text-primary mb-1" {...step.$?.heading}>
                   {step.heading}
                 </h3>
                 <div
-                  className="text-sm text-text-secondary mb-3 [&_p]:mb-2 [&_p:last-child]:mb-0"
+                  className="text-sm text-text-secondary mb-3 break-words [&_p]:mb-2 [&_p:last-child]:mb-0"
                   dangerouslySetInnerHTML={{ __html: step.description }}
                   {...step.$?.description}
                 />
                 {step.detail && (
                   <div
-                    className="text-sm text-text-secondary bg-elevated rounded-lg px-4 py-3 mb-3 [&_p]:mb-2 [&_p:last-child]:mb-0"
+                    className="text-sm text-text-secondary bg-elevated rounded-panel px-4 py-3 mb-3 break-words [&_p]:mb-2 [&_p:last-child]:mb-0"
                     dangerouslySetInnerHTML={{ __html: step.detail }}
                     {...step.$?.detail}
                   />
                 )}
                 {step.code && (
                   <pre
-                    className="text-xs font-mono bg-elevated border border-border text-(--color-text-primary) rounded-xl p-4 overflow-x-auto whitespace-pre mb-3"
+                    className="text-xs font-mono bg-elevated border border-border-control text-text-primary rounded-panel p-4 overflow-x-auto whitespace-pre mb-3"
                     {...step.$?.code}
                   >
                     {step.code}
@@ -108,7 +108,7 @@ export default async function SetupPage({
                     href={step.docs_link.href}
                     target={step.docs_link.open_in_new_tab ? "_blank" : undefined}
                     rel={step.docs_link.open_in_new_tab ? "noopener noreferrer" : undefined}
-                    className="inline-flex items-center gap-1.5 text-xs font-medium text-accent hover:underline focus-visible:outline-2 focus-visible:outline-(--color-focus-ring) rounded-sm"
+                    className="focus-inset inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-wider text-accent hover:underline"
                   >
                     <ExternalLink className="h-3 w-3" aria-hidden="true" />
                     {step.docs_link.label || "View Documentation"}
@@ -122,7 +122,7 @@ export default async function SetupPage({
 
       {/* Feature deep-dives */}
       <section aria-label="Contentstack features" className="mb-16">
-        <h2 className="text-2xl font-bold text-(--color-text-primary) mb-2" {...guide.$?.features_heading}>
+        <h2 className="font-display text-2xl uppercase text-text-primary mb-2" {...guide.$?.features_heading}>
           {guide.features_heading}
         </h2>
         <div
@@ -138,14 +138,14 @@ export default async function SetupPage({
               <div
                 key={feature.anchor_id || i}
                 id={feature.anchor_id}
-                className="p-6 rounded-2xl border border-border bg-surface"
+                className="notch relative p-6 border border-border bg-surface"
               >
                 <div className="flex items-start gap-4">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-accent-subtle shrink-0">
+                  <div className="notch-sm flex h-10 w-10 items-center justify-center bg-accent-subtle shrink-0">
                     <Icon className="h-5 w-5 text-accent" aria-hidden="true" />
                   </div>
                   <div className="flex-1">
-                    <h3 className="font-bold text-(--color-text-primary) text-lg mb-2" {...feature.$?.heading}>
+                    <h3 className="font-display uppercase text-text-primary text-lg mb-2" {...feature.$?.heading}>
                       {feature.heading}
                     </h3>
                     <div
@@ -157,7 +157,7 @@ export default async function SetupPage({
                       {feature.field_tags.map((f) => (
                         <code
                           key={f}
-                          className="text-xs font-mono px-2 py-1 rounded-md bg-elevated text-(--color-text-primary) border border-border"
+                          className="text-xs font-mono px-2 py-1 rounded-chip bg-elevated text-text-primary border border-border-control"
                         >
                           {f}
                         </code>
@@ -168,7 +168,7 @@ export default async function SetupPage({
                         href={feature.learn_link.href}
                         target={feature.learn_link.open_in_new_tab ? "_blank" : undefined}
                         rel={feature.learn_link.open_in_new_tab ? "noopener noreferrer" : undefined}
-                        className="inline-flex items-center gap-1.5 text-xs font-medium text-accent hover:underline focus-visible:outline-2 focus-visible:outline-(--color-focus-ring) rounded-sm"
+                        className="focus-inset inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-wider text-accent hover:underline"
                       >
                         <ExternalLink className="h-3 w-3" aria-hidden="true" />
                         {feature.learn_link.label || "Learn More"}
@@ -184,7 +184,7 @@ export default async function SetupPage({
 
       {/* Quick links */}
       <section aria-label="Documentation links">
-        <h2 className="text-2xl font-bold text-(--color-text-primary) mb-6" {...guide.$?.docs_heading}>
+        <h2 className="font-display text-2xl uppercase text-text-primary mb-6" {...guide.$?.docs_heading}>
           {guide.docs_heading}
         </h2>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
@@ -194,10 +194,10 @@ export default async function SetupPage({
               href={item.link.href}
               target={item.link.open_in_new_tab ? "_blank" : undefined}
               rel={item.link.open_in_new_tab ? "noopener noreferrer" : undefined}
-              className="flex items-start gap-3 p-4 rounded-xl border border-border bg-surface hover:border-accent hover:bg-accent-subtle transition-colors group focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring)"
+              className="notch-sm group flex items-start gap-3 p-4 border border-border-control bg-surface hover:border-accent hover:bg-accent-subtle transition-colors"
             >
               <div className="flex-1">
-                <p className="font-semibold text-sm text-(--color-text-primary) group-hover:text-accent transition-colors">
+                <p className="font-mono text-xs font-semibold uppercase tracking-wider text-text-primary group-hover:text-accent transition-colors">
                   {item.link.label}
                 </p>
                 <p className="text-xs text-text-secondary mt-0.5">{item.description}</p>
diff --git a/src/app/watch/[slug]/watch-content.tsx b/src/app/watch/[slug]/watch-content.tsx
index 6ac4995..3a31b2a 100644
--- a/src/app/watch/[slug]/watch-content.tsx
+++ b/src/app/watch/[slug]/watch-content.tsx
@@ -69,7 +69,7 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
           <button
             type="button"
             onClick={() => setNowPlaying(null)}
-            className="absolute top-4 right-4 z-10 flex items-center gap-1.5 rounded-lg bg-black/60 px-3 py-2 text-sm font-medium text-white backdrop-blur hover:bg-black/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring)"
+            className="notch-sm absolute top-4 right-4 z-10 flex items-center gap-1.5 border border-white/25 bg-black/60 px-3 py-2 font-mono text-xs uppercase tracking-wider text-white backdrop-blur hover:border-accent hover:text-accent transition-colors"
           >
             <X className="h-4 w-4" aria-hidden="true" />
             Close player
@@ -77,7 +77,7 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
         </section>
       ) : (
         <section
-          className="relative w-full h-[55vh] min-h-95 overflow-hidden bg-elevated"
+          className="hud-frame relative w-full h-[55vh] min-h-95 overflow-hidden bg-[#05070A]"
           aria-label={`${title.title} hero image`}
           data-cs-entry={title.uid}
           data-cs-content-type={title.content_type}
@@ -92,20 +92,16 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
               {...title.$?.hero_image}
             />
           )}
-          <div
-            className="absolute inset-0 bg-linear-to-r from-black/80 via-black/50 to-transparent"
-            aria-hidden="true"
-          />
-          <div
-            className="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent"
-            aria-hidden="true"
-          />
+          {/* Same fixed-dark scrim as the homepage hero: this copy is
+              text-white in both themes, so a theme-following vignette put it
+              on a near-white ground in light mode. */}
+          <div className="hero-scrim scanlines absolute inset-0" aria-hidden="true" />
 
           {/* Content overlay */}
           <div className="relative h-full flex items-end pb-8 px-4 sm:px-6 lg:px-8">
             <div className="flex items-end gap-6">
               {/* Thumbnail */}
-              <div className="hidden sm:block w-32 rounded-xl overflow-hidden shadow-2xl shrink-0 border border-white/10">
+              <div className="notch hidden sm:block w-32 overflow-hidden shrink-0 border border-white/15">
                 {title.thumbnail && (
                   <Image
                     src={title.thumbnail.url}
@@ -125,38 +121,38 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
                   <Badge variant="rating" className={getRatingColor(title.rating)}>
                     {title.rating}
                   </Badge>
-                  <span className="text-white/60 text-sm">
+                  <span className="font-mono text-xs text-white/70 tabular-nums">
                     {new Date(title.release_date).getFullYear()}
                   </span>
                   {movie && (
-                    <span className="text-white/60 text-sm flex items-center gap-1">
+                    <span className="font-mono text-xs text-white/70 flex items-center gap-1 tabular-nums">
                       <Clock className="h-3 w-3" aria-hidden="true" />
                       {formatRuntime(movie.runtime)}
                     </span>
                   )}
                   {series && (
-                    <span className="text-white/60 text-sm flex items-center gap-1">
+                    <span className="font-mono text-xs text-white/70 flex items-center gap-1">
                       <Tv className="h-3 w-3" aria-hidden="true" />
                       {series.seasons.length} Season{series.seasons.length !== 1 ? "s" : ""}
                     </span>
                   )}
                 </div>
 
-                <h1 className="text-3xl sm:text-4xl font-bold text-white mb-3 leading-tight" {...title.$?.title}>
+                <h1 className="font-display chromatic text-3xl sm:text-4xl uppercase text-white mb-3 leading-tight" {...title.$?.title}>
                   {title.title}
                 </h1>
 
                 <div className="flex items-center gap-3 mb-4">
-                  <span className="flex items-center gap-1 text-accent font-semibold">
+                  <span className="flex items-center gap-1 font-mono font-semibold text-accent tabular-nums">
                     <Star className="h-4 w-4 fill-current" aria-hidden="true" />
                     <span aria-label={`Score: ${title.score} out of 100`}>{title.score}</span>
-                    <span className="text-white/40 text-sm font-normal">/100</span>
+                    <span className="text-white/60 text-xs font-normal">/100</span>
                   </span>
                   {title.genres.map((g) => (
                     <Link
                       key={g.uid}
                       href={`/genre/${g.slug}`}
-                      className="text-sm text-white/60 hover:text-white transition-colors focus-visible:outline-2 focus-visible:outline-(--color-focus-ring) rounded-sm"
+                      className="font-mono text-xs uppercase tracking-wider text-white/70 hover:text-accent transition-colors"
                     >
                       {g.title}
                     </Link>
@@ -195,7 +191,7 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
           {/* Synopsis + episodes */}
           <div className="lg:col-span-2 flex flex-col gap-8">
             <section aria-label="Synopsis">
-              <h2 className="text-xl font-bold text-(--color-text-primary) mb-3">About</h2>
+              <h2 className="font-display text-xl uppercase text-text-primary mb-3">About</h2>
               <p
                 className="text-text-secondary leading-relaxed text-base"
                 {...title.$?.synopsis}
@@ -206,19 +202,19 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
             {/* Episode list for series */}
             {series && (
               <section aria-label="Episodes">
-                <h2 className="text-xl font-bold text-(--color-text-primary) mb-4">Episodes</h2>
+                <h2 className="font-display text-xl uppercase text-text-primary mb-4">Episodes</h2>
                 <div className="flex flex-col gap-4">
                   {series.seasons.map((season) => (
                     <details
                       key={season.uid}
-                      className="group rounded-xl border border-border bg-surface overflow-hidden"
+                      className="notch group relative border border-border bg-surface overflow-hidden"
                     >
-                      <summary className="flex items-center justify-between px-5 py-4 cursor-pointer hover:bg-elevated transition-colors list-none focus-visible:outline-2 focus-visible:outline-(--color-focus-ring)">
-                        <span className="font-semibold text-(--color-text-primary)">
+                      <summary className="focus-inset flex items-center justify-between px-5 py-4 cursor-pointer hover:bg-elevated transition-colors list-none">
+                        <span className="font-display uppercase text-text-primary">
                           Season {season.season_number}
                         </span>
                         <div className="flex items-center gap-3">
-                          <span className="text-sm text-text-secondary">
+                          <span className="font-mono text-xs uppercase tracking-wider text-text-secondary tabular-nums">
                             {season.episodes.length} episodes
                           </span>
                           <ChevronDown
@@ -249,7 +245,7 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
                                   playable ? `Play ${ep.title}` : `${ep.title} — no video available`
                                 }
                                 title={playable ? undefined : "No video available yet"}
-                                className="group/ep shrink-0 relative w-24 aspect-video rounded-lg overflow-hidden bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring) disabled:cursor-not-allowed"
+                                className="focus-inset notch-sm group/ep shrink-0 relative w-24 aspect-video overflow-hidden bg-elevated disabled:cursor-not-allowed"
                               >
                                 {ep.thumbnail && (
                                   <Image
@@ -273,21 +269,21 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
                               </button>
                               <div className="flex-1 min-w-0">
                                 <div className="flex items-center gap-2">
-                                  <span className="text-xs text-text-disabled">
+                                  <span className="font-mono text-xs text-accent tabular-nums">
                                     E{ep.episode_number}
                                   </span>
                                   <h3
-                                    className="font-semibold text-sm text-(--color-text-primary) truncate"
+                                    className="font-display text-sm text-text-primary truncate"
                                     {...ep.$?.title}
                                   >
                                     {ep.title}
                                   </h3>
                                   {active && (
-                                    <Badge variant="default" className="shrink-0">
+                                    <Badge variant="signal" className="shrink-0">
                                       Now Playing
                                     </Badge>
                                   )}
-                                  <span className="ml-auto text-xs text-text-disabled shrink-0">
+                                  <span className="ml-auto font-mono text-xs text-text-secondary shrink-0 tabular-nums">
                                     {formatRuntime(ep.duration)}
                                   </span>
                                 </div>
@@ -329,8 +325,8 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
             data-cs-entry={title.uid}
             data-cs-content-type="person"
           >
-            <div className="rounded-xl border border-border bg-surface p-5">
-              <h2 className="font-semibold text-(--color-text-primary) mb-4 text-sm uppercase tracking-wider">
+            <div className="notch relative border border-border bg-surface p-5">
+              <h2 className="font-mono text-xs font-semibold uppercase tracking-widest text-text-secondary mb-4">
                 Cast & Crew
               </h2>
               <dl className="flex flex-col gap-4">
@@ -339,12 +335,12 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
                   if (!lead) return null;
                   return (
                     <div>
-                      <dt className="text-xs text-text-disabled mb-1">
+                      <dt className="font-mono text-xs uppercase tracking-wider text-text-secondary mb-1">
                         {isMovie ? "Director" : "Creator"}
                       </dt>
                       <dd>
                         <div className="flex items-center gap-2">
-                          <div className="h-8 w-8 rounded-full overflow-hidden bg-elevated shrink-0">
+                          <div className="h-8 w-8 rounded-pod overflow-hidden bg-elevated shrink-0">
                             {lead.photo && (
                               <Image
                                 src={lead.photo.url}
@@ -357,7 +353,7 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
                             )}
                           </div>
                           <span
-                            className="text-sm text-(--color-text-primary) font-medium"
+                            className="text-sm text-text-primary font-medium"
                             {...lead.$?.title}
                           >
                             {lead.name}
@@ -368,12 +364,12 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
                   );
                 })()}
                 <div>
-                  <dt className="text-xs text-text-disabled mb-2">Cast</dt>
+                  <dt className="font-mono text-xs uppercase tracking-wider text-text-secondary mb-2">Cast</dt>
                   <dd>
                     <ul className="flex flex-col gap-2" role="list">
                       {title.cast.map((person) => (
                         <li key={person.uid} className="flex items-center gap-2">
-                          <div className="h-8 w-8 rounded-full overflow-hidden bg-elevated shrink-0">
+                          <div className="h-8 w-8 rounded-pod overflow-hidden bg-elevated shrink-0">
                             {person.photo && (
                               <Image
                                 src={person.photo.url}
@@ -385,7 +381,7 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
                               />
                             )}
                           </div>
-                          <span className="text-sm text-(--color-text-primary)" {...person.$?.title}>
+                          <span className="text-sm text-text-primary" {...person.$?.title}>
                             {person.name}
                           </span>
                         </li>
@@ -397,14 +393,14 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
             </div>
 
             {/* Quick meta */}
-            <div className="rounded-xl border border-border bg-surface p-5">
-              <h2 className="font-semibold text-(--color-text-primary) mb-4 text-sm uppercase tracking-wider">
+            <div className="notch relative border border-border bg-surface p-5">
+              <h2 className="font-mono text-xs font-semibold uppercase tracking-widest text-text-secondary mb-4">
                 Details
               </h2>
               <dl className="flex flex-col gap-3">
                 <div className="flex justify-between items-center">
-                  <dt className="text-xs text-text-disabled">Release</dt>
-                  <dd className="text-sm text-(--color-text-primary) flex items-center gap-1">
+                  <dt className="font-mono text-xs uppercase tracking-wider text-text-secondary">Release</dt>
+                  <dd className="font-mono text-sm text-text-primary flex items-center gap-1 tabular-nums">
                     <Calendar className="h-3 w-3 text-text-disabled" aria-hidden="true" />
                     {new Date(title.release_date).toLocaleDateString("en-US", {
                       year: "numeric",
@@ -414,27 +410,27 @@ export function WatchContent({ title, related }: { title: Title; related: Title[
                   </dd>
                 </div>
                 <div className="flex justify-between items-center">
-                  <dt className="text-xs text-text-disabled">Rating</dt>
+                  <dt className="font-mono text-xs uppercase tracking-wider text-text-secondary">Rating</dt>
                   <dd className={cn("text-sm font-mono font-semibold", getRatingColor(title.rating))}>
                     {title.rating}
                   </dd>
                 </div>
                 {movie && (
                   <div className="flex justify-between items-center">
-                    <dt className="text-xs text-text-disabled">Runtime</dt>
-                    <dd className="text-sm text-(--color-text-primary)">
+                    <dt className="font-mono text-xs uppercase tracking-wider text-text-secondary">Runtime</dt>
+                    <dd className="font-mono text-sm text-text-primary tabular-nums">
                       {formatRuntime(movie.runtime)}
                     </dd>
                   </div>
                 )}
                 {series && (
                   <div className="flex justify-between items-center">
-                    <dt className="text-xs text-text-disabled">Status</dt>
-                    <dd className="text-sm text-(--color-text-primary) capitalize">{series.status}</dd>
+                    <dt className="font-mono text-xs uppercase tracking-wider text-text-secondary">Status</dt>
+                    <dd className="font-mono text-sm text-text-primary capitalize">{series.status}</dd>
                   </div>
                 )}
                 <div className="flex justify-between items-center">
-                  <dt className="text-xs text-text-disabled">Tier</dt>
+                  <dt className="font-mono text-xs uppercase tracking-wider text-text-secondary">Tier</dt>
                   <dd>
                     <Badge
                       variant={title.content_tier === "premium" ? "premium" : "default"}
diff --git a/src/components/cms/modular-block-renderer.tsx b/src/components/cms/modular-block-renderer.tsx
index ceff90d..421134c 100644
--- a/src/components/cms/modular-block-renderer.tsx
+++ b/src/components/cms/modular-block-renderer.tsx
@@ -40,10 +40,10 @@ export function ModularBlockRenderer({ blocks }: ModularBlockRendererProps) {
                 key={`promo-${i}`}
                 data-cs-entry={promo.uid}
                 data-cs-content-type="promo_block"
-                className={`flex flex-col md:flex-row ${isReversed ? "md:flex-row-reverse" : ""} gap-8 items-center px-4 sm:px-6 lg:px-8 py-8 rounded-2xl bg-surface border border-border mx-4 sm:mx-6 lg:mx-8`}
+                className={`flex flex-col md:flex-row ${isReversed ? "md:flex-row-reverse" : ""} gap-8 items-center px-4 sm:px-6 lg:px-8 py-8 notch relative bg-surface border border-border mx-4 sm:mx-6 lg:mx-8`}
               >
                 <div className="flex-1 max-w-xl">
-                  <h2 className="text-2xl font-bold text-(--color-text-primary) mb-3">
+                  <h2 className="font-display text-2xl uppercase text-text-primary mb-3">
                     {promo.headline}
                   </h2>
                   <p className="text-text-secondary leading-relaxed mb-5">
@@ -51,13 +51,13 @@ export function ModularBlockRenderer({ blocks }: ModularBlockRendererProps) {
                   </p>
                   <Link
                     href={promo.cta_url}
-                    className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-accent text-accent-foreground font-semibold text-sm hover:bg-accent-hover transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring)"
+                    className="notch-sm inline-flex items-center gap-2 px-5 py-2.5 bg-accent text-accent-foreground font-mono font-semibold text-xs uppercase tracking-wider hover:bg-accent-hover transition-colors"
                   >
                     {promo.cta_label}
                   </Link>
                 </div>
                 {promo.image && (
-                  <div className="flex-1 relative aspect-video w-full max-w-md rounded-xl overflow-hidden">
+                  <div className="notch flex-1 relative aspect-video w-full max-w-md overflow-hidden">
                     <Image
                       src={promo.image.url}
                       alt={promo.headline}
@@ -81,16 +81,16 @@ export function ModularBlockRenderer({ blocks }: ModularBlockRendererProps) {
               >
                 <div className="flex items-center gap-3 mb-4">
                   <div
-                    className="h-6 w-1.5 rounded-full"
+                    className="h-6 w-1.5"
                     style={{ backgroundColor: spotlight.genre.color_accent }}
                     aria-hidden="true"
                   />
-                  <h2 className="text-xl font-bold text-(--color-text-primary)">
+                  <h2 className="font-display text-xl uppercase text-text-primary">
                     {spotlight.genre.title}
                   </h2>
                   <Link
                     href={`/genre/${spotlight.genre.slug}`}
-                    className="text-sm text-accent hover:underline ml-auto focus-visible:outline-2 focus-visible:outline-(--color-focus-ring) rounded-sm"
+                    className="focus-inset font-mono text-xs uppercase tracking-wider text-accent hover:underline ml-auto"
                   >
                     View all →
                   </Link>
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index 4e8cfc5..cff23cc 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Play, GitBranch, X as XIcon } from "lucide-react";
+import { ReduceEffectsControl } from "./reduce-effects-toggle";
 import type { Footer as FooterData, FooterColumn } from "@/lib/types";
 
 const FALLBACK_FOOTER_COLUMNS: FooterColumn[] = [
@@ -52,23 +53,25 @@ export function Footer({ footer, siteName = "Flixstack" }: FooterProps) {
   const FOOTER_COLUMNS = footer?.columns && footer.columns.length > 0 ? footer.columns : FALLBACK_FOOTER_COLUMNS;
   return (
     <footer
-      className="border-t border-border bg-surface mt-auto"
+      className="grid-backdrop relative border-t border-border bg-surface mt-auto"
       role="contentinfo"
       aria-label="Site footer"
     >
-      <div className="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8 py-12">
+      {/* relative + z-10: .grid-backdrop's pseudo-element is positioned, so
+          without a positioned wrapper it would paint over this content. */}
+      <div className="relative z-10 mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8 py-12">
         <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
           {/* Brand */}
           <div className="col-span-2 md:col-span-1">
             <Link
               href="/"
-              className="flex items-center gap-2 mb-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring) rounded-md w-fit"
+              className="flex items-center gap-2 mb-4 w-fit"
               aria-label={`${siteName} home`}
             >
-              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent">
+              <span className="notch-sm flex h-8 w-8 items-center justify-center bg-accent">
                 <Play className="h-4 w-4 fill-accent-foreground text-accent-foreground" aria-hidden="true" />
               </span>
-              <span className="text-lg font-bold">{siteName}</span>
+              <span className="font-display text-lg uppercase">{siteName}</span>
             </Link>
             <p className="text-sm text-text-secondary max-w-xs leading-relaxed">
               A Contentstack starter template. Learn to build composable digital
@@ -79,7 +82,7 @@ export function Footer({ footer, siteName = "Flixstack" }: FooterProps) {
                 href="https://contentstack.com"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-text-secondary hover:text-(--color-text-primary) transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring) rounded-md p-1"
+                className="text-text-secondary hover:text-accent transition-colors p-1"
                 aria-label="ContentStack (opens in new tab)"
               >
                 <GitBranch className="h-5 w-5" aria-hidden="true" />
@@ -88,7 +91,7 @@ export function Footer({ footer, siteName = "Flixstack" }: FooterProps) {
                 href="https://twitter.com/contentstack"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-text-secondary hover:text-(--color-text-primary) transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring) rounded-md p-1"
+                className="text-text-secondary hover:text-accent transition-colors p-1"
                 aria-label="ContentStack on Twitter (opens in new tab)"
               >
                 <XIcon className="h-5 w-5" aria-hidden="true" />
@@ -99,7 +102,10 @@ export function Footer({ footer, siteName = "Flixstack" }: FooterProps) {
           {/* Link columns */}
           {FOOTER_COLUMNS.map((col) => (
             <div key={col.heading}>
-              <h2 className="text-sm font-semibold text-(--color-text-primary) mb-3" {...col.$?.heading}>
+              <h2
+                className="font-mono text-xs font-semibold uppercase tracking-widest text-text-primary mb-3"
+                {...col.$?.heading}
+              >
                 {col.heading}
               </h2>
               <ul className="space-y-2" role="list">
@@ -109,7 +115,7 @@ export function Footer({ footer, siteName = "Flixstack" }: FooterProps) {
                       href={link.href}
                       target={link.open_in_new_tab ? "_blank" : undefined}
                       rel={link.open_in_new_tab ? "noopener noreferrer" : undefined}
-                      className="text-sm text-text-secondary hover:text-(--color-text-primary) transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring) rounded-sm"
+                      className="text-sm text-text-secondary hover:text-accent transition-colors"
                       {...link.$?.label}
                     >
                       {link.label}
@@ -122,16 +128,20 @@ export function Footer({ footer, siteName = "Flixstack" }: FooterProps) {
         </div>
 
         <div className="mt-10 pt-6 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-4">
-          <p className="text-xs text-text-disabled" {...footer?.$?.legal_text}>
+          <ReduceEffectsControl />
+          <p className="font-mono text-xs text-text-secondary" {...footer?.$?.legal_text}>
             {footer?.legal_text || `© ${new Date().getFullYear()} ${siteName}. All rights reserved.`}
           </p>
-          <p className="text-xs text-text-disabled">
+          <p className="font-mono text-xs text-text-secondary">
+            <span className="text-accent" aria-hidden="true">
+              &gt;{" "}
+            </span>
             Built with{" "}
             <a
               href="https://contentstack.com"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-accent hover:underline focus-visible:outline-2 focus-visible:outline-(--color-focus-ring) rounded-sm"
+              className="text-accent underline underline-offset-2"
             >
               Contentstack
             </a>{" "}
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index e3506b6..4d5c9aa 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -33,7 +33,7 @@ export function Header({ header, siteName = "Flixstack" }: HeaderProps) {
 
   return (
     <header
-      className="sticky top-0 z-50 border-b border-[var(--color-border)] bg-[var(--color-bg-surface)]/95 backdrop-blur-md"
+      className="chrome-underglow sticky top-0 z-50 border-b border-border bg-surface/95 backdrop-blur-md"
       role="banner"
     >
       <div className="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8">
@@ -41,7 +41,7 @@ export function Header({ header, siteName = "Flixstack" }: HeaderProps) {
           {/* Logo */}
           <Link
             href="/"
-            className="flex items-center gap-2 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)] rounded-md"
+            className="flex items-center gap-2 shrink-0"
             aria-label={`${siteName} — go to home page`}
           >
             {header?.logo?.url ? (
@@ -50,18 +50,22 @@ export function Header({ header, siteName = "Flixstack" }: HeaderProps) {
                 alt={header.logo.title ?? siteName}
                 width={32}
                 height={32}
-                className="h-8 w-8 rounded-lg object-cover"
+                className="notch-sm h-8 w-8 object-cover"
                 {...header.$?.logo}
               />
             ) : (
               <span
-                className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--color-accent)]"
+                className="notch-sm flex h-8 w-8 items-center justify-center bg-accent"
                 aria-hidden="true"
               >
-                <Play className="h-4 w-4 fill-[var(--color-accent-foreground)] text-[var(--color-accent-foreground)]" />
+                <Play className="h-4 w-4 fill-accent-foreground text-accent-foreground" />
               </span>
             )}
-            <span className="text-xl font-bold tracking-tight">{siteName}</span>
+            {/* Wordmark hides below sm: in Chakra Petch caps it is ~117px wide, which
+                pushed the header past a 320px viewport (WCAG 1.4.10 Reflow). The
+                logo mark stays, and the link's aria-label already carries the
+                site name, so nothing is lost for assistive tech. */}
+            <span className="hidden sm:inline font-display text-xl uppercase">{siteName}</span>
           </Link>
 
           {/* Desktop nav */}
@@ -81,9 +85,8 @@ export function Header({ header, siteName = "Flixstack" }: HeaderProps) {
               <Link
                 href="/search"
                 className={cn(
-                  "inline-flex items-center justify-center p-2 rounded-lg transition-colors",
-                  "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-elevated)]",
-                  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+                  "notch-sm inline-flex items-center justify-center p-2 transition-colors",
+                  "text-text-secondary hover:text-accent hover:bg-elevated"
                 )}
                 aria-label="Search titles"
               >
@@ -97,9 +100,8 @@ export function Header({ header, siteName = "Flixstack" }: HeaderProps) {
               <Link
                 href="/profile"
                 className={cn(
-                  "inline-flex items-center justify-center p-2 rounded-lg transition-colors",
-                  "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-elevated)]",
-                  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+                  "notch-sm inline-flex items-center justify-center p-2 transition-colors",
+                  "text-text-secondary hover:text-accent hover:bg-elevated"
                 )}
                 aria-label="User profile"
               >
diff --git a/src/components/layout/nav.tsx b/src/components/layout/nav.tsx
index b0f5af9..bf231e2 100644
--- a/src/components/layout/nav.tsx
+++ b/src/components/layout/nav.tsx
@@ -12,13 +12,16 @@ interface NavProps {
 }
 
 export function Nav({ links, pathname, variant, onLinkClick }: NavProps) {
+  // The active route is marked three ways, never by colour alone: the accent
+  // colour, the underscore caret (`.nav-link`, driven by aria-current), and
+  // aria-current itself for assistive tech.
   const linkClassName = (href: string) =>
     cn(
-      "rounded-md text-sm font-medium transition-colors",
+      "nav-link relative font-mono text-xs uppercase tracking-wider transition-colors",
       variant === "desktop" ? "px-3 py-2" : "block px-3 py-2",
       pathname === href
-        ? "text-[var(--color-accent)] bg-[var(--color-accent-subtle)]"
-        : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-elevated)]"
+        ? "text-accent"
+        : "text-text-secondary hover:text-text-primary"
     );
 
   // Keyed on the Contentstack per-item uid, not href: two menu items may
@@ -44,7 +47,7 @@ export function Nav({ links, pathname, variant, onLinkClick }: NavProps) {
       <nav
         id="mobile-nav"
         aria-label="Mobile navigation"
-        className="md:hidden border-t border-[var(--color-border)] bg-[var(--color-bg-surface)] px-4 py-4"
+        className="md:hidden border-t border-border bg-surface px-4 py-4"
       >
         <ul className="flex flex-col gap-1" role="list">
           {links.map((link, i) => (
diff --git a/src/components/layout/providers.tsx b/src/components/layout/providers.tsx
index 5b94b4e..72a2f36 100644
--- a/src/components/layout/providers.tsx
+++ b/src/components/layout/providers.tsx
@@ -4,9 +4,13 @@ import { ThemeProvider } from "next-themes";
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
+    // Dark is the default: the cyber treatment is dark-native, so a first-time
+    // visitor should land in the intended design. `enableSystem` stays on, so
+    // System remains selectable and anyone who has explicitly chosen light or
+    // system keeps it.
     <ThemeProvider
       attribute="class"
-      defaultTheme="system"
+      defaultTheme="dark"
       enableSystem
       disableTransitionOnChange={false}
     >
diff --git a/src/components/layout/reduce-effects-toggle.tsx b/src/components/layout/reduce-effects-toggle.tsx
new file mode 100644
index 0000000..9b2e408
--- /dev/null
+++ b/src/components/layout/reduce-effects-toggle.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { useCallback, useEffect, useSyncExternalStore } from "react";
+
+/**
+ * Storage key for the "reduce effects" preference. Kept in sync with the
+ * pre-hydration script in `app/layout.tsx`, which applies the class before
+ * first paint so there is no flash of un-reduced effects.
+ */
+export const REDUCE_FX_KEY = "flixstack-reduce-fx";
+const CLASS = "reduce-fx";
+
+// The preference lives on <html> as a class, not in React state: the
+// pre-hydration script needs to set it before React exists, and CSS reads it
+// from there. useSyncExternalStore subscribes to our own change event so every
+// mounted toggle (footer + profile) stays in sync without lifted state.
+const EVENT = "flixstack:reduce-fx";
+
+function subscribe(onChange: () => void) {
+  window.addEventListener(EVENT, onChange);
+  window.addEventListener("storage", onChange);
+  return () => {
+    window.removeEventListener(EVENT, onChange);
+    window.removeEventListener("storage", onChange);
+  };
+}
+
+const getSnapshot = () => document.documentElement.classList.contains(CLASS);
+// Server render assumes effects are ON, matching the un-suppressed default.
+const getServerSnapshot = () => false;
+
+export function useReduceEffects() {
+  const enabled = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+  // Safety net for client-rendered shells. The pre-hydration script in
+  // app/layout.tsx keeps normal server-rendered loads flash-free, but it does
+  // not run when React renders the shell on the client — inline scripts inside
+  // React components are never executed then. The 404 route hits exactly that
+  // path (it 307-redirects, then renders client-side), so without this the
+  // preference silently failed there while working everywhere else.
+  //
+  // This reconciles the DOM from storage on mount. It is a no-op whenever the
+  // script already ran, so it costs a possible single frame only on the paths
+  // where the script cannot run at all.
+  useEffect(() => {
+    let stored: string | null = null;
+    try {
+      stored = localStorage.getItem(REDUCE_FX_KEY);
+    } catch {
+      return;
+    }
+    const should = stored === "1";
+    if (should !== document.documentElement.classList.contains(CLASS)) {
+      document.documentElement.classList.toggle(CLASS, should);
+      window.dispatchEvent(new Event(EVENT));
+    }
+  }, []);
+
+  const setEnabled = useCallback((next: boolean) => {
+    document.documentElement.classList.toggle(CLASS, next);
+    try {
+      localStorage.setItem(REDUCE_FX_KEY, next ? "1" : "0");
+    } catch {
+      // Private browsing / storage disabled — the class still applies for this
+      // session, it just won't persist.
+    }
+    window.dispatchEvent(new Event(EVENT));
+  }, []);
+
+  return [enabled, setEnabled] as const;
+}
+
+/**
+ * A `role="switch"` control for the reduce-effects preference.
+ *
+ * This is a *user preference*, never a substitute for `prefers-reduced-motion`
+ * — that media query is honoured independently in globals.css and always wins,
+ * so a visitor with the OS setting on gets reduced motion whatever this says.
+ */
+export function ReduceEffectsToggle({ className }: { className?: string }) {
+  const [enabled, setEnabled] = useReduceEffects();
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={enabled}
+      aria-label="Reduce visual effects"
+      onClick={() => setEnabled(!enabled)}
+      className={`relative inline-flex h-6 w-11 shrink-0 items-center border transition-colors ${
+        enabled ? "border-accent bg-accent" : "border-border-control bg-elevated"
+      } ${className ?? ""}`}
+    >
+      <span
+        className={`inline-block h-4 w-4 transform rounded-pod transition-transform ${
+          enabled
+            ? "translate-x-6 bg-(--color-accent-foreground)"
+            : "translate-x-1 bg-(--color-text-secondary)"
+        }`}
+        aria-hidden="true"
+      />
+    </button>
+  );
+}
+
+/** Compact labelled variant for the footer. */
+export function ReduceEffectsControl() {
+  const [enabled] = useReduceEffects();
+  return (
+    <div className="flex items-center gap-3">
+      <ReduceEffectsToggle />
+      <span className="font-mono text-xs uppercase tracking-wider text-text-secondary">
+        Reduce effects
+        <span className="sr-only">{enabled ? " (on)" : " (off)"}</span>
+      </span>
+    </div>
+  );
+}
diff --git a/src/components/layout/theme-toggle.tsx b/src/components/layout/theme-toggle.tsx
index 3934319..e6e0197 100644
--- a/src/components/layout/theme-toggle.tsx
+++ b/src/components/layout/theme-toggle.tsx
@@ -2,32 +2,60 @@
 
 import { useTheme } from "next-themes";
 import { Sun, Moon } from "lucide-react";
+import { useSyncExternalStore } from "react";
 import { Button } from "@/components/ui/button";
-import { useEffect, useState } from "react";
+
+// "Am I hydrated yet?" without setState-in-an-effect: the server snapshot is
+// false and the client snapshot is true, so the first client render matches SSR
+// and the second reflects reality. Replaces the previous
+// `useEffect(() => setMounted(true), [])`, which triggered a cascading render.
+const neverChanges = () => () => {};
+const useHydrated = () =>
+  useSyncExternalStore(
+    neverChanges,
+    () => true,
+    () => false
+  );
 
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
+  // `resolvedTheme`, not `theme`. With `enableSystem`, `theme` holds the
+  // *setting* — the literal string "system" — so `theme === "dark"` was false
+  // for every visitor on System, even while the page rendered dark. That gave
+  // the wrong icon and, worse, announced the wrong aria-label to screen
+  // readers. `resolvedTheme` is the theme actually in effect.
+  const { setTheme, resolvedTheme } = useTheme();
+  const hydrated = useHydrated();
 
-  // Avoid hydration mismatch
-  useEffect(() => setMounted(true), []);
-  if (!mounted) return <div className="w-9 h-9" aria-hidden="true" />;
+  const isDark = resolvedTheme === "dark";
+  // Icon and label both describe the *action*, matching the aria-label, so
+  // there is no ambiguity about whether the control shows state or intent.
+  const Icon = isDark ? Sun : Moon;
+  const label = isDark ? "[ DAY ]" : "[ NIGHT ]";
+  const action = isDark ? "Switch to light mode" : "Switch to dark mode";
 
-  const isDark = theme === "dark";
+  // Before hydration the resolved theme is unknowable, so render the control at
+  // its final size but inert and invisible — no layout shift, and no briefly
+  // wrong label announced. The label span is a fixed width and nowrap so the
+  // longer "[ NIGHT ]" cannot wrap and both states occupy the same space.
+  if (!hydrated) {
+    return (
+      <Button variant="ghost" size="sm" aria-hidden="true" tabIndex={-1} className="invisible">
+        <Moon className="h-5 w-5" aria-hidden="true" />
+        <span className="hidden sm:inline w-20 shrink-0 whitespace-nowrap text-left">[ NIGHT ]</span>
+      </Button>
+    );
+  }
 
   return (
     <Button
       variant="ghost"
-      size="icon"
+      size="sm"
       onClick={() => setTheme(isDark ? "light" : "dark")}
-      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
-      title={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      aria-label={action}
+      title={action}
     >
-      {isDark ? (
-        <Sun className="h-5 w-5" aria-hidden="true" />
-      ) : (
-        <Moon className="h-5 w-5" aria-hidden="true" />
-      )}
+      <Icon className="h-5 w-5" aria-hidden="true" />
+      <span className="hidden sm:inline w-20 shrink-0 whitespace-nowrap text-left">{label}</span>
     </Button>
   );
 }
diff --git a/src/components/streaming/hero.tsx b/src/components/streaming/hero.tsx
index 2081488..726d867 100644
--- a/src/components/streaming/hero.tsx
+++ b/src/components/streaming/hero.tsx
@@ -43,7 +43,9 @@ export function Hero({ banners }: HeroProps) {
       aria-label="Featured content"
       aria-live="polite"
       aria-atomic="true"
-      className="relative w-full h-[60vh] min-h-100 max-h-175 overflow-hidden bg-elevated"
+      // Fixed dark ground, not bg-elevated: the copy is white in both themes,
+      // so a theme-following surface would put white text on a light ground.
+      className="hud-frame relative w-full h-[60vh] min-h-100 max-h-175 overflow-hidden bg-[#05070A]"
       onMouseEnter={() => setPaused(true)}
       onMouseLeave={() => setPaused(false)}
     >
@@ -59,15 +61,12 @@ export function Hero({ banners }: HeroProps) {
         />
       )}
 
-      {/* Gradient overlay */}
-      <div
-        className="absolute inset-0 bg-linear-to-r from-black/80 via-black/40 to-transparent"
-        aria-hidden="true"
-      />
-      <div
-        className="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent"
-        aria-hidden="true"
-      />
+      {/* Three-layer scrim: horizontal wash + bottom vignette (both in
+          .hero-scrim, at a fixed dark ink) plus scanlines. The previous
+          version faded to `from-background`, which in light mode put the
+          white title at 1.12:1. Worst case over pure-white artwork is now
+          10.21:1 for the title and 7.23:1 for the subtitle. */}
+      <div className="hero-scrim scanlines absolute inset-0" aria-hidden="true" />
 
       {/* Content */}
       <div className="relative h-full flex items-end pb-12 px-4 sm:px-6 lg:px-8">
@@ -78,13 +77,13 @@ export function Hero({ banners }: HeroProps) {
             </Badge>
           )}
           <h1
-            className="text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight mb-3"
+            className="font-display chromatic text-3xl sm:text-4xl md:text-5xl uppercase text-white leading-tight mb-3"
             {...banner.$?.title}
           >
             {banner.title}
           </h1>
           <p
-            className="text-white/80 text-base sm:text-lg mb-6 leading-relaxed line-clamp-2"
+            className="text-white/85 text-base sm:text-lg mb-6 leading-relaxed line-clamp-2"
             {...banner.$?.subtitle}
           >
             {banner.subtitle}
@@ -123,10 +122,9 @@ export function Hero({ banners }: HeroProps) {
           <button
             onClick={prev}
             className={cn(
-              "absolute left-4 top-1/2 -translate-y-1/2",
-              "flex h-10 w-10 items-center justify-center rounded-full",
-              "bg-black/40 text-white hover:bg-black/60 transition-colors",
-              "focus-visible:outline-2 focus-visible:outline-(--color-focus-ring)"
+              "absolute left-4 top-1/2 -translate-y-1/2 notch-sm",
+              "flex h-10 w-10 items-center justify-center border border-white/25",
+              "bg-black/50 text-white hover:border-accent hover:text-accent transition-colors"
             )}
             aria-label="Previous featured title"
           >
@@ -135,10 +133,9 @@ export function Hero({ banners }: HeroProps) {
           <button
             onClick={next}
             className={cn(
-              "absolute right-4 top-1/2 -translate-y-1/2",
-              "flex h-10 w-10 items-center justify-center rounded-full",
-              "bg-black/40 text-white hover:bg-black/60 transition-colors",
-              "focus-visible:outline-2 focus-visible:outline-(--color-focus-ring)"
+              "absolute right-4 top-1/2 -translate-y-1/2 notch-sm",
+              "flex h-10 w-10 items-center justify-center border border-white/25",
+              "bg-black/50 text-white hover:border-accent hover:text-accent transition-colors"
             )}
             aria-label="Next featured title"
           >
diff --git a/src/components/streaming/rail.tsx b/src/components/streaming/rail.tsx
index 8bb3761..9f5bed6 100644
--- a/src/components/streaming/rail.tsx
+++ b/src/components/streaming/rail.tsx
@@ -31,18 +31,29 @@ export function Rail({ rail, ...props }: RailProps) {
     >
       {/* Header */}
       <div className="flex items-center justify-between mb-3 px-4 sm:px-6 lg:px-8">
-        <h2 className="text-lg font-bold text-[var(--color-text-primary)]" {...rail.$?.title}>
-          {rail.title}
-        </h2>
+        <div className="flex items-baseline gap-2 min-w-0">
+          {/* Sibling of the h2, not inside it, so the Contentstack live-preview
+              edit tag stays bound to the title text alone. */}
+          {/* Braced string, not a bare `//` text node — as raw JSX text it is
+              indistinguishable from a comment (react/jsx-no-comment-textnodes). */}
+          <span className="font-mono text-sm text-accent shrink-0" aria-hidden="true">
+            {"//"}
+          </span>
+          <h2
+            className="font-display text-lg uppercase text-text-primary truncate"
+            {...rail.$?.title}
+          >
+            {rail.title}
+          </h2>
+        </div>
         <div className="flex items-center gap-1" aria-label={`Scroll ${rail.title}`}>
           <button
             onClick={() => scroll("left")}
             className={cn(
-              "flex h-8 w-8 items-center justify-center rounded-full",
-              "border border-[var(--color-border)] bg-[var(--color-bg-surface)]",
-              "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]",
-              "hover:bg-[var(--color-bg-elevated)] transition-colors",
-              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+              "notch-sm flex h-8 w-8 items-center justify-center",
+              "border border-border-control bg-surface",
+              "text-text-secondary hover:border-accent hover:text-accent",
+              "transition-colors"
             )}
             aria-label={`Scroll ${rail.title} left`}
           >
@@ -51,11 +62,10 @@ export function Rail({ rail, ...props }: RailProps) {
           <button
             onClick={() => scroll("right")}
             className={cn(
-              "flex h-8 w-8 items-center justify-center rounded-full",
-              "border border-[var(--color-border)] bg-[var(--color-bg-surface)]",
-              "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]",
-              "hover:bg-[var(--color-bg-elevated)] transition-colors",
-              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+              "notch-sm flex h-8 w-8 items-center justify-center",
+              "border border-border-control bg-surface",
+              "text-text-secondary hover:border-accent hover:text-accent",
+              "transition-colors"
             )}
             aria-label={`Scroll ${rail.title} right`}
           >
@@ -67,7 +77,7 @@ export function Rail({ rail, ...props }: RailProps) {
       {/* Scrollable rail */}
       <div
         ref={scrollRef}
-        className="scroll-rail flex gap-4 px-4 sm:px-6 lg:px-8 pb-4"
+        className="scroll-rail rail-fade flex gap-4 px-4 sm:px-6 lg:px-8 pb-4"
         role="list"
         aria-label={`${rail.title} titles`}
         onKeyDown={(e) => {
diff --git a/src/components/streaming/title-card.tsx b/src/components/streaming/title-card.tsx
index 043ccd5..9051dae 100644
--- a/src/components/streaming/title-card.tsx
+++ b/src/components/streaming/title-card.tsx
@@ -24,7 +24,6 @@ export function TitleCard({
   fullWidth = false,
   ...props
 }: TitleCardProps) {
-  const [hovered, setHovered] = useState(false);
   const [imgError, setImgError] = useState(false);
 
   const href = `/watch/${title.slug}`;
@@ -33,10 +32,11 @@ export function TitleCard({
 
   return (
     <article
-      className="group relative shrink-0 rounded-lg overflow-hidden bg-elevated transition-transform duration-200 hover:scale-105 hover:z-10 focus-within:scale-105 focus-within:z-10"
+      // `notch` + `sweep-host` replace the old hover:scale-105. Scaling the
+      // whole card forces layout work for every card in a rail; the sweep is a
+      // transform on a pseudo-element, which composites.
+      className="notch group sweep-host relative shrink-0 overflow-hidden bg-elevated"
       style={{ width: fullWidth ? "100%" : layout === "portrait" ? "160px" : "280px" }}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
       data-cs-entry={props["data-cs-entry"]}
       data-cs-content-type={props["data-cs-content-type"]}
     >
@@ -63,25 +63,28 @@ export function TitleCard({
           </div>
         )}
 
-        {/* Hover overlay */}
-        <div
-          className={cn(
-            "absolute inset-0 bg-black/60 flex items-center justify-center transition-opacity duration-200",
-            hovered ? "opacity-100" : "opacity-0"
-          )}
-          aria-hidden="true"
-        >
+        {/* Scan sweep — decorative, gated by --fx-sweep-opacity */}
+        <span className="sweep" aria-hidden="true" />
+
+        {/* Hover / focus overlay.
+            Not aria-hidden: it holds the watchlist button, and an aria-hidden
+            container with a focusable child is an ARIA violation (axe
+            `aria-hidden-focus`) — it also let keyboard users focus an
+            invisible control. The overlay now reveals on focus-within too, so
+            the button is visible whenever it is focused. Only the duplicate
+            play link is hidden, since the title link already goes there. */}
+        <div className="absolute inset-0 bg-black/65 flex items-center justify-center opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100">
           <div className="flex items-center gap-2">
             <Link
               href={href}
               tabIndex={-1}
-              className="flex h-10 w-10 items-center justify-center rounded-full bg-accent text-accent-foreground hover:bg-accent-hover transition-colors"
-              aria-label={`Play ${title.title}`}
+              aria-hidden="true"
+              className="notch-sm flex h-10 w-10 items-center justify-center bg-accent text-accent-foreground hover:bg-accent-hover transition-colors"
             >
               <Play className="h-4 w-4 fill-current" aria-hidden="true" />
             </Link>
             <button
-              className="flex h-10 w-10 items-center justify-center rounded-full bg-white/20 text-white hover:bg-white/30 transition-colors"
+              className="focus-inset notch-sm flex h-10 w-10 items-center justify-center border border-white/30 bg-white/15 text-white hover:border-accent hover:text-accent transition-colors"
               aria-label={`Add ${title.title} to watchlist`}
             >
               <Plus className="h-4 w-4" aria-hidden="true" />
@@ -94,9 +97,7 @@ export function TitleCard({
           {title.content_tier === "premium" && (
             <Badge variant="premium">Premium</Badge>
           )}
-          {!isMovie && (
-            <Badge variant="default">Series</Badge>
-          )}
+          {!isMovie && <Badge variant="info">Series</Badge>}
         </div>
       </div>
 
@@ -104,31 +105,28 @@ export function TitleCard({
       <div className="p-3">
         <Link
           href={href}
-          className="block font-semibold text-sm text-(--color-text-primary) hover:text-accent transition-colors line-clamp-1 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--color-focus-ring) rounded-sm"
+          className="focus-inset chromatic font-display block text-sm text-text-primary hover:text-accent transition-colors line-clamp-1"
           {...title.$?.title}
         >
           {title.title}
         </Link>
-        <div className="flex items-center gap-2 mt-1">
-          <span className="text-xs text-text-secondary">
+        {/* Metadata reads as a terminal readout: mono, tabular figures so
+            years and runtimes line up down a rail. */}
+        <div className="flex items-center gap-2 mt-1 font-mono text-xs tabular-nums">
+          <span className="text-text-secondary">
             {new Date(title.release_date).getFullYear()}
           </span>
           {runtime && (
-            <span className="text-xs text-text-secondary">
-              · {formatRuntime(runtime)}
-            </span>
+            <span className="text-text-secondary">· {formatRuntime(runtime)}</span>
           )}
-          <span className="flex items-center gap-0.5 text-xs text-accent ml-auto">
+          <span className="flex items-center gap-0.5 text-accent ml-auto">
             <Star className="h-3 w-3 fill-current" aria-hidden="true" />
             <span aria-label={`Score: ${title.score} out of 100`}>{title.score}</span>
           </span>
         </div>
-        <div className="flex gap-1 mt-2 flex-wrap">
+        <div className="flex gap-2 mt-2 flex-wrap font-mono text-xs uppercase tracking-wider">
           {title.genres.slice(0, 2).map((g) => (
-            <span
-              key={g.uid}
-              className="text-xs text-text-disabled leading-none"
-            >
+            <span key={g.uid} className="text-text-secondary leading-none">
               {g.title}
             </span>
           ))}
diff --git a/src/components/streaming/video-player.tsx b/src/components/streaming/video-player.tsx
index 69cdf40..0f44d24 100644
--- a/src/components/streaming/video-player.tsx
+++ b/src/components/streaming/video-player.tsx
@@ -38,7 +38,11 @@ export function VideoPlayer({ playback, poster, label, autoPlay = true, classNam
       playsInline
       poster={posterSrc}
       aria-label={`Video player: ${label}`}
-      className={className ?? "w-full h-full bg-black"}
+      // Native controls, deliberately: replacing them is an accessibility
+      // regression for keyboard, screen-reader and caption users. Only the
+      // container chrome changes — no clip-path, which would clip the
+      // browser's own control bar at the corners.
+      className={className ?? "w-full h-full border border-border-control bg-black"}
     >
       <source src={src} type={type} />
       {playback.captions.map((c, i) => (
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 63c6dff..04e1478 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -1,7 +1,14 @@
 import { cn } from "@/lib/utils";
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-  variant?: "default" | "accent" | "premium" | "rating" | "outline";
+  variant?:
+    | "default"
+    | "accent"
+    | "info"
+    | "signal"
+    | "premium"
+    | "rating"
+    | "outline";
 }
 
 export function Badge({
@@ -10,23 +17,31 @@ export function Badge({
   children,
   ...props
 }: BadgeProps) {
+  // Every subtle/foreground pair below is verified at >= 4.5:1 — see the
+  // token tables in docs/cyber-redesign-plan.md.
   const variants = {
     default:
-      "bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] border border-[var(--color-border)]",
+      "bg-elevated text-text-secondary border border-border-control",
     accent:
-      "bg-[var(--color-accent-subtle)] text-[var(--color-accent)] border border-[var(--color-accent)]/20",
+      "bg-accent-subtle text-accent border border-accent/40",
+    info:
+      "bg-info-subtle text-info border border-info/40",
+    signal:
+      "bg-signal-subtle text-signal border border-signal/40",
     premium:
-      "bg-[var(--color-premium-subtle)] text-[var(--color-premium)] border border-[var(--color-premium)]/20",
+      "bg-premium-subtle text-premium border border-premium/40",
     rating:
-      "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] border border-[var(--color-border)] font-mono",
+      "bg-elevated text-text-primary border border-border-control",
     outline:
-      "border border-[var(--color-border)] text-[var(--color-text-secondary)]",
+      "border border-border-control text-text-secondary",
   };
 
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium",
+        // Badges carry data, so they take the mono voice and tabular figures —
+        // scores and years line up in a column across a rail.
+        "inline-flex items-center gap-1 px-2 py-0.5 rounded-chip font-mono text-xs font-medium uppercase tracking-wider tabular-nums",
         variants[variant],
         className
       )}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 162a4cb..00c0e84 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,34 +5,59 @@ import { cn } from "@/lib/utils";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "primary" | "secondary" | "ghost" | "outline" | "danger";
+  variant?: "primary" | "secondary" | "ghost" | "outline" | "danger" | "terminal";
   size?: "sm" | "md" | "lg" | "icon";
   loading?: boolean;
   asChild?: boolean;
 }
 
+// Control borders use --color-border-control, never the decorative divider
+// colour: a button's boundary is its affordance, so it owes 3:1 (WCAG 1.4.11).
+// `secondary` needs one especially — in light mode its elevated fill sits at
+// ~1.06:1 against the page, so without a border the control has no edge at all.
 const variantClasses = {
   primary:
-    "bg-[var(--color-accent)] text-[var(--color-accent-foreground)] hover:bg-[var(--color-accent-hover)] focus-visible:outline-[var(--color-focus-ring)]",
+    "bg-accent text-accent-foreground hover:bg-accent-hover",
   secondary:
-    "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] hover:bg-[var(--color-border)] focus-visible:outline-[var(--color-focus-ring)]",
+    "bg-elevated border-border-control text-text-primary hover:bg-border-control hover:text-(--color-bg-base)",
   ghost:
-    "text-[var(--color-text-primary)] hover:bg-[var(--color-bg-elevated)] focus-visible:outline-[var(--color-focus-ring)]",
+    "text-text-primary hover:bg-elevated hover:text-accent",
   outline:
-    "border border-[var(--color-border)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-elevated)] focus-visible:outline-[var(--color-focus-ring)]",
+    "border-border-control text-text-primary hover:border-accent hover:text-accent",
   danger:
-    "bg-[var(--color-error)] text-white hover:opacity-90 focus-visible:outline-[var(--color-error)]",
+    "bg-(--color-error) text-(--color-bg-base) hover:opacity-90",
+  terminal:
+    "btn-terminal relative bg-transparent text-accent hover:bg-accent-subtle",
 };
 
 const sizeClasses = {
-  sm: "px-3 py-1.5 text-sm",
+  sm: "px-3 py-1.5 text-xs",
   md: "px-4 py-2 text-sm",
   lg: "px-6 py-3 text-base",
   icon: "p-2",
 };
 
+// The terminal variant's bracket ticks need horizontal room to sit outside
+// the label, so it carries extra inline padding at every size.
+const terminalSizeClasses = {
+  sm: "px-5",
+  md: "px-6",
+  lg: "px-8",
+  icon: "px-4",
+};
+
+// Mono + uppercase + tracking is the terminal voice; `notch-sm` is the
+// corner-cut HUD geometry. The notch means the focus ring arrives as an
+// inset box-shadow (see globals.css) — clip-path would clip an outline.
+//
+// Every variant carries a 1px border, transparent unless the variant colours
+// it, so a bordered and an unbordered button are the same height side by side
+// (primary + secondary sit together in the hero).
+// `transition-colors`, not `transition-all`: box-shadow now carries the focus
+// ring, and transitioning it would fade the focus indicator in over 150ms.
+// Focus feedback should be immediate.
 const baseClasses =
-  "inline-flex items-center justify-center gap-2 font-semibold rounded-lg transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 select-none";
+  "inline-flex items-center justify-center gap-2 border border-transparent font-mono font-semibold uppercase tracking-wider notch-sm transition-colors duration-150 disabled:pointer-events-none disabled:opacity-50 select-none";
 
 export interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   variant?: keyof typeof variantClasses;
@@ -55,7 +80,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref
   ) => {
-    const classes = cn(baseClasses, variantClasses[variant], sizeClasses[size], className);
+    const classes = cn(
+      baseClasses,
+      variantClasses[variant],
+      sizeClasses[size],
+      variant === "terminal" && terminalSizeClasses[size],
+      className
+    );
 
     if (asChild) {
       // Clone the single child, merging the button classes into it
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
index 1019f43..edb33dc 100644
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -1,23 +1,51 @@
 import { cn } from "@/lib/utils";
 
+/**
+ * A single loading placeholder. Purely decorative and hidden from assistive
+ * tech — a card skeleton is several of these, and a rail is several cards, so
+ * announcing each one would fire a dozen simultaneous live regions. The
+ * *group* carries the single `role="status"`; see `SkeletonGroup`.
+ *
+ * The scanline sweep lives on `.skeleton` in globals.css, which also defines
+ * its reduced-motion and `.reduce-fx` static states.
+ */
 export function Skeleton({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      role="status"
-      aria-label="Loading…"
-      className={cn("skeleton rounded-md", className)}
+      aria-hidden="true"
+      className={cn("skeleton relative rounded-panel", className)}
       {...props}
     />
   );
 }
 
+/**
+ * Wraps a set of skeletons in one polite live region, so a loading rail
+ * announces "Loading…" once rather than once per placeholder.
+ */
+export function SkeletonGroup({
+  label = "Loading…",
+  className,
+  children,
+}: {
+  label?: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div role="status" aria-label={label} aria-live="polite" className={className}>
+      {children}
+    </div>
+  );
+}
+
 export function TitleCardSkeleton() {
   return (
-    <div className="flex flex-col gap-2">
-      <Skeleton className="aspect-video w-full rounded-lg" />
+    <div className="flex flex-col gap-2" aria-hidden="true">
+      <Skeleton className="aspect-video w-full" />
       <Skeleton className="h-4 w-3/4" />
       <Skeleton className="h-3 w-1/2" />
     </div>
@@ -26,15 +54,20 @@ export function TitleCardSkeleton() {
 
 export function HeroSkeleton() {
   return (
-    <div className="relative w-full h-[70vh] skeleton rounded-none">
-      <div className="absolute bottom-12 left-8 flex flex-col gap-3">
+    <SkeletonGroup
+      label="Loading featured content…"
+      // Matches Hero's own sizing so there is no layout shift when the real
+      // banner replaces it.
+      className="relative w-full h-[60vh] min-h-100 max-h-175 skeleton"
+    >
+      <div className="absolute bottom-12 left-4 sm:left-6 lg:left-8 flex flex-col gap-3">
         <Skeleton className="h-10 w-64" />
-        <Skeleton className="h-5 w-96" />
+        <Skeleton className="h-5 w-96 max-w-[80vw]" />
         <div className="flex gap-3 mt-2">
-          <Skeleton className="h-10 w-28 rounded-lg" />
-          <Skeleton className="h-10 w-28 rounded-lg" />
+          <Skeleton className="h-11 w-32" />
+          <Skeleton className="h-11 w-32" />
         </div>
       </div>
-    </div>
+    </SkeletonGroup>
   );
 }
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 421e68d..ad7c9a2 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -34,10 +34,15 @@ export function stripHtml(html: string): string {
 }
 
 export function getRatingColor(rating: string): string {
+  // Design tokens, not raw Tailwind palette colours. The previous values
+  // (text-red-600 dark:text-red-400 etc.) bypassed the token system and failed
+  // WCAG 1.4.3 — axe measured the R/TV-MA red at 3.73:1 on the elevated
+  // surface. Every token below is verified >= 4.5:1 on all three surfaces of
+  // both themes by scripts/check-contrast.mjs.
   const r = rating.toUpperCase();
-  if (r === "G") return "text-green-600 dark:text-green-400";
-  if (r === "PG") return "text-blue-600 dark:text-blue-400";
-  if (r === "PG-13") return "text-yellow-600 dark:text-yellow-400";
-  if (r === "R" || r === "TV-MA") return "text-red-600 dark:text-red-400";
-  return "text-[var(--color-text-secondary)]";
+  if (r === "G") return "text-accent";
+  if (r === "PG") return "text-info";
+  if (r === "PG-13") return "text-premium";
+  if (r === "R" || r === "TV-MA") return "text-(--color-error)";
+  return "text-text-secondary";
 }