diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..3c8f10d
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,125 @@
+# CTAO Science Portal — design system
+
+Single source of truth for look-and-feel. All values live as tokens in
+`src/styles/global.css`; this file states the rules. Brand basis: CTAO Brand
+Guidelines (Apr 2024) + techniques observed on ctao.org (nebula motion, generous
+spacing, 15/30/60 rounding). No frameworks, no JS for presentation.
+
+## Color tokens (brand-fixed — never add hues)
+
+| Token | Value | Use |
+|---|---|---|
+| `--galaxy` | `#00004A` | Headings, header/footer/hero bands |
+| `--cherenkov` | `#00E4D8` | Accents, flash, CTAs, hero subtitle. Never small text on light bg |
+| `--moon` | `#F5F5F5` | Utility surfaces (bands, TOC, chips) |
+| `--azure` | `#007AFF` | Focus rings, hover borders (UI only on light) |
+| `--indigo` | `#00009C` | Gradient depth, link hover |
+| `--text` / `--muted` / `--border` / `--link` | derived | Body ink; `--link #0057C2` is azure darkened to pass AA |
+
+## Typography
+
+| Role | Font | Rule |
+|---|---|---|
+| h1, h2 | Space Grotesk (`--font-display`) | Headlines ONLY (brand D.3.2) |
+| Everything else | Inter (`--font-body`) | Includes h3+, cards, UI |
+
+Always end `font-family` with a generic (`sans-serif`) — lint requirement.
+
+## Spacing scale (fluid; mobile ≈ min, desktop ≈ max)
+
+| Token | Value | Use |
+|---|---|---|
+| `--gutter` | `clamp(18px, 4vw, 28px)` | Container/menu side padding |
+| `--space-s` | `12px` | Chip gaps, small stacks |
+| `--space-m` | `20px` | Card/panel padding, grid gaps |
+| `--space-l` | `24–40px` | Article top, meta/cover margins, featured body |
+| `--space-xl` | `40–72px` | Section rhythm: every `.page` block, footer top |
+| `--space-band` | `48–96px` | Hero + auth band vertical padding |
+
+Rule: section/container/card padding comes from this table — no ad-hoc px.
+Prose-internal margins (h2/p/blockquote) are content-local and stay as written.
+
+## Radius & elevation
+
+Radius: `--radius 16px` (cards/panels), `--radius-pill` (buttons, chips, inputs).
+
+Only two shadows exist, both Galaxy-tinted (`rgba(0,0,74,…)`):
+
+| Token | Use |
+|---|---|
+| `--shadow-ambient` | Resting cards, panels, search rows |
+| `--shadow-lifted` | Hover/focus cards, dropdowns (suggest, mobile menu), auth card |
+
+Never write a literal `box-shadow`; compose focus rings as
+`0 0 0 2px var(--azure), var(--shadow-lifted)`.
+
+## Surfaces
+
+Rhythm per page: Galaxy hero band → content → Galaxy footer (flush, no margin).
+White = editorial (news grids, articles). `.band--moon` = service/utility
+sections (home Services, /search, /support, /proposals, /dashboard). Cards and
+panels are always white and pop against Moon via border + ambient shadow.
+
+## Motion policy (CSS-only, Apple-tier restraint)
+
+ctao.org animates nebula videos under Galaxy vignettes; our translation:
+
+1. **Band nebula** — one `--nebula` stack (Cherenkov .38 / Azure .33 /
+   Indigo .80 radial fields) used by hero + auth bands, static and animated
+   alike; the animated variant is an oversized pseudo-layer drifting via
+   `transform` only, 22s alternate. Clearly visible glow, never neon.
+2. **Whole-page ambient** — `.has-ambient::before`: fixed brand-hue wash
+   (Cherenkov .16 / Azure .12 / Indigo .10 — visible pastel fields, white
+   cards pop against them) drifting on a 60s alternate cycle. Opt-in per page
+   via `<Base ambient>`: **home only**. Login's full-viewport auth nebula
+   already is its ambient; news/article/utility pages stay calm (reading
+   focus). Body text NEVER sits on a moving gradient — cards, panels and
+   bands are solid layers above it.
+3. One-shot hero `rise` stagger; hover lift/transitions. Nothing else.
+
+Rules:
+- ALL `animation`/`transition` declarations live inside the single
+  `@media (prefers-reduced-motion: no-preference)` block at the end of
+  global.css; the `reduce` block additionally force-disables everything.
+- Animate `transform`/`opacity` only (compositor-only, per web.dev/MDN); never
+  background-position/box-shadow in keyframes. No `will-change` (animated
+  properties are auto-promoted — MDN). No `filter: blur` on large layers and no
+  `background-attachment: fixed` (broken on iOS) — the wash is a fixed-position
+  layer with pre-blurred radial gradients. No JS, no scroll-triggered motion.
+- Static gradients remain as the reduced-motion fallback (bands swap them for
+  the animated layer — never both, keeping contrast bounded; the ambient wash
+  simply stops moving).
+- If an effect calls attention to itself as an effect, cut it.
+
+## WCAG 2.1 AA notes (computed, worst-case animation frames)
+
+- Nebula blob peaks over Galaxy: Cherenkov α=.38 → white 7.9:1, Cherenkov
+  subtitle 4.9:1, eyebrow `#C7CDE9` 5.0:1. Azure α=.33 → all ≥ 7.7:1.
+  Indigo α=.80 → all ≥ 9.6:1. Cherenkov/Azure CORES must stay in opposite
+  corners (core-over-core would fail; fringe overlap ≈ 6:1).
+- On Moon: `--link` 6.1:1, `--muted` 7.1:1, `--text` 16.9:1.
+- Ambient wash worst overlap (`rgb(188,237,249)`): `--link` 5.3:1, `--muted`
+  6.2:1, Galaxy h2 15.2:1.
+- Ceilings: nebula ≤ .38 Cherenkov / ≤ .35 Azure; wash ≤ .16/.12/.10 —
+  recompute (WCAG relative luminance) if any alpha or hue placement changes.
+- Focus visible everywhere; tap targets ≥ 44px; skip link first.
+
+## Article TOC pattern
+
+Rendered only when ≥3 h2/h3. Two renderings of the same list (only one ever
+displayed): `<details class="toc toc--inline">` collapsed under the title
+(< 1200px) and `<nav class="toc toc--rail">` sticky right rail (≥ 1200px,
+outside the 70ch column via `.article-layout` grid). MDN/Stripe/NN-g pattern.
+
+## Do not
+
+- No new hues, tints, or grays — derive via `color-mix` from brand tokens only.
+- No Space Grotesk outside h1/h2. No dark theme.
+- No ad-hoc spacing/shadow/radius values; extend the token tables instead.
+- No animation/transition outside the `no-preference` block; no JS motion.
+- No dependencies/frameworks (CSS or JS). No removal of "Mock" badges.
+- Don't lighten text over navy bands below the alphas listed above.
+- No clip-path/CSS approximations of brand assets — the flash is the real SVG
+  path from the official logo, or nothing.
+- Decoration budget: max ONE accent element per view (currently: footer flash,
+  static). No twinkles, floating shapes, or stacked decorations.
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index d127240..5edd982 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -1,6 +1,7 @@
 ---
 import '../styles/global.css';
