test: vitest unit + playwright e2e suites; fix a11y, contrast, no-JS reveal

- vitest: dictionary parity, slug-map bijection, content-schema validation, JSON-LD (23)
- playwright: both locales, language-switch mapping (incl. no-JS), CV downloads,
  form happy-path + honeypot, axe a11y on 5 templates x 2 themes (23)
- fix: raise ink-faint + light accent to meet WCAG AA 4.5:1 (axe-verified)
- fix: gate reveal animations behind html.js so content is visible without JS
  (progressive enhancement - was hidden at opacity 0); scan reduced-motion path
- fix: validate contact form before the anti-bot time-trap (no false success)
- chore: ESLint node globals, typed diagram props, resvg fontFiles, prettier pass

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

site/src/components/pages/ColophonPage.astro

@@ -20,21 +20,51 @@ const copy = {
   en: {
     lead: 'This site is a small work sample in its own right. A few of the decisions behind it:',
     points: [
-      ['Static by default', 'Built with Astro and served as static HTML — no client framework runtime, so the largest content paint is just text and CSS. The three interactive parts (menu, lightbox, contact form) are tiny progressive-enhancement modules.'],
-      ['Bilingual from the ground up', 'English and Norwegian are equal citizens: a typed slug map is the single source of truth for routes, the language switch and hreflang, so they can never drift apart.'],
-      ['Motion that confirms, never performs', 'One signature animation, everything else is restraint. Every effect has a reduced-motion variant, and content is never gated behind an animation.'],
-      ['Self-hosted', 'Built and deployed from my own Gitea instance to Docker behind nginx. The contact form is a small stateless .NET service — even that is part of my own stack.'],
-      ['No tracking', 'No analytics beacons, no third-party fonts, no cookies — which is also why there is no cookie banner.'],
+      [
+        'Static by default',
+        'Built with Astro and served as static HTML — no client framework runtime, so the largest content paint is just text and CSS. The three interactive parts (menu, lightbox, contact form) are tiny progressive-enhancement modules.',
+      ],
+      [
+        'Bilingual from the ground up',
+        'English and Norwegian are equal citizens: a typed slug map is the single source of truth for routes, the language switch and hreflang, so they can never drift apart.',
+      ],
+      [
+        'Motion that confirms, never performs',
+        'One signature animation, everything else is restraint. Every effect has a reduced-motion variant, and content is never gated behind an animation.',
+      ],
+      [
+        'Self-hosted',
+        'Built and deployed from my own Gitea instance to Docker behind nginx. The contact form is a small stateless .NET service — even that is part of my own stack.',
+      ],
+      [
+        'No tracking',
+        'No analytics beacons, no third-party fonts, no cookies — which is also why there is no cookie banner.',
+      ],
     ],
   },
   no: {
     lead: 'Denne siden er også et lite arbeidsprøve i seg selv. Noen av valgene bak den:',
     points: [
-      ['Statisk som standard', 'Bygget med Astro og servert som statisk HTML — ingen klient-rammeverk i drift, så det første innholdet som vises er bare tekst og CSS. De tre interaktive delene (meny, lightbox, kontaktskjema) er små moduler for progressiv forbedring.'],
-      ['Tospråklig fra bunnen', 'Engelsk og norsk er likestilt: et typet slug-kart er én kilde til sannhet for ruter, språkbytte og hreflang, så de kan aldri komme i utakt.'],
-      ['Bevegelse som bekrefter, aldri opptrer', 'Én signaturanimasjon, ellers tilbakeholdenhet. Hver effekt har en variant for redusert bevegelse, og innhold er aldri sperret bak en animasjon.'],
-      ['Egendriftet', 'Bygget og rullet ut fra min egen Gitea-instans til Docker bak nginx. Kontaktskjemaet er en liten tilstandsløs .NET-tjeneste — også den er en del av min egen stack.'],
-      ['Ingen sporing', 'Ingen analyse-beacons, ingen tredjeparts-fonter, ingen informasjonskapsler — som også er grunnen til at det ikke finnes noe cookie-banner.'],
+      [
+        'Statisk som standard',
+        'Bygget med Astro og servert som statisk HTML — ingen klient-rammeverk i drift, så det første innholdet som vises er bare tekst og CSS. De tre interaktive delene (meny, lightbox, kontaktskjema) er små moduler for progressiv forbedring.',
+      ],
+      [
+        'Tospråklig fra bunnen',
+        'Engelsk og norsk er likestilt: et typet slug-kart er én kilde til sannhet for ruter, språkbytte og hreflang, så de kan aldri komme i utakt.',
+      ],
+      [
+        'Bevegelse som bekrefter, aldri opptrer',
+        'Én signaturanimasjon, ellers tilbakeholdenhet. Hver effekt har en variant for redusert bevegelse, og innhold er aldri sperret bak en animasjon.',
+      ],
+      [
+        'Egendriftet',
+        'Bygget og rullet ut fra min egen Gitea-instans til Docker bak nginx. Kontaktskjemaet er en liten tilstandsløs .NET-tjeneste — også den er en del av min egen stack.',
+      ],
+      [
+        'Ingen sporing',
+        'Ingen analyse-beacons, ingen tredjeparts-fonter, ingen informasjonskapsler — som også er grunnen til at det ikke finnes noe cookie-banner.',
+      ],
     ],
   },
 }[locale];
@@ -43,15 +73,15 @@ const copy = {
 <Base locale={locale} pageId="colophon" title={m.title} description={m.description}>
   <div class="mx-auto max-w-3xl px-6 py-16">
     <SectionLabel text={d.footer.colophon} />
-    <h1 class="mt-4 text-h1">{d.footer.colophon}</h1>
-    <p class="mt-4 text-body-lg text-ink-muted">{copy.lead}</p>
+    <h1 class="text-h1 mt-4">{d.footer.colophon}</h1>
+    <p class="text-body-lg text-ink-muted mt-4">{copy.lead}</p>
 
     <dl class="mt-8 flex flex-col gap-6">
       {
         copy.points.map(([term, desc]) => (
-          <div class="rounded-md border border-line bg-surface-1 p-5">
-            <dt class="text-h4 font-semibold text-ink">{term}</dt>
-            <dd class="mt-2 text-body text-ink-muted">{desc}</dd>
+          <div class="border-line bg-surface-1 rounded-md border p-5">
+            <dt class="text-h4 text-ink font-semibold">{term}</dt>
+            <dd class="text-body text-ink-muted mt-2">{desc}</dd>
           </div>
         ))
       }