home3/hub: shared HubBar with mobile hamburger + Art-card mobile crop fix

#2 Mobile top bar → hamburger: extracted the editorial bar (brand + nav + new
collapsible hamburger drop-panel) into a shared lib/components/HubBar.svelte,
used by both /home3 and HubShell (the /word /quote /onthisday detail pages), so
there's one nav to maintain/audit. Full horizontal nav ≥721px; hamburger + drop
panel ≤720px. Escape + link-click close it; panel is hidden on desktop as a
safety. Removed the duplicated bar markup/CSS from home3 + HubShell.

#1 Mobile layout / Art card: on phones the Art card now stacks image-first with
the painting in a proper 3:2 frame (aspect-ratio) instead of a stubby fixed
130px band that cropped the work to a sliver. Also drop the News gist's bottom
fade once the bento is single-column (natural height = no truncation, so the
fade was just dimming the final line), and let the joys header wrap on phones.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/routes/home3/+page.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import { getJSON } from '$lib/api.js';
+  import HubBar from '$lib/components/HubBar.svelte';
 
   // /home3 — the Claude Design "Frame A" direction (editorial, with colour), rebuilt in
   // our codebase with our real logo + self-hosted fonts, wired to live data. Hidden
@@ -102,23 +103,7 @@
 {/snippet}
 
 <div class="page">
-  <header class="bar">
-    <a class="brand" href="/home3" aria-label="upbeatBytes home">
-      <img src="/logo.svg" alt="upbeatBytes" width="586" height="196" />
-    </a>
-    <nav class="nav">
-      <a class="on" href="/home3">Home</a>
-      <a href="/">News</a>
-      <a href="/play">Games</a>
-      <a href="/art">Art</a>
-      <span class="nav-soon">Entertainment</span>
-      <a class="acct" href="/account" aria-label="Your account">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C98A2E" stroke-width="2" aria-hidden="true">
-          <circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-6 8-6s8 2 8 6" />
-        </svg>
-      </a>
-    </nav>
-  </header>
+  <HubBar active="home" />
 
   <section class="hero">
     <h1>A <span class="t">calmer</span>, <span class="b">brighter</span> corner of the internet.</h1>
@@ -266,25 +251,6 @@
   }
   .page :global(*) { box-sizing: border-box; }
 
-  /* Header — real logo left, nav right */
-  .bar {
-    display: flex; align-items: center; justify-content: space-between;
-    max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box;
-    padding: 26px clamp(18px, 5vw, 44px) 0;
-  }
-  .brand { display: block; line-height: 0; }
-  .brand img { height: 48px; width: auto; display: block; }
-  .nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); font-size: 16.5px; font-weight: 500; }
-  .nav a { color: var(--body); text-decoration: none; }
-  .nav a.on { color: #23201b; }
-  .nav a:hover { color: var(--teal); }
-  .nav-soon { color: #b3a890; }   /* Entertainment — in the bar, but not yet a live page */
-  .acct {
-    width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #e6c9a0; background: #FCEFD7;
-    display: flex; align-items: center; justify-content: center;
-  }
-  .acct:hover { background: #fbe6c4; }
-
   /* Hero — spacing tuned per the /home2 pass: pulled up a touch, more air before cards */
   .hero { text-align: center; max-width: 1180px; width: 100%; margin: 0 auto; padding: clamp(24px, 4vw, 34px) clamp(18px, 5vw, 44px) clamp(38px, 5vw, 48px); }
   .hero h1 {
@@ -491,11 +457,19 @@
   @media (max-width: 860px) {
     .bento { grid-template-columns: 1fr; }
     .news { grid-row: auto; }
+    /* single column = natural card height, so the gist is never truncated; drop the
+       bottom fade (it would otherwise dim the final line for no reason) */
+    .summary-a { -webkit-mask-image: none; mask-image: none; flex: 0 1 auto; }
   }
   @media (max-width: 520px) {
-    .art { flex-direction: column; }
-    .art-swatch { width: 100%; min-height: 130px; }
+    /* Art becomes an image-first card: the painting on top in a proper landscape frame
+       (aspect-ratio, not a stubby fixed-height band that crop the work to a sliver),
+       caption beneath. */
+    .art { flex-direction: column; min-height: 0; }
+    .art-swatch { width: 100%; min-width: 0; order: -1; aspect-ratio: 3 / 2; }
     .pair { grid-template-columns: 1fr; }
     .joys { grid-template-columns: 1fr; }
+    /* tighten the joys header so the title + dots/arrows never collide on a phone */
+    .joys-head { flex-wrap: wrap; gap: 8px 12px; }
   }
 </style>