diff --git a/site/hugo_stats.json b/site/hugo_stats.json
index 3e50e97..e412fb8 100644
--- a/site/hugo_stats.json
+++ b/site/hugo_stats.json
@@ -27,7 +27,6 @@
       "h6",
       "head",
       "header",
-      "hgroup",
       "hr",
       "html",
       "input",
@@ -45,7 +44,6 @@
       "script",
       "section",
       "select",
-      "small",
       "span",
       "strong",
       "summary",
@@ -62,6 +60,7 @@
       "ul"
     ],
     "classes": [
+      "chroma",
       "footnote-backref",
       "footnote-ref",
       "footnotes",
@@ -213,6 +212,7 @@
       "timeline",
       "token-colour-mapping",
       "token-mapping-prism",
+      "try-the-shortcodes",
       "two-columns",
       "typography",
       "typography-scale",
diff --git a/site/layouts/_default/baseof.html b/site/layouts/_default/baseof.html
index 247f65d..707c716 100644
--- a/site/layouts/_default/baseof.html
+++ b/site/layouts/_default/baseof.html
@@ -7,7 +7,37 @@
   {{ partial "nav.html" . }}
   {{ block "content" . }}{{ end }}
   <footer>
-    <a href="/">{{ .Site.Title }}</a> · {{ now.Format "2006" }}
+    <header>
+      <strong>Agentic Semantic Web</strong>
+      <p>Semantic HTML for the agentic era.</p>
+    </header>
+    <nav aria-label="Framework">
+      <h3>Framework</h3>
+      <ul>
+        <li><a href="/docs/getting-started/introduction/">Getting Started</a></li>
+        <li><a href="/docs/core/tokens/">Token System</a></li>
+        <li><a href="/docs/core/data-attributes/">Data Attributes</a></li>
+        <li><a href="/layouts/">Layouts</a></li>
+      </ul>
+    </nav>
+    <nav aria-label="Resources">
+      <h3>Resources</h3>
+      <ul>
+        <li><a href="/docs/packs/overview/">Packs</a></li>
+        <li><a href="/docs/reference/vocabulary/">Vocabulary</a></li>
+        <li><a href="/docs/reference/charts/">Charts</a></li>
+        <li><a href="/lab/">Lab</a></li>
+      </ul>
+    </nav>
+    <nav aria-label="Project">
+      <h3>Project</h3>
+      <ul>
+        <li><a href="https://git.trentuna.com/trentuna/asw">Source</a></li>
+        <li><a href="/docs/llms.txt">llms.txt</a></li>
+        <li><a href="https://trentuna.com">trentuna.com</a></li>
+      </ul>
+    </nav>
+    <p>Built by <a href="https://trentuna.com">Trentuna</a> · Styled by ASW · {{ now.Format "2006" }}</p>
   </footer>
 </body>
 </html>
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
index 98355f9..0e15fd7 100644
--- a/site/layouts/_default/single.html
+++ b/site/layouts/_default/single.html
@@ -26,7 +26,7 @@
     {{ .Content }}
 
     {{- if or .PrevInSection .NextInSection }}
-    <footer>
+    <footer data-role="prev-next">
       {{- with .PrevInSection }}
       <a href="{{ .RelPermalink }}" rel="prev"><span aria-hidden="true">←</span> {{ .LinkTitle }}</a>
       {{- end }}
diff --git a/site/layouts/docs/single.html b/site/layouts/docs/single.html
index 0fafb33..715e834 100644
--- a/site/layouts/docs/single.html
+++ b/site/layouts/docs/single.html
@@ -29,7 +29,7 @@
       {{ .Content }}
 
       {{- if or .PrevInSection .NextInSection -}}
-      <footer>
+      <footer data-role="prev-next">
         {{- with .NextInSection -}}
         <a href="{{ .RelPermalink }}" rel="prev">
           <span aria-hidden="true">←</span> {{ .LinkTitle }}
@@ -52,4 +52,33 @@
     {{- end -}}
 
   </section>
+  <script>
+  // TOC scroll spy — highlights current section in the aside
+  (function(){
+    var toc = document.querySelector('[data-toc]');
+    if (!toc) return;
+    var links = toc.querySelectorAll('a');
+    if (!links.length) return;
+    var headings = [];
+    links.forEach(function(a) {
+      var id = a.getAttribute('href');
+      if (id && id.startsWith('#')) {
+        var el = document.getElementById(id.slice(1));
+        if (el) headings.push({ el: el, link: a });
+      }
+    });
+    if (!headings.length) return;
+    var observer = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          links.forEach(function(a) { a.removeAttribute('aria-current'); });
+          headings.forEach(function(h) {
+            if (h.el === entry.target) h.link.setAttribute('aria-current', 'true');
+          });
+        }
+      });
+    }, { rootMargin: '0px 0px -70% 0px' });
+    headings.forEach(function(h) { observer.observe(h.el); });
+  })();
+  </script>
 {{ end }}
