Codex audit fixes: home3 read-time, /art OG/canonical, Bloom medallion centering

- home3 dropped source_read_minutes when mapping the brief item, so the badge
  only ever showed "1 min brief" — include it so "· ~N min full story" appears.
- /art is public but shipped the homepage title/canonical/OG (SSR-off shell, so
  svelte:head can't fix scrapers) — add /art to patch-static-heads.mjs.
- Bloom: center the circular motif in the tile's visual field (~43%) instead of
  the top illustration zone, so it reads as a medallion (per Jay + Codex).
- Polish: prefers-reduced-motion disables the tile hover-lift; fix stale
  patch-play-head.mjs comment reference.

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

frontend/scripts/patch-static-heads.mjs

@@ -32,6 +32,12 @@ const PAGES = [
     title: 'On This Day · upbeatBytes',
     desc: 'One genuinely good thing that happened on this day in history.',
   },
+  {
+    file: 'art.html', path: '/art',
+    title: 'Daily Art · upbeatBytes',
+    desc: "A masterwork a day from the world's open museum collections — beautifully framed, " +
+          'with a short note on what you’re looking at.',
+  },
 ];
 
 function subsFor(url, title, desc) {

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

@@ -91,7 +91,7 @@
     } catch { /* global brief */ }
     try {
       const it = (await getJSON(`/api/brief?limit=1${homeq}`))?.items?.[0];
-      if (it) news = { id: it.id, title: it.title, summary: it.summary || it.description || '', image: it.image_url || null };
+      if (it) news = { id: it.id, title: it.title, summary: it.summary || it.description || '', image: it.image_url || null, source_read_minutes: it.source_read_minutes };
       // Photos display full (cover); only wide/tall figures (diagrams) get the framed plate.
       if (news?.image) {
         const probe = new Image();

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

@@ -270,7 +270,7 @@
 
 <svelte:head>
   <!-- Canonical/OG/description for /play are baked into the static play.html at build
-       time (scripts/patch-play-head.mjs) so non-JS social scrapers get them; we keep
+       time (scripts/patch-static-heads.mjs) so non-JS social scrapers get them; we keep
        only the browser-tab title + dev-gate noindex here to avoid duplicate tags. -->
   <title>Play · Upbeat Bytes — calm daily games</title>
   {#if isDevGated(game)}<meta name="robots" content="noindex" />{/if}
@@ -516,6 +516,7 @@
   .tile:hover { transform: translateY(-5px); }
   .tile.soon { cursor: default; }
   .tile.soon:hover { transform: none; }
+  @media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } }
   .tile-word { background: #f0a830; box-shadow: 0 12px 26px -10px rgba(224, 148, 31, 0.55); }
   .tile-ws { background: #2f7fb0; box-shadow: 0 12px 26px -10px rgba(47, 127, 176, 0.55); }
   .tile-bloom { background: #5a9b63; box-shadow: 0 12px 26px -10px rgba(90, 155, 99, 0.55); }
@@ -540,8 +541,10 @@
   .m-ws { padding: 12px 16px 66px; display: grid; grid-template-columns: repeat(6, 29px); gap: 4px; justify-content: center; align-content: center; }
   .wc { width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; color: rgba(255, 255, 255, 0.42); }
   .wc.hl { background: rgba(255, 255, 255, 0.93); color: #2f7fb0; border-radius: 7px; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12); }
-  /* flex-center the flower in the space above the title (padding-bottom clears the foot) */
-  .m-bloom { display: flex; align-items: center; justify-content: center; padding-bottom: 64px; box-sizing: border-box; }
+  /* Bloom is a circular medallion, so center it in the tile's visual field (~43%), lower than
+     the other top-illustration motifs — just a small padding-bottom to keep the lower petal
+     off the title/gradient. */
+  .m-bloom { display: flex; align-items: center; justify-content: center; padding-bottom: 32px; box-sizing: border-box; }
   .bloom-ring { position: relative; width: 150px; height: 150px; }
   .m-bloom .petal { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #4f8a58; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1); }
   .m-bloom .pc { width: 50px; height: 50px; background: #3e7a47; color: #fff; font-size: 22px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); }