fix: remove blank lines inside SVGs that broke markdown rendering

Markdown treats blank lines as paragraph separators, which splits
inline SVGs apart mid-element. The text and rect elements after
the first blank line leaked out as raw HTML instead of rendering
as part of the diagram.

Fixed in:
- two-phase-fingerprinting (ABI Early-Cutoff diagram - 34 blank lines removed)
- typescript-7 (Parallelism Stack + tsgo comparison - 19 blank lines removed)

Also: replaced clipart SVG hero with generated concept art image,
fixed hero illustration CSS for img element.

🤖 Generated with Amplifier

Co-Authored-By: Amplifier <240397093+microsoft-amplifier@users.noreply.github.com>

src/content/posts/two-phase-fingerprinting-buildxls-deep-magic.md

@@ -140,59 +140,46 @@ Step by step:
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 520" role="img" aria-label="Diagram: The Two-Phase Lookup Flow showing WF computation, pathset lookup, SF computation, and hit-or-miss branching">
   <rect width="840" height="520" fill="#F5F0E8" rx="4"/>
   <text x="420" y="32" text-anchor="middle" font-family="Georgia, serif" font-size="16" font-weight="bold" fill="#2B2421">The Two-Phase Lookup Flow</text>
-
   <rect x="290" y="52" width="260" height="48" rx="4" fill="#fff" stroke="#2B2421" stroke-width="1.5"/>
   <text x="420" y="72" text-anchor="middle" font-family="monospace" font-size="12" fill="#2B2421">1. Compute Weak Fingerprint</text>
   <text x="420" y="88" text-anchor="middle" font-family="Georgia, serif" font-size="10" fill="#A0522D">command + tool + globs + env + ABI</text>
   <line x1="420" y1="100" x2="420" y2="122" stroke="#2B2421" stroke-width="1.5" marker-end="url(#tfArrow)"/>
-
   <rect x="260" y="122" width="320" height="48" rx="4" fill="#fff" stroke="#2B2421" stroke-width="1.5"/>
   <text x="420" y="142" text-anchor="middle" font-family="monospace" font-size="12" fill="#2B2421">2. Look up WF in pathset_store</text>
   <text x="420" y="158" text-anchor="middle" font-family="Georgia, serif" font-size="10" fill="#A0522D">WF -> [Pathset_A, Pathset_B, ...]</text>
-
   <line x1="420" y1="170" x2="420" y2="192" stroke="#2B2421" stroke-width="1.5"/>
   <line x1="420" y1="192" x2="180" y2="192" stroke="#2B2421" stroke-width="1"/>
   <line x1="420" y1="192" x2="580" y2="192" stroke="#2B2421" stroke-width="1"/>
   <line x1="180" y1="192" x2="180" y2="212" stroke="#2B2421" stroke-width="1" marker-end="url(#tfArrow)"/>
   <line x1="580" y1="192" x2="580" y2="212" stroke="#2B2421" stroke-width="1" marker-end="url(#tfArrow)"/>
-
   <rect x="100" y="212" width="160" height="36" rx="4" fill="none" stroke="#A0522D" stroke-width="1.5"/>
   <text x="180" y="234" text-anchor="middle" font-family="Georgia, serif" font-size="12" fill="#A0522D">No pathsets (cold)</text>
-
   <rect x="480" y="212" width="200" height="36" rx="4" fill="none" stroke="#2B2421" stroke-width="1.5"/>
   <text x="580" y="234" text-anchor="middle" font-family="Georgia, serif" font-size="12" fill="#2B2421">Candidate pathsets found</text>
-
   <line x1="580" y1="248" x2="580" y2="270" stroke="#2B2421" stroke-width="1.5" marker-end="url(#tfArrow)"/>
   <rect x="400" y="270" width="360" height="56" rx="4" fill="#fff" stroke="#2B2421" stroke-width="1.5"/>
   <text x="580" y="290" text-anchor="middle" font-family="monospace" font-size="12" fill="#2B2421">3. For each candidate Pathset:</text>
   <text x="580" y="308" text-anchor="middle" font-family="monospace" font-size="11" fill="#2B2421">SF = blake3(WF + content_hashes(reads))</text>
