feat(ui): implement alabaster light theme and masonry layout

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" onClick={() => onClick(article)}>
+        <article className="magazine-card group cursor-pointer break-inside-avoid mb-8" 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

@@ -2,13 +2,13 @@
 @import "tailwindcss";
 
 @theme {
-  --color-carbon: #121212;
+  --color-carbon: #F8F9FA;
-  --color-carbon-light: #1e1e1e;
+  --color-carbon-light: #FFFFFF;
-  --color-carbon-dark: #0a0a0a;
+  --color-carbon-dark: #E9ECEF;
   --color-gold: #c5a059;
   --color-gold-bright: #e2c28d;
-  --color-paper-white: #f5f5f5;
+  --color-paper-white: #1A1A1A;
-  --color-paper-muted: #888888;
+  --color-paper-muted: #6B7280;
 
   --font-serif: "Playfair Display", serif;
   --font-sans: "Inter", system-ui, sans-serif;
@@ -22,10 +22,10 @@
 }
 
 @utility glass-panel {
-  background: rgba(30, 30, 30, 0.7);
+  background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
 @layer base {
@@ -33,10 +33,8 @@
     @apply bg-carbon text-paper-white font-sans antialiased selection:bg-gold/30;
     margin: 0;
     min-height: 100vh;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+    /* Optional: Subtle texture for paper effect, or clean flat color */
-    background-size: 200px 200px;
+    background-color: var(--color-carbon);
-    background-repeat: repeat;
-    background-blend-mode: overlay;
   }
 
   h1,
@@ -72,11 +70,22 @@
 
 @layer components {
   .magazine-grid {
-    display: grid;
+    column-count: 1;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    column-gap: 2rem;
-    gap: 3rem;
     padding: 2rem 0;
   }
+  
+  @media (min-width: 768px) {
+    .magazine-grid {
+      column-count: 2;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .magazine-grid {
+      column-count: 3;
+    }
+  }
 
   .magazine-card {
     @apply relative transition-all duration-500 ease-out;

web/tailwind.config.js

@@ -8,17 +8,17 @@ export default {
         extend: {
             colors: {
                 carbon: {
-                    DEFAULT: '#1a1a1a',
+                    DEFAULT: '#F8F9FA', // Alabaster
-                    light: '#262626',
+                    light: '#FFFFFF',   // White for cards
-                    dark: '#121212',
+                    dark: '#E9ECEF',    // Light gray for borders/inputs
                 },
                 gold: {
                     DEFAULT: '#d4af37',
                     glow: 'rgba(212, 175, 55, 0.4)',
                 },
                 paper: {
-                    white: '#e5e5e5',
+                    white: '#1A1A1A',   // Dark text
-                    muted: '#a3a3a3',
+                    muted: '#6B7280',   // Gray text
                 }
             },
             fontFamily: {