diff --git a/site/layouts/essay/single.html b/site/layouts/essay/single.html
index f1d18f8..4406776 100644
--- a/site/layouts/essay/single.html
+++ b/site/layouts/essay/single.html
@@ -27,7 +27,7 @@
     {{ .Content }}
 
     {{- if or .PrevInSection .NextInSection }}
-    <footer>
+    <footer data-role="prev-next">
       {{- with .PrevInSection }}
       <a href="{{ .RelPermalink }}" rel="prev"><span aria-hidden="true">←</span> {{ .LinkTitle }}</a>
       {{- end }}
diff --git a/site/layouts/partials/head.html b/site/layouts/partials/head.html
index a9de519..864e3c2 100644
--- a/site/layouts/partials/head.html
+++ b/site/layouts/partials/head.html
@@ -41,3 +41,19 @@
 {{- range .AlternativeOutputFormats -}}
 <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
 {{- end }}
+<script>
+// Theme toggle — respects OS preference, persists choice
+(function(){
+  var s = localStorage.getItem('theme');
+  if (s) document.documentElement.setAttribute('data-theme', s);
+  document.addEventListener('click', function(e) {
+    var b = e.target.closest('[data-theme-toggle]');
+    if (!b) return;
+    var current = document.documentElement.getAttribute('data-theme')
+      || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+    var next = current === 'light' ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-theme', next);
+    localStorage.setItem('theme', next);
+  });
+})();
+</script>
diff --git a/site/layouts/partials/nav.html b/site/layouts/partials/nav.html
index dda75f6..9ed7e44 100644
--- a/site/layouts/partials/nav.html
+++ b/site/layouts/partials/nav.html
@@ -1,8 +1,29 @@
 <nav>
   <ul><li><a href="/"><strong>{{ .Site.Title }}</strong></a></li></ul>
-  <ul>
+  <ul data-nav-links>
     {{- range sort hugo.Data.nav.items "weight" }}
     <li><a href="{{ .url }}"{{ if eq (relURL .url) $.RelPermalink }} aria-current="page"{{ end }}>{{ .name }}</a></li>
     {{- end }}
   </ul>
+  <button data-nav-toggle aria-label="Menu" hidden></button>
+  <button data-theme-toggle aria-label="Toggle theme"></button>
 </nav>
+<script>
+// Hamburger — toggle nav links on mobile
+(function(){
+  var btn = document.querySelector('[data-nav-toggle]');
+  var links = document.querySelector('[data-nav-links]');
+  if (!btn || !links) return;
+  // Show button only when JS is available
+  if (matchMedia('(max-width:767.98px)').matches) btn.hidden = false;
+  matchMedia('(max-width:767.98px)').addEventListener('change', function(e) {
+    btn.hidden = !e.matches;
+    if (!e.matches) links.removeAttribute('data-collapsed');
+  });
+  btn.addEventListener('click', function() {
+    var open = links.hasAttribute('data-collapsed');
+    if (open) links.removeAttribute('data-collapsed');
+    else links.setAttribute('data-collapsed', '');
+  });
+})();
+</script>
diff --git a/src/layers/01-tokens.css b/src/layers/01-tokens.css
index c682ba5..da73e77 100644
--- a/src/layers/01-tokens.css
+++ b/src/layers/01-tokens.css
@@ -52,28 +52,31 @@
   --palette-hue:    250;    /* blue-violet default */
   --palette-chroma: 0.15;
 
