diff --git a/package-lock.json b/package-lock.json
index df7a2c8..5974e2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,9 @@
         "@astrojs/vue": "^7.0.1",
         "@fontsource-variable/fraunces": "^5.2.9",
         "@fontsource-variable/inter-tight": "^5.2.7",
+        "@fontsource-variable/jetbrains-mono": "^5.2.8",
+        "@fontsource-variable/newsreader": "^5.2.10",
+        "@fontsource-variable/schibsted-grotesk": "^5.2.8",
         "@tailwindcss/typography": "^0.5.20",
         "@tailwindcss/vite": "^4.3.2",
         "astro": "^7.0.7",
@@ -1721,6 +1724,33 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
+    "node_modules/@fontsource-variable/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/newsreader": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/newsreader/-/newsreader-5.2.10.tgz",
+      "integrity": "sha512-MdI2iRwrqWpMOU/2aV2BgfZ4dJNlj/XlYaY8Zb7t87mWqHskYW0XiUANkt1cyOCiEfW2VQ0bQ5vZgGPp6B2B4w==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/schibsted-grotesk": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/schibsted-grotesk/-/schibsted-grotesk-5.2.8.tgz",
+      "integrity": "sha512-nZAorDrFue4dXZbI613WdvAhu5DPH1UJYNn5fWl7Poa+nl/s9o3VUcQImIiVZpQnYG/jkPVzHsTE7WZbSDvvkw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
diff --git a/package.json b/package.json
index 521967b..2ed5db4 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,9 @@
     "@astrojs/vue": "^7.0.1",
     "@fontsource-variable/fraunces": "^5.2.9",
     "@fontsource-variable/inter-tight": "^5.2.7",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@fontsource-variable/newsreader": "^5.2.10",
+    "@fontsource-variable/schibsted-grotesk": "^5.2.8",
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.2",
     "astro": "^7.0.7",
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 26416d6..0ac5f9d 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -13,22 +13,33 @@ const nav = [
 ]
 ---
 
-<header class="sticky top-0 z-50 backdrop-blur-xl bg-[var(--color-bg)]/80 border-b border-[var(--color-border)]">
-  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex h-14 items-center justify-between">
-    <a href="/" class="flex items-center gap-2 font-display text-base font-semibold tracking-tight">
-      <img src="/pubid-logo.svg" alt="PubID" class="h-7 w-7" />
-      <span>PubID</span>
+<header class="sticky top-0 z-50 backdrop-blur-xl bg-[var(--color-bg)]/75 border-b border-[var(--color-border)]">
+  <!-- Subtle accent strip at the very top edge -->
+  <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--color-accent)] to-transparent opacity-30"></div>
+
+  <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 flex h-16 items-center justify-between gap-4">
+    <a href="/" class="group flex items-center gap-2.5">
+      <span class="relative">
+        <img src="/pubid-logo.svg" alt="PubID" class="h-7 w-7 transition-transform group-hover:scale-105" />
+        <span class="absolute -inset-1 -z-10 rounded-full bg-[var(--color-accent)] opacity-0 blur-md transition-opacity group-hover:opacity-20"></span>
+      </span>
+      <span
+        class="text-[1.3rem] leading-none tracking-tight text-[var(--color-text)]"
+        style="font-family: 'Schibsted Grotesk Variable', ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.025em;"
+      >
+        Pub<span class="font-medium text-[var(--color-accent)]">ID</span>
+      </span>
     </a>
 
-    <nav class="hidden md:flex items-center gap-1">
+    <nav class="hidden md:flex items-center gap-0.5">
       {nav.map(item => (
         <a
           href={item.href}
           class:list={[
-            'px-3 py-1.5 rounded-md text-sm transition-colors',
+            'relative px-3 py-1.5 rounded-md text-sm transition-all duration-200',
             isActive(item.href) || (item.href !== '/' && path.startsWith(item.href))
-              ? 'text-[var(--color-accent)] bg-[var(--color-accent-soft)]'
-              : 'text-[var(--color-text-2)] hover:text-[var(--color-text)]',
+              ? 'text-[var(--color-accent)] bg-[var(--color-accent-soft)] font-medium'
+              : 'text-[var(--color-text-2)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-raised)]',
           ]}
         >
           {item.label}
@@ -36,7 +47,7 @@ const nav = [
       ))}
     </nav>
 
-    <div class="flex items-center gap-2">
+    <div class="flex items-center gap-1">
       <button
         id="theme-toggle"
         aria-label="Toggle theme"
@@ -74,4 +85,4 @@ const nav = [
     const current = document.documentElement.dataset.theme
     setTheme(current === 'dark' ? 'light' : 'dark')
   })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/home/HomePage.vue b/src/components/home/HomePage.vue
