diff --git a/deploy/site/index.html b/deploy/site/index.html
index 1687f66..81deb85 100644
--- a/deploy/site/index.html
+++ b/deploy/site/index.html
@@ -19,6 +19,7 @@
 :root{--bg:#050607;--ink:#b6c2c9;--dim:#7d8992;--faint:#39424a;--hot:#e2ebf0;--water:#6f9cb0}
 *{margin:0;padding:0;box-sizing:border-box}
 html,body{background:var(--bg);color:var(--ink);font:14px/1.65 ui-monospace,"SF Mono",Menlo,Consolas,monospace}
+body{isolation:isolate;min-height:100vh;background:radial-gradient(ellipse at 15% 20%,#162a34 0,transparent 60%),radial-gradient(ellipse at 90% 75%,#211e32 0,transparent 65%),#080e14}
 a{color:inherit;text-decoration:none}
 .wrap{max-width:78ch;margin:0 auto;padding:0 2ch;display:flex;flex-direction:column;min-height:100vh}
 header{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1.7rem 0 1.9rem}
@@ -33,7 +34,7 @@ footer a{color:var(--dim);border-bottom:1px dotted var(--faint);white-space:nowr
 footer a:hover{color:var(--hot);border-bottom-color:var(--water)}
 .sect{font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;color:var(--dim)}
 
-#river{color:var(--water);font-size:15px;line-height:1.5;white-space:pre;text-align:center;letter-spacing:.05em;user-select:none}
+#river{max-width:100%;overflow:clip;color:var(--water);font-size:15px;line-height:1.5;white-space:pre;text-align:center;letter-spacing:.05em;user-select:none}
 .seq{display:flex;flex-direction:column;align-items:center;gap:.25rem}
 #seq{font-size:1.5rem;font-weight:300;color:var(--hot);letter-spacing:.06em;font-variant-numeric:tabular-nums}
 .seqlbl{font-size:.72rem;color:var(--dim);letter-spacing:.3em;text-transform:uppercase}
@@ -50,9 +51,9 @@ footer a:hover{color:var(--hot);border-bottom-color:var(--water)}
 @media (max-width:640px){#river{font-size:11px}.wrap{padding:0 1.5ch}.tag{white-space:normal;max-width:34ch}
   footer{gap:.45rem 2ch}#stats{flex-basis:100%;text-align:center}}
 footer .icon{width:11px;height:11px;vertical-align:-1px;margin-right:.6ch}
-#depth{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
-body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
-  background:radial-gradient(ellipse 90% 70% at 50% 38%, transparent 55%, rgba(0,0,0,.28) 100%)}
+#depth{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:.38}
+body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
+  background:radial-gradient(ellipse at 50% 35%,#080e1440,#080e1470),url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.035' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
 .wrap{position:relative}
 </style>
 </head>
diff --git a/tests/homepage-layout.html b/tests/homepage-layout.html
new file mode 100644
index 0000000..47f4d85
--- /dev/null
+++ b/tests/homepage-layout.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<meta charset="utf-8">
+<title>homepage layout regression</title>
+<p>Serve this page on the same origin as the Caddy-rendered homepage. Checks use the real page and live data.</p>
+<pre id="results">running</pre>
+<script>
+const results = document.getElementById('results');
+async function check(width) {
+  const frame = document.createElement('iframe');
+  frame.style.cssText = `width:${width}px;height:844px;border:0;display:block`;
+  const loaded = new Promise(resolve => frame.addEventListener('load', resolve, {once:true}));
+  frame.src = '/';
+  document.body.append(frame);
+  await loaded;
+  try {
+    const doc = frame.contentDocument;
+    const win = frame.contentWindow;
+    const river = doc.getElementById('river');
+    if (!river) throw new Error('homepage did not render');
+    for (let i = 0; i < 30 && !river.textContent.trim(); i++) {
+      await new Promise(resolve => setTimeout(resolve, 100));
+    }
+    if (!river.textContent.trim()) throw new Error('river did not draw');
+    if (!doc.querySelector('.ep')) throw new Error('endpoint list did not render');
+    for (let i = 0; i < 2; i++) {
+      if (doc.documentElement.scrollWidth > doc.documentElement.clientWidth) {
+        throw new Error(`page overflows: ${doc.documentElement.scrollWidth} > ${doc.documentElement.clientWidth}`);
+      }
+      const bounds = river.getBoundingClientRect();
+      if (bounds.left < 0 || bounds.right > width) throw new Error('river exceeds viewport');
+      win.scrollTo(1000, 0);
+      if (win.scrollX !== 0) throw new Error(`horizontal scrolling reached ${win.scrollX}`);
+      await new Promise(resolve => setTimeout(resolve, 1000));
+    }
+    return `${width}px: PASS`;
+  } finally {
+    frame.remove();
+  }
+}
+(async () => {
+  const lines = [];
+  for (const width of [320, 390, 640, 1280]) {
+    try { lines.push(await check(width)); }
+    catch (error) { lines.push(`${width}px: FAIL — ${error.message}`); }
+    results.textContent = lines.join('\n');
+  }
+  document.title = lines.some(line => line.includes('FAIL')) ? 'FAIL: homepage layout' : 'PASS: homepage layout';
+})();
+</script>
+</html>