-  /* ── Surfaces — dark end of the 16-step scale ─────────────────── */
+  /* ── Surfaces — oklch for fine-grained dark steps ────────────── */
+  /* Open Props' 16-step scale is too coarse in the dark end.
+     We use oklch directly with palette-hue for precise control.    */
 
-  --surface:        var(--color-14);   /* ~10% lightness */
-  --surface-1:      var(--color-13);   /* ~16% */
-  --surface-2:      var(--color-11);   /* ~20% */
+  --surface:        oklch(12% 0.02 var(--palette-hue));
+  --surface-1:      oklch(15% 0.02 var(--palette-hue));
+  --surface-2:      oklch(18% 0.02 var(--palette-hue));
+  --surface-3:      oklch(21% 0.02 var(--palette-hue));
   --surface-card:   var(--surface-1);
-  --surface-hover:  var(--surface-2);
+  --surface-hover:  oklch(22% 0.03 var(--palette-hue));
 
-  /* ── Text — light end of the scale ────────────────────────────── */
+  /* ── Text — smooth gradient from bright to muted ────────────── */
 
-  --text:           var(--color-6);    /* 93% lightness */
-  --text-2:         var(--color-5);    /* 80% */
-  --text-3:         var(--color-7);    /* 66% */
-  --text-dim:       var(--color-9);    /* 53% */
+  --text:           oklch(92% 0.02 var(--palette-hue));
+  --text-2:         oklch(78% 0.03 var(--palette-hue));
+  --text-3:         oklch(62% 0.03 var(--palette-hue));
+  --text-dim:       oklch(48% 0.03 var(--palette-hue));
 
-  /* ── Accent — peak chroma step, palette-driven ─────────────────── */
+  /* ── Accent — peak chroma, palette-driven ─────────────────────── */
 
-  --accent:              var(--color-8);    /* 58%, peak chroma */
-  --accent-hover:        var(--color-7);    /* 66% */
-  --on-accent:           var(--color-16);
-  --accent-focus:   oklch(58% 0.15 var(--palette-hue) / 0.35);
-  --accent-subtle:  oklch(58% 0.15 var(--palette-hue) / 0.10);
+  --accent:              oklch(65% var(--palette-chroma) var(--palette-hue));
+  --accent-hover:        oklch(72% var(--palette-chroma) var(--palette-hue));
+  --on-accent:           oklch(5% 0.02 var(--palette-hue));
+  --accent-focus:        oklch(65% var(--palette-chroma) var(--palette-hue) / 0.35);
+  --accent-subtle:       oklch(65% var(--palette-chroma) var(--palette-hue) / 0.10);
 
   /* ── Links — fixed blue hue, not palette-driven ─────────────────
      Blue is the web convention. Accent is palette-tinted UI chrome. */
@@ -85,14 +88,14 @@
   --link-focus:            oklch(65% 0.06 250);
 
   /* Secondary accents — fixed hues, not palette-driven */
-  --accent-blue:    oklch(65% 0.15 250);   /* matches --link */
-  --accent-red:     oklch(65% 0.18 25);    /* matches --error */
-  --accent-orange:  oklch(75% 0.15 80);    /* matches --warn */
+  --accent-blue:    oklch(65% 0.15 250);
+  --accent-red:     oklch(65% 0.18 25);
+  --accent-orange:  oklch(75% 0.15 80);
 
-  /* ── Border ────────────────────────────────────────────────────── */
+  /* ── Border — subtle steps between surfaces ────────────────────── */
 
-  --border:         var(--color-14);   /* ~20% lightness */
-  --border-subtle:  var(--color-15);   /* ~16% lightness */
+  --border:         oklch(25% 0.03 var(--palette-hue));
+  --border-subtle:  oklch(20% 0.02 var(--palette-hue));
   --border-width:   1px;
   --outline-width:  2px;
 
