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">
+    <main className="mx-auto max-w-5xl px-6 py-10 sm:py-14">
-      <header className="mb-16 text-center">
+      <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">
+      <section aria-labelledby="latest-heading" className="space-y-7">
-          Latest
+        <div className="flex flex-col gap-2 border-b border-border pb-5 sm:flex-row sm:items-end sm:justify-between">
-        </h1>
+          <div>
-        <PostList posts={posts} />
+            <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">
+    <main className="mx-auto max-w-5xl px-6 py-12 sm:py-16">
-      <h1 className="heading-xl text-ink mt-0 mb-12">
+      <header className="mb-10 border-b border-border pb-8">
-        Posts
+        <p className="mb-3 font-mono text-xs uppercase tracking-[0.24em] text-ink-soft">Archive</p>
-      </h1>
+        <h1 className="heading-xl m-0 text-ink">
-      <PostSearch posts={posts} />
+          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>
   )

components/blog/PostCard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { m } from 'motion/react';
+import { m, useReducedMotion } from 'motion/react';
 import type { PostMeta } from '@/lib/posts';
 
 const tagToClientSlug = (tag: string): string =>
@@ -17,43 +17,46 @@ const tagToClientSlug = (tag: string): string =>
     .replace(/^-|-$/g, '');
 
 export function PostCard({ slug, title, date, excerpt, tags = [], author, readingTime, index = 0, coverImage }: PostMeta & { index?: number }) {
+  const shouldReduceMotion = useReducedMotion();
+
   return (
     <m.article
-      initial={{ opacity: 0, y: 20 }}
+      initial={shouldReduceMotion ? false : { opacity: 0, y: 14 }}
-      whileInView={{ opacity: 1, y: 0 }}
+      whileInView={shouldReduceMotion ? undefined : { opacity: 1, y: 0 }}
-      transition={{ duration: 0.5, delay: index * 0.07 }}
+      whileHover={shouldReduceMotion ? undefined : { y: -2 }}
-      viewport={{ once: true }}
+      transition={{ duration: 0.35, delay: shouldReduceMotion ? 0 : Math.min(index * 0.04, 0.18), ease: [0.22, 1, 0.36, 1] }}
-      className="group relative scroll-mt-20 rounded-xl border border-border bg-canvas p-6 transition-all hover:border-border/80 hover:shadow-card"
+      viewport={{ once: true, amount: 0.2 }}
+      className="group relative scroll-mt-20 rounded-2xl border border-border/90 bg-canvas p-5 shadow-card transition-[background-color,border-color,box-shadow] duration-200 ease-out hover:border-ink/25 hover:bg-surface/40 hover:shadow-card-hover dark:hover:border-ink/35 sm:p-7"
     >
       <Link href={`/posts/${slug}/`} className="block">
         {coverImage && (
-          <div className="mb-4 overflow-hidden rounded-lg">
+          <div className="mb-5 overflow-hidden rounded-xl border border-border/80 bg-surface">
             <img
               src={coverImage}
               alt={`Cover image for ${title}`}
-              className="w-full h-40 object-cover"
+              className="h-44 w-full object-cover transition-transform duration-300 ease-out group-hover:scale-[1.015] sm:h-52"
               loading="lazy"
             />
           </div>
         )}
-        <div className="flex items-center gap-3 text-xs text-ink-soft mb-3">
+        <div className="mb-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-ink-soft">
           <time className="font-mono" dateTime={date}>{new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
           {author && <span className="text-ink-soft/70">·</span>}
           {author && <span>{author}</span>}
           {readingTime && <span className="text-ink-soft/70">·</span>}
           {readingTime && <span className="font-mono">{readingTime} min read</span>}
         </div>
-        <h3 className="heading-md text-ink mt-0 mb-3 group-hover:text-accent transition-colors">
+        <h3 className="heading-md mb-3 mt-0 text-ink transition-colors duration-200 group-hover:text-accent">
           {title}
         </h3>
         {excerpt && (
-          <p className="text-ink-soft leading-relaxed mt-3 text-sm">{excerpt}</p>
+          <p className="mt-3 max-w-3xl text-sm leading-7 text-ink-soft">{excerpt}</p>
         )}
       </Link>
       {tags && tags.length > 0 && (
-        <div className="flex flex-wrap gap-1.5 mt-3">
+        <div className="mt-5 flex flex-wrap gap-2">
           {tags.slice(0, 3).map((tag) => (
-            <Link key={tag} href={`/tags/${tagToClientSlug(tag)}/`} className="rounded-full bg-surface/50 border border-border px-2.5 py-0.5 text-xs text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
+            <Link key={tag} href={`/tags/${tagToClientSlug(tag)}/`} className="rounded-full border border-border bg-surface/70 px-3 py-1 text-xs text-ink-soft transition-colors duration-200 hover:border-accent/60 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
               {tag}
             </Link>
           ))}

components/blog/PostList.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { m } from "motion/react";
+import { m, useReducedMotion } from "motion/react";
 import { PostCard } from "./PostCard";
 import type { PostMeta } from "@/lib/posts";
 
@@ -19,11 +19,18 @@ interface PostListProps {
 }
 
 export function PostList({ posts }: PostListProps) {
+  const shouldReduceMotion = useReducedMotion();
+
   return (
-    <m.ul variants={listVariants} initial="hidden" animate="visible" className="space-y-8">
+    <m.ul
-      {posts.map((post) => (
+      variants={shouldReduceMotion ? undefined : listVariants}
+      initial={shouldReduceMotion ? false : "hidden"}
+      animate="visible"
+      className="space-y-6"
+    >
+      {posts.map((post, index) => (
         <li key={post.slug}>
-          <PostCard {...post} index={posts.indexOf(post)} />
+          <PostCard {...post} index={index} />
         </li>
       ))}
     </m.ul>