Rebrand to the azure logo + warm sand/sea/sun palette

- Add the real Upbeat Bytes lockup (logo.svg) and use it in the header,
  replacing the placeholder inline mark + text wordmark.
- New square favicon: the logo's rising sun (bright gold) on azure.
- Recolor the design system around the logo's #0083ad azure: rename the
  --sage* accent vars to --accent*, with deep/soft azure tints; navy ink
  (#16263a) echoing the logo's "Bytes"; cool slate muted text; a deep gold
  for text-weight accents plus --gold-bright for decorative fills; warm
  sand paper background. No urgency colors.
- Retint the hero image overlay and the no-image card gradients to match.
- theme-color → azure.

Built clean; frontend tests/build pass.

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

frontend/src/lib/components/Header.svelte

@@ -5,15 +5,7 @@
 <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>
+      <img class="logo" src="/logo.svg" alt="Upbeat Bytes" width="586" height="196" />
     </a>
 
     <nav class="utils" aria-label="Your controls">
@@ -44,14 +36,8 @@
   }
   .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;
-  }
+  .brand { display: inline-flex; align-items: center; }
+  .logo { height: 34px; width: auto; display: block; }
 
   .utils { display: flex; gap: 6px; }
   .utils button {
@@ -61,14 +47,13 @@
     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); }
+  .utils button:hover { background: var(--accent-soft); color: var(--accent-deep); }
+  .utils button.on { color: var(--accent-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; }
+    .logo { height: 29px; }
   }
 </style>