diff --git a/.github/scripts/capture-shots.sh b/.github/scripts/capture-shots.sh
new file mode 100755
index 00000000..4e2496bb
--- /dev/null
+++ b/.github/scripts/capture-shots.sh
@@ -0,0 +1,92 @@
+#!/usr/bin/env bash
+# Serves a built site on :4126, photographs every route in routes.json at both
+# viewports, and moves the captures to $2.
+#
+#   capture-shots.sh <dist-dir> <destination>
+#
+# Both sides of the visual job are captured by this script, from the head's
+# checkout, after both builds have been produced. That ordering is deliberate:
+# the merge base predates the harness that photographs it, so checking it out
+# and running its own `scripts/verify` would either fail outright or compare two
+# captures taken by two different procedures. Only the built output should
+# differ between the two sides.
+#
+# Reusing :4126 across two builds is the one reliable way to produce a
+# confident, meaningless green: if the first server survives, the second sweep
+# photographs the first build and parity passes because it compared a build to
+# itself. That is not hypothetical — it happened on the first CI run of this
+# job. `npx` spawns http-server as a child, so killing the npx wrapper left the
+# real server holding the port, the second `npx http-server` died of
+# EADDRINUSE in the background where nothing was watching, and the sweep
+# cheerfully re-photographed the merge base and called it identical.
+#
+# Two guards, because teardown is a thing that can fail in ways nobody
+# anticipated:
+#
+#   1. The whole process group is killed and the port is confirmed free, both
+#      before starting and after finishing.
+#   2. The served bytes are checked against the bytes on disk before a single
+#      screenshot is taken. Whatever else goes wrong, this sweep cannot
+#      photograph a build other than the one it was handed.
+set -euo pipefail
+
+dist="$1"
+destination="$2"
+root="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
+cd "$root"
+
+test -d "$dist" || {
+  echo "no build at $dist" >&2
+  exit 1
+}
+
+port_free() { ! curl -fsS -o /dev/null --max-time 2 "http://127.0.0.1:4126/" 2>/dev/null; }
+
+await_port_free() {
+  for _ in $(seq 1 20); do
+    port_free && return 0
+    sleep 0.5
+  done
+  return 1
+}
+
+if ! port_free; then
+  echo "something is already serving :4126; refusing to photograph it" >&2
+  exit 1
+fi
+
+rm -rf scripts/verify/out
+
+# `setsid` puts the server and every child npx spawns into one process group, so
+# teardown can take the group down rather than only the wrapper.
+setsid npx --yes http-server "$dist" -p 4126 --silent &
+server=$!
+cleanup() {
+  kill -TERM "-$server" 2>/dev/null || kill -TERM "$server" 2>/dev/null || true
+  wait "$server" 2>/dev/null || true
+  await_port_free || {
+    echo ":4126 is still held after teardown; the next sweep would photograph this build" >&2
+    exit 1
+  }
+}
+trap cleanup EXIT
+
+for _ in $(seq 1 60); do
+  curl -fsS -o /dev/null "http://127.0.0.1:4126/" && break
+  sleep 1
+done
+
+# The identity check. If this passes, the sweep is photographing $dist and
+# nothing else — no surviving server, no stale build, no silent green.
+served=$(curl -fsS "http://127.0.0.1:4126/" | shasum | cut -d' ' -f1)
+ondisk=$(shasum < "$dist/index.html" | cut -d' ' -f1)
+if [ "$served" != "$ondisk" ]; then
+  echo "‽ :4126 is not serving $dist (served $served, on disk $ondisk)" >&2
+  exit 1
+fi
+
+npm run verify:shots:all > /dev/null
+
+mkdir -p "$(dirname "$destination")"
+rm -rf "$destination"
+mv scripts/verify/out "$destination"
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 43324c55..05177d59 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,12 +2,20 @@ name: CI
 
 on:
   pull_request:
+    # `labeled`/`unlabeled` are here for the visual job: its enforcement is
+    # chosen by the PR's labels, so applying `visual-change` or `dependencies`
+    # has to be able to re-decide a run that already happened.
+    types: [opened, synchronize, reopened, labeled, unlabeled]
   workflow_dispatch:
 
 concurrency:
   group: ci-${{ github.ref }}
   cancel-in-progress: true
 
+env:
+  # Pinned so the gates are always read by the same browser. Bump deliberately.
+  PLAYWRIGHT_VERSION: 1.62.1
+
 jobs:
   lint:
     runs-on: ubuntu-latest
@@ -43,3 +51,175 @@ jobs:
       # receiver URL never reaches fork-triggered runs. The deploy workflow
       # injects the secret for the production build.
       - run: npm run build