index 0751ef2..1196842 100644
--- a/src/components/home/HomePage.vue
+++ b/src/components/home/HomePage.vue
@@ -412,60 +412,84 @@ onMounted(() => {
 
       <div class="anatomy-breakdown">
         <div class="anatomy-identifier">
-          <span class="anatomy-segment" style="--seg-color: #4590cd">ISO</span><span class="anatomy-sep">/</span>
-          <span class="anatomy-segment" style="--seg-color: #059669">IEC</span><span class="anatomy-sep">&nbsp;</span>
-          <span class="anatomy-segment" style="--seg-color: #f87171">17031</span><span class="anatomy-sep">-</span>
-          <span class="anatomy-segment" style="--seg-color: #34d399">1</span><span class="anatomy-sep">:</span>
-          <span class="anatomy-segment" style="--seg-color: #fbbf24">2020</span><span class="anatomy-sep">/</span>
-          <span class="anatomy-segment" style="--seg-color: #2dd4bf">Amd</span><span class="anatomy-sep">&nbsp;</span>
-          <span class="anatomy-segment" style="--seg-color: #2dd4bf">1</span><span class="anatomy-sep">:</span>
-          <span class="anatomy-segment" style="--seg-color: #2dd4bf">2022</span>
+          <div class="anatomy-identifier-label">Example — ISO/IEC with Amendment</div>
+          <div class="anatomy-identifier-string">
+            <span class="anatomy-segment" style="--seg-color: #4590cd">ISO</span><span class="anatomy-sep">/</span>
+            <span class="anatomy-segment" style="--seg-color: #059669">IEC</span><span class="anatomy-sep">&nbsp;</span>
+            <span class="anatomy-segment" style="--seg-color: #f87171">17031</span><span class="anatomy-sep">-</span>
+            <span class="anatomy-segment" style="--seg-color: #34d399">1</span><span class="anatomy-sep">:</span>
+            <span class="anatomy-segment" style="--seg-color: #fbbf24">2020</span><span class="anatomy-sep">/</span>
+            <span class="anatomy-segment" style="--seg-color: #2dd4bf">Amd</span><span class="anatomy-sep">&nbsp;</span>
+            <span class="anatomy-segment" style="--seg-color: #2dd4bf">1</span><span class="anatomy-sep">:</span>
+            <span class="anatomy-segment" style="--seg-color: #2dd4bf">2022</span>
+          </div>
         </div>
 
-        <div class="anatomy-legend">
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #4590cd">Publisher</div>
-            <div class="anatomy-legend-desc">
-              <strong>The issuing organization</strong> — ISO, IEC, IEEE, NIST, BSI, etc. Joint publications list multiple publishers separated by slashes.
+        <ol class="anatomy-legend">
+          <li class="anatomy-legend-item" style="--seg-color: #4590cd">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Publisher</div>
+              <div class="anatomy-legend-desc">
+                <strong>The issuing organization</strong> — ISO, IEC, IEEE, NIST, BSI, etc. Joint publications list multiple publishers separated by slashes.
+              </div>
             </div>
-          </div>
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #059669">Copublisher</div>
-            <div class="anatomy-legend-desc">
-              <strong>Jointly published with</strong> — a second publisher sharing responsibility. Written after the primary publisher, e.g. <code>ISO/IEC</code>, <code>IEC/IEEE</code>.
+          </li>
+          <li class="anatomy-legend-item" style="--seg-color: #059669">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Copublisher</div>
+              <div class="anatomy-legend-desc">
+                <strong>Jointly published with</strong> — a second publisher sharing responsibility. Written after the primary publisher, e.g. <code>ISO/IEC</code>, <code>IEC/IEEE</code>.
+              </div>
             </div>
-          </div>
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #dc2626">Stage</div>
-            <div class="anatomy-legend-desc">
-              <strong>Where in its lifecycle</strong> — WD (Working Draft), CD (Committee Draft), DIS (Draft International Standard), FDIS (Final Draft). Encodes development progress directly in the identifier.
+          </li>
+          <li class="anatomy-legend-item" style="--seg-color: #dc2626">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Stage</div>
+              <div class="anatomy-legend-desc">
+                <strong>Where in its lifecycle</strong> — WD (Working Draft), CD (Committee Draft), DIS (Draft International Standard), FDIS (Final Draft). Encodes development progress directly in the identifier.
+              </div>
             </div>
-          </div>
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #f87171">Number</div>
-            <div class="anatomy-legend-desc">
-              <strong>The unique numeric ID</strong> — assigned by the publisher. May include sub-parts (<code>800-53</code>), letter suffixes (<code>9001</code>), or prefixed sections (<code>JIS A 0001</code>).
+          </li>
+          <li class="anatomy-legend-item" style="--seg-color: #f87171">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Number</div>
+              <div class="anatomy-legend-desc">
+                <strong>The unique numeric ID</strong> — assigned by the publisher. May include sub-parts (<code>800-53</code>), letter suffixes (<code>9001</code>), or prefixed sections (<code>JIS A 0001</code>).
+              </div>
             </div>
-          </div>
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #fbbf24">Year</div>
-            <div class="anatomy-legend-desc">
-              <strong>Publication or revision year</strong> — typically separated by a colon (<code>:2015</code>) or hyphen (<code>-2018</code> depending on publisher convention).
+          </li>
+          <li class="anatomy-legend-item" style="--seg-color: #fbbf24">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Year</div>
+              <div class="anatomy-legend-desc">
+                <strong>Publication or revision year</strong> — typically separated by a colon (<code>:2015</code>) or hyphen (<code>-2018</code> depending on publisher convention).
+              </div>
             </div>
-          </div>
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #2dd4bf">Supplement</div>
-            <div class="anatomy-legend-desc">
-              <strong>Amendment or Corrigendum</strong> — a supplement identifier <em>contains</em> the base identifier. <code>Amd 1:2023</code> wraps the base standard, adding its own number and year.
+          </li>
+          <li class="anatomy-legend-item" style="--seg-color: #2dd4bf">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Supplement</div>
+              <div class="anatomy-legend-desc">
+                <strong>Amendment or Corrigendum</strong> — a supplement identifier <em>contains</em> the base identifier. <code>Amd 1:2023</code> wraps the base standard, adding its own number and year.
+              </div>
             </div>
-          </div>
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #34d399">Language</div>
-            <div class="anatomy-legend-desc">
-              <strong>Publication language</strong> — <code>en</code> (English), <code>fr</code> (French), <code>ru</code> (Russian), etc. Not all publishers include this.
+          </li>
+          <li class="anatomy-legend-item" style="--seg-color: #34d399">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Language</div>
+              <div class="anatomy-legend-desc">
+                <strong>Publication language</strong> — <code>en</code> (English), <code>fr</code> (French), <code>ru</code> (Russian), etc. Not all publishers include this.
+              </div>
             </div>
-          </div>
-        </div>
+          </li>
+        </ol>
       </div>
 
       <div class="anatomy-mapping">
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 96b6e73..65b4d2b 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -12,7 +12,8 @@ const description = entry.data.description || ''
 ---
 
 <BaseLayout title={title} description={description}>
-  <article class="mx-auto max-w-3xl px-6 py-16 prose prose-pubid">
+  <article class="mx-auto max-w-2xl px-6 pt-20 pb-24 prose">
+    <p class="eyebrow mb-4">About</p>
     <Content />
   </article>
 </BaseLayout>
diff --git a/src/pages/adopt/[...slug].astro b/src/pages/adopt/[...slug].astro
index b110f2c..c47890d 100644
--- a/src/pages/adopt/[...slug].astro
+++ b/src/pages/adopt/[...slug].astro
@@ -19,7 +19,8 @@ const title = item.data.title || 'Adopt'
 ---
 
 <BaseLayout title={title} description={item.data.description || ''}>
-  <article class="mx-auto max-w-3xl px-6 py-16 prose prose-pubid">
+  <article class="prose mx-auto max-w-3xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Adopt</p>
     <Content />
   </article>
 </BaseLayout>
diff --git a/src/pages/adopt/index.astro b/src/pages/adopt/index.astro
index 36b0b91..ddd067a 100644
--- a/src/pages/adopt/index.astro
+++ b/src/pages/adopt/index.astro
@@ -9,7 +9,8 @@ const title = entry.data.title || 'Adopt PubID'
 ---
 
 <BaseLayout title={title} description={entry.data.description || ''}>
-  <article class="mx-auto max-w-3xl px-6 py-16 prose prose-pubid">
+  <article class="prose mx-auto max-w-3xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Adopt</p>
     <Content />
   </article>
 </BaseLayout>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 595908b..8a33bb1 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -19,26 +19,26 @@ const title = post.data.title || 'Untitled'
 ---
 
 <BaseLayout title={title} description={post.data.description || ''}>
-  <article class="mx-auto max-w-3xl px-6 py-16">
+  <article class="mx-auto max-w-3xl px-6 pt-20 pb-24">
     <header class="mb-10">
-      <div class="text-xs uppercase tracking-wide text-[var(--color-text-3)] mb-2">
+      <div class="eyebrow mb-3">
         <a href="/blog" class="hover:text-[var(--color-accent)]">Blog</a>
-        <span class="mx-2">·</span>
+        <span class="mx-2 text-[var(--color-text-3)]">·</span>
         <time datetime={date.toISOString()}>{formatDate(date)}</time>
-        <span class="mx-2">·</span>
+        <span class="mx-2 text-[var(--color-text-3)]">·</span>
         <span>{post.data.author}</span>
       </div>
-      <h1 class="font-display text-4xl font-bold tracking-tight">{title}</h1>
-      {post.data.description && <p class="text-lg text-[var(--color-text-2)] mt-2">{post.data.description}</p>}
+      <h1 class="font-display text-4xl font-semibold tracking-tight text-[var(--color-text)]">{title}</h1>
+      {post.data.description && <p class="text-lg text-[var(--color-text-2)] mt-3 leading-relaxed">{post.data.description}</p>}
     </header>
 
-    <div class="prose prose-pubid max-w-none">
+    <div class="prose max-w-none">
       <Content />
     </div>
 
     {post.data.tags.length > 0 && (
       <footer class="mt-12 pt-6 border-t border-[var(--color-border-subtle)]">
-        <div class="text-xs uppercase tracking-wide text-[var(--color-text-3)] mb-2">Tags</div>
+        <div class="eyebrow mb-3">Tags</div>
         <div class="flex flex-wrap gap-1.5">
           {post.data.tags.map(t => <span class="chip">{t}</span>)}
         </div>
diff --git a/src/pages/concepts/[slug].astro b/src/pages/concepts/[slug].astro
index 3138834..b11bdfc 100644
--- a/src/pages/concepts/[slug].astro
+++ b/src/pages/concepts/[slug].astro
@@ -17,8 +17,8 @@ const title = item.data.title || 'Concept'
 ---
 
 <BaseLayout title={title} description={item.data.description || ''}>
-  <article class="mx-auto max-w-3xl px-6 py-16 prose prose-pubid">
-    <h1>{title}</h1>
+  <article class="prose mx-auto max-w-3xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Concept</p>
     <Content />
   </article>
 </BaseLayout>
diff --git a/src/pages/library/[...slug].astro b/src/pages/library/[...slug].astro
index db70a1a..66fb789 100644
--- a/src/pages/library/[...slug].astro
+++ b/src/pages/library/[...slug].astro
@@ -19,7 +19,8 @@ const title = item.data.title || 'Library'
 ---
 
 <BaseLayout title={title} description={item.data.description || ''}>
-  <article class="mx-auto max-w-3xl px-6 py-16 prose prose-pubid">
+  <article class="prose mx-auto max-w-3xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Library</p>
     <Content />
   </article>
 </BaseLayout>
diff --git a/src/pages/library/index.astro b/src/pages/library/index.astro
index f13630a..5040c15 100644
--- a/src/pages/library/index.astro
+++ b/src/pages/library/index.astro
@@ -9,7 +9,8 @@ const title = entry.data.title || 'Library'
 ---
 
 <BaseLayout title={title} description={entry.data.description || ''}>
-  <article class="mx-auto max-w-3xl px-6 py-16 prose prose-pubid">
+  <article class="prose mx-auto max-w-3xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Library</p>
     <Content />
   </article>
 </BaseLayout>
diff --git a/src/pages/specs/[...slug].astro b/src/pages/specs/[...slug].astro
index 2316af5..f1b24d7 100644
--- a/src/pages/specs/[...slug].astro
+++ b/src/pages/specs/[...slug].astro
@@ -18,7 +18,8 @@ const title = item.data.title || 'Specification'
 ---
 
 <BaseLayout title={title} description={item.data.description || ''}>
-  <article class="mx-auto max-w-4xl px-6 py-16 prose prose-pubid">
+  <article class="prose mx-auto max-w-4xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Specification</p>
     <Content />
   </article>
 </BaseLayout>
diff --git a/src/pages/specs/index.astro b/src/pages/specs/index.astro
index 577d46c..b8e46c8 100644
--- a/src/pages/specs/index.astro
+++ b/src/pages/specs/index.astro
@@ -9,7 +9,8 @@ const title = entry.data.title || 'Specifications'
 ---
 
 <BaseLayout title={title} description={entry.data.description || ''}>
-  <article class="mx-auto max-w-4xl px-6 py-16 prose prose-pubid">
+  <article class="prose mx-auto max-w-4xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Specifications</p>
     <Content />
   </article>
 </BaseLayout>
diff --git a/src/styles/global.css b/src/styles/global.css
index e254393..bc0a5c9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,6 +1,9 @@
 @import "tailwindcss";
 @import "@fontsource-variable/fraunces";
 @import "@fontsource-variable/inter-tight";
+@import "@fontsource-variable/schibsted-grotesk";
+@import "@fontsource-variable/newsreader";
+@import "@fontsource-variable/jetbrains-mono";
 @import "./theme.css";
 @plugin "@tailwindcss/typography";
 
@@ -44,23 +47,34 @@
   /* Typography */
   --font-display: "Fraunces Variable", ui-serif, Georgia, serif;
   --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
-  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --font-serif: "Newsreader Variable", ui-serif, Georgia, serif;
+  --font-mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;
 
   /* Motion */
   --ease-pubid: cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* Atmospheric — used by gradient meshes and decorative backgrounds */
+  --glow-accent: rgba(41, 120, 161, 0.18);
+  --glow-warm: rgba(218, 157, 118, 0.14);
+  --noise-opacity: 0.025;
 }
 
 [data-theme="dark"] {
-  --color-bg: #111113;
-  --color-bg-raised: #1a1a1e;
-  --color-bg-inset: #141416;
+  --color-bg: #0b0d12;
+  --color-bg-raised: #14171f;
+  --color-bg-inset: #0f1218;
   --color-border: rgba(255, 255, 255, 0.08);
   --color-border-subtle: rgba(255, 255, 255, 0.04);
-  --color-text: #fafafa;
-  --color-text-2: #a1a1aa;
-  --color-text-3: #71717a;
+  --color-text: #eceef2;
+  --color-text-2: #a8adb8;
+  --color-text-3: #6b7280;
   --color-accent-hover: #7ea7b2;
   --color-accent-warm: #e8b48a;
+
+  /* Richer dark-mode atmosphere */
+  --glow-accent: rgba(91, 184, 216, 0.22);
+  --glow-warm: rgba(232, 180, 138, 0.16);
+  --noise-opacity: 0.04;
 }
 
 /* ───────────────────────────────────────────────────────────────
@@ -191,6 +205,217 @@ body {
   html { scroll-behavior: auto; }
 }
 
+/* ───────────────────────────────────────────────────────────────
+   Prose typography — the heart of the editorial design.
+
+   Overrides @tailwindcss/typography's `.prose` theme directly with
+   our semantic color tokens. Because the tokens swap in
+   [data-theme="dark"], all prose colors invert correctly without
+   needing `dark:prose-invert` on every page.
+   ─────────────────────────────────────────────────────────────── */
+
+.prose {
+  --tw-prose-body: var(--color-text-2);
+  --tw-prose-headings: var(--color-text);
+  --tw-prose-lead: var(--color-text-2);
+  --tw-prose-links: var(--color-accent);
+  --tw-prose-bold: var(--color-text);
+  --tw-prose-counters: var(--color-accent);
+  --tw-prose-bullets: var(--color-border);
+  --tw-prose-hr: var(--color-border);
+  --tw-prose-quotes: var(--color-text);
+  --tw-prose-quote-borders: var(--color-accent-warm);
+  --tw-prose-captions: var(--color-text-3);
+  --tw-prose-code: var(--color-text);
+  --tw-prose-pre-code: var(--color-text-2);
+  --tw-prose-pre-bg: var(--color-bg-inset);
+  --tw-prose-th-borders: var(--color-border);
+  --tw-prose-td-borders: var(--color-border-subtle);
+  --tw-prose-invert-bullets: var(--color-border);
+
+  font-family: var(--font-serif);
+  font-size: 1.0625rem;
+  line-height: 1.7;
+  letter-spacing: -0.003em;
+}
+
+.prose h1, .prose h2, .prose h3, .prose h4 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  letter-spacing: -0.022em;
+  color: var(--color-text);
+  text-wrap: balance;
+}
+
+.prose h1 {
+  font-size: clamp(2.25rem, 4vw, 3rem);
+  line-height: 1.1;
+  font-weight: 500;
+  letter-spacing: -0.032em;
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+}
+
+.prose h2 {
+  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
+  line-height: 1.2;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.prose h3 {
+  font-size: 1.25rem;
+  line-height: 1.3;
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+}
+
+.prose p { color: var(--color-text-2); }
+
+.prose strong { color: var(--color-text); font-weight: 600; }
+
+.prose a {
+  color: var(--color-accent);
+  text-decoration: none;
+  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
+  transition: border-color 200ms var(--ease-pubid);
+}
+.prose a:hover {
+  border-bottom-color: var(--color-accent);
+}
+
+.prose code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  font-weight: 500;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  background: var(--color-accent-soft);
+  color: var(--color-accent);
+  border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
+}
+
+.prose pre {
+  background: var(--color-bg-inset);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 1.25rem 1.5rem;
+  overflow-x: auto;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+.prose pre code {
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: var(--color-text-2);
+  font-weight: 400;
+}
+
+.prose blockquote {
+  font-style: italic;
+  font-weight: 400;
+  border-left-width: 3px;
+  padding-left: 1.25rem;
+  color: var(--color-text);
+  quotes: "\201C" "\201D";
+}
+.prose blockquote p::before { content: open-quote; margin-right: 0.1em; opacity: 0.4; }
+.prose blockquote p::after { content: close-quote; margin-left: 0.1em; opacity: 0.4; }
+
+.prose hr {
+  margin: 3rem 0;
+  border: none;
+  height: 1px;
+  background: linear-gradient(to right, transparent, var(--color-border), transparent);
+}
+
+.prose ul, .prose ol { padding-left: 1.5rem; }
+.prose li::marker { color: var(--color-text-3); }
+.prose li { margin-top: 0.4em; }
+
+.prose table {
+  font-size: 0.95em;
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1.5rem 0;
+}
+.prose th, .prose td {
+  padding: 0.6rem 0.9rem;
+  border-bottom: 1px solid var(--color-border-subtle);
+  text-align: left;
+}
+.prose th {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 0.78em;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--color-text-3);
+  border-bottom: 1px solid var(--color-border);
+}
+.prose tbody tr:hover { background: var(--color-bg-inset); }
+
+/* ───────────────────────────────────────────────────────────────
+   Atmospheric texture — subtle noise + accent glow layer applied
+   to body. Static (no animation) for performance and to avoid
+   drawing attention away from content.
+   ─────────────────────────────────────────────────────────────── */
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background:
+    radial-gradient(ellipse 60% 40% at 12% -5%, var(--glow-accent), transparent 60%),
+    radial-gradient(ellipse 50% 30% at 95% 8%, var(--glow-warm), transparent 60%);
+  opacity: 0.7;
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
+  opacity: var(--noise-opacity);
+  mix-blend-mode: normal;
+}
+
+main { position: relative; z-index: 1; }
+
+/* ───────────────────────────────────────────────────────────────
+   Editorial detail — refined selection + focus
+   ─────────────────────────────────────────────────────────────── */
+
+::selection {
+  background: color-mix(in srgb, var(--color-accent) 25%, transparent);
+  color: var(--color-text);
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* ───────────────────────────────────────────────────────────────
+   Decorative eyebrow — small caps label for editorial sections
+   ─────────────────────────────────────────────────────────────── */
+
+.eyebrow {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+}
+
 /* ───────────────────────────────────────────────────────────────
    Starlight overrides (minimal — match PubID palette)
    ─────────────────────────────────────────────────────────────── */
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 5b85196..ae18fc4 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -888,30 +888,58 @@ html.dark .flow-code code { color: var(--accent-warm); }
 }
 
 .anatomy-identifier {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0;
-  font-family: var(--vp-font-family-mono);
-  font-size: 1.35rem;
-  font-weight: 600;
-  padding: 1.25rem 1.5rem;
+  position: relative;
+  overflow: hidden;
   background: var(--bg-raised);
-  border-radius: 10px;
   border: 1px solid var(--border);
-  margin-bottom: 2rem;
+  border-radius: 12px;
+  padding: 1.35rem 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.anatomy-identifier::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse 50% 80% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
+  pointer-events: none;
 }
 
 html.dark .anatomy-identifier {
-  background: rgba(0, 0, 0, 0.25);
+  background: rgba(0, 0, 0, 0.28);
   border-color: rgba(255, 255, 255, 0.06);
 }
 
+.anatomy-identifier-label {
+  font-family: var(--vp-font-family-mono, monospace);
+  font-size: 0.68rem;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-3);
+  margin-bottom: 0.65rem;
+  position: relative;
+}
+
+.anatomy-identifier-string {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0;
+  font-family: var(--vp-font-family-mono, monospace);
+  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  line-height: 1.45;
+  position: relative;
+  overflow-wrap: anywhere;
+}
+
 .anatomy-segment {
   color: var(--seg-color);
-  padding: 0.15rem 0.2rem;
+  padding: 0.1rem 0.25rem;
   border-radius: 4px;
-  transition: background 0.2s;
+  transition: background 0.18s var(--ease-pubid, ease);
 }
 
 .anatomy-segment:hover {
@@ -921,53 +949,67 @@ html.dark .anatomy-identifier {
 .anatomy-sep {
   color: var(--text-3);
   user-select: none;
+  padding: 0 0.05rem;
+  opacity: 0.55;
 }
 
+/* Legend — vertical annotated list (mobile-first, single column) */
 .anatomy-legend {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--border-subtle);
 }
 
 .anatomy-legend-item {
-  display: flex;
-  gap: 0.75rem;
-  align-items: flex-start;
-  padding: 0.9rem 1rem;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  transition: border-color 0.2s, background 0.2s;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 1rem;
+  align-items: start;
+  padding: 1rem 0.75rem;
+  border-bottom: 1px solid var(--border-subtle);
+  border-left: 2px solid transparent;
+  transition: background 0.18s var(--ease-pubid, ease),
+              border-left-color 0.18s var(--ease-pubid, ease);
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
 }
 
 .anatomy-legend-item:hover {
-  border-color: var(--border);
-  background: var(--bg-raised);
+  background: color-mix(in srgb, var(--seg-color) 5%, transparent);
+  border-left-color: var(--seg-color);
 }
 
-html.dark .anatomy-legend-item:hover {
-  border-color: rgba(255, 255, 255, 0.06);
-  background: rgba(255, 255, 255, 0.02);
+.anatomy-legend-marker {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--seg-color);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--seg-color) 18%, transparent);
+  margin-top: 0.5rem;
+  flex-shrink: 0;
 }
 
