diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
index a36e28a..8fd5b40 100644
--- a/.github/workflows/website.yml
+++ b/.github/workflows/website.yml
@@ -17,6 +17,7 @@ permissions:
 jobs:
   verify:
     runs-on: ubuntu-latest
+    timeout-minutes: 15
     defaults:
       run:
         working-directory: frontend
@@ -41,3 +42,7 @@ jobs:
         run: npm run test:posthog
       - name: Build production app
         run: npm run build
+      - name: Install browser for production checks
+        run: node node_modules/playwright-core/cli.js install --with-deps chromium
+      - name: Verify production page and API boundaries
+        run: npm run test:browser
diff --git a/README.md b/README.md
index 73ff981..47be5f0 100644
--- a/README.md
+++ b/README.md
@@ -1,30 +1,49 @@
 # CodesWhat website
 
-Private source for the public CodesWhat org site at codeswhat.com. The
-Next.js app lives in `frontend/`; everything deployable is under that
-directory.
-
-## What this repo is (and isn't)
-
-This is permanently private infrastructure, not a community project. That's
-why there's no LICENSE, CONTRIBUTING, SECURITY policy, or CODEOWNERS here:
-the site's source isn't published, only the rendered site is. The tier
-decision and rationale live in the private ops repo
-(`decisions/repository-tiers.md`).
-
-## Working here
-
-- Flow: feature branches PR into `dev`, then `dev` promotes to `main`.
-- CI: `website.yml` runs the website contract checks.
-- Deploys: Vercel, but git-integration deploys are broken for this repo (a
-  private repo in a GitHub org can't deploy on the Hobby plan). Production
-  deploys happen from a local checkout with
-  `npx vercel deploy --prod --scope codeswhat`.
-- Analytics: PostHog via the shared "CodesWhat Public Websites" project,
-  proxied through `e.codeswhat.com`, cookieless.
-
-## More docs
-
-- `docs/README.md` - development guide
-- `frontend/README-VERCEL.md` - deploy specifics
-- `ROADMAP.md` - planned sections and site direction
+Public source for [codeswhat.com](https://codeswhat.com), the CodesWhat project
+and consulting site. The deployed Next.js application lives in `frontend/`.
+
+## Development
+
+Use Node.js 24. From `frontend/`, install the locked dependencies with `npm ci`
+and start the development server with `npm run dev`.
+
+Existing checks are `npm run lint`, `npm run type-check`, `npm run test:scene`
+and `npm run test:posthog`. Run `npm run build`, then `npm run test:browser`
+to check the production page and invalid newsletter input. The browser check
+uses the existing Playwright dependency with installed Chromium or Chrome;
+CI installs its matching Chromium build. It uses a temporary local server
+and blocks external requests.
+The root Lefthook configuration runs staged Biome checks and typechecking at
+commit time. Keep those checks enabled.
+
+Changes go through a feature PR into `dev`, followed by a reviewed promotion
+from `dev` to `main`. Preserve the same tested content through promotion.
+The `Website contracts` workflow checks pull requests and the integration and
+production branches.
+
+## Deployment and verification
+
+Vercel's Git integration deploys `main` to production with `frontend/` as the
+project root. Verify the deployment's source commit and the actual page after
+promotion. A successful build or pageview event does not prove that the page's
+client components initialized.
+
+The Content Security Policy uses a fresh request nonce for Next's generated
+scripts and the initial theme script. HTML renders per request; immutable
+JavaScript and static assets keep their existing caching. Keep the request and
+response policies consistent, and verify a real theme toggle and mounted scene
+when changing scripts, headers or rendering.
+
+Analytics uses the shared CodesWhat Public Websites PostHog project through
+`e.codeswhat.com`, with the existing cookieless sanitizer. Preview and local
+development should leave its production-only environment values unset.
+Newsletter delivery uses server-side EmailOctopus credentials. See the
+[deployment guide](frontend/README-VERCEL.md) for configuration.
+
+## Repository boundaries
+
+Internal plans and operational scratch belong in ignored `.planning/`, and
+`.claude/` stays ignored to protect nested agent worktrees. Neither is a build input.
+Don't commit credentials or local environment files. Existing public source
+does not imply that private planning is safe to publish here.
diff --git a/frontend/README-VERCEL.md b/frontend/README-VERCEL.md
index 7c270d3..17e647c 100644
--- a/frontend/README-VERCEL.md
+++ b/frontend/README-VERCEL.md
@@ -1,27 +1,40 @@
 # Vercel Deployment Guide
 
-## Quick Deploy
+## Production deployment
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/codeswhat/website)
+The existing Vercel project deploys `CodesWhat/codeswhat.com` from `main`, with
+`frontend/` as its root directory and Node.js 24. Feature changes merge into
+`dev`, then a reviewed promotion advances `main`. Git integration is working;
+a local CLI deployment is not the routine production path.
 
-## Manual Deployment
+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.
 
-1. Install Vercel CLI (optional):
+## Rendering and security headers
 
-   ```bash
-   npm i -g vercel
-   ```
+The Next proxy sets a fresh script nonce on both the forwarded request policy
+and the response policy. Next uses that nonce for generated inline scripts;
+the root layout applies it to the theme-init script. HTML renders per request
+so nonce values are not reused through static prerendering. Static JS/assets
+retain the caching rules in `vercel.json`.
 
-2. Deploy:
-   ```bash
-   vercel
-   ```
+Keep the CSP's allowed third-party origins narrow. A fixed hash for only the
+theme script does not permit Next's inline Flight scripts and breaks hydration.
+The production browser regression verifies actual interaction and blocked
+unapproved scripts. The remaining response headers and API cache rules live
+in `vercel.json`.
 
 ## Environment Variables
 
 Add these in your Vercel dashboard under Settings → Environment Variables:
 
-### Required Variables
+### Site and newsletter configuration
+
+The site metadata variables are optional overrides for the defaults in
+`lib/site-config.ts`. EmailOctopus credentials are required for newsletter
+delivery and stay server-side.
 
 | Variable                       | Description              | Example                          |
 | ------------------------------ | ------------------------ | -------------------------------- |
@@ -53,17 +66,17 @@ unset in Preview and Development so those deployments emit no analytics:
 
 The `vercel.json` file includes:
 
-- ✅ Security headers
-- ✅ API route configuration
-- ✅ Function timeouts
-- ✅ Caching rules
+- Additional security headers
+- API route configuration
+- Function timeouts
+- Static-asset caching rules
 
 ## Features Configured
 
 - **Security Headers**: XSS protection, frame options, content type sniffing prevention
 - **API Caching**: Disabled for `/api/*` routes
 - **Function Duration**: 10 seconds max for email signup
-- **Sitemap**: Rewrite rule ready for dynamic sitemap
+- **Sitemap**: Next's sitemap route supplies the public page list
 
 ## Monitoring
 
@@ -81,7 +94,7 @@ The `vercel.json` file includes:
 ### Build Failures
 
 - Check build logs in Vercel dashboard
-- Ensure Node.js version matches locally (20.9.0+)
+- Ensure Node.js version matches locally (24.x)
 - Verify all dependencies are in package.json
 
 ### Email Signup Not Working
diff --git a/frontend/app/api/subscribe/route.ts b/frontend/app/api/subscribe/route.ts
index 0f57d09..307c2af 100644
--- a/frontend/app/api/subscribe/route.ts
+++ b/frontend/app/api/subscribe/route.ts
@@ -44,14 +44,18 @@ export async function POST(request: Request) {
     }
 
     // Parse request body
-    let body: { email?: string };
+    let body: unknown;
     try {
       body = await request.json();
     } catch {
       return NextResponse.json({ error: "Invalid request format" }, { status: 400 });
     }
 
-    const { email } = body;
+    if (body === null || typeof body !== "object" || Array.isArray(body)) {
+      return NextResponse.json({ error: "Invalid request format" }, { status: 400 });
+    }
+
+    const email = "email" in body ? body.email : undefined;
 
     // Input validation
     if (!email || typeof email !== "string") {
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 04d6430..2d8844e 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,5 +1,6 @@
 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";
@@ -67,16 +68,21 @@ export const metadata: Metadata = {
   },
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const nonce = (await headers()).get("x-nonce") ?? undefined;
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
         <meta name="apple-mobile-web-app-title" content={siteName} />
-        <script id="theme-init" dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
+        <script
+          id="theme-init"
+          nonce={nonce}
+          dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }}
+        />
       </head>
       <body className={inter.className}>
         {children}
