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 === */

app/page.tsx

@@ -7,14 +7,45 @@ export default async function HomePage() {
 
   return (
     <Template>
-    <main className="max-w-4xl mx-auto px-6 py-12">
-      <header className="mb-16 text-center">
+    <main className="mx-auto max-w-5xl px-6 py-10 sm:py-14">
+      <header className="editorial-hero mb-14 rounded-[2rem] border border-border px-6 py-12 shadow-card sm:px-10 sm:py-16">
+        <div className="relative z-10 max-w-3xl">
+          <p className="mb-4 font-mono text-xs uppercase tracking-[0.28em] text-ink-soft">
+            Minimal static journal
+          </p>
+          <h1 className="heading-xl mb-5 max-w-2xl text-ink sm:text-5xl">
+            Quiet notes on design, code, and the web.
+          </h1>
+          <p className="max-w-2xl text-base leading-7 text-ink-soft sm:text-lg">
+            A small, fast blog for thoughtful essays, implementation notes, and experiments in readable interfaces.
+          </p>
+        </div>
       </header>
-      <section>
-        <h1 className="heading-xl text-ink mb-8">
-          Latest
-        </h1>
-        <PostList posts={posts} />
+
+      <section aria-labelledby="latest-heading" className="space-y-7">
+        <div className="flex flex-col gap-2 border-b border-border pb-5 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <p className="mb-2 font-mono text-xs uppercase tracking-[0.24em] text-ink-soft">Latest</p>
+            <h2 id="latest-heading" className="heading-lg m-0 text-ink">
+              Recent writing
+            </h2>
+          </div>
+          <p className="max-w-md text-sm leading-6 text-ink-soft">
+            Fresh posts appear here as soon as they are published.
+          </p>
+        </div>
+
+        {posts.length > 0 ? (
+          <PostList posts={posts} />
+        ) : (
+          <div className="empty-state">
+            <p className="font-mono text-xs uppercase tracking-[0.22em] text-ink-soft">No posts yet</p>
+            <h3 className="heading-sm m-0 text-ink">The notebook is ready.</h3>
+            <p className="m-0 max-w-xl text-sm leading-6 text-ink-soft">
+              Add your first MDX post and it will show up here with the same polished card treatment.
+            </p>
+          </div>
+        )}
       </section>
     </main>
     </Template>

app/posts/page.tsx

@@ -9,11 +9,28 @@ export default async function PostsPage() {
 
   return (
     <Template>
-    <main className="max-w-4xl mx-auto px-6 py-16">
-      <h1 className="heading-xl text-ink mt-0 mb-12">
-        Posts
-      </h1>
-      <PostSearch posts={posts} />
+    <main className="mx-auto max-w-5xl px-6 py-12 sm:py-16">
+      <header className="mb-10 border-b border-border pb-8">
+        <p className="mb-3 font-mono text-xs uppercase tracking-[0.24em] text-ink-soft">Archive</p>
+        <h1 className="heading-xl m-0 text-ink">
+          Posts
+        </h1>
+        <p className="mt-4 max-w-2xl text-sm leading-6 text-ink-soft sm:text-base">
+          Browse every essay, note, and experiment in one place. Search and tag filters stay local and fast.
+        </p>
+      </header>
+
+      {posts.length > 0 ? (
+        <PostSearch posts={posts} />
+      ) : (
+        <section className="empty-state" aria-label="No posts published">
+          <p className="font-mono text-xs uppercase tracking-[0.22em] text-ink-soft">No posts yet</p>
+          <h2 className="heading-sm m-0 text-ink">The archive is empty.</h2>
+          <p className="m-0 max-w-xl text-sm leading-6 text-ink-soft">
+            Publish an MDX post to populate this list and enable archive search.
+          </p>
+        </section>
+      )}
     </main>
     </Template>
   )