home3 News card: hug content (no stretch gap) + tighten mobile brief gap

- Desktop: .news align-self:start so it sizes to its content instead of stretching
  to the right column's height — the "1 min brief" footer sits just under the gist
  rather than floating at the bottom of a tall card. Right column sets row height;
  bento stays tight.
- Mobile: tighten the gap under the gist before "1 min brief" (was ~a full line).

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

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

@@ -343,9 +343,11 @@
   /* card titles: Newsreader, a calmer medium weight (per CD's mockup) */
   h2, h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
 
-  /* Good News — tall, photo on top */
+  /* Good News — photo on top. Hug its content (don't stretch to the right column's height),
+     so the read-time sits just under the gist instead of floating at the bottom of a tall
+     card. The right column then sets the row height and the bento stays tight. */
   .news {
-    background: #fff; border: 1px solid var(--news-border);
+    background: #fff; border: 1px solid var(--news-border); align-self: start;
     display: flex; flex-direction: column; box-shadow: 0 6px 20px -14px rgba(0, 131, 173, 0.4);
   }
   /* photo + headline both link to the article (clickable, not just the text links) */
@@ -526,7 +528,7 @@
     .news { grid-row: auto; }
     /* phone: even shorter taste of the gist; tap through for the rest */
     .summary { -webkit-line-clamp: 3; line-clamp: 3; }
-    .news-foot { margin-top: 14px; }   /* natural height here, so just a normal gap */
+    .news-foot { margin-top: 0; padding-top: 12px; }   /* snug under the text, not a line's gap */
   }
   @media (max-width: 520px) {
     /* Art becomes an image-first card: the painting on top in a proper landscape frame