+
+  # Screenshots cannot see a transition that plays in the wrong place and then
+  # corrects: the landed page is correct, only the frames in between are not.
+  # This gate drives real client-side navigations and asserts the arrival is a
+  # single motion. It is required, and it is cheap enough to stay that way.
+  motion:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .tool-versions
+          cache: npm
+      - run: npm ci
+      - name: Install Playwright
+        run: |
+          npm install --no-save --no-audit --no-fund "playwright@$PLAYWRIGHT_VERSION"
+          npx playwright install --with-deps chromium
+      - run: npm run build
+      - name: Serve the build
+        run: |
+          nohup npx --yes http-server dist -p 4126 --silent > /dev/null 2>&1 &
+          for _ in $(seq 1 60); do
+            curl -fsS -o /dev/null http://127.0.0.1:4126/ && exit 0
+            sleep 1
+          done
+          echo "the built site never came up on :4126" >&2
+          exit 1
+      - run: npm run verify:motion:all
+
+  # Pixel parity against the PR's merge base. No baselines are committed — the
+  # job builds and photographs both sides itself, so it cannot go stale and
+  # cannot be blessed by hand. What it does with the answer depends on the
+  # labels; see PARITY_MODE below.
+  visual:
+    runs-on: ubuntu-latest
+    if: >-
+      github.event_name == 'pull_request' &&
+      !contains(github.event.pull_request.labels.*.name, 'visual-change')
+    permissions:
+      contents: read
+      pull-requests: write
+    env:
+      # `dependencies` is what Dependabot applies: a bump that moves rendering
+      # must not merge silently, so it is held to zero differing pixels.
+      # Everything else measures and reports without failing.
+      PARITY_MODE: >-
+        ${{ contains(github.event.pull_request.labels.*.name, 'dependencies') && 'enforce' || 'report' }}
+      COMMENT_MARKER: '<!-- merge-base-visual-parity -->'
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 0
+      - name: Resolve the merge base and the scope
+        id: scope
+        run: |
+          git fetch --no-tags --prune origin "$GITHUB_BASE_REF"
+          base=$(git merge-base "origin/$GITHUB_BASE_REF" HEAD)
+          echo "base=$base" >> "$GITHUB_OUTPUT"
+          echo "Merge base: $base"
+          changed=$(git diff --name-only "$base" HEAD -- src public package-lock.json)
+          if [ -z "$changed" ]; then
+            echo "Nothing rendered changed; skipping the visual sweep."
+            echo "run=false" >> "$GITHUB_OUTPUT"
+          else
+            echo "$changed"
+            echo "run=true" >> "$GITHUB_OUTPUT"
+          fi
+      - uses: actions/setup-node@v4
+        if: steps.scope.outputs.run == 'true'
+        with:
+          node-version-file: .tool-versions
+          cache: npm
+      - name: Install ImageMagick and Playwright
+        if: steps.scope.outputs.run == 'true'
+        run: |
+          sudo apt-get update -qq
+          sudo apt-get install -y -qq imagemagick
+          # Playwright lives outside the checkout so it survives the two
+          # `npm ci` runs this job performs (merge base, then head), and the
+          # gates are pointed at it by PLAYWRIGHT_MODULE. `runner.temp` is not
+          # a context job-level `env:` can read, so it is exported here.
+          mkdir -p "$RUNNER_TEMP/playwright"
+          cd "$RUNNER_TEMP/playwright"
+          npm init -y >/dev/null
+          npm install --no-audit --no-fund "playwright@$PLAYWRIGHT_VERSION"
+          npx playwright install --with-deps chromium
+          echo "PLAYWRIGHT_MODULE=$RUNNER_TEMP/playwright/node_modules/playwright/index.js" >> "$GITHUB_ENV"
+      - name: Build the merge base
+        if: steps.scope.outputs.run == 'true'
+        run: |
+          git checkout --detach "${{ steps.scope.outputs.base }}"
+          npm ci
+          npm run build
+          mv dist "$RUNNER_TEMP/dist-base"
+      - name: Build the head
+        if: steps.scope.outputs.run == 'true'
+        run: |
+          git checkout --detach "${{ github.event.pull_request.head.sha }}"
+          npm ci
+          npm run build
+          mv dist "$RUNNER_TEMP/dist-head"
+      # Both sides are photographed from the head's checkout, after both builds
+      # exist. The merge base predates the harness that photographs it — running
+      # its own `scripts/verify` would either fail outright or compare two
+      # captures taken by two different procedures. One camera, two subjects.
+      - name: Capture both builds
+        if: steps.scope.outputs.run == 'true'
+        run: |
+          .github/scripts/capture-shots.sh "$RUNNER_TEMP/dist-base" "$RUNNER_TEMP/shots/base"
+          .github/scripts/capture-shots.sh "$RUNNER_TEMP/dist-head" "$RUNNER_TEMP/shots/head"
+      - name: Compare
+        if: steps.scope.outputs.run == 'true'
+        id: compare
+        run: |
+          mkdir -p "$RUNNER_TEMP/parity"
+          for viewport in 1440 420; do
+            # verify-parity exits non-zero on any difference; the verdict is
+            # made from the reports, not from this exit code.
+            npm run --silent verify:parity -- \
+              "$RUNNER_TEMP/shots/base/$viewport" "$RUNNER_TEMP/shots/head/$viewport" \
+              --out "$RUNNER_TEMP/parity/diff-$viewport" \
+              > "$RUNNER_TEMP/parity/report-$viewport.json" || true
+          done
+      - name: Summarise
+        if: steps.scope.outputs.run == 'true'
+        id: summary
+        run: |
+          node scripts/verify/parity-summary.mjs \
+            --mode "$PARITY_MODE" \
+            --marker "$COMMENT_MARKER" \
+            --out "$RUNNER_TEMP/parity/comment.md" \
+            --verdict "$RUNNER_TEMP/parity/verdict.txt" \
+            "1440x1000=$RUNNER_TEMP/parity/report-1440.json" \
+            "420x900=$RUNNER_TEMP/parity/report-420.json"
+          echo "verdict=$(cat "$RUNNER_TEMP/parity/verdict.txt")" >> "$GITHUB_OUTPUT"
+      - name: Post or update the PR comment
+        # Fork PRs get a read-only token, so a comment is best-effort; the
+        # verdict below is not.
+        if: steps.scope.outputs.run == 'true' && !github.event.pull_request.head.repo.fork
+        continue-on-error: true
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR: ${{ github.event.pull_request.number }}
+        run: |
+          existing=$(gh api "repos/$GITHUB_REPOSITORY/issues/$PR/comments" --paginate \
+            --jq "[.[] | select(.body | startswith(\"$COMMENT_MARKER\"))] | last | .id // empty")
+          if [ -n "$existing" ]; then
+            gh api -X PATCH "repos/$GITHUB_REPOSITORY/issues/comments/$existing" \
+              -F body=@"$RUNNER_TEMP/parity/comment.md" >/dev/null
+          else
+            gh api -X POST "repos/$GITHUB_REPOSITORY/issues/$PR/comments" \
+              -F body=@"$RUNNER_TEMP/parity/comment.md" >/dev/null
+          fi
+      - name: Upload the diffs
+        if: steps.scope.outputs.run == 'true' && steps.summary.outputs.verdict == 'moved'
+        uses: actions/upload-artifact@v4
+        with:
+          name: visual-parity-diffs
+          path: ${{ runner.temp }}/parity
+          if-no-files-found: ignore
+      - name: Verdict
+        if: steps.scope.outputs.run == 'true'
+        run: |
+          cat "$RUNNER_TEMP/parity/comment.md" >> "$GITHUB_STEP_SUMMARY"
+          verdict='${{ steps.summary.outputs.verdict }}'
+          echo "Verdict: $verdict (mode: $PARITY_MODE)"
+          if [ "$verdict" = "moved" ] && [ "$PARITY_MODE" = "enforce" ]; then
+            echo "Labelled 'dependencies' and pixels moved against the merge base." >&2
+            exit 1
+          fi
diff --git a/AGENTS.md b/AGENTS.md
index 167ddaff..0a3c5536 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -9,10 +9,18 @@ All changes land on `master` through a pull request; direct pushes are blocked b
 1. Branch from `master` (agents work in their own git worktree so parallel tracks never share a dirty checkout).
 2. Commit with comprehensive messages. Do not append session URLs to commit messages or PR bodies.
 3. Push the branch and open a PR with `gh pr create`.
