fix(ui): switch to strict grid layout and update logo

web/src/components/ArticleCard.tsx

@@ -11,7 +11,7 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
     const timeToRead = Math.ceil((article.content?.length || 500) / 1000) + 1;
 
     return (
-        <article className="magazine-card group cursor-pointer break-inside-avoid-column inline-block w-full mb-8 shadow-2xl shadow-gold/10 hover:shadow-carbon/10 transition-all duration-500 rounded-xl border border-transparent hover:border-gold/10" onClick={() => onClick(article)}>
+        <article className="magazine-card group cursor-pointer flex flex-col h-full shadow-2xl shadow-gold/10 hover:shadow-carbon/10 transition-all duration-500 rounded-xl border border-transparent hover:border-gold/10" onClick={() => onClick(article)}>
             {/* Image Placeholder with Gold Overlay */}
             <div className="aspect-[16/10] overflow-hidden rounded-xl bg-carbon-light relative mb-6">
                 <div className="absolute inset-0 bg-gradient-to-t from-carbon-dark/80 via-transparent to-transparent opacity-60 z-10"></div>

web/src/index.css

@@ -70,21 +70,21 @@
 
 @layer components {
   .magazine-grid {
-    column-count: 1;
-    column-gap: 2rem;
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    gap: 2rem;
     padding: 2rem 0;
-    column-fill: balance;
   }
 
   @media (min-width: 768px) {
     .magazine-grid {
-      column-count: 2;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
   @media (min-width: 1024px) {
     .magazine-grid {
-      column-count: 3;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }