diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte
index 4e0a7ab..43c21fe 100644
--- a/frontend/src/routes/home3/+page.svelte
+++ b/frontend/src/routes/home3/+page.svelte
@@ -5,7 +5,7 @@
   // /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
   // prototype (noindex), alongside /home2 so we can compare.
-  let news = $state(null);   // {title, summary, image}
+  let news = $state(null);   // {id, title, summary, image}
   let art = $state(null);    // {title, artist, year, image}
 
   onMount(async () => {
@@ -22,7 +22,7 @@
     } catch { /* global brief */ }
     try {
       const it = (await getJSON(`/api/brief?limit=1${homeq}`))?.items?.[0];
-      if (it) news = { 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 };
     } catch { /* fall back to design copy */ }
   });
 </script>
@@ -56,20 +56,22 @@
   </section>
 
   <main class="bento">
-    <!-- Good News (tall) -->
-    <a class="card news" href="/">
+    <!-- Good News (tall) — a card with TWO links, so it's a div, not a single anchor -->
+    <div class="card news">
       <div class="news-photo" style={news?.image ? `background-image:url(${news.image})` : ''}></div>
       <div class="news-body">
         <span class="label" style="color:#0083ad">GOOD NEWS</span>
         <h2>{news?.title ?? 'What went right this week: the good news that actually matters'}</h2>
         <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>
+          <a class="link news-link" href={news?.id ? `/a/${news.id}` : '/'}>Read article</a>
           <span class="meta">3 min read</span>
         </div>
+        <a class="news-more" href="/">Read more good news →</a>
       </div>
-    </a>
+    </div>
 
+    <div class="rightcol">
     <!-- Daily Art (wide) -->
     <a class="card art" href="/art">
       <div class="art-body">
@@ -131,6 +133,7 @@
         <span class="moment-meta">Breathing, sound &amp; stillness.</span>
       </div>
     </div>
+    </div>
   </main>
 
   <footer class="foot">upbeatBytes — no ads, no paywalls, no doomscrolling.</footer>
@@ -183,7 +186,11 @@
     max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box;
     padding: 0 clamp(18px, 5vw, 44px) 16px;
     display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.82fr); gap: 18px;
+    align-items: start;   /* columns size to content + float at top — never stretch */
   }
+  /* right column is independent of the (taller) News card, so Art/Play/Moment keep their
+     natural size instead of stretching to match News */
+  .rightcol { display: flex; flex-direction: column; gap: 18px; }
   .card {
     border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit;
     transition: transform 0.18s ease, box-shadow 0.18s ease;
@@ -196,7 +203,7 @@
 
   /* Good News — tall, photo on top */
   .news {
-    grid-row: span 2; background: #fff; border: 1px solid var(--news-border);
+    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);
   }
   .news-photo { aspect-ratio: 5/4; background: linear-gradient(160deg, #6fc4d8, #9bd4c9 55%, #f6cf7e); background-size: cover; background-position: center; }
@@ -213,8 +220,11 @@
     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; }
+  .news-link { color: var(--teal); border-bottom: 2px solid #6fc4d8; text-decoration: none; }
   .meta { font-size: 12px; color: var(--muted); }
+  /* secondary link: straight to the full brief, without reading the highlighted article */
+  .news-more { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
+  .news-more:hover { color: var(--teal); }
 
   /* Daily Art — wide, text left + artwork swatch right */
   .art { background: #F3EEF9; border: 1px solid #e4d8f1; display: flex; min-height: 188px; }