-
   <line x1="580" y1="326" x2="580" y2="348" stroke="#2B2421" stroke-width="1.5" marker-end="url(#tfArrow)"/>
   <rect x="430" y="348" width="300" height="40" rx="4" fill="#fff" stroke="#2B2421" stroke-width="1.5"/>
   <text x="580" y="372" text-anchor="middle" font-family="monospace" font-size="12" fill="#2B2421">4. Look up SF in output_store</text>
-
   <line x1="580" y1="388" x2="580" y2="408" stroke="#2B2421" stroke-width="1.5"/>
   <line x1="580" y1="408" x2="460" y2="408" stroke="#2B2421" stroke-width="1"/>
   <line x1="580" y1="408" x2="700" y2="408" stroke="#2B2421" stroke-width="1"/>
   <line x1="460" y1="408" x2="460" y2="428" stroke="#2B2421" stroke-width="1" marker-end="url(#tfArrow)"/>
   <line x1="700" y1="408" x2="700" y2="428" stroke="#2B2421" stroke-width="1" marker-end="url(#tfArrow)"/>
-
   <rect x="630" y="428" width="140" height="40" rx="4" fill="#2B2421" stroke="none"/>
   <text x="700" y="448" text-anchor="middle" font-family="Georgia, serif" font-size="13" font-weight="bold" fill="#F5F0E8">CACHE HIT</text>
   <text x="700" y="462" text-anchor="middle" font-family="Georgia, serif" font-size="10" fill="#F5F0E8">replay outputs</text>
-
   <rect x="380" y="428" width="160" height="40" rx="4" fill="none" stroke="#A0522D" stroke-width="1.5"/>
   <text x="460" y="448" text-anchor="middle" font-family="Georgia, serif" font-size="12" fill="#A0522D">No match: try</text>
   <text x="460" y="462" text-anchor="middle" font-family="Georgia, serif" font-size="12" fill="#A0522D">next candidate</text>
-
   <line x1="180" y1="248" x2="180" y2="480" stroke="#A0522D" stroke-width="1" stroke-dasharray="5,3"/>
   <line x1="460" y1="468" x2="460" y2="480" stroke="#A0522D" stroke-width="1" stroke-dasharray="5,3"/>
   <line x1="180" y1="480" x2="460" y2="480" stroke="#A0522D" stroke-width="1" stroke-dasharray="5,3"/>
   <line x1="320" y1="480" x2="320" y2="492" stroke="#A0522D" stroke-width="1.5" marker-end="url(#tfArrowR)"/>
-
   <rect x="140" y="492" width="360" height="24" rx="4" fill="#A0522D" stroke="none"/>
   <text x="320" y="509" text-anchor="middle" font-family="Georgia, serif" font-size="12" font-weight="bold" fill="#F5F0E8">5. MISS: run task in sandbox, store new pathset + SF</text>
-
   <defs>
     <marker id="tfArrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
       <polygon points="0 0, 8 3, 0 6" fill="#2B2421"/>
@@ -253,78 +240,57 @@ Without ABI fingerprints, every change to `utils` invalidates every dependent. W
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 440" role="img" aria-label="Diagram: ABI Early-Cutoff showing how a comment change in utils does not cascade to downstream packages">
   <rect width="840" height="440" fill="#F5F0E8" rx="4"/>
   <text x="420" y="32" text-anchor="middle" font-family="Georgia, serif" font-size="16" font-weight="bold" fill="#2B2421">ABI Early-Cutoff</text>
-
   <text x="210" y="64" text-anchor="middle" font-family="Georgia, serif" font-size="13" font-weight="bold" fill="#A0522D">Without ABI fingerprint</text>
-
   <rect x="110" y="82" width="200" height="56" rx="4" fill="#A0522D" stroke="none"/>
   <text x="210" y="104" text-anchor="middle" font-family="monospace" font-size="11" font-weight="bold" fill="#F5F0E8">utils#build</text>
   <text x="210" y="120" text-anchor="middle" font-family="Georgia, serif" font-size="10" fill="#F5F0E8">comment changed -> REBUILD</text>
-
   <line x1="160" y1="138" x2="130" y2="162" stroke="#A0522D" stroke-width="1.5" marker-end="url(#abiArrowR)"/>
   <line x1="210" y1="138" x2="210" y2="162" stroke="#A0522D" stroke-width="1.5" marker-end="url(#abiArrowR)"/>
   <line x1="260" y1="138" x2="290" y2="162" stroke="#A0522D" stroke-width="1.5" marker-end="url(#abiArrowR)"/>
-
   <rect x="60" y="164" width="140" height="40" rx="4" fill="#A0522D" stroke="none"/>
   <text x="130" y="184" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#F5F0E8">api#build</text>
   <text x="130" y="196" text-anchor="middle" font-family="Georgia, serif" font-size="9" fill="#F5F0E8">REBUILD</text>
-
   <rect x="220" y="164" width="140" height="40" rx="4" fill="#A0522D" stroke="none"/>
   <text x="290" y="184" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#F5F0E8">web#build</text>
   <text x="290" y="196" text-anchor="middle" font-family="Georgia, serif" font-size="9" fill="#F5F0E8">REBUILD</text>
-
   <line x1="130" y1="204" x2="130" y2="224" stroke="#A0522D" stroke-width="1.5" marker-end="url(#abiArrowR)"/>
   <line x1="290" y1="204" x2="290" y2="224" stroke="#A0522D" stroke-width="1.5" marker-end="url(#abiArrowR)"/>
-
   <rect x="60" y="226" width="140" height="40" rx="4" fill="#A0522D" stroke="none"/>
   <text x="130" y="246" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#F5F0E8">api#test</text>
   <text x="130" y="258" text-anchor="middle" font-family="Georgia, serif" font-size="9" fill="#F5F0E8">REBUILD</text>
-
   <rect x="220" y="226" width="140" height="40" rx="4" fill="#A0522D" stroke="none"/>
   <text x="290" y="246" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#F5F0E8">web#test</text>
   <text x="290" y="258" text-anchor="middle" font-family="Georgia, serif" font-size="9" fill="#F5F0E8">REBUILD</text>
-
   <text x="210" y="296" text-anchor="middle" font-family="Georgia, serif" font-size="12" font-weight="bold" fill="#A0522D">5 tasks rebuilt</text>
-
   <line x1="420" y1="56" x2="420" y2="320" stroke="#2B2421" stroke-width="1" stroke-dasharray="4,4"/>
-
   <text x="630" y="64" text-anchor="middle" font-family="Georgia, serif" font-size="13" font-weight="bold" fill="#2B2421">With ABI fingerprint</text>
-
   <rect x="530" y="82" width="200" height="56" rx="4" fill="#A0522D" stroke="none"/>
   <text x="630" y="104" text-anchor="middle" font-family="monospace" font-size="11" font-weight="bold" fill="#F5F0E8">utils#build</text>
   <text x="630" y="120" text-anchor="middle" font-family="Georgia, serif" font-size="10" fill="#F5F0E8">comment changed -> REBUILD</text>
-
   <line x1="630" y1="138" x2="630" y2="158" stroke="#2B2421" stroke-width="1.5" marker-end="url(#abiArrow)"/>
   <rect x="540" y="158" width="180" height="36" rx="4" fill="#fff" stroke="#2B2421" stroke-width="1.5"/>
   <text x="630" y="175" text-anchor="middle" font-family="monospace" font-size="10" fill="#2B2421">.d.ts unchanged</text>
   <text x="630" y="188" text-anchor="middle" font-family="Georgia, serif" font-size="10" fill="#2B2421">ABI hash: same</text>
-
   <line x1="580" y1="194" x2="550" y2="216" stroke="#2B2421" stroke-width="1" stroke-dasharray="4,3"/>
   <line x1="630" y1="194" x2="630" y2="216" stroke="#2B2421" stroke-width="1" stroke-dasharray="4,3"/>
   <line x1="680" y1="194" x2="710" y2="216" stroke="#2B2421" stroke-width="1" stroke-dasharray="4,3"/>
-
   <rect x="480" y="218" width="140" height="40" rx="4" fill="#2B2421" stroke="none"/>
   <text x="550" y="238" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#F5F0E8">api#build</text>
   <text x="550" y="250" text-anchor="middle" font-family="Georgia, serif" font-size="9" fill="#F5F0E8">CACHE HIT</text>
-
   <rect x="640" y="218" width="140" height="40" rx="4" fill="#2B2421" stroke="none"/>
   <text x="710" y="238" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#F5F0E8">web#build</text>
   <text x="710" y="250" text-anchor="middle" font-family="Georgia, serif" font-size="9" fill="#F5F0E8">CACHE HIT</text>
-
   <rect x="480" y="270" width="140" height="40" rx="4" fill="#2B2421" stroke="none"/>
   <text x="550" y="290" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#F5F0E8">api#test</text>
   <text x="550" y="302" text-anchor="middle" font-family="Georgia, serif" font-size="9" fill="#F5F0E8">CACHE HIT</text>
-
   <rect x="640" y="270" width="140" height="40" rx="4" fill="#2B2421" stroke="none"/>
   <text x="710" y="290" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#F5F0E8">web#test</text>
   <text x="710" y="302" text-anchor="middle" font-family="Georgia, serif" font-size="9" fill="#F5F0E8">CACHE HIT</text>
-
   <text x="630" y="336" text-anchor="middle" font-family="Georgia, serif" font-size="12" font-weight="bold" fill="#2B2421">1 task rebuilt, 4 cache hits</text>
-
   <line x1="60" y1="360" x2="780" y2="360" stroke="#2B2421" stroke-width="0.5"/>
   <text x="420" y="388" text-anchor="middle" font-family="Georgia, serif" font-size="13" fill="#2B2421">The .d.ts file is the ABI surface of a TypeScript package.</text>
   <text x="420" y="408" text-anchor="middle" font-family="Georgia, serif" font-size="13" fill="#2B2421">If it didn't change, downstream WF inputs are unchanged.</text>
   <text x="420" y="428" text-anchor="middle" font-family="Georgia, serif" font-size="13" fill="#A0522D">The cascade stops at the boundary where the public surface is stable.</text>
-
   <defs>
     <marker id="abiArrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
       <polygon points="0 0, 8 3, 0 6" fill="#2B2421"/>

src/content/posts/typescript-7-makes-the-build-harness-more-important.md

@@ -46,7 +46,6 @@ Parallelism compounds across three levels. Each multiplies.
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 420" role="img" aria-label="Diagram: The Parallelism Stack showing three compounding levels of parallelism: per-file, per-package, and per-machine">
   <rect width="840" height="420" fill="#F5F0E8" rx="4"/>
   <text x="420" y="32" text-anchor="middle" font-family="Inter, sans-serif" font-size="15" font-weight="600" fill="#2B2421" letter-spacing="0.03em">THE PARALLELISM STACK</text>
-
   <rect x="60" y="56" width="480" height="80" rx="4" fill="#fff" stroke="#2B2421" stroke-width="1.5"/>
   <text x="80" y="80" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#2B2421" letter-spacing="0.04em">LEVEL 1: PER-FILE</text>
   <text x="80" y="100" font-family="Source Serif 4, Georgia, serif" font-size="13" fill="#6B5F55">tsgo + isolatedModules. Each file checked independently.</text>
@@ -55,7 +54,6 @@ Parallelism compounds across three levels. Each multiplies.
   <text x="610" y="98" text-anchor="middle" font-family="Inter, sans-serif" font-size="18" font-weight="700" fill="#F5F0E8">10x</text>
   <text x="610" y="112" text-anchor="middle" font-family="Inter, sans-serif" font-size="10" fill="#F5F0E8">tsgo provides</text>
   <text x="690" y="100" font-family="Inter, sans-serif" font-size="24" fill="#2B2421" font-weight="300">&times;</text>
-
   <rect x="60" y="156" width="480" height="80" rx="4" fill="#fff" stroke="#2B2421" stroke-width="1.5"/>
   <text x="80" y="180" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#2B2421" letter-spacing="0.04em">LEVEL 2: PER-PACKAGE</text>
   <text x="80" y="200" font-family="Source Serif 4, Georgia, serif" font-size="13" fill="#6B5F55">DAG ordering. Independent branches run in parallel.</text>
@@ -64,7 +62,6 @@ Parallelism compounds across three levels. Each multiplies.
   <text x="610" y="198" text-anchor="middle" font-family="Inter, sans-serif" font-size="18" font-weight="700" fill="#F5F0E8">Nx</text>
   <text x="610" y="212" text-anchor="middle" font-family="Inter, sans-serif" font-size="10" fill="#F5F0E8">harness provides</text>
   <text x="690" y="200" font-family="Inter, sans-serif" font-size="24" fill="#2B2421" font-weight="300">&times;</text>