-.anatomy-legend-chip {
-  flex-shrink: 0;
-  font-size: 0.72rem;
+.anatomy-legend-body {
+  min-width: 0;
+}
+
+.anatomy-legend-title {
+  font-family: var(--vp-font-family-base, inherit);
+  font-size: 0.74rem;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.1em;
   color: var(--seg-color);
-  background: color-mix(in srgb, var(--seg-color) 10%, transparent);
-  padding: 0.25rem 0.6rem;
-  border-radius: 5px;
-  min-width: 72px;
-  text-align: center;
-  margin-top: 0.1rem;
+  margin-bottom: 0.3rem;
+  line-height: 1.2;
 }
 
 .anatomy-legend-desc {
-  font-size: 0.85rem;
-  line-height: 1.55;
+  font-size: 0.93rem;
+  line-height: 1.6;
   color: var(--text-2);
+  max-width: 70ch;
 }
 
 .anatomy-legend-desc strong {
@@ -976,14 +1018,17 @@ html.dark .anatomy-legend-item:hover {
 }
 
 .anatomy-legend-desc code {
-  font-size: 0.82rem;
+  font-size: 0.85em;
+  font-family: var(--vp-font-family-mono, monospace);
   background: var(--bg-raised);
-  padding: 0.1rem 0.3rem;
+  padding: 0.1rem 0.35rem;
   border-radius: 3px;
+  border: 1px solid var(--border-subtle);
 }
 
 html.dark .anatomy-legend-desc code {
   background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.08);
 }
 
 /* Anatomy Mapping (Human → URN → JSON) */