Polish header sizing + refined Inter kicker tags

- Header logo sized up to read clearly (54px desktop / 46px mobile, bars to match).
- Self-host Inter (variable, latin) — no external font calls — and use it for
  the category tags as uppercase Light (300) kickers with tight tracking, for a
  clean, polished label feel.

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

frontend/src/app.css

@@ -1,3 +1,13 @@
+/* Inter (variable, latin) — self-hosted, no external font calls. Used for
+   refined UI labels / kicker tags. The weight axis (100–900) is free to tune. */
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
 /* Upbeat Bytes calm design system.
    Sand, sea, and sun: warm paper surfaces, a vivid-azure accent, gold highlight,
    a serif voice for headlines, strong readable contrast, generous space.
@@ -16,6 +26,7 @@
 
   --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
   --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --label: "Inter", var(--sans);
 
   --maxw: 880px;
   --radius: 16px;

frontend/src/lib/components/ArticleCard.svelte

@@ -79,10 +79,11 @@
   }
 
   .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; }
+  .tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 0.66rem; }
   .tag {
     background: var(--accent); color: #fff; border-radius: 999px;
-    padding: 2px 9px; font-weight: 600; text-transform: capitalize;
+    padding: 3px 11px 2px; font-family: var(--label); font-weight: 300;
+    text-transform: uppercase; letter-spacing: 0.055em;
   }
   .tag.soft { background: var(--accent-soft); color: var(--accent-deep); }
   /* Source on its own line below the tags, left-justified, for uniformity. */

frontend/src/lib/components/Header.svelte

@@ -34,10 +34,10 @@
     /* 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; }
+  .bar { display: flex; align-items: center; justify-content: space-between; height: 78px; }
 
   .brand { display: inline-flex; align-items: center; }
-  .logo { height: 34px; width: auto; display: block; }
+  .logo { height: 54px; width: auto; display: block; }
 
   .utils { display: flex; gap: 6px; }
   .utils button {
@@ -52,8 +52,8 @@
 
   /* On phones the utilities live in the bottom tab bar ("You") instead. */
   @media (max-width: 720px) {
-    .bar { height: 58px; justify-content: center; }
+    .bar { height: 66px; justify-content: center; }
     .utils { display: none; }
-    .logo { height: 29px; }
+    .logo { height: 46px; }
   }
 </style>