-const { title = 'CTAO Science Portal', description = 'CTAO Science Portal — demo' } = Astro.props;
+// `ambient` opts a page into the whole-page drifting brand wash (home only — see DESIGN.md)
+const { title = 'CTAO Science Portal', description = 'CTAO Science Portal — demo', ambient = false } = Astro.props;
 const path = Astro.url.pathname;
 const isActive = (href) => (href === '/' ? path === '/' : path.startsWith(href));
 // Navigation = services from the Science Portal spec (REQUIREMENTS.md §2/§5).
@@ -25,7 +26,7 @@ const links = [
         self-hosted latin woff2 (variable) — @font-face lives in global.css. */}
     <link rel="preload" href="/fonts/space-grotesk-latin.woff2" as="font" type="font/woff2" crossorigin />
   </head>
-  <body>
+  <body class={ambient ? 'has-ambient' : undefined}>
     <a class="skip" href="#main">Skip to content</a>
     <header class="site-header">
       <div class="container nav">
@@ -70,7 +71,7 @@ const links = [
     </main>
     <footer class="footer">
       {/* Bottom menu required by SPEC §3.3.1: disclaimers, privacy, contact, settings, search.
-          Placeholder links = <a> without href (valid HTML placeholder-link semantics). */}
+          Site settings has no target yet — placeholder link = <a> without href. */}
       <div class="container">
         <div class="foot-top">
           <img src="/brand/AAFF_CTAO_Logo_RGB_Monochrome-negative.svg" alt="CTAO" />