@@ -131,12 +134,12 @@
   --h5-weight: var(--font-weight-6);   /* 600 */
   --h6-weight: var(--font-weight-6);
 
-  --h1-color: var(--color-2);
-  --h2-color: var(--color-3);
-  --h3-color: var(--color-3);
-  --h4-color: var(--color-5);
-  --h5-color: var(--color-5);
-  --h6-color: var(--color-7);
+  --h1-color: oklch(95% 0.02 var(--palette-hue));
+  --h2-color: oklch(90% 0.02 var(--palette-hue));
+  --h3-color: oklch(85% 0.03 var(--palette-hue));
+  --h4-color: oklch(78% 0.03 var(--palette-hue));
+  --h5-color: oklch(72% 0.03 var(--palette-hue));
+  --h6-color: oklch(65% 0.03 var(--palette-hue));
 
   /* ── Spacing aliases ─────────────────────────────────────────────
      Open Props sizes: --size-1 (.25rem), --size-2 (.5rem), --size-3 (1rem),
@@ -171,8 +174,11 @@
   --container-padding: var(--space-4);  /* inline padding at small viewports */
 
   /* Structural dimensions */
-  --sidebar-width:       220px;         /* docs sidebar column */
-  --toc-width:           200px;         /* docs TOC column */
+  --sidebar-link-max:    var(--size-12); /* max-width for sidebar nav links */
+  --sidebar-min:         10rem;         /* docs sidebar column min */
+  --sidebar-max:         14rem;         /* docs sidebar column max */
+  --toc-min:             10rem;         /* docs TOC column min */
+  --toc-max:             13rem;         /* docs TOC column max */
   --nav-height:           60px;         /* sticky nav offset */
   --docs-max-width:      1400px;        /* docs layout outer cap */
   --card-min-width:       280px;        /* card-grid minmax floor */
@@ -227,7 +233,7 @@
   --kbd-bg:       var(--text);
   --kbd-color:    var(--surface);
   --code-color:   var(--text-2);
-  --table-stripe: color-mix(in oklch, var(--color-15) 50%, transparent);
+  --table-stripe: oklch(8% 0.01 var(--palette-hue) / 0.50);
 
   /* ── Form tokens ─────────────────────────────────────────────────── */
 
@@ -245,7 +251,7 @@
   --warn:         oklch(75% 0.15 80);    /* amber */
   --error:        oklch(75% 0.15 25);    /* red */
   --info:         oklch(75% 0.15 250);   /* blue */
-  --blocked:      var(--color-9);
+  --blocked:      oklch(48% 0.03 var(--palette-hue));
 
   --error-active: oklch(65% 0.18 25);
   --error-focus:  oklch(65% 0.06 25);
@@ -253,7 +259,7 @@
   /* ── Component tokens ─────────────────────────────────────────────── */
 
   --track-bg:         var(--surface-2);   /* progress / meter background */
-  --modal-overlay:    color-mix(in oklch, var(--color-16) 80%, transparent);
+  --modal-overlay:    oklch(5% 0.01 var(--palette-hue) / 0.80);
   --modal-backdrop:   blur(0.375rem);
   --accordion-active: var(--accent-hover);
 
@@ -287,8 +293,8 @@
      Hues are FIXED (like state colors) — not palette-driven.
      ══════════════════════════════════════════════════════════════════ */
 
-  --syntax-comment:    var(--color-9);            /* muted — same as --text-dim */
-  --syntax-punctuation: var(--color-9);           /* same muted level */
+  --syntax-comment:     oklch(48% 0.03 var(--palette-hue));  /* same as --text-dim */
+  --syntax-punctuation: oklch(48% 0.03 var(--palette-hue));  /* same muted level */
   --syntax-string:     oklch(75% 0.15 145);       /* green — same as --ok */
   --syntax-keyword:    oklch(72% 0.15 250);       /* blue — close to --link-hover */
   --syntax-property:   oklch(65% 0.15 250);       /* blue — same as --link */
@@ -372,6 +378,73 @@
 }
 
 