-4. CI (`.github/workflows/ci.yml`) runs three required checks: `lint` (ESLint and Prettier), `typecheck` (the `astro check` ratchet), and `build` (the production build, in demo mode without `FORM_ENDPOINT`).
+4. CI (`.github/workflows/ci.yml`) runs four required checks — `lint` (ESLint and Prettier), `typecheck` (the `astro check` ratchet), `build` (the production build, in demo mode without `FORM_ENDPOINT`) and `motion` (the view-transition settle gate) — plus `visual`, a merge-base pixel-parity sweep whose enforcement depends on the PR's labels.
 5. Merge once CI is green. The merge landing on `master` triggers the production deploy.
 
-CI does not yet run the Playwright DOM gate, so `npm run verify:dom -- <route> --viewport 1440x1000` (and `420x900`) for affected routes remains a local pre-PR responsibility, as does the rest of the definition of done below.
+The `visual` job builds and photographs both the merge base and the head, so there are no committed baselines to go stale. It skips entirely when nothing under `src/`, `public/` or `package-lock.json` changed, and otherwise:
+
+| PR label        | Behaviour                                                                                                   |
+| --------------- | ----------------------------------------------------------------------------------------------------------- |
+| `dependencies`  | Zero differing pixels required; the job fails otherwise. A bump that moves rendering cannot merge silently. |
+| `visual-change` | Skipped. The author is declaring that pixels are meant to move.                                             |
+| anything else   | Measured and posted as a PR comment (routes changed, pixel counts, peak channel delta). Never fails.        |
+
+CI still does not run the Playwright DOM gate, so `npm run verify:dom -- <route> --viewport 1440x1000` (and `420x900`) for affected routes remains a local pre-PR responsibility, as does the rest of the definition of done below.
 
 ## Companion documents
 
diff --git a/package.json b/package.json
index a00ba7c4..2456beb2 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
     "verify:dom:all": "sh -c 'node scripts/verify/verify-dom.mjs --viewport 1440x1000 \"$@\" && node scripts/verify/verify-dom.mjs --viewport 420x900 \"$@\"' --",
     "verify:shots": "node scripts/verify/verify-shots.mjs",
     "verify:shots:all": "sh -c 'node scripts/verify/verify-shots.mjs --viewport 1440x1000 \"$@\" && node scripts/verify/verify-shots.mjs --viewport 420x900 \"$@\"' --",
+    "verify:motion": "node scripts/verify/verify-motion.mjs",
+    "verify:motion:all": "sh -c 'node scripts/verify/verify-motion.mjs --viewport 1440x1000 \"$@\" && node scripts/verify/verify-motion.mjs --viewport 420x900 \"$@\"' --",
     "verify:parity": "node scripts/verify/verify-parity.mjs",
     "verify:typewriter": "node scripts/verify/verify-typewriter.mjs",
     "postbuild": "pagefind --site dist",
diff --git a/scripts/verify/README.md b/scripts/verify/README.md
index 2975574f..ed08df4c 100644
--- a/scripts/verify/README.md
+++ b/scripts/verify/README.md
@@ -6,8 +6,11 @@ These scripts are the reviewed development harness required by ADR-008. Start a
 npm run verify:dom:all
 npm run verify:shots:all
 npm run verify:typewriter
