diff --git a/app/globals.css b/app/globals.css
index 6eea0cd..fd9e750 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -175,6 +175,148 @@
   padding: 2rem;
 }
 
+/* === Local prose styles (Tailwind Typography plugin is not installed) === */
+.prose {
+  color: var(--color-ink);
+  font-size: 1rem;
+  line-height: 1.75;
+  overflow-wrap: break-word;
+}
+
+.prose :where(h1, h2, h3, h4, h5, h6) {
+  color: var(--color-ink);
+  scroll-margin-top: 96px;
+}
+
+.prose :where(h1) { margin: 2.75rem 0 1rem; }
+.prose :where(h2) { margin: 3rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); }
+.prose :where(h3) { margin: 2.25rem 0 0.75rem; }
+.prose :where(h4, h5, h6) { margin: 1.75rem 0 0.5rem; }
+.prose :where(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
+
+.prose :where(p) {
+  margin: 1.25rem 0;
+  color: var(--color-ink);
+}
+
+.prose :where(a) {
+  color: var(--color-accent);
+  text-decoration-thickness: 1px;
+}
+
+.prose :where(ul, ol) {
+  margin: 1.5rem 0;
+  padding-left: 1.5rem;
+}
+
+.prose :where(li) { margin: 0.45rem 0; padding-left: 0.2rem; }
+.prose :where(li)::marker { color: var(--color-accent); }
+.prose :where(li > p) { margin: 0.5rem 0; }
+
+.prose :where(blockquote) {
+  margin: 2rem 0;
+  border-left: 4px solid color-mix(in oklch, var(--color-accent) 45%, var(--color-border));
+  border-radius: 0 1rem 1rem 0;
+  background: color-mix(in oklch, var(--color-surface) 70%, transparent);
+  padding: 0.75rem 1rem 0.75rem 1.25rem;
+  color: var(--color-ink-soft);
+}
+
+.prose :where(blockquote p) { margin: 0.5rem 0; }
+
+.prose :where(.callout, [data-callout]) {
+  margin: 2rem 0;
+  border: 1px solid color-mix(in oklch, var(--color-accent) 28%, var(--color-border));
+  border-radius: 1rem;
+  background: color-mix(in oklch, var(--color-accent) 8%, var(--color-surface));
+  padding: 1rem;
+}
+
+.prose :where(details) {
+  margin: 2rem 0;
+  border: 1px solid var(--color-border);
+  border-radius: 1rem;
+  background: color-mix(in oklch, var(--color-surface) 82%, var(--color-canvas));
+  padding: 1rem 1.125rem;
+}
+
+.prose :where(summary) {
+  cursor: pointer;
+  color: var(--color-ink);
+  font-weight: 700;
+}
+
+.prose :where(details[open] summary) { margin-bottom: 0.75rem; }
+.prose :where(details > :last-child) { margin-bottom: 0; }
+
+.prose :where(figure) { margin: 2.5rem 0; }
+
+.prose :where(img) {
+  display: block;
+  max-width: min(100%, 56rem);
+  height: auto;
+  margin: 2rem auto;
+  border: 1px solid var(--color-border);
+  border-radius: 1rem;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-card);
+}
+
+.prose :where(p:has(> img:only-child)) {
+  margin: 2.5rem 0 1rem;
+}
+
+.prose :where(p:has(> img:only-child) + em),
+.prose :where(p:has(> img:only-child) + strong) {
+  display: block;
+  margin-top: -0.5rem;
+  text-align: center;
+  color: var(--color-ink-soft);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.prose :where(figcaption) {
+  margin-top: 0.75rem;
+  color: var(--color-ink-soft);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.prose :where(table) {
+  width: 100%;
+  min-width: 40rem;
+  border-collapse: collapse;
+  color: var(--color-ink);
+}
+
+.prose :where(th, td) {
+  border: 1px solid var(--color-border);
+  padding: 0.75rem 0.875rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+.prose :where(th) {
+  background: var(--color-surface);
+  color: var(--color-ink);
+  font-weight: 700;
+}
+
+.prose :where(tbody tr:nth-child(even)) {
+  background: color-mix(in oklch, var(--color-surface) 55%, transparent);
+}
+
+.prose :where(pre) {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.prose :where(:not(pre) > code) {
+  color: var(--color-ink);
+}
+
 /* === Code Blocks: Borderless, VS Code Style, Line Numbers === */
 [data-rehype-pretty-code-figure] {
   @apply relative overflow-hidden rounded-[var(--radius-code)];
@@ -325,23 +467,24 @@ html.dark code[data-theme*=" "] span {
   font-size: 1.1em !important;
 }
 .katex-display {
-  overflow: visible;
+  overflow-x: auto;
+  overflow-y: hidden;
   max-width: 100%;
-  margin: 1.5em 0;
+  margin: 1.75em 0;
+  padding: 0.25rem 0 0.6rem;
   text-align: center;
+  -webkit-overflow-scrolling: touch;
 }
 .katex-display > .katex {
-  display: block;
+  display: inline-block;
+  min-width: max-content;
   text-align: center;
-  white-space: normal;
+  white-space: nowrap;
 }
 @media (max-width: 640px) {
-  .katex-display > .katex {
-    transform: scale(0.85);
-    transform-origin: center top;
-  }
   .katex-display {
-    margin: 0.8em 0;
+    margin: 1.25em 0;
+    text-align: left;
   }
 }
 .prose p + .katex-display { margin-top: 0.5em; }
diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 281b9f1..b369273 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -37,7 +37,7 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
       <ReadingProgress />
       <div className="max-w-4xl mx-auto px-6 py-16">
         <div className="grid grid-cols-1 lg:grid-cols-[1fr_200px] gap-8">
-          <article>
+          <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>
               <h1 className="heading-xl text-ink mt-3 mb-2">
@@ -50,9 +50,11 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
               {post.coverImage && (
                 <img
                   src={post.coverImage}
-                  alt={`Cover image for ${post.title}`}
-                  className="w-full h-64 object-cover rounded-xl my-6"
-                  loading="lazy"
+                  alt={`Featured image for article: ${post.title}`}
+                  className="my-8 aspect-[16/9] w-full rounded-2xl border border-border bg-surface object-cover shadow-card"
+                  loading="eager"
+                  decoding="async"
+                  fetchPriority="high"
                 />
               )}
               {post.tags.length > 0 && (
@@ -65,7 +67,7 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
                 </div>
               )}
             </header>
-            <div className="prose prose-lg max-w-none">
+            <div className="prose prose-lg max-w-none min-w-0">
               <PostContent />
             </div>
           </article>
diff --git a/mdx-components.tsx b/mdx-components.tsx
index 64fbb34..d23fbfe 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -30,12 +30,12 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
       <h6 className="text-sm font-medium uppercase tracking-wider text-ink-soft mt-6 mb-2" {...props}>{children}</h6>
     ),
     p: ({ children }) => (
-      <p className="leading-7 [&:not(:first-child)]:mt-6 text-ink">
+      <p className="text-ink leading-7 [&:not(:first-child)]:mt-6">
         {children}
       </p>
     ),
     blockquote: ({ children }) => (
-      <blockquote className="border-l-4 border-border pl-4 italic text-ink-soft my-6">
+      <blockquote className="my-6 border-l-4 border-accent/40 bg-surface/60 py-1 pl-5 pr-4 italic text-ink-soft">
         {children}
       </blockquote>
     ),
@@ -75,11 +75,18 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
       </pre>
     ),
     img: ({ src, alt, ...rest }) => (
-      <img src={src} alt={alt} className="my-8 rounded-xl w-full" {...rest} />
+      <img
+        src={src}
+        alt={alt ?? ''}
+        className="mx-auto my-8 h-auto max-h-[80vh] w-auto max-w-full rounded-2xl border border-border bg-surface object-contain shadow-card"
+        loading="lazy"
+        decoding="async"
+        {...rest}
+      />
     ),
     table: ({ children }) => (
-      <div className="my-6 overflow-x-auto">
-        <table className="w-full border-collapse text-sm">
+      <div className="my-8 overflow-x-auto rounded-xl border border-border bg-canvas">
+        <table className="w-full min-w-[40rem] border-collapse text-sm">
           {children}
         </table>
       </div>
@@ -91,8 +98,8 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     li: (props) => <li className="leading-7" {...props} />,
 
     // Figures and captions
-    figure: (props) => <figure className="my-8" {...props} />,
-    figcaption: (props) => <figcaption className="text-center text-sm text-ink-soft mt-2" {...props} />,
+    figure: (props) => <figure className="my-10" {...props} />,
+    figcaption: (props) => <figcaption className="mx-auto mt-3 max-w-2xl text-center text-sm leading-6 text-ink-soft" {...props} />,
 
     // Subscripts and superscripts
     sup: (props) => <sup className="text-xs" {...props} />,
@@ -104,7 +111,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     ),
 
     // Collapsible sections
-    details: (props) => <details className="my-4 rounded-lg border border-border p-4" {...props} />,
-    summary: (props) => <summary className="cursor-pointer font-semibold" {...props} />,
+    details: (props) => <details className="my-6 rounded-xl border border-border bg-surface/70 p-4 shadow-card" {...props} />,
+    summary: (props) => <summary className="cursor-pointer font-semibold text-ink" {...props} />,
   }
 }