docs: record mobile vector replacement spec

Capture the per-block approach, what changed in each PHP/CSS file, and the test/geometry updates needed for the new mobile-*-vector.svg files. Mirror the structure used by the prior 2026-06-27 mobile-homepage-fidelity spec.

docs/superpowers/specs/2026-06-28-mobile-vector-replacement.md

@@ -0,0 +1,51 @@
+# Mobile Vector Replacement
+
+## Goal
+
+Swap the existing mobile vector sources in the homepage hero, pull quote, contact block, and our-work block for the artist-supplied `static/img/mobile-*-vector.svg` files. Each new SVG is drawn at the 402px mobile baseline so it doesn't need a desktop-vector clip-path trick to look right.
+
+## Approach
+
+- Treat each block separately. Same desktop element, an additional mobile element, CSS show/hide.
+- Preserve all desktop and tablet-above-767 behavior.
+- Lazy-load the new `<img>` elements the same way the desktop sources are loaded.
+
+## Per Block
+
+### Hero
+
+- New partial `views/partials/hero-vector-mobile.php` renders an `<img class="hero-vector--mobile">` referencing `static/img/mobile-hero-vector.svg`.
+- `homepage-hero.php` loads both partials inside the existing `.heroVector .vector` container.
+- `homepage-hero.css` hides the desktop SVG and shows the mobile `<img>` below 768px. The existing vector positioning rules still apply to the wrapper.
+
+### Pull Quote
+
+- `pull-quote.php` swaps the existing PNG source for `static/img/mobile-pullquote-vector.svg` at the existing `.pull-quote__vector--mobile` slot.
+- CSS unchanged. The element already had `display: none` at desktop and `object-fit: cover` at mobile.
+
+### Contact Block
+
+- `contact-block.php` adds an `<img class="contact-block__linework contact-block__linework--mobile">` next to the existing SVG partial.
+- `contact-block.css` hides the desktop SVG and shows the mobile `<img>` at mobile. The mobile `<img>` fills the card width (the new SVG is 342×187, ratio matches the card).
+- The reusable contact linework ratio assertion updates from `628/282` to `342/187`.
+- The linework geometry assertion updates to expect `y ≈ 299`, `height ≈ 188`, `width = card.width`.
+
+### Our Work
+
+- `our-work.php` replaces the clip-path composition (CSS `--our-work-vector-image` + `::before`/`::after` background images) with a real `<img>` referencing `static/img/mobile-work-vector.svg`.
+- `our-work.css` drops the `vector-mobile-clip` rules and the two `::before/::after` background layers. Mobile vector is now a single image covering the block.
+- The linework composition test updates to assert against the `<img>` (visible, has the right `currentSrc`) instead of the CSS background-image layers.
+
+## Verification
+
+- `npm run build` then `npx playwright test --reporter=line` — 36/36 pass.
+- The contact linework test waits for the lazy-loaded `<img>` to finish loading before measuring its bounding rect.
+- PHPCS clean on changed files. Pre-existing `lib/activation.php` CRLF error is untouched.
+- `git diff --check` clean.
+- `composer validate --no-check-publish` passes.
+
+## Acceptance Criteria
+
+1. Below 768px the hero, pull quote, contact block, and our-work block render the artist-supplied mobile vectors.
+2. At 768px and above the original desktop SVGs (or PNG for the original pullquote) render unchanged.
+3. Existing responsive geometry tests pass with the updated ratios and positions.