diff --git a/frontend/next.config.ts b/frontend/next.config.ts
index f70aeed..764396a 100644
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -1,9 +1,4 @@
-import { createHash } from "node:crypto";
 import type { NextConfig } from "next";
-import { THEME_INIT_SCRIPT } from "./lib/theme-init-script";
-
-const posthogProxy = "https://e.codeswhat.com";
-const themeScriptHash = `sha256-${createHash("sha256").update(THEME_INIT_SCRIPT).digest("base64")}`;
 
 const nextConfig: NextConfig = {
   async redirects() {
@@ -24,31 +19,6 @@ const nextConfig: NextConfig = {
       },
     ];
   },
-  async headers() {
-    return [
-      {
-        source: "/(.*)",
-        headers: [
-          {
-            key: "Content-Security-Policy",
-            value: [
-              "default-src 'self'",
-              `script-src 'self' '${themeScriptHash}' ${posthogProxy}`,
-              "style-src 'self' 'unsafe-inline'",
-              `connect-src 'self' ${posthogProxy}`,
-              "img-src 'self' data: blob:",
-              "font-src 'self'",
-              "worker-src 'self' blob:",
-              "object-src 'none'",
-              "base-uri 'self'",
-              "form-action 'self'",
-              "frame-ancestors 'none'",
-            ].join("; "),
-          },
-        ],
-      },
-    ];
-  },
 };
 
 export default nextConfig;
