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/ArticleCard.svelte

@@ -81,16 +81,16 @@
   .body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
   .tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.74rem; }
   .tag {
-    background: var(--sage); color: #fff; border-radius: 999px;
+    background: var(--accent); color: #fff; border-radius: 999px;
     padding: 2px 9px; font-weight: 600; text-transform: capitalize;
   }
-  .tag.soft { background: var(--sage-soft); color: var(--sage-deep); }
+  .tag.soft { background: var(--accent-soft); color: var(--accent-deep); }
   /* Source on its own line below the tags, left-justified, for uniformity. */
   .src { color: var(--muted); font-size: 0.78rem; margin: -2px 0 2px; }
 
   h3 { font-size: 1.18rem; }
-  h3 a:hover { color: var(--sage-deep); }
-  .desc { margin: 2px 0 0; color: #3c463a; }
+  h3 a:hover { color: var(--accent-deep); }
+  .desc { margin: 2px 0 0; color: #3b4754; }
   .paywall {
     margin: 0; font-size: 0.78rem; color: var(--gold);
     display: inline-flex; align-items: center; gap: 5px;
@@ -98,7 +98,7 @@
   .paywall::before { content: '🔒'; font-size: 0.72rem; filter: grayscale(0.3); }
   .why {
     margin: 2px 0 0; font-style: italic; color: var(--muted);
-    font-size: 0.9rem; padding-left: 12px; border-left: 2px solid var(--sage-soft);
+    font-size: 0.9rem; padding-left: 12px; border-left: 2px solid var(--accent-soft);
   }
   /* Keep heights even: clamp variable-length text on tiles. */
   .tile h3, .why {
@@ -113,8 +113,8 @@
     background: none; border: none; padding: 0; color: var(--muted);
     font-size: 0.76rem; border-bottom: 1px dotted var(--line);
   }
-  .actions button:hover { color: var(--sage-deep); border-bottom-color: var(--sage); }
-  .actions .replace { color: var(--sage-deep); border-bottom-color: var(--sage-soft); }
+  .actions button:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
+  .actions .replace { color: var(--accent-deep); border-bottom-color: var(--accent-soft); }
   @media (hover: hover) {
     .actions button:not(.replace) { opacity: 0; transition: opacity 0.16s ease; }
     article:hover .actions button:not(.replace),
@@ -126,13 +126,13 @@
   .tile .body { padding-top: 18px; }
   .tile .body::before {
     content: ''; display: block; width: 30px; height: 3px;
-    background: var(--sage); border-radius: 2px; margin-bottom: 10px; opacity: 0.85;
+    background: var(--accent); border-radius: 2px; margin-bottom: 10px; opacity: 0.85;
   }
   .tile::after {
     content: attr(data-topic);
     position: absolute; right: 10px; bottom: -8px;
     font-family: var(--serif); font-size: 3.4rem; line-height: 1;
-    color: var(--sage); opacity: 0.05; text-transform: lowercase; letter-spacing: -0.02em;
+    color: var(--accent); opacity: 0.05; text-transform: lowercase; letter-spacing: -0.02em;
     pointer-events: none; user-select: none;
   }
   .tile .tags, .tile .src, .tile h3, .tile .why, .tile .actions { position: relative; }
@@ -141,13 +141,13 @@
   .hero { display: grid; grid-template-columns: 1.1fr 1fr; }
   .hero .media {
     position: relative; display: block; height: 100%; min-height: 300px;
-    background: linear-gradient(135deg, var(--sage-soft), #f1ece0);
+    background: linear-gradient(135deg, var(--accent-soft), #f1ece0);
   }
   .hero .media img { width: 100%; height: 100%; object-fit: cover; }
   /* Soft feed images read as atmospheric, not broken. */
   .hero .media::after {
     content: ''; position: absolute; inset: 0; pointer-events: none;
-    background: linear-gradient(180deg, rgba(33, 40, 31, 0) 55%, rgba(33, 40, 31, 0.16));
+    background: linear-gradient(180deg, rgba(10, 22, 38, 0) 55%, rgba(10, 22, 38, 0.18));
   }
   .hero .body { padding: 30px 32px; justify-content: center; gap: 12px; }
   .hero h3 { font-size: 1.95rem; }
@@ -156,14 +156,14 @@
   .herotype {
     position: relative; overflow: hidden;
     background:
-      radial-gradient(120% 140% at 100% 0%, var(--sage-soft) 0%, transparent 55%),
+      radial-gradient(120% 140% at 100% 0%, var(--accent-soft) 0%, transparent 55%),
       var(--surface);
   }
   .herotype::after {
     content: attr(data-topic);
     position: absolute; right: 12px; bottom: -18px;
     font-family: var(--serif); font-size: clamp(4rem, 12vw, 8rem); line-height: 1;
-    color: var(--sage); opacity: 0.07; text-transform: lowercase; letter-spacing: -0.02em;
+    color: var(--accent); opacity: 0.07; text-transform: lowercase; letter-spacing: -0.02em;
     pointer-events: none; user-select: none;
   }
   .herotype .body { position: relative; padding: 40px 36px; gap: 12px; }