mobile nav overflow menu + subtle kerning

Letters read tight on the site; add a small global letter-spacing with
slightly less on headings. Mobile nav was hiding the GitHub link entirely
on < sm viewports — fold overflow items into a hamburger dropdown that
closes on route change, outside click, and Escape.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/globals.css

@@ -114,6 +114,11 @@ body {
   position: relative;
   background-image: linear-gradient(180deg, var(--page-shadow), transparent 28%);
   -webkit-font-smoothing: antialiased;
+  letter-spacing: 0.012em;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  letter-spacing: 0.005em;
 }
 
 body::before,

components/layout/Navbar.tsx

@@ -2,13 +2,40 @@
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
 import { ThemeToggle } from './ThemeToggle';
 
 export function Navbar() {
     const pathname = usePathname();
+    const [menuOpen, setMenuOpen] = useState(false);
+    const menuRef = useRef<HTMLDivElement | null>(null);
 
     const isActive = (path: string) => pathname?.startsWith(path);
 
+    useEffect(() => {
+        setMenuOpen(false);
+    }, [pathname]);
+
+    useEffect(() => {
+        if (!menuOpen) return;
+
+        const handlePointer = (event: MouseEvent) => {
+            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+                setMenuOpen(false);
+            }
+        };
+        const handleKey = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') setMenuOpen(false);
+        };
+
+        document.addEventListener('mousedown', handlePointer);
+        document.addEventListener('keydown', handleKey);
+        return () => {
+            document.removeEventListener('mousedown', handlePointer);
+            document.removeEventListener('keydown', handleKey);
+        };
+    }, [menuOpen]);
+
     return (
         <nav
             aria-label="Main navigation"
@@ -52,6 +79,46 @@ export function Navbar() {
                     >
                         GitHub
                     </a>
+
+                    <div ref={menuRef} className="relative sm:hidden">
+                        <button
+                            type="button"
+                            onClick={() => setMenuOpen((open) => !open)}
+                            aria-label="More navigation items"
+                            aria-haspopup="menu"
+                            aria-expanded={menuOpen}
+                            className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-transparent text-muted-strong transition-colors hover:border-line hover:text-ink"
+                        >
+                            <svg
+                                aria-hidden="true"
+                                viewBox="0 0 24 24"
+                                className="h-4 w-4 fill-none stroke-current"
+                                strokeWidth="1.7"
+                                strokeLinecap="round"
+                            >
+                                <path d="M4 7h16" />
+                                <path d="M4 12h16" />
+                                <path d="M4 17h16" />
+                            </svg>
+                        </button>
+                        {menuOpen && (
+                            <div
+                                role="menu"
+                                className="absolute right-0 top-[calc(100%+0.5rem)] min-w-[9rem] overflow-hidden rounded-md border border-line bg-paper-strong shadow-lg"
+                            >
+                                <a
+                                    href="https://github.com/akkolli"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    role="menuitem"
+                                    className="block px-3.5 py-2.5 text-[0.68rem] font-mono uppercase tracking-[0.14em] text-muted-strong transition-colors hover:bg-accent-soft hover:text-ink"
+                                >
+                                    GitHub
+                                </a>
+                            </div>
+                        )}
+                    </div>
+
                     <ThemeToggle />
                 </div>
             </div>