Visual/IA pass: brand mark, real header, mobile bottom tabs, topic browse

- Logo mark: SVG rising-dots wave (sage dots + warm gold peak = 'upbeat bytes'),
  used as favicon/PWA icon and in the header.
- Header: full-width app bar — mark + mixed-type wordmark (Upbeat serif ink /
  Bytes sans sage) on the left, housed Boundaries/History utility cluster on the
  right (desktop). No more floating text links.
- Mobile: fixed bottom tab bar (Today / Browse / You); utilities move into a
  'You' sheet. One-handed, modern, calm.
- Browse: moods stay the primary front door; added a quiet 'Explore by topic'
  section (existing topics) below the content — selecting a topic loads its feed.
- Layout trimmed (header now in-page, full width); footer keeps clearance for the
  bottom bar.

Phase A of the consensus pass; Phase B (add technology + learning topics and
reclassify) is next. Live site untouched until publish.sh.

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

frontend/src/lib/components/BottomNav.svelte

@@ -0,0 +1,45 @@
+<script>
+  // Mobile-only primary navigation. Today = the brief, Browse = mood/topic
+  // discovery, You = personal controls (Boundaries, History).
+  let { active = 'today', onToday, onBrowse, onYou } = $props();
+</script>
+
+<nav class="bottomnav" aria-label="Primary">
+  <button class:active={active === 'today'} onclick={onToday}>
+    <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.2" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
+    <span>Today</span>
+  </button>
+  <button class:active={active === 'browse'} onclick={onBrowse}>
+    <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M15.5 8.5l-2 5-5 2 2-5 5-2z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" /></svg>
+    <span>Browse</span>
+  </button>
+  <button class:active={active === 'you'} onclick={onYou}>
+    <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8.5" r="3.6" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M5 20c0-3.6 3.1-5.5 7-5.5s7 1.9 7 5.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
+    <span>You</span>
+  </button>
+</nav>
+
+<style>
+  .bottomnav { display: none; }
+  @media (max-width: 720px) {
+    .bottomnav {
+      display: flex;
+      position: fixed;
+      left: 0; right: 0; bottom: 0;
+      z-index: 30;
+      background: var(--surface);
+      border-top: 1px solid var(--line);
+      padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
+      box-shadow: 0 -2px 14px rgba(40, 38, 28, 0.05);
+    }
+    .bottomnav button {
+      flex: 1;
+      display: flex; flex-direction: column; align-items: center; gap: 3px;
+      background: none; border: none; padding: 6px 0; cursor: pointer;
+      color: var(--muted); font-size: 0.7rem; letter-spacing: 0.02em;
+    }
+    .bottomnav button svg { width: 23px; height: 23px; }
+    .bottomnav button.active { color: var(--sage-deep); }
+    .bottomnav button.active svg { stroke: var(--sage); }
+  }
+</style>