+npm run verify:motion:all
 ```
 
+Playwright is not a repository dependency — it is a browser download nobody building the site should pay for. `playwright.mjs` resolves it at run time from `node_modules` if a caller installed it there (CI does, pinned), otherwise from `PLAYWRIGHT_MODULE` or the local npx cache the harness has always been driven from.
+
 Pass routes after `--` to check a safe subset. Set `VERIFY_BASE_URL` only when deliberately verifying another local origin. `--viewport WIDTH` or `--viewport WIDTHxHEIGHT` changes either responsive gate; `VERIFY_VIEWPORT` is the environment equivalent. Screenshot files and their manifest go to viewport-specific folders under the git-ignored `scripts/verify/out/`.
 
 ## Themes
@@ -37,6 +40,18 @@ readable whatever it scored in dark.
 
 Run the dark gate before the light gate; a light run with no recorded baseline fails rather than passing vacuously.
 
+## Motion
+
+`verify-motion` is the one gate that watches the journey rather than the destination. A real bug survived on `master` through every branch and was found by accident: navigating into a principle played its view transition 26px too low and snapped up on completion. Screenshots could not see it — the page was never in the wrong place, the _snapshot_ was. `.principle-prose` is both a `[data-reveal]` element and the named `principle-page` transition group, and the reveal settle was deferred by `requestAnimationFrame`, which runs after the browser photographs `::view-transition-new`. Fixed in `c38ef92` by settling in a microtask instead.
+
+The gate clicks a real link (never `goto`), then samples every animation frame for two seconds after the click: the scroll offset, and each tracked element's `getBoundingClientRect()`. The primer that leaks into the snapshot is a `translateY(26px)` on the real element, and `getBoundingClientRect` sees transforms, so the bad frame is measurable even though the pseudo-element is not.
+
+**The invariant is that arrival happens in a single motion.** From `astro:after-swap` onwards, every tracked element's document-space position — `scrollY + rect.top`, which cancels the router's own scroll — must already be its resting position. A trajectory that visits a position it later corrects away from by more than 2px is two motions. The resting value is the median of the window's last samples, and the assertion is stated against it rather than against "the first plateau" deliberately: a bad frame can be a single sample, too short to form a plateau of its own, and a plateau-relative rule would score it as the settle it corrects into. The 2px tolerance absorbs sub-pixel settle and layout rounding; it is not somewhere to hide a jump.
+
+`reducedMotion` is left at `no-preference` on purpose — under `reduce`, `Reveal` marks everything revealed at construction and the gate would assert nothing.
+
+Cases cover `/principles/` into a principle, principle prev/next in both directions, `/newsletter/` into an issue, and newsletter prev/next, at 1440x1000 and 420x900. Reverting `c38ef92` makes every principle case and both newsletter step cases fail with a measured 26px correction at post-swap frame 0, naming the route; the newsletter index card at 420 stays green because at that width the revealed elements are below the fold, so nothing on screen is photographed wrong.
+
 ## Parity
 
 Compare a fresh capture with a stored baseline mechanically:
@@ -95,3 +110,9 @@ Every entry is echoed with its reason into the JSON report and cropped into `<di
 `npm run check:ratchet` also runs `verify-styles-doc.mjs`, which holds `STYLES.md` to the code it describes. Three derived checks — the `tokens.css` line, rule and declaration counts, every file owning styles appearing in the ownership table, and every table row pointing at a file that still owns styles — plus a `styles-hash` marker over `tokens.css` and every style block.
 
 The derived checks cannot be satisfied by a token edit: they either match reality or they do not. The hash is weaker by design; it only forces a deliberate look. After changing any style, read `STYLES.md`, correct anything now wrong, and run `npm run styles:sync` to restate the derived facts and re-bless the hash. A component and its extracted sibling sheet (`Hero.astro` + `Hero.css`) count as one owner.
