home3 News card: desktop gist fills to equal height (basis:0 fade), right never stretches

Desktop: the gist flex-fills the card with flex-basis:0 so it never inflates the
row height — the right column always sets it and is never stretched — and fades
softly into a comfortable margin above the read-time. Mobile keeps the clean
3-line clamp (natural height, no fade).

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

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

@@ -343,11 +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 — photo on top. Hug its content (don't stretch to the right column's height),
+  /* Good News — photo on top, equal height to the right column. The gist flex-fills the
-     so the read-time sits just under the gist instead of floating at the bottom of a tall
+     card (basis:0 so it never drives the row height → the right column always sets it, never
-     card. The right column then sets the row height and the bento stays tight. */
+     stretched) and fades softly into a comfortable margin above the read-time. */
   .news {
-    background: #fff; border: 1px solid var(--news-border); align-self: start;
+    background: #fff; border: 1px solid var(--news-border);
     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) */
@@ -376,16 +376,15 @@
     font-size: clamp(1.55rem, 2.6vw, 30px); line-height: 1.14; margin: 12px 0 0;
     display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
   }
-  /* Just a taste of the gist — it's already a summary, so clamp to a few lines and let the
+  /* Desktop: the gist grows to fill the card (basis:0 so it never inflates the row height),
-     reader click through. Keeping it short also stops the News card from being the tallest
+     softly fading out so it never jams against the read-time — a comfortable margin either way. */
-     thing on the page (which was stretching the right column and spreading its cards). */
+  .summary-a {
-  .summary-a { display: block; text-decoration: none; color: inherit; }
+    flex: 1 1 0; min-height: 0; overflow: hidden; display: block; text-decoration: none; color: inherit;
-  .summary {
+    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5em), transparent);
-    font-size: 15px; line-height: 1.5; color: #5a5346; margin: 12px 0 0;
+    mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5em), transparent);
-    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
   }
-  /* push the footer (brief · divider · read-more) to the card's bottom */
+  .summary { font-size: 15px; line-height: 1.5; color: #5a5346; margin: 12px 0 0; }
-  .news-foot { display: flex; align-items: center; justify-content: flex-end; padding-top: 18px; margin-top: auto; }
+  .news-foot { display: flex; align-items: center; justify-content: flex-end; padding-top: 16px; }
   .meta { font-size: 12px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
   /* divider sets the secondary "feed" link apart as its own thing */
   .news-div { border: none; border-top: 1px solid #e6d9bf; margin: 14px 0 12px; }
@@ -526,9 +525,10 @@
   @media (max-width: 860px) {
     .bento { grid-template-columns: minmax(0, 1fr); }   /* minmax(0,…) so a wide child can't widen the page */
     .news { grid-row: auto; }
-    /* phone: even shorter taste of the gist; tap through for the rest */
+    /* phone: a short, clean 3-line taste (no fill/fade — the card is natural height here) */
-    .summary { -webkit-line-clamp: 3; line-clamp: 3; }
+    .summary-a { flex: none; -webkit-mask-image: none; mask-image: none; }
-    .news-foot { margin-top: 0; padding-top: 12px; }   /* snug under the text, not a line's gap */
+    .summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
+    .news-foot { 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