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

tests/final-verification.test.mjs

@@ -231,10 +231,15 @@ describe('Responsive behavior', () => {
       'Title should use smaller type scale at breakpoints');
   });
 
-  test('code blocks respect gutters on mobile', () => {
+  test('code blocks respect gutters via three-width layout system', () => {
     const prose = readFileSync('src/styles/prose.css', 'utf-8');
-    assert.ok(prose.includes('100vw') && prose.includes('--gutter'),
-      'Code blocks should constrain to viewport minus gutters');
+    const layout = readFileSync('src/layouts/BaseLayout.astro', 'utf-8');
+    // Code blocks self-constrain via max-width in the breakout pattern
+    assert.ok(prose.includes('--width-code'),
+      'Code blocks should use --width-code for wide breakout');
+    // Gutters are provided by main element padding
+    assert.ok(layout.includes('--gutter'),
+      'Main element should provide gutter padding for responsive safety');
   });
 });