blog index: centered column, teaser cards instead of the tutorial list

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

app/blog/page.js

 import Link from "next/link";
 import Layout from "@/components/layout";
 import Date from "@/components/date";
-import utilStyles from "@/styles/utils.module.css";
 import styles from "./blog.module.css";
 import { getBlogPosts } from "@/lib/blog";
 
@@ -10,31 +9,56 @@ export const metadata = {
   description: "Notes, project archaeology and background noise.",
 };
 
+/**
+ * Blog index — one centered reading column, the same teaser cards as the
+ * landing's recent-posts rail. Drafts show here in dev (SHOW_DRAFTS) and
+ * vanish in prod via the shared draftsVisible() rule.
+ */
 export default function Blog() {
   const posts = getBlogPosts();
 
   return (
     <Layout>
-      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
-        <h1 className={utilStyles.headingXl}>Blog</h1>
-        <ul className={utilStyles.list}>
+      <div className="max-w-3xl mx-auto px-4">
+        <header className="mt-8 mb-10">
+          <h1 className="text-4xl font-semibold tracking-tight">Blog</h1>
+          <p className="mt-2 text-[var(--text-muted)]">
+            Notes, project archaeology and background noise.
+          </p>
+        </header>
+        <ul className="grid gap-4 list-none p-0">
           {posts.map(({ slug, title, date, description, draft, languages }) => (
-            <li className={utilStyles.listItem} key={slug}>
-              <Link href={`/blog/${slug}`} className={utilStyles.listItemLink}>
-                <span>{title}</span>
-              </Link>
-              {draft && <small className={styles.draftBadge}>DRAFT</small>}
-              {languages.length > 1 && <small className={styles.langBadge}>FR / EN</small>}
-              <br />
-              <small className={utilStyles.lightText}>
+            <li key={slug}>
+              <Link
+                href={`/blog/${slug}`}
+                className="block rounded-xl border p-4 leading-relaxed transition-colors border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--surface-raised)]"
+              >
+                <span className="flex items-baseline justify-between gap-3">
+                  <span className="font-medium text-[var(--text-primary)]">
+                    {title}
+                  </span>
+                  <span className="text-xs whitespace-nowrap text-[var(--text-muted)]">
                     <Date dateString={date} />
-                {description ? ` — ${description}` : null}
-              </small>
-              <br />
+                  </span>
+                </span>
+                {description && (
+                  <span className="block mt-2 text-sm text-[var(--text-muted)] line-clamp-2">
+                    {description}
+                  </span>
+                )}
+                {(draft || languages.length > 1) && (
+                  <span className="block mt-2 text-xs">
+                    {draft && <span className={styles.draftBadge}>DRAFT</span>}{" "}
+                    {languages.length > 1 && (
+                      <span className={styles.langBadge}>FR / EN</span>
+                    )}
+                  </span>
+                )}
+              </Link>
             </li>
           ))}
         </ul>
-      </section>
+      </div>
     </Layout>
   );
 }