style: unify typography — use heading-xl/lg/md utilities in all pages

app/page.tsx

@@ -9,7 +9,7 @@ export default async function HomePage() {
     <Template>
     <main className="max-w-4xl mx-auto px-6 py-16">
       <header className="mb-20 text-center">
-        <h1 className="font-sans text-5xl font-extrabold tracking-tight text-ink mb-4">
+        <h1 className="heading-xl text-ink mb-4">
           blog
         </h1>
         <p className="text-ink-soft text-lg">

app/posts/[slug]/page.tsx

@@ -44,7 +44,7 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
           <article>
             <header className="mb-12">
               <time className="font-mono text-sm text-ink-soft">{post.date}</time>
-              <h1 className="font-sans text-4xl font-extrabold tracking-tight lg:text-5xl mt-3 mb-2 text-ink">
+              <h1 className="heading-xl text-ink mt-3 mb-2">
                 {post.title}
               </h1>
               <p className="font-mono text-xs text-ink-soft">

app/posts/page.tsx

@@ -10,7 +10,7 @@ export default async function PostsPage() {
   return (
     <Template>
     <main className="max-w-4xl mx-auto px-6 py-16">
-      <h1 className="font-sans text-4xl font-extrabold tracking-tight lg:text-5xl mt-0 mb-12 text-ink">
+      <h1 className="heading-xl text-ink mt-0 mb-12">
         Posts
       </h1>
       <div className="space-y-12">

components/blog/PostCard.tsx

@@ -19,7 +19,7 @@ export function PostCard({ slug, title, date, excerpt, index = 0 }: PostCardProp
     >
       <Link href={`/posts/${slug}/`} className="block">
         <time className="font-mono text-sm text-ink-soft">{date}</time>
-        <h3 className="font-sans text-2xl font-semibold tracking-tight text-ink mt-1 mb-2 hover:text-accent transition-colors">
+        <h3 className="heading-md text-ink mt-1 mb-2 hover:text-accent transition-colors">
           {title}
         </h3>
         {excerpt && (