landing: recent posts rail above talks — teaser cards for both

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

app/page.js

@@ -2,14 +2,37 @@ import Link from "next/link";
 import Layout from "@/components/layout";
 import utilStyles from "@/styles/utils.module.css";
 import { getRecentTalksData } from "@/lib/talks";
+import { getBlogPosts } from "@/lib/blog";
+import Date from "@/components/date";
 import HoverTooltip from "@/components/HoverTooltip";
 
 export const metadata = {
   title: "PLN's Home",
 };
 
+/** Card for a post/talk teaser — title, meta line, clamped abstract. */
+function TeaserCard({ href, title, meta, description }) {
+  return (
+    <Link
+      href={href}
+      className="block rounded-xl border p-4 leading-relaxed transition-colors border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--surface-raised)]"
+    >
+      <span className="block font-medium text-[var(--text-primary)]">{title}</span>
+      {meta && (
+        <span className="block mt-1 text-xs text-[var(--text-muted)]">{meta}</span>
+      )}
+      {description && (
+        <span className="block mt-2 text-sm text-[var(--text-muted)] line-clamp-3">
+          {description}
+        </span>
+      )}
+    </Link>
+  );
+}
+
 export default function Home() {
   const talks = getRecentTalksData();
+  const posts = getBlogPosts().slice(0, 4);
 
   return (
     <div className="max-w-7xl mx-auto px-4">
@@ -151,6 +174,28 @@ export default function Home() {
           </p>
         </section>
         <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
+          <Link href="/blog/" className={utilStyles.sectionLink}>
+            <h3>…projects into <em>posts</em></h3>
+          </Link>
+          <p className="description">
+            Write-ups and lab notes on <Link href="/blog/" className={utilStyles.inlineLink}>the blog</Link>.
+          </p>
+          <hr />
+          <h6 className={utilStyles.headingLg}>Most recent posts</h6>
+          <ul className="grid gap-3 list-none p-0">
+            {posts.map(({ slug, title, date, description }) => (
+              <li key={slug}>
+                <TeaserCard
+                  href={`/blog/${slug}`}
+                  title={title}
+                  meta={<Date dateString={date} />}
+                  description={description}
+                />
+              </li>
+            ))}
+          </ul>
+        </section>
+        <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
           <Link href="/talks/" className={utilStyles.sectionLink}>
             <h3>…ideas into <em>talks</em></h3>
           </Link>
@@ -161,16 +206,14 @@ export default function Home() {
           </p>
           <hr />
           <h6 className={utilStyles.headingLg}>Most recent talks</h6>
-          <ul className={utilStyles.list}>
+          <ul className="grid gap-3 list-none p-0">
             {talks.map(({ id, title, description }) => (
-              <li className={utilStyles.listItem} key={id}>
-                <Link href={`/talks#${id}`} className={utilStyles.listItemLink}>
-                  <span>{title}</span>
-                </Link>
-                {description && (
-                  <small className={utilStyles.lightText}>{description}</small>
-                )}
-                <br />
+              <li key={id}>
+                <TeaserCard
+                  href={`/talks#${id}`}
+                  title={title}
+                  description={description}
+                />
               </li>
             ))}
           </ul>