Even out card heights: description only on hero, clamp lane card text

Text-first lane cards were rendering the full source description, ballooning
them to several times the height of image cards.
- Show the source description only on the hero; lane/grid cards show title + the
  one-sentence 'why', which is a tidy uniform summary.
- Line-clamp lane card titles and 'why' to 3 lines (hero description to 6) so
  variable text length can't blow up a card. Rows now stay even.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/ArticleCard.svelte

@@ -37,7 +37,7 @@
 
     <h3><a href={safeHref} target="_blank" rel="noopener">{article.title}</a></h3>
 
-    {#if (hero || !hasImg) && article.description}
+    {#if hero && article.description}
       <p class="desc">{article.description}</p>
     {/if}
 
@@ -88,6 +88,16 @@
     margin: 2px 0 0; font-style: italic; color: var(--muted);
     font-size: 0.9rem; padding-left: 12px; border-left: 2px solid var(--sage-soft);
   }
+  /* Keep card heights even: clamp variable-length text on lane/grid cards. */
+  article:not(.hero):not(.herotype) h3,
+  .why {
+    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
+    -webkit-line-clamp: 3;
+  }
+  .hero .desc, .herotype .desc {
+    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
+    -webkit-line-clamp: 6;
+  }
   .actions { margin-top: auto; padding-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
   .actions button {
     background: none; border: none; padding: 0; color: var(--muted);