diff --git a/web/app/arith/page.tsx b/web/app/arith/page.tsx
index 392e95aca..3ce4d4d33 100644
--- a/web/app/arith/page.tsx
+++ b/web/app/arith/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, useEffect, useMemo, useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
 import { loadArithCorpus, arithmeticTopK, type ArithCorpus, type Term } from "@/lib/arith";
 
 const DEFAULT_TERMS: Term[] = [
@@ -36,11 +37,19 @@ const EXAMPLES: { label: string; terms: Term[] }[] = [
 
 const ARITH_YEAR = 2025;
 
-export default function ArithPage() {
+function ArithPageInner() {
+  const searchParams = useSearchParams();
+  const w = searchParams.get("w");
   const [terms, setTerms] = useState<Term[]>(DEFAULT_TERMS);
   const [corpus, setCorpus] = useState<ArithCorpus | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (w) {
+      setTerms([{ sign: 1, word: w }]);
+    }
+  }, [w]);
+
   useEffect(() => {
     loadArithCorpus().then((c) => {
       if (!c) setError("corpus not available — run scripts/precompute_arithmetic.py");
@@ -358,3 +367,19 @@ function WordInput({
     </div>
   );
 }
+
+export default function ArithPage() {
+  return (
+    <Suspense
+      fallback={
+        <main className="relative min-h-dvh w-full overflow-hidden bg-[#070707] pt-20 pb-16 px-5 sm:px-6 lg:px-10">
+          <div className="relative max-w-4xl mx-auto flex items-center gap-2.5 text-muted text-sm font-mono">
+            loading math space…
+          </div>
+        </main>
+      }
+    >
+      <ArithPageInner />
+    </Suspense>
+  );
+}
diff --git a/web/app/explore/page.tsx b/web/app/explore/page.tsx
index 24d4b6f93..1b2ce4dd0 100644
--- a/web/app/explore/page.tsx
+++ b/web/app/explore/page.tsx
@@ -88,6 +88,17 @@ function ExplorePageInner() {
         style={{ height: `${nYears * 100}vh` }}
       >
         <div className="sticky top-0 h-screen w-full">
+          {/* background atmosphere */}
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-0 overflow-hidden"
+          >
+            <div
+              className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] rounded-full blur-[140px]"
+              style={{ background: "radial-gradient(circle, rgba(244,184,96,0.06), rgba(139,108,255,0.03) 50%, transparent 70%)" }}
+            />
+          </div>
+
           {data ? (
             <Constellation
               data={data}
diff --git a/web/app/space/page.tsx b/web/app/space/page.tsx
index d08eb8d76..5cd806e07 100644
--- a/web/app/space/page.tsx
+++ b/web/app/space/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import Link from "next/link";
 import { motion, AnimatePresence } from "framer-motion";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { loadManifest } from "@/lib/data";
@@ -643,16 +644,38 @@ function MarkedList({
           key={w}
           onMouseEnter={onHoverChip ? () => onHoverChip(i) : undefined}
           onMouseLeave={onHoverChip ? () => onHoverChip(null) : undefined}
-          className="group flex items-center gap-2 backdrop-blur-md bg-black/35 hover:bg-black/55 border border-white/10 rounded px-2 py-1.5 text-xs font-mono transition-colors"
+          className="group flex items-center gap-2 backdrop-blur-md bg-black/35 hover:bg-black/55 border border-white/10 rounded-lg px-2.5 py-1.5 text-xs font-mono transition-all duration-200"
         >
           <span
-            className="inline-block w-2.5 h-2.5 rounded-full flex-shrink-0 shadow-[0_0_8px_currentColor]"
+            className="inline-block w-2 h-2 rounded-full flex-shrink-0 shadow-[0_0_8px_currentColor]"
             style={{ background: hex[i], color: hex[i] }}
           />
           <span className="flex-1 text-foreground truncate">{w}</span>
+          <div className="flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+            <Link
+              href={`/explore?w=${w}`}
+              title={`View '${w}' neighborhood`}
+              className="text-muted hover:text-accent transition-colors p-0.5"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                <circle cx="12" cy="12" r="10" />
+                <polygon points="16.24,7.76 14.12,14.12 7.76,16.24 9.88,9.88" />
+              </svg>
+            </Link>
+            <Link
+              href={`/arith?w=${w}`}
+              title={`Use '${w}' in word math`}
+              className="text-muted hover:text-accent transition-colors p-0.5"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="12" y1="5" x2="12" y2="19" />
+              </svg>
+            </Link>
+          </div>
           <button
             onClick={() => onUnmark(w)}
-            className="text-muted hover:text-foreground transition-colors leading-none w-6 h-6 -my-1 grid place-items-center text-sm opacity-60 group-hover:opacity-100"
+            className="text-muted hover:text-red-400 transition-colors leading-none w-5 h-5 -my-1 grid place-items-center text-sm opacity-50 group-hover:opacity-100"
             aria-label={`remove ${w}`}
           >
             ×
diff --git a/web/app/ternary/page.tsx b/web/app/ternary/page.tsx
index 2b3062f08..c0e9de256 100644
--- a/web/app/ternary/page.tsx
+++ b/web/app/ternary/page.tsx
@@ -120,8 +120,19 @@ export default function TernaryPage() {
   }
 
   return (
-    <main className="h-screen pt-16 lg:pt-20 px-6 lg:px-10 pb-6 flex flex-col">
-      <header className="mb-3 flex items-baseline justify-between gap-4">
+    <main className="relative h-screen pt-16 lg:pt-20 px-6 lg:px-10 pb-6 flex flex-col">
+      {/* background atmosphere */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 overflow-hidden"
+      >
+        <div
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] rounded-full blur-[140px]"
+          style={{ background: "radial-gradient(circle, rgba(139,108,255,0.06), rgba(244,184,96,0.03) 50%, transparent 70%)" }}
+        />
+      </div>
+
+      <header className="relative mb-3 flex items-baseline justify-between gap-4">
         <div>
           <div className="text-[10px] uppercase tracking-[0.18em] text-muted font-mono mb-1">
             ternary
diff --git a/web/components/Nav.tsx b/web/components/Nav.tsx
index 6c81936c6..04ef87e5a 100644
--- a/web/components/Nav.tsx
+++ b/web/components/Nav.tsx
@@ -2,54 +2,237 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 
-// NOTE: nav-hidden routes (still resolve by direct URL, just not linked):
-//  - /llm: hidden in prod — not good enough yet; an improved version is in
-//    progress on the `feature/llm-drama` branch. Re-add when it ships.
-//  - /gallery, /ternary: candidates for deletion (gallery routes into the
-//    removed /explore view); /explore is deep-link-only. See CLAUDE.md.
-const LINKS = [
+const MAIN_LINKS = [
   { href: "/", label: "intro" },
-  { href: "/space", label: "explore" },
-  { href: "/arith", label: "arith" },
+  { href: "/space", label: "galaxy map" },
+  { href: "/explore", label: "neighborhood" },
+];
+
+const TOOL_LINKS = [
+  {
+    href: "/arith",
+    label: "word math",
+    desc: "Add and subtract word vectors to resolve meaning.",
+  },
+  {
+    href: "/llm",
+    label: "llm impact",
+    desc: "See how machine-written text reshapes vocabulary.",
+  },
+  {
+    href: "/ternary",
+    label: "ternary orbits",
+    desc: "Map trajectories relative to three anchor words.",
+  },
+  {
+    href: "/gallery",
+    label: "drift gallery",
+    desc: "Explore top drifting words ranked by total drift.",
+  },
 ];
 
 export function Nav() {
   const pathname = usePathname();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close menus when pathname changes
+  useEffect(() => {
+    setDropdownOpen(false);
+    setMobileMenuOpen(false);
+  }, [pathname]);
+
+  // Close dropdown on click outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setDropdownOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
   return (
     <nav className="fixed top-0 inset-x-0 z-50 backdrop-blur-md bg-background/40">
       <div className="hairline absolute bottom-0 inset-x-0" />
       <div className="px-4 sm:px-6 lg:px-10 py-3 flex items-center justify-between gap-3 sm:gap-6">
         <Link
           href="/"
-          className="font-display text-base sm:text-lg leading-none flex items-baseline gap-2 shrink-0"
+          className="font-display text-base sm:text-lg leading-none flex items-baseline gap-2 shrink-0 hover:text-accent transition-colors"
         >
-          <span className="inline-block w-2 h-2 rounded-full bg-accent shadow-[0_0_8px_1px_rgba(244,184,96,0.7)]" />
+          <span className="inline-block w-2 h-2 rounded-full bg-accent shadow-[0_0_8px_1px_rgba(244,184,96,0.7)] animate-pulse" />
           WordDrift
         </Link>
-        <ul className="flex items-center gap-0.5 sm:gap-2 lg:gap-3 text-sm">
-          {LINKS.map((l) => {
-            const active =
-              l.href === "/"
-                ? pathname === "/"
-                : pathname === l.href || pathname.startsWith(l.href + "/");
-            return (
-              <li key={l.href}>
-                <Link
-                  href={l.href}
-                  className={`px-2.5 sm:px-3 py-1.5 rounded-full transition-colors font-mono text-xs uppercase tracking-wider ${
-                    active
-                      ? "text-foreground bg-white/[0.06]"
-                      : "text-muted hover:text-foreground hover:bg-white/[0.03]"
-                  }`}
+
+        {/* Desktop Navigation */}
+        <div className="hidden md:flex items-center gap-2 lg:gap-3 text-sm">
+          <ul className="flex items-center gap-0.5 sm:gap-2">
+            {MAIN_LINKS.map((l) => {
+              const active =
+                l.href === "/"
+                  ? pathname === "/"
+                  : pathname === l.href || pathname.startsWith(l.href + "/");
+              return (
+                <li key={l.href}>
+                  <Link
+                    href={l.href}
+                    className={`px-2.5 sm:px-3 py-1.5 rounded-full transition-colors font-mono text-xs uppercase tracking-wider ${
+                      active
+                        ? "text-foreground bg-white/[0.06] border border-white/10"
+                        : "text-muted hover:text-foreground hover:bg-white/[0.03] border border-transparent"
+                    }`}
+                  >
+                    {l.label}
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+
+          <div className="w-px h-4 bg-white/10 mx-1" />
+
+          {/* Tools Dropdown trigger */}
+          <div ref={dropdownRef} className="relative">
+            <button
+              onClick={() => setDropdownOpen(!dropdownOpen)}
+              className={`px-2.5 sm:px-3 py-1.5 rounded-full transition-all font-mono text-xs uppercase tracking-wider flex items-center gap-1.5 border ${
+                dropdownOpen || TOOL_LINKS.some((t) => pathname === t.href)
+                  ? "text-accent bg-white/[0.06] border-white/10"
+                  : "text-muted hover:text-foreground hover:bg-white/[0.03] border-transparent"
+              }`}
+            >
+              tools
+              <svg
+                width="10"
+                height="10"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                className={`transition-transform duration-200 ${dropdownOpen ? "rotate-180" : ""}`}
+              >
+                <path d="M6 9l6 6 6-6" />
+              </svg>
+            </button>
+
+            {/* Dropdown menu */}
+            <AnimatePresence>
+              {dropdownOpen && (
+                <motion.div
+                  initial={{ opacity: 0, y: 10, scale: 0.98 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 5, scale: 0.98 }}
+                  transition={{ duration: 0.2, ease: "easeOut" }}
+                  className="absolute right-0 mt-2 w-72 rounded-xl border border-white/10 bg-black/85 backdrop-blur-xl p-2.5 shadow-2xl z-50"
                 >
-                  {l.label}
-                </Link>
-              </li>
-            );
-          })}
-        </ul>
+                  <div className="grid gap-1">
+                    {TOOL_LINKS.map((tool) => {
+                      const active = pathname === tool.href;
+                      return (
+                        <Link
+                          key={tool.href}
+                          href={tool.href}
+                          className={`group flex flex-col p-2.5 rounded-lg transition-colors text-left ${
+                            active ? "bg-white/[0.08]" : "hover:bg-white/[0.04]"
+                          }`}
+                        >
+                          <span className="font-mono text-xs uppercase tracking-wider text-foreground group-hover:text-accent transition-colors">
+                            {tool.label}
+                          </span>
+                          <span className="text-[10px] text-muted leading-normal mt-0.5 group-hover:text-foreground/75 transition-colors">
+                            {tool.desc}
+                          </span>
+                        </Link>
+                      );
+                    })}
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </div>
+
+        {/* Mobile menu toggle */}
+        <button
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          className="md:hidden p-2 text-muted hover:text-foreground transition-colors"
+          aria-label="Toggle menu"
+        >
+          {mobileMenuOpen ? (
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          ) : (
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <line x1="3" y1="12" x2="21" y2="12" />
+              <line x1="3" y1="6" x2="21" y2="6" />
+              <line x1="3" y1="18" x2="21" y2="18" />
+            </svg>
+          )}
+        </button>
       </div>
+
+      {/* Mobile Drawer Menu */}
+      <AnimatePresence>
+        {mobileMenuOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.3, ease: "easeInOut" }}
+            className="md:hidden border-b border-white/10 bg-black/95 backdrop-blur-2xl overflow-hidden"
+          >
+            <div className="px-5 pt-3 pb-6 space-y-4">
+              <div className="space-y-1">
+                <div className="text-[10px] uppercase tracking-widest text-muted font-mono mb-1">core space</div>
+                {MAIN_LINKS.map((l) => {
+                  const active =
+                    l.href === "/"
+                      ? pathname === "/"
+                      : pathname === l.href || pathname.startsWith(l.href + "/");
+                  return (
+                    <Link
+                      key={l.href}
+                      href={l.href}
+                      className={`block py-2 text-sm font-mono uppercase tracking-wider transition-colors ${
+                        active ? "text-accent" : "text-foreground/80 hover:text-foreground"
+                      }`}
+                    >
+                      {l.label}
+                    </Link>
+                  );
+                })}
+              </div>
+              <div className="space-y-1 border-t border-white/5 pt-3">
+                <div className="text-[10px] uppercase tracking-widest text-muted font-mono mb-1">analysis & tools</div>
+                {TOOL_LINKS.map((tool) => {
+                  const active = pathname === tool.href;
+                  return (
+                    <Link
+                      key={tool.href}
+                      href={tool.href}
+                      className={`block py-2 text-sm font-mono uppercase tracking-wider transition-colors ${
+                        active ? "text-accent" : "text-foreground/80 hover:text-foreground"
+                      }`}
+                    >
+                      {tool.label}
+                      <span className="block text-[10px] text-muted normal-case tracking-normal font-sans mt-0.5">
+                        {tool.desc}
+                      </span>
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </nav>
   );
 }