diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte
index 4f6c2d8..4e0a7ab 100644
--- a/frontend/src/routes/home3/+page.svelte
+++ b/frontend/src/routes/home3/+page.svelte
@@ -65,7 +65,7 @@
         <p class="summary">{news?.summary || "We read the week so you don't have to doomscroll it. Five quietly hopeful stories, summarised to the gist."}</p>
         <div class="news-foot">
           <span class="link news-link">Read the good news</span>
-          <span class="meta">Updated this morning</span>
+          <span class="meta">3 min read</span>
         </div>
       </div>
     </a>
@@ -74,7 +74,7 @@
     <a class="card art" href="/art">
       <div class="art-body">
         <span class="label" style="color:#8857C2">DAILY ART</span>
-        <h3>A masterwork a day, beautifully framed</h3>
+        <h3>A masterwork a day</h3>
         <p class="art-today">
           {#if art}Today: <span class="ital">{art.title}</span>{#if art.artist} — {art.artist}{/if}{#if art.year}, {art.year}{/if}.
           {:else}Today: <span class="ital">Among the Sierra Nevada</span> — Bierstadt, 1868.{/if}
@@ -205,10 +205,12 @@
     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: 3; line-clamp: 3; overflow: hidden;
   }
-  /* keep the gist tidy so the bento stays balanced — full read lives on /news */
+  /* the gist fades out at the bottom (FIX 1) instead of a hard ellipsis — full read on /news */
   .summary {
     font-size: 14.5px; line-height: 1.55; color: var(--body); margin: 12px 0 0;
-    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
+    max-height: 4.6em; overflow: hidden;
+    -webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent);
+    mask-image: linear-gradient(to bottom, #000 56%, transparent);
   }
   .news-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 20px; }
   .news-link { color: var(--teal); border-bottom: 2px solid #6fc4d8; }
@@ -241,12 +243,12 @@
   .play-link { color: #A8650F; border-bottom: 2px solid #e0a94f; }
 
   /* "bleeding boards" — three game motifs clipping at the card edges (decorative) */
-  /* Word search anchored dead-centre; wordle + match grid an equal distance on each side
-     (the ws panel is ~120px wide → 60px half + an 18px gutter = 78px offset from centre). */
+  /* Word search is the centred highlight; the two side games are the SAME size and each
+     bleeds ~half a column off its edge (consistent both sides) to imply "more under the hood". */
   .play-band { position: relative; height: 124px; margin-top: 24px; overflow: hidden; }
-  .wb { position: absolute; top: 50%; right: calc(50% + 78px); transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
+  .wb { position: absolute; top: 50%; left: -12px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
   .wb-row { display: flex; gap: 4px; }
-  .wb-t { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #fff; }
+  .wb-t { width: 24px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #fff; }
   .wb-g { background: #6bbf8c; } .wb-a { background: #E6A02C; } .wb-n { background: #d9c39a; }
   .wb-e { background: #fff; border: 1.5px solid #ecca84; } .wb-d { background: #fff; border: 1.5px dashed #e0bb6f; }
   .ws {
@@ -257,7 +259,7 @@
     box-shadow: 0 5px 16px -8px rgba(210, 134, 27, 0.55);
   }
   .ws .hl { color: #B5701A; font-weight: 800; }
-  .mm { position: absolute; top: 50%; left: calc(50% + 78px); transform: translateY(-50%); display: grid; grid-template-columns: repeat(3, 26px); grid-auto-rows: 26px; gap: 5px; }
+  .mm { position: absolute; top: 50%; right: -12px; transform: translateY(-50%); display: grid; grid-template-columns: repeat(3, 24px); grid-auto-rows: 24px; gap: 4px; }
   .mm > span { border-radius: 6px; }
   .mm-a { background: #E6A02C; }
   .mm-w { background: #fff; border: 1.5px solid #f0d597; display: flex; align-items: center; justify-content: center; }