style: widen article reading layout

app/globals.css

@@ -199,6 +199,10 @@
   color: var(--color-ink);
 }
 
+.article-prose :where(p, ul, ol, blockquote, details, .callout, [data-callout]) {
+  max-width: 72ch;
+}
+
 .prose :where(a) {
   color: var(--color-accent);
   text-decoration-thickness: 1px;
@@ -266,6 +270,10 @@
   margin: 2.5rem 0 1rem;
 }
 
+.article-prose :where(p:has(> img:only-child)) {
+  max-width: none;
+}
+
 .prose :where(p:has(> img:only-child) + em),
 .prose :where(p:has(> img:only-child) + strong) {
   display: block;

app/posts/[slug]/page.tsx

@@ -35,8 +35,8 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
     <>
       <ScrollToTop />
       <ReadingProgress />
-      <div className="max-w-4xl mx-auto px-6 py-16">
+      <div className="mx-auto max-w-6xl px-6 py-16">
-        <div className="grid grid-cols-1 lg:grid-cols-[1fr_200px] gap-8">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_220px] lg:gap-12">
           <article className="min-w-0">
             <header className="mb-12">
               <time className="font-mono text-sm text-ink-soft" dateTime={post.date}>{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
@@ -67,7 +67,7 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
                 </div>
               )}
             </header>
-            <div className="prose prose-lg max-w-none min-w-0">
+            <div className="prose prose-lg article-prose max-w-none min-w-0">
               <PostContent />
             </div>
           </article>