+
+## In CI
+
+`.github/workflows/ci.yml` runs two of these gates. `motion` is a required check: it builds, serves `dist` on :4126 and runs `verify:motion:all`. `visual` rebuilds and photographs the PR's merge base and its head with `verify:shots:all` and compares them with `verify:parity`, so nothing is baselined and nothing can rot; `parity-summary.mjs` turns the two per-viewport reports into the PR comment and the verdict. Enforcement is by label — `dependencies` requires zero pixels, `visual-change` skips the job, anything else measures and reports without failing.
+
+Both install Playwright at a version pinned in the workflow, Chromium only. `verify-parity` shells out to ImageMagick and now accepts either the ImageMagick 7 `magick` entry point or the ImageMagick 6 per-command binaries that Ubuntu packages.
diff --git a/scripts/verify/parity-summary.mjs b/scripts/verify/parity-summary.mjs
new file mode 100644
index 00000000..f4bb3eaf
--- /dev/null
+++ b/scripts/verify/parity-summary.mjs
@@ -0,0 +1,95 @@
+// Turns the per-viewport `verify-parity` reports produced by the merge-base
+// visual job into one PR comment body, and decides the job's verdict.
+//
+//   node scripts/verify/parity-summary.mjs --mode enforce|report \
+//     --marker '<!-- id -->' --out FILE --verdict FILE <label>=<report.json> ...
+//
+// `mode` only chooses the comment's wording; the workflow owns enforcement. The
+// verdict — `clean` or `moved` — is written to its own file rather than encoded
+// in the exit code, so a crash in here can never be read as "pixels moved".
+
+import { readFile, writeFile } from 'node:fs/promises';
+
+const args = process.argv.slice(2);
+let mode = 'report';
+let marker = '<!-- visual-parity -->';
+let out = null;
+let verdictPath = null;
+let title = 'Merge-base visual parity';
+const reports = [];
+for (let index = 0; index < args.length; index += 1) {
+  if (args[index] === '--mode') mode = args[(index += 1)];
+  else if (args[index] === '--marker') marker = args[(index += 1)];
+  else if (args[index] === '--out') out = args[(index += 1)];
+  else if (args[index] === '--verdict') verdictPath = args[(index += 1)];
+  else if (args[index] === '--title') title = args[(index += 1)];
+  else {
+    const split = args[index].indexOf('=');
+    reports.push({ label: args[index].slice(0, split), path: args[index].slice(split + 1) });
+  }
+}
+
+const viewports = [];
+for (const { label, path } of reports) {
+  const report = JSON.parse(await readFile(path, 'utf8'));
+  const moved = report.results.filter((entry) => (entry.differingPixels ?? 0) > 0);
+  viewports.push({
+    label,
+    moved,
+    missing: report.missingFromCurrent ?? [],
+    added: report.addedInCurrent ?? [],
+    compared: report.compared ?? 0,
+  });
+}
+
+const totalMoved = viewports.reduce((sum, entry) => sum + entry.moved.length, 0);
+const structural = viewports.reduce(
+  (sum, entry) => sum + entry.missing.length + entry.added.length,
+  0,
+);
+const clean = totalMoved === 0 && structural === 0;
+
+const lines = [marker, `### ${title}`, ''];
+if (clean) {
+  lines.push(
+    `Every captured route is pixel-identical to the merge base across ${viewports
+      .map((entry) => `${entry.label} (${entry.compared} routes)`)
+      .join(' and ')}.`,
+  );
+} else {
+  for (const entry of viewports) {
+    lines.push(`**${entry.label}** — ${entry.moved.length} of ${entry.compared} routes moved.`);
+    if (entry.moved.length) {
+      lines.push('', '| Route | Differing pixels | Peak channel delta |', '| --- | ---: | ---: |');
+      for (const route of entry.moved.slice(0, 40))
+        lines.push(
+          `| \`${route.route}\` | ${route.differingPixels?.toLocaleString() ?? '—'} | ${
+            route.maxChannelDelta ?? '—'
+          }/255 |`,
+        );
+      if (entry.moved.length > 40) lines.push(`| … ${entry.moved.length - 40} more | | |`);
+    }
+    if (entry.missing.length)
+      lines.push('', `Routes lost since the merge base: ${entry.missing.join(', ')}`);
+    if (entry.added.length)
+      lines.push('', `Routes new since the merge base: ${entry.added.join(', ')}`);
+    lines.push('');
+  }
+  lines.push(
+    '',
+    'Differing pixels locate a change; the peak channel delta sizes it. A large count with a',
+    'delta of 1–2/255 is a sub-perceptual shift, a small count at 200/255 is something a reader',
+    'would see.',
+  );
+}
+lines.push(
+  '',
+  mode === 'enforce'
+    ? '_Enforced: this PR is labelled `dependencies`, so a dependency bump that moves rendering fails here rather than merging silently._'
+    : '_Informational: label the PR `visual-change` to state that pixels are meant to move, or `dependencies` to require zero._',
+);
+
+const body = `${lines.join('\n')}\n`;
+if (out) await writeFile(out, body);
+if (verdictPath) await writeFile(verdictPath, clean ? 'clean\n' : 'moved\n');
+process.stdout.write(body);
diff --git a/scripts/verify/playwright.mjs b/scripts/verify/playwright.mjs
new file mode 100644
index 00000000..ba6f110a
--- /dev/null
+++ b/scripts/verify/playwright.mjs
@@ -0,0 +1,41 @@
+// Playwright is deliberately not a repository dependency: it pulls a browser
+// download that every `npm ci` on the site would pay for, and only the browser
+// gates need it. It is therefore resolved at run time from whichever of the two
+// places it actually lives:
+//
+//   - `node_modules`, when a caller has installed it (CI does, with a pinned
+//     version, so the gate runs against a known browser);
+//   - the local npx cache the harness has always been driven from, or whatever
+//     `PLAYWRIGHT_MODULE` points at.
+//
+// Only a genuine "not installed" resolution failure falls through to the
+// fallback; any other import error is rethrown, so a broken installation
+// reports itself instead of masquerading as a missing one.
+
+const FALLBACK_MODULE =
+  process.env.PLAYWRIGHT_MODULE ??
+  '/Users/asaucedo/.npm/_npx/e41f203b7505f1fb/node_modules/playwright/index.js';
+
+const load = async () => {
+  try {
+    return await import('playwright');
+  } catch (error) {
+    if (error?.code !== 'ERR_MODULE_NOT_FOUND') throw error;
+    try {
+      return await import(FALLBACK_MODULE);
+    } catch (fallbackError) {
+      if (fallbackError?.code !== 'ERR_MODULE_NOT_FOUND') throw fallbackError;
+      throw new Error(
+        `Playwright not found. Install it (npm i --no-save playwright@<version>) or point ` +
+          `PLAYWRIGHT_MODULE at an installation; tried "playwright" and "${FALLBACK_MODULE}".`,
+        { cause: fallbackError },
+      );
+    }
+  }
+};
+
+const resolved = await load();
+const playwright = resolved.default ?? resolved;
+
+export default playwright;
+export const { chromium, firefox, webkit, devices } = playwright;
diff --git a/scripts/verify/verify-dom.mjs b/scripts/verify/verify-dom.mjs
index 58c7f606..3d7e4c4c 100644
--- a/scripts/verify/verify-dom.mjs
+++ b/scripts/verify/verify-dom.mjs
@@ -1,4 +1,4 @@
-import playwright from '/Users/asaucedo/.npm/_npx/e41f203b7505f1fb/node_modules/playwright/index.js';
+import playwright from './playwright.mjs';
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import {
   applyTheme,
diff --git a/scripts/verify/verify-motion.mjs b/scripts/verify/verify-motion.mjs
new file mode 100644
index 00000000..c3dbccab
--- /dev/null
+++ b/scripts/verify/verify-motion.mjs
@@ -0,0 +1,299 @@
+// Motion gate: a client-side arrival must happen in a single motion.
+//
+//   node scripts/verify/verify-motion.mjs [--viewport WxH] [--theme dark|light]
+//                                         [--case NAME ...] [--json FILE]
+//
+// Screenshots cannot see this class of bug. Navigating into a principle used to
+// play its view transition 26px too low and snap up on completion (fixed in
+// c38ef92): `.principle-prose` is both a `[data-reveal]` element and the named
+// `principle-page` transition group, and the reveal settle was deferred by
+// `requestAnimationFrame` — one frame later than the browser photographs
+// `::view-transition-new`. The page was never in the wrong place; the snapshot
+// was, so every full-page capture of the landed page was correct.
+//
+// What is observable is the trajectory. This gate performs a REAL click-driven
+// navigation and samples, every animation frame for ~2s, the scroll offset and
+// the bounding rect of the elements the transition is built from. The primer
+// that leaks into the snapshot is a `translateY(26px)` on the real element, and
+// `getBoundingClientRect` sees transforms — so the bad frame is measurable even
+// though the pseudo-element is not.
+//
+// The invariant: after the swap, every tracked element's document-space
+// position (scrollY + rect.top, which is immune to the router's own scroll) is
+// already its final position. A trajectory that visits a position it later
+// corrects away from by more than TOLERANCE_PX is two motions, not one. Stating
+// it against the resting value rather than "the first plateau" is deliberate: a
+// bad frame can be a single sample, too short to ever form a plateau of its own,
+// and a plateau-relative rule would score it as the settle it corrects into.
+//
+// The tolerance absorbs sub-pixel settle and layout rounding only. It is not a
+// place to hide a jump: 26px was the bug, 2px is the noise floor.
+
+import { writeFile } from 'node:fs/promises';
+import { chromium } from './playwright.mjs';
+import { applyTheme, parseThemeArgs } from './theme.mjs';
+
+// A correction larger than this is a visible second motion. Sub-pixel settle
+// and layout rounding sit well under 1px.
+const TOLERANCE_PX = 2;
+// Sampling window after the click. The longest transition is 220ms; two seconds
+// covers the swap, the transition and a long tail of late corrections.
+const WINDOW_MS = 2000;
+// Below this a run has not observed enough of the arrival to conclude anything,
+// so it fails rather than passing on three frames.
+const MIN_POST_SWAP_SAMPLES = 20;
+
+// Every case is a real user gesture: land on `from`, click `click`, arrive at
+// `to`. `targets` are the elements the transition is composed of — the named
+// transition groups and the `[data-reveal]` elements inside them, which is the
+// exact overlap the bug lived in.
+const CASES = [
+  {
+    name: 'principles-index-to-principle',
+    from: '/principles/',
+    click: 'a[href="/principles/01/"]:visible',
+    to: '/principles/01/',
+    targets: ['.principle-prose'],
+  },
+  {
+    name: 'principle-next',
+    from: '/principles/01/',
+    click: '.principle-pagination a[data-transition-direction="forward"]',
+    to: '/principles/02/',
+    targets: ['.principle-prose'],
+  },
+  {
+    name: 'principle-prev',
+    from: '/principles/02/',
+    click: '.principle-pagination a[data-transition-direction="back"]',
+    to: '/principles/01/',
+    targets: ['.principle-prose'],
+  },
+  {
+    name: 'newsletter-index-to-issue',
+    from: '/newsletter/',
+    click: 'a.latest-card',
+    to: null,
+    targets: ['.issue-meta', '.issue-article', '.issue-lede'],
+  },
+  {
+    name: 'newsletter-next',
+    from: '/newsletter/396/',
+    click: '.issue-meta a[data-transition-direction="forward"]',
+    to: '/newsletter/397/',
+    targets: ['.issue-meta', '.issue-article', '.issue-lede'],
+  },
+  {
+    name: 'newsletter-prev',
+    from: '/newsletter/397/',
+    click: '.issue-meta a[data-transition-direction="back"]',
+    to: '/newsletter/396/',
+    targets: ['.issue-meta', '.issue-article', '.issue-lede'],
+  },
+];
+
+const { theme, rest: args } = parseThemeArgs(process.argv.slice(2));
+let viewportValue = process.env.VERIFY_VIEWPORT ?? '1440x1000';
+let jsonPath = null;
+const selected = [];
+for (let index = 0; index < args.length; index += 1) {
+  if (args[index] === '--viewport') {
+    viewportValue = args[index + 1];
+    index += 1;
+  } else if (args[index].startsWith('--viewport=')) {
+    viewportValue = args[index].slice('--viewport='.length);
+  } else if (args[index] === '--case') {
+    selected.push(args[index + 1]);
+    index += 1;
+  } else if (args[index] === '--json') {
+    jsonPath = args[index + 1];
+    index += 1;
+  } else {
+    selected.push(args[index]);
+  }
+}
+const [viewportWidth, requestedHeight] = viewportValue.toLowerCase().split('x').map(Number);
+const viewportHeight = requestedHeight || (viewportWidth <= 950 ? 900 : 1000);
+if (!Number.isFinite(viewportWidth) || !Number.isFinite(viewportHeight)) {
+  throw new Error(`Invalid viewport "${viewportValue}"; use WIDTH or WIDTHxHEIGHT`);
+}
+const cases = selected.length ? CASES.filter((entry) => selected.includes(entry.name)) : CASES;
+if (!cases.length) throw new Error(`No motion cases matched ${selected.join(', ')}`);
+
+const baseUrl = process.env.VERIFY_BASE_URL ?? 'http://127.0.0.1:4126';
+
+// Runs inside the page, straddling the navigation. The router swaps the
+// document but never the realm, so this closure and its samples survive the
+// swap and keep resolving selectors against whatever document is current.
+const recorder = ({ targets, windowMs }) => {
+  const state = { samples: [], swapped: false, swapAt: null, direction: null, native: null };
+  window.__motion = state;
+  state.native = typeof document.startViewTransition === 'function';
+  // Registered after every application listener, so `swapped` can only be true
+  // once the router and its `astro:after-swap` consumers have run. Anything the
+  // page corrects after this point is a correction a viewer would see.
+  document.addEventListener(
+    'astro:after-swap',
+    () => {
+      state.swapped = true;
+      state.swapAt = performance.now();
+      state.direction = document.documentElement.dataset.astroTransition ?? null;
+    },
+    { once: true },
+  );
+  const started = performance.now();
+  const tick = () => {
+    const now = performance.now();
+    const sample = {
+      t: Math.round((now - started) * 100) / 100,
+      swapped: state.swapped,
+      scrollY: window.scrollY,
+      path: location.pathname,
+      tops: {},
+    };
+    for (const selector of targets) {
+      const element = document.querySelector(selector);
+      // Document-space position: the router's own scroll cancels out, so what
+      // is left is only the element moving relative to the page.
+      sample.tops[selector] = element ? window.scrollY + element.getBoundingClientRect().top : null;
+    }
+    state.samples.push(sample);
+    if (now - started < windowMs) requestAnimationFrame(tick);
+    else state.done = true;
+  };
+  requestAnimationFrame(tick);
+};
+
+/**
+ * Largest position a trajectory visits and then corrects away from. The resting
+ * value is the tail of the window, taken as the median of the last few samples
+ * so one dropped frame cannot redefine "final".
+ */
+const settleReport = (values) => {
+  const usable = values.filter((value) => Number.isFinite(value));
+  if (usable.length < MIN_POST_SWAP_SAMPLES) return { samples: usable.length, final: null };
+  const tail = usable.slice(-5).sort((a, b) => a - b);
+  const final = tail[Math.floor(tail.length / 2)];
+  let worst = 0;
+  let worstIndex = -1;
+  usable.forEach((value, index) => {
+    const deviation = Math.abs(value - final);
+    if (deviation > worst) {
+      worst = deviation;
+      worstIndex = index;
+    }
+  });
+  return {
+    samples: usable.length,
+    final: Math.round(final * 100) / 100,
+    maxCorrection: Math.round(worst * 100) / 100,
+    atFrame: worstIndex,
+  };
+};
+
+const browser = await chromium.launch({ headless: true });
+// Motion is the subject: `reducedMotion: 'reduce'` would make Reveal mark
+// everything revealed at construction and the gate would assert nothing.
+const context = await browser.newContext({
+  viewport: { width: viewportWidth, height: viewportHeight },
+  deviceScaleFactor: 1,
+  reducedMotion: 'no-preference',
+  colorScheme: theme,
+});
+await applyTheme(context, theme);
+
+const results = [];
+for (const entry of cases) {
+  const page = await context.newPage();
+  const errors = [];
+  page.on('pageerror', (error) => errors.push(`page: ${error.message}`));
+  page.on('console', (message) => {
+    if (message.type() === 'error') errors.push(`console: ${message.text()}`);
+  });
+
+  const problems = [];
+  const response = await page.goto(new URL(entry.from, baseUrl).href, { waitUntil: 'networkidle' });
+  if ((response?.status() ?? 0) >= 400)
+    problems.push(`${entry.from} returned ${response?.status()}`);
+
+  const link = page.locator(entry.click).first();
+  await link.waitFor({ state: 'visible', timeout: 10000 });
+  await link.scrollIntoViewIfNeeded();
+  // Settle the scroll-triggered reveals the scroll just fired, so the recorded
+  // window contains the navigation and nothing else.
+  await page.waitForTimeout(1200);
+
+  await page.evaluate(recorder, { targets: entry.targets, windowMs: WINDOW_MS });
+  await link.click();
+  await page.waitForFunction(() => window.__motion?.done === true, null, {
+    timeout: WINDOW_MS + 15000,
+  });
+  const motion = await page.evaluate(() => window.__motion);
+
+  const arrived = new URL(page.url()).pathname;
+  if (!motion.swapped)
+    problems.push('no astro:after-swap fired: the click did not navigate in-page');
+  if (entry.to && arrived !== entry.to)
+    problems.push(`arrived at ${arrived}, expected ${entry.to}`);
+  if (!motion.direction)
+    problems.push('no data-astro-transition on <html>: no view transition ran');
+
+  const post = motion.samples.filter((sample) => sample.swapped);
+  if (post.length < MIN_POST_SWAP_SAMPLES)
+    problems.push(`only ${post.length} post-swap frames sampled (need ${MIN_POST_SWAP_SAMPLES})`);
+
+  const trajectories = {};
+  for (const selector of entry.targets) {
+    const report = settleReport(post.map((sample) => sample.tops[selector]));
+    trajectories[selector] = report;
+    if (report.final === null) {
+      problems.push(`${selector} resolved on only ${report.samples} post-swap frames`);
+      continue;
+    }
+    if (report.maxCorrection > TOLERANCE_PX)
+      problems.push(
+        `${selector} settled twice: ${report.maxCorrection}px correction at post-swap frame ` +
+          `${report.atFrame} (rested at ${report.final}px)`,
+      );
+  }
+  const scroll = settleReport(post.map((sample) => sample.scrollY));
+  trajectories.scrollY = scroll;
+  if (scroll.final !== null && scroll.maxCorrection > TOLERANCE_PX)
+    problems.push(
+      `scroll settled twice: ${scroll.maxCorrection}px correction at post-swap frame ${scroll.atFrame}`,
+    );
+
+  if (errors.length) problems.push(...errors);
+
+  results.push({
+    case: entry.name,
+    viewport: `${viewportWidth}x${viewportHeight}`,
+    theme,
+    from: entry.from,
+    to: arrived,
+    direction: motion.direction,
+    nativeViewTransitions: motion.native,
+    frames: motion.samples.length,
+    postSwapFrames: post.length,
+    trajectories,
+    status: problems.length ? 'fail' : 'pass',
+    problems,
+  });
+  await page.close();
+}
+
+await browser.close();
+
+const failures = results.filter((entry) => entry.status !== 'pass');
+const report = {
+  passed: failures.length === 0,
+  tolerancePx: TOLERANCE_PX,
+  viewport: `${viewportWidth}x${viewportHeight}`,
+  theme,
+  cases: results.length,
+  failures: failures.map((entry) => ({ case: entry.case, problems: entry.problems })),
+  results,
+};
+if (jsonPath) await writeFile(jsonPath, `${JSON.stringify(report, null, 2)}\n`);
+console.log(JSON.stringify(report, null, 2));
+process.exitCode = report.passed ? 0 : 1;
diff --git a/scripts/verify/verify-parity.mjs b/scripts/verify/verify-parity.mjs
index 0da78d4e..cf3a7841 100644
--- a/scripts/verify/verify-parity.mjs
+++ b/scripts/verify/verify-parity.mjs
@@ -70,8 +70,23 @@ const parseRegion = (value) => {
   const [width, height, x, y] = match.slice(1).map(Number);
   return { width, height, x, y };
 };
+// ImageMagick 7 exposes one `magick` entry point; ImageMagick 6 — what Debian,
+// Ubuntu and therefore the CI runners package — ships only the legacy per-command
+// binaries. Resolve once and translate, so the same gate runs against a
+// developer's IM7 and a runner's IM6 without either having to know.
+const LEGACY_SUBCOMMANDS = new Set(['compare', 'convert', 'identify', 'mogrify', 'montage']);
+const hasMagickCommand = spawnSync('magick', ['-version'], { encoding: 'utf8' }).status === 0;
+const magickArgv = (parameters) => {
+  if (hasMagickCommand) return ['magick', parameters];
+  if (LEGACY_SUBCOMMANDS.has(parameters[0])) return [parameters[0], parameters.slice(1)];
+  return ['convert', parameters];
+};
+const runMagick = (parameters) => {
+  const [command, argv] = magickArgv(parameters);
+  return spawnSync(command, argv, { encoding: 'utf8' });
+};
 const magick = (parameters) => {
-  const run = spawnSync('magick', parameters, { encoding: 'utf8' });
+  const run = runMagick(parameters);
   return { stdout: `${run.stdout ?? ''}`.trim(), stderr: `${run.stderr ?? ''}`.trim() };
 };
 const differingPixelsBetween = (left, right) => {
@@ -221,21 +236,31 @@ for (const name of baselineFiles.filter((file) => currentFiles.includes(file)))
   const diffPath = path.join(diffDir, name);
   // ImageMagick's AE metric counts absolutely different pixels and writes the
   // diff image; it exits non-zero when the images differ, which is expected.
-  const run = spawnSync(
-    'magick',
-    ['compare', '-metric', 'AE', '-fuzz', '0%', basePath, currentPath, diffPath],
-    { encoding: 'utf8' },
-  );
+  const run = runMagick([
+    'compare',
+    '-metric',
+    'AE',
+    '-fuzz',
+    '0%',
+    basePath,
+    currentPath,
+    diffPath,
+  ]);
   const output = `${run.stderr ?? ''}`.trim();
   // AE counts how many pixels differ at all; it says nothing about by how much.
   // A sub-perceptual shift across a large flat area reads as a huge count, so a
   // deliberate change needs PAE, the largest single-channel difference, to be
   // judged. Both are reported: the count locates the change, the delta sizes it.
-  const peak = spawnSync(
-    'magick',
-    ['compare', '-metric', 'PAE', '-fuzz', '0%', basePath, currentPath, 'null:'],
-    { encoding: 'utf8' },
-  );
+  const peak = runMagick([
+    'compare',
+    '-metric',
+    'PAE',
+    '-fuzz',
+    '0%',
+    basePath,
+    currentPath,
+    'null:',
+  ]);
   const peakMatch = /\(([\d.eE+-]+)\)/.exec(`${peak.stderr ?? ''}`);
   const maxChannelDelta = peakMatch ? Math.round(Number(peakMatch[1]) * 255 * 100) / 100 : null;
   if (/image widths or heights differ/i.test(output)) {
diff --git a/scripts/verify/verify-shots.mjs b/scripts/verify/verify-shots.mjs
index b1243a1f..83d5bdb7 100644
--- a/scripts/verify/verify-shots.mjs
+++ b/scripts/verify/verify-shots.mjs
@@ -1,4 +1,4 @@
-import playwright from '/Users/asaucedo/.npm/_npx/e41f203b7505f1fb/node_modules/playwright/index.js';
+import playwright from './playwright.mjs';
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { applyTheme, parseThemeArgs, themeOutputPath } from './theme.mjs';
 
diff --git a/scripts/verify/verify-typewriter.mjs b/scripts/verify/verify-typewriter.mjs
index 8b9ad9e0..76e0134b 100644
--- a/scripts/verify/verify-typewriter.mjs
+++ b/scripts/verify/verify-typewriter.mjs
@@ -1,4 +1,4 @@
-import playwright from '/Users/asaucedo/.npm/_npx/e41f203b7505f1fb/node_modules/playwright/index.js';
+import playwright from './playwright.mjs';
 
 import { applyTheme, parseThemeArgs, readTokenColors } from './theme.mjs';
 
diff --git a/scripts/verify/verify-visibility.mjs b/scripts/verify/verify-visibility.mjs
index 06a8284b..86bac0d1 100644
--- a/scripts/verify/verify-visibility.mjs
+++ b/scripts/verify/verify-visibility.mjs
@@ -1,4 +1,4 @@
-import playwright from '/Users/asaucedo/.npm/_npx/e41f203b7505f1fb/node_modules/playwright/index.js';
+import playwright from './playwright.mjs';
 import { mkdir, writeFile } from 'node:fs/promises';
 
 const { chromium } = playwright;