-
   <rect x="60" y="256" width="480" height="80" rx="4" fill="#fff" stroke="#2B2421" stroke-width="1.5"/>
   <text x="80" y="280" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#2B2421" letter-spacing="0.04em">LEVEL 3: PER-MACHINE</text>
   <text x="80" y="300" font-family="Source Serif 4, Georgia, serif" font-size="13" fill="#6B5F55">Distributed execution. DAG shards across build workers.</text>
@@ -72,11 +69,9 @@ Parallelism compounds across three levels. Each multiplies.
   <rect x="560" y="272" width="100" height="48" rx="4" fill="#6B5F55"/>
   <text x="610" y="298" text-anchor="middle" font-family="Inter, sans-serif" font-size="18" font-weight="700" fill="#F5F0E8">Mx</text>
   <text x="610" y="312" text-anchor="middle" font-family="Inter, sans-serif" font-size="10" fill="#F5F0E8">harness provides</text>
-
   <line x1="60" y1="360" x2="780" y2="360" stroke="#DDD7CD" stroke-width="1"/>
   <rect x="200" y="372" width="440" height="36" rx="4" fill="#2B2421"/>
   <text x="420" y="396" text-anchor="middle" font-family="Inter, sans-serif" font-size="14" font-weight="600" fill="#F5F0E8">Total speedup = 10x &times; Nx &times; Mx</text>
-
   <line x1="730" y1="72" x2="730" y2="120" stroke="#A0522D" stroke-width="1.5"/>
   <text x="755" y="100" font-family="Inter, sans-serif" font-size="10" fill="#A0522D">tsgo</text>
   <line x1="730" y1="172" x2="730" y2="320" stroke="#6B5F55" stroke-width="1.5"/>
@@ -115,49 +110,35 @@ tsgo handles type checking on a single machine. That is one piece. Here is the r
 <div class="breakout">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 380" role="img" aria-label="Diagram: What tsgo solves vs what it doesn't. tsgo handles single-machine type checking. The harness handles cross-package ordering, distribution, caching, scoping, enforcement, and orchestration.">
   <rect width="840" height="380" fill="#F5F0E8" rx="4"/>
-
   <text x="210" y="32" text-anchor="middle" font-family="Inter, sans-serif" font-size="14" font-weight="600" fill="#2B2421" letter-spacing="0.04em">WHAT tsgo SOLVES</text>
   <rect x="40" y="48" width="340" height="310" rx="4" fill="none" stroke="#DDD7CD" stroke-width="1"/>
-
   <rect x="60" y="68" width="300" height="44" rx="3" fill="#fff" stroke="#2B2421" stroke-width="1"/>
   <text x="210" y="88" text-anchor="middle" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#2B2421">Single-machine type checking</text>
   <text x="210" y="104" text-anchor="middle" font-family="monospace" font-size="10" fill="#6B5F55">10.8x faster overall</text>
-
   <rect x="60" y="124" width="300" height="44" rx="3" fill="#fff" stroke="#2B2421" stroke-width="1"/>
   <text x="210" y="144" text-anchor="middle" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#2B2421">Per-file parallelism</text>
   <text x="210" y="160" text-anchor="middle" font-family="monospace" font-size="10" fill="#6B5F55">goroutines + shared memory</text>
-
   <rect x="60" y="180" width="300" height="44" rx="3" fill="#fff" stroke="#2B2421" stroke-width="1"/>
   <text x="210" y="200" text-anchor="middle" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#2B2421">Memory efficiency</text>
   <text x="210" y="216" text-anchor="middle" font-family="monospace" font-size="10" fill="#6B5F55">2.9x less memory</text>
-
   <rect x="60" y="236" width="300" height="44" rx="3" fill="#fff" stroke="#2B2421" stroke-width="1"/>
   <text x="210" y="256" text-anchor="middle" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#2B2421">Editor/LSP speed</text>
   <text x="210" y="272" text-anchor="middle" font-family="monospace" font-size="10" fill="#6B5F55">9.6s → 1.2s startup</text>
-
   <text x="210" y="326" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="13" font-style="italic" fill="#948880">Solved. Genuinely.</text>
-
   <text x="630" y="32" text-anchor="middle" font-family="Inter, sans-serif" font-size="14" font-weight="600" fill="#2B2421" letter-spacing="0.04em">WHAT THE HARNESS SOLVES</text>
   <rect x="460" y="48" width="340" height="310" rx="4" fill="none" stroke="#A0522D" stroke-width="1.5"/>