diff --git a/frontend/package.json b/frontend/package.json
index 421ae9b..5c487e4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
     "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",
+    "test:browser": "node --test test/site-browser.test.mjs",
     "og": "node scripts/generate-og.mjs",
     "coin": "node scripts/capture-assets.mjs --subject coin",
     "balloon": "node scripts/capture-assets.mjs --subject balloon",
diff --git a/frontend/proxy.ts b/frontend/proxy.ts
new file mode 100644
index 0000000..c48a83b
--- /dev/null
+++ b/frontend/proxy.ts
@@ -0,0 +1,37 @@
+import { randomBytes } from "node:crypto";
+import { type NextRequest, NextResponse } from "next/server";
+
+const posthogProxy = "https://e.codeswhat.com";
+
+export function proxy(request: NextRequest) {
+  const nonce = randomBytes(16).toString("base64");
+  const developmentScriptPolicy = process.env.NODE_ENV === "development" ? " 'unsafe-eval'" : "";
+  const contentSecurityPolicy = [
+    "default-src 'self'",
+    `script-src 'self' 'nonce-${nonce}' ${posthogProxy}${developmentScriptPolicy}`,
+    "style-src 'self' 'unsafe-inline'",
+    `connect-src 'self' ${posthogProxy}`,
+    "img-src 'self' data: blob:",
+    "font-src 'self'",
+    "worker-src 'self' blob:",
+    "object-src 'none'",
+    "base-uri 'self'",
+    "form-action 'self'",
+    "frame-ancestors 'none'",
+  ].join("; ");
+
+  // Next reads the request policy while rendering its inline Flight scripts.
+  // Replace caller headers so only this request's generated nonce is trusted.
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set("x-nonce", nonce);
+  requestHeaders.set("Content-Security-Policy", contentSecurityPolicy);
+  const response = NextResponse.next({ request: { headers: requestHeaders } });
+  response.headers.set("Content-Security-Policy", contentSecurityPolicy);
+  return response;
+}
+
+export const config = {
+  matcher: [
+    "/((?!api/|_next/|favicon\\.ico$|robots\\.txt$|sitemap\\.xml$|.*\\.(?:png|svg|webp|ico|woff2?)$).*)",
+  ],
+};
diff --git a/frontend/test/posthog-browser.test.mjs b/frontend/test/posthog-browser.test.mjs
index ead35da..3c02e7b 100644
--- a/frontend/test/posthog-browser.test.mjs
+++ b/frontend/test/posthog-browser.test.mjs
@@ -15,5 +15,5 @@ test("production browser response keeps PostHog on the exact proxy", {
   assert.match(csp, /connect-src[^;]*https:\/\/e\.codeswhat\.com/);
   assert.doesNotMatch(csp, /\*\.posthog\.com|https:\/\/(app|us)\.posthog\.com/);
   assert.doesNotMatch(body, /query-secret=should-not-leave/);
-  assert.match(body, /<script id="theme-init">/);
+  assert.match(body, /<script\b[^>]*\bid="theme-init"/);
 });
diff --git a/frontend/test/posthog-source.test.mjs b/frontend/test/posthog-source.test.mjs
index cdcbcbe..3d9a8f7 100644
--- a/frontend/test/posthog-source.test.mjs
+++ b/frontend/test/posthog-source.test.mjs
@@ -42,11 +42,10 @@ test("privacy posture disables persistence, recording, autocapture, and automati
   assert.match(instrumentation, /before_send:/);
 });
 
-test("CSP allows only the exact PostHog proxy and hashes the theme script", async () => {
-  const config = await read("next.config.ts");
-  assert.ok(config.includes('"https://e.codeswhat.com"'));
-  assert.doesNotMatch(config, /https:\/\/(app|us)\.posthog\.com/);
-  assert.match(config, /sha256-/);
+test("CSP allows only the exact PostHog proxy", async () => {
+  const proxy = await read("proxy.ts");
+  assert.ok(proxy.includes('"https://e.codeswhat.com"'));
+  assert.doesNotMatch(proxy, /https:\/\/(app|us)\.posthog\.com/);
 });
 
 test("repo-owned CI runs the website contracts and production build", async () => {
diff --git a/frontend/test/site-browser.test.mjs b/frontend/test/site-browser.test.mjs
new file mode 100644
index 0000000..4e162b2
--- /dev/null
+++ b/frontend/test/site-browser.test.mjs
@@ -0,0 +1,210 @@
+import assert from "node:assert/strict";
+import { spawn } from "node:child_process";
+import { existsSync } from "node:fs";
+import { after, before, test } from "node:test";
+import { fileURLToPath } from "node:url";
+import { chromium } from "playwright-core";
+
+const root = fileURLToPath(new URL("..", import.meta.url));
+const nextBin = fileURLToPath(new URL("../node_modules/next/dist/bin/next", import.meta.url));
+let server;
+let browser;
+let baseUrl;
+
+before(async () => {
+  const denyExternalFetch = `globalThis.fetch = async () => { throw new Error("External fetch is disabled in site tests"); };`;
+  server = spawn(
+    process.execPath,
+    [
+      "--import",
+      `data:text/javascript,${encodeURIComponent(denyExternalFetch)}`,
+      nextBin,
+      "start",
+      "--hostname",
+      "127.0.0.1",
+      "--port",
+      "0",
+    ],
+    {
+      cwd: root,
+      env: {
+        ...process.env,
+        NODE_ENV: "production",
+        NEXT_TELEMETRY_DISABLED: "1",
+        EMAILOCTOPUS_API_KEY: "",
+        EMAILOCTOPUS_LIST_ID: "",
+      },
+      stdio: ["ignore", "pipe", "pipe"],
+    },
+  );
+  await new Promise((resolve, reject) => {
+    let output = "";
+    const timer = setTimeout(
+      () => reject(new Error(`Production server did not start:\n${output}`)),
+      30_000,
+    );
+    const read = (data) => {
+      output = `${output}${data}`.slice(-8_000);
+      const address = output.match(/http:\/\/127\.0\.0\.1:\d+/)?.[0];
+      if (address && output.includes("Ready in")) {
+        baseUrl = address;
+        clearTimeout(timer);
+        resolve();
+      }
+    };
+    server.stdout.on("data", read);
+    server.stderr.on("data", read);
+    server.once("error", (error) => {
+      clearTimeout(timer);
+      reject(error);
+    });
+    server.once("exit", (code) => {
+      clearTimeout(timer);
+      reject(new Error(`Production server exited (${code}):\n${output}`));
+    });
+  });
+
+  const systemChrome = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
+  const executablePath =
+    process.env.BROWSER_EXECUTABLE_PATH ||
+    (existsSync(chromium.executablePath())
+      ? chromium.executablePath()
+      : existsSync(systemChrome)
+        ? systemChrome
+        : undefined);
+  browser = await chromium.launch({ headless: true, executablePath });
+});
+
+after(async () => {
+  try {
+    await browser?.close();
+  } finally {
+    if (server && server.exitCode === null && server.signalCode === null) {
+      await new Promise((resolve) => {
+        const force = setTimeout(() => server.kill("SIGKILL"), 5_000);
+        server.once("exit", () => {
+          clearTimeout(force);
+          resolve();
+        });
+        server.kill("SIGTERM");
+      });
+    }
+  }
+});
+
+async function localPage(t) {
+  const context = await browser.newContext();
+  t.after(() => context.close());
+  await context.route("**/*", (route) => {
+    if (new URL(route.request().url()).origin === baseUrl) return route.continue();
+    return route.abort();
+  });
+  return context.newPage();
+}
+
+test("production page hydrates its theme control and mounts the canvas", {
+  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 },
+  );
+  await page.waitForFunction(
+    () => {
+      const canvas = document.querySelector("canvas");
+      return canvas && canvas.width > 0 && canvas.height > 0;
+    },
+    undefined,
+    { timeout: 5_000 },
+  );
+  assert.deepEqual(errors, []);
+});
+
+test("each HTML request gets a fresh nonce that cannot be supplied by the caller", {
+  timeout: 15_000,
+}, async () => {
+  const first = await fetch(baseUrl, {
+    signal: AbortSignal.timeout(5_000),
+    headers: {
+      "x-nonce": "caller-supplied",
+      "content-security-policy": "script-src 'nonce-caller-supplied'",
+    },
+  });
+  const second = await fetch(baseUrl, { signal: AbortSignal.timeout(5_000) });
+  const firstPolicy = first.headers.get("content-security-policy") ?? "";
+  const secondPolicy = second.headers.get("content-security-policy") ?? "";
+  const firstNonce = firstPolicy.match(/'nonce-([A-Za-z0-9+/_=-]+)'/)?.[1];
+  const secondNonce = secondPolicy.match(/'nonce-([A-Za-z0-9+/_=-]+)'/)?.[1];
+  assert.ok(firstNonce, "the response must authorize its generated inline scripts");
+  assert.ok(secondNonce);
+  assert.notEqual(firstNonce, secondNonce);
+  assert.notEqual(firstNonce, "caller-supplied");
+  const scriptPolicy = firstPolicy
+    .split(";")
+    .map((directive) => directive.trim())
+    .find((directive) => directive.startsWith("script-src "));
+  assert.equal(scriptPolicy, `script-src 'self' 'nonce-${firstNonce}' https://e.codeswhat.com`);
+  assert.match(firstPolicy, /connect-src 'self' https:\/\/e\.codeswhat\.com;/);
+  const html = await first.text();
+  assert.ok((await second.text()).includes(`nonce="${secondNonce}"`));
+  const scripts = [...html.matchAll(/<script\b([^>]*)>([\s\S]*?)<\/script>/g)].filter(
+    ([, attributes, body]) => body && !attributes.includes('type="application/ld+json"'),
+  );
+  assert.ok(
+    scripts.some(([, , body]) => body.includes("self.__next_f")),
+    "the response must include actual Flight data",
+  );
+  assert.ok(scripts.some(([, attributes]) => attributes.includes('id="theme-init"')));
+  for (const [, attributes] of scripts) {
+    assert.ok(
+      attributes.includes(`nonce="${firstNonce}"`),
+      "every executable inline script must match the response nonce",
+    );
+  }
+});
+
+test("the rendered policy still blocks unapproved inline JavaScript", {
+  timeout: 15_000,
+}, async (t) => {
+  const page = await localPage(t);
+  await page.goto(baseUrl, { waitUntil: "networkidle" });
+  const result = await page.evaluate(async () => {
+    const violation = new Promise((resolve) => {
+      document.addEventListener(
+        "securitypolicyviolation",
+        (event) => resolve(event.effectiveDirective),
+        { once: true },
+      );
+      setTimeout(() => resolve(null), 2_000);
+    });
+    const script = document.createElement("script");
+    script.textContent = "window.unapprovedInlineRan = true";
+    document.body.append(script);
+    return { directive: await violation, ran: window.unapprovedInlineRan === true };
+  });
+  assert.equal(result.ran, false);
+  assert.equal(result.directive, "script-src-elem");
+});
+
+test("subscription rejects nonobject and malformed bodies without calling a provider", {
+  timeout: 15_000,
+}, async () => {
+  const bodies = ["null", "[]", '"hello"', "42", "false", "{bad json", "{}"];
+  for (const [index, body] of bodies.entries()) {
+    const response = await fetch(`${baseUrl}/api/subscribe`, {
+      signal: AbortSignal.timeout(5_000),
+      method: "POST",
+      headers: { "content-type": "application/json", "x-forwarded-for": `192.0.2.${index + 1}` },
+      body,
+    });
+    assert.equal(response.status, 400, `${body} is invalid input, not a server error`);
+    assert.equal(typeof (await response.json()).error, "string");
+  }
+});