style: polish blog landing and cards

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>
   )