diff --git a/frontend/src/lib/components/ArticleCard.svelte b/frontend/src/lib/components/ArticleCard.svelte
index 69718e0..110f366 100644
--- a/frontend/src/lib/components/ArticleCard.svelte
+++ b/frontend/src/lib/components/ArticleCard.svelte
@@ -41,13 +41,15 @@
 
   <div class="body">
     <div class="tags">
-      {#each pills as t, i (t)}
-        {#if ontag}
-          <button type="button" class="tag" class:soft={i > 0} onclick={() => ontag(t)}>{humanize(t)}</button>
-        {:else}
-          <span class="tag" class:soft={i > 0}>{humanize(t)}</span>
-        {/if}
-      {/each}
+      <div class="pillrow">
+        {#each pills as t, i (t)}
+          {#if ontag}
+            <button type="button" class="tag" class:soft={i > 0} onclick={() => ontag(t)}>{humanize(t)}</button>
+          {:else}
+            <span class="tag" class:soft={i > 0}>{humanize(t)}</span>
+          {/if}
+        {/each}
+      </div>
     </div>
     <div class="src">{article.source}</div>
 
@@ -91,7 +93,8 @@
   }
 
   .body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
-  .tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
+  .tags { 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;
     padding: 3px 11px 2px; font-family: var(--label); font-weight: 300; font-size: 0.66rem;
@@ -106,14 +109,13 @@
   /* 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 {
-    align-items: center; align-content: center;
-    /* Comfortably taller than two rows of pills, so the wrapped (3-pill) case
-       still gets even margins top and bottom rather than filling edge-to-edge.
-       With centering, 1-, 2-, and 3-pill cards all sit symmetrically and their
-       dividers/titles line up. */
-    min-height: 64px;
-    border-bottom: 1px solid var(--line);
+    flex-direction: column; justify-content: center; align-items: flex-start;
+    min-height: 64px; border-bottom: 1px solid var(--line);
   }
   /* Source on its own line below the tags, left-justified, for uniformity. */
   .src { color: var(--muted); font-size: 0.78rem; margin: -2px 0 2px; }