+/* ══════════════════════════════════════════════════════════════════
+   MANUAL THEME OVERRIDE — data-theme attribute on <html>
+   Mirrors the prefers-color-scheme block above.
+   Set by the theme toggle button + persisted in localStorage.
+   ══════════════════════════════════════════════════════════════════ */
+
+:root[data-theme="light"] {
+  color-scheme: light;
+
+  --surface:        var(--color-1);
+  --surface-1:      var(--color-2);
+  --surface-2:      var(--color-3);
+  --surface-card:   var(--color-1);
+  --surface-hover:  var(--color-2);
+
+  --text:           var(--color-14);
+  --text-2:         var(--color-12);
+  --text-3:         var(--color-10);
+  --text-dim:       var(--color-8);
+
+  --accent:         var(--color-9);
+  --accent-hover:   var(--color-10);
+  --on-accent:      var(--color-1);
+
+  --border:         var(--color-4);
+  --border-subtle:  var(--color-3);
+
+  --link:                  oklch(45% 0.15 250);
+  --link-hover:            oklch(38% 0.15 250);
+  --link-underline:        oklch(45% 0.08 250);
+  --link-hover-underline:  oklch(38% 0.10 250);
+  --link-focus:            oklch(45% 0.06 250);
+
+  --h1-color: var(--color-16);
+  --h2-color: var(--color-15);
+  --h3-color: var(--color-14);
+  --h4-color: var(--color-13);
+  --h5-color: var(--color-12);
+  --h6-color: var(--color-11);
+
+  --ok:    oklch(40% 0.15 145);
+  --warn:  oklch(40% 0.15 80);
+  --error: oklch(40% 0.15 25);
+  --info:  oklch(40% 0.15 250);
+
+  --mark-bg:    oklch(92% 0.08 80);
+  --mark-color: var(--color-15);
+  --selection:  oklch(80% 0.06 250);
+
+  --syntax-comment:    var(--color-8);
+  --syntax-punctuation: var(--color-10);
+  --syntax-string:     oklch(40% 0.15 145);
+  --syntax-keyword:    oklch(38% 0.15 250);
+  --syntax-property:   oklch(45% 0.15 250);
+  --syntax-variable:   oklch(40% 0.15 80);
+  --syntax-deleted:    oklch(40% 0.15 25);
+  --syntax-inserted:   oklch(40% 0.15 145);
+  --syntax-namespace:  oklch(40% 0.15 80);
+  --syntax-url:        var(--link);
+}
+
+/* Force dark when OS is light but user chose dark */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+
 /* ══════════════════════════════════════════════════════════════════
    RESPONSIVE FONT SCALING
    Subtle upscaling at large viewports — all rem values follow.
diff --git a/src/layers/03-landmarks.css b/src/layers/03-landmarks.css
index d70cbe9..ec3943f 100644
--- a/src/layers/03-landmarks.css
+++ b/src/layers/03-landmarks.css
@@ -9,23 +9,20 @@
 /* ── Navigation ────────────────────────────────────────────────────────*/
 /* Semantic nav: <nav><strong>Brand</strong><ul><li><a>...</a></li></ul></nav> */
 
-/* Nav content centered at --width-xl without a wrapper element.
-   max() falls back to --container-padding on narrow viewports.   */
-body > nav {
-  padding-inline: max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
-}
-
 body > nav {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding-top: var(--space-5);
-  padding-bottom: var(--space-5);
-
+  gap: var(--space-4);
+  padding: var(--space-5) max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
   margin-bottom: var(--space-6);
   border-bottom: var(--border-width) solid var(--border);
 }
 