-
   <rect x="480" y="68" width="300" height="36" rx="3" fill="#A0522D" fill-opacity="0.08" stroke="#A0522D" stroke-width="1"/>
   <text x="630" y="92" text-anchor="middle" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#2B2421">Cross-package DAG ordering</text>
-
   <rect x="480" y="114" width="300" height="36" rx="3" fill="#A0522D" fill-opacity="0.08" stroke="#A0522D" stroke-width="1"/>
   <text x="630" y="138" text-anchor="middle" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#2B2421">Distributed execution</text>
-
   <rect x="480" y="160" width="300" height="36" rx="3" fill="#A0522D" fill-opacity="0.08" stroke="#A0522D" stroke-width="1"/>
   <text x="630" y="184" text-anchor="middle" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#2B2421">Remote cache (CI → local dev)</text>
-
   <rect x="480" y="206" width="300" height="36" rx="3" fill="#A0522D" fill-opacity="0.08" stroke="#A0522D" stroke-width="1"/>
   <text x="630" y="230" text-anchor="middle" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#2B2421">Change scoping (skip unaffected)</text>
-
   <rect x="480" y="252" width="300" height="36" rx="3" fill="#A0522D" fill-opacity="0.08" stroke="#A0522D" stroke-width="1"/>
   <text x="630" y="276" text-anchor="middle" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#2B2421">isolatedModules enforcement</text>
-
   <rect x="480" y="298" width="300" height="36" rx="3" fill="#A0522D" fill-opacity="0.08" stroke="#A0522D" stroke-width="1"/>
   <text x="630" y="322" text-anchor="middle" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#2B2421">Bundling + lint orchestration</text>
-
   <text x="630" y="356" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="13" font-style="italic" fill="#A0522D">The bottleneck moved here.</text>
 </svg>
 </div>

src/pages/index.astro

