feat: case-study template, all pages, routing, sitemap, 404

- case-study components: CsHeader, TldrBox, MiniToc, SectionRenderer, DecisionList,
  ArchDiagram (data-driven), Gallery, NextPrev, CaseStudyPage
- standalone pages: projects index, about, experience, contact (with form),
  cv hub, colophon — all EN/NO compositions
- full route tree: EN root + /no localised slugs (prosjekter, om-meg, erfaring,
  kontakt, kolofon, hjemmelab) per ROUTING_SPEC
- bilingual 404 with trace-fray motif; robots.txt + sitemap.xml from slug map
- Portrait atom; reusable sections gain header/eyebrow toggles for standalone pages

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

site/src/components/pages/ColophonPage.astro

@@ -0,0 +1,60 @@
+---
+/*
+  Colophon — "how this site works" (CONTENT_STRATEGY §4). A deliberate P2 hook: it
+  states the production decisions behind the site honestly. Copy authored per locale.
+*/
+import type { Locale } from '@i18n/locales';
+import { useDict } from '@i18n/t';
+import Base from '@layouts/Base.astro';
+import { getMeta } from '@lib/content';
+import SectionLabel from '@components/ui/SectionLabel.astro';
+
+interface Props {
+  locale: Locale;
+}
+const { locale } = Astro.props;
+const d = useDict(locale);
+const m = getMeta('colophon', locale);
+
+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.'],
+    ],
+  },
+  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.'],
+    ],
+  },
+}[locale];
+---
+
+<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>
+
+    <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>
+        ))
+      }
+    </dl>
+  </div>
+</Base>