home3 refinements: clamp summary, bigger titles/logo/nav, crop art edge, clearer CTA

- News summary + headline clamped to 3 lines so the long brief gist no longer stretches
  the bento (option 1; placeholder-bubble option still available if preferred).
- News CTA "Read the brief" → "Read the good news" (clearer for first-time visitors).
- Art swatch crops a few px off every edge (::after inset) to remove the black scan edge
  at the top of paintings.
- Logo 42→48px, nav 15→16.5px, card titles bumped + weight 500→600 so they pop on scan.

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

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

@@ -64,7 +64,7 @@
         <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 brief</span>
+          <span class="link news-link">Read the good news</span>
           <span class="meta">Updated this morning</span>
         </div>
       </div>
@@ -81,7 +81,7 @@
         </p>
         <span class="link art-link">View today</span>
       </div>
-      <div class="art-swatch" style={art?.image ? `background-image:url(${art.image})` : ''}></div>
+      <div class="art-swatch" style={art?.image ? `--art:url(${art.image})` : ''}></div>
     </a>
 
     <!-- bottom pair -->
@@ -127,8 +127,8 @@
     padding: 26px clamp(18px, 5vw, 44px) 0;
   }
   .brand { display: block; line-height: 0; }
-  .brand img { height: 42px; width: auto; display: block; }
-  .nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); font-size: 15px; font-weight: 500; }
+  .brand img { height: 48px; width: auto; display: block; }
+  .nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); font-size: 16.5px; font-weight: 500; }
   .nav a { color: var(--body); text-decoration: none; }
   .nav a.on { color: #23201b; }
   .nav a:hover { color: var(--teal); }
@@ -161,7 +161,8 @@
   a.card:hover { transform: translateY(-2px); }
   .label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; }
   .link { font-size: 14px; font-weight: 600; padding-bottom: 2px; align-self: flex-start; }
-  h2, h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
+  /* card titles a touch larger + bolder so they jump on hover/scan */
+  h2, h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
 
   /* Good News — tall, photo on top */
   .news {
@@ -170,8 +171,15 @@
   }
   .news-photo { aspect-ratio: 5/4; background: linear-gradient(160deg, #6fc4d8, #9bd4c9 55%, #f6cf7e); background-size: cover; background-position: center; }
   .news-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; }
-  .news h2 { font-size: clamp(1.4rem, 2.4vw, 27px); line-height: 1.14; margin: 12px 0 0; }
-  .summary { font-size: 14.5px; line-height: 1.55; color: var(--body); margin: 12px 0 0; }
+  .news h2 {
+    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 */
+  .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;
+  }
   .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; }
   .meta { font-size: 12px; color: var(--muted); }
@@ -179,16 +187,25 @@
   /* Daily Art — wide, text left + artwork swatch right */
   .art { background: #F3EEF9; border: 1px solid #e4d8f1; display: flex; min-height: 188px; }
   .art-body { flex: 1; padding: 24px 26px; display: flex; flex-direction: column; }
-  .art h3 { font-size: clamp(1.25rem, 2vw, 23px); line-height: 1.16; margin: 10px 0 0; color: #2a1c3d; }
+  .art h3 { font-size: clamp(1.35rem, 2.1vw, 25px); line-height: 1.16; margin: 10px 0 0; color: #2a1c3d; }
   .art-today { font-size: 13.5px; line-height: 1.5; color: #6f6280; margin: 9px 0 0; }
   .ital { font-style: italic; font-family: 'Newsreader', Georgia, serif; }
   .art-link { margin-top: auto; color: #8857C2; border-bottom: 2px solid #c9aef0; }
-  .art-swatch { width: 46%; min-width: 130px; background: linear-gradient(170deg, #bfe0f0 0%, #a9cf9a 50%, #d89a4e 100%); background-size: cover; background-position: center; }
+  /* swatch crops a few px off every edge (::after inset) so scanned paintings don't show
+     their ragged/black canvas edge at the top */
+  .art-swatch {
+    width: 46%; min-width: 130px; position: relative; overflow: hidden;
+    background: linear-gradient(170deg, #bfe0f0 0%, #a9cf9a 50%, #d89a4e 100%);
+  }
+  .art-swatch::after {
+    content: ""; position: absolute; inset: -6px;
+    background-image: var(--art); background-size: cover; background-position: center;
+  }
 
   /* bottom pair */
   .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
   .play { background: #FFF3DC; border: 1px solid #f6e2b8; padding: 22px 24px; display: flex; flex-direction: column; }
-  .play h3 { font-size: clamp(1.15rem, 1.8vw, 21px); margin: 9px 0 8px; color: #5c3d0c; }
+  .play h3 { font-size: clamp(1.25rem, 1.9vw, 23px); margin: 9px 0 8px; color: #5c3d0c; }
   .play-copy { font-size: 13px; line-height: 1.5; color: #917642; margin: 0; }
   .play-link { margin-top: auto; padding-top: 16px; color: #D2861B; border-bottom: 2px solid #f0c878; }