Redesign nav: sticky horizontal scrollable category strip

19 categories can't fit in a fixed bottom tab bar. Replace with a
sticky horizontal pill strip that sits below the header, auto-scrolls
active tab into view via Intersection Observer, and shows emoji + label
at a readable size with teal active highlight.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/globals.css

@@ -14,7 +14,7 @@
   --gold: #C8A850;
   --muted: #8A7265;
   --header-h: 68px;
-  --tabbar-h: 72px;
+  --catnav-h: 49px;
 }
 
 @theme inline {
@@ -138,7 +138,7 @@ body::after {
 
 /* ─── Category section ────────────────────────────── */
 .category-section {
-  scroll-margin-top: calc(var(--header-h) + 10px);
+  scroll-margin-top: calc(var(--header-h) + var(--catnav-h) + 8px);
 }
 
 .category-reveal {