feat: implement three-width layout system (reading, wide, full-bleed)

Replace the narrow 720px column layout with a three-width breakout system:

- Reading width (--width-prose, 720px): prose paragraphs, lists, blockquotes
- Wide width (--width-code, 840px): code blocks, inline SVGs, figures, .wide/.breakout
- Full width (--width-container, 1100px): hero diagrams, .full elements

The outer container is wide; individual content blocks self-constrain via
max-width + margin: auto. This creates the narrow-wide-narrow rhythm.

Changes:
- prose.css: Add .prose > * breakout pattern for three widths, SVG styling
- BaseLayout.astro: Remove max-width from main (children handle their own widths)
- [...slug].astro: Remove --width-prose constraint from .prose-wrapper
- prose.css: Remove old left:50%/translateX(-50%) code block hack

src/layouts/BaseLayout.astro

@@ -87,9 +87,6 @@ const base = import.meta.env.BASE_URL;
   }
 
   main {
-    max-width: var(--width-container);
-    margin-left: auto;
-    margin-right: auto;
     padding-left: var(--gutter);
     padding-right: var(--gutter);
   }

src/pages/posts/[...slug].astro

@@ -41,7 +41,6 @@ const readingTime = post.body ? getReadingTime(post.body) : undefined;
 
 <style>
   .prose-wrapper {
-    max-width: var(--width-prose);
     margin-left: auto;
     margin-right: auto;
     padding-bottom: var(--space-12);

src/styles/prose.css

@@ -1,5 +1,34 @@
 /* Prose — typographic treatment for rendered markdown */
 
+/* --- Three-width layout system --- */
+/* Default: all direct children constrained to reading width */
+
+.prose > * {
+  max-width: var(--width-prose);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Wide: code blocks, SVGs, figures, and .wide/.breakout elements */
+
+.prose > pre,
+.prose > svg,
+.prose > figure,
+.prose > .wide,
+.prose > .breakout {
+  max-width: var(--width-code);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Full-bleed: hero diagrams, comparison layouts */
+
+.prose > .full {
+  max-width: var(--width-container);
+  margin-left: auto;
+  margin-right: auto;
+}
+
 /* --- Headings (Structure voice: Inter) --- */
 
 .prose h2 {
@@ -107,14 +136,9 @@
   color: inherit;
 }
 
-/* --- Code blocks (breakout width) --- */
+/* --- Code blocks (wide breakout via three-width system) --- */
 
 .prose pre {
-  position: relative;
-  left: 50%;
-  transform: translateX(-50%);
-  width: min(var(--width-code), calc(100vw - var(--gutter) * 2));
-  max-width: var(--width-code);
   border: 1px solid var(--border-subtle);
   border-left: 3px solid var(--accent-primary);
   border-radius: var(--rounded-md);
@@ -152,6 +176,16 @@
   outline-offset: 2px;
 }
 
+/* --- Inline SVG diagrams --- */
+
+.prose svg {
+  width: 100%;
+  height: auto;
+  border-radius: var(--rounded-md);
+  margin-top: var(--space-5);
+  margin-bottom: var(--space-5);
+}
+
 /* --- Horizontal rules --- */
 
 .prose hr {
@@ -203,4 +237,4 @@
 .prose td {
   padding: var(--space-1) var(--space-2);
   border-bottom: 1px solid var(--border-subtle);
-}
+}