+/* Push nav-links and buttons to the right */
+body > nav [data-nav-links] {
+  margin-inline-start: auto;
+}
+
 body > nav strong {
   font-family: var(--font-mono);
   font-weight: 700;
@@ -66,134 +63,95 @@ body > nav a[aria-current="page"] {
   color: var(--text);
 }
 
-/* Medium screens: allow links to wrap */
-@media (--nav-compact) {
-  body > nav ul {
-    flex-wrap: wrap;
-    gap: 0.25rem 0;
-  }
+/* ── Theme toggle ─────────────────────────────────────────────────────*/
+
+body > nav [data-theme-toggle] {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: var(--space-2);
+  color: var(--text-2);
+  transition: color var(--ease-3);
+  line-height: 1;
 }
 
-/* Small screens: stack brand above links */
+body > nav [data-theme-toggle]::before {
+  content: "☀️";
+}
+
+[data-theme="light"] body > nav [data-theme-toggle]::before {
+  content: "🌙";
+}
+
+body > nav [data-theme-toggle]:hover {
+  color: var(--text);
+}
+
+/* ── Hamburger toggle ─────────────────────────────────────────────────*/
+
+body > nav [data-nav-toggle] {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.5rem;
+  padding: var(--space-1) var(--space-2);
+  color: var(--text-2);
+  transition: color var(--ease-3);
+  line-height: 1;
+}
+
+body > nav [data-nav-toggle]::before {
+  content: "☰";
+}
+
+body > nav [data-nav-toggle]:hover {
+  color: var(--text);
+}
+
+/* ── Mobile nav ───────────────────────────────────────────────────────*/
 @media (--md-n-below) {
   body > nav {
-    flex-direction: column;
-    align-items: flex-start;
+    flex-wrap: wrap;
     gap: var(--space-2);
   }
 
-  body > nav ul:last-child {
-    flex-wrap: wrap;
+  body > nav > ul:first-child {
+    order: 1;
   }
 
-  body > nav ul:last-child li + li::before {
+  body > nav [data-nav-toggle] {
+    display: block;
+    order: 2;
+    margin-inline-start: auto;
+  }
+
+  body > nav [data-theme-toggle] {
+    order: 3;
+  }
+
+  body > nav [data-nav-links] {
+    order: 4;
+    width: 100%;
+    flex-direction: column;
+    padding-top: var(--space-3);
+    border-top: var(--border-width) solid var(--border);
+    margin-top: var(--space-2);
+    animation: var(--animation-fade-in) var(--ease-3);
+  }
+
+  body > nav [data-nav-links] li + li::before {
     display: none;
   }
-}
 
-/* ── Nav Dropdown ──────────────────────────────────────────────────────*/
-/* <details> inside <nav> becomes a dropdown menu. No classes needed.
-   Usage: <nav><ul><li><details><summary>Menu</summary><ul><li>...</li></ul></details></li></ul></nav> */
+  body > nav [data-nav-links] a {
+    display: block;
+    padding: var(--space-2) 0;
+  }
 
-body > nav li:has(details) {
-  display: flex;
-  align-items: center;
-}
-
-body > nav details {
-  position: relative;
-  margin: 0;
-}
-
-body > nav details summary {
-  color: var(--text-2);
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  list-style: none;
-  cursor: pointer;
-  transition: color var(--ease);
-}
-
-body > nav details summary:hover {
-  color: var(--text);
-}
-
-/* Override accordion chevron in nav context */
-body > nav details summary::after {
-  content: "▾";
-  float: none;
-  margin-inline-start: 0.25rem;
-  transform: none;
-  font-size: var(--text-xs);
-}
-
-body > nav details[open] > summary::after {
-  content: "▴";
-  transform: none;
-}
-
-/* Dropdown panel */
-body > nav details > ul,
-body > nav details > div {
-  position: absolute;
-  top: calc(100% + 0.5rem);
-  left: 0;
-  min-width: var(--dropdown-min-width);
-  padding: 0.5rem 0;
-  margin: 0;
-  background: var(--surface-1);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-dropdown);
-  z-index: 20;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-}
-
-body > nav details > ul li {
-  margin: 0;
-  padding: 0;
-}
-
-/* Remove pipe separator in dropdown items */
-body > nav details > ul li + li::before {
-  display: none;
-}
-
-body > nav details > ul li a {
-  display: block;
-  padding: 0.35rem 1rem;
-  color: var(--text-2);
-  text-decoration: none;
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  transition: background-color var(--ease-fast), color var(--ease-fast);
-}
-
-body > nav details > ul li a:hover {
-  background: var(--border-subtle);
-  color: var(--text);
-}
-
-/* Close dropdown when clicking outside (CSS-only via :focus-within) */
-nav details:not(:focus-within) > ul,
-nav details:not(:focus-within) > div {
-  /* Allow browser default open/close behavior —
-     no forced hiding. Agent can add JS for click-outside. */
-}
-
-/* Mobile: dropdown becomes full-width */
-@media (--md-n-below) {
-  nav details > ul,
-  nav details > div {
-    position: static;
-    box-shadow: none;
-    border: none;
-    border-left: 2px solid var(--border);
-    margin-left: 0.5rem;
-    padding: 0.25rem 0 0.25rem 0.5rem;
-    background: transparent;
+  body > nav [data-nav-links][data-collapsed] {
+    display: none;
   }
 }
 
@@ -209,7 +167,7 @@ article {
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: var(--space-4) var(--space-5a);
-  margin: var(--space-3) 0;
+  /* margin: var(--space-3) 0; */
 }
 
 article > header {
@@ -286,7 +244,8 @@ article dt:first-of-type {
 
 /* ── Sections ──────────────────────────────────────────────────────────*/
 
-section + section {
+article section + section,
+main section + section {
   padding-top: var(--space-5);
   border-top: var(--border-width) solid var(--border-subtle);
 }
@@ -316,13 +275,71 @@ article[data-role="card"] header h3 {
 
 /* ── Footer ────────────────────────────────────────────────────────────*/
 
-body > footer,
-footer:last-child {
-  margin-top: 3rem;
-  padding-top: var(--space-5);
-  padding-bottom: var(--space-6);
+body > footer {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-6);
+  margin-top: var(--space-8);
+  padding: var(--space-6) max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
   border-top: var(--border-width) solid var(--border);
   font-family: var(--font-mono);
   font-size: var(--text-xs);
   color: var(--text-3);
 }
+
+body > footer > p {
+  grid-column: 1 / -1;
+}
+
+body > footer h3 {
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-2);
+  margin-bottom: var(--space-2);
+}
+
+body > footer > header strong {
+  font-family: var(--font-mono);
+  font-size: var(--text-base);
+  color: var(--text);
+  letter-spacing: -0.03em;
+}
+
+body > footer > header p {
+  color: var(--text-dim);
+  margin-top: var(--space-1);
+}
+
+body > footer ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+body > footer ul li {
+  margin: 0;
+  list-style: none;
+}
+
+body > footer a {
+  color: var(--text-3);
+  text-decoration: none;
+  transition: color var(--ease-3);
+}
+
+body > footer a:hover {
+  color: var(--accent);
+}
+
+body > footer > p {
+  margin-top: var(--space-6);
+  padding-top: var(--space-4);
+  border-top: var(--border-width) solid var(--border-subtle);
+  text-align: center;
+  color: var(--text-dim);
+}
diff --git a/src/layers/06-navigation.css b/src/layers/06-navigation.css
index 40a78e0..d3d87bb 100644
--- a/src/layers/06-navigation.css
+++ b/src/layers/06-navigation.css
@@ -15,8 +15,8 @@ nav[data-nav="sidebar"] h3 {
   font-weight: var(--weight-medium);
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  margin-top: var(--space-4);
-  margin-bottom: 0;
+  margin-top: var(--space-3);
+  margin-bottom: var(--space-1);
 }
 
 nav[data-nav="sidebar"] h3:first-child {
@@ -29,17 +29,25 @@ nav[data-nav="sidebar"] ul {
   list-style: none;
   margin: 0;
   padding: 0;
-  gap: var(--space-1);
+  gap: 0;
   font-family: var(--font-ui);
-  font-size: var(--text-sm);
+  font-size: var(--text-xs);
+}
+
+nav[data-nav="sidebar"] ul li {
+  margin-bottom: 0;
 }
 
 nav[data-nav="sidebar"] a {
   display: block;
-  padding: var(--space-2) var(--space-3);
+  padding: var(--space-1) var(--space-3);
   border-radius: var(--radius-md);
   color: var(--text-2);
   text-decoration: none;
+  max-width: var(--sidebar-link-max);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   transition: background-color var(--ease), color var(--ease);
 }
 
@@ -72,10 +80,14 @@ aside[data-toc] nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
-  gap: var(--space-1);
+  gap: 0;
   font-size: var(--text-xs);
 }
 
+aside[data-toc] nav ul li {
+  margin-bottom: 0;
+}
+
 aside[data-toc] nav a {
   display: block;
   padding: var(--space-1) var(--space-2);
diff --git a/src/layers/10-chroma.css b/src/layers/10-chroma.css
index bb07813..4548518 100644
--- a/src/layers/10-chroma.css
+++ b/src/layers/10-chroma.css
@@ -11,13 +11,13 @@
 /* ── Wrapper ─────────────────────────────────────────────────────────── */
 
 .chroma {
-  background: var(--surface-2);
+  background: var(--surface-1);
   border-radius: var(--radius-2);
   overflow-x: auto;
 }
 
 .chroma pre {
-  background: var(--surface-2);
+  background: var(--surface-1);
   padding: var(--space-4);
   border-radius: var(--radius-2);
   overflow-x: auto;
diff --git a/src/layers/11-layout.css b/src/layers/11-layout.css
index f65f4f6..8ce325e 100644
--- a/src/layers/11-layout.css
+++ b/src/layers/11-layout.css
@@ -94,7 +94,7 @@ nav[data-layout="actions"] a:hover {
 
 [data-layout="docs"] {
   display: grid;
-  grid-template-columns: var(--sidebar-width) 1fr var(--toc-width);
+  grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-max)) 1fr minmax(var(--toc-min), var(--toc-max));
   grid-template-rows: auto;
   gap: var(--space-6);
   max-width: var(--docs-max-width);
@@ -148,8 +148,8 @@ nav[data-layout="actions"] a:hover {
 
 [data-role="prev-next"] a {
   display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
+  align-items: center;
+  gap: var(--space-2);
   text-decoration: none;
   color: var(--text-2);
   max-width: 45%;
@@ -160,13 +160,8 @@ nav[data-layout="actions"] a:hover {
   color: var(--accent);
 }
 
-[data-role="prev-next"] a[rel="prev"] {
-  align-items: flex-start;
-}
-
 [data-role="prev-next"] a[rel="next"] {
-  align-items: flex-end;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 [data-role="prev-next"] small {
@@ -185,7 +180,7 @@ nav[data-layout="actions"] a:hover {
 
 @media (--docs-toc-hidden) {
   [data-layout="docs"] {
-    grid-template-columns: var(--toc-width) 1fr;
+    grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-max)) 1fr;
   }
   [data-layout="docs"] > aside[data-toc] {
     display: none;
@@ -205,8 +200,10 @@ nav[data-layout="actions"] a:hover {
 /* Article content column: reading-optimised prose width.
    Overrides body > article container sizing from 08-layout.css.    */
 [data-layout="docs"] > article {
-  max-width: var(--width-prose);
   min-width: 0;
+  justify-self: center;
+  width: 100%;
+  max-width: var(--width-prose);
 }
 
 /* ── Console layout ─────────────────────────────────────────────────── */
@@ -215,7 +212,7 @@ nav[data-layout="actions"] a:hover {
 
 [data-layout="console"] {
   display: grid;
-  grid-template-columns: var(--sidebar-width) 1fr var(--toc-width);
+  grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-max)) 1fr minmax(var(--toc-min), var(--toc-max));
   grid-template-rows: auto;
   gap: var(--space-6);
   padding: var(--space-6) var(--space-5) var(--space-6) 0;
@@ -248,7 +245,7 @@ nav[data-layout="actions"] a:hover {
 
 @media (--docs-toc-hidden) {
   [data-layout="console"] {
-    grid-template-columns: var(--sidebar-width) 1fr;
+    grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-max)) 1fr;
   }
   [data-layout="console"] > aside[data-toc] {
     display: none;