@@ -78,17 +79,19 @@ const links = [
           Cherenkov Telescope Array Observatory.</p>
         </div>
         <nav class="foot-links" aria-label="Footer">
-          <a>Disclaimer</a>
-          <a>Privacy</a>
-          <a>Contact</a>
+          <a href="/pages/disclaimer">Disclaimer</a>
+          <a href="/pages/privacy">Privacy</a>
+          <a href="/pages/contact">Contact</a>
           <a>Site settings</a>
           <a href="/search">Search</a>
         </nav>
         <div class="foot-note">
-          <span class="flash" aria-hidden="true"></span>
+          {/* The real brand flash — path taken from the official logo SVG (BRAND D.4).
+              Sole decorative accent in this view; static by design. */}
+          <svg class="flash" viewBox="85.3 15 15 15" aria-hidden="true"><path fill="currentColor" d="M94.7,23.8c1-1.4,3.3-2.1,5.2-2.7c-2,0.1-4.4,0.3-5.8-0.6c-1.4-1-2.1-3.3-2.7-5.2c0.1,2,0.3,4.4-0.6,5.8c-1,1.4-3.3,2.1-5.2,2.7c2-0.1,4.4-0.3,5.8,0.6c1.4,1,2.1,3.3,2.7,5.2C93.9,27.6,93.7,25.2,94.7,23.8z"/></svg>
           <span>Science Portal Core demo (Cyfronet / SUSS-PORT team). Sample content
-          imported from ctao.org; footer links are placeholders. Statically generated from
-          Markdown (git-based CMS).</span>
+          imported from ctao.org; the Site settings link is a placeholder. Statically
+          generated from Markdown (git-based CMS).</span>
         </div>
       </div>
     </footer>
diff --git a/src/pages/dashboard.astro b/src/pages/dashboard.astro
index 64d051b..af2c414 100644
--- a/src/pages/dashboard.astro
+++ b/src/pages/dashboard.astro
@@ -27,7 +27,8 @@ const tickets = [
     </div>
   </section>
 
-  <section class="container page">
+  <section class="band--moon">
+    <div class="container page">
     <span class="badge-mock">Mock — sample data, no live services connected</span>
     <div class="dash-grid">
       <div class="panel">
@@ -68,5 +69,6 @@ const tickets = [
         </ul>
       </div>
     </div>
+    </div>
   </section>
 </Base>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e7bc80e..fdbb5e2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -17,9 +17,8 @@ const services = [
   { title: 'Documentation', desc: 'User guides and technical documentation.', badge: 'tbd' },
 ];
 ---
-<Base title="CTAO Science Portal" description="News, observation proposals, data and user services of the Cherenkov Telescope Array Observatory">
+<Base title="CTAO Science Portal" description="News, observation proposals, data and user services of the Cherenkov Telescope Array Observatory" ambient>
   <section class="hero-band">
-    <span class="flash" aria-hidden="true"></span>
     <div class="container hero">
       <div class="eyebrow">Cherenkov Telescope Array Observatory</div>
       <h1>CTAO Science Portal</h1>
@@ -41,24 +40,29 @@ const services = [
     newsSearch({ input: 'home-q', list: 'home-suggest', status: 'home-suggest-status', limit: 6, unit: 'suggestion(s)' });
   </script>
 
-  <section class="container page">
-    <div class="section-head"><h2>Services</h2></div>
-    <div class="grid">
-      {services.map((s) => (
-        <article class="card tile">
-          <h3>{s.href
-            ? (s.ext
-                ? <a class="external" href={s.href} target="_blank" rel="noopener">{s.title}</a>
-                : <a href={s.href}>{s.title}</a>)
-            : s.title}</h3>
-          <p class="desc">{s.desc}</p>
-          {s.badge === 'mock' && <span class="badge-mock">Mock</span>}
-          {s.badge === 'ext' && <span class="badge-ext">External — LUX team</span>}
-          {s.badge === 'tbd' && <span class="badge-ext">Planned (TBD)</span>}
-        </article>
-      ))}
+  {/* Surface rhythm (DESIGN.md): services on Moon Gray, editorial news on white */}
+  <section class="band--moon">
+    <div class="container page">
+      <div class="section-head"><h2>Services</h2></div>
+      <div class="grid">
+        {services.map((s) => (
+          <article class="card tile">
+            <h3>{s.href
+              ? (s.ext
+                  ? <a class="external" href={s.href} target="_blank" rel="noopener">{s.title}</a>
+                  : <a href={s.href}>{s.title}</a>)
+              : s.title}</h3>
+            <p class="desc">{s.desc}</p>
+            {s.badge === 'mock' && <span class="badge-mock">Mock</span>}
+            {s.badge === 'ext' && <span class="badge-ext">External — LUX team</span>}
+            {s.badge === 'tbd' && <span class="badge-ext">Planned (TBD)</span>}
+          </article>
+        ))}
+      </div>
     </div>
+  </section>
 
+  <section class="container page">
     <div class="section-head">
       <h2>Latest news</h2>
       <a class="more" href="/news">All news →</a>
diff --git a/src/pages/news/[slug].astro b/src/pages/news/[slug].astro
index a965ac3..5d31065 100644
--- a/src/pages/news/[slug].astro
+++ b/src/pages/news/[slug].astro
@@ -13,13 +13,30 @@ const toc = headings.filter((h) => h.depth === 2 || h.depth === 3);
 const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(d);
 ---
 <Base title={`${post.data.title} — CTAO`} description={post.data.description}>
-  <article class="container article">
-    <a class="back" href="/news">← All news</a>
-    <h1>{post.data.title}</h1>
-    <div class="meta"><span class="cat">{post.data.category}</span><span>{post.data.author}</span>·<time datetime={post.data.date.toISOString().slice(0, 10)}>{fmt(post.data.date)}</time></div>
-    {post.data.cover && <img class="cover" src={encodeURI(post.data.cover)} alt="" />}
+  {/* TOC pattern (MDN/Stripe/NN-g): sticky right rail ≥1200px, collapsed <details>
+      under the title below that. CSS shows exactly one of the two (DESIGN.md). */}
+  <div class="container article-layout">
+    <article class="article">
+      <a class="back" href="/news">← All news</a>
+      <h1>{post.data.title}</h1>
+      <div class="meta"><span class="cat">{post.data.category}</span><span>{post.data.author}</span>·<time datetime={post.data.date.toISOString().slice(0, 10)}>{fmt(post.data.date)}</time></div>
+      {toc.length >= 3 && (
+        <details class="toc toc--inline">
+          <summary>On this page</summary>
+          <ol>
+            {toc.map((h) => (
+              <li class={h.depth === 3 ? 'd3' : undefined}><a href={`#${h.slug}`}>{h.text}</a></li>
+            ))}
+          </ol>
+        </details>
+      )}
+      {post.data.cover && <img class="cover" src={encodeURI(post.data.cover)} alt="" />}
+      <div class="prose">
+        <Content />
+      </div>
+    </article>
     {toc.length >= 3 && (
-      <nav class="toc" aria-label="On this page">
+      <nav class="toc toc--rail" aria-label="On this page">
         <strong>On this page</strong>
         <ol>
           {toc.map((h) => (
@@ -28,8 +45,5 @@ const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).forma
         </ol>
       </nav>
     )}
-    <div class="prose">
-      <Content />
-    </div>
-  </article>
+  </div>
 </Base>
diff --git a/src/pages/news/index.astro b/src/pages/news/index.astro
index 63a32b3..4a2ac62 100644
--- a/src/pages/news/index.astro
+++ b/src/pages/news/index.astro
@@ -10,7 +10,6 @@ const iso = (d) => d.toISOString().slice(0, 10);
 ---
 <Base title="CTAO Science Portal — News" description="News and announcements of the CTAO">
   <section class="hero-band">
-    <span class="flash" aria-hidden="true"></span>
     <div class="container hero">
       <div class="eyebrow">Cherenkov Telescope Array Observatory</div>
       <h1>News &amp; Announcements</h1>
diff --git a/src/pages/proposals.astro b/src/pages/proposals.astro
index b40570c..9b5742c 100644
--- a/src/pages/proposals.astro
+++ b/src/pages/proposals.astro
@@ -10,7 +10,8 @@ import Base from '../layouts/Base.astro';
     </div>
   </section>
 
-  <section class="container page">
+  <section class="band--moon">
+    <div class="container page">
     <span class="badge-mock">Mock — no submission logic</span>
     <span class="badge-ext">Target: Proposal Handling System (APC team) integrated into the portal</span>
     <div class="panel panel--narrow">
@@ -45,5 +46,6 @@ import Base from '../layouts/Base.astro';
       <button class="btn" type="button">Submit proposal</button>
       <p class="notice">Demonstration mock — the form does not store any data.</p>
     </div>
+    </div>
   </section>
 </Base>
diff --git a/src/pages/search.astro b/src/pages/search.astro
index 7003ef5..2ecde29 100644
--- a/src/pages/search.astro
+++ b/src/pages/search.astro
@@ -10,7 +10,8 @@ import Base from '../layouts/Base.astro';
     </div>
   </section>
 
-  <section class="container page">
+  <section class="band--moon">
+    <div class="container page">
     <form class="search-form" role="search" action="/search" method="get">
       <label class="sr-only" for="q">Search news</label>
       <svg class="ico search-ico" aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4.3-4.3" /></svg>
@@ -20,6 +21,7 @@ import Base from '../layouts/Base.astro';
     <p class="notice" id="search-status" role="status" aria-live="polite">Type to search the news archive.</p>
     <ol class="search-results" id="search-results"></ol>
     <noscript><p class="notice">Search requires JavaScript. Browse all news on the <a href="/news">news page</a>.</p></noscript>
+    </div>
   </section>
 </Base>
 
diff --git a/src/pages/support.astro b/src/pages/support.astro
index ba3001b..8ddfcd6 100644
--- a/src/pages/support.astro
+++ b/src/pages/support.astro
@@ -17,16 +17,18 @@ const channels = [
     </div>
   </section>
 
-  <section class="container page">
-    <span class="badge-mock">Mock — support services not yet connected</span>
-    <div class="grid">
-      {channels.map((c) => (
-        <article class="card tile">
-          <h3>{c.title}</h3>
-          <p class="desc">{c.desc}</p>
-          <span class="badge-mock">Mock</span>
-        </article>
-      ))}
+  <section class="band--moon">
+    <div class="container page">
+      <span class="badge-mock">Mock — support services not yet connected</span>
+      <div class="grid">
+        {channels.map((c) => (
+          <article class="card tile">
+            <h3>{c.title}</h3>
+            <p class="desc">{c.desc}</p>
+            <span class="badge-mock">Mock</span>
+          </article>
+        ))}
+      </div>
     </div>
   </section>
 </Base>
diff --git a/src/styles/global.css b/src/styles/global.css
index f1e8fc3..847de02 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,6 +3,7 @@
    (April 2024): colors D.2, typography D.3 (Inter body / Space Grotesk display),
    flash D.4. All look-and-feel lives in the tokens below; WCAG 2.1 AA contrast.
    Light theme only (brand is light-first; navy bands carry the dark identity).
+   System rules (spacing / elevation / surfaces / motion): see DESIGN.md.
    ========================================================================== */
 :root {
   color-scheme: light;
@@ -28,11 +29,25 @@
   --radius: 16px;
   --radius-pill: 999px;
   --maxw: 1120px;
-  /* Spacing scale (4px base) — use these instead of ad-hoc paddings */
+  /* Fluid spacing scale (ctao.org rhythm: sections breathe, mobile stays compact).
+     Every section / container / card padding sits on this scale — no ad-hoc values. */
+  --gutter: clamp(18px, 4vw, 28px);              /* page side padding */
   --space-s: 12px;
   --space-m: 20px;
-  --space-l: 32px;
-  --space-xl: 56px;
+  --space-l: clamp(24px, 2vw + 16px, 40px);
+  --space-xl: clamp(40px, 3vw + 24px, 72px);     /* section rhythm */
+  --space-band: clamp(48px, 5vw + 28px, 96px);   /* hero / auth band padding */
+  /* Elevation — navy-tinted; the ONLY two shadows allowed in this codebase */
+  --shadow-ambient: 0 1px 2px rgba(0, 0, 74, 0.05), 0 4px 14px rgba(0, 0, 74, 0.07);
+  --shadow-lifted: 0 4px 10px rgba(0, 0, 74, 0.08), 0 18px 44px rgba(0, 0, 74, 0.18);
+  /* Nebula glow (BRAND D.5) — one stack for hero + auth bands, static AND animated.
+     Alphas are contrast ceilings (DESIGN.md): Cherenkov ≤.38, Azure ≤.35 keep the
+     Cherenkov subtitle/eyebrow ≥4.5:1 even with a blob core right under the text.
+     Cherenkov and Azure cores sit in opposite corners — cores never meet. */
+  --nebula:
+    radial-gradient(52% 58% at 78% 76%, rgba(0, 228, 216, 0.38), transparent 66%),
+    radial-gradient(46% 52% at 12% 18%, rgba(0, 122, 255, 0.33), transparent 64%),
+    radial-gradient(75% 85% at 40% 55%, rgba(0, 0, 156, 0.8), transparent 72%);
 }
 
 /* Self-hosted brand fonts — latin subset, variable weight, swap + metric-matched fallback */
@@ -92,17 +107,18 @@ img { max-width: 100%; height: auto; display: block; }
 }
 .skip:focus { top: 0; }
 
+/* Safety net: even third-party/UA leftovers never move for reduced-motion users */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { transition: none !important; animation: none !important; }
 }
 
-.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
+.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
+/* Surface rhythm: white (editorial) → Moon Gray (service/utility bands) → Galaxy (hero/footer) */
+.band--moon { background: var(--moon); }
 
-/* Flash — the 4-point star brand asset (BRAND D.4), CSS-only approximation */
-.flash {
-  display: inline-block; width: 14px; height: 14px; background: var(--cherenkov);
-  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
-}
+/* Flash — the REAL brand star (BRAND D.4): inline SVG path lifted from the
+   official logo, never a CSS approximation. Budget: one accent per view; static. */
+.flash { width: 12px; height: 12px; color: var(--cherenkov); flex: none; }
 
 /* Header — Galaxy Blue band, reverse (white) logo per BRAND B.1.2 */
 .site-header { background: var(--galaxy); position: sticky; top: 0; z-index: 10; }
@@ -131,9 +147,9 @@ img { max-width: 100%; height: auto; display: block; }
   .menu summary::-webkit-details-marker { display: none; }
   .menu nav {
     position: absolute; left: 0; right: 0; top: 100%;
-    display: flex; flex-direction: column; padding: 6px 20px 14px;
+    display: flex; flex-direction: column; padding: 6px var(--gutter) 14px;
     background: var(--galaxy); border-top: 1px solid rgba(255, 255, 255, 0.15);
-    box-shadow: 0 20px 32px rgba(0, 0, 74, 0.35);
+    box-shadow: var(--shadow-lifted);
   }
   .menu nav a {
     display: flex; align-items: center; min-height: 44px;
@@ -181,15 +197,14 @@ img { max-width: 100%; height: auto; display: block; }
   mask: var(--ico-ext) center / contain no-repeat;
 }
 
-/* Hero — navy band with a subtle nebula gradient (BRAND D.5) */
+/* Hero — navy band with a nebula glow (BRAND D.5). The static gradient below is
+   the reduced-motion fallback; with motion allowed, the glow moves to an animated
+   pseudo-layer (see the motion block at the end of this file). */
 .hero-band {
-  background:
-    radial-gradient(700px 340px at 85% 115%, rgba(0,228,216,0.28), transparent 65%),
-    radial-gradient(500px 260px at -5% -40%, rgba(0,0,156,0.55), transparent 60%),
-    var(--galaxy);
-  color: #fff; padding: var(--space-xl) 0; position: relative; overflow: hidden;
+  background: var(--nebula), var(--galaxy);
+  color: #fff; padding: var(--space-band) 0; position: relative; overflow: hidden;
 }
-.hero-band .flash { position: absolute; right: 8%; top: 22%; width: 22px; height: 22px; }
+.hero { position: relative; } /* content above the animated nebula layer */
 .hero h1 { font-size: clamp(2rem, 6vw, 3.6rem); margin: 0 0 10px; line-height: 1.12; font-weight: 700; }
 .hero p { color: var(--cherenkov); font-size: 1.08rem; max-width: 62ch; margin: 0; } /* subtitle per BRAND D.3.4 */
 .eyebrow {
@@ -212,7 +227,7 @@ img { max-width: 100%; height: auto; display: block; }
   position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5;
   list-style: none; margin: 0; padding: 6px; text-align: left;
   background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
-  box-shadow: 0 16px 40px rgba(0, 0, 74, 0.25);
+  box-shadow: var(--shadow-lifted);
 }
 .suggest:empty { display: none; }
 .suggest li { display: flex; align-items: center; gap: var(--space-s); padding: 0 12px; border-radius: calc(var(--radius) - 8px); }
@@ -251,18 +266,12 @@ img { max-width: 100%; height: auto; display: block; }
    whole card clickable via stretched link (research: NN/g & card-UI guides 2025). */
 .card {
   position: relative; background: #fff; border: 1px solid var(--border);
-  border-radius: var(--radius); overflow: hidden;
+  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-ambient);
   display: flex; flex-direction: column;
-  transition: border-color 0.15s ease, box-shadow 0.2s ease;
-}
-.card:hover, .card:focus-within {
-  border-color: var(--azure);
-  box-shadow: 0 2px 6px rgba(0, 0, 74, 0.06), 0 12px 28px rgba(0, 0, 74, 0.10);
 }
+.card:hover, .card:focus-within { border-color: var(--azure); box-shadow: var(--shadow-lifted); }
 /* Visible focus ring for the whole-card stretched link (WCAG 2.4.7) */
-.card:focus-within {
-  box-shadow: 0 0 0 2px var(--azure), 0 2px 6px rgba(0, 0, 74, 0.06), 0 12px 28px rgba(0, 0, 74, 0.10);
-}
+.card:focus-within { box-shadow: 0 0 0 2px var(--azure), var(--shadow-lifted); }
 .card .cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
 .card .body { padding: var(--space-m); display: flex; flex-direction: column; gap: 10px; flex: 1; }
 /* Cover-less cards get a Cherenkov top accent instead of an image */
@@ -274,7 +283,7 @@ img { max-width: 100%; height: auto; display: block; }
   padding: 4px 10px; border-radius: var(--radius-pill);
 }
 .card h3 {
-  margin: 2px 0 0; font-size: 1.1rem; line-height: 1.35; font-family: var(--font-body);
+  margin: 2px 0 0; font-size: 1.1rem; line-height: 1.35; font-family: var(--font-body), sans-serif;
   display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
 }
 .card h3 a { color: var(--galaxy); text-decoration: none; }
@@ -291,25 +300,19 @@ img { max-width: 100%; height: auto; display: block; }
 @container (min-width: 640px) {
   .card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 3fr 2fr; }
   .card--featured .cover { height: 100%; aspect-ratio: auto; }
-  .card--featured .body { padding: 26px 28px; justify-content: center; }
-  .card--featured h3 { font-size: 1.6rem; font-family: var(--font-display); -webkit-line-clamp: 3; line-clamp: 3; }
+  .card--featured .body { padding: var(--space-l); justify-content: center; }
+  .card--featured h3 { font-size: 1.6rem; font-family: var(--font-display), sans-serif; -webkit-line-clamp: 3; line-clamp: 3; }
   .card--featured .desc { -webkit-line-clamp: 3; line-clamp: 3; }
 }
-/* Motion (only when the user allows it): view transitions, smooth scroll, hover lift */
-@media (prefers-reduced-motion: no-preference) {
-  @view-transition { navigation: auto; }
-  html { scroll-behavior: smooth; }
-  .card { transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease; }
-  .card:hover { transform: translateY(-2px); }
-}
 
 /* Service tiles — card tokens, text-first */
 .tile { padding: var(--space-m); gap: 8px; }
 .tile h3 { margin: 0; }
 .tile .badge-mock, .tile .badge-ext { margin: auto 0 0; align-self: flex-start; }
 
-/* Article */
-.article { padding: 40px 0 72px; max-width: 70ch; }
+/* Article — 70ch column; on ≥1200px a sticky "On this page" rail sits to the right */
+.article-layout { display: grid; grid-template-columns: minmax(0, 70ch); }
+.article { padding: var(--space-l) 0 var(--space-xl); max-width: 70ch; }
 .article .back { color: var(--muted); font-size: 0.9rem; }
 .article h1 {
   color: var(--galaxy); font-size: clamp(2rem, 5vw, 3rem);
@@ -322,20 +325,34 @@ img { max-width: 100%; height: auto; display: block; }
 .article .cover { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--space-l); }
 /* Lead paragraph — slightly larger and muted */
 .prose > p:first-of-type { font-size: 1.08rem; color: var(--muted); }
-/* Article TOC — boxed "On this page" list (rendered only when ≥3 h2/h3) */
+/* Article TOC (MDN/Stripe pattern, rendered only when ≥3 h2/h3): sticky right rail
+   on wide screens, collapsed <details> under the title otherwise. */
 .toc {
   background: var(--moon); border: 1px solid var(--border); border-radius: var(--radius);
-  padding: var(--space-s) var(--space-m); margin-bottom: var(--space-l); font-size: 0.92rem;
+  padding: var(--space-s) var(--space-m); font-size: 0.92rem;
 }
-.toc strong {
-  display: block; font-size: 0.72rem; text-transform: uppercase;
-  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 4px;
+.toc strong, .toc summary {
+  font-size: 0.72rem; text-transform: uppercase; font-weight: 600;
+  letter-spacing: 0.08em; color: var(--muted);
 }
+.toc strong { display: block; margin-bottom: 4px; }
+.toc summary { cursor: pointer; padding: 6px 0; }
 .toc ol { list-style: none; margin: 0; padding: 0; }
 .toc li { margin: 8px 0; }
 .toc .d3 { padding-left: var(--space-s); }
 .toc a { text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
 .toc a:hover { text-decoration: underline; }
+.toc--inline { margin-bottom: var(--space-l); }
+.toc--rail { display: none; }
+@media (min-width: 1200px) {
+  .article-layout { grid-template-columns: minmax(0, 70ch) 15rem; column-gap: var(--space-xl); justify-content: space-between; }
+  .toc--inline { display: none; }
+  .toc--rail {
+    display: block; position: sticky; top: 88px; align-self: start;
+    margin-top: calc(var(--space-l) + 44px); /* aligns with the article h1 */
+    max-height: calc(100dvh - 112px); overflow: auto;
+  }
+}
 
 .prose h2 { color: var(--galaxy); margin: 34px 0 10px; font-size: clamp(1.25rem, 2.6vw, 1.45rem); }
 .prose h3 { color: var(--galaxy); margin: 26px 0 8px; font-size: 1.15rem; }
@@ -354,9 +371,12 @@ img { max-width: 100%; height: auto; display: block; }
 .prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
 .prose thead th { border-bottom: 2px solid var(--cherenkov); }
 
-/* Generic page / mockup */
-.page { padding: 40px 0 72px; }
-.panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-m); }
+/* Generic page section — one rhythm token for all pages */
+.page { padding: var(--space-xl) 0; }
+.panel {
+  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
+  padding: var(--space-m); box-shadow: var(--shadow-ambient);
+}
 .panel--narrow { max-width: 640px; }
 .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
 .form-row label { font-size: 0.88rem; font-weight: 500; }
@@ -378,12 +398,9 @@ img { max-width: 100%; height: auto; display: block; }
 .search-results li {
   display: flex; justify-content: space-between; align-items: center; gap: var(--space-s);
   background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
-  padding: 12px 18px; transition: border-color 0.15s ease, box-shadow 0.2s ease;
-}
-.search-results li:hover {
-  border-color: var(--azure);
-  box-shadow: 0 2px 6px rgba(0, 0, 74, 0.06), 0 12px 28px rgba(0, 0, 74, 0.10);
+  padding: 12px 18px; box-shadow: var(--shadow-ambient);
 }
+.search-results li:hover { border-color: var(--azure); box-shadow: var(--shadow-lifted); }
 .search-results a { text-decoration: none; font-weight: 500; }
 .search-results a:hover { text-decoration: underline; }
 /* Date chips on results and suggestions */
@@ -423,25 +440,23 @@ img { max-width: 100%; height: auto; display: block; }
 
 /* Auth (login mock) — nebula backdrop + floating card, modern auth pattern */
 .auth-band {
-  min-height: calc(100dvh - 64px);
-  display: grid; place-items: center; padding: var(--space-xl) 20px;
-  background:
-    radial-gradient(900px 500px at 80% 110%, rgba(0,228,216,0.35), transparent 60%),
-    radial-gradient(700px 420px at 10% -20%, rgba(0,0,156,0.6), transparent 60%),
-    var(--galaxy);
+  min-height: calc(100dvh - 64px); position: relative; overflow: hidden;
+  display: grid; place-items: center; padding: var(--space-band) var(--gutter);
+  background: var(--nebula), var(--galaxy);
 }
 .auth-card {
-  background: #fff; border-radius: calc(var(--radius) + 8px);
-  padding: 40px 36px; max-width: 440px; width: 100%;
-  box-shadow: 0 24px 64px rgba(0, 0, 74, 0.35);
+  position: relative; background: #fff; border-radius: calc(var(--radius) + 8px);
+  padding: clamp(24px, 5vw, 40px) clamp(20px, 4.5vw, 36px); max-width: 440px; width: 100%;
+  box-shadow: var(--shadow-lifted);
 }
 .auth-logo { height: 24px; width: auto; margin-bottom: var(--space-m); }
 .auth-card h1 { color: var(--galaxy); margin: 6px 0 10px; font-size: 1.8rem; }
 .auth-card .muted { color: var(--muted); font-size: 0.95rem; }
 .btn-wide { width: 100%; margin-top: var(--space-s); }
 
-/* Footer — brand band: logo + descriptor / spec links (§3.3.1) / demo note + flash */
-.footer { background: var(--galaxy); color: var(--on-galaxy-muted); font-size: 0.85rem; margin-top: var(--space-l); }
+/* Footer — brand band: logo + descriptor / spec links (§3.3.1) / demo note + flash.
+   No top margin: Moon/Galaxy bands meet it flush; white pages pad via .page/.article. */
+.footer { background: var(--galaxy); color: var(--on-galaxy-muted); font-size: 0.85rem; }
 .footer .container { display: grid; gap: var(--space-m); padding-top: var(--space-xl); padding-bottom: var(--space-l); }
 .foot-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }
 .foot-top img { height: 30px; width: auto; }
@@ -451,4 +466,55 @@ img { max-width: 100%; height: auto; display: block; }
 .foot-links a[href]:hover { text-decoration: underline; }
 .foot-links a:not([href]) { color: var(--on-galaxy-muted); }
 .foot-note { display: flex; align-items: center; gap: var(--space-s); border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: var(--space-m); }
-.foot-note .flash { width: 10px; height: 10px; flex: none; }
+
+/* Whole-page ambient (2026 pattern) — a fixed brand-hue wash behind everything,
+   opt-in per page via <Base ambient> (home only). Clearly visible pastel fields
+   (alphas .16/.12/.10 — ceilings: links on the worst blob overlap stay ≥ 5.3:1);
+   all reading surfaces (cards, panels, bands) are solid and cover it. Static
+   when motion is reduced. */
+.has-ambient::before {
+  content: ""; position: fixed; inset: -30%; z-index: -1; pointer-events: none;
+  background:
+    radial-gradient(44% 38% at 82% 10%, rgba(0, 228, 216, 0.16), transparent 70%),
+    radial-gradient(50% 44% at 6% 38%, rgba(0, 122, 255, 0.12), transparent 70%),
+    radial-gradient(46% 40% at 68% 90%, rgba(0, 0, 156, 0.1), transparent 70%);
+}
+
+/* ==========================================================================
+   Motion — ALL animation/transition lives in this block (WCAG 2.3.3; the
+   reduce block above is a second safety net). Nebula translation of ctao.org:
+   they drift looping videos under Galaxy-Blue vignettes; here an oversized
+   gradient layer drifts via transform only (compositor-friendly, no repaints).
+   Worst-case blob-over-text contrast verified ≥4.5:1 (see DESIGN.md).
+   ========================================================================== */
+@media (prefers-reduced-motion: no-preference) {
+  @view-transition { navigation: auto; }
+  html { scroll-behavior: smooth; }
+  /* Bands hand their glow to a slowly roaming pseudo-layer (same --nebula stack) */
+  .hero-band, .auth-band { background: var(--galaxy); }
+  .hero-band::before, .auth-band::before {
+    content: ""; position: absolute; inset: -45% -30%;
+    background: var(--nebula);
+    animation: nebula 22s ease-in-out infinite alternate;
+  }
+  /* Whole-page wash — slow drift, clearly alive within ~15s of looking */
+  .has-ambient::before { animation: ambient 60s ease-in-out infinite alternate; }
+  /* Hero content rises in once, gently staggered */
+  .hero > * { animation: rise 0.5s ease-out backwards; }
+  .hero > :nth-child(2) { animation-delay: 0.08s; }
+  .hero > :nth-child(3) { animation-delay: 0.16s; }
+  .hero > :nth-child(4) { animation-delay: 0.24s; }
+  /* Hover feedback */
+  .card, .search-results li { transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease; }
+  .card:hover { transform: translateY(-2px); }
+  .btn, .login-mock, .navlink { transition: background-color 0.15s ease, color 0.15s ease; }
+}
+@keyframes nebula { /* inert unless applied inside the block above */
+  from { transform: translate3d(-6%, -4%, 0) rotate(-5deg) scale(1); }
+  to { transform: translate3d(6%, 5%, 0) rotate(5deg) scale(1.22); }
+}
+@keyframes ambient {
+  from { transform: translate3d(-4%, -3%, 0) rotate(-9deg) scale(1); opacity: 0.85; }
+  to { transform: translate3d(4%, 4%, 0) rotate(9deg) scale(1.14); opacity: 1; }
+}
+@keyframes rise { from { opacity: 0; transform: translateY(14px); } }