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

web/src/index.css

@@ -2,13 +2,13 @@
 @import "tailwindcss";
 
 @theme {
-  --color-carbon: #121212;
-  --color-carbon-light: #1e1e1e;
-  --color-carbon-dark: #0a0a0a;
+  --color-carbon: #F8F9FA;
+  --color-carbon-light: #FFFFFF;
+  --color-carbon-dark: #E9ECEF;
   --color-gold: #c5a059;
   --color-gold-bright: #e2c28d;
-  --color-paper-white: #f5f5f5;
-  --color-paper-muted: #888888;
+  --color-paper-white: #1A1A1A;
+  --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");
-    background-size: 200px 200px;
-    background-repeat: repeat;
-    background-blend-mode: overlay;
+    /* Optional: Subtle texture for paper effect, or clean flat color */
+    background-color: var(--color-carbon);
   }
 
   h1,
@@ -72,11 +70,22 @@
 
 @layer components {
   .magazine-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 3rem;
+    column-count: 1;
+    column-gap: 2rem;
     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;