diff --git a/ROADMAP.md b/ROADMAP.md
index a315e29..5f36304 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -60,15 +60,28 @@ ships with the next promotion — the items below are what's left after that.
       (portwing's landed), so a Playwright canary's silence proves nothing
       either way. Verify with a real browser or by reading the deployed chunk
       for the property names.
-- [ ] Acquisition data: decided org-wide in `CodesWhat/ops`
+- [x] Acquisition data: decided org-wide in `CodesWhat/ops`
       `standards/analytics.md` ("Acquisition data and consent", as of
-      `c161ebc`) — that file is the authority. Shape: `save_campaign_params:
-      true` with `gclid`/`fbclid`/`msclkid` excluded; `save_referrer: true`
-      with the sanitizer forwarding `$referring_domain` only (drop it unless
-      it's a bare hostname, never copy `$referrer`); geo stays off (cookieless
-      strips the IP upstream, PostHog #48660). No banner needed. Implement
-      AFTER the `$pathname`/`$pageleave` promotion is verified in production,
-      so the two changes are separately attributable.
+      `c161ebc`) — that file is the authority. Landed: `save_campaign_params:
+      true` with `mask_personal_data_properties: true` (masks
+      `gclid`/`fbclid`/`msclkid` and the rest of the SDK's per-click ids);
+      `save_referrer: true` with the sanitizer forwarding `$referring_domain`
+      only (bare hostname, never `$referrer`). The sanitizer forwards only
+      `utm_source` (github, x, bluesky, linkedin, reddit, hackernews,
+      newsletter, producthunt), `utm_medium` (social, email, referral,
+      community) and `utm_campaign` (`/^[a-z0-9-]{1,40}$/`); everything else is
+      dropped. The vocabulary is pending Scott's approval. Geo stays off
+      (cookieless strips the IP upstream, PostHog #48660). No banner needed.
+- [x] `$web_vitals` carries `$pathname` from the sanitized path
+- [x] `cta activated` for the project cards: `project_<slug>` ids, placement
+      `projects`. `cta activated` had zero rows in 120 days on codeswhat.com;
+      reproduced in a browser and the capture, sanitizer and send path all work,
+      so it was low traffic (76 pageviews) rather than a bug. Check it fires after
+      deploy.
+- [x] `newsletter submitted` (`result`, plus `error_class` from
+      invalid_email / rate_limited / unavailable / network on error)
+- [x] `client error` (`error_kind`, allowlisted `error_name`, sanitized path;
+      max 5 per page load; `capture_exceptions` stays off)
 
 ## Telemetry and badge audit (2026-08-14)
 
diff --git a/frontend/README-VERCEL.md b/frontend/README-VERCEL.md
index 17e647c..5472b18 100644
--- a/frontend/README-VERCEL.md
+++ b/frontend/README-VERCEL.md
@@ -9,8 +9,12 @@ a local CLI deployment is not the routine production path.
 
 After promotion, confirm the production deployment references the intended
 commit. Open the canonical domain and verify the theme toggle changes theme
-and the client scene mounts. Build success and analytics events alone do not
-establish that client initialization worked.
+and persists after reload, the specimen plates render, and `/support` shows its
+buy links. Build success and analytics events alone do not establish that client
+initialization worked.
+
+`npm run og` regenerates the share cards in `public/og*` with playwright-core
+and the locally installed Google Chrome; it isn't part of the build.
 
 ## Rendering and security headers
 
@@ -55,6 +59,23 @@ unset in Preview and Development so those deployments emit no analytics:
 | `NEXT_PUBLIC_POSTHOG_HOST` | `https://e.codeswhat.com` |
 | `NEXT_PUBLIC_POSTHOG_UI_HOST` | `https://us.posthog.com` |
 
+### Support page
+
+`/support` reads `CODESWHAT_SUPPORT_LINKS`, a server-side JSON object mapping tier
+id to a Stripe Payment Link. The six ids are `monthly-5`, `monthly-10`,
+`monthly-25`, `monthly-100`, `once-10` and `once-50`:
+
+```
+CODESWHAT_SUPPORT_LINKS={"monthly-5":"https://buy.stripe.com/...","monthly-10":"https://buy.stripe.com/...","monthly-25":"https://buy.stripe.com/...","monthly-100":"https://buy.stripe.com/...","once-10":"https://buy.stripe.com/...","once-50":"https://buy.stripe.com/..."}
+```
+
+Only `https://buy.stripe.com/...` and `https://donate.stripe.com/...` links with a
+path and no credentials are accepted. Unknown ids and invalid links are dropped
+with a server warning, and any tier without a link renders as "Opening soon".
+The page is rendered per request, so changing the variable needs a redeploy but
+no rebuild of page code. Costs marked PLACEHOLDER in `lib/support.ts` are for the
+maintainer to fill in.
+
 ## Domain Configuration
 
 1. Go to your Vercel project settings
diff --git a/frontend/app/(site)/layout.tsx b/frontend/app/(site)/layout.tsx
new file mode 100644
index 0000000..75048ef
--- /dev/null
+++ b/frontend/app/(site)/layout.tsx
@@ -0,0 +1,13 @@
+import { Footer } from "@/components/catalogue/Footer";
+import { Shell } from "@/components/catalogue/Shell";
+
+// The Catalogue shell wraps every public route. The dev-only /studio capture pages sit
+// outside this group so their transparent canvases are not painted over by the paper.
+export default function SiteLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <Shell>
+      {children}
+      <Footer />
+    </Shell>
+  );
+}
diff --git a/frontend/app/(site)/page.tsx b/frontend/app/(site)/page.tsx
new file mode 100644
index 0000000..dc88eb0
--- /dev/null
+++ b/frontend/app/(site)/page.tsx
@@ -0,0 +1,260 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import styles from "@/components/catalogue/catalogue.module.css";
+import { Sprite } from "@/components/catalogue/Sprite";
+import { SupportLink } from "@/components/catalogue/SupportLink";
+import { TrackedCtaLink } from "@/components/catalogue/TrackedCtaLink";
+import { BASE_URL, GITHUB_URL, OG_IMAGE, PROJECTS, SITE_CONFIG } from "@/lib/site-config";
+import { SERVICES, SPECIMENS } from "@/lib/specimens";
+import { GITHUB_SPONSORS_URL } from "@/lib/support";
+
+const title = `${SITE_CONFIG.name}: ${SITE_CONFIG.tagline}`;
+
+export const metadata: Metadata = {
+  title,
+  description: SITE_CONFIG.description,
+  alternates: { canonical: "/" },
+  openGraph: {
+    title,
+    description: SITE_CONFIG.description,
+    url: BASE_URL,
+    siteName: SITE_CONFIG.name,
+    type: "website",
+    images: [OG_IMAGE],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title,
+    description: SITE_CONFIG.description,
+    site: SITE_CONFIG.twitterCreator,
+    creator: SITE_CONFIG.twitterCreator,
+    images: [OG_IMAGE],
+  },
+};
+
+// schema.org graph — Organization + WebSite + Person (founder) + one
+// SoftwareSourceCode per project. This is the crawlable/answer-engine backbone,
+// server-rendered.
+const jsonLd = {
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type": "Organization",
+      "@id": `${BASE_URL}/#org`,
+      name: SITE_CONFIG.name,
+      url: BASE_URL,
+      logo: `${BASE_URL}${SITE_CONFIG.logo}`,
+      description: SITE_CONFIG.description,
+      founder: { "@id": `${BASE_URL}/#scott` },
+      sameAs: [GITHUB_URL, SITE_CONFIG.twitterUrl],
+      contactPoint: {
+        "@type": "ContactPoint",
+        email: "hello@codeswhat.com",
+        contactType: "customer support",
+      },
+    },
+    {
+      "@type": "WebSite",
+      "@id": `${BASE_URL}/#website`,
+      url: BASE_URL,
+      name: SITE_CONFIG.name,
+      publisher: { "@id": `${BASE_URL}/#org` },
+    },
+    {
+      "@type": "Person",
+      "@id": `${BASE_URL}/#scott`,
+      name: SITE_CONFIG.author.name,
+      url: SITE_CONFIG.author.url,
+    },
+    ...PROJECTS.map((p) => ({
+      "@type": "SoftwareSourceCode",
+      name: p.name,
+      description: p.description,
+      codeRepository: p.href,
+      author: { "@id": `${BASE_URL}/#org` },
+    })),
+  ],
+};
+
+export default function Home() {
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <main id="main" className={styles.main}>
+        <section className={styles.hero} aria-labelledby="hero-title">
+          <div>
+            <p className={styles.eyebrow}>Open-source tools, and a developer for hire</p>
+            <h1 id="hero-title" className={styles.display}>
+              One developer. A lot of agents. <em>Small, sharp</em> tools.
+            </h1>
+            <p className={styles.lede}>
+              CodesWhat is Scott Benson, building open-source tools with a crowd of coding agents.
+              Each one does a single job, in the open, with nothing phoning home. They're filed
+              below as specimens. When you need something built, the same crew takes commissions.
+            </p>
+            <div className={styles.actions}>
+              <a className={styles.btnLime} href="#specimens">
+                Meet the specimens
+              </a>
+              <a className={styles.btnLine} href="#services">
+                Work with me
+              </a>
+            </div>
+          </div>
+
+          <figure className={styles.figure} aria-label="The collection">
+            <div className={styles.figureGrid}>
+              {SPECIMENS.map((s) => (
+                <Sprite key={s.slug} slug={s.slug} scale={2} label={s.alt} />
+              ))}
+            </div>
+            <figcaption className={styles.figureCap}>
+              <b>Fig. 1</b>
+              The collection, as of this morning. None have escaped.
+            </figcaption>
+          </figure>
+        </section>
+
+        <section id="specimens" className={styles.section} aria-labelledby="specimens-title">
+          <header className={styles.sectionHead}>
+            <p className={styles.eyebrow}>Section I</p>
+            <h2 id="specimens-title" className={styles.h2}>
+              The specimens, <em>filed and labelled.</em>
+            </h2>
+            <p className={styles.sectionLede}>
+              Eight projects, each drawn from its own mascot, with a Latin name that fits and field
+              notes that are mostly true. Open a plate for the full write-up.
+            </p>
+          </header>
+
+          <ul className={styles.plates}>
+            {SPECIMENS.map((specimen, i) => (
+              <li key={specimen.slug}>
+                <article className={styles.plate} aria-labelledby={`plate-${specimen.slug}`}>
+                  <div className={styles.portrait}>
+                    <Sprite
+                      slug={specimen.slug}
+                      scale={5}
+                      fit={i === 0 ? 288 : 176}
+                      label={specimen.alt}
+                    />
+                  </div>
+                  <div className={styles.plateBody}>
+                    <p className={styles.plateNo}>
+                      Plate {specimen.no} · {specimen.kind}
+                    </p>
+                    <h3 id={`plate-${specimen.slug}`} className={styles.plateName}>
+                      <Link href={`/projects/${specimen.slug}`}>{specimen.name}</Link>
+                    </h3>
+                    <p className={styles.latin}>{specimen.latin}</p>
+                    <dl className={styles.field}>
+                      <div>
+                        <dt>Habitat</dt>
+                        <dd>{specimen.habitat}</dd>
+                      </div>
+                      <div>
+                        <dt>Diet</dt>
+                        <dd>{specimen.diet}</dd>
+                      </div>
+                      <div>
+                        <dt>Temperament</dt>
+                        <dd>{specimen.temperament}</dd>
+                      </div>
+                    </dl>
+                    <div className={styles.plateFoot}>
+                      <span className={styles.chip}>
+                        {specimen.license} · {specimen.language}
+                      </span>
+                      <Link href={`/projects/${specimen.slug}`}>Field notes</Link>
+                      <TrackedCtaLink
+                        ctaId={`project_${specimen.slug}`}
+                        placement="projects"
+                        href={specimen.site}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        Visit
+                        <span className={styles.srOnly}> {specimen.name} (opens in a new tab)</span>
+                      </TrackedCtaLink>
+                    </div>
+                  </div>
+                </article>
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        <section id="services" className={styles.section} aria-labelledby="services-title">
+          <header className={`${styles.sectionHead} ${styles.headRow}`}>
+            <div>
+              <p className={styles.eyebrow}>Section II</p>
+              <h2 id="services-title" className={styles.h2}>
+                CodesWhat? <em>Anything for you.</em>
+              </h2>
+              <p className={styles.sectionLede}>
+                The projects above are only what I have open-sourced. If you are building something,
+                I can help you ship it faster.
+              </p>
+            </div>
+            <aside className={styles.dotCard} aria-label="Commissions note">
+              <p className={styles.eyebrow}>Commissions</p>
+              <p className={styles.dotCardBig}>Taken on, one at a time.</p>
+            </aside>
+          </header>
+          <ol className={styles.services}>
+            {SERVICES.map((service, i) => (
+              <li key={service.title}>
+                <span className={styles.bigNo} aria-hidden="true">
+                  {String(i + 1).padStart(2, "0")}
+                </span>
+                <h3 className={styles.h3}>{service.title}</h3>
+                <p>{service.body}</p>
+              </li>
+            ))}
+          </ol>
+          <div className={styles.actions}>
+            <a className={styles.btnLime} href="mailto:hello@codeswhat.com">
+              Tell me what you need help with
+            </a>
+          </div>
+        </section>
+
+        <section id="upkeep" className={styles.section} aria-labelledby="upkeep-title">
+          <div className={styles.fund}>
+            <div>
+              <p className={styles.eyebrow}>Section III</p>
+              <h2 id="upkeep-title" className={`${styles.h2} ${styles.h2Small}`}>
+                Want to support the work? <em>Here's how.</em>
+              </h2>
+            </div>
+            <div>
+              <p className={styles.fundText}>
+                If these tools save you time and you'd like to chip in, you can sponsor me on GitHub
+                or give by card. Either way it goes toward hosting, domains and CI for every
+                project, monthly or one-time, whatever works for you.
+              </p>
+              <div className={styles.actions}>
+                <SupportLink
+                  className={styles.btnLine}
+                  href={GITHUB_SPONSORS_URL}
+                  ctaId="sponsors_github"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Sponsor on GitHub
+                  <span className={styles.srOnly}> (opens in a new tab)</span>
+                </SupportLink>
+                <Link className={styles.btnLine} href="/support">
+                  Other ways to give
+                </Link>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/frontend/app/(site)/projects/[slug]/page.tsx b/frontend/app/(site)/projects/[slug]/page.tsx
new file mode 100644
index 0000000..18c35af
--- /dev/null
+++ b/frontend/app/(site)/projects/[slug]/page.tsx
@@ -0,0 +1,167 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import styles from "@/components/catalogue/catalogue.module.css";
+import { Sprite } from "@/components/catalogue/Sprite";
+import { SupportLink } from "@/components/catalogue/SupportLink";
+import { TrackedCtaLink } from "@/components/catalogue/TrackedCtaLink";
+import { BASE_URL, SITE_CONFIG } from "@/lib/site-config";
+import { bySlug, SPECIMENS } from "@/lib/specimens";
+import { SYSTEMA } from "@/lib/support";
+
+export const dynamicParams = false;
+
+export function generateStaticParams() {
+  return SPECIMENS.map((s) => ({ slug: s.slug }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const s = bySlug((await params).slug);
+  if (!s) return {};
+  const title = `${s.name}, ${s.latin} | ${SITE_CONFIG.name}`;
+  const description = `${s.tagline}. Field notes, links and upkeep for ${s.name}.`;
+  const image = {
+    url: `/og/${s.slug}.png`,
+    width: 1200,
+    height: 630,
+    alt: `${s.name}, ${s.latin}: ${s.tagline}`,
+  };
+  return {
+    title,
+    description,
+    alternates: { canonical: `/projects/${s.slug}` },
+    openGraph: {
+      title,
+      description,
+      url: `${BASE_URL}/projects/${s.slug}`,
+      siteName: SITE_CONFIG.name,
+      type: "website",
+      images: [image],
+    },
+    twitter: { card: "summary_large_image", title, description, images: [image] },
+  };
+}
+
+export default async function SpecimenPage({ params }: { params: Promise<{ slug: string }> }) {
+  const s = bySlug((await params).slug);
+  if (!s) notFound();
+  const i = SPECIMENS.findIndex((x) => x.slug === s.slug);
+  const prev = SPECIMENS[(i + SPECIMENS.length - 1) % SPECIMENS.length];
+  const next = SPECIMENS[(i + 1) % SPECIMENS.length];
+
+  return (
+    <main id="main" className={styles.main}>
+      <Link href="/#specimens" className={styles.crumb}>
+        ← All specimens
+      </Link>
+
+      <section className={styles.detailHero} aria-labelledby="spec-title">
+        <div className={styles.portraitBig}>
+          <Sprite slug={s.slug} scale={10} label={s.alt} />
+        </div>
+        <div>
+          <p className={styles.eyebrow}>
+            Plate {s.no} · {s.kind}
+          </p>
+          <h1 id="spec-title" className={`${styles.display} ${styles.detailName}`}>
+            <em>{s.name}</em>
+          </h1>
+          <p className={styles.detailLatin}>{s.latin}</p>
+          <p className={styles.lede}>{s.about}</p>
+          <ul className={styles.metaRow} aria-label="License and language">
+            <li>{s.license}</li>
+            <li>{s.language}</li>
+            <li>{s.kind}</li>
+          </ul>
+          <div className={styles.actions}>
+            <TrackedCtaLink
+              ctaId={`project_${s.slug}`}
+              placement="projects"
+              className={styles.btnLime}
+              href={s.site}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Visit the site
+              <span className={styles.srOnly}> (opens in a new tab)</span>
+            </TrackedCtaLink>
+            {s.repo ? (
+              <a className={styles.btnLine} href={s.repo} target="_blank" rel="noopener noreferrer">
+                Repository
+              </a>
+            ) : null}
+            {s.docs ? (
+              <a className={styles.btnLine} href={s.docs} target="_blank" rel="noopener noreferrer">
+                Docs
+              </a>
+            ) : null}
+          </div>
+        </div>
+      </section>
+
+      <section className={styles.notesSection} aria-labelledby="notes-title">
+        <header>
+          <p className={styles.eyebrow}>Field notes</p>
+          <h2 id="notes-title" className={styles.h2}>
+            What to <em>look for.</em>
+          </h2>
+        </header>
+        <dl className={styles.specs}>
+          <div>
+            <dt>Habitat</dt>
+            <dd>{s.habitat}</dd>
+          </div>
+          <div>
+            <dt>Diet</dt>
+            <dd>{s.diet}</dd>
+          </div>
+          <div>
+            <dt>Temperament</dt>
+            <dd>{s.temperament}</dd>
+          </div>
+          <div>
+            <dt>Marks</dt>
+            <dd>{s.marks}</dd>
+          </div>
+          <div>
+            <dt>Handling</dt>
+            <dd>{s.handling}</dd>
+          </div>
+        </dl>
+      </section>
+
+      <div className={styles.upkeep}>
+        <strong>Upkeep</strong>
+        <span>{s.upkeep}</span>
+        {s.monthly === null ? (
+          <Link href="/support">Support</Link>
+        ) : (
+          <SupportLink
+            href={SYSTEMA.supportUrl}
+            ctaId="support_systema"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Its support page
+            <span className={styles.srOnly}> (opens in a new tab)</span>
+          </SupportLink>
+        )}
+      </div>
+
+      <nav className={styles.pager} aria-label="More specimens">
+        <Link href={`/projects/${prev.slug}`}>
+          <small>Previous</small>
+          <span>{prev.name}</span>
+        </Link>
+        <Link href={`/projects/${next.slug}`} className={styles.pagerNext}>
+          <small>Next</small>
+          <span>{next.name}</span>
+        </Link>
+      </nav>
+    </main>
+  );
+}
diff --git a/frontend/app/(site)/support/page.tsx b/frontend/app/(site)/support/page.tsx
new file mode 100644
index 0000000..610c058
--- /dev/null
+++ b/frontend/app/(site)/support/page.tsx
@@ -0,0 +1,274 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import styles from "@/components/catalogue/catalogue.module.css";
+import { Supporters } from "@/components/catalogue/Supporters";
+import { SupportLink } from "@/components/catalogue/SupportLink";
+import { BASE_URL, PROJECTS, SITE_CONFIG } from "@/lib/site-config";
+import {
+  GITHUB_SPONSORS_URL,
+  PROJECT_COSTS,
+  SHARED_COSTS,
+  type SupportProjectId,
+  SYSTEMA,
+  supportCtaId,
+  supportLinksFrom,
+  tiersWith,
+} from "@/lib/support";
+
+const description =
+  "Back CodesWhat through GitHub Sponsors or a Stripe payment link, and see what each project costs to run.";
+
+const SUPPORT_OG = {
+  url: "/og/support.png",
+  width: 1200,
+  height: 630,
+  alt: "Support CodesWhat: what the projects cost to run, and how to help",
+};
+
+export const metadata: Metadata = {
+  title: `Support ${SITE_CONFIG.name}`,
+  description,
+  alternates: { canonical: "/support" },
+  openGraph: {
+    title: `Support ${SITE_CONFIG.name}`,
+    description,
+    url: `${BASE_URL}/support`,
+    siteName: SITE_CONFIG.name,
+    type: "website",
+    images: [SUPPORT_OG],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `Support ${SITE_CONFIG.name}`,
+    description,
+    images: [SUPPORT_OG],
+  },
+};
+
+// read per request so the links can change without a rebuild
+export const dynamic = "force-dynamic";
+
+export default function SupportPage() {
+  const tiers = tiersWith(supportLinksFrom(process.env.CODESWHAT_SUPPORT_LINKS, console.warn));
+
+  return (
+    <main id="main" className={styles.main}>
+      <Link href="/" className={styles.crumb}>
+        ← Back to the catalogue
+      </Link>
+
+      <section className={styles.hero} aria-labelledby="sup-title">
+        <div>
+          <p className={styles.eyebrow}>Support</p>
+          <h1 id="sup-title" className={`${styles.display} ${styles.displayMid}`}>
+            What it costs, and <em>how to help.</em>
+          </h1>
+          <p className={styles.lede}>
+            These projects are free and open source, and they cost real money and time to keep
+            going. Everything below goes into one pool that covers whichever project needs it most.
+            Each project's running cost is listed further down.
+          </p>
+        </div>
+      </section>
+
+      <section id="tiers" className={styles.section} aria-labelledby="menu-title">
+        <header className={styles.sectionHead}>
+          <p className={styles.eyebrow}>One pool</p>
+          <h2 id="menu-title" className={styles.h2}>
+            Ways to <em>chip in.</em>
+          </h2>
+          <p className={styles.sectionLede}>
+            GitHub Sponsors is the easiest way to give if you're on GitHub. Not on GitHub? Pay by
+            card through Stripe instead. The tiers match.
+          </p>
+        </header>
+        <div className={styles.sponsorBar}>
+          <p>Same tiers, pay through GitHub. It goes to the same pool.</p>
+          <SupportLink
+            href={GITHUB_SPONSORS_URL}
+            ctaId="sponsors_github"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.btnLime}
+          >
+            Sponsor CodesWhat on GitHub
+            <span className={styles.srOnly}> (opens in a new tab)</span>
+          </SupportLink>
+        </div>
+        <h3 className={styles.subhead}>Not on GitHub? Pay by card</h3>
+        <ul className={styles.menu}>
+          {tiers.map((tier) => {
+            const price = `$${tier.price}`;
+            const cadence = tier.cadence === "monthly" ? "per month" : "one time";
+            return (
+              <li key={tier.id}>
+                <div className={styles.menuRow}>
+                  <h4 className={styles.menuName}>{tier.name}</h4>
+                  <span className={styles.leader} aria-hidden="true" />
+                  <span className={styles.menuPrice}>
+                    {price}
+                    <small> {cadence}</small>
+                  </span>
+                </div>
+                <p className={styles.menuLine}>{tier.buys}</p>
+                <div className={styles.menuAction}>
+                  {tier.link ? (
+                    <SupportLink
+                      href={tier.link}
+                      ctaId={supportCtaId(tier)}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={styles.btnLine}
+                    >
+                      {tier.cadence === "monthly" ? "Support monthly" : "Give once"}
+                      <span className={styles.srOnly}>
+                        {" "}
+                        with {tier.name}, {price} {cadence} (opens in a new tab)
+                      </span>
+                    </SupportLink>
+                  ) : (
+                    <button type="button" className={styles.btnOff} disabled aria-disabled="true">
+                      <b>
+                        {price} {cadence}
+                      </b>
+                      <span>Opening soon</span>
+                    </button>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </section>
+
+      <section className={styles.section} aria-labelledby="supporters">
+        <header className={styles.sectionHead}>
+          <p className={styles.eyebrow}>Thank you</p>
+          <h2 id="supporters" className={styles.h2}>
+            Supporters<em>.</em>
+          </h2>
+        </header>
+        <Supporters />
+      </section>
+
+      <section className={styles.section} aria-labelledby="where-the-money-goes">
+        <header className={styles.sectionHead}>
+          <p className={styles.eyebrow}>Running costs</p>
+          <h2 id="where-the-money-goes" className={styles.h2}>
+            Where the money <em>goes.</em>
+          </h2>
+          <p className={styles.sectionLede}>
+            Only the confirmed figures are printed. A placeholder means the number isn't confirmed
+            yet, and I'd sooner say so than invent one.
+          </p>
+        </header>
+
+        <h3 className={styles.subhead}>Shared costs</h3>
+        <table className={styles.table}>
+          <caption className={styles.srOnly}>Costs shared across projects</caption>
+          <thead>
+            <tr>
+              <th scope="col">Item</th>
+              <th scope="col" className={styles.num}>
+                Cost
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {SHARED_COSTS.map((item) => (
+              <tr key={item.label}>
+                <td data-label="Item">{item.label}</td>
+                <td data-label="Cost" className={styles.num}>
+                  <strong>{item.cost}</strong>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        <h3 className={styles.subhead}>By project</h3>
+        <table className={styles.table}>
+          <caption className={styles.srOnly}>Running cost by project</caption>
+          <thead>
+            <tr>
+              <th scope="col">Project</th>
+              <th scope="col">Source</th>
+              <th scope="col" className={styles.num}>
+                Running cost
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {PROJECTS.map((project) => {
+              const cost = PROJECT_COSTS[project.slug as SupportProjectId];
+              return (
+                <tr
+                  key={project.slug}
+                  id={project.slug}
+                  className={`${styles.scrollAnchor} ${cost.placeholder ? styles.rowTbd : ""}`}
+                >
+                  <td data-label="Project" className={styles.cellTitle}>
+                    <Link href={`/projects/${project.slug}`} className={styles.titleLink}>
+                      {project.name}
+                    </Link>
+                  </td>
+                  <td data-label="Source">
+                    <a
+                      href={project.href}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={styles.costLink}
+                    >
+                      Repo
+                      <span className={styles.srOnly}>
+                        {" "}
+                        for {project.name} (opens in a new tab)
+                      </span>
+                    </a>
+                  </td>
+                  <td data-label="Running cost" className={styles.num}>
+                    {cost.placeholder ? (
+                      <span className={styles.tbd}>{cost.line}</span>
+                    ) : (
+                      <strong>{cost.line}</strong>
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
+            <tr id="systema" className={styles.scrollAnchor}>
+              <td data-label="Project" className={styles.cellTitle}>
+                <Link href="/projects/systema-machinae" className={styles.titleLink}>
+                  {SYSTEMA.name}
+                </Link>
+                <span className={styles.oneLiner}>{SYSTEMA.note}</span>
+              </td>
+              <td data-label="Source">
+                <SupportLink
+                  href={SYSTEMA.supportUrl}
+                  ctaId="support_systema"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={styles.costLink}
+                >
+                  Support Systema
+                  <span className={styles.srOnly}> (opens in a new tab)</span>
+                </SupportLink>
+              </td>
+              <td data-label="Running cost" className={styles.num}>
+                <strong>{SYSTEMA.cost}</strong>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <section className={styles.section}>
+        <p className={styles.fine}>
+          Stripe handles card payments on its own pages. This site loads nothing from Stripe, and a
+          link only opens when you click it. Supporting a project buys no say in its roadmap.
+        </p>
+      </section>
+    </main>
+  );
+}
diff --git a/frontend/app/fonts.ts b/frontend/app/fonts.ts
new file mode 100644
index 0000000..f83ebaf
--- /dev/null
+++ b/frontend/app/fonts.ts
@@ -0,0 +1,23 @@
+import { Instrument_Sans, Instrument_Serif, JetBrains_Mono } from "next/font/google";
+
+export const serif = Instrument_Serif({
+  subsets: ["latin"],
+  weight: "400",
+  style: ["normal", "italic"],
+  variable: "--font-cat-serif",
+  display: "swap",
+});
+
+export const sans = Instrument_Sans({
+  subsets: ["latin"],
+  variable: "--font-cat-sans",
+  display: "swap",
+});
+
+export const mono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-cat-mono",
+  display: "swap",
+});
+
+export const fontVars = `${serif.variable} ${sans.variable} ${mono.variable}`;
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 2530e65..c75414b 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -1,269 +1,54 @@
-@import "tailwindcss";
-
-/* Class-based dark mode: `dark:` variants follow the `.dark` class on <html>
-   (toggled by ThemeToggle and set by the no-flash init script in layout.tsx),
-   NOT the OS prefers-color-scheme. Without this, Tailwind v4 defaults to the
-   media query and the theme toggle has no effect. */
-@custom-variant dark (&:where(.dark, .dark *));
-
-/* Define theme colors using CSS variables */
-@theme {
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-
-  /* Brand tokens — one semantic scale that flips light/dark via the CSS vars in
-     :root / .dark below. Components use these (text-fg, text-brand, bg-surface…)
-     instead of literal colors + dark: variants. */
-  --color-fg: var(--brand-fg);
-  --color-fg-muted: var(--brand-fg-muted);
-  --color-fg-faint: var(--brand-fg-faint);
-  --color-brand: var(--brand-text);
-  --color-brand-hover: var(--brand-text-hover);
-  --color-brand-solid: var(--brand-solid);
-  --color-brand-solid-hover: var(--brand-solid-hover);
-  --color-on-brand: var(--brand-on);
-  --color-surface: var(--brand-surface);
-  --color-surface-hover: var(--brand-surface-hover);
-  --color-bar: var(--brand-bar);
-  --color-line: var(--brand-line);
-  --color-line-strong: var(--brand-line-strong);
-}
-
-/* CSS variables for light/dark mode */
+/* Catalogue tokens. data-theme on <html> is set before paint by the nonce'd theme-init
+   script (lib/theme-init-script.ts); the media query is the no-JS fallback. */
 :root {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 3.9%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
-  --ring: 0 0% 63.9%;
-  --radius: 0.5rem;
-
-  /* brand palette — light */
-  --brand-fg: #171717; /* primary text (neutral-900) */
-  --brand-fg-muted: #525252; /* body / secondary (neutral-600) */
-  --brand-fg-faint: #737373; /* eyebrows, captions, copyright (neutral-500) */
-  --brand-text: #4d7c0f; /* accent text / links (lime-700) */
-  --brand-text-hover: #65a30d; /* accent hover (lime-600) */
-  --brand-solid: #a3e635; /* accent fill / buttons (lime-400) */
-  --brand-solid-hover: #84cc16; /* accent fill hover (lime-500) */
-  --brand-on: #0a0a0a; /* text on accent fills */
-  --brand-surface: rgba(255, 255, 255, 0.6); /* translucent cards */
-  --brand-surface-hover: rgba(255, 255, 255, 0.75);
-  --brand-bar: rgba(255, 255, 255, 0.8); /* sticky header / footer bar */
-  --brand-line: #e5e5e5; /* hairlines / card borders (neutral-200) */
-  --brand-line-strong: #d4d4d4; /* hover borders (neutral-300) */
-}
-
-.dark {
-  --background: 0 0% 3.9%;
-  --foreground: 0 0% 98%;
-  --card: 0 0% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --popover: 0 0% 3.9%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 0 0% 9%;
-  --secondary: 0 0% 14.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 14.9%;
-  --muted-foreground: 0 0% 63.9%;
-  --accent: 0 0% 14.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 14.9%;
-  --input: 0 0% 14.9%;
-  --ring: 0 0% 83.1%;
-
-  /* brand palette — dark. Inverts the accent the same way the 3D layer inverts
-     the coin: lime → the coin's indigo/blue. Text/surfaces just lighten. Tuned
-     bright so the accent reads on black (a literal RGB-invert of lime is too
-     dark to see). Every brand utility flips here in one place. */
-  --brand-fg: #ffffff;
-  --brand-fg-muted: #a3a3a3; /* neutral-400 */
-  --brand-fg-faint: #737373; /* neutral-500 */
-  --brand-text: #7b83ff; /* accent text / links (indigo) */
-  --brand-text-hover: #aeb6ff;
-  --brand-solid: #7b83ff; /* accent fill / buttons */
-  --brand-solid-hover: #aeb6ff;
-  --brand-on: #0a0a0a;
-  --brand-surface: rgba(23, 23, 23, 0.5); /* neutral-900/50 */
-  --brand-surface-hover: rgba(23, 23, 23, 0.8);
-  --brand-bar: rgba(10, 10, 10, 0.78);
-  --brand-line: rgba(255, 255, 255, 0.06);
-  --brand-line-strong: rgba(255, 255, 255, 0.1);
-}
-
-/* Base styles */
-@layer base {
-  * {
-    border-color: theme(colors.border);
-  }
-
-  html {
-    min-height: 100%;
-  }
-
-  body {
-    min-height: 100%;
-    background-color: theme(colors.background);
-    color: theme(colors.foreground);
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
-  }
-}
-
-/* Animations */
-@keyframes float {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-20px);
-  }
-}
-
-@keyframes gradient {
-  0%,
-  100% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-}
-
-/* Custom utilities */
-@layer utilities {
-  .animate-float {
-    animation: float 6s ease-in-out infinite;
-  }
-
-  .animate-gradient {
-    background-size: 200% 200%;
-    animation: gradient 15s ease infinite;
-  }
-
-  /* Background Grid Pattern */
-  .bg-grid-neutral-200\/50 {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(229 229 229 / 0.5)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
-  }
-
-  .dark\:bg-grid-neutral-800\/50 {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(38 38 38 / 0.5)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
-  }
-}
-
-/* Sonner Toast Enhancements */
-[data-sonner-toaster] {
-  z-index: 9999 !important;
-}
-
-[data-sonner-toast] {
-  background-color: hsl(var(--background)) !important;
-  border-color: hsl(var(--border)) !important;
-  color: hsl(var(--foreground)) !important;
-  box-shadow:
-    0 10px 15px -3px rgb(0 0 0 / 0.1),
-    0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
-}
-
-/* Ensure solid backgrounds in dark mode */
-.dark [data-sonner-toast] {
-  background-color: hsl(0 0% 9%) !important;
-  border-color: hsl(0 0% 20%) !important;
-  color: hsl(0 0% 98%) !important;
-  box-shadow:
-    0 10px 15px -3px rgb(0 0 0 / 0.3),
-    0 4px 6px -4px rgb(0 0 0 / 0.2) !important;
-}
-
-/* Success toast colors */
-[data-sonner-toast][data-type="success"] {
-  background-color: hsl(142 76% 36%) !important;
-  border-color: hsl(142 76% 28%) !important;
-  color: white !important;
-}
-
-/* Error toast colors */
-[data-sonner-toast][data-type="error"] {
-  background-color: hsl(0 84% 60%) !important;
-  border-color: hsl(0 84% 50%) !important;
-  color: white !important;
-}
-
-/* Close button hover effect */
-[data-sonner-toast] [data-close-button] {
-  opacity: 0;
-  transition: opacity 200ms ease-in-out;
-}
-
-[data-sonner-toast]:hover [data-close-button] {
-  opacity: 1;
-}
-
-/* Progress bar for auto-dismiss visualization */
-[data-sonner-toast] {
-  position: relative;
-  overflow: hidden;
-}
-
-[data-sonner-toast]::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 3px;
-  width: 100%;
-  background-color: currentColor;
-  opacity: 0.2;
-  transform-origin: left;
-  animation: toast-progress 5s linear;
-}
-
-@keyframes toast-progress {
-  from {
-    transform: scaleX(1);
-  }
-  to {
-    transform: scaleX(0);
-  }
-}
-
-/* Pause progress on hover */
-[data-sonner-toast]:hover::after {
-  animation-play-state: paused;
+  --paper: #fff;
+  --ink: #111827;
+  --panel: #f1f3f6;
+  --muted: #4a5361;
+  --hl: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%);
+  --hl-ink: inherit;
+  --line: #d9dee5;
+  --lime: #d3e58b;
+  --orange: #ef8b43;
+  --pine: #315b54;
+  --dot: rgba(17, 24, 39, 0.16);
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  --paper: #0b0f19;
+  --ink: #f3f4f6;
+  --panel: #161c2a;
+  --muted: #9aa3b2;
+  --line: #2a3244;
+  --pine: #8fc2b6;
+  --dot: rgba(243, 244, 246, 0.16);
+  --hl: linear-gradient(transparent 14%, var(--lime) 14%, var(--lime) 90%, transparent 90%);
+  --hl-ink: #111827;
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --paper: #0b0f19;
+    --ink: #f3f4f6;
+    --panel: #161c2a;
+    --muted: #9aa3b2;
+    --line: #2a3244;
+    --pine: #8fc2b6;
+    --dot: rgba(243, 244, 246, 0.16);
+    --hl: linear-gradient(transparent 14%, var(--lime) 14%, var(--lime) 90%, transparent 90%);
+    --hl-ink: #111827;
+    color-scheme: dark;
+  }
+}
+
+html {
+  background: var(--paper);
+}
+
+body {
+  margin: 0;
+  background: var(--paper);
+  color: var(--ink);
 }
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 2d8844e..b771fd4 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,13 +1,10 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import { headers } from "next/headers";
-import { ThemedToaster } from "@/components/site/ThemedToaster";
 import { BASE_URL, OG_IMAGE, SITE_CONFIG } from "@/lib/site-config";
 import { THEME_INIT_SCRIPT } from "@/lib/theme-init-script";
+import { fontVars } from "./fonts";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
-
 // env overrides for the shared shell, falling back to the real brand values
 // (not the old scaffolding defaults) so non-homepage routes stay on-brand
 const siteName = process.env.NEXT_PUBLIC_SITE_NAME || SITE_CONFIG.name;
@@ -84,10 +81,7 @@ export default async function RootLayout({
           dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }}
         />
       </head>
-      <body className={inter.className}>
-        {children}
-        <ThemedToaster />
-      </body>
+      <body className={fontVars}>{children}</body>
     </html>
   );
 }
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
deleted file mode 100644
index 3ffd340..0000000
--- a/frontend/app/page.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import type { Metadata } from "next";
-import { FloatingScene } from "@/components/site/FloatingScene";
-import { SiteBackground } from "@/components/site/SiteBackground";
-import { SiteFooter } from "@/components/site/SiteFooter";
-import { SiteHeader } from "@/components/site/SiteHeader";
-import { About } from "@/components/site/sections/About";
-import { Contact } from "@/components/site/sections/Contact";
-import { Hero } from "@/components/site/sections/Hero";
-import { Projects } from "@/components/site/sections/Projects";
-import { Services } from "@/components/site/sections/Services";
-import { BASE_URL, GITHUB_URL, OG_IMAGE, PROJECTS, SITE_CONFIG } from "@/lib/site-config";
-
-const title = `${SITE_CONFIG.name} — ${SITE_CONFIG.tagline}`;
-
-export const metadata: Metadata = {
-  title,
-  description: SITE_CONFIG.description,
-  alternates: { canonical: "/" },
-  openGraph: {
-    title,
-    description: SITE_CONFIG.description,
-    url: BASE_URL,
-    siteName: SITE_CONFIG.name,
-    type: "website",
-    images: [OG_IMAGE],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title,
-    description: SITE_CONFIG.description,
-    site: SITE_CONFIG.twitterCreator,
-    creator: SITE_CONFIG.twitterCreator,
-    images: [OG_IMAGE],
-  },
-};
-
-// schema.org graph — Organization + WebSite + Person (founder) + one
-// SoftwareSourceCode per project. This is the crawlable/answer-engine backbone,
-// server-rendered independently of the WebGL layer.
-const jsonLd = {
-  "@context": "https://schema.org",
-  "@graph": [
-    {
-      "@type": "Organization",
-      "@id": `${BASE_URL}/#org`,
-      name: SITE_CONFIG.name,
-      url: BASE_URL,
-      logo: `${BASE_URL}${SITE_CONFIG.logo}`,
-      description: SITE_CONFIG.description,
-      founder: { "@id": `${BASE_URL}/#scott` },
-      sameAs: [GITHUB_URL, SITE_CONFIG.twitterUrl],
-      contactPoint: {
-        "@type": "ContactPoint",
-        email: "hello@codeswhat.com",
-        contactType: "customer support",
-      },
-    },
-    {
-      "@type": "WebSite",
-      "@id": `${BASE_URL}/#website`,
-      url: BASE_URL,
-      name: SITE_CONFIG.name,
-      publisher: { "@id": `${BASE_URL}/#org` },
-    },
-    {
-      "@type": "Person",
-      "@id": `${BASE_URL}/#scott`,
-      name: SITE_CONFIG.author.name,
-      url: SITE_CONFIG.author.url,
-    },
-    ...PROJECTS.map((p) => ({
-      "@type": "SoftwareSourceCode",
-      name: p.name,
-      description: p.description,
-      codeRepository: p.href,
-      author: { "@id": `${BASE_URL}/#org` },
-    })),
-  ],
-};
-
-export default function Home() {
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-      />
-      <SiteBackground />
-      <FloatingScene />
-
-      <a
-        href="#main-content"
-        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:rounded-md focus:bg-white focus:px-4 focus:py-2 focus:text-neutral-900 focus:shadow-lg dark:focus:bg-neutral-900 dark:focus:text-neutral-100"
-      >
-        Skip to content
-      </a>
-
-      <div className="relative z-10">
-        <SiteHeader />
-        <main id="main-content">
-          <Hero />
-          <Projects />
-          <Services />
-          <About />
-          <Contact />
-        </main>
-        <SiteFooter />
-      </div>
-    </>
-  );
-}
diff --git a/frontend/app/sitemap.ts b/frontend/app/sitemap.ts
index 36dfa68..7604900 100644
--- a/frontend/app/sitemap.ts
+++ b/frontend/app/sitemap.ts
@@ -1,8 +1,8 @@
 import type { MetadataRoute } from "next";
+import { PROJECT_SLUGS } from "@/lib/project-slugs";
 import { BASE_URL } from "@/lib/site-config";
 
 export default function sitemap(): MetadataRoute.Sitemap {
-  // Add your routes here as you create new pages
   const routes = [
     {
       url: BASE_URL,
@@ -10,13 +10,18 @@ export default function sitemap(): MetadataRoute.Sitemap {
       changeFrequency: "weekly" as const,
       priority: 1,
     },
-    // Example of additional pages (uncomment and modify as needed):
-    // {
-    //   url: `${BASE_URL}/about`,
-    //   lastModified: new Date(),
-    //   changeFrequency: 'monthly' as const,
-    //   priority: 0.8,
-    // },
+    {
+      url: `${BASE_URL}/support`,
+      lastModified: new Date(),
+      changeFrequency: "monthly" as const,
+      priority: 0.5,
+    },
+    ...PROJECT_SLUGS.map((slug) => ({
+      url: `${BASE_URL}/projects/${slug}`,
+      lastModified: new Date(),
+      changeFrequency: "monthly" as const,
+      priority: 0.7,
+    })),
   ];
 
   return routes;
diff --git a/frontend/app/studio/balloon/page.tsx b/frontend/app/studio/balloon/page.tsx
index 6a41e4c..1c23f14 100644
--- a/frontend/app/studio/balloon/page.tsx
+++ b/frontend/app/studio/balloon/page.tsx
@@ -1,5 +1,5 @@
 import { notFound } from "next/navigation";
-import { BalloonStudio } from "@/components/site/scene/BalloonStudio";
+import { BalloonStudio } from "@/components/studio/BalloonStudio";
 
 /**
  * Dev-only capture harness for minting a mascot balloon as a transparent icon /
diff --git a/frontend/app/studio/coin/page.tsx b/frontend/app/studio/coin/page.tsx
index e6cd6d8..51d5e58 100644
--- a/frontend/app/studio/coin/page.tsx
+++ b/frontend/app/studio/coin/page.tsx
@@ -1,5 +1,5 @@
 import { notFound } from "next/navigation";
-import { CoinStudio } from "@/components/site/scene/CoinStudio";
+import { CoinStudio } from "@/components/studio/CoinStudio";
 
 /**
  * Dev-only capture harness for minting the spinning coin as a transparent
diff --git a/frontend/components.json b/frontend/components.json
deleted file mode 100644
index 4ee62ee..0000000
--- a/frontend/components.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "app/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}
diff --git a/frontend/components/EmailSignupForm.tsx b/frontend/components/EmailSignupForm.tsx
deleted file mode 100644
index 19a7896..0000000
--- a/frontend/components/EmailSignupForm.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-"use client";
-
-import { Bell, Loader2 } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
-
-export function EmailSignupForm() {
-  const [email, setEmail] = useState("");
-  const [honeypot, setHoneypot] = useState(""); // Bot trap
-  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    // Check honeypot (anti-bot)
-    if (honeypot) {
-      setStatus("success");
-      toast.success("What's next? Check your inbox to find out 👀", {
-        icon: "🎯",
-        duration: 5000,
-      });
-      return; // Silently fail for bots
-    }
-
-    // Client-side validation
-    const trimmedEmail = email.trim().toLowerCase();
-
-    // Basic email format check
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(trimmedEmail)) {
-      setStatus("error");
-      toast.error("⚠️ Please enter a valid email address");
-      return;
-    }
-
-    // Length check
-    if (trimmedEmail.length > 254) {
-      setStatus("error");
-      toast.error("📏 Email address is too long");
-      return;
-    }
-
-    setStatus("loading");
-
-    try {
-      const response = await fetch("/api/subscribe", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ email: trimmedEmail }),
-      });
-
-      const data = await response.json();
-
-      if (response.ok) {
-        setStatus("success");
-        toast.success("What's next? Check your inbox to find out 👀", {
-          icon: "🎯",
-          duration: 5000,
-        });
-        setEmail(""); // Clear the input
-
-        // Reset form after 10 seconds
-        setTimeout(() => {
-          setStatus("idle");
-        }, 10000);
-      } else {
-        setStatus("error");
-        toast.error(data.error || "❌ Something went wrong", {
-          duration: 5000,
-        });
-
-        // Reset error after 5 seconds
-        setTimeout(() => {
-          setStatus("idle");
-        }, 5000);
-      }
-    } catch {
-      setStatus("error");
-      toast.error("🌐 Network error. Please check your connection and try again.", {
-        duration: 5000,
-      });
-
-      // Reset error after 5 seconds
-      setTimeout(() => {
-        setStatus("idle");
-      }, 5000);
-    }
-  };
-
-  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    // Prevent excessive length on input
-    if (value.length <= 254) {
-      setEmail(value);
-    }
-  };
-
-  return (
-    <div>
-      <h3 className="mb-2 flex items-center justify-center gap-2 text-lg font-semibold text-fg">
-        <Bell className="h-5 w-5" />
-        Get Notified
-      </h3>
-      <p className="mb-4 text-sm text-fg-muted">
-        Be the first to know when we launch our services!
-      </p>
-
-      <form onSubmit={handleSubmit} className="flex flex-col gap-3 sm:flex-row">
-        <input
-          type="email"
-          placeholder="your@email.com"
-          value={email}
-          onChange={handleEmailChange}
-          className="flex-1 rounded-md border border-line bg-white px-4 py-2 text-sm focus:border-neutral-400 focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 focus:outline-none disabled:opacity-50 dark:bg-neutral-950 dark:focus:border-neutral-600 dark:focus:ring-neutral-600"
-          required
-          disabled={status === "loading" || status === "success"}
-          maxLength={254}
-          autoComplete="email"
-          inputMode="email"
-        />
-
-        {/* Honeypot field - hidden from users, visible to bots */}
-        <input
-          type="text"
-          name="website"
-          value={honeypot}
-          onChange={(e) => setHoneypot(e.target.value)}
-          className="sr-only"
-          tabIndex={-1}
-          autoComplete="off"
-          aria-hidden="true"
-        />
-
-        <Button
-          type="submit"
-          className="w-full sm:w-auto"
-          disabled={status === "loading" || status === "success"}
-        >
-          {status === "loading" ? (
-            <>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              Subscribing...
-            </>
-          ) : status === "success" ? (
-            "✓ Subscribed!"
-          ) : (
-            "Notify Me"
-          )}
-        </Button>
-      </form>
-    </div>
-  );
-}
diff --git a/frontend/components/catalogue/EmailSignupForm.tsx b/frontend/components/catalogue/EmailSignupForm.tsx
new file mode 100644
index 0000000..4ab3e66
--- /dev/null
+++ b/frontend/components/catalogue/EmailSignupForm.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import posthog from "posthog-js";
+import { useState } from "react";
+import styles from "./catalogue.module.css";
+
+// Maps the /api/subscribe status to a fixed error_class. Never the email or the
+// response text; the sanitizer drops anything outside this list.
+function classifyNewsletterError(status: number) {
+  if (status === 429) return "rate_limited";
+  if (status === 400) return "invalid_email";
+  return "unavailable";
+}
+
+type Status = "idle" | "loading" | "success" | "error";
+
+export function EmailSignupForm() {
+  const [email, setEmail] = useState("");
+  const [honeypot, setHoneypot] = useState(""); // Bot trap
+  const [status, setStatus] = useState<Status>("idle");
+  const [message, setMessage] = useState("");
+
+  const fail = (text: string) => {
+    setStatus("error");
+    setMessage(text);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Check honeypot (anti-bot): pretend it worked, send nothing.
+    if (honeypot) {
+      setStatus("success");
+      setMessage("Thanks. Check your inbox to find out what's next.");
+      return;
+    }
+
+    const trimmedEmail = email.trim().toLowerCase();
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmedEmail)) {
+      fail("Please enter a valid email address.");
+      return;
+    }
+    if (trimmedEmail.length > 254) {
+      fail("That email address is too long.");
+      return;
+    }
+
+    setStatus("loading");
+    setMessage("");
+
+    try {
+      const response = await fetch("/api/subscribe", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: trimmedEmail }),
+      });
+      const data = await response.json().catch(() => ({}));
+
+      if (response.ok) {
+        posthog.capture("newsletter submitted", { result: "success" });
+        setStatus("success");
+        setMessage("Thanks. Check your inbox to find out what's next.");
+        setEmail("");
+      } else {
+        posthog.capture("newsletter submitted", {
+          result: "error",
+          error_class: classifyNewsletterError(response.status),
+        });
+        fail(typeof data.error === "string" ? data.error : "Something went wrong. Try again.");
+      }
+    } catch {
+      posthog.capture("newsletter submitted", { result: "error", error_class: "network" });
+      fail("Network error. Check your connection and try again.");
+    }
+  };
+
+  const busy = status === "loading" || status === "success";
+
+  return (
+    <form onSubmit={handleSubmit} className={styles.signup} noValidate>
+      <label htmlFor="signup-email" className={styles.signupLabel}>
+        A note when something new ships. No spam.
+      </label>
+      <div className={styles.signupRow}>
+        <input
+          id="signup-email"
+          type="email"
+          name="email"
+          placeholder="your@email.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value.slice(0, 254))}
+          className={styles.signupInput}
+          required
+          disabled={busy}
+          maxLength={254}
+          autoComplete="email"
+          inputMode="email"
+        />
+
+        {/* Honeypot field: hidden from people, visible to bots */}
+        <input
+          type="text"
+          name="website"
+          value={honeypot}
+          onChange={(e) => setHoneypot(e.target.value)}
+          className={styles.srOnly}
+          tabIndex={-1}
+          autoComplete="off"
+          aria-hidden="true"
+        />
+
+        <button type="submit" className={styles.btnLine} disabled={busy}>
+          {status === "loading"
+            ? "Subscribing..."
+            : status === "success"
+              ? "Subscribed"
+              : "Notify me"}
+        </button>
+      </div>
+      <p
+        className={styles.signupMsg}
+        data-state={status}
+        role={status === "error" ? "alert" : "status"}
+      >
+        {message}
+      </p>
+    </form>
+  );
+}
diff --git a/frontend/components/catalogue/Footer.tsx b/frontend/components/catalogue/Footer.tsx
new file mode 100644
index 0000000..54d5d47
--- /dev/null
+++ b/frontend/components/catalogue/Footer.tsx
@@ -0,0 +1,38 @@
+import { GITHUB_URL, SITE_CONFIG } from "@/lib/site-config";
+import styles from "./catalogue.module.css";
+import { EmailSignupForm } from "./EmailSignupForm";
+import { SponsorsStrip } from "./SponsorsStrip";
+import { TrackedCtaLink } from "./TrackedCtaLink";
+
+export function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.footerTop}>
+        <EmailSignupForm />
+        <div className={styles.footerLinks}>
+          <TrackedCtaLink
+            href={GITHUB_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            placement="footer"
+            ctaId="github_org"
+          >
+            GitHub<span className={styles.srOnly}> (opens in a new tab)</span>
+          </TrackedCtaLink>
+          <a href={SITE_CONFIG.twitterUrl} target="_blank" rel="noopener noreferrer">
+            X<span className={styles.srOnly}> (opens in a new tab)</span>
+          </a>
+          <a href="mailto:hello@codeswhat.com">hello@codeswhat.com</a>
+        </div>
+      </div>
+      <SponsorsStrip />
+      <p className={styles.wordmark} aria-hidden="true">
+        CodesWhat<em>?</em>
+      </p>
+      <p className={styles.fine}>
+        Open source, no telemetry in the projects. This site counts visits with cookieless,
+        anonymous stats and nothing more.
+      </p>
+    </footer>
+  );
+}
diff --git a/frontend/components/catalogue/Shell.tsx b/frontend/components/catalogue/Shell.tsx
new file mode 100644
index 0000000..5c09776
--- /dev/null
+++ b/frontend/components/catalogue/Shell.tsx
@@ -0,0 +1,44 @@
+import Link from "next/link";
+import { GITHUB_URL } from "@/lib/site-config";
+import styles from "./catalogue.module.css";
+import { Sprite } from "./Sprite";
+import { ThemeToggle } from "./ThemeToggle";
+import { TrackedCtaLink } from "./TrackedCtaLink";
+
+export function Shell({ children }: { children: React.ReactNode }) {
+  return (
+    <div className={styles.root}>
+      <a className={styles.skip} href="#main">
+        Skip to content
+      </a>
+      <header className={styles.masthead}>
+        <div className={styles.mastheadMain}>
+          <Link href="/" className={styles.brand}>
+            <Sprite slug="coin" scale={1} label="" decorative className={styles.coin} />
+            <span>
+              CodesWhat<em>?</em>
+            </span>
+          </Link>
+          <nav aria-label="Primary" className={styles.nav}>
+            <Link href="/#specimens">Specimens</Link>
+            <Link href="/#services">Services</Link>
+            <Link href="/support" className={styles.navQuiet}>
+              Support
+            </Link>
+            <TrackedCtaLink
+              href={GITHUB_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              placement="header"
+              ctaId="github_org"
+            >
+              GitHub<span className={styles.srOnly}> (opens in a new tab)</span>
+            </TrackedCtaLink>
+          </nav>
+          <ThemeToggle />
+        </div>
+      </header>
+      {children}
+    </div>
+  );
+}
diff --git a/frontend/components/catalogue/SponsorsStrip.tsx b/frontend/components/catalogue/SponsorsStrip.tsx
new file mode 100644
index 0000000..fe7dab7
--- /dev/null
+++ b/frontend/components/catalogue/SponsorsStrip.tsx
@@ -0,0 +1,22 @@
+import Image from "next/image";
+import { companies } from "@/lib/supporters";
+import styles from "./catalogue.module.css";
+
+/** Compact company-sponsor logos for the footer. Renders nothing while there are none. */
+export function SponsorsStrip() {
+  if (companies.length === 0) return null;
+  return (
+    <div className={styles.sponsorsStrip}>
+      <p className={styles.eyebrow}>Sponsors</p>
+      <ul className={styles.logoRow}>
+        {companies.map((company) => (
+          <li key={company.name}>
+            <a href={company.url} target="_blank" rel="noopener noreferrer">
+              <Image src={company.logo} alt={company.name} width={96} height={32} />
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/frontend/components/catalogue/Sprite.tsx b/frontend/components/catalogue/Sprite.tsx
new file mode 100644
index 0000000..7706723
--- /dev/null
+++ b/frontend/components/catalogue/Sprite.tsx
@@ -0,0 +1,66 @@
+import { type Palette, SPRITES } from "./sprites";
+
+const BASE: Palette = { k: "var(--ink)" };
+
+/** Longest side across the whole set, so one integer scale fits every sprite and they all share an art-pixel size. */
+const SET_MAX = Math.max(
+  ...Object.values(SPRITES).flatMap((a) => [a.rows.length, ...a.rows.map((r) => r.length)]),
+);
+
+/**
+ * Draws a row-string sprite as whole-pixel SVG paths, one path per colour. Width and height are
+ * the grid size times an integer scale, so every art pixel lands on whole CSS pixels.
+ */
+export function Sprite({
+  slug,
+  scale,
+  fit,
+  label,
+  decorative = false,
+  className,
+}: {
+  slug: string;
+  scale: number;
+  /** when set, the largest whole-number scale that keeps the biggest sprite in the set inside a fit x fit box, so every sprite uses the same scale */
+  fit?: number;
+  label: string;
+  decorative?: boolean;
+  className?: string;
+}) {
+  const art = SPRITES[slug];
+  if (!art) throw new Error(`no sprite for ${slug}`);
+  const colors = { ...BASE, ...art.palette };
+  const w = Math.max(...art.rows.map((r) => r.length));
+  const h = art.rows.length;
+  const px = fit ? Math.max(1, Math.floor(fit / SET_MAX)) : scale;
+  const paths = new Map<string, string>();
+  art.rows.forEach((row, y) => {
+    let x = 0;
+    while (x < row.length) {
+      const ch = row[x];
+      let end = x + 1;
+      while (end < row.length && row[end] === ch) end++;
+      if (ch !== "." && colors[ch]) {
+        paths.set(ch, `${paths.get(ch) ?? ""}M${x} ${y}h${end - x}v1h-${end - x}z`);
+      }
+      x = end;
+    }
+  });
+  return (
+    <svg
+      viewBox={`0 0 ${w} ${h}`}
+      width={w * px}
+      height={h * px}
+      role={decorative ? undefined : "img"}
+      aria-label={decorative ? undefined : label}
+      aria-hidden={decorative ? true : undefined}
+      shapeRendering="crispEdges"
+      className={className}
+      style={{ maxWidth: "100%", height: "auto" }}
+    >
+      {[...paths].map(([ch, d]) => (
+        <path key={ch} d={d} style={{ fill: colors[ch] }} />
+      ))}
+    </svg>
+  );
+}
diff --git a/frontend/components/catalogue/SupportLink.tsx b/frontend/components/catalogue/SupportLink.tsx
new file mode 100644
index 0000000..3eb9311
--- /dev/null
+++ b/frontend/components/catalogue/SupportLink.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import type { AnchorHTMLAttributes } from "react";
+import { TrackedCtaLink } from "@/components/catalogue/TrackedCtaLink";
+
+type SupportLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+  href: string;
+  /** fixed analytics vocabulary id, e.g. sponsors_github or support_monthly-5 */
+  ctaId: string;
+};
+
+/**
+ * A support or funding link. Fires `cta activated` with a fixed cta_id and the
+ * support placement only; the href never reaches analytics.
+ */
+export function SupportLink({ ctaId, ...props }: SupportLinkProps) {
+  return <TrackedCtaLink ctaId={ctaId} placement="support" {...props} />;
+}
diff --git a/frontend/components/catalogue/Supporters.tsx b/frontend/components/catalogue/Supporters.tsx
new file mode 100644
index 0000000..04b0642
--- /dev/null
+++ b/frontend/components/catalogue/Supporters.tsx
@@ -0,0 +1,46 @@
+import Image from "next/image";
+import Link from "next/link";
+import { companies, people } from "@/lib/supporters";
+import styles from "./catalogue.module.css";
+
+/** Supporters list for /support. Renders one invitation line while the list is empty. */
+export function Supporters() {
+  if (companies.length === 0 && people.length === 0) {
+    return (
+      <p className={styles.detailEmpty}>
+        No supporters yet. Pick a <Link href="#tiers">tier</Link> and yours could be the first name
+        here.
+      </p>
+    );
+  }
+  return (
+    <div className={styles.supporters}>
+      {companies.length > 0 && (
+        <ul className={styles.logoRow}>
+          {companies.map((company) => (
+            <li key={company.name}>
+              <a href={company.url} target="_blank" rel="noopener noreferrer">
+                <Image src={company.logo} alt={company.name} width={120} height={40} />
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+      {people.length > 0 && (
+        <ul className={styles.peopleRow}>
+          {people.map((person) => (
+            <li key={person.name}>
+              {person.url ? (
+                <a href={person.url} target="_blank" rel="noopener noreferrer">
+                  {person.name}
+                </a>
+              ) : (
+                person.name
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/components/catalogue/ThemeToggle.tsx b/frontend/components/catalogue/ThemeToggle.tsx
new file mode 100644
index 0000000..75ba3b0
--- /dev/null
+++ b/frontend/components/catalogue/ThemeToggle.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import styles from "./catalogue.module.css";
+
+/**
+ * Flips data-theme on <html> and saves the explicit choice under the `theme` key, which the
+ * nonce'd init script in the root layout reads back before first paint. Reading the DOM at
+ * click time keeps this correct without any state to hydrate.
+ */
+export function ThemeToggle() {
+  const toggle = () => {
+    const root = document.documentElement;
+    const next = root.dataset.theme === "dark" ? "light" : "dark";
+    root.dataset.theme = next;
+    root.style.colorScheme = next;
+    try {
+      localStorage.setItem("theme", next);
+    } catch {}
+  };
+
+  return (
+    <button type="button" className={styles.themeBtn} onClick={toggle}>
+      Paper / Ink<span className={styles.srOnly}> (toggle light and dark theme)</span>
+    </button>
+  );
+}
diff --git a/frontend/components/site/TrackedCtaLink.tsx b/frontend/components/catalogue/TrackedCtaLink.tsx
similarity index 56%
rename from frontend/components/site/TrackedCtaLink.tsx
rename to frontend/components/catalogue/TrackedCtaLink.tsx
index d4ae1cd..384c29d 100644
--- a/frontend/components/site/TrackedCtaLink.tsx
+++ b/frontend/components/catalogue/TrackedCtaLink.tsx
@@ -4,17 +4,24 @@ import posthog from "posthog-js";
 import type { AnchorHTMLAttributes } from "react";
 
 type TrackedCtaLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
-  placement: "header" | "hero" | "footer";
+  placement: "header" | "hero" | "footer" | "projects" | "support";
+  /** Must be in ALLOWED_CTA_IDS (lib/posthog-privacy.ts) or the sanitizer drops the event. */
+  ctaId?: string;
 };
 
-export function TrackedCtaLink({ placement, onClick, ...props }: TrackedCtaLinkProps) {
+export function TrackedCtaLink({
+  placement,
+  ctaId = "github_org",
+  onClick,
+  ...props
+}: TrackedCtaLinkProps) {
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: this link records an allowlisted outbound CTA.
     <a
       {...props}
       // biome-ignore lint/a11y/useValidAnchor: this remains an anchor for native link behavior.
       onClick={(event) => {
-        posthog.capture("cta activated", { cta_id: "github_org", placement });
+        posthog.capture("cta activated", { cta_id: ctaId, placement });
         onClick?.(event);
       }}
     />
diff --git a/frontend/components/catalogue/catalogue.module.css b/frontend/components/catalogue/catalogue.module.css
new file mode 100644
index 0000000..168ef3b
--- /dev/null
+++ b/frontend/components/catalogue/catalogue.module.css
@@ -0,0 +1,1340 @@
+.root {
+  position: relative;
+  min-height: 100vh;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--font-cat-sans), system-ui, sans-serif;
+  font-size: 17px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+}
+
+.root *,
+.root *::before,
+.root *::after {
+  box-sizing: border-box;
+}
+
+.root a {
+  color: var(--pine);
+  text-underline-offset: 3px;
+}
+
+.root ::selection {
+  background: var(--lime);
+  color: #111827;
+}
+
+.root :focus-visible {
+  outline: 2px solid var(--orange);
+  outline-offset: 3px;
+}
+
+.skip {
+  position: absolute;
+  left: 12px;
+  top: -60px;
+  z-index: 10;
+  background: var(--lime);
+  color: #111827 !important;
+  padding: 10px 14px;
+}
+.skip:focus {
+  top: 12px;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* masthead */
+.masthead {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+.mastheadMain {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px 24px;
+  padding: 10px 0;
+  border-bottom: 2px solid var(--ink);
+}
+.brand {
+  font-family: var(--font-cat-serif), serif;
+  font-size: 34px;
+  line-height: 1;
+  color: var(--ink) !important;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+}
+.brand em,
+.wordmark em {
+  font-style: italic;
+  background: var(--lime);
+  color: #111827;
+  padding: 0 0.06em;
+  margin-left: 0.04em;
+}
+.nav {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0 4px;
+  margin-left: auto;
+}
+.nav a,
+.themeBtn {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 10px;
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--ink) !important;
+  text-decoration: none;
+}
+.nav a:hover {
+  text-decoration: underline;
+}
+.themeBtn {
+  background: none;
+  border: 1px solid var(--ink);
+  border-radius: 4px;
+  cursor: pointer;
+  margin-left: 0;
+}
+.themeBtn:hover {
+  background: var(--lime);
+  color: #111827 !important;
+}
+
+/* shared type */
+.main {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px 40px;
+}
+.eyebrow {
+  margin: 0 0 14px;
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.display {
+  margin: 0;
+  font-family: var(--font-cat-serif), serif;
+  font-weight: 400;
+  font-size: clamp(60px, 12.4vw, 200px);
+  line-height: 1;
+  letter-spacing: -0.03em;
+  text-wrap: balance;
+}
+.displayMid {
+  font-size: clamp(48px, 8.4vw, 124px);
+  line-height: 0.97;
+}
+.display em,
+.h2 em {
+  font-style: italic;
+  background: var(--hl);
+  color: var(--hl-ink);
+  padding: 0 0.08em;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+.h2 {
+  margin: 0;
+  font-family: var(--font-cat-serif), serif;
+  font-weight: 400;
+  font-size: clamp(38px, 5vw, 72px);
+  line-height: 1;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+.h3 {
+  margin: 0 0 6px;
+  font-family: var(--font-cat-serif), serif;
+  font-weight: 400;
+  font-size: 30px;
+  line-height: 1.05;
+}
+.lede,
+.sectionLede {
+  max-width: 56ch;
+  margin: 28px 0 0;
+  font-size: 19px;
+  color: var(--muted);
+}
+.sectionLede {
+  margin-top: 18px;
+  font-size: 17px;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 48px;
+  padding: 56px 0 72px;
+  border-bottom: 1px solid var(--ink);
+}
+@media (min-width: 1000px) {
+  .hero .statement {
+    width: 340px;
+    justify-self: end;
+    margin-top: -150px;
+    margin-right: 12px;
+    z-index: 2;
+  }
+}
+
+/* buttons */
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 32px;
+}
+.btnLime,
+.btnLine,
+.btnOff {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: 0 22px;
+  border-radius: 4px;
+  border: 1px solid var(--ink);
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  text-decoration: none;
+  cursor: pointer;
+}
+.root a.btnLime {
+  background: var(--lime);
+  color: #111827;
+}
+.root a.btnLine {
+  background: transparent;
+  color: var(--ink);
+}
+.btnLime:hover,
+.btnLine:hover {
+  transform: translateY(-1px);
+  box-shadow: 3px 3px 0 var(--ink);
+}
+.btnOff {
+  background: transparent;
+  color: var(--muted);
+  border-style: dashed;
+  border-color: var(--muted);
+  cursor: not-allowed;
+  margin-top: 14px;
+}
+
+/* statement card */
+.statement {
+  position: relative;
+  padding: 28px;
+  background-color: var(--panel);
+  background-image: radial-gradient(var(--dot) 1px, transparent 1.5px);
+  background-size: 14px 14px;
+  border: 1px solid var(--ink);
+  border-radius: 4px;
+  transform: rotate(1.6deg);
+  box-shadow: 8px 8px 0 var(--lime);
+}
+.statementRows {
+  margin: 0;
+}
+.statementRows > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px dashed var(--muted);
+}
+.statementRows dt {
+  font-size: 14px;
+  color: var(--muted);
+}
+.statementRows dd {
+  margin: 0;
+  font-family: var(--font-cat-serif), serif;
+  font-size: 24px;
+  line-height: 1.1;
+  text-align: right;
+}
+.statementNote {
+  margin: 16px 0 0;
+  font-size: 14px;
+  font-style: italic;
+}
+
+/* sections */
+.section {
+  padding: 72px 0;
+  border-bottom: 1px solid var(--ink);
+}
+.sectionHead {
+  margin-bottom: 40px;
+}
+
+/* tables */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 15px;
+}
+.table th,
+.table td {
+  padding: 18px 14px 18px 0;
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid var(--line);
+}
+.table thead th {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-top: 2px solid var(--ink);
+  border-bottom: 1px solid var(--ink);
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.table tfoot th,
+.table tfoot td {
+  border-top: 2px solid var(--ink);
+  border-bottom: 2px solid var(--ink);
+  padding-top: 14px;
+  padding-bottom: 14px;
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.num {
+  text-align: right !important;
+  white-space: nowrap;
+}
+.cellNo {
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  color: var(--muted);
+  width: 56px;
+}
+.cellTitle {
+  min-width: 240px;
+}
+.titleLink {
+  font-family: var(--font-cat-serif), serif;
+  font-size: 30px;
+  line-height: 1.05;
+  color: var(--ink) !important;
+  text-decoration-color: var(--lime);
+  text-decoration-thickness: 3px;
+  display: inline-block;
+}
+.titleLink:hover {
+  background: var(--lime);
+  color: #111827 !important;
+}
+.oneLiner {
+  display: block;
+  margin-top: 4px;
+  color: var(--muted);
+}
+.tbd {
+  display: inline-block;
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  background: repeating-linear-gradient(-45deg, transparent 0 5px, var(--line) 5px 6px);
+  border: 1px dashed var(--muted);
+  border-radius: 3px;
+  padding: 3px 7px;
+  max-width: 100%;
+  white-space: normal;
+}
+.quiet {
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  color: var(--muted);
+}
+.coveredText {
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+}
+.meter {
+  display: block;
+  width: 110px;
+  max-width: 100%;
+  height: 8px;
+  margin-bottom: 8px;
+  border: 1px solid var(--ink);
+  border-radius: 1px;
+  background: repeating-linear-gradient(90deg, transparent 0 9px, var(--line) 9px 10px);
+}
+.tableNote {
+  max-width: 70ch;
+  margin: 24px 0 0;
+  color: var(--muted);
+  font-size: 15px;
+}
+
+/* services */
+.services {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-top: 2px solid var(--ink);
+}
+.services li {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  column-gap: 24px;
+  padding: 40px 0;
+  border-bottom: 2px solid var(--ink);
+}
+.services li p {
+  margin: 8px 0 0;
+  max-width: 54ch;
+  font-size: 18px;
+  color: var(--muted);
+  grid-column: 2;
+}
+.services li .h3 {
+  grid-column: 2;
+  font-size: clamp(38px, 5.6vw, 80px);
+  line-height: 1;
+}
+.bigNo {
+  grid-row: 1 / span 2;
+  font-family: var(--font-cat-serif), serif;
+  font-style: italic;
+  font-size: 110px;
+  line-height: 0.85;
+  color: var(--orange);
+}
+
+.specs {
+  margin: 0;
+  border-top: 2px solid var(--ink);
+}
+.specs > div {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  gap: 16px;
+  padding: 14px 0;
+  border-bottom: 1px dashed var(--muted);
+}
+.specs dt {
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+  padding-top: 4px;
+}
+.specs dd {
+  margin: 0;
+}
+
+/* support: menu */
+.menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0 64px;
+  grid-template-columns: minmax(0, 1fr);
+  border-top: 2px solid var(--ink);
+}
+@media (min-width: 900px) {
+  .menu {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.menu li {
+  padding: 28px 0;
+  border-bottom: 1px solid var(--line);
+}
+.menuRow {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+}
+.menuName {
+  margin: 0;
+  font-family: var(--font-cat-serif), serif;
+  font-weight: 400;
+  font-size: 40px;
+  line-height: 1;
+}
+.leader {
+  flex: 1;
+  min-width: 20px;
+  border-bottom: 2px dotted var(--ink);
+  transform: translateY(-6px);
+}
+.menuPrice {
+  font-family: var(--font-cat-serif), serif;
+  font-size: 40px;
+  line-height: 1;
+  white-space: nowrap;
+}
+.menuPrice small {
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.menuLine {
+  margin: 10px 0 0;
+  color: var(--muted);
+  max-width: 44ch;
+}
+
+.clauses {
+  margin: 0;
+  padding: 0 0 0 1.4em;
+  text-align: left;
+  display: grid;
+  gap: 14px;
+}
+.clauses li::marker {
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 12px;
+}
+
+/* footer */
+.footer {
+  container-type: inline-size;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 24px 24px 40px;
+}
+.footerLinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 8px;
+}
+.footerLinks a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 10px 0 0;
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.wordmark {
+  margin: 8px 0 0;
+  font-family: var(--font-cat-serif), serif;
+  font-size: 25cqw;
+  line-height: 0.9;
+  letter-spacing: -0.04em;
+  white-space: nowrap;
+}
+.fine {
+  margin: 12px 0 0;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+/* mobile: tables collapse to cards */
+@media (max-width: 860px) {
+  .table,
+  .table tbody,
+  .table tfoot,
+  .table tr,
+  .table td,
+  .table th {
+    display: block;
+  }
+  .table thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+  }
+  .table tbody tr {
+    padding: 18px 0;
+    border-top: 2px solid var(--ink);
+  }
+  .table tbody tr:last-child {
+    border-bottom: 1px solid var(--ink);
+  }
+  .table td {
+    display: grid;
+    grid-template-columns: 96px minmax(0, 1fr);
+    gap: 12px;
+    padding: 8px 0;
+    border: 0;
+    text-align: left !important;
+    white-space: normal;
+  }
+  .table td::before {
+    content: attr(data-label);
+    font-family: var(--font-cat-mono), monospace;
+    font-size: 11px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--muted);
+    padding-top: 3px;
+  }
+  .table td.cellTitle {
+    display: block;
+    min-width: 0;
+  }
+  .table td.cellTitle::before,
+  .table td.cellNo::before {
+    display: none;
+  }
+  .table td.cellNo {
+    display: block;
+    padding-bottom: 0;
+  }
+  .table td.cellTitle .titleLink {
+    font-size: 34px;
+  }
+  .table tfoot th {
+    border: 0;
+    border-top: 2px solid var(--ink);
+    padding-bottom: 4px;
+  }
+  .table tfoot td {
+    border: 0;
+    padding-top: 4px;
+    padding-bottom: 8px;
+  }
+  .table tfoot tr {
+    border-bottom: 2px solid var(--ink);
+    padding-bottom: 8px;
+  }
+  .services li {
+    grid-template-columns: 64px minmax(0, 1fr);
+    column-gap: 14px;
+  }
+  .bigNo {
+    font-size: 52px;
+  }
+  .statement {
+    transform: rotate(0.8deg);
+    margin-right: 8px;
+  }
+  .specs > div {
+    grid-template-columns: 1fr;
+    gap: 2px;
+  }
+}
+
+@media (max-width: 480px) {
+  .root {
+    font-size: 16px;
+  }
+  .masthead,
+  .main,
+  .footer {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  .menuName,
+  .menuPrice {
+    font-size: 32px;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .btnLime,
+  .btnLine {
+    transition: transform 0.12s ease, box-shadow 0.12s ease;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .btnLime:hover,
+  .btnLine:hover {
+    transform: none;
+  }
+}
+
+/* extra motifs */
+.dotCard {
+  position: relative;
+  padding: 22px 24px;
+  background-color: var(--panel);
+  background-image: radial-gradient(var(--dot) 1px, transparent 1.5px);
+  background-size: 14px 14px;
+  border: 1px solid var(--ink);
+  border-radius: 4px;
+  transform: rotate(-2deg);
+  box-shadow: 6px 6px 0 var(--lime);
+  max-width: 300px;
+}
+.dotCard p {
+  margin: 0;
+}
+.dotCardBig {
+  font-family: var(--font-cat-serif), serif;
+  font-style: italic;
+  font-size: 30px;
+  line-height: 1.05;
+}
+.headRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+}
+.sponsorBar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px 24px;
+  padding: 20px 24px;
+  margin-bottom: 40px;
+  border: 1px solid var(--ink);
+  border-radius: 4px;
+  background: var(--panel);
+}
+.sponsorBar p {
+  margin: 0;
+  flex: 1 1 260px;
+}
+.btnOff {
+  width: 100%;
+  justify-content: space-between;
+  gap: 12px;
+  background: var(--panel);
+  border-style: solid;
+  border-color: var(--muted);
+  color: var(--muted);
+  opacity: 1;
+}
+.btnOff b {
+  font-weight: 400;
+  color: var(--ink);
+}
+.btnOff span {
+  text-align: right;
+  color: var(--muted);
+}
+@media (min-width: 560px) {
+  .btnOff {
+    width: auto;
+    min-width: 280px;
+  }
+}
+.detailEmpty {
+  color: var(--muted);
+}
+@media (max-width: 860px) {
+  .table tbody tr.rowTbd td.hideTbd {
+    display: none;
+  }
+  .table tbody tr.rowTbd {
+    padding: 14px 0;
+  }
+  .table td.num {
+    white-space: normal;
+  }
+  .dotCard {
+    max-width: none;
+  }
+}
+
+/* ---- catalogue additions ---- */
+.brand {
+  gap: 10px;
+}
+.coin {
+  flex: none;
+  width: 32px;
+  height: 32px;
+}
+.nav a.navQuiet {
+  color: var(--muted) !important;
+}
+.nav a.navQuiet:hover {
+  color: var(--ink) !important;
+}
+
+/* hero figure card */
+.figure {
+  position: relative;
+  padding: 22px 22px 18px;
+  background-color: var(--panel);
+  background-image: radial-gradient(var(--dot) 1px, transparent 1.5px);
+  background-size: 14px 14px;
+  border: 1px solid var(--ink);
+  border-radius: 4px;
+  transform: rotate(1.6deg);
+  box-shadow: 8px 8px 0 var(--lime);
+  margin: 0;
+}
+@media (min-width: 1000px) {
+  .hero .figure {
+    width: 380px;
+    justify-self: end;
+    margin-top: -150px;
+    margin-right: 12px;
+    z-index: 2;
+  }
+}
+.figureGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px 8px;
+  align-items: end;
+  justify-items: center;
+}
+.figureGrid svg {
+  max-width: 100%;
+  height: auto;
+}
+.figureCap {
+  margin: 14px 0 0;
+  font-size: 14px;
+  font-style: italic;
+}
+.figureCap b {
+  font-style: normal;
+  font-weight: 400;
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin-right: 6px;
+}
+
+/* plates */
+.plates {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0 56px;
+  grid-template-columns: minmax(0, 1fr);
+  border-top: 2px solid var(--ink);
+}
+@media (min-width: 980px) {
+  .plates {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.plate {
+  display: grid;
+  grid-template-columns: 200px minmax(0, 1fr);
+  gap: 8px 28px;
+  align-content: start;
+  padding: 36px 0;
+  border-bottom: 1px solid var(--ink);
+}
+.portrait {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 200px;
+  height: 200px;
+  padding: 12px;
+  box-sizing: border-box;
+  background-color: var(--panel);
+  background-image: radial-gradient(var(--dot) 1px, transparent 1.5px);
+  background-size: 14px 14px;
+  border: 1px solid var(--ink);
+  border-radius: 4px;
+  transform: rotate(-1.4deg);
+}
+.plates li:nth-child(even) .portrait {
+  transform: rotate(1.2deg);
+}
+.portraitBig {
+  display: grid;
+  place-items: center;
+  width: fit-content;
+  max-width: 100%;
+  padding: 28px;
+  background-color: var(--panel);
+  background-image: radial-gradient(var(--dot) 1px, transparent 1.5px);
+  background-size: 14px 14px;
+  border: 1px solid var(--ink);
+  border-radius: 4px;
+  box-shadow: 4px 4px 0 var(--line);
+  transform: rotate(-1.6deg);
+}
+.plateBody {
+  min-width: 0;
+}
+.plateNo {
+  margin: 0 0 8px;
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.plateName {
+  margin: 0;
+  font-family: var(--font-cat-serif), serif;
+  font-weight: 400;
+  font-size: clamp(34px, 3.4vw, 48px);
+  line-height: 1;
+  letter-spacing: -0.01em;
+}
+.plateName a {
+  color: var(--ink) !important;
+  text-decoration-color: var(--lime);
+  text-decoration-thickness: 3px;
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+}
+.plateName a:hover {
+  background: var(--lime);
+  color: #111827 !important;
+}
+.latin {
+  margin: 0;
+  font-family: var(--font-cat-serif), serif;
+  font-style: italic;
+  font-size: 22px;
+  line-height: 1.1;
+  color: var(--muted);
+}
+.field {
+  margin: 14px 0 0;
+}
+.field > div {
+  display: grid;
+  grid-template-columns: 104px minmax(0, 1fr);
+  gap: 12px;
+  padding: 7px 0;
+  border-top: 1px dashed var(--muted);
+}
+.field dt {
+  padding-top: 3px;
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.field dd {
+  margin: 0;
+  font-size: 15px;
+}
+.plateFoot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 18px;
+  margin-top: 8px;
+  padding-right: 6px;
+  border-top: 1px solid var(--line);
+}
+.chip {
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-right: auto;
+}
+.plateFoot a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 6px;
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+@media (max-width: 560px) {
+  .plate {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 20px;
+  }
+}
+
+/* modest funding note */
+.fund {
+  display: grid;
+  gap: 20px 56px;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+}
+@media (min-width: 900px) {
+  .fund {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+  }
+}
+.h2Small {
+  font-size: clamp(30px, 3.4vw, 46px);
+}
+.fundText {
+  margin: 0;
+  max-width: 52ch;
+  font-size: 17px;
+  color: var(--muted);
+}
+.fund .actions {
+  margin-top: 20px;
+}
+
+/* detail page */
+.crumb {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  margin-top: 12px;
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.detailHero {
+  display: grid;
+  gap: 48px;
+  grid-template-columns: minmax(0, 1fr);
+  padding: 24px 0 72px;
+  border-bottom: 1px solid var(--ink);
+  align-items: center;
+}
+@media (min-width: 900px) {
+  .detailHero {
+    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
+    gap: 72px;
+  }
+}
+.detailName {
+  font-size: clamp(56px, 9vw, 132px);
+  line-height: 0.95;
+}
+.detailLatin {
+  margin: 14px 0 0;
+  font-family: var(--font-cat-serif), serif;
+  font-style: italic;
+  font-size: clamp(26px, 3vw, 38px);
+  line-height: 1.1;
+  color: var(--muted);
+}
+.metaRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  margin: 20px 0 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.metaRow li + li::before {
+  content: "/";
+  margin-right: 10px;
+}
+.notesSection {
+  padding: 64px 0;
+  border-bottom: 1px solid var(--ink);
+  display: grid;
+  gap: 32px 64px;
+  grid-template-columns: minmax(0, 1fr);
+}
+@media (min-width: 900px) {
+  .notesSection {
+    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
+  }
+}
+.notesSection .specs > div {
+  grid-template-columns: 150px minmax(0, 1fr);
+}
+.upkeep {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 16px;
+  padding: 24px 0;
+  border-bottom: 1px solid var(--ink);
+  font-size: 15px;
+}
+.upkeep strong {
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.upkeep span {
+  flex: 1 1 280px;
+}
+.upkeep a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+}
+.pager {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 8px 24px;
+  padding: 20px 0 8px;
+}
+.pager a {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 44px;
+  color: var(--ink) !important;
+  text-decoration: none;
+}
+.pager small {
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.pager span {
+  font-family: var(--font-cat-serif), serif;
+  font-size: 30px;
+  line-height: 1.05;
+}
+.pager a:hover span {
+  background: var(--lime);
+  color: #111827;
+}
+.pagerNext {
+  text-align: right;
+  align-items: flex-end;
+  margin-left: auto;
+}
+
+@media (max-width: 860px) {
+  .figure {
+    transform: rotate(0.8deg);
+    margin-right: 8px;
+  }
+  .notesSection .specs > div {
+    grid-template-columns: 1fr;
+    gap: 2px;
+  }
+}
+@media (max-width: 480px) {
+  .field > div {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+  .portrait {
+    width: min(200px, 100%);
+  }
+}
+
+/* masthead: theme toggle shares the brand row on narrow screens */
+@media (max-width: 700px) {
+  .mastheadMain .brand {
+    order: 1;
+  }
+  .mastheadMain .themeBtn {
+    order: 2;
+  }
+  .mastheadMain .nav {
+    order: 3;
+    flex: 1 1 100%;
+    margin-left: -10px;
+  }
+  .nav a {
+    padding: 0 8px;
+  }
+}
+
+/* featured first plate and sprite fit */
+@media (min-width: 980px) {
+  .plates li:first-child {
+    grid-column: 1 / -1;
+  }
+  .plates li:first-child .plate {
+    grid-template-columns: 320px minmax(0, 1fr);
+    gap: 8px 44px;
+    padding: 44px 0;
+  }
+  .plates li:first-child .portrait {
+    width: 320px;
+    height: 320px;
+  }
+  .plates li:first-child .plateName {
+    font-size: clamp(48px, 5vw, 72px);
+    line-height: 0.95;
+  }
+  .plates li:first-child .latin {
+    font-size: 28px;
+  }
+}
+
+/* ---- shipped-site additions ---- */
+.footerTop {
+  display: grid;
+  gap: 24px 56px;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  padding: 8px 0 16px;
+  border-top: 2px solid var(--ink);
+}
+@media (min-width: 900px) {
+  .footerTop {
+    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+    padding-top: 24px;
+  }
+  .footerTop .footerLinks {
+    justify-content: flex-end;
+  }
+}
+.footerLinks {
+  align-self: center;
+}
+
+.signup {
+  margin: 0;
+  padding-top: 16px;
+}
+.signupLabel {
+  display: block;
+  margin-bottom: 10px;
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.signupRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.signupInput {
+  flex: 1 1 220px;
+  min-width: 0;
+  min-height: 48px;
+  padding: 0 14px;
+  border: 1px solid var(--ink);
+  border-radius: 4px;
+  background: var(--paper);
+  color: var(--ink);
+  font: inherit;
+  font-size: 16px;
+}
+.signupInput::placeholder {
+  color: var(--muted);
+}
+.signupInput:disabled,
+.signupRow button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.signupMsg {
+  min-height: 1.55em;
+  margin: 8px 0 0;
+  font-size: 14px;
+  color: var(--muted);
+}
+.signupMsg[data-state="error"] {
+  color: var(--ink);
+}
+.signupMsg[data-state="error"]::before {
+  content: "! ";
+  color: var(--orange);
+  font-family: var(--font-cat-mono), monospace;
+}
+
+.sponsorsStrip {
+  padding: 8px 0 16px;
+}
+.logoRow,
+.peopleRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 24px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.logoRow a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+}
+.logoRow img {
+  width: auto;
+  height: 32px;
+}
+.peopleRow a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+}
+.supporters {
+  display: grid;
+  gap: 16px;
+}
+
+/* support: tiers, costs */
+.menuAction {
+  margin-top: 14px;
+}
+.tierNote {
+  margin: 0;
+  max-width: 70ch;
+  color: var(--muted);
+  font-size: 14px;
+}
+.subhead {
+  margin: 40px 0 12px;
+  font-family: var(--font-cat-mono), monospace;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.costLink {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+}
+.scrollAnchor {
+  scroll-margin-top: 16px;
+}
+.root button.btnLine {
+  background: transparent;
+  color: var(--ink);
+  font-family: var(--font-cat-mono), monospace;
+}
diff --git a/frontend/components/catalogue/sprites.ts b/frontend/components/catalogue/sprites.ts
new file mode 100644
index 0000000..1d1505a
--- /dev/null
+++ b/frontend/components/catalogue/sprites.ts
@@ -0,0 +1,347 @@
+/**
+ * Original pixel art, redrawn from each project's real mascot or logo. Each glyph in a row is
+ * one pixel. "." is clear, "k" is the outline (ink, so it flips light in dark mode unless the
+ * sprite sets its own k). Every other glyph is looked up in the sprite's palette.
+ */
+export type Palette = Record<string, string>;
+export type SpriteArt = { rows: string[]; palette: Palette };
+
+export const SPRITES: Record<string, SpriteArt> = {
+  drydock: {
+    palette: { a: "#4cb8f2", b: "#2a8fd0", c: "#9be0ff", w: "#f6f7fb", v: "#c9cfdd", e: "#2b3340" },
+    rows: [
+      "..........kkk...................",
+      ".........kaaak..................",
+      "........kccaaak.................",
+      "......kkacaaaaakkkkkkk......kkk.",
+      ".....kaaaaaaaaaaaaaaaakk...kaaak",
+      "....kaaaaaaaaaaaaaaaaaaakkkacaak",
+      "...kaaaaaaaaaaaaaaaaaaaaaaaacaak",
+      "..kaaaaaaaacccccccaaaaaaaaaaaak.",
+      "..kaaaaaaaaaaaaaacccccccaaaaak..",
+      ".kaaaaaaacccaaaaaaaaaaaaaaaaaak.",
+      ".kaaaaaacwwwcaaaaaaaaaaaaabbbbbk",
+      ".kaaacacwewewcaaaaaaaaaaaabbbbbk",
+      ".kaaacacwwewvcaaaaaaaaaaaakkbbbk",
+      "kaaaaaacwewewcaaaaaaaaaaaak.kkk.",
+      ".kabaaaacvvvcaaaaaaaaaaaak......",
+      ".kabbbaaacccabbbkkkkkkbak.......",
+      "..keaabbbbbbbaakcccccckk........",
+      "...kbbaaaaaaabkaaaaaabk.........",
+      "....kkbbbbbbbkkkkkkkkk..........",
+      "......kkkkkkk...kkkk............",
+    ],
+  },
+  sockguard: {
+    palette: {
+      a: "#c9651c",
+      b: "#9a4812",
+      c: "#e8903c",
+      d: "#f6b46a",
+      w: "#fbf6ee",
+      v: "#ddd5c8",
+      e: "#161313",
+      z: "#17141a",
+      g: "#d7dde4",
+      h: "#8a93a0",
+    },
+    rows: [
+      ".............kkk..............",
+      ".......kkk..kaaak.............",
+      "......kaaakkacaaak............",
+      ".....kaaaaakacaaaak...........",
+      ".....kabbaakacbaaaak..........",
+      ".....kabaaaaaabbaaak..........",
+      "....kaccaaaaaaabaaabk.........",
+      "..kkaccaawwwaaaaaaabk......kk.",
+      ".kzzacaawewewaaaaaabak....kaak",
+      "kzgzzaaawwewvaaaaagzak...kacak",
+      "kzzzzaaawewewaagazghakkkkkccak",
+      "kwwwwwwvavvvaaaghzzzaacccccaak",
+      "kwwwwwwvaaaagzzzzzzaaaaaaaaaak",
+      "kvwwwwwvagazghzzzaaaaaaaaaaaak",
+      "kavwwewwvghzzzzaaaaaaacccccaak",
+      ".kavvvgzzzzzzaaaaaaaacccccccak",
+      "..kaazghzzzaaaaaaaaaaccccccaak",
+      "...kkzzzzaaaaaaaaaaaaaaaaaaaak",
+      "....kzzzwvaaaaaaaaaaaaaaaaaaak",
+      ".....kkawwvaaaaaaaaaaaaaaaaaak",
+      ".......kvvvvaaaaaaaaaaaaaaaaak",
+      ".......kabbbbbbbbbbbbbbbbbbbak",
+      "........kbbbacaabkkbbbacaaabk.",
+      "........kbbbacaabkkbbbacaaabk.",
+      "........kbbbacaabkkbbbacaaabk.",
+      ".........kbkaaaabk.kbkaaaaabk.",
+      "..........k.kbbbk...k.kbbbbk..",
+      ".............kkk.......kkkk...",
+    ],
+  },
+  portwing: {
+    palette: {
+      a: "#aab0c2",
+      c: "#e4e7ef",
+      d: "#6f7689",
+      p: "#7a3fc8",
+      t: "#17b89a",
+      o: "#f0602a",
+      w: "#fbfbfd",
+      v: "#c3c8d8",
+      e: "#161313",
+    },
+    rows: [
+      ".......kkkkk..................",
+      ".....kkccccck.................",
+      "....kcaaaaaaak................",
+      "...kccaccccaaak...............",
+      "..kacaawwwaaaaak..............",
+      "..kaaawewewaaaak..............",
+      ".kkaaawwewvaaaaak.............",
+      "koooaawewewaaaaak.............",
+      "koooaaavvvaaaaaak.............",
+      ".kooaaaaaaaaaaattk............",
+      "..kaaaaaaaaaatttttkk..........",
+      "..kaaaaaaaappttttacckk........",
+      "..kaaapppppaaaaaaaaacckk......",
+      "..kppppppppacccaaaaaaaaak.....",
+      "..kppppppaaacccaaaaaaddaakkkk.",
+      "..kpppppaaaaaaaaaaaaadddaaaaak",
+      "..kpaaaaaaaaaaaaaaaadddddccaak",
+      "..kaaaaaaaaaaaaaaaaadddddaaaak",
+      "..kaaaaaaccadaaaaaaddddddaddk.",
+      "..kaaaacccccdddddddddddddddk..",
+      "...kcccccccccdddddddddccckk...",
+      "...kcccccccccccaaaaaaaccck....",
+      "....kccccccccccccccccccck.....",
+      ".....kkaaaaacccccccccckk......",
+      "......koooooooaaaaaakk........",
+      ".......kdooooodkkkkk..........",
+      "........kkkkkkk...............",
+    ],
+  },
+  "portkey-admin-mcp": {
+    palette: { n: "#131722", u: "#2f6f9a", m: "#8a3a58", c: "#b04466", r: "#d02030", w: "#f6f7fa" },
+    rows: [
+      "...kkkkkkkkkkkkkkkkkkkk...",
+      "..knnnnnnnnnnnnnnnnnnnnk..",
+      ".knnnnnnnnnnnnnnnnnnnnnnk.",
+      "knnnnnnnnnnnnnnnnnnnnnnnnk",
+      "knnnnnnnnnnnnnnnnnnnnnnnnk",
+      "knnnnnnnnummmmrrrnnnnnnnnk",
+      "knnnnnnnnuunnnnrrnnnnnnnnk",
+      "knnnnnnnuuunncnrrrnnnnnnnk",
+      "knnnnnnnuunnnncnrrnnnnnnnk",
+      "knnnnnnuuunnnnccrrrnnnnnnk",
+      "knnnnnnnuunnnccnrrnnnnnnnk",
+      "knnnnnnnuuunncnrrrnnnnnnnk",
+      "knnnnnnnnuunnnnrrnnnnnnnnk",
+      "knnnnnnnnuuummmmrnnnnnnnnk",
+      "knnnnnnnnnnnnnnnnnnnnnnnnk",
+      "knnnnnnnnnnnnnwwnnnnnnnnnk",
+      "knnnnnnnnnnnwwwwnnnnnnnnnk",
+      "knnnnnnnnnnwwnnwnnnnnnnnnk",
+      "knnnnnnnnnwwnnwwnnnnnnnnnk",
+      "knnnnnnnnwwnnwwnnnwwwnnnnk",
+      "knnnnnnnwwnnnwnnnwwnwnnnnk",
+      "knnnnnnwwnnnwnnnwwnwwnnnnk",
+      "knnnnnwnnnnwwnnwwnnwnnnnnk",
+      "knnnnnnnnnwwnnwwnnwnnnnnnk",
+      "knnnnnnnnnwnnwwnnwnnnnnnnk",
+      "knnnnnnnnnwwwwnnwnnnnnnnnk",
+      "knnnnnnnnnnnnnnwwnnnnnnnnk",
+      "knnnnnnnnnnnnnnwwnnnnnnnnk",
+      "knnnnnnnnnnnnnnnwwnnnnnnnk",
+      ".knnnnnnnnnnnnnnnwnnnnnnk.",
+      "..knnnnnnnnnnnnnnnnnnnnk..",
+      "...kkkkkkkkkkkkkkkkkkkk...",
+    ],
+  },
+  mouthtype: {
+    palette: {
+      o: "#f0a257",
+      t: "#e58f3e",
+      n: "#3a1519",
+      r: "#cc3b2c",
+      R: "#ef6a52",
+      D: "#8f2723",
+      w: "#f6eed2",
+    },
+    rows: [
+      "...kkkkkkkkkkkkkkkkkkkkkk...",
+      "..koooooooootooooooooootok..",
+      ".kotoooooooooooooooooooootk.",
+      "koooooooonnoooooonnooooooook",
+      "koooooonRRrrrnnrRRRrnooooook",
+      "koooonRRrrrrrrrrrrrrrrnooook",
+      "kooorrrrrrrrrrrrrrrrrrrroook",
+      "kotnrrrrrnnnnnnnnnnrrrrrnook",
+      "koonrrnnnnnnwwwwnnnnnnrrnotk",
+      "koonnnnnnnnnnwwnnnnnnnnnnook",
+      "koonrrnnnnnnwwwwnnnnnnrrnook",
+      "koonrrrrrnnnnnnnnnnrrrrrnook",
+      "ktonrrrrrrDDrrrrDDrrrrrrnook",
+      "kootnrrrrrrrrrrrrrrrrrrnotok",
+      "kooooonrrrrDDDDDDrrrrnoooook",
+      "kooooooonnnnnnnnnnnnoooooook",
+      ".kooooooooooooooooooooooook.",
+      "..kooooooootooooooooootook..",
+      "...kkkkkkkkkkkkkkkkkkkkkk...",
+    ],
+  },
+  idlescreen: {
+    palette: {
+      s: "#d3d6de",
+      a: "#9a9ea9",
+      d: "#6a6e7a",
+      n: "#2b2e38",
+      b: "#0c2418",
+      l: "#9dffb8",
+      g: "#2fd16a",
+      G: "#1a8a45",
+      o: "#e0702a",
+      u: "#5a50d8",
+      t: "#2fd16a",
+      r: "#d63a3a",
+    },
+    rows: [
+      "..............................",
+      "......kkkkkk..................",
+      "....kksssssskkkkkkkkkkkkk.....",
+      "..kkssssssssssssssssssssskk...",
+      ".ksssssssssssssssssssssskddk..",
+      ".ksaaaaaaaaaaaaaaaaaaaaadddnk.",
+      ".ksannnnnnnnnnnnnnnnnnaadddnnk",
+      ".ksanbbbbbbbbbbbbbbbbnaadddnnk",
+      ".ksanbbbblllloooouuuunaadddnnk",
+      ".kaanbbbbllllbbbbbbbbnaadddnnk",
+      ".kaanbbbblllloooouuuunaadddnnk",
+      ".kaanbbbbllllbbbbbbbbnaadddnnk",
+      ".kaanbbbbgggggooouuuunaadddnnk",
+      ".kaanbbGGGGGGGGbbbbbbnaadddnnk",
+      ".kaanbbgggggggggouuuunaadddnnk",
+      ".kaanbGGGGGGGGGGbbbbbnaadddnnk",
+      ".kaanbggggggggggobuuunaadddnnk",
+      ".kaanbGGGGGGGGGGGbbbbnaadddnk.",
+      ".kaannsssssnnnnnnnnnnnaadddk..",
+      ".kaaaaaaaaaaaaaaaaaaaaaaddk...",
+      ".kaaaaaaaaaaaaaattarraaadk....",
+      ".kaannnnnnnnnnnnnnnnnnnnnk....",
+      "..kknnnnnnnnnnnnnnnnnnnnnk....",
+      "....knnnnnnnnnnnnnnnnnnkk.....",
+      "....knnnnnnnnnnnnnnnnnnk......",
+      ".....kkkkkkkkkkkkkkkkkk.......",
+    ],
+  },
+  careerrat: {
+    palette: {
+      a: "#8c8c90",
+      d: "#6c6c71",
+      w: "#f6efe0",
+      p: "#f4a0a8",
+      q: "#d9707c",
+      u: "#2a8be0",
+      n: "#8a4a28",
+      m: "#5a2e18",
+      y: "#f2c040",
+      e: "#161313",
+    },
+    rows: [
+      "..............................",
+      ".....kkkkk......kkkk..........",
+      "....kaaaaak....kaaaak.........",
+      "....kaappaak..kaaapaak........",
+      "...kaappppakkkaaapppaak.......",
+      "...kkkkpppkkkaaapppppak.......",
+      "..kkwwwkqkwwwkaapppqpk........",
+      ".kkwewewkwewewkaapqqak........",
+      ".kkwwewwkwwewwkaaaaak.........",
+      ".kkwewewkwewewkaaaak.......k..",
+      "..kkwwwkakwwwkaaaaak......kpk.",
+      "...kkkkaaakkkaaaaaak.......kpk",
+      "....kaaaaaaaaaaaaaak.......kpk",
+      "....kappaaaaaaaaaak.......kpk.",
+      ".....kpaaaaaaaaaak........kpk.",
+      "......kaaqqaaaaak.........kpk.",
+      ".....kddddddddddk.........kpk.",
+      "....kaaaawwwwaaaak........kpk.",
+      "....kaaawuuuwaaaaak...k..kpk..",
+      "...kaaaawwuuwwaaawykkkykkkpk..",
+      "...kaaaawuuuuwaammmmmmmmmmpk..",
+      "....kaaawuuuuwaannnnnnnnnnk...",
+      "....kaaawuuuuwaannnnyynnnnk...",
+      ".....kaawwuuwaaannnnyynnnnk...",
+      "....kkkkawwwaakannnnnnnnnnk...",
+      "...kaaaaaakkkk.kmmmmmmmmmmk...",
+      "....kkkkkk......kkkkkkkkkk....",
+    ],
+  },
+  "systema-machinae": {
+    palette: {
+      c: "#cdd3d8",
+      w: "#fbf8ee",
+      m: "#9a9aa2",
+      d: "#6e6e78",
+      e: "#2a2420",
+      G: "#3fa34d",
+      r: "#d9432f",
+    },
+    rows: [
+      "..kkkkkkkkkkkkkk....",
+      ".kcccccccccccccck...",
+      ".kcweeewewwwewwck...",
+      ".kcwewwweeweewwck...",
+      ".kcweeewewewewwck...",
+      ".kcwwwewewwwewwck...",
+      ".kcweeewewwwewwck...",
+      ".kcmmmmmmmmmmmmck...",
+      ".kcwwwwwwwwwwwwck...",
+      ".kcwddddddwwGGwck...",
+      ".kcwwwwwwwwwwwwck...",
+      ".kcmmmmmmmmmmmmck...",
+      ".kcwwwwwwwwwwwwck...",
+      ".kcwddddddwwGwrck...",
+      ".kcwwwwwwwwwGwrck...",
+      ".kcwwwwwwwwwwwwck...",
+      ".kcddddddddddddck...",
+      "..kkeeekkkkeeekk....",
+      "...keeek..keeek.....",
+      "....kkk....kkk......",
+    ],
+  },
+  coin: {
+    palette: { k: "#111111", l: "#d0ff14" },
+    rows: [
+      ".............kkkkkk.............",
+      "..........kkkkkkkkkkkk..........",
+      "........kkkkkllllllkkkkk........",
+      "......kkkkllllllllllllkkkk......",
+      ".....kkkllllllllllllllllkkk.....",
+      "....kkkllllllllllllllllllkkk....",
+      "...kkkllllllllllllllllllllkkk...",
+      "...kkllllkkkkklllllkkkkklllkk...",
+      "..kkllllkkkkkkklllkkklkkklllkk..",
+      "..kklllkkklllkklllllllkkklllkk..",
+      ".kkllllkkllllllllllllkkklllllkk.",
+      ".kkllllkklllllllllllkkkllllllkk.",
+      ".kkllllkklllllllllllkklllllllkk.",
+      "kklllllkkklllkklllllllllllllllkk",
+      "kkllllllkkkkkkklllllkkllllllllkk",
+      "kklllllllkkkkkllllllkkllllllllkk",
+      "kkllllllllllllllllllllllllllllkk",
+      "kkllllllllllllllllllllllllllllkk",
+      "kkllllllkkllllllllllllkkllllllkk",
+      ".kklllllkkllllllllllllkklllllkk.",
+      ".kklllllkkkllllkkllllkkklllllkk.",
+      ".kkllllllkklllkkkklllkkllllllkk.",
+      "..kklllllkkllkkkkkkllkklllllkk..",
+      "..kklllllkkklkkllkklkkklllllkk..",
+      "...kklllllkkkkkllkkkkklllllkk...",
+      "...kkkllllkkkkllllkkkkllllkkk...",
+      "....kkkllllkkllllllkkllllkkk....",
+      ".....kkkllllllllllllllllkkk.....",
+      "......kkkkllllllllllllkkkk......",
+      "........kkkkkllllllkkkkk........",
+      "..........kkkkkkkkkkkk..........",
+      ".............kkkkkk.............",
+    ],
+  },
+};
diff --git a/frontend/components/site/FloatingScene.tsx b/frontend/components/site/FloatingScene.tsx
deleted file mode 100644
index e0055cd..0000000
--- a/frontend/components/site/FloatingScene.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-
-// WebGL is client-only — load the transparent floating layer without SSR. This
-// lives in a client component because next/dynamic({ ssr: false }) can't be used
-// from a server component.
-const Canvas = dynamic(() => import("./FloatingSceneCanvas"), { ssr: false });
-
-/**
- * Decorative fixed 3D layer that sits behind the page content (pointer-events
- * off, aria-hidden). The coin + mascot balloons drift as you scroll. Purely a
- * flourish — every bit of real content is server-rendered HTML above this.
- */
-export function FloatingScene() {
-  return (
-    <div aria-hidden="true" className="pointer-events-none fixed inset-0 z-0">
-      <Canvas />
-    </div>
-  );
-}
diff --git a/frontend/components/site/FloatingSceneCanvas.tsx b/frontend/components/site/FloatingSceneCanvas.tsx
deleted file mode 100644
index 5ff7545..0000000
--- a/frontend/components/site/FloatingSceneCanvas.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-"use client";
-
-import { Environment, Lightformer } from "@react-three/drei";
-import { Canvas, useFrame } from "@react-three/fiber";
-import { type ReactNode, type RefObject, Suspense, useEffect, useRef, useState } from "react";
-import type * as THREE from "three";
-import { CodesWhatCoin } from "@/components/site/scene/BoardObjects";
-import { MylarBalloon } from "@/components/site/scene/balloons/MylarBalloon";
-import { ContactMarble } from "@/components/site/scene/ContactMarble";
-
-type Floater = {
-  key: string;
-  url: string;
-  /** scroll fraction (0=top, 1=bottom) where this balloon sits centered on
-   *  screen — tuned so each one rises into view alongside its own card. */
-  focus: number;
-  /** horizontal slot: negative = left column, positive = right column */
-  x: number;
-  z: number;
-  size: number;
-  tint: string;
-  phase: number;
-  behavior?: "swim" | "walk" | "flap";
-  spin?: number;
-  glanceFrames?: string[];
-  blinkFrame?: string;
-};
-
-/**
- * Mascot balloons parked next to their cards. The four project balloons cluster
- * around the Projects section (top row higher, bottom row lower, left/right by
- * column) so the hero stays clear for the spinning coin; the headshot lives down
- * by the About section.
- */
-const FLOATERS: Floater[] = [
-  // top-left card — the guard dog: bouncy steps, keeps turning to look around
-  // (dropped below the section heading so it sits beside its card)
-  {
-    key: "sockguard",
-    url: "/logos/sockguard-balloon.png",
-    focus: 0.29,
-    x: -3.3,
-    z: -0.8,
-    size: 2.2,
-    tint: "#f3ede4",
-    phase: 0,
-    behavior: "walk",
-  },
-  // top-right card — the whale: glides side to side, turns around at each end
-  // (dropped so it swims lower on its card)
-  {
-    key: "drydock",
-    url: "/logos/drydock-balloon.png",
-    focus: 0.32,
-    x: 3.3,
-    z: -1.2,
-    size: 2.4,
-    tint: "#e6eef7",
-    phase: 1.7,
-    behavior: "swim",
-  },
-  // bottom-left card — the bird: waves back and forth in place, like flapping
-  // (dropped so its head lands under the card heading)
-  {
-    key: "portwing",
-    url: "/logos/portwing-balloon.png",
-    focus: 0.43,
-    x: -2.6,
-    z: -1.0,
-    size: 2.0,
-    tint: "#eef0f4",
-    phase: 3.2,
-    behavior: "flap",
-  },
-  // bottom-right card — the key: spins in place like the coin, pushed out to
-  // the card's right edge (half on, half off) so more of it shows
-  {
-    key: "portkey",
-    url: "/logos/portkey-balloon.png",
-    focus: 0.43,
-    x: 3.8,
-    z: -1.2,
-    size: 2.0,
-    tint: "#e9edf6",
-    phase: 5.5,
-    spin: 0.4,
-  },
-  // the headshot — sits with the "Who's behind it" section, facing forward
-  {
-    key: "scott",
-    url: "/logos/scott-balloon.png",
-    focus: 0.79,
-    x: 3.8,
-    z: -0.4,
-    size: 2.6,
-    tint: "#eef1f7",
-    phase: 4.6,
-    glanceFrames: [
-      "/logos/scott-look-left.png",
-      "/logos/scott-look-right.png",
-      "/logos/scott-look-up.png",
-      "/logos/scott-look-down.png",
-    ],
-    blinkFrame: "/logos/scott-blink.png",
-  },
-];
-
-// how far (world units) a floater travels per full page scroll — big enough
-// that each one drops out of frame once you scroll past its section.
-const SPAN = 20;
-
-/**
- * Parks its children at a scroll-driven height: centered on screen when the
- * page scroll reaches `focus`, sliding up and out as you scroll past. Each
- * floater owns one of these so it tracks its own section independently.
- */
-function ScrollFloat({
-  scroll,
-  focus,
-  x,
-  z,
-  restY = 0,
-  span = SPAN,
-  children,
-}: {
-  scroll: RefObject<number>;
-  focus: number;
-  x: number;
-  z: number;
-  restY?: number;
-  span?: number;
-  children: ReactNode;
-}) {
-  const group = useRef<THREE.Group>(null);
-  const started = useRef(false);
-
-  useFrame(() => {
-    if (!group.current) return;
-    const targetY = restY + (scroll.current - focus) * span;
-    if (!started.current) {
-      // snap on the first frame so nothing animates in from center on load
-      group.current.position.y = targetY;
-      started.current = true;
-    } else {
-      group.current.position.y += (targetY - group.current.position.y) * 0.08;
-    }
-  });
-
-  return (
-    <group ref={group} position={[x, restY, z]}>
-      {children}
-    </group>
-  );
-}
-
-/** Tracks the `.dark` class on <html> so the 3D layer can invert its brand
- *  colors in dark mode (set by ThemeToggle / the init script in layout.tsx). */
-function useIsDark() {
-  const [dark, setDark] = useState(true);
-  useEffect(() => {
-    const el = document.documentElement;
-    const update = () => setDark(el.classList.contains("dark"));
-    update();
-    const observer = new MutationObserver(update);
-    observer.observe(el, { attributes: true, attributeFilter: ["class"] });
-    return () => observer.disconnect();
-  }, []);
-  return dark;
-}
-
-function Scene() {
-  const scroll = useRef(0);
-  const dark = useIsDark();
-
-  useEffect(() => {
-    const onScroll = () => {
-      const max = document.documentElement.scrollHeight - window.innerHeight;
-      scroll.current = max > 0 ? Math.min(1, Math.max(0, window.scrollY / max)) : 0;
-    };
-    onScroll();
-    window.addEventListener("scroll", onScroll, { passive: true });
-    window.addEventListener("resize", onScroll, { passive: true });
-    return () => {
-      window.removeEventListener("scroll", onScroll);
-      window.removeEventListener("resize", onScroll);
-    };
-  }, []);
-
-  return (
-    <>
-      {/* the spinning coin owns the hero — sits up high, drifts out as you scroll */}
-      <ScrollFloat scroll={scroll} focus={0} x={2.5} z={-1} restY={1.4}>
-        <CodesWhatCoin position={[0, 0, 0]} radius={1.5} thickness={0.32} dark={dark} />
-      </ScrollFloat>
-
-      {FLOATERS.map(({ key, focus, x, z, ...m }) => (
-        <ScrollFloat key={key} scroll={scroll} focus={focus} x={x} z={z}>
-          <MylarBalloon anchor={[0, 0, 0]} baseY={0} showString={false} dark={dark} {...m} />
-        </ScrollFloat>
-      ))}
-
-      {/* the clear glass "@" marble — stays hidden through the projects, rises
-          in around the "Who's behind it" section, then rides a wide orbit
-          around the "Get notified" card and darts away from the cursor */}
-      <ScrollFloat scroll={scroll} focus={0.96} x={0} z={-0.5} restY={-0.8} span={12}>
-        <ContactMarble center={[0, 0, 0]} orbitRadius={3.2} orbitSpeed={0.22} radius={0.6} flee />
-      </ScrollFloat>
-    </>
-  );
-}
-
-/** Transparent, fixed WebGL layer that composites over the aurora background. */
-export default function FloatingSceneCanvas() {
-  return (
-    <Canvas
-      dpr={[1, 1.75]}
-      camera={{ position: [0, 0, 12], fov: 40 }}
-      gl={{ alpha: true, antialias: true }}
-      style={{ position: "absolute", inset: 0 }}
-    >
-      <hemisphereLight args={["#ffffff", "#c9d2e0", 0.9]} />
-      <ambientLight intensity={0.5} />
-      <directionalLight position={[6, 10, 6]} intensity={1.6} />
-      <Suspense fallback={null}>
-        <Environment resolution={256} frames={1}>
-          <Lightformer intensity={1.0} position={[0, 4, 8]} scale={[20, 20, 1]} color="#ffffff" />
-          <Lightformer intensity={1.4} position={[-6, 2, 4]} scale={[8, 10, 1]} color="#e8f5c8" />
-          <Lightformer intensity={1.2} position={[6, 3, 2]} scale={[8, 8, 1]} color="#c8ff00" />
-        </Environment>
-        <Scene />
-      </Suspense>
-    </Canvas>
-  );
-}
diff --git a/frontend/components/site/SiteBackground.tsx b/frontend/components/site/SiteBackground.tsx
deleted file mode 100644
index 041e85a..0000000
--- a/frontend/components/site/SiteBackground.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Fixed site background. Off-white with a faint lime/teal glow in light mode,
- * near-black with an indigo/blue glow in dark mode (matching the inverted
- * brand accent — the coin turns indigo, so the wash does too). The glow fades
- * out below ~the fold. No grid, no grain — just the wash behind the 3D layer.
- */
-export function SiteBackground() {
-  return (
-    <div aria-hidden="true" className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
-      {/* base — off-white in light, near-black in dark */}
-      <div className="absolute inset-0 bg-[#f7f7f5] dark:bg-[#070809]" />
-
-      {/* light-mode glow (softer tint that still reads on white) */}
-      <div
-        className="absolute inset-x-0 top-0 h-[115vh] dark:hidden"
-        style={{
-          background:
-            "radial-gradient(52% 46% at 22% 8%, rgba(163,230,53,0.20), transparent 60%)," +
-            "radial-gradient(48% 42% at 82% 6%, rgba(45,212,191,0.16), transparent 60%)," +
-            "radial-gradient(60% 50% at 50% 0%, rgba(132,204,22,0.12), transparent 68%)",
-          maskImage: "linear-gradient(to bottom, black 0%, black 42%, transparent 78%)",
-          WebkitMaskImage: "linear-gradient(to bottom, black 0%, black 42%, transparent 78%)",
-        }}
-      />
-
-      {/* dark-mode glow (indigo/blue on black — the inverted brand accent) */}
-      <div
-        className="absolute inset-x-0 top-0 hidden h-[115vh] dark:block"
-        style={{
-          background:
-            "radial-gradient(52% 46% at 22% 8%, rgba(123,131,255,0.20), transparent 60%)," +
-            "radial-gradient(48% 42% at 82% 6%, rgba(73,55,255,0.16), transparent 60%)," +
-            "radial-gradient(60% 50% at 50% 0%, rgba(90,92,255,0.12), transparent 68%)",
-          maskImage: "linear-gradient(to bottom, black 0%, black 42%, transparent 78%)",
-          WebkitMaskImage: "linear-gradient(to bottom, black 0%, black 42%, transparent 78%)",
-        }}
-      />
-    </div>
-  );
-}
diff --git a/frontend/components/site/SiteFooter.tsx b/frontend/components/site/SiteFooter.tsx
deleted file mode 100644
index ed19c85..0000000
--- a/frontend/components/site/SiteFooter.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { ArrowUpRight, Github } from "lucide-react";
-import type { CSSProperties } from "react";
-import { TrackedCtaLink } from "@/components/site/TrackedCtaLink";
-import { Wordmark } from "@/components/site/Wordmark";
-import { GITHUB_URL, PROJECTS, SITE_CONFIG } from "@/lib/site-config";
-
-/**
- * Lightweight dark CodesWhat footer — deliberately NOT the drydock SaaS footer.
- * Just the projects, the maker credit, GitHub, and a copyright line.
- */
-export function SiteFooter() {
-  const year = new Date().getFullYear();
-  return (
-    <footer className="border-t border-line bg-surface">
-      <div className="mx-auto flex max-w-6xl flex-col gap-6 px-4 py-10 sm:px-6">
-        <div className="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
-          <div className="flex flex-col gap-1.5">
-            <Wordmark />
-            <a
-              href={SITE_CONFIG.author.url}
-              target="_blank"
-              rel="noreferrer"
-              className="inline-flex w-fit items-center gap-0.5 text-xs text-fg-faint transition-colors hover:text-brand-hover"
-            >
-              by {SITE_CONFIG.author.name}
-              <ArrowUpRight className="h-3 w-3 opacity-60" />
-            </a>
-          </div>
-
-          <nav className="flex flex-wrap gap-x-5 gap-y-2 text-sm text-fg-muted">
-            {PROJECTS.map((p) => (
-              // each project link lights up in its own accent on hover, echoing
-              // that project's card arrow; --proj-accent feeds the hover color
-              <a
-                key={p.slug}
-                href={p.href}
-                target="_blank"
-                rel="noreferrer"
-                style={{ "--proj-accent": p.accent } as CSSProperties}
-                className="inline-flex items-center gap-0.5 transition-colors hover:text-[var(--proj-accent)]"
-              >
-                {p.name}
-                <ArrowUpRight className="h-3.5 w-3.5 opacity-60" />
-              </a>
-            ))}
-            <TrackedCtaLink
-              href={GITHUB_URL}
-              target="_blank"
-              rel="noreferrer"
-              placement="footer"
-              className="inline-flex items-center gap-1 transition-colors hover:text-brand-hover"
-            >
-              <Github className="h-4 w-4" />
-              GitHub
-            </TrackedCtaLink>
-          </nav>
-        </div>
-
-        <p className="text-xs text-fg-faint">
-          © {year} {SITE_CONFIG.name}. All rights reserved.
-        </p>
-      </div>
-    </footer>
-  );
-}
diff --git a/frontend/components/site/SiteHeader.tsx b/frontend/components/site/SiteHeader.tsx
deleted file mode 100644
index 1f3c1e3..0000000
--- a/frontend/components/site/SiteHeader.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Github } from "lucide-react";
-import Link from "next/link";
-import { ThemeToggle } from "@/components/site/ThemeToggle";
-import { TrackedCtaLink } from "@/components/site/TrackedCtaLink";
-import { Wordmark } from "@/components/site/Wordmark";
-import { GITHUB_URL, SITE_CONFIG } from "@/lib/site-config";
-
-const navLinkCn =
-  "text-sm text-fg-muted transition-colors hover:text-fg focus-visible:outline-none focus-visible:text-brand-hover";
-
-/**
- * Sticky, translucent dark header — concept-shell chrome (logo + lime-tracked
- * wordmark left, nav + GitHub right, blurred hairline border below).
- */
-export function SiteHeader() {
-  return (
-    <header className="sticky top-0 z-50 border-b border-line bg-bar backdrop-blur-xl">
-      <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4 sm:px-6">
-        <Link href="/" aria-label={`${SITE_CONFIG.name} — home`} className="flex items-center">
-          <Wordmark />
-        </Link>
-        <nav className="flex items-center gap-1 sm:gap-4">
-          <a href="#projects" className={`hidden px-2 py-2 sm:inline-block ${navLinkCn}`}>
-            Projects
-          </a>
-          <a href="#services" className={`hidden px-2 py-2 sm:inline-block ${navLinkCn}`}>
-            Services
-          </a>
-          <a href="#contact" className={`hidden px-2 py-2 sm:inline-block ${navLinkCn}`}>
-            Contact
-          </a>
-          <TrackedCtaLink
-            href={GITHUB_URL}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="CodesWhat on GitHub"
-            placement="header"
-            className="rounded-full p-2 text-fg-muted transition-colors hover:bg-line hover:text-fg"
-          >
-            <Github className="h-5 w-5" />
-          </TrackedCtaLink>
-          <ThemeToggle />
-        </nav>
-      </div>
-    </header>
-  );
-}
diff --git a/frontend/components/site/ThemeToggle.tsx b/frontend/components/site/ThemeToggle.tsx
deleted file mode 100644
index a077da5..0000000
--- a/frontend/components/site/ThemeToggle.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client";
-
-import { Moon, Sun } from "lucide-react";
-import { useEffect, useState } from "react";
-
-/**
- * Header light/dark switch. Toggles the `dark` class on <html> and persists the
- * choice to localStorage (read back by the no-flash init script in layout.tsx).
- * Dark is the default; this is the opt-in to light.
- */
-export function ThemeToggle() {
-  const [mounted, setMounted] = useState(false);
-  const [isDark, setIsDark] = useState(true);
-
-  useEffect(() => {
-    setIsDark(document.documentElement.classList.contains("dark"));
-    setMounted(true);
-  }, []);
-
-  const toggle = () => {
-    const next = !document.documentElement.classList.contains("dark");
-    document.documentElement.classList.toggle("dark", next);
-    try {
-      localStorage.theme = next ? "dark" : "light";
-    } catch {}
-    setIsDark(next);
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={toggle}
-      aria-label="Toggle light and dark theme"
-      className="rounded-full p-2 text-fg-muted transition-colors hover:bg-line hover:text-fg"
-    >
-      {/* Avoid an icon flash before we know the real theme on the client. */}
-      {mounted && isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
-    </button>
-  );
-}
diff --git a/frontend/components/site/ThemedToaster.tsx b/frontend/components/site/ThemedToaster.tsx
deleted file mode 100644
index 2a55d11..0000000
--- a/frontend/components/site/ThemedToaster.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { Toaster } from "sonner";
-
-/**
- * Sonner toasts themed to follow the `.dark` class on <html> (set by the header
- * toggle and the no-flash script in layout.tsx) rather than the OS
- * prefers-color-scheme. Without this, a light-OS user with dark selected (the
- * app default) would get light-themed toasts over a dark shell.
- */
-export function ThemedToaster() {
-  // default dark to match the app's dark-by-default shell (avoids a flash)
-  const [dark, setDark] = useState(true);
-  useEffect(() => {
-    const el = document.documentElement;
-    const update = () => setDark(el.classList.contains("dark"));
-    update();
-    const observer = new MutationObserver(update);
-    observer.observe(el, { attributes: true, attributeFilter: ["class"] });
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <Toaster
-      position="bottom-right"
-      theme={dark ? "dark" : "light"}
-      toastOptions={{
-        style: {
-          background: "hsl(var(--background))",
-          color: "hsl(var(--foreground))",
-          border: "1px solid hsl(var(--border))",
-          backdropFilter: "blur(8px)",
-        },
-        className:
-          "!bg-white dark:!bg-neutral-900 !text-neutral-900 dark:!text-neutral-100 !border-neutral-200 dark:!border-neutral-800 !shadow-lg group",
-        duration: 5000, // 5 seconds before auto-dismiss
-      }}
-      richColors
-      closeButton
-      expand={false} // Don't expand on hover
-      gap={12} // Space between toasts
-    />
-  );
-}
diff --git a/frontend/components/site/Wordmark.tsx b/frontend/components/site/Wordmark.tsx
deleted file mode 100644
index 3270794..0000000
--- a/frontend/components/site/Wordmark.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Geist_Mono } from "next/font/google";
-
-// Geist Mono — the go-to, and monospace keeps the terminal feel of the wordmark.
-const geistMono = Geist_Mono({ subsets: ["latin"] });
-
-/**
- * Text-only header wordmark: `codeswhat?` in mono, lowercase, with the "?" in
- * lime (echoing the C?W logo mark). No disc, no cursor — the type is the mark.
- */
-export function Wordmark() {
-  return (
-    <span className={`${geistMono.className} text-[15px] font-medium tracking-tight text-fg`}>
-      codeswhat<span className="text-brand">?</span>
-    </span>
-  );
-}
diff --git a/frontend/components/site/scene/ContactMarble.tsx b/frontend/components/site/scene/ContactMarble.tsx
deleted file mode 100644
index 169db53..0000000
--- a/frontend/components/site/scene/ContactMarble.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-"use client";
-
-import { Billboard } from "@react-three/drei";
-import { useFrame } from "@react-three/fiber";
-import { useContext, useEffect, useMemo, useRef } from "react";
-import * as THREE from "three";
-import { OrbColliderContext } from "./collisionContext";
-
-/**
- * ContactMarble — a clear glass marble with an "@" suspended inside (opaque, so
- * it reads through the refractive glass just like the logo marbles). It slowly
- * orbits the centerpiece (with a gentle vertical bob) and, on click, calls
- * onContact to open the site's email/contact modal.
- */
-export function ContactMarble({
-  center = [0, 1.7, 0],
-  orbitRadius = 4.3,
-  orbitSpeed = 0.25,
-  bob = 0.28,
-  radius = 0.68,
-  onContact,
-  flee = false,
-}: {
-  center?: [number, number, number];
-  orbitRadius?: number;
-  orbitSpeed?: number;
-  bob?: number;
-  radius?: number;
-  onContact?: () => void;
-  /** dart away from the cursor when it comes near (the canvas is
-   *  pointer-events-none, so the cursor is tracked on window instead) */
-  flee?: boolean;
-}) {
-  const group = useRef<THREE.Group>(null);
-  const texture = useMemo(() => makeAtTexture(), []);
-  const planeSize = radius * 1.05;
-  const collider = useContext(OrbColliderContext);
-
-  // normalized cursor (-1..1), and the eased "run away" offset it produces
-  const pointer = useRef({ x: 0, y: 0, seen: false });
-  const fleeOffset = useRef({ x: 0, y: 0 });
-  const worldPos = useMemo(() => new THREE.Vector3(), []);
-
-  // let balloons see us as a collider; stop deflecting them once we unmount
-  useEffect(() => {
-    if (!collider) return;
-    collider.radius = radius;
-    return () => {
-      collider.active = false;
-    };
-  }, [collider, radius]);
-
-  useEffect(() => {
-    if (!flee) return;
-    const onMove = (e: PointerEvent) => {
-      pointer.current.x = (e.clientX / window.innerWidth) * 2 - 1;
-      pointer.current.y = -(e.clientY / window.innerHeight) * 2 + 1;
-      pointer.current.seen = true;
-    };
-    const onLeave = () => {
-      pointer.current.seen = false;
-    };
-    window.addEventListener("pointermove", onMove, { passive: true });
-    window.addEventListener("pointerout", onLeave);
-    return () => {
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerout", onLeave);
-    };
-  }, [flee]);
-
-  useFrame((state) => {
-    const t = state.clock.elapsedTime;
-    const a = t * orbitSpeed;
-    if (!group.current) return;
-
-    const ox = center[0] + Math.cos(a) * orbitRadius;
-    const oy = center[1] + Math.sin(t * 0.9) * bob;
-    const oz = center[2] + Math.sin(a) * orbitRadius;
-    group.current.position.set(ox, oy, oz);
-
-    // repel from the cursor: map the pointer onto the marble's plane, and if
-    // it gets close, shove the marble radially away (eased in and out)
-    let targetX = 0;
-    let targetY = 0;
-    if (flee && pointer.current.seen) {
-      group.current.getWorldPosition(worldPos);
-      const cam = state.camera as THREE.PerspectiveCamera;
-      const dist = cam.position.z - worldPos.z;
-      const halfH = Math.tan((cam.fov * Math.PI) / 180 / 2) * dist;
-      const halfW = halfH * cam.aspect;
-      const mx = cam.position.x + pointer.current.x * halfW;
-      const my = cam.position.y + pointer.current.y * halfH;
-      const dx = worldPos.x - mx;
-      const dy = worldPos.y - my;
-      const d = Math.hypot(dx, dy);
-      if (d < orbitRadius) {
-        const push = (orbitRadius - d) / orbitRadius;
-        const mag = orbitRadius * 0.9 * push;
-        targetX = (dx / (d || 1e-3)) * mag;
-        targetY = (dy / (d || 1e-3)) * mag;
-      }
-    }
-    fleeOffset.current.x += (targetX - fleeOffset.current.x) * 0.18;
-    fleeOffset.current.y += (targetY - fleeOffset.current.y) * 0.18;
-    group.current.position.x = ox + fleeOffset.current.x;
-    group.current.position.y = oy + fleeOffset.current.y;
-
-    if (collider) {
-      collider.position.copy(group.current.position);
-      collider.radius = radius;
-      collider.active = true;
-    }
-  });
-
-  return (
-    <group ref={group} position={center}>
-      {/* biome-ignore lint/a11y/noStaticElementInteractions: r3f mesh, not DOM */}
-      <mesh
-        onClick={(e) => {
-          e.stopPropagation();
-          onContact?.();
-        }}
-        onPointerOver={(e) => {
-          e.stopPropagation();
-          document.body.style.cursor = "pointer";
-        }}
-        onPointerOut={(e) => {
-          e.stopPropagation();
-          document.body.style.cursor = "default";
-        }}
-      >
-        <sphereGeometry args={[radius, 64, 64]} />
-        <meshPhysicalMaterial
-          color="#eaf1ff"
-          transmission={1}
-          thickness={radius * 1.4}
-          roughness={0.03}
-          metalness={0}
-          clearcoat={1}
-          clearcoatRoughness={0.04}
-          ior={1.48}
-          attenuationColor="#dfe8ff"
-          attenuationDistance={radius * 6}
-          envMapIntensity={1.2}
-        />
-      </mesh>
-      {/* a single "@" suspended inside, billboarded to always face the camera */}
-      <Billboard>
-        <mesh>
-          <planeGeometry args={[planeSize, planeSize]} />
-          <meshStandardMaterial
-            map={texture}
-            alphaTest={0.5}
-            side={THREE.DoubleSide}
-            roughness={0.5}
-            metalness={0.05}
-          />
-        </mesh>
-      </Billboard>
-    </group>
-  );
-}
-
-function makeAtTexture(): THREE.CanvasTexture {
-  const s = 512;
-  const canvas = document.createElement("canvas");
-  canvas.width = s;
-  canvas.height = s;
-  const ctx = canvas.getContext("2d");
-  if (ctx) {
-    ctx.clearRect(0, 0, s, s);
-    ctx.fillStyle = "#12151d";
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.font = "800 360px ui-monospace, SFMono-Regular, Menlo, monospace";
-    ctx.fillText("@", s / 2, s / 2 + 18);
-  }
-  const texture = new THREE.CanvasTexture(canvas);
-  texture.colorSpace = THREE.SRGBColorSpace;
-  texture.anisotropy = 8;
-  return texture;
-}
diff --git a/frontend/components/site/sections/About.tsx b/frontend/components/site/sections/About.tsx
deleted file mode 100644
index 00b571b..0000000
--- a/frontend/components/site/sections/About.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { ArrowUpRight } from "lucide-react";
-import { SITE_CONFIG } from "@/lib/site-config";
-
-/**
- * About — one short, honest paragraph on black. Carries the Person link (Scott
- * Benson) in real HTML so the maker is crawlable and matches the JSON-LD.
- */
-export function About() {
-  return (
-    <section id="about" className="relative scroll-mt-20 px-4 py-20 sm:px-6">
-      <div className="mx-auto max-w-3xl">
-        <p className="mb-3 font-mono text-xs font-semibold tracking-[0.2em] text-brand uppercase">
-          The developer
-        </p>
-        <h2 className="text-3xl font-semibold tracking-tight text-fg sm:text-4xl">
-          One developer, a lot of agents
-        </h2>
-        <p className="mt-4 text-base leading-relaxed text-fg-muted">
-          {SITE_CONFIG.name} is{" "}
-          <a
-            href={SITE_CONFIG.author.url}
-            target="_blank"
-            rel="noreferrer author"
-            className="inline-flex items-center gap-0.5 font-medium text-fg underline decoration-brand/60 underline-offset-2 transition-colors hover:text-brand-hover"
-          >
-            {SITE_CONFIG.author.name}
-            <ArrowUpRight className="h-3.5 w-3.5 opacity-60" />
-          </a>{" "}
-          — one developer finding out how far agentic coding can go. These tools are the result:
-          built fast, shipped in the open, and yours to self-host. No telemetry, no lock-in, no
-          roadmap theater.
-        </p>
-      </div>
-    </section>
-  );
-}
diff --git a/frontend/components/site/sections/Contact.tsx b/frontend/components/site/sections/Contact.tsx
deleted file mode 100644
index db4f593..0000000
--- a/frontend/components/site/sections/Contact.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { EmailSignupForm } from "@/components/EmailSignupForm";
-
-/**
- * Contact — the email signup, server-rendered inline on a dark card (not hidden
- * behind a modal) so it works without JS and gives lead capture a real home.
- */
-export function Contact() {
-  return (
-    <section id="contact" className="relative scroll-mt-20 px-4 pt-20 pb-24 sm:px-6">
-      <div className="mx-auto max-w-2xl rounded-3xl border border-line bg-surface p-8 text-center shadow-sm backdrop-blur-sm dark:shadow-none sm:p-12">
-        <p className="mb-3 font-mono text-xs font-semibold tracking-[0.2em] text-brand uppercase">
-          Stay in the loop
-        </p>
-        <h2 className="text-3xl font-semibold tracking-tight text-fg sm:text-4xl">
-          Get notified when something ships
-        </h2>
-        <p className="mx-auto mt-3 max-w-md text-base text-fg-muted">
-          A note when something new ships. No spam.
-        </p>
-        <div className="mx-auto mt-8 max-w-md">
-          <EmailSignupForm />
-        </div>
-        <p className="mt-6 text-sm text-fg-faint">
-          or email{" "}
-          <a
-            href="mailto:hello@codeswhat.com"
-            className="font-medium text-fg underline decoration-brand/60 underline-offset-2 hover:text-brand-hover"
-          >
-            hello@codeswhat.com
-          </a>
-        </p>
-      </div>
-    </section>
-  );
-}
diff --git a/frontend/components/site/sections/Hero.tsx b/frontend/components/site/sections/Hero.tsx
deleted file mode 100644
index d49f81e..0000000
--- a/frontend/components/site/sections/Hero.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ArrowRight, Github } from "lucide-react";
-import { TrackedCtaLink } from "@/components/site/TrackedCtaLink";
-import { GITHUB_URL } from "@/lib/site-config";
-
-/**
- * Hero — concept-shell typography on black: lime uppercase eyebrow, oversized
- * two-tone white/neutral heading, muted lead copy. The spinning 3D coin drifts
- * behind this via the FloatingScene layer; all text is server-rendered.
- */
-export function Hero() {
-  return (
-    <section className="relative px-4 pt-20 pb-16 sm:pt-28 sm:pb-20">
-      <div className="mx-auto flex max-w-3xl flex-col items-center gap-6 text-center">
-        <span className="inline-flex items-center rounded-full border border-brand/30 bg-brand/10 px-3 py-1 text-xs font-semibold tracking-[0.18em] text-brand uppercase">
-          Open Source · Developer Tools
-        </span>
-
-        <h1 className="text-5xl font-semibold tracking-tight text-fg sm:text-6xl lg:text-7xl">
-          Where curiosity
-          <br />
-          <span className="text-fg-faint">meets code.</span>
-        </h1>
-
-        <p className="max-w-2xl text-lg text-fg-muted">
-          Open-source tools for containers, security, and automation — small, sharp, and built in
-          the open.
-        </p>
-
-        <div className="mt-2 flex flex-wrap items-center justify-center gap-3">
-          <a
-            href="#projects"
-            className="inline-flex items-center gap-2 rounded-full bg-brand-solid px-5 py-2.5 text-sm font-semibold text-on-brand transition-colors hover:bg-brand-solid-hover"
-          >
-            See the projects
-            <ArrowRight className="h-4 w-4" />
-          </a>
-          <TrackedCtaLink
-            href={GITHUB_URL}
-            target="_blank"
-            rel="noopener noreferrer"
-            placement="hero"
-            className="inline-flex items-center gap-2 rounded-full border border-line-strong px-5 py-2.5 text-sm font-semibold text-fg transition-colors hover:border-fg-muted"
-          >
-            <Github className="h-4 w-4" />
-            GitHub
-          </TrackedCtaLink>
-        </div>
-      </div>
-
-      {/* spacer so the floating coin has room to breathe above the fold */}
-      <div aria-hidden="true" className="h-40 sm:h-56" />
-    </section>
-  );
-}
diff --git a/frontend/components/site/sections/Projects.tsx b/frontend/components/site/sections/Projects.tsx
deleted file mode 100644
index 6df0de0..0000000
--- a/frontend/components/site/sections/Projects.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ArrowUpRight } from "lucide-react";
-import { PROJECTS } from "@/lib/site-config";
-
-/**
- * Projects — the crawlable heart of the page on black. Every project ships a
- * real name, tagline, and description in server-rendered HTML (the SEO/AEO
- * backbone), while its mascot balloon floats past in the 3D layer behind it.
- */
-export function Projects() {
-  return (
-    <section id="projects" className="relative scroll-mt-20 px-4 py-20 sm:px-6">
-      <div className="mx-auto max-w-6xl">
-        <div className="mb-12 max-w-2xl">
-          <p className="mb-3 font-mono text-xs font-semibold tracking-[0.2em] text-brand uppercase">
-            Open source software
-          </p>
-          <h2 className="text-3xl font-semibold tracking-tight text-fg sm:text-4xl">
-            Tools I actually use
-          </h2>
-          <p className="mt-3 text-base text-fg-muted">
-            Containers, security, automation. Each one built because I needed it and couldn't find
-            it.
-          </p>
-        </div>
-
-        <ul className="grid gap-5 sm:grid-cols-2">
-          {PROJECTS.map((project) => (
-            <li key={project.slug}>
-              <a
-                href={project.href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="group relative flex h-full flex-col gap-3 rounded-2xl border border-line bg-surface p-6 shadow-sm backdrop-blur-sm transition-all hover:-translate-y-0.5 hover:border-line-strong hover:bg-surface-hover hover:shadow-md dark:shadow-none"
-              >
-                <div className="flex items-start justify-between gap-3">
-                  <div>
-                    <h3 className="text-xl font-semibold tracking-tight text-fg">{project.name}</h3>
-                    <p className="text-sm text-fg-faint">{project.tagline}</p>
-                  </div>
-                  <ArrowUpRight
-                    className="h-5 w-5 shrink-0 opacity-70 transition-opacity group-hover:opacity-100"
-                    style={{ color: project.accent }}
-                  />
-                </div>
-                <p className="text-sm leading-relaxed text-fg-muted">{project.description}</p>
-                <span className="mt-auto pt-2 font-mono text-xs tracking-wide text-fg-faint uppercase">
-                  {project.status}
-                </span>
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-  );
-}
diff --git a/frontend/components/site/sections/Services.tsx b/frontend/components/site/sections/Services.tsx
deleted file mode 100644
index 103240a..0000000
--- a/frontend/components/site/sections/Services.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ArrowRight } from "lucide-react";
-
-/**
- * Services — the "work with me" pitch on black. Server-rendered like the other
- * sections so it's crawlable. Counterpart to Projects: those are the things I've
- * shipped, this is what I can do for you.
- */
-const OFFERINGS = [
-  {
-    title: "Zero to one, fast",
-    body: "Idea to a shipped product in weeks, not quarters. Prototypes and MVPs that actually hold up.",
-  },
-  {
-    title: "Get good with AI tools",
-    body: "Learn to use AI coding agents for real work — the workflows that stick, not the demos.",
-  },
-  {
-    title: "Automate the busywork",
-    body: "Internal tools and automation for the repetitive stuff, built to fit how you already work.",
-  },
-];
-
-export function Services() {
-  return (
-    <section id="services" className="relative scroll-mt-20 px-4 py-20 sm:px-6">
-      <div className="mx-auto max-w-6xl">
-        <div className="mb-12 max-w-2xl">
-          <p className="mb-3 font-mono text-xs font-semibold tracking-[0.2em] text-brand uppercase">
-            Work with me
-          </p>
-          <h2 className="text-3xl font-semibold tracking-tight text-fg sm:text-4xl">
-            CodesWhat? Anything for you.
-          </h2>
-          <p className="mt-3 text-base text-fg-muted">
-            The projects above are just what I've open-sourced. If you're building something, I can
-            help you ship it faster.
-          </p>
-        </div>
-
-        <ul className="grid gap-5 sm:grid-cols-3">
-          {OFFERINGS.map((offering) => (
-            <li
-              key={offering.title}
-              className="flex h-full flex-col gap-2 rounded-2xl border border-line bg-surface p-6 shadow-sm backdrop-blur-sm dark:shadow-none"
-            >
-              <h3 className="text-lg font-semibold tracking-tight text-fg">{offering.title}</h3>
-              <p className="text-sm leading-relaxed text-fg-muted">{offering.body}</p>
-            </li>
-          ))}
-        </ul>
-
-        <div className="mt-8">
-          <a
-            href="mailto:hello@codeswhat.com"
-            className="inline-flex items-center gap-2 rounded-full bg-brand-solid px-5 py-2.5 text-sm font-semibold text-on-brand transition-colors hover:bg-brand-solid-hover"
-          >
-            Tell me what you need help with
-            <ArrowRight className="h-4 w-4" />
-          </a>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/frontend/components/site/scene/BalloonStudio.tsx b/frontend/components/studio/BalloonStudio.tsx
similarity index 94%
rename from frontend/components/site/scene/BalloonStudio.tsx
rename to frontend/components/studio/BalloonStudio.tsx
index f838af9..90206c3 100644
--- a/frontend/components/site/scene/BalloonStudio.tsx
+++ b/frontend/components/studio/BalloonStudio.tsx
@@ -3,8 +3,8 @@
 import { Environment, Lightformer } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
 import { Suspense } from "react";
-import { MylarBalloon } from "@/components/site/scene/balloons/MylarBalloon";
-import { CaptureBridge, captureControl } from "@/components/site/scene/captureRig";
+import { MylarBalloon } from "@/components/studio/balloons/MylarBalloon";
+import { CaptureBridge, captureControl } from "@/components/studio/captureRig";
 
 /**
  * Dev-only capture stage for a mascot Mylar balloon — same lighting as the
diff --git a/frontend/components/site/scene/BoardObjects.tsx b/frontend/components/studio/BoardObjects.tsx
similarity index 100%
rename from frontend/components/site/scene/BoardObjects.tsx
rename to frontend/components/studio/BoardObjects.tsx
diff --git a/frontend/components/site/scene/CoinStudio.tsx b/frontend/components/studio/CoinStudio.tsx
similarity index 95%
rename from frontend/components/site/scene/CoinStudio.tsx
rename to frontend/components/studio/CoinStudio.tsx
index f8a50ab..b66fda5 100644
--- a/frontend/components/site/scene/CoinStudio.tsx
+++ b/frontend/components/studio/CoinStudio.tsx
@@ -4,8 +4,8 @@ import { Environment, Lightformer } from "@react-three/drei";
 import { Canvas, useFrame } from "@react-three/fiber";
 import { type ReactNode, Suspense, useRef } from "react";
 import type * as THREE from "three";
-import { CodesWhatCoin } from "@/components/site/scene/BoardObjects";
-import { CaptureBridge, captureControl } from "@/components/site/scene/captureRig";
+import { CodesWhatCoin } from "@/components/studio/BoardObjects";
+import { CaptureBridge, captureControl } from "@/components/studio/captureRig";
 
 /**
  * Dev-only capture stage for the CodesWhat coin. Mounts ONLY the spinning coin
diff --git a/frontend/components/site/scene/balloons/MylarBalloon.tsx b/frontend/components/studio/balloons/MylarBalloon.tsx
similarity index 100%
rename from frontend/components/site/scene/balloons/MylarBalloon.tsx
rename to frontend/components/studio/balloons/MylarBalloon.tsx
diff --git a/frontend/components/site/scene/balloons/types.ts b/frontend/components/studio/balloons/types.ts
similarity index 90%
rename from frontend/components/site/scene/balloons/types.ts
rename to frontend/components/studio/balloons/types.ts
index 9ef38a6..fc1b113 100644
--- a/frontend/components/site/scene/balloons/types.ts
+++ b/frontend/components/studio/balloons/types.ts
@@ -1,7 +1,7 @@
 /**
- * Prop contract for the Mylar mascot balloon used in the homepage's floating
- * 3D scene (see components/site/FloatingSceneCanvas). Kept as its own type so
- * the scene and the balloon component share one signature.
+ * Prop contract for the Mylar mascot balloon used by the dev-only 3D
+ * asset-capture studio. Kept as its own type so the studio and the balloon
+ * component share one signature.
  */
 export type BalloonProps = {
   /** mascot PNG (transparent) used as the logo texture */
diff --git a/frontend/components/site/scene/captureRig.tsx b/frontend/components/studio/captureRig.tsx
similarity index 100%
rename from frontend/components/site/scene/captureRig.tsx
rename to frontend/components/studio/captureRig.tsx
diff --git a/frontend/components/site/scene/collisionContext.ts b/frontend/components/studio/collisionContext.ts
similarity index 100%
rename from frontend/components/site/scene/collisionContext.ts
rename to frontend/components/studio/collisionContext.ts
diff --git a/frontend/components/ui/badge.tsx b/frontend/components/ui/badge.tsx
deleted file mode 100644
index c1c7d23..0000000
--- a/frontend/components/ui/badge.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span";
-
-  return (
-    <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
deleted file mode 100644
index ba10d55..0000000
--- a/frontend/components/ui/button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };
diff --git a/frontend/components/ui/card.tsx b/frontend/components/ui/card.tsx
deleted file mode 100644
index 97465c9..0000000
--- a/frontend/components/ui/card.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
-      {...props}
-    />
-  );
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  );
-}
-
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
diff --git a/frontend/instrumentation-client.ts b/frontend/instrumentation-client.ts
index 6a8604f..e28cd7b 100644
--- a/frontend/instrumentation-client.ts
+++ b/frontend/instrumentation-client.ts
@@ -1,5 +1,10 @@
 import posthog from "posthog-js";
-import { getPostHogConfig, sanitizeEvent, sanitizeRoute } from "./lib/posthog-privacy";
+import {
+  classifyClientErrorName,
+  getPostHogConfig,
+  sanitizeEvent,
+  sanitizeRoute,
+} from "./lib/posthog-privacy";
 
 const posthogConfig = getPostHogConfig({
   NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN: process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN,
@@ -11,6 +16,21 @@ function capturePageview(url: string) {
   posthog.capture("$pageview", { path: sanitizeRoute(url) });
 }
 
+const MAX_CLIENT_ERRORS_PER_PAGE_LOAD = 5;
+let clientErrorCount = 0;
+
+// Only a bounded kind, an allowlisted constructor name and the sanitized route
+// leave the page. No message, stack, filename or URL is ever read.
+function captureClientError(errorKind: "error" | "unhandled_rejection", cause: unknown) {
+  if (clientErrorCount >= MAX_CLIENT_ERRORS_PER_PAGE_LOAD) return;
+  clientErrorCount += 1;
+  posthog.capture("client error", {
+    error_kind: errorKind,
+    error_name: classifyClientErrorName(cause),
+    path: sanitizeRoute(window.location.pathname),
+  });
+}
+
 if (typeof window !== "undefined" && posthogConfig) {
   posthog.init(posthogConfig.token, {
     api_host: posthogConfig.apiHost,
@@ -42,7 +62,11 @@ if (typeof window !== "undefined" && posthogConfig) {
     disable_persistence: true,
     respect_dnt: true,
     save_referrer: true,
-    save_campaign_params: false,
+    // Campaign labels only: the sanitizer forwards utm_source/medium/campaign
+    // through a bounded vocabulary, and masking drops the per-click ids
+    // (gclid, fbclid, msclkid and the rest of PERSONAL_DATA_CAMPAIGN_PARAMS).
+    save_campaign_params: true,
+    mask_personal_data_properties: true,
     disable_capture_url_hashes: true,
     disable_scroll_properties: true,
     mask_all_element_attributes: true,
@@ -56,6 +80,11 @@ if (typeof window !== "undefined" && posthogConfig) {
     before_send: (event) => sanitizeEvent(event) as typeof event | null,
   });
 
+  window.addEventListener("error", (event) => captureClientError("error", event.error));
+  window.addEventListener("unhandledrejection", (event) =>
+    captureClientError("unhandled_rejection", event.reason),
+  );
+
   capturePageview(window.location.pathname);
 }
 
diff --git a/frontend/lib/posthog-privacy.ts b/frontend/lib/posthog-privacy.ts
index c2f8040..8753589 100644
--- a/frontend/lib/posthog-privacy.ts
+++ b/frontend/lib/posthog-privacy.ts
@@ -1,14 +1,65 @@
+import { PROJECT_SLUGS } from "./project-slugs.ts";
+import { supportCtaId, TIERS } from "./support.ts";
+
 export const POSTHOG_API_HOST = "https://e.codeswhat.com";
 export const POSTHOG_UI_HOST = "https://us.posthog.com";
 export const PRODUCTION_ORIGIN = "https://codeswhat.com";
-export const ALLOWED_ROUTES = ["/"] as const;
-export const ALLOWED_CTA_IDS = ["github_org"] as const;
+// Only the fixed routes plus /projects/<slug> for slugs in PROJECT_SLUGS. Any other
+// /projects/... path falls through to /_other, so the route set stays bounded.
+export const ALLOWED_ROUTES = [
+  "/",
+  "/support",
+  ...PROJECT_SLUGS.map((slug) => `/projects/${slug}` as const),
+] as const;
+export const ALLOWED_CTA_IDS = [
+  "github_org",
+  "sponsors_github",
+  "support_systema",
+  ...TIERS.map((tier) => supportCtaId(tier)),
+  ...PROJECT_SLUGS.map((slug) => `project_${slug}` as const),
+] as const;
+export const NEWSLETTER_ERROR_CLASSES = [
+  "invalid_email",
+  "rate_limited",
+  "unavailable",
+  "network",
+] as const;
+export const CLIENT_ERROR_KINDS = ["error", "unhandled_rejection"] as const;
+export const CLIENT_ERROR_NAMES = [
+  "TypeError",
+  "ReferenceError",
+  "SyntaxError",
+  "RangeError",
+  "ChunkLoadError",
+  "Error",
+  "other",
+] as const;
+// Incoming UTM values are untrusted, so only this bounded vocabulary (plus a
+// strict slug shape for utm_campaign) is forwarded. Everything else is dropped.
+export const UTM_SOURCES = [
+  "github",
+  "x",
+  "bluesky",
+  "linkedin",
+  "reddit",
+  "hackernews",
+  "newsletter",
+  "producthunt",
+] as const;
+export const UTM_MEDIUMS = ["social", "email", "referral", "community"] as const;
 
 const OTHER_PATH = "/_other";
 const PROJECT_TOKEN_PATTERN = /^phc_[A-Za-z0-9_-]+$/u;
 const allowedRoutes = new Set<string>(ALLOWED_ROUTES);
 const allowedCtaIds = new Set<string>(ALLOWED_CTA_IDS);
-const allowedPlacements = new Set(["header", "hero", "footer"]);
+const projectCtaPrefix = "project_";
+const supportCtaPrefix = "support_";
+const allowedNewsletterErrorClasses = new Set<string>(NEWSLETTER_ERROR_CLASSES);
+const allowedClientErrorKinds = new Set<string>(CLIENT_ERROR_KINDS);
+const allowedClientErrorNames = new Set<string>(CLIENT_ERROR_NAMES);
+const allowedUtmSources = new Set<string>(UTM_SOURCES);
+const allowedUtmMediums = new Set<string>(UTM_MEDIUMS);
+const UTM_CAMPAIGN_PATTERN = /^[a-z0-9-]{1,40}$/u;
 const allowedVitalKeys = new Set([
   "$web_vitals_CLS_value",
   "$web_vitals_FCP_value",
@@ -51,7 +102,13 @@ type EventInput = {
 };
 
 type SanitizedEvent = {
-  event: "$pageview" | "$pageleave" | "cta activated" | "$web_vitals";
+  event:
+    | "$pageview"
+    | "$pageleave"
+    | "cta activated"
+    | "$web_vitals"
+    | "newsletter submitted"
+    | "client error";
   properties: Record<string, boolean | number | string>;
   timestamp?: Date;
   uuid?: string;
@@ -81,6 +138,33 @@ function sanitizeReferringDomain(value: unknown): string | undefined {
   return value.toLowerCase();
 }
 
+function sanitizeUtmValue(value: unknown, allowed: Set<string>): string | undefined {
+  if (typeof value !== "string") return undefined;
+  const normalized = value.toLowerCase();
+  return allowed.has(normalized) ? normalized : undefined;
+}
+
+function sanitizeUtmCampaign(value: unknown): string | undefined {
+  if (typeof value !== "string") return undefined;
+  const normalized = value.toLowerCase();
+  return UTM_CAMPAIGN_PATTERN.test(normalized) ? normalized : undefined;
+}
+
+export function classifyClientErrorName(value: unknown): string {
+  const name = value instanceof Error ? value.name : undefined;
+  return typeof name === "string" && allowedClientErrorNames.has(name) ? name : "other";
+}
+
+function isAllowedCtaPlacement(ctaId: string, placement: string): boolean {
+  if (ctaId === "github_org") {
+    return placement === "header" || placement === "hero" || placement === "footer";
+  }
+  if (ctaId === "sponsors_github" || ctaId.startsWith(supportCtaPrefix)) {
+    return placement === "support";
+  }
+  return ctaId.startsWith(projectCtaPrefix) && placement === "projects";
+}
+
 function createCommonProperties(properties: Record<string, unknown>) {
   const token = properties.token;
   // PostHog's cookieless server-hash ingestion step computes the anonymous
@@ -128,6 +212,12 @@ function createCommonProperties(properties: Record<string, unknown>) {
   }
   const referringDomain = sanitizeReferringDomain(properties.$referring_domain);
   if (referringDomain !== undefined) common.$referring_domain = referringDomain;
+  const utmSource = sanitizeUtmValue(properties.utm_source, allowedUtmSources);
+  if (utmSource !== undefined) common.utm_source = utmSource;
+  const utmMedium = sanitizeUtmValue(properties.utm_medium, allowedUtmMediums);
+  if (utmMedium !== undefined) common.utm_medium = utmMedium;
+  const utmCampaign = sanitizeUtmCampaign(properties.utm_campaign);
+  if (utmCampaign !== undefined) common.utm_campaign = utmCampaign;
   return common;
 }
 
@@ -173,7 +263,7 @@ export function sanitizeEvent(input: unknown): SanitizedEvent | null {
   if (event === "cta activated") {
     const ctaId = typeof values.cta_id === "string" ? values.cta_id : "";
     const placement = typeof values.placement === "string" ? values.placement : "";
-    return allowedCtaIds.has(ctaId) && allowedPlacements.has(placement)
+    return allowedCtaIds.has(ctaId) && isAllowedCtaPlacement(ctaId, placement)
       ? createSanitizedEvent(eventInput, event, { ...common, cta_id: ctaId, placement })
       : null;
   }
@@ -187,7 +277,36 @@ export function sanitizeEvent(input: unknown): SanitizedEvent | null {
       }
     }
     return Object.keys(vitalProperties).length > 0
-      ? createSanitizedEvent(eventInput, event, { ...common, ...vitalProperties })
+      ? createSanitizedEvent(eventInput, event, {
+          ...common,
+          // Same already-sanitized path the pageview branch uses, so Web
+          // analytics reports that key off $pathname resolve vitals too.
+          $pathname: common.path,
+          ...vitalProperties,
+        })
+      : null;
+  }
+
+  if (event === "newsletter submitted") {
+    const result = values.result;
+    if (result === "success") {
+      return createSanitizedEvent(eventInput, event, { ...common, result });
+    }
+    const errorClass = typeof values.error_class === "string" ? values.error_class : "";
+    return result === "error" && allowedNewsletterErrorClasses.has(errorClass)
+      ? createSanitizedEvent(eventInput, event, { ...common, result, error_class: errorClass })
+      : null;
+  }
+
+  if (event === "client error") {
+    const errorKind = typeof values.error_kind === "string" ? values.error_kind : "";
+    const errorName = typeof values.error_name === "string" ? values.error_name : "";
+    return allowedClientErrorKinds.has(errorKind) && allowedClientErrorNames.has(errorName)
+      ? createSanitizedEvent(eventInput, event, {
+          ...common,
+          error_kind: errorKind,
+          error_name: errorName,
+        })
       : null;
   }
 
diff --git a/frontend/lib/project-slugs.ts b/frontend/lib/project-slugs.ts
new file mode 100644
index 0000000..367d502
--- /dev/null
+++ b/frontend/lib/project-slugs.ts
@@ -0,0 +1,15 @@
+/**
+ * Every project slug the site knows about: the roster in site-config plus
+ * Systema Machinae. Kept dependency-free because the analytics sanitizer ships
+ * to the browser and uses it to bound the routes and CTA ids it will report.
+ */
+export const PROJECT_SLUGS = [
+  "sockguard",
+  "drydock",
+  "portwing",
+  "portkey-admin-mcp",
+  "mouthtype",
+  "idlescreen",
+  "careerrat",
+  "systema-machinae",
+] as const;
diff --git a/frontend/lib/site-config.ts b/frontend/lib/site-config.ts
index 0d2a652..d74bad2 100644
--- a/frontend/lib/site-config.ts
+++ b/frontend/lib/site-config.ts
@@ -11,10 +11,10 @@ export const SITE_CONFIG = {
   /** Brand name in the header/footer/metadata. */
   name: "CodesWhat",
   /** Short tagline used in titles and OG metadata. */
-  tagline: "Where curiosity meets code",
+  tagline: "Small, sharp tools from one developer and a lot of agents",
   /** Default meta / OpenGraph / description. */
   description:
-    "Open-source developer tools for containers, security, and automation — Sockguard, Drydock, Portwing, and Portkey Admin MCP.",
+    "Open-source developer tools and apps, from Docker and MCP servers to macOS utilities and a job-search workspace: Sockguard, Drydock, Portwing, Portkey Admin MCP, Mouthtype, Idlescreen, and CareerRat.",
   /** Production domain (no protocol, no trailing slash). */
   domain: "codeswhat.com",
   /** GitHub org. */
@@ -46,22 +46,27 @@ export const OG_IMAGE = {
   url: "/og.png",
   width: 1200,
   height: 630,
-  alt: "CodesWhat — open-source developer tools for containers, security, and automation",
+  alt: "CodesWhat: open-source developer tools and apps",
 } as const;
 
+export type ProjectCategory = "server-tool" | "macos-app" | "web-app";
+
+export const CATEGORY_LABELS: Record<ProjectCategory, string> = {
+  "server-tool": "Server tool",
+  "macos-app": "macOS app",
+  "web-app": "Web app",
+};
+
 export type Project = {
   slug: string;
   name: string;
   tagline: string;
   description: string;
+  category: ProjectCategory;
   /** at-a-glance badges, kept uniform as "License · Language" across cards */
   status: string;
-  /** hex accent used for the card rule + balloon tint reference */
-  accent: string;
   /** primary link out (repo or product site) */
   href: string;
-  /** mascot balloon art in /public/logos */
-  balloon: string;
 };
 
 /** The project roster — real, crawlable content and the SEO/AEO backbone. */
@@ -69,44 +74,68 @@ export const PROJECTS: Project[] = [
   {
     slug: "sockguard",
     name: "Sockguard",
+    category: "server-tool",
     tagline: "Default-deny Docker socket proxy",
     description:
-      "A default-deny proxy for the Docker socket — you pick exactly which requests reach the daemon.",
+      "A default-deny proxy for the Docker socket. You pick exactly which requests reach the daemon.",
     status: "Apache-2.0 · Go",
-    accent: "#e8a11c",
     href: "https://getsockguard.com",
-    balloon: "/logos/sockguard-balloon.png",
   },
   {
     slug: "drydock",
     name: "Drydock",
+    category: "server-tool",
     tagline: "Container update monitoring",
     description:
       "Self-hosted update monitoring. Finds what you're running, flags outdated or exposed images, and tells you.",
     status: "AGPL-3.0 · TypeScript",
-    accent: "#1f9ed6",
     href: "https://getdrydock.com",
-    balloon: "/logos/drydock-balloon.png",
   },
   {
     slug: "portwing",
     name: "Portwing",
+    category: "server-tool",
     tagline: "Remote Docker agent",
     description: "Control your Docker containers from anywhere, without exposing the daemon.",
-    status: "AGPL-3.0 · Go",
-    accent: "#a25bd6",
-    href: "https://github.com/CodesWhat/portwing",
-    balloon: "/logos/portwing-balloon.png",
+    status: "MIT · Go",
+    href: "https://portwing.codeswhat.com",
   },
   {
     slug: "portkey-admin-mcp",
     name: "Portkey Admin MCP",
+    category: "server-tool",
     tagline: "Portkey admin, from any MCP client",
     description:
-      "A Model Context Protocol (MCP) server for the Portkey admin API — manage configs, keys, guardrails, and analytics from any MCP client.",
+      "A Model Context Protocol (MCP) server for the Portkey admin API. Manage configs, keys, guardrails, and analytics from any MCP client.",
     status: "MIT · TypeScript",
-    accent: "#6b7bd6",
     href: "https://github.com/CodesWhat/portkey-admin-mcp",
-    balloon: "/logos/portkey-balloon.png",
+  },
+  {
+    slug: "mouthtype",
+    name: "Mouthtype",
+    category: "macos-app",
+    tagline: "Push-to-talk dictation",
+    description: "Local push-to-talk dictation for macOS. Mouth in, text back.",
+    status: "GPL-3.0 · Swift",
+    href: "https://mouthtype.app",
+  },
+  {
+    slug: "idlescreen",
+    name: "Idlescreen",
+    category: "macos-app",
+    tagline: "ASCII art screen saver",
+    description: "ASCII art screen saver for macOS, rendered in Metal with 19 procedural patterns.",
+    status: "MIT · Swift",
+    href: "https://github.com/CodesWhat/idlescreen",
+  },
+  {
+    slug: "careerrat",
+    name: "CareerRat",
+    category: "web-app",
+    tagline: "Agentic job-search workspace",
+    description:
+      "Chat-first agentic job-search workspace: find, vet, tailor, track, and prep for roles with your own AI CLI.",
+    status: "MIT · JavaScript",
+    href: "https://careerrat.com",
   },
 ];
diff --git a/frontend/lib/specimens.ts b/frontend/lib/specimens.ts
new file mode 100644
index 0000000..5babe11
--- /dev/null
+++ b/frontend/lib/specimens.ts
@@ -0,0 +1,184 @@
+import { CATEGORY_LABELS, GITHUB_URL, PROJECTS } from "./site-config.ts";
+
+export type Specimen = {
+  slug: string;
+  no: string;
+  name: string;
+  latin: string;
+  kind: string;
+  license: string;
+  language: string;
+  tagline: string;
+  about: string;
+  habitat: string;
+  diet: string;
+  temperament: string;
+  marks: string;
+  handling: string;
+  site: string;
+  repo?: string;
+  docs?: string;
+  /** monthly running cost in dollars; null means nobody has measured it yet */
+  monthly: number | null;
+  upkeep: string;
+  alt: string;
+};
+
+type Field = Pick<
+  Specimen,
+  "latin" | "habitat" | "diet" | "temperament" | "marks" | "handling" | "alt"
+> & { docs?: string; repo?: string };
+
+const FIELD: Record<string, Field> = {
+  drydock: {
+    latin: "Balaena siccata",
+    habitat: "Home servers, homelab racks, one cupboard",
+    diet: "Image tags, registry digests, changelogs",
+    temperament: "Notices everything. Will tell you about it.",
+    marks: "Glossy sky blue, one eye, and the eye is an X. The X is not a mood.",
+    handling:
+      "Self-hosted. Point it at what you're running and it flags outdated or exposed images, then says so.",
+    alt: "Pixel art of a glossy blue toy whale facing left, with a round white eye marked with an X",
+    docs: "https://getdrydock.com/docs",
+    repo: `${GITHUB_URL}/drydock`,
+  },
+  sockguard: {
+    latin: "Canis custos",
+    habitat: "In front of /var/run/docker.sock, wherever that is",
+    diet: "Docker API requests. Refuses most of them.",
+    temperament: "Says no first. Has never been talked out of it.",
+    marks:
+      "Brown and orange, white muzzle, studded collar. Looks friendly until you ask for a port.",
+    handling:
+      "Sits in front of the Docker socket. You list the requests allowed through and everything else is refused.",
+    alt: "Pixel art of a brown toy bulldog facing left with a spiked black collar, a white muzzle and an X for an eye",
+    docs: "https://getsockguard.com/docs",
+    repo: `${GITHUB_URL}/sockguard`,
+  },
+  portwing: {
+    latin: "Columba portalis",
+    habitat: "The far side of a firewall",
+    diet: "Container commands, relayed one at a time",
+    temperament: "Carries the message. Does not open the door.",
+    marks: "Grey pigeon, purple and teal neck bands, orange feet, one X for an eye.",
+    handling:
+      "Runs beside Docker so you can control containers from anywhere, without exposing the daemon.",
+    alt: "Pixel art of a grey pigeon facing left with an orange beak, purple and teal neck bands and an X for an eye",
+    docs: "https://portwing.codeswhat.com/docs",
+    repo: `${GITHUB_URL}/portwing`,
+  },
+  "portkey-admin-mcp": {
+    latin: "Clavis administra",
+    habitat: "Inside whichever MCP client asks nicely",
+    diet: "Configs, keys, guardrails, analytics",
+    temperament: "Holds a great many keys. Has lost none.",
+    marks: "A hexagon with a chevron in it, over a squiggle. No feathers, no fur.",
+    handling:
+      "An MCP server for the Portkey admin API. Manage configs, keys, guardrails and analytics from any MCP client.",
+    alt: "Pixel art of a dark tile with a red-to-blue hexagon holding a chevron, above a white squiggle",
+    docs: `${GITHUB_URL}/portkey-admin-mcp/tree/main/docs`,
+    repo: `${GITHUB_URL}/portkey-admin-mcp`,
+  },
+  mouthtype: {
+    latin: "Os scribens",
+    habitat: "The menu bar of a Mac",
+    diet: "Audio, only while a key is held down",
+    temperament: "Speaks when spoken to.",
+    marks: "Red lips, a dark mouth, and a text cursor where you'd expect a tongue.",
+    handling: "Local push-to-talk dictation for macOS. Mouth in, text back.",
+    alt: "Pixel art of glossy red lips with a dark mouth and a white text cursor, on an orange tile",
+    docs: "https://docs.mouthtype.app",
+    repo: `${GITHUB_URL}/mouthtype`,
+  },
+  idlescreen: {
+    latin: "Cathodus somnians",
+    habitat: "Any Mac left alone long enough",
+    diet: "Idle time, served as 19 procedural patterns",
+    temperament: "Dreams in monospace.",
+    marks:
+      "A silver CRT with a green ghost on it, split into red and blue. Do not adjust your set.",
+    handling: "An ASCII art screen saver for macOS, rendered in Metal. Leave the room.",
+    alt: "Pixel art of a silver CRT monitor whose green screen shows a ghostly figure split into orange and blue",
+    repo: `${GITHUB_URL}/idlescreen`,
+  },
+  careerrat: {
+    latin: "Rattus laborans",
+    habitat: "A browser tab and your own AI CLI",
+    diet: "Job listings, resumes, interview notes",
+    temperament: "Overqualified. Applying anyway.",
+    marks: "Grey rat, blue tie, brown briefcase, both eyes X'd out. Job hunting does that.",
+    handling:
+      "A chat-first workspace that finds, vets, tailors, tracks and preps roles, using your own AI CLI.",
+    alt: "Pixel art of a grey cartoon rat in a white shirt and blue tie holding a brown briefcase, with X eyes",
+    docs: "https://careerrat.com/docs",
+    repo: `${GITHUB_URL}/careerrat`,
+  },
+  "systema-machinae": {
+    latin: "Machina recensens",
+    habitat: "systemamachinae.com, on a small rented VPS",
+    diet: "User-agent strings. Names every bot it meets.",
+    temperament: "Counts the visitors who aren't people.",
+    marks: "A beige server on two feet with smoke coming off one corner. The smoke is normal.",
+    handling: "A live census of the bots that visit a website, set as a field guide. Lab project.",
+    alt: "Pixel art of a small beige server tower with two eyes, three rack units and smoke rising from one corner",
+  },
+};
+
+const TBD_UPKEEP =
+  "Running costs aren't measured yet, so there's no number here. It draws on the shared pool.";
+const SYSTEMA_UPKEEP = "$30 a month all-in. It also takes support on its own page.";
+
+const fromConfig: Specimen[] = PROJECTS.map((p, i) => {
+  const f = FIELD[p.slug];
+  const [license, language] = p.status.split(" · ");
+  return {
+    slug: p.slug,
+    no: String(i + 1).padStart(2, "0"),
+    name: p.name,
+    kind: CATEGORY_LABELS[p.category],
+    license,
+    language,
+    tagline: p.tagline,
+    about: p.description,
+    site: p.href,
+    monthly: null,
+    upkeep: TBD_UPKEEP,
+    ...f,
+  };
+});
+
+export const SPECIMENS: Specimen[] = [
+  ...fromConfig,
+  {
+    slug: "systema-machinae",
+    no: String(fromConfig.length + 1).padStart(2, "0"),
+    name: "Systema Machinae",
+    kind: "Web app",
+    license: "MIT",
+    language: "TypeScript",
+    tagline: "A live bot census, set as a field guide",
+    about:
+      "A live census of the bots that visit a website, set as a field guide. A lab project, and the one that's live today.",
+    site: "https://systemamachinae.com",
+    monthly: 30,
+    upkeep: SYSTEMA_UPKEEP,
+    ...FIELD["systema-machinae"],
+  },
+];
+
+export const bySlug = (slug: string) => SPECIMENS.find((s) => s.slug === slug);
+
+export const SERVICES = [
+  {
+    title: "Zero to one, fast",
+    body: "Idea to a shipped product in weeks, not quarters. Prototypes and MVPs that actually hold up.",
+  },
+  {
+    title: "Get good with AI tools",
+    body: "Learn to use AI coding agents for real work. The workflows that stick, not the demos.",
+  },
+  {
+    title: "Automate the busywork",
+    body: "Internal tools and automation for the repetitive stuff, built to fit how you already work.",
+  },
+];
diff --git a/frontend/lib/support.ts b/frontend/lib/support.ts
new file mode 100644
index 0000000..1003bfb
--- /dev/null
+++ b/frontend/lib/support.ts
@@ -0,0 +1,192 @@
+/**
+ * Support tiers for the /support page. A fixed table of tiers, payment links
+ * supplied at runtime through one env var, and a validator so a bad value can
+ * never become a broken or hostile href. No site code talks to Stripe; the
+ * visitor follows a Stripe-hosted Payment Link.
+ */
+
+export type SupportProjectId =
+  | "sockguard"
+  | "drydock"
+  | "portwing"
+  | "portkey-admin-mcp"
+  | "mouthtype"
+  | "idlescreen"
+  | "careerrat";
+
+export type Tier = {
+  /** stable id, also the key in CODESWHAT_SUPPORT_LINKS */
+  id: string;
+  name: string;
+  /** whole USD, no cents */
+  price: number;
+  cadence: "once" | "monthly";
+  /** one honest sentence on what the money pays for */
+  buys: string;
+  /** Stripe Payment Link from CODESWHAT_SUPPORT_LINKS, or null when unset */
+  link: string | null;
+};
+
+/** Mirrors the GitHub Sponsors tiers and the Stripe Payment Links. Links come only from env. */
+export const TIERS: readonly Tier[] = [
+  {
+    id: "monthly-5",
+    name: "Keep the lights on",
+    price: 5,
+    cadence: "monthly",
+    buys: "Keeps the lights on: hosting, domains and CI across every CodesWhat project. Your name goes on the supporters list.",
+    link: null,
+  },
+  {
+    id: "monthly-10",
+    name: "README supporter",
+    price: 10,
+    cadence: "monthly",
+    buys: "Your name in the supporters section of the README for the CodesWhat project you use.",
+    link: null,
+  },
+  {
+    id: "monthly-25",
+    name: "Team sponsor",
+    price: 25,
+    cadence: "monthly",
+    buys: "For small teams. Your logo in the README of the CodesWhat project you use.",
+    link: null,
+  },
+  {
+    id: "monthly-100",
+    name: "Company sponsor",
+    price: 100,
+    cadence: "monthly",
+    buys: "For companies running CodesWhat tools in production. Your logo on codeswhat.com and in every project README.",
+    link: null,
+  },
+  {
+    id: "once-10",
+    name: "One-off thanks",
+    price: 10,
+    cadence: "once",
+    buys: "A one-time thank you, credited in the next release notes.",
+    link: null,
+  },
+  {
+    id: "once-50",
+    name: "One-off supporter",
+    price: 50,
+    cadence: "once",
+    buys: "A one-time gift, credited in the next release notes and on the supporters list.",
+    link: null,
+  },
+];
+
+export type ProjectCost = {
+  /** shown as the running-cost line */
+  line: string;
+  /** true while the figure is a stand-in Scott has not confirmed */
+  placeholder: boolean;
+};
+
+const PLACEHOLDER: ProjectCost = {
+  line: "PLACEHOLDER: running cost not yet confirmed",
+  placeholder: true,
+};
+
+/**
+ * Running costs per project. Every entry is an explicit placeholder for Scott
+ * to fill in; the known shared costs live in SHARED_COSTS. Never invent a figure.
+ */
+export const PROJECT_COSTS: Record<SupportProjectId, ProjectCost> = {
+  sockguard: PLACEHOLDER,
+  drydock: PLACEHOLDER,
+  portwing: PLACEHOLDER,
+  "portkey-admin-mcp": PLACEHOLDER,
+  mouthtype: PLACEHOLDER,
+  idlescreen: PLACEHOLDER,
+  careerrat: PLACEHOLDER,
+};
+
+/** Confirmed costs that several projects share. */
+export const SHARED_COSTS: readonly { label: string; cost: string }[] = [
+  { label: "Apple Developer Program, shared by Mouthtype and Idlescreen", cost: "$99/year" },
+  { label: "Domains", cost: "about $1/month each" },
+  { label: "Vercel", cost: "$0" },
+  { label: "PostHog", cost: "$0" },
+];
+
+/** Systema Machinae, shown separately; it runs its own /support page. */
+export const SYSTEMA = {
+  name: "Systema Machinae",
+  supportUrl: "https://systemamachinae.com/support",
+  cost: "$30/month all-in",
+  note: "Systema has its own support page and doesn't draw from this one.",
+} as const;
+
+export const GITHUB_SPONSORS_URL = "https://github.com/sponsors/CodesWhat";
+
+const STRIPE_HOSTS = new Set(["buy.stripe.com", "donate.stripe.com"]);
+
+/** True only for an https Stripe Payment Link with a real path and no credentials. */
+export function validLink(value: unknown): value is string {
+  if (typeof value !== "string") return false;
+  let url: URL;
+  try {
+    url = new URL(value);
+  } catch {
+    return false;
+  }
+  return (
+    url.protocol === "https:" &&
+    STRIPE_HOSTS.has(url.hostname) &&
+    url.username === "" &&
+    url.password === "" &&
+    url.pathname.length > 1
+  );
+}
+
+/**
+ * Parses the CODESWHAT_SUPPORT_LINKS env value (a JSON object of tier id to
+ * URL). Unknown ids and invalid links are dropped and reported through warn;
+ * bad JSON or a non-object yields an empty map.
+ */
+export function supportLinksFrom(
+  raw: string | undefined,
+  warn: (message: string) => void = () => {},
+): Record<string, string> {
+  if (!raw) return {};
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    warn("CODESWHAT_SUPPORT_LINKS is not valid JSON; ignoring it");
+    return {};
+  }
+  if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+    warn("CODESWHAT_SUPPORT_LINKS must be a JSON object of tier id to URL; ignoring it");
+    return {};
+  }
+  const known = new Set(TIERS.map((tier) => tier.id));
+  const links: Record<string, string> = {};
+  for (const [id, link] of Object.entries(parsed)) {
+    if (!known.has(id)) {
+      warn(`CODESWHAT_SUPPORT_LINKS has unknown tier id "${id}"; dropping it`);
+    } else if (!validLink(link)) {
+      warn(`CODESWHAT_SUPPORT_LINKS has an invalid link for "${id}"; dropping it`);
+    } else {
+      links[id] = link;
+    }
+  }
+  return links;
+}
+
+/** The tier table with links merged in; anything invalid becomes null. */
+export function tiersWith(links: Record<string, unknown>): Tier[] {
+  return TIERS.map((tier) => {
+    const link = links[tier.id];
+    return { ...tier, link: validLink(link) ? link : null };
+  });
+}
+
+/** Fixed analytics vocabulary id for a tier's support click (hyphens match project_ ids). */
+export function supportCtaId(tier: Pick<Tier, "id">): `support_${string}` {
+  return `support_${tier.id}`;
+}
diff --git a/frontend/lib/supporters.ts b/frontend/lib/supporters.ts
new file mode 100644
index 0000000..fd76c7f
--- /dev/null
+++ b/frontend/lib/supporters.ts
@@ -0,0 +1,20 @@
+/**
+ * Public supporters list. Add an entry here once someone has agreed to be
+ * named. Logos live in /public/supporters.
+ */
+
+export type CompanySupporter = {
+  name: string;
+  url: string;
+  /** path under /public, e.g. /supporters/acme.svg */
+  logo: string;
+};
+
+export type PersonSupporter = {
+  name: string;
+  url?: string;
+};
+
+export const companies: readonly CompanySupporter[] = [];
+
+export const people: readonly PersonSupporter[] = [];
diff --git a/frontend/lib/theme-init-script.ts b/frontend/lib/theme-init-script.ts
index d2ecdc5..8818133 100644
--- a/frontend/lib/theme-init-script.ts
+++ b/frontend/lib/theme-init-script.ts
@@ -1,9 +1,15 @@
-export const THEME_INIT_SCRIPT = `try {
-  // Dark by default (the 3D layer is tuned for black); light is an
-  // explicit opt-in via the header toggle.
-  if (localStorage.theme === 'light') {
-    document.documentElement.classList.remove('dark')
-  } else {
-    document.documentElement.classList.add('dark')
-  }
-} catch (_) {}`;
+// Runs before first paint (nonce'd in the root layout) so the page never flashes the wrong
+// paper. An explicit choice saved by the header toggle wins; otherwise follow the OS, and
+// fall back to light. data-theme on <html> is what the Catalogue tokens key off.
+export const THEME_INIT_SCRIPT = `(function () {
+  var saved = null
+  try { saved = localStorage.getItem('theme') } catch (_) {}
+  var theme = 'light'
+  try {
+    theme = saved === 'light' || saved === 'dark'
+      ? saved
+      : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+  } catch (_) {}
+  document.documentElement.dataset.theme = theme
+  document.documentElement.style.colorScheme = theme
+})()`;
diff --git a/frontend/lib/utils.ts b/frontend/lib/utils.ts
deleted file mode 100644
index 365058c..0000000
--- a/frontend/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index aac4652..9b1909b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,50 +8,29 @@
       "name": "codeswhat",
       "version": "0.1.0",
       "dependencies": {
-        "@radix-ui/react-slot": "^1.2.4",
         "@react-three/drei": "^10.7.7",
         "@react-three/fiber": "^9.6.1",
         "@react-three/rapier": "^2.2.0",
-        "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
-        "lucide-react": "^0.577.0",
         "next": "^16.2.11",
         "posthog-js": "1.417.0",
         "react": "19.2.4",
         "react-dom": "19.2.4",
-        "sonner": "^2.0.7",
-        "tailwind-merge": "^3.5.0",
         "three": "^0.185.0"
       },
       "devDependencies": {
         "@biomejs/biome": "^2.4.6",
-        "@tailwindcss/postcss": "^4.2.1",
         "@types/node": "^25.3.5",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
         "@types/three": "^0.185.0",
         "lefthook": "^2.1.2",
         "playwright-core": "^1.61.1",
-        "tailwindcss": "^4.2.1",
         "typescript": "^5.9.3"
       },
       "engines": {
         "node": "24.x"
       }
     },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@babel/runtime": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
@@ -230,18 +209,6 @@
       "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
       "license": "Apache-2.0"
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
-      "integrity": "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.1.0",
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@emnapi/runtime": {
       "version": "1.11.3",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.3.tgz",
@@ -252,17 +219,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@emnapi/wasi-threads": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
-      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@img/colour": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
@@ -812,56 +768,6 @@
         "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
-      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/remapping": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
-      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
-      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.31",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
-      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
     "node_modules/@mediapipe/tasks-vision": {
       "version": "0.10.17",
       "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
@@ -880,19 +786,6 @@
         "three": ">= 0.159.0"
       }
     },
-    "node_modules/@napi-rs/wasm-runtime": {
-      "version": "0.2.12",
-      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
-      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/core": "^1.4.3",
-        "@emnapi/runtime": "^1.4.3",
-        "@tybys/wasm-util": "^0.10.0"
-      }
-    },
     "node_modules/@next/env": {
       "version": "16.3.3",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-16.3.3.tgz",
@@ -1064,39 +957,6 @@
       "integrity": "sha512-i2Gei6ARfOSBeTN4s2yUP1p97s2UNI+1NWmtLjhnR/V6t3RFOfI1sBWKcJNWHjtoOCCWoAFU+PNPY6SgT2VtEQ==",
       "license": "MIT"
     },
-    "node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
-      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
-      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@react-three/drei": {
       "version": "10.7.7",
       "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.7.7.tgz",
@@ -1215,294 +1075,12 @@
         "tslib": "^2.8.0"
       }
     },
-    "node_modules/@tailwindcss/node": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.1.tgz",
-      "integrity": "sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/remapping": "^2.3.5",
-        "enhanced-resolve": "^5.19.0",
-        "jiti": "^2.6.1",
-        "lightningcss": "1.31.1",
-        "magic-string": "^0.30.21",
-        "source-map-js": "^1.2.1",
-        "tailwindcss": "4.2.1"
-      }
-    },
-    "node_modules/@tailwindcss/oxide": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.1.tgz",
-      "integrity": "sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 20"
-      },
-      "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.2.1",
-        "@tailwindcss/oxide-darwin-arm64": "4.2.1",
-        "@tailwindcss/oxide-darwin-x64": "4.2.1",
-        "@tailwindcss/oxide-freebsd-x64": "4.2.1",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.1",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.2.1",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.2.1",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.2.1",
-        "@tailwindcss/oxide-linux-x64-musl": "4.2.1",
-        "@tailwindcss/oxide-wasm32-wasi": "4.2.1",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.2.1",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.2.1"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.1.tgz",
-      "integrity": "sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.1.tgz",
-      "integrity": "sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.1.tgz",
-      "integrity": "sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.1.tgz",
-      "integrity": "sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.1.tgz",
-      "integrity": "sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.1.tgz",
-      "integrity": "sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.1.tgz",
-      "integrity": "sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.1.tgz",
-      "integrity": "sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.1.tgz",
-      "integrity": "sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.1.tgz",
-      "integrity": "sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==",
-      "bundleDependencies": [
-        "@napi-rs/wasm-runtime",
-        "@emnapi/core",
-        "@emnapi/runtime",
-        "@tybys/wasm-util",
-        "@emnapi/wasi-threads",
-        "tslib"
-      ],
-      "cpu": [
-        "wasm32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/core": "^1.8.1",
-        "@emnapi/runtime": "^1.8.1",
-        "@emnapi/wasi-threads": "^1.1.0",
-        "@napi-rs/wasm-runtime": "^1.1.1",
-        "@tybys/wasm-util": "^0.10.1",
-        "tslib": "^2.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.1.tgz",
-      "integrity": "sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.1.tgz",
-      "integrity": "sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/postcss": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.2.1.tgz",
-      "integrity": "sha512-OEwGIBnXnj7zJeonOh6ZG9woofIjGrd2BORfvE5p9USYKDCZoQmfqLcfNiRWoJlRWLdNPn2IgVZuWAOM4iTYMw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.2.1",
-        "@tailwindcss/oxide": "4.2.1",
-        "postcss": "^8.5.6",
-        "tailwindcss": "4.2.1"
-      }
-    },
     "node_modules/@tweenjs/tween.js": {
       "version": "23.1.3",
       "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
       "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
       "license": "MIT"
     },
-    "node_modules/@tybys/wasm-util": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
-      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@types/draco3d": {
       "version": "1.4.10",
       "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
@@ -1699,33 +1277,12 @@
       ],
       "license": "CC-BY-4.0"
     },
-    "node_modules/class-variance-authority": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
-      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "clsx": "^2.1.1"
-      },
-      "funding": {
-        "url": "https://polar.sh/cva"
-      }
-    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/core-js": {
       "version": "3.50.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.50.0.tgz",
@@ -1791,8 +1348,8 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "devOptional": true,
       "license": "Apache-2.0",
+      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -1812,20 +1369,6 @@
       "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
       "license": "Apache-2.0"
     },
-    "node_modules/enhanced-resolve": {
-      "version": "5.19.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
-      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.3.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/fflate": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
@@ -1838,13 +1381,6 @@
       "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
       "license": "MIT"
     },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/hls.js": {
       "version": "1.6.16",
       "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.16.tgz",
@@ -1901,16 +1437,6 @@
         "react": "^19.0.0"
       }
     },
-    "node_modules/jiti": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
-      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jiti": "lib/jiti-cli.mjs"
-      }
-    },
     "node_modules/lefthook": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/lefthook/-/lefthook-2.1.2.tgz",
@@ -2083,276 +1609,6 @@
         "immediate": "~3.0.5"
       }
     },
-    "node_modules/lightningcss": {
-      "version": "1.31.1",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
-      "integrity": "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==",
-      "dev": true,
-      "license": "MPL-2.0",
-      "dependencies": {
-        "detect-libc": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "lightningcss-android-arm64": "1.31.1",
-        "lightningcss-darwin-arm64": "1.31.1",
-        "lightningcss-darwin-x64": "1.31.1",
-        "lightningcss-freebsd-x64": "1.31.1",
-        "lightningcss-linux-arm-gnueabihf": "1.31.1",
-        "lightningcss-linux-arm64-gnu": "1.31.1",
-        "lightningcss-linux-arm64-musl": "1.31.1",
-        "lightningcss-linux-x64-gnu": "1.31.1",
-        "lightningcss-linux-x64-musl": "1.31.1",
-        "lightningcss-win32-arm64-msvc": "1.31.1",
-        "lightningcss-win32-x64-msvc": "1.31.1"
-      }
-    },
-    "node_modules/lightningcss-android-arm64": {
-      "version": "1.31.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.31.1.tgz",
-      "integrity": "sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.31.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.31.1.tgz",
-      "integrity": "sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-x64": {
-      "version": "1.31.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.31.1.tgz",
-      "integrity": "sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.31.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.31.1.tgz",
-      "integrity": "sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.31.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.31.1.tgz",
-      "integrity": "sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.31.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.31.1.tgz",
-      "integrity": "sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.31.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.31.1.tgz",
-      "integrity": "sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.31.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.31.1.tgz",
-      "integrity": "sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.31.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.31.1.tgz",
-      "integrity": "sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.31.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.31.1.tgz",
-      "integrity": "sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.31.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.31.1.tgz",
-      "integrity": "sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lucide-react": {
-      "version": "0.577.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.577.0.tgz",
-      "integrity": "sha512-4LjoFv2eEPwYDPg/CUdBJQSDfPyzXCRrVW1X7jrx/trgxnxkHFjnVZINbzvzxjN70dxychOfg+FTYwBiS3pQ5A==",
-      "license": "ISC",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/maath": {
       "version": "0.10.8",
       "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
@@ -2363,16 +1619,6 @@
         "three": ">=0.134.0"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.30.21",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
-      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
-      }
-    },
     "node_modules/meshline": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
@@ -2720,16 +1966,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/sonner": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
-      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
-        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -2797,37 +2033,6 @@
         "react": ">=17.0"
       }
     },
-    "node_modules/tailwind-merge": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
-      "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/dcastil"
-      }
-    },
-    "node_modules/tailwindcss": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz",
-      "integrity": "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/tapable": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
-      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
     "node_modules/three": {
       "version": "0.185.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.185.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5c487e4..6e9a12b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,7 +4,7 @@
   "engines": {
     "node": "24.x"
   },
-  "description": "Where curiosity meets code - Digital solutions and software consulting",
+  "description": "CodesWhat: small, sharp open-source tools and software consulting",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -17,6 +17,7 @@
     "check:all": "biome check . && npm run type-check",
     "format": "biome format --write .",
     "format:check": "biome format .",
+    "test:support": "node --experimental-strip-types --test test/support.test.ts",
     "test:scene": "node --test test/scene.test.mjs",
     "test:posthog": "node --experimental-strip-types --test test/posthog.test.ts test/posthog-source.test.mjs",
     "test:posthog:browser": "node --test test/posthog-browser.test.mjs",
@@ -27,31 +28,23 @@
     "vercel-build": "npm run build"
   },
   "dependencies": {
-    "@radix-ui/react-slot": "^1.2.4",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.6.1",
     "@react-three/rapier": "^2.2.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.577.0",
     "next": "^16.2.11",
     "posthog-js": "1.417.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.5.0",
     "three": "^0.185.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.6",
-    "@tailwindcss/postcss": "^4.2.1",
     "@types/node": "^25.3.5",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/three": "^0.185.0",
     "lefthook": "^2.1.2",
     "playwright-core": "^1.61.1",
-    "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3"
   }
 }
diff --git a/frontend/postcss.config.mjs b/frontend/postcss.config.mjs
deleted file mode 100644
index 79bcf13..0000000
--- a/frontend/postcss.config.mjs
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-const config = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-
-export default config;
diff --git a/frontend/public/og.png b/frontend/public/og.png
index 6059d38..41efb8a 100644
Binary files a/frontend/public/og.png and b/frontend/public/og.png differ
diff --git a/frontend/public/og/careerrat.png b/frontend/public/og/careerrat.png
new file mode 100644
index 0000000..00980ca
Binary files /dev/null and b/frontend/public/og/careerrat.png differ
diff --git a/frontend/public/og/drydock.png b/frontend/public/og/drydock.png
new file mode 100644
index 0000000..f0e2b8b
Binary files /dev/null and b/frontend/public/og/drydock.png differ
diff --git a/frontend/public/og/idlescreen.png b/frontend/public/og/idlescreen.png
new file mode 100644
index 0000000..e60db36
Binary files /dev/null and b/frontend/public/og/idlescreen.png differ
diff --git a/frontend/public/og/mouthtype.png b/frontend/public/og/mouthtype.png
new file mode 100644
index 0000000..571644b
Binary files /dev/null and b/frontend/public/og/mouthtype.png differ
diff --git a/frontend/public/og/portkey-admin-mcp.png b/frontend/public/og/portkey-admin-mcp.png
new file mode 100644
index 0000000..3cd842e
Binary files /dev/null and b/frontend/public/og/portkey-admin-mcp.png differ
diff --git a/frontend/public/og/portwing.png b/frontend/public/og/portwing.png
new file mode 100644
index 0000000..94992a7
Binary files /dev/null and b/frontend/public/og/portwing.png differ
diff --git a/frontend/public/og/sockguard.png b/frontend/public/og/sockguard.png
new file mode 100644
index 0000000..d5832e3
Binary files /dev/null and b/frontend/public/og/sockguard.png differ
diff --git a/frontend/public/og/support.png b/frontend/public/og/support.png
new file mode 100644
index 0000000..9e39c74
Binary files /dev/null and b/frontend/public/og/support.png differ
diff --git a/frontend/public/og/systema-machinae.png b/frontend/public/og/systema-machinae.png
new file mode 100644
index 0000000..c4a6b3f
Binary files /dev/null and b/frontend/public/og/systema-machinae.png differ
diff --git a/frontend/scripts/generate-og.mjs b/frontend/scripts/generate-og.mjs
index 98ec7c1..d4f928e 100644
--- a/frontend/scripts/generate-og.mjs
+++ b/frontend/scripts/generate-og.mjs
@@ -1,100 +1,148 @@
-// Generates the social/OG card as a static PNG (public/og.png).
-// Concept: the real CodesWhat emblem tiled across the whole board in a dim blue
-// (hue-shifted) variant, with the full lime emblem dropped big in the center on
-// a soft halo. Run: npm run og
-
+// Renders the Catalogue share cards with headless Chrome: public/og.png (home),
+// public/og/support.png and public/og/<slug>.png. Fonts and sprites are inlined, nothing is
+// fetched at render time. Run: npm run og
+import { mkdir, readFile, stat } from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import sharp from "sharp";
-
-const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
-const LOGO = path.join(root, "public/logos/codeswhat-logo-green.png");
-const OUT = path.join(root, "public/og.png");
+import { chromium } from "playwright-core";
+import { SPRITES } from "../components/catalogue/sprites.ts";
+import { SPECIMENS } from "../lib/specimens.ts";
 
-const W = 1200;
-const H = 630;
-const transparent = { r: 0, g: 0, b: 0, alpha: 0 };
+const here = path.dirname(fileURLToPath(import.meta.url));
+const publicDir = path.resolve(here, "../public");
+const MAX_BYTES = 300 * 1024;
 
-/** The emblem, hue-rotated (lime -> blue) and dimmed to `alphaScale` opacity. */
-async function tintedMark(size, hue, alphaScale) {
-  const { data, info } = await sharp(LOGO)
-    .resize(size, size, { fit: "contain", background: transparent })
-    .modulate({ hue })
-    .ensureAlpha()
-    .raw()
-    .toBuffer({ resolveWithObject: true });
-  for (let i = 3; i < data.length; i += 4) data[i] = Math.round(data[i] * alphaScale);
-  return sharp(data, { raw: { width: info.width, height: info.height, channels: 4 } })
-    .png()
-    .toBuffer();
-}
+const font = async (file) =>
+  `data:font/woff2;base64,${(await readFile(path.join(here, "og-fonts", file))).toString("base64")}`;
+const [serif, italic, sans, mono] = await Promise.all([
+  font("instrument-serif-latin-400-normal.woff2"),
+  font("instrument-serif-latin-400-italic.woff2"),
+  font("instrument-sans-latin-wght-normal.woff2"),
+  font("jetbrains-mono-latin-wght-normal.woff2"),
+]);
 
-/** Center a mark in a padded transparent cell (gives the tiles breathing room). */
-async function cell(size, mark) {
-  return sharp({ create: { width: size, height: size, channels: 4, background: transparent } })
-    .composite([{ input: mark, gravity: "center" }])
-    .png()
-    .toBuffer();
+/** Row-string sprite to whole-pixel inline SVG, one path per colour (same scheme as Sprite.tsx). */
+function sprite(slug, px) {
+  const art = SPRITES[slug];
+  if (!art) throw new Error(`no sprite for ${slug}`);
+  const colors = { k: "#111827", ...art.palette };
+  const w = Math.max(...art.rows.map((r) => r.length));
+  const h = art.rows.length;
+  const paths = new Map();
+  art.rows.forEach((row, y) => {
+    let x = 0;
+    while (x < row.length) {
+      const ch = row[x];
+      let end = x + 1;
+      while (end < row.length && row[end] === ch) end++;
+      if (ch !== "." && colors[ch]) {
+        paths.set(ch, `${paths.get(ch) ?? ""}M${x} ${y}h${end - x}v1h-${end - x}z`);
+      }
+      x = end;
+    }
+  });
+  const body = [...paths].map(([ch, d]) => `<path d="${d}" fill="${colors[ch]}"/>`).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}" width="${w * px}" height="${h * px}" shape-rendering="crispEdges">${body}</svg>`;
 }
 
-async function main() {
-  // dark background, faint lime/blue drift toward the upper-left
-  const bg = Buffer.from(
-    `<svg width="${W}" height="${H}" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <radialGradient id="g" cx="32%" cy="30%" r="95%">
-          <stop offset="0" stop-color="#10190f"/>
-          <stop offset="52%" stop-color="#0a1016"/>
-          <stop offset="100%" stop-color="#050607"/>
-        </radialGradient>
-      </defs>
-      <rect width="${W}" height="${H}" fill="url(#g)"/>
-    </svg>`,
-  );
+const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;");
 
-  // blue emblem tiled across the whole board
-  const fieldTile = await cell(86, await tintedMark(60, 175, 0.24));
-  const field = await sharp({
-    create: { width: W, height: H, channels: 4, background: transparent },
-  })
-    .composite([{ input: fieldTile, tile: true }])
-    .png()
-    .toBuffer();
+const CSS = `
+@font-face { font-family: Serif; src: url('${serif}'); }
+@font-face { font-family: Serif; font-style: italic; src: url('${italic}'); }
+@font-face { font-family: Sans; src: url('${sans}'); font-weight: 400 700; }
+@font-face { font-family: Mono; src: url('${mono}'); font-weight: 100 800; }
+* { box-sizing: border-box; }
+body { margin: 0; width: 1200px; height: 630px; background: #fff; color: #111827; position: relative; overflow: hidden; }
+.brand { position: absolute; top: 48px; left: 64px; display: flex; align-items: center; gap: 14px; font: 40px Serif; letter-spacing: -1px; }
+.brand .q { font-style: normal; background: #d3e58b; padding: 0 4px; margin-left: 1px; }
+.label { position: absolute; top: 132px; left: 66px; font: 500 14px Mono; letter-spacing: 2px; text-transform: uppercase; }
+h1 { position: absolute; left: 62px; top: 168px; margin: 0; width: 640px; height: 268px; overflow: hidden; font: 400 84px/1.02 Serif; letter-spacing: -2px; }
+h1.narrow { width: 560px; }
+h1 em, .name em { font-style: italic; background: #d3e58b; padding: 0 .1em; margin: 0 -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
+.sub { position: absolute; left: 66px; top: 452px; width: 600px; margin: 0; font: 24px/1.4 Sans; color: #4b5563; }
+.dots { position: absolute; top: 96px; right: 36px; width: 430px; height: 410px; background: radial-gradient(#b3bdb6 1.2px, transparent 1.2px) 0 0 / 22px 22px; opacity: .6; }
+.paper { position: absolute; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; border: 1px solid #111827; border-radius: 6px; background: #f8f9fa; box-shadow: 8px 8px 0 #d3e58b; }
+.paper.coll { right: 44px; top: 140px; width: 420px; height: 320px; transform: rotate(2deg); gap: 18px 0; padding: 20px 12px 44px; }
+.paper.coll .cell { width: 96px; height: 100px; display: flex; align-items: center; justify-content: center; }
+.paper .fig { position: absolute; left: 16px; bottom: 10px; font: 500 12px Mono; letter-spacing: 2px; text-transform: uppercase; color: #4b5563; }
+.paper.big { right: 64px; top: 112px; width: 400px; height: 380px; padding-bottom: 36px; transform: rotate(2deg); display: flex; align-items: center; justify-content: center; }
+.name { position: absolute; left: 62px; top: 168px; margin: 0; width: 640px; height: 112px; overflow: hidden; font: 400 96px/1.1 Serif; letter-spacing: -2px; white-space: nowrap; }
+.latin { position: absolute; left: 66px; top: 282px; margin: 0; font: italic 38px/1.3 Serif; color: #4b5563; }
+.tiers { position: absolute; left: 66px; top: 440px; display: flex; gap: 12px; }
+.tiers span { border: 1px solid #111827; border-radius: 999px; padding: 10px 20px; font: 500 20px Mono; background: #fff; }
+.tiers span:nth-child(odd) { background: #d3e58b; }
+footer { position: absolute; left: 66px; right: 66px; bottom: 36px; padding-top: 18px; border-top: 2px solid #111827; display: flex; justify-content: space-between; align-items: center; font: 500 14px Mono; letter-spacing: 1.5px; text-transform: uppercase; }
+footer .l { display: flex; align-items: center; gap: 12px; }
+`;
 
-  // soft lime halo so the hero mark separates from the field
-  const halo = Buffer.from(
-    `<svg width="${W}" height="${H}" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <radialGradient id="h" cx="50%" cy="50%" r="50%">
-          <stop offset="0" stop-color="#c4ff00" stop-opacity="0.22"/>
-          <stop offset="55%" stop-color="#c4ff00" stop-opacity="0.06"/>
-          <stop offset="100%" stop-color="#c4ff00" stop-opacity="0"/>
-        </radialGradient>
-      </defs>
-      <ellipse cx="${W / 2}" cy="${H / 2}" rx="330" ry="300" fill="url(#h)"/>
-    </svg>`,
-  );
+function page(body) {
+  const coin = sprite("coin", 1);
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><style>${CSS}</style></head><body>${body.replaceAll("{{COIN}}", coin)}</body></html>`;
+}
 
-  // the real lime emblem, big, in the center
-  const heroSize = 340;
-  const hero = await sharp(LOGO)
-    .resize(heroSize, heroSize, { fit: "contain", background: transparent })
-    .png()
-    .toBuffer();
+const brand = `<div class="brand">${sprite("coin", 1).replace('width="32" height="32"', 'width="40" height="40"')}<span>CodesWhat<em class="q">?</em></span></div>`;
+const footer = (left) =>
+  `<footer><span class="l">${left}</span><span>codeswhat.com</span></footer>`;
 
-  await sharp(await sharp(bg).png().toBuffer())
-    .composite([
-      { input: field, blend: "over" },
-      { input: halo, blend: "over" },
-      { input: hero, gravity: "center" },
-    ])
-    .png()
-    .toFile(OUT);
+const HOME_SLUGS = SPECIMENS.map((s) => s.slug);
+const cards = [
+  {
+    out: path.join(publicDir, "og.png"),
+    html: page(`${brand}
+      <div class="label">Catalogue of small tools</div>
+      <h1>One developer. A lot of agents. <em>Small, sharp</em> tools.</h1>
+      <div class="dots"></div>
+      <div class="paper coll">${HOME_SLUGS.map((s) => `<div class="cell">${sprite(s, 3)}</div>`).join("")}<span class="fig">Fig. 1 · The collection</span></div>
+      ${footer("Open-source developer tools and apps")}`),
+  },
+  {
+    out: path.join(publicDir, "og/support.png"),
+    html: page(`${brand}
+      <div class="label">Support</div>
+      <h1 class="narrow">What it costs, and <em>how to help.</em></h1>
+      <div class="tiers"><span>$5</span><span>$10</span><span>$25</span><span>$100 a month</span></div>
+      <div class="dots"></div>
+      <div class="paper coll">${HOME_SLUGS.map((s) => `<div class="cell">${sprite(s, 3)}</div>`).join("")}<span class="fig">Fig. 1 · The collection</span></div>
+      ${footer("Open-source developer tools and apps")}`),
+  },
+  ...SPECIMENS.map((s) => {
+    const art = SPRITES[s.slug];
+    const w = Math.max(...art.rows.map((r) => r.length));
+    const px = Math.floor(300 / Math.max(w, art.rows.length)) || 1;
+    return {
+      out: path.join(publicDir, `og/${s.slug}.png`),
+      html: page(`${brand}
+        <div class="label">Plate ${esc(s.no)} · ${esc(s.kind)}</div>
+        <div class="name" style="font-size:${s.name.length > 12 ? 68 : 96}px"><em>${esc(s.name)}</em></div>
+        <p class="latin">${esc(s.latin)}</p>
+        <p class="sub" style="top:360px">${esc(s.tagline)}</p>
+        <div class="dots"></div>
+        <div class="paper big">${sprite(s.slug, Math.max(px, 8))}<span class="fig">Plate ${esc(s.no)} · ${esc(s.kind)}</span></div>
+        ${footer("A CodesWhat project")}`),
+    };
+  }),
+];
 
-  console.log(`wrote ${OUT}`);
+await mkdir(path.join(publicDir, "og"), { recursive: true });
+const browser = await chromium.launch({ channel: "chrome" });
+try {
+  const pg = await browser.newPage({ viewport: { width: 1200, height: 630 }, deviceScaleFactor: 1 });
+  for (const card of cards) {
+    await pg.setContent(card.html);
+    await pg.evaluate(() => document.fonts.ready);
+    const fits = await pg.evaluate(() =>
+      [...document.querySelectorAll("h1, .name, .sub, .latin")].every(
+        (el) => el.scrollWidth <= el.clientWidth + 1 && el.scrollHeight <= el.clientHeight + 1 &&
+          el.getBoundingClientRect().bottom < 590,
+      ),
+    );
+    if (!fits) throw new Error(`Headline overflows its box: ${path.basename(card.out)}`);
+    await pg.screenshot({ path: card.out });
+    const { size } = await stat(card.out);
+    if (size > MAX_BYTES) throw new Error(`${path.basename(card.out)} is ${size} bytes, over ${MAX_BYTES}`);
+    console.log(`Rendered ${path.relative(publicDir, card.out)} (${(size / 1024).toFixed(0)} KB)`);
+  }
+} finally {
+  await browser.close();
 }
-
-main().catch((err) => {
-  console.error(err);
-  process.exit(1);
-});
diff --git a/frontend/scripts/og-fonts/OFL-Instrument-Sans.txt b/frontend/scripts/og-fonts/OFL-Instrument-Sans.txt
new file mode 100644
index 0000000..9a39a8e
--- /dev/null
+++ b/frontend/scripts/og-fonts/OFL-Instrument-Sans.txt
@@ -0,0 +1,93 @@
+Copyright 2022 The Instrument Sans Project Authors (https://github.com/Instrument/instrument-sans) InstrumentSans-Italic[wdth,wght].ttf: Copyright 2022 The Instrument Sans Project Authors (https://github.com/Instrument/instrument-sans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/frontend/scripts/og-fonts/OFL-Instrument-Serif.txt b/frontend/scripts/og-fonts/OFL-Instrument-Serif.txt
new file mode 100644
index 0000000..a39b7e0
--- /dev/null
+++ b/frontend/scripts/og-fonts/OFL-Instrument-Serif.txt
@@ -0,0 +1,93 @@
+Copyright 2022 The Instrument Serif Project Authors (https://github.com/Instrument/instrument-serif) InstrumentSerif-Italic.ttf: Copyright 2022 The Instrument Serif Project Authors (https://github.com/Instrument/instrument-serif)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/frontend/scripts/og-fonts/OFL-JetBrains-Mono.txt b/frontend/scripts/og-fonts/OFL-JetBrains-Mono.txt
new file mode 100644
index 0000000..8f7ed67
--- /dev/null
+++ b/frontend/scripts/og-fonts/OFL-JetBrains-Mono.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) JetBrainsMono-Italic[wght].ttf: Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/frontend/scripts/og-fonts/instrument-sans-latin-wght-normal.woff2 b/frontend/scripts/og-fonts/instrument-sans-latin-wght-normal.woff2
new file mode 100644
index 0000000..8611e41
Binary files /dev/null and b/frontend/scripts/og-fonts/instrument-sans-latin-wght-normal.woff2 differ
diff --git a/frontend/scripts/og-fonts/instrument-serif-latin-400-italic.woff2 b/frontend/scripts/og-fonts/instrument-serif-latin-400-italic.woff2
new file mode 100644
index 0000000..197abca
Binary files /dev/null and b/frontend/scripts/og-fonts/instrument-serif-latin-400-italic.woff2 differ
diff --git a/frontend/scripts/og-fonts/instrument-serif-latin-400-normal.woff2 b/frontend/scripts/og-fonts/instrument-serif-latin-400-normal.woff2
new file mode 100644
index 0000000..0ad6971
Binary files /dev/null and b/frontend/scripts/og-fonts/instrument-serif-latin-400-normal.woff2 differ
diff --git a/frontend/scripts/og-fonts/jetbrains-mono-latin-wght-normal.woff2 b/frontend/scripts/og-fonts/jetbrains-mono-latin-wght-normal.woff2
new file mode 100644
index 0000000..cd5102a
Binary files /dev/null and b/frontend/scripts/og-fonts/jetbrains-mono-latin-wght-normal.woff2 differ
diff --git a/frontend/test/posthog-source.test.mjs b/frontend/test/posthog-source.test.mjs
index 3d9a8f7..294d00b 100644
--- a/frontend/test/posthog-source.test.mjs
+++ b/frontend/test/posthog-source.test.mjs
@@ -35,6 +35,9 @@ test("privacy posture disables persistence, recording, autocapture, and automati
     "advanced_disable_flags: true",
     "disable_persistence: true",
     "save_referrer: true",
+    "save_campaign_params: true",
+    "mask_personal_data_properties: true",
+    "capture_exceptions: false",
     "capture_performance:",
   ]) {
     assert.match(instrumentation, new RegExp(option.replace(/[.*+?^${}()|[\\]\\]/g, "\\$&")));
@@ -82,3 +85,44 @@ test("the cookieless envelope keeps the fields PostHog's server hash requires",
   assert.match(privacy, /\$host/u);
   assert.match(privacy, /cookieless_missing_user_agent|cookieless server-hash/u);
 });
+
+test("every project has an allowlisted project_<slug> CTA id and a tracked link", async () => {
+  const { PROJECT_SLUGS } = await import("../lib/project-slugs.ts");
+  const { PROJECTS } = await import("../lib/site-config.ts");
+  const { SPECIMENS } = await import("../lib/specimens.ts");
+  const { ALLOWED_CTA_IDS, ALLOWED_ROUTES } = await import("../lib/posthog-privacy.ts");
+  assert.deepEqual(
+    SPECIMENS.map((specimen) => specimen.slug),
+    [...PROJECT_SLUGS],
+    "specimens and the analytics slug list must stay in step",
+  );
+  for (const project of PROJECTS) {
+    assert.ok(PROJECT_SLUGS.includes(project.slug), `${project.slug} is not in PROJECT_SLUGS`);
+  }
+  for (const slug of PROJECT_SLUGS) {
+    assert.ok(ALLOWED_CTA_IDS.includes(`project_${slug}`), `project_${slug} is not allowlisted`);
+    assert.ok(ALLOWED_ROUTES.includes(`/projects/${slug}`), `/projects/${slug} is not a route`);
+  }
+  for (const file of ["app/(site)/page.tsx", "app/(site)/projects/[slug]/page.tsx"]) {
+    const source = await read(file);
+    assert.match(source, /<TrackedCtaLink[^>]*ctaId=\{`project_\$\{[\w.]+\}`\}/u, file);
+    assert.match(source, /placement="projects"/u, file);
+  }
+});
+
+test("client error reporting sends no message, stack, filename or URL", async () => {
+  const instrumentation = await read("instrumentation-client.ts");
+  assert.match(instrumentation, /addEventListener\("error"/u);
+  assert.match(instrumentation, /addEventListener\("unhandledrejection"/u);
+  const call = instrumentation.match(/posthog\.capture\("client error", \{[^}]*\}\)/u)?.[0] ?? "";
+  assert.match(call, /error_kind/u);
+  assert.match(call, /error_name/u);
+  assert.doesNotMatch(call, /message|stack|filename|href|url/iu);
+});
+
+test("newsletter submissions report a fixed result and error class only", async () => {
+  const form = await read("components/catalogue/EmailSignupForm.tsx");
+  const calls = [...form.matchAll(/posthog\.capture\("newsletter submitted", \{[^}]*\}\)/gu)];
+  assert.equal(calls.length, 3);
+  for (const [call] of calls) assert.doesNotMatch(call, /email|message|data\./iu);
+});
diff --git a/frontend/test/posthog.test.ts b/frontend/test/posthog.test.ts
index 4c4d7a8..ff72703 100644
--- a/frontend/test/posthog.test.ts
+++ b/frontend/test/posthog.test.ts
@@ -52,6 +52,7 @@ import { test } from "node:test";
 import {
   ALLOWED_CTA_IDS,
   ALLOWED_ROUTES,
+  classifyClientErrorName,
   getPostHogConfig,
   sanitizeEvent,
   sanitizeRoute,
@@ -79,7 +80,18 @@ const COOKIELESS_HASH_PROPERTIES = {
 };
 
 test("route sanitization only returns the finite public route manifest", () => {
-  assert.deepEqual(ALLOWED_ROUTES, ["/"]);
+  assert.deepEqual(ALLOWED_ROUTES, [
+    "/",
+    "/support",
+    "/projects/sockguard",
+    "/projects/drydock",
+    "/projects/portwing",
+    "/projects/portkey-admin-mcp",
+    "/projects/mouthtype",
+    "/projects/idlescreen",
+    "/projects/careerrat",
+    "/projects/systema-machinae",
+  ]);
   assert.equal(sanitizeRoute("/?utm_source=secret#private"), "/");
   assert.equal(sanitizeRoute("/"), "/");
   assert.equal(sanitizeRoute("/not-a-route?token=secret"), "/_other");
@@ -222,8 +234,60 @@ test("$pathname never diverges from the allowlisted path", () => {
   }
 });
 
-test("CTA events are limited to the initial GitHub placements", () => {
-  assert.deepEqual(ALLOWED_CTA_IDS, ["github_org"]);
+test("project detail routes are bounded to known slugs", () => {
+  assert.equal(sanitizeRoute("/projects/drydock"), "/projects/drydock");
+  assert.equal(sanitizeRoute("/projects/drydock?utm_source=x#top"), "/projects/drydock");
+  assert.equal(sanitizeRoute("/projects/systema-machinae"), "/projects/systema-machinae");
+  for (const rawPath of [
+    "/projects",
+    "/projects/",
+    "/projects/unknown",
+    "/projects/drydock/",
+    "/projects/drydock/extra",
+    "/projects/DRYDOCK",
+    "/projects/drydock%2Fx",
+    "/projects/../support-secret",
+    "https://codeswhat.com/projects/drydock",
+    "//evil.example/projects/drydock",
+  ]) {
+    assert.equal(sanitizeRoute(rawPath), "/_other", rawPath);
+  }
+  const pageview = sanitizeEvent({
+    event: "$pageview",
+    properties: { ...ENVELOPE, path: "/projects/careerrat?secret=1" },
+  });
+  assert.ok(pageview);
+  assert.equal(pageview.properties.path, "/projects/careerrat");
+  assert.equal(pageview.properties.$pathname, "/projects/careerrat");
+  assert.equal(pageview.properties.$current_url, "https://codeswhat.com/projects/careerrat");
+  const unknown = sanitizeEvent({
+    event: "$pageview",
+    properties: { ...ENVELOPE, path: "/projects/not-a-project" },
+  });
+  assert.ok(unknown);
+  assert.equal(unknown.properties.path, "/_other");
+});
+
+test("CTA events are limited to the fixed vocabulary", () => {
+  assert.deepEqual(ALLOWED_CTA_IDS, [
+    "github_org",
+    "sponsors_github",
+    "support_systema",
+    "support_monthly-5",
+    "support_monthly-10",
+    "support_monthly-25",
+    "support_monthly-100",
+    "support_once-10",
+    "support_once-50",
+    "project_sockguard",
+    "project_drydock",
+    "project_portwing",
+    "project_portkey-admin-mcp",
+    "project_mouthtype",
+    "project_idlescreen",
+    "project_careerrat",
+    "project_systema-machinae",
+  ]);
   assert.deepEqual(
     sanitizeEvent({
       event: "cta activated",
@@ -289,6 +353,7 @@ test("web vitals events keep only metric data", () => {
         site: "codeswhat",
         surface: "marketing",
         path: "/",
+        $pathname: "/",
         $web_vitals_LCP_value: 123.4,
         ...COOKIELESS_HASH_PROPERTIES,
       },
@@ -387,3 +452,336 @@ test("sanitizeEvent requires and forwards the cookieless server-hash fields", ()
     );
   }
 });
+
+const ENVELOPE = {
+  token: "phc_public-token_123",
+  $cookieless_mode: true,
+  $process_person_profile: false,
+  path: "/",
+  ...COOKIELESS_HASH_PROPERTIES,
+};
+
+test("web vitals carry a $pathname taken from the sanitized path", () => {
+  const base = {
+    token: "phc_public-token_123",
+    $cookieless_mode: true,
+    $process_person_profile: false,
+    ...COOKIELESS_HASH_PROPERTIES,
+  };
+  const other = sanitizeEvent({
+    event: "$web_vitals",
+    properties: { ...base, path: "/private/page?secret=1", $web_vitals_LCP_value: 120 },
+  });
+  assert.ok(other);
+  assert.equal(other.properties.path, "/_other");
+  assert.equal(other.properties.$pathname, "/_other");
+
+  const home = sanitizeEvent({
+    event: "$web_vitals",
+    properties: { ...base, path: "/", $pathname: "/ignored", $web_vitals_CLS_value: 0.1 },
+  });
+  assert.ok(home);
+  assert.equal(home.properties.$pathname, "/");
+});
+
+test("a CTA event shaped like the browser sends it (no path property) survives the pinned pipeline", () => {
+  // posthog-js never sets `path` on a cta capture; the route has to come from
+  // $pathname / $current_url, which carry the real query string.
+  const client = new PostHog();
+  client.config.before_send = sanitizeEvent;
+  for (const [ctaId, placement] of [
+    ["github_org", "header"],
+    ["project_drydock", "projects"],
+  ]) {
+    const result = client._runBeforeSend({
+      event: "cta activated",
+      properties: {
+        token: "phc_public-token_123",
+        $cookieless_mode: true,
+        $process_person_profile: false,
+        $current_url: "https://codeswhat.com/?utm_source=github#projects",
+        $pathname: "/",
+        cta_id: ctaId,
+        placement,
+        ...COOKIELESS_HASH_PROPERTIES,
+      },
+    }) as { event: string; properties: Record<string, unknown> } | null;
+    assert.ok(result, `${ctaId} was dropped`);
+    assert.equal(result.event, "cta activated");
+    assert.equal(result.properties.cta_id, ctaId);
+    assert.equal(result.properties.placement, placement);
+    assert.equal(result.properties.path, "/");
+  }
+});
+
+test("project CTAs need a project_ id with the projects placement", () => {
+  const accepted = ALLOWED_CTA_IDS.filter((id) => id.startsWith("project_"));
+  assert.equal(accepted.length, 8);
+  for (const ctaId of accepted) {
+    assert.ok(
+      sanitizeEvent({
+        event: "cta activated",
+        properties: { ...ENVELOPE, cta_id: ctaId, placement: "projects" },
+      }),
+    );
+    for (const placement of ["header", "hero", "footer", "elsewhere", ""]) {
+      assert.equal(
+        sanitizeEvent({
+          event: "cta activated",
+          properties: { ...ENVELOPE, cta_id: ctaId, placement },
+        }),
+        null,
+      );
+    }
+  }
+  assert.equal(
+    sanitizeEvent({
+      event: "cta activated",
+      properties: { ...ENVELOPE, cta_id: "github_org", placement: "projects" },
+    }),
+    null,
+  );
+  for (const ctaId of ["project_unknown", "project_", "project_drydock?x=1", 7, undefined]) {
+    assert.equal(
+      sanitizeEvent({
+        event: "cta activated",
+        properties: { ...ENVELOPE, cta_id: ctaId, placement: "projects" },
+      }),
+      null,
+    );
+  }
+});
+
+test("support CTAs need the support placement and only run on /support", () => {
+  const supportIds = ALLOWED_CTA_IDS.filter(
+    (id) => id === "sponsors_github" || id.startsWith("support_"),
+  );
+  assert.equal(supportIds.length, 8);
+  for (const ctaId of supportIds) {
+    const result = sanitizeEvent({
+      event: "cta activated",
+      properties: {
+        ...ENVELOPE,
+        path: "/support",
+        cta_id: ctaId,
+        placement: "support",
+      },
+    });
+    assert.ok(result, `${ctaId} was dropped`);
+    assert.equal(result.properties.cta_id, ctaId);
+    assert.equal(result.properties.placement, "support");
+    assert.equal(result.properties.path, "/support");
+    for (const placement of ["header", "hero", "footer", "projects", ""]) {
+      assert.equal(
+        sanitizeEvent({
+          event: "cta activated",
+          properties: { ...ENVELOPE, cta_id: ctaId, placement },
+        }),
+        null,
+        `${ctaId} accepted with ${placement}`,
+      );
+    }
+  }
+  for (const ctaId of [
+    "support_",
+    "support_monthly-7",
+    "support_monthly-5?x=1",
+    "sponsors_other",
+  ]) {
+    assert.equal(
+      sanitizeEvent({
+        event: "cta activated",
+        properties: { ...ENVELOPE, cta_id: ctaId, placement: "support" },
+      }),
+      null,
+      ctaId,
+    );
+  }
+  assert.equal(
+    sanitizeEvent({
+      event: "cta activated",
+      properties: { ...ENVELOPE, cta_id: "github_org", placement: "support" },
+    }),
+    null,
+  );
+  assert.equal(sanitizeRoute("/support?utm_source=x"), "/support");
+});
+
+test("newsletter submitted keeps only a result and a fixed error class", () => {
+  const success = sanitizeEvent({
+    event: "newsletter submitted",
+    properties: { ...ENVELOPE, result: "success", email: "me@example.com", error_class: "network" },
+  });
+  assert.ok(success);
+  assert.equal(success.properties.result, "success");
+  assert.equal("error_class" in success.properties, false);
+  assert.equal("email" in success.properties, false);
+
+  for (const errorClass of ["invalid_email", "rate_limited", "unavailable", "network"]) {
+    const result = sanitizeEvent({
+      event: "newsletter submitted",
+      properties: {
+        ...ENVELOPE,
+        result: "error",
+        error_class: errorClass,
+        email: "me@example.com",
+      },
+    });
+    assert.ok(result, errorClass);
+    assert.equal(result.properties.error_class, errorClass);
+    assert.equal("email" in result.properties, false);
+  }
+
+  for (const bad of [
+    { result: "error" },
+    { result: "error", error_class: "me@example.com" },
+    { result: "error", error_class: "Failed to subscribe" },
+    { result: "pending" },
+    { result: "SUCCESS" },
+    {},
+  ]) {
+    assert.equal(
+      sanitizeEvent({ event: "newsletter submitted", properties: { ...ENVELOPE, ...bad } }),
+      null,
+      JSON.stringify(bad),
+    );
+  }
+});
+
+test("client error keeps only a bounded kind, an allowlisted name, and the route", () => {
+  for (const kind of ["error", "unhandled_rejection"]) {
+    const result = sanitizeEvent({
+      event: "client error",
+      properties: {
+        ...ENVELOPE,
+        error_kind: kind,
+        error_name: "TypeError",
+        message: "Cannot read properties of undefined",
+        stack: "at https://codeswhat.com/_next/x.js:1:1",
+        filename: "https://codeswhat.com/_next/x.js",
+      },
+    });
+    assert.ok(result, kind);
+    assert.equal(result.properties.error_kind, kind);
+    assert.equal(result.properties.error_name, "TypeError");
+    assert.equal(result.properties.path, "/");
+    for (const leaked of ["message", "stack", "filename"]) {
+      assert.equal(leaked in result.properties, false, leaked);
+    }
+  }
+  for (const bad of [
+    { error_kind: "exception", error_name: "TypeError" },
+    { error_kind: "error", error_name: "CustomSecretError" },
+    { error_kind: "error", error_name: "Cannot read properties of undefined" },
+    { error_kind: "error" },
+    { error_name: "Error" },
+  ]) {
+    assert.equal(
+      sanitizeEvent({ event: "client error", properties: { ...ENVELOPE, ...bad } }),
+      null,
+      JSON.stringify(bad),
+    );
+  }
+});
+
+test("classifyClientErrorName only returns allowlisted constructor names", () => {
+  class ChunkLoadError extends Error {
+    name = "ChunkLoadError";
+  }
+  assert.equal(classifyClientErrorName(new TypeError("x")), "TypeError");
+  assert.equal(classifyClientErrorName(new ReferenceError("x")), "ReferenceError");
+  assert.equal(classifyClientErrorName(new SyntaxError("x")), "SyntaxError");
+  assert.equal(classifyClientErrorName(new RangeError("x")), "RangeError");
+  assert.equal(classifyClientErrorName(new ChunkLoadError("x")), "ChunkLoadError");
+  assert.equal(classifyClientErrorName(new Error("x")), "Error");
+  assert.equal(classifyClientErrorName(new URIError("x")), "other");
+  const custom = new Error("x");
+  custom.name = "me@example.com";
+  assert.equal(classifyClientErrorName(custom), "other");
+  for (const value of [null, undefined, "boom", 42, { name: "TypeError" }]) {
+    assert.equal(classifyClientErrorName(value), "other");
+  }
+});
+
+test("UTM labels pass only through the bounded vocabulary", () => {
+  const forward = (utm: Record<string, unknown>, event = "$pageview") => {
+    const result = sanitizeEvent({
+      event,
+      properties: { ...ENVELOPE, $web_vitals_LCP_value: 1, ...utm },
+    });
+    assert.ok(result);
+    return result.properties;
+  };
+
+  for (const event of ["$pageview", "$pageleave", "$web_vitals"]) {
+    const props = forward(
+      { utm_source: "GitHub", utm_medium: "social", utm_campaign: "launch-2026" },
+      event,
+    );
+    assert.equal(props.utm_source, "github");
+    assert.equal(props.utm_medium, "social");
+    assert.equal(props.utm_campaign, "launch-2026");
+  }
+  for (const source of [
+    "github",
+    "x",
+    "bluesky",
+    "linkedin",
+    "reddit",
+    "hackernews",
+    "newsletter",
+    "producthunt",
+  ]) {
+    assert.equal(forward({ utm_source: source }).utm_source, source);
+  }
+  for (const medium of ["social", "email", "referral", "community"]) {
+    assert.equal(forward({ utm_medium: medium }).utm_medium, medium);
+  }
+
+  for (const bad of [
+    "me@example.com",
+    "user-12345",
+    "github.com",
+    "twitter",
+    "",
+    "<masked>",
+    42,
+    null,
+  ]) {
+    assert.equal("utm_source" in forward({ utm_source: bad }), false, String(bad));
+    assert.equal("utm_medium" in forward({ utm_medium: bad }), false, String(bad));
+  }
+  for (const bad of [
+    "me@example.com",
+    "Has Space",
+    "a".repeat(41),
+    "under_score",
+    "",
+    7,
+    "<masked>",
+  ]) {
+    assert.equal("utm_campaign" in forward({ utm_campaign: bad }), false, String(bad));
+  }
+  assert.equal(forward({ utm_campaign: "a".repeat(40) }).utm_campaign, "a".repeat(40));
+
+  const props = forward({
+    utm_content: "x",
+    utm_term: "y",
+    gclid: "abc",
+    fbclid: "abc",
+    msclkid: "abc",
+    gad_source: "1",
+    mc_cid: "abc",
+  });
+  for (const dropped of [
+    "utm_content",
+    "utm_term",
+    "gclid",
+    "fbclid",
+    "msclkid",
+    "gad_source",
+    "mc_cid",
+  ]) {
+    assert.equal(dropped in props, false, dropped);
+  }
+});
diff --git a/frontend/test/scene.test.mjs b/frontend/test/scene.test.mjs
index f336be6..9251dd6 100644
--- a/frontend/test/scene.test.mjs
+++ b/frontend/test/scene.test.mjs
@@ -1,29 +1,75 @@
 import assert from "node:assert/strict";
-import { existsSync, readFileSync } from "node:fs";
+import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { join } from "node:path";
 import test from "node:test";
 
 const root = process.cwd();
 
-const MYLAR = "components/site/scene/balloons/MylarBalloon.tsx";
+const MYLAR = "components/studio/balloons/MylarBalloon.tsx";
 const readMylar = () => readFileSync(join(root, MYLAR), "utf8");
 
-test("the live 3D scene components exist", () => {
-  for (const file of [
-    "components/site/FloatingSceneCanvas.tsx",
-    "components/site/scene/BoardObjects.tsx",
-    "components/site/scene/ContactMarble.tsx",
-    "components/site/scene/collisionContext.ts",
-    "components/site/scene/balloons/MylarBalloon.tsx",
-    "components/site/scene/balloons/types.ts",
-  ]) {
+const SCENE_FILES = [
+  "components/studio/BalloonStudio.tsx",
+  "components/studio/BoardObjects.tsx",
+  "components/studio/CoinStudio.tsx",
+  "components/studio/captureRig.tsx",
+  "components/studio/collisionContext.ts",
+  "components/studio/balloons/MylarBalloon.tsx",
+  "components/studio/balloons/types.ts",
+];
+
+const importsThree = (source) => /from "(three|@react-three\/[^"]+)"/.test(source);
+
+function sourceFiles(dir) {
+  const found = [];
+  for (const entry of readdirSync(join(root, dir), { withFileTypes: true })) {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) found.push(...sourceFiles(path));
+    else if (/\.(ts|tsx)$/.test(entry.name)) found.push(path);
+  }
+  return found;
+}
+
+test("the 3D asset-capture components live under components/studio", () => {
+  for (const file of SCENE_FILES) {
     assert.equal(existsSync(join(root, file)), true, `${file} should exist`);
   }
+  assert.equal(existsSync(join(root, "components/site")), false, "the old site tree is gone");
+});
+
+test("the shipped site never imports three or react-three", () => {
+  const shipped = [
+    ...sourceFiles("app").filter((file) => !file.startsWith(join("app", "studio"))),
+    ...sourceFiles("components/catalogue"),
+    ...sourceFiles("lib"),
+    "instrumentation-client.ts",
+    "proxy.ts",
+  ];
+  assert.ok(shipped.length > 10);
+  for (const file of shipped) {
+    assert.equal(
+      importsThree(readFileSync(join(root, file), "utf8")),
+      false,
+      `${file} imports three`,
+    );
+  }
 });
 
-test("three is installed for the WebGL scene", () => {
+test("the root layout renders no floating scene", () => {
+  const layout = readFileSync(join(root, "app/layout.tsx"), "utf8");
+  const siteLayout = readFileSync(join(root, "app/(site)/layout.tsx"), "utf8");
+  for (const source of [layout, siteLayout]) {
+    assert.doesNotMatch(source, /FloatingScene|SiteBackground|<canvas/i);
+  }
+  assert.match(siteLayout, /<Shell>/);
+});
+
+test("three stays installed only for the dev-only studio capture tools", () => {
   const packageJson = JSON.parse(readFileSync(join(root, "package.json"), "utf8"));
-  assert.equal(typeof packageJson.dependencies.three, "string", "three should be installed");
+  assert.equal(typeof packageJson.dependencies.three, "string");
+  for (const file of sourceFiles("app/studio")) {
+    assert.ok(readFileSync(join(root, file), "utf8").includes("components/studio/"), file);
+  }
 });
 
 test("Mylar balloons keep their foil physical material", () => {
diff --git a/frontend/test/site-browser.test.mjs b/frontend/test/site-browser.test.mjs
index 4e162b2..b9ce1e3 100644
--- a/frontend/test/site-browser.test.mjs
+++ b/frontend/test/site-browser.test.mjs
@@ -33,6 +33,11 @@ before(async () => {
         NEXT_TELEMETRY_DISABLED: "1",
         EMAILOCTOPUS_API_KEY: "",
         EMAILOCTOPUS_LIST_ID: "",
+        CODESWHAT_SUPPORT_LINKS: JSON.stringify({
+          "monthly-5": "https://buy.stripe.com/test_monthly5",
+          "once-50": "https://buy.stripe.com/test_once50",
+          "monthly-10": "http://insecure.example/not-allowed",
+        }),
       },
       stdio: ["ignore", "pipe", "pipe"],
     },
@@ -102,31 +107,134 @@ async function localPage(t) {
   return context.newPage();
 }
 
-test("production page hydrates its theme control and mounts the canvas", {
+test("homepage renders the specimen plates and the theme toggle flips and persists", {
   timeout: 20_000,
 }, async (t) => {
   const page = await localPage(t);
   const errors = [];
   page.on("pageerror", (error) => errors.push(error.message));
   await page.goto(baseUrl, { waitUntil: "networkidle" });
-  assert.equal(await page.locator("html").getAttribute("class"), "dark");
-  await page.getByRole("button", { name: "Toggle light and dark theme" }).click();
-  await page.waitForFunction(
-    () => !document.documentElement.classList.contains("dark"),
-    undefined,
-    { timeout: 5_000 },
+
+  assert.equal(await page.getByRole("heading", { level: 1 }).count(), 1);
+  assert.equal(await page.locator("article[aria-labelledby^='plate-']").count(), 8);
+  assert.ok(
+    await page
+      .getByRole("img", { name: /Pixel art of a glossy blue toy whale/ })
+      .first()
+      .isVisible(),
   );
-  await page.waitForFunction(
-    () => {
-      const canvas = document.querySelector("canvas");
-      return canvas && canvas.width > 0 && canvas.height > 0;
-    },
-    undefined,
-    { timeout: 5_000 },
+  assert.equal(await page.locator("canvas").count(), 0, "the 3D scene is gone");
+  assert.equal(await page.getByRole("link", { name: "Support", exact: true }).count(), 1);
+  assert.equal(
+    await page
+      .locator("main")
+      .getByRole("heading", { name: /CodesWhat\? Anything for you/ })
+      .count(),
+    1,
   );
+
+  const theme = () => page.locator("html").getAttribute("data-theme");
+  const initial = await theme();
+  assert.ok(initial === "light" || initial === "dark");
+  const toggle = page.getByRole("button", { name: /toggle light and dark theme/i });
+  await toggle.click();
+  const flipped = initial === "dark" ? "light" : "dark";
+  await page.waitForFunction((want) => document.documentElement.dataset.theme === want, flipped, {
+    timeout: 5_000,
+  });
+  assert.equal(await page.evaluate(() => localStorage.getItem("theme")), flipped);
+  await page.reload({ waitUntil: "networkidle" });
+  assert.equal(await theme(), flipped, "the saved theme survives a reload");
+  assert.deepEqual(errors, []);
+});
+
+test("light is the default paper when the system has no dark preference", {
+  timeout: 15_000,
+}, async (t) => {
+  const context = await browser.newContext({ colorScheme: "light" });
+  t.after(() => context.close());
+  const page = await context.newPage();
+  await page.goto(baseUrl, { waitUntil: "domcontentloaded" });
+  assert.equal(await page.locator("html").getAttribute("data-theme"), "light");
+  const dark = await browser.newContext({ colorScheme: "dark" });
+  t.after(() => dark.close());
+  const darkPage = await dark.newPage();
+  await darkPage.goto(baseUrl, { waitUntil: "domcontentloaded" });
+  assert.equal(await darkPage.locator("html").getAttribute("data-theme"), "dark");
+});
+
+test("a dark system preference still wins when storage is blocked", {
+  timeout: 15_000,
+}, async (t) => {
+  const context = await browser.newContext({ colorScheme: "dark" });
+  t.after(() => context.close());
+  await context.addInitScript(() => {
+    Object.defineProperty(window, "localStorage", {
+      get() {
+        throw new DOMException("blocked", "SecurityError");
+      },
+    });
+  });
+  const page = await context.newPage();
+  await page.goto(baseUrl, { waitUntil: "domcontentloaded" });
+  assert.equal(await page.locator("html").getAttribute("data-theme"), "dark");
+});
+
+test("a project page renders its specimen and unknown slugs 404", {
+  timeout: 20_000,
+}, async (t) => {
+  const page = await localPage(t);
+  const response = await page.goto(`${baseUrl}/projects/drydock`, { waitUntil: "networkidle" });
+  assert.equal(response.status(), 200);
+  assert.equal(await page.getByRole("heading", { level: 1 }).innerText(), "Drydock");
+  assert.ok(await page.getByText("Balaena siccata").first().isVisible());
+  const missing = await fetch(`${baseUrl}/projects/not-a-project`, {
+    signal: AbortSignal.timeout(5_000),
+  });
+  assert.equal(missing.status, 404);
+});
+
+test("support renders GitHub Sponsors first and the six tiers with validated links", {
+  timeout: 20_000,
+}, async (t) => {
+  const page = await localPage(t);
+  const errors = [];
+  page.on("pageerror", (error) => errors.push(error.message));
+  await page.goto(`${baseUrl}/support`, { waitUntil: "networkidle" });
+  const sponsors = page.getByRole("link", { name: /Sponsor CodesWhat on GitHub/ });
+  assert.equal(await sponsors.getAttribute("href"), "https://github.com/sponsors/CodesWhat");
+  assert.equal(await page.locator("#tiers ul > li").count(), 6);
+  const hrefs = await page
+    .locator("#tiers ul a[href^='https://buy.stripe.com/']")
+    .evaluateAll((links) => links.map((link) => link.href));
+  assert.deepEqual(hrefs.sort(), [
+    "https://buy.stripe.com/test_monthly5",
+    "https://buy.stripe.com/test_once50",
+  ]);
+  // the insecure link is dropped and unset tiers say so
+  assert.equal(await page.getByText("Opening soon", { exact: true }).count(), 4);
+  assert.equal(await page.locator("a[href^='http://']").count(), 0);
   assert.deepEqual(errors, []);
 });
 
+test("the footer signup rejects an invalid address without calling the API", {
+  timeout: 15_000,
+}, async (t) => {
+  const page = await localPage(t);
+  const calls = [];
+  page.on("request", (request) => {
+    if (request.url().includes("/api/subscribe")) calls.push(request.url());
+  });
+  await page.goto(baseUrl, { waitUntil: "networkidle" });
+  await page.getByLabel(/A note when something new ships/).fill("a@b");
+  await page.getByRole("button", { name: "Notify me" }).click();
+  await page
+    .getByRole("alert")
+    .filter({ hasText: "valid email address" })
+    .waitFor({ timeout: 5_000 });
+  assert.deepEqual(calls, []);
+});
+
 test("each HTML request gets a fresh nonce that cannot be supplied by the caller", {
   timeout: 15_000,
 }, async () => {
diff --git a/frontend/test/support.test.ts b/frontend/test/support.test.ts
new file mode 100644
index 0000000..3588bd6
--- /dev/null
+++ b/frontend/test/support.test.ts
@@ -0,0 +1,127 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { PROJECTS } from "../lib/site-config.ts";
+import {
+  PROJECT_COSTS,
+  type SupportProjectId,
+  SYSTEMA,
+  supportCtaId,
+  supportLinksFrom,
+  TIERS,
+  tiersWith,
+  validLink,
+} from "../lib/support.ts";
+
+const good = "https://buy.stripe.com/test_abc123";
+
+test("validLink accepts https Stripe payment and donate links", () => {
+  assert.equal(validLink(good), true);
+  assert.equal(validLink("https://donate.stripe.com/abc"), true);
+});
+
+test("validLink rejects http, other hosts, credentials, and bare paths", () => {
+  for (const value of [
+    "http://buy.stripe.com/abc",
+    "https://stripe.com/abc",
+    "https://evil.example/buy.stripe.com/abc",
+    "https://buy.stripe.com.evil.example/abc",
+    "https://user:pass@buy.stripe.com/abc",
+    "https://user@buy.stripe.com/abc",
+    "https://buy.stripe.com",
+    "https://buy.stripe.com/",
+    "javascript:alert(1)",
+    "not a url",
+    "",
+    null,
+    undefined,
+    42,
+  ]) {
+    assert.equal(validLink(value), false, String(value));
+  }
+});
+
+test("supportLinksFrom handles bad JSON, non-objects, and unknown ids", () => {
+  const warnings: string[] = [];
+  const warn = (message: string) => warnings.push(message);
+  const id = TIERS[0].id;
+
+  assert.deepEqual(supportLinksFrom(undefined, warn), {});
+  assert.deepEqual(supportLinksFrom("", warn), {});
+  assert.equal(warnings.length, 0);
+
+  assert.deepEqual(supportLinksFrom("{bad", warn), {});
+  assert.deepEqual(supportLinksFrom("[]", warn), {});
+  assert.deepEqual(supportLinksFrom("null", warn), {});
+  assert.deepEqual(supportLinksFrom('"text"', warn), {});
+  assert.equal(warnings.length, 4);
+
+  warnings.length = 0;
+  const links = supportLinksFrom(
+    JSON.stringify({ [id]: good, nope: good, [TIERS[1].id]: "http://buy.stripe.com/x" }),
+    warn,
+  );
+  assert.deepEqual(links, { [id]: good });
+  assert.equal(warnings.length, 2);
+});
+
+test("tiersWith keeps valid links and nulls invalid ones", () => {
+  const [first, second] = TIERS;
+  const tiers = tiersWith({ [first.id]: good, [second.id]: "https://evil.example/x" });
+  assert.equal(tiers.find((t) => t.id === first.id)?.link, good);
+  assert.equal(tiers.find((t) => t.id === second.id)?.link, null);
+  assert.equal(tiers.length, TIERS.length);
+  assert.ok(tiersWith({}).every((t) => t.link === null));
+});
+
+test("every tier has a unique id and a whole-dollar price", () => {
+  assert.equal(new Set(TIERS.map((t) => t.id)).size, TIERS.length);
+  assert.ok(TIERS.every((t) => Number.isInteger(t.price) && t.price > 0));
+});
+
+test("the six tiers match GitHub Sponsors and Stripe", () => {
+  assert.deepEqual(
+    TIERS.map((t) => [t.id, t.name, t.price, t.cadence]),
+    [
+      ["monthly-5", "Keep the lights on", 5, "monthly"],
+      ["monthly-10", "README supporter", 10, "monthly"],
+      ["monthly-25", "Team sponsor", 25, "monthly"],
+      ["monthly-100", "Company sponsor", 100, "monthly"],
+      ["once-10", "One-off thanks", 10, "once"],
+      ["once-50", "One-off supporter", 50, "once"],
+    ],
+  );
+  assert.ok(
+    TIERS.every((t) => t.link === null),
+    "no URL is hardcoded in source",
+  );
+  assert.ok(TIERS.every((t) => t.buys.length > 0));
+});
+
+test("all six ids accept a valid link from the env value", () => {
+  const raw = JSON.stringify(Object.fromEntries(TIERS.map((t) => [t.id, good])));
+  const warnings: string[] = [];
+  const links = supportLinksFrom(raw, (m) => warnings.push(m));
+  assert.equal(Object.keys(links).length, 6);
+  assert.deepEqual(warnings, []);
+  assert.ok(tiersWith(links).every((t) => t.link === good));
+});
+
+test("every project has a running-cost entry and Systema stays separate", () => {
+  for (const project of PROJECTS) {
+    assert.ok(PROJECT_COSTS[project.slug as SupportProjectId], project.slug);
+  }
+  assert.equal(Object.keys(PROJECT_COSTS).length, PROJECTS.length);
+  assert.equal(SYSTEMA.supportUrl, "https://systemamachinae.com/support");
+  assert.equal(SYSTEMA.cost, "$30/month all-in");
+});
+
+test("supportCtaId derives from the tier id", () => {
+  assert.deepEqual(TIERS.map(supportCtaId), [
+    "support_monthly-5",
+    "support_monthly-10",
+    "support_monthly-25",
+    "support_monthly-100",
+    "support_once-10",
+    "support_once-50",
+  ]);
+});