diff --git a/frontend/src/lib/components/ArticleCard.svelte b/frontend/src/lib/components/ArticleCard.svelte
index 110f366..4809952 100644
--- a/frontend/src/lib/components/ArticleCard.svelte
+++ b/frontend/src/lib/components/ArticleCard.svelte
@@ -40,7 +40,8 @@
   {/if}
 
   <div class="body">
-    <div class="tags">
+    <div class="cardhead">
+      <span class="accent"></span>
       <div class="pillrow">
         {#each pills as t, i (t)}
           {#if ontag}
@@ -93,7 +94,7 @@
   }
 
   .body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
-  .tags { display: flex; align-items: center; }
+  .cardhead { display: flex; align-items: center; }
   .pillrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
   .tag {
     background: var(--accent); color: #fff; border: none; border-radius: 999px;
@@ -106,17 +107,18 @@
   button.tag:hover { background: var(--accent-deep); color: #fff; }
   button.tag.soft:hover { background: var(--accent); color: #fff; }
 
-  /* Reserve room for two rows of pills on tiles so titles always line up
-     across the grid, whether a card has 1, 2, or 3 tags. A hairline closes
-     the zone. (The hero is its own layout and opts out.) */
-  /* Vertically center the pill row inside a fixed-height zone using a column
-     flex + justify-content (no align-content single-line quirk). Comfortably
-     taller than two rows so the 3-pill case keeps even margins; 1-, 2-, and
-     3-pill cards all sit symmetrically and their dividers/titles line up. */
-  .tile .tags {
-    flex-direction: column; justify-content: center; align-items: flex-start;
-    min-height: 64px; border-bottom: 1px solid var(--line);
+  /* On tiles, accent + pills + divider are ONE header unit with a fixed height,
+     so the centered band is exactly the band the eye measures (accent line →
+     divider). The accent is the top grid row; the pill row centers in the rest,
+     giving even margins for 1-, 2-, and 3-pill cards with everything aligned. */
+  .tile .cardhead {
+    display: grid; grid-template-rows: 3px 1fr; height: 84px;
+    padding-top: 18px; border-bottom: 1px solid var(--line);
   }
+  .tile .accent {
+    width: 30px; height: 3px; border-radius: 2px; background: var(--accent); opacity: 0.85;
+  }
+  .tile .pillrow { align-self: center; }
   /* Source on its own line below the tags, left-justified, for uniformity. */
   .src { color: var(--muted); font-size: 0.78rem; margin: -2px 0 2px; }
 
@@ -155,11 +157,8 @@
 
   /* ---- Typographic editorial tile (every non-hero card) ---- */
   .tile { position: relative; }
-  .tile .body { padding-top: 18px; }
-  .tile .body::before {
-    content: ''; display: block; width: 30px; height: 3px;
-    background: var(--accent); border-radius: 2px; margin-bottom: 10px; opacity: 0.85;
-  }
+  /* The .cardhead owns the top padding (above the accent); avoid doubling it. */
+  .tile .body { padding-top: 0; }
   .tile::after {
     content: attr(data-topic);
     position: absolute; right: 10px; bottom: -8px;
@@ -167,7 +166,7 @@
     color: var(--accent); opacity: 0.05; text-transform: lowercase; letter-spacing: -0.02em;
     pointer-events: none; user-select: none;
   }
-  .tile .tags, .tile .src, .tile h3, .tile .why, .tile .actions { position: relative; }
+  .tile .cardhead, .tile .src, .tile h3, .tile .why, .tile .actions { position: relative; }
 
   /* ---- Hero WITH image: two columns, with an atmospheric overlay ---- */
   .hero { display: grid; grid-template-columns: 1.1fr 1fr; }