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/routes/+layout.svelte

@@ -3,16 +3,7 @@
   let { children } = $props();
 </script>
 
-<header class="site">
-  <div class="container">
-    <a class="brand" href="/">Upbeat <span>Bytes</span></a>
-    <p class="tagline">Calm, constructive news worth your attention — and nothing that isn't.</p>
-  </div>
-</header>
-
-<main class="container">
-  {@render children()}
-</main>
+{@render children()}
 
 <footer class="site">
   <div class="container">
@@ -21,21 +12,6 @@
 </footer>
 
 <style>
-  header.site {
-    text-align: center;
-    padding: 38px 0 22px;
-    background: linear-gradient(180deg, var(--surface), var(--bg));
-    border-bottom: 1px solid var(--line);
-  }
-  .brand {
-    font-family: var(--serif);
-    font-size: 2.1rem;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-  }
-  .brand span { color: var(--sage); }
-  .tagline { margin: 6px 0 0; color: var(--muted); font-size: 0.98rem; }
-  main.container { padding-top: 18px; padding-bottom: 40px; min-height: 60vh; }
   footer.site {
     text-align: center;
     color: var(--muted);
@@ -44,4 +20,8 @@
     border-top: 1px solid var(--line);
   }
   footer.site a { color: var(--sage-deep); }
+  /* room for the mobile bottom tab bar */
+  @media (max-width: 720px) {
+    footer.site { padding-bottom: calc(34px + 64px + env(safe-area-inset-bottom)); }
+  }
 </style>