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>

frontend/src/lib/components/Header.svelte

@@ -0,0 +1,74 @@
+<script>
+  let { onBoundaries, onHistory, filtersOn = false } = $props();
+</script>
+
+<header class="appbar">
+  <div class="container bar">
+    <a class="brand" href="/" aria-label="Upbeat Bytes — home">
+      <svg class="mark" viewBox="0 0 40 30" aria-hidden="true">
+        <path d="M3 24 Q15 21 23 11 T37 5" fill="none" stroke="var(--sage)" stroke-width="2.2"
+              opacity="0.3" stroke-linecap="round" />
+        <circle cx="3" cy="24" r="2.6" fill="var(--sage)" />
+        <circle cx="13" cy="19" r="2.8" fill="var(--sage)" />
+        <circle cx="23" cy="12" r="3" fill="var(--sage)" />
+        <circle cx="35" cy="5" r="3.9" fill="var(--gold)" />
+      </svg>
+      <span class="word"><span class="up">Upbeat</span><span class="by">Bytes</span></span>
+    </a>
+
+    <nav class="utils" aria-label="Your controls">
+      <button class:on={filtersOn} onclick={onBoundaries} title="Your boundaries">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z"
+          fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" /></svg>
+        <span>Boundaries</span>
+      </button>
+      <button onclick={onHistory} title="What you've seen">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5" fill="none"
+          stroke="currentColor" stroke-width="1.8" /><path d="M12 7v5l3.5 2" fill="none"
+          stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
+        <span>History</span>
+      </button>
+    </nav>
+  </div>
+</header>
+
+<style>
+  .appbar {
+    background: var(--surface);
+    border-bottom: 1px solid var(--line);
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    /* a whisper of warmth under the bar */
+    box-shadow: 0 1px 0 rgba(40, 38, 28, 0.02);
+  }
+  .bar { display: flex; align-items: center; justify-content: space-between; height: 64px; }
+
+  .brand { display: inline-flex; align-items: center; gap: 11px; }
+  .mark { height: 28px; width: auto; display: block; }
+  .word { display: inline-flex; align-items: baseline; gap: 0.28em; letter-spacing: -0.01em; }
+  .up { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ink); }
+  .by {
+    font-family: var(--sans); font-weight: 700; font-size: 1.42rem; color: var(--sage);
+    letter-spacing: -0.02em;
+  }
+
+  .utils { display: flex; gap: 6px; }
+  .utils button {
+    display: inline-flex; align-items: center; gap: 7px;
+    background: none; border: 1px solid transparent; border-radius: 999px;
+    padding: 7px 13px; color: var(--muted); font-size: 0.86rem; cursor: pointer;
+    transition: background 0.14s ease, color 0.14s ease;
+  }
+  .utils button svg { width: 17px; height: 17px; }
+  .utils button:hover { background: var(--sage-soft); color: var(--sage-deep); }
+  .utils button.on { color: var(--sage-deep); }
+
+  /* On phones the utilities live in the bottom tab bar ("You") instead. */
+  @media (max-width: 720px) {
+    .bar { height: 58px; justify-content: center; }
+    .utils { display: none; }
+    .up { font-size: 1.35rem; }
+    .by { font-size: 1.28rem; }
+  }
+</style>