@@ -57,70 +57,7 @@ const rageSeries = [
       <p class="byline">By Ken Chau</p>
     </div>
     <div class="hero-illustration" aria-hidden="true">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Engineering workbench illustration">
+      <img src={`${base}images/hero-concept.png`} alt="Crash Test Dev concept illustration: layered system architecture in warm editorial style" width="1536" height="1024" loading="eager" />
-        <!-- Background -->
-        <rect width="400" height="400" fill="#F5F0E8" rx="6"/>
-
-        <!-- Pegboard grid (subtle dots) -->
-        <g fill="#DDD7CD">
-          <circle cx="60" cy="60" r="2"/><circle cx="100" cy="60" r="2"/><circle cx="140" cy="60" r="2"/><circle cx="180" cy="60" r="2"/><circle cx="220" cy="60" r="2"/><circle cx="260" cy="60" r="2"/><circle cx="300" cy="60" r="2"/><circle cx="340" cy="60" r="2"/>
-          <circle cx="60" cy="100" r="2"/><circle cx="100" cy="100" r="2"/><circle cx="140" cy="100" r="2"/><circle cx="180" cy="100" r="2"/><circle cx="220" cy="100" r="2"/><circle cx="260" cy="100" r="2"/><circle cx="300" cy="100" r="2"/><circle cx="340" cy="100" r="2"/>
-          <circle cx="60" cy="140" r="2"/><circle cx="100" cy="140" r="2"/><circle cx="140" cy="140" r="2"/><circle cx="180" cy="140" r="2"/><circle cx="220" cy="140" r="2"/><circle cx="260" cy="140" r="2"/><circle cx="300" cy="140" r="2"/><circle cx="340" cy="140" r="2"/>
-        </g>
-
-        <!-- Wrench (hanging tool) -->
-        <line x1="100" y1="60" x2="100" y2="90" stroke="#2B2421" stroke-width="2"/>
-        <rect x="88" y="90" width="24" height="8" rx="2" fill="none" stroke="#2B2421" stroke-width="1.5"/>
-        <rect x="92" y="98" width="4" height="32" rx="1" fill="#2B2421"/>
-        <circle cx="94" cy="134" r="8" fill="none" stroke="#2B2421" stroke-width="1.5"/>
-
-        <!-- Caliper (hanging tool) -->
-        <line x1="220" y1="60" x2="220" y2="85" stroke="#2B2421" stroke-width="2"/>
-        <rect x="205" y="85" width="30" height="6" rx="1" fill="#7D6C2F"/>
-        <line x1="210" y1="91" x2="210" y2="140" stroke="#2B2421" stroke-width="1.5"/>
-        <line x1="230" y1="91" x2="230" y2="130" stroke="#2B2421" stroke-width="1.5"/>
-        <line x1="210" y1="140" x2="218" y2="148" stroke="#2B2421" stroke-width="1.5"/>
-        <line x1="230" y1="130" x2="222" y2="138" stroke="#2B2421" stroke-width="1.5"/>
-
-        <!-- Gear 1 (large) -->
-        <circle cx="160" cy="260" r="44" fill="none" stroke="#A0522D" stroke-width="2"/>
-        <circle cx="160" cy="260" r="32" fill="none" stroke="#A0522D" stroke-width="1.5"/>
-        <circle cx="160" cy="260" r="8" fill="#A0522D"/>
-        <!-- Gear teeth -->
-        <rect x="155" y="212" width="10" height="10" rx="1" fill="#A0522D"/>
-        <rect x="155" y="298" width="10" height="10" rx="1" fill="#A0522D"/>
-        <rect x="200" y="255" width="10" height="10" rx="1" fill="#A0522D"/>
-        <rect x="112" y="255" width="10" height="10" rx="1" fill="#A0522D"/>
-        <rect x="188" y="225" width="10" height="10" rx="1" fill="#A0522D" transform="rotate(45 193 230)"/>
-        <rect x="122" y="285" width="10" height="10" rx="1" fill="#A0522D" transform="rotate(45 127 290)"/>
-        <rect x="122" y="225" width="10" height="10" rx="1" fill="#A0522D" transform="rotate(-45 127 230)"/>
-        <rect x="188" y="285" width="10" height="10" rx="1" fill="#A0522D" transform="rotate(-45 193 290)"/>
-
-        <!-- Gear 2 (smaller, interlocking) -->
-        <circle cx="280" cy="240" r="28" fill="none" stroke="#7D6C2F" stroke-width="2"/>
-        <circle cx="280" cy="240" r="18" fill="none" stroke="#7D6C2F" stroke-width="1.5"/>
-        <circle cx="280" cy="240" r="5" fill="#7D6C2F"/>
-        <!-- Gear teeth -->
-        <rect x="275" y="208" width="10" height="8" rx="1" fill="#7D6C2F"/>
-        <rect x="275" y="264" width="10" height="8" rx="1" fill="#7D6C2F"/>
-        <rect x="304" y="235" width="8" height="10" rx="1" fill="#7D6C2F"/>
-        <rect x="248" y="235" width="8" height="10" rx="1" fill="#7D6C2F"/>
-
-        <!-- Workbench surface -->
-        <rect x="30" y="340" width="340" height="12" rx="2" fill="#2B2421"/>
-        <rect x="24" y="352" width="16" height="28" rx="1" fill="#2B2421"/>
-        <rect x="360" y="352" width="16" height="28" rx="1" fill="#2B2421"/>
-
-        <!-- Blueprint/ruler on bench -->
-        <rect x="50" y="324" width="80" height="14" rx="1" fill="none" stroke="#7D6C2F" stroke-width="1"/>
-        <line x1="60" y1="324" x2="60" y2="338" stroke="#7D6C2F" stroke-width="0.5"/>
-        <line x1="70" y1="328" x2="70" y2="338" stroke="#7D6C2F" stroke-width="0.5"/>
-        <line x1="80" y1="324" x2="80" y2="338" stroke="#7D6C2F" stroke-width="0.5"/>
-        <line x1="90" y1="328" x2="90" y2="338" stroke="#7D6C2F" stroke-width="0.5"/>
-        <line x1="100" y1="324" x2="100" y2="338" stroke="#7D6C2F" stroke-width="0.5"/>
-        <line x1="110" y1="328" x2="110" y2="338" stroke="#7D6C2F" stroke-width="0.5"/>
-        <line x1="120" y1="324" x2="120" y2="338" stroke="#7D6C2F" stroke-width="0.5"/>
-      </svg>
     </div>
   </section>
 
@@ -259,7 +196,7 @@ const rageSeries = [
     justify-self: start;
   }
 
-  .hero-illustration svg {
+  .hero-illustration img {
     width: 100%;
     height: auto;
     border-radius: var(--rounded-lg);