style: polish blog landing and cards

app/globals.css

@@ -48,6 +48,7 @@
 
   /* Shadows */
   --shadow-card: 0 1px 3px oklch(0 0 0 / 0.08);
+  --shadow-card-hover: 0 20px 45px -32px oklch(0 0 0 / 0.35), 0 1px 3px oklch(0 0 0 / 0.08);
 
   /* Animations */
   --animate-fade-in: fade-in 0.3s ease-out;
@@ -125,6 +126,48 @@
   --color-code-copy-hover: oklch(0.85 0 0);
 
   --shadow-card: 0 1px 4px oklch(1 0 0 / 0.06);
+  --shadow-card-hover: 0 22px 50px -34px oklch(1 0 0 / 0.22), 0 1px 4px oklch(1 0 0 / 0.08);
+}
+
+/* === Editorial list surfaces === */
+.editorial-hero {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  background:
+    radial-gradient(circle at 20% 10%, color-mix(in oklch, var(--color-accent) 10%, transparent), transparent 34%),
+    linear-gradient(135deg, color-mix(in oklch, var(--color-surface) 88%, var(--color-canvas)), var(--color-canvas));
+}
+
+.editorial-hero::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0.35;
+  background-image: radial-gradient(color-mix(in oklch, var(--color-ink) 18%, transparent) 0.5px, transparent 0.5px);
+  background-size: 12px 12px;
+  mask-image: linear-gradient(135deg, black, transparent 78%);
+}
+
+.dark .editorial-hero {
+  background:
+    radial-gradient(circle at 20% 10%, color-mix(in oklch, var(--color-accent) 14%, transparent), transparent 36%),
+    linear-gradient(135deg, color-mix(in oklch, var(--color-surface) 82%, var(--color-canvas)), var(--color-canvas));
+}
+
+.dark .editorial-hero::after {
+  opacity: 0.22;
+}
+
+.empty-state {
+  display: grid;
+  gap: 0.75rem;
+  border: 1px dashed color-mix(in oklch, var(--color-border) 78%, var(--color-ink) 22%);
+  border-radius: 1.25rem;
+  background: color-mix(in oklch, var(--color-surface) 55%, transparent);
+  padding: 2rem;
 }
 
 /* === Code Blocks: Borderless, VS Code Style, Line Numbers === */