style: polish blog landing and cards

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>