diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
index 4a7881a..b782e2a 100644
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -6,7 +6,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 This is a **developer portfolio** whose primary audience is **recruiters and hiring managers**. Optimize every decision for demonstrating engineering skill, depth of work, and professional credibility — not for freelance/client conversion.
 
-**Design direction (APPROVED 2026-06-02, originally validated via a now-removed `mockups/v3` prototype): a design-forward developer portfolio with a signature ~2s monogram arrival animation, mobile-first.** Nima is a **frontend developer with a designer's eye** — positioned as a developer, NOT a designer. The site has designer-grade art direction (near-black + acid-lime `#C6FF3D`, Clash Display / Satoshi / Geist Mono) and a signature ~2-second arrival: an NH monogram strokes on → flies into the nav as the logo → name reveals behind masks → one acid-lime pop (once per session; instant under `prefers-reduced-motion`). Purposeful motion only (Lenis scroll, masked reveals, magnetic CTA). Structure: hero, Selected Work rows → case studies, a live-component Playground (engineering proof), About, contact. **Hard requirements:** beautiful on BOTH mobile and desktop (explicitly verified), full a11y (reduced-motion, keyboard, contrast). See the spec's "FINAL APPROVED DIRECTION" section for the build detail. Adds GSAP + Lenis.
+**Design direction (APPROVED 2026-06-02, originally validated via a now-removed `mockups/v3` prototype): a design-forward developer portfolio with a signature ~2s monogram arrival animation, mobile-first.** Nima is a **developer and AI engineer with a designer's eye** — positioned as a developer, NOT a designer. (Visible copy repositioned from "frontend developer" 2026-08-20; SEO surfaces had led since PR #16.) The site has designer-grade art direction (near-black + acid-lime `#C6FF3D`, Clash Display / Satoshi / Geist Mono) and a signature ~2-second arrival: an NH monogram strokes on → flies into the nav as the logo → name reveals behind masks → one acid-lime pop (once per session; instant under `prefers-reduced-motion`). Purposeful motion only (Lenis scroll, masked reveals, magnetic CTA). Structure: hero, Selected Work rows → case studies, About, contact. (A live-component Playground section existed until 2026-08 and was removed as filler.) **Hard requirements:** beautiful on BOTH mobile and desktop (explicitly verified), full a11y (reduced-motion, keyboard, contrast). See the spec's "FINAL APPROVED DIRECTION" section for the build detail. Adds GSAP + Lenis.
 
 Abandoned explorations (all built + rejected, since deleted — the `mockups/` prototypes no longer exist): refined-minimal multi-page (`variant-a`) & long-scroll (`variant-b`) — too understated; high-craft editorial (`v2`) — too quiet/generic; interactive 3D galaxy (`cosmos`) — felt random/gimmicky. The react-three-fiber/3D direction is dead. The approved direction was the former `v3` prototype, now realized in the live app.
 
diff --git a/e2e/accent-contrast.spec.ts b/e2e/accent-contrast.spec.ts
index b90adbc..8ad1b5c 100644
--- a/e2e/accent-contrast.spec.ts
+++ b/e2e/accent-contrast.spec.ts
@@ -2,7 +2,7 @@ import { test, expect, type Locator } from '@playwright/test';
 import { contrast, maxChannel, parseColorChannels } from './support/color';
 
 // Regression guard for issue #3. The dark-on-lime sites (accent buttons, the
-// nav CTA, the selected segmented-control label) used to get their dark text
+// nav CTA, the work-row "In progress" tag) used to get their dark text
 // color from `text-base` — the same utility that caused the invisible-heading
 // footgun. The fix renames the color token to `dark`, so these now use
 // `text-dark`. If a future edit drops `text-dark`, the text would fall back to
@@ -11,9 +11,8 @@ import { contrast, maxChannel, parseColorChannels } from './support/color';
 // against the lime accent it sits on.
 
 // The accent these elements sit on (`accent` in tailwind.config.ts, #C6FF3D).
-// Both targets are placed on it by design — the nav CTA via `bg-accent`, the
-// segmented label via an absolute sibling pill — so we check contrast against
-// this constant rather than walking the DOM for a background.
+// Both targets are placed on it by design via `bg-accent` — so we check
+// contrast against this constant rather than walking the DOM for a background.
 const ACCENT = [198, 255, 61];
 
 test.beforeEach(async ({ page }) => {
@@ -62,14 +61,15 @@ async function assertDarkOnLime(el: Locator, label: string) {
 // the accent-button case for that component.
 test('nav "Let\'s talk" CTA renders dark text on lime', async ({ page }) => {
   await page.goto('/');
-  await assertDarkOnLime(page.getByRole('link', { name: "Let's talk" }).first(), "nav Let's talk CTA");
+  await assertDarkOnLime(page.getByRole('link', { name: 'Let’s talk' }).first(), "nav Let's talk CTA");
 });
 
-test('selected segmented-control label renders dark text on lime', async ({ page }) => {
+// The playground's segmented control (this spec's original second target) was
+// removed 2026-08; the work list's "In progress" tag is the remaining
+// dark-on-lime pill.
+test('work-row "In progress" tag renders dark text on lime', async ({ page }) => {
   await page.goto('/');
-  // The dark color lives on the inner text span; the sibling motion span is the
-  // (aria-hidden) lime pill background.
-  const selectedLabel = page.locator('[role="radio"][aria-checked="true"] span:not([aria-hidden])');
-  await expect(selectedLabel).toHaveCount(1);
-  await assertDarkOnLime(selectedLabel, 'segmented selected label');
+  const tag = page.getByText('In progress').first();
+  await expect(tag).toBeVisible();
+  await assertDarkOnLime(tag, 'work-row In progress tag');
 });
diff --git a/e2e/arrival-motion.spec.ts b/e2e/arrival-motion.spec.ts
index 965704d..44475d8 100644
--- a/e2e/arrival-motion.spec.ts
+++ b/e2e/arrival-motion.spec.ts
@@ -10,7 +10,7 @@ import { test, expect } from '@playwright/test';
  *    reduced motion the stylesheet hides it before first paint and the unmount
  *    follows on a microtask.
  *  - Hero <h1> renders "Nima Hakimi" (the period rides on the same line).
- *  - "Selected Work" / "Playground" / "Contact" headings live further down,
+ *  - "Selected Work" / "Contact" headings live further down,
  *    each gated by a masked scroll Reveal (inline transform: translateY(...)).
  */
 
@@ -86,14 +86,9 @@ test.describe('scroll reveal', () => {
     // Let the arrival settle and the hero appear.
     await expect(page.getByRole('heading', { name: 'Nima Hakimi' })).toBeVisible({ timeout: 3000 });
 
-    // Playground heading lives well below the fold behind a Reveal.
-    const playground = page.getByRole('heading', { name: /playground/i });
-    await playground.scrollIntoViewIfNeeded();
-    await expect(playground).toBeVisible({ timeout: 3000 });
-
-    // Contact closing moment, even further down.
+    // Contact closing moment, well below the fold behind a Reveal.
     const contact = page.getByRole('heading', {
-      name: /open to frontend roles/i,
+      name: /open to new roles/i,
     });
     await contact.scrollIntoViewIfNeeded();
     await expect(contact).toBeVisible({ timeout: 3000 });
diff --git a/e2e/navigation-contact.spec.ts b/e2e/navigation-contact.spec.ts
index d42d177..4107253 100644
--- a/e2e/navigation-contact.spec.ts
+++ b/e2e/navigation-contact.spec.ts
@@ -30,7 +30,7 @@ test.describe('Primary navigation (desktop)', () => {
 
     await page.getByRole('link', { name: 'Work', exact: true }).click();
     await expect(page).toHaveURL(/\/work$/);
-    await expect(page.getByRole('heading', { name: 'Selected Work' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Selected work' })).toBeVisible();
 
     await page.getByRole('link', { name: 'About', exact: true }).click();
     await expect(page).toHaveURL(/\/about$/);
@@ -63,7 +63,7 @@ test.describe('Mobile menu', () => {
 
     await workLink.click();
     await expect(page).toHaveURL(/\/work$/);
-    await expect(page.getByRole('heading', { name: 'Selected Work' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Selected work' })).toBeVisible();
 
     // Route change closes the menu.
     await expect(panel).toBeHidden();
@@ -73,7 +73,7 @@ test.describe('Mobile menu', () => {
 test.describe('Work browse', () => {
   test('first case study link opens its detail page', async ({ page }) => {
     await page.goto('/work');
-    await expect(page.getByRole('heading', { name: 'Selected Work' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Selected work' })).toBeVisible();
 
     const firstCase = page.locator('.work-list a.work-row').first();
     const title = (await firstCase.locator('.work-row__name').first().innerText()).trim();
diff --git a/e2e/seo.spec.ts b/e2e/seo.spec.ts
index 5cff335..cc00cc2 100644
--- a/e2e/seo.spec.ts
+++ b/e2e/seo.spec.ts
@@ -64,7 +64,19 @@ test.describe('structured data', () => {
     await page.goto('/about');
     expect((await ldTypes(page)).sort()).toEqual(['Person', 'ProfilePage', 'WebSite']);
 
-    await page.goto('/work/be-my-guide');
+    await page.goto('/work/sonari');
     expect((await ldTypes(page)).sort()).toEqual(['BreadcrumbList', 'Person', 'WebSite']);
   });
+
+  test('an unknown route serves the on-brand 404 with a real 404 status', async ({ page }) => {
+    const response = await page.goto('/work/does-not-exist');
+    expect(response?.status()).toBe(404);
+    await expect(page.getByRole('heading', { name: 'This page doesn’t exist.' })).toBeVisible();
+  });
+
+  test('the removed be-my-guide case 308s to /work instead of 404ing', async ({ page }) => {
+    const resp = await page.request.get('/work/be-my-guide', { maxRedirects: 0 });
+    expect(resp.status()).toBe(308);
+    expect(resp.headers()['location']).toBe('/work');
+  });
 });
diff --git a/next.config.js b/next.config.js
index 91c48b8..83c3d76 100644
--- a/next.config.js
+++ b/next.config.js
@@ -6,6 +6,9 @@ const nextConfig = {
       // for "Nima Hakimi developer"); the redesign renamed it to /work.
       { source: '/projects', destination: '/work', permanent: true },
       { source: '/projects/:path*', destination: '/work', permanent: true },
+      // Case study removed 2026-08 after being deployed in the sitemap — keep
+      // the indexed URL alive rather than 404 it (the /projects lesson).
+      { source: '/work/be-my-guide', destination: '/work', permanent: true },
       // Exact-host only: preview deployments on *.vercel.app must stay untouched.
       {
         source: '/:path*',
diff --git a/public/harness.html b/public/harness.html
index 64dc1cf..142982c 100644
--- a/public/harness.html
+++ b/public/harness.html
@@ -130,7 +130,6 @@
     font-family: var(--mono); font-size: 13px; color: var(--muted);
     z-index: 40;
   }
-  #pagenum.speaking::before { content: "\25CF  "; color: var(--amber); }
   #progress {
     position: absolute; left: 0; bottom: 0; height: 2px;
     background: var(--amber); width: 0;
@@ -164,6 +163,11 @@
     position: absolute; right: 84px; bottom: 60px;
     font-size: 14px; color: var(--muted); font-family: var(--mono);
   }
+  #s1 .keys {
+    position: absolute; left: 84px; bottom: 60px;
+    font-size: 13px; color: var(--muted); font-family: var(--mono);
+    letter-spacing: .04em;
+  }
 
   /* ---------- slide 2 ---------- */
   .twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; flex: 1; align-content: center; }
@@ -355,27 +359,12 @@
   #s11 .eq { font-family: var(--mono); font-size: 34px; color: var(--amber); margin-bottom: 44px; }
   #s11 .q { font-size: 44px; font-weight: 700; }
 
-  /* ---------- notes panel ---------- */
-  #notes {
-    position: fixed; left: 0; right: 0; bottom: 0;
-    background: rgba(11,12,15,.94);
-    border-top: 1px solid var(--border);
-    padding: 18px 32px 22px;
-    font-family: var(--mono); font-size: 15px; line-height: 1.6;
-    color: var(--text-2);
-    max-height: 40vh; overflow-y: auto;
-    display: none; z-index: 100;
-  }
-  #notes.open { display: block; }
-  #notes .nhead { color: var(--amber); margin-bottom: 8px; font-size: 13px; letter-spacing: .1em; }
-  aside.notes { display: none; }
-
   @media print {
     body { overflow: visible; }
     #viewport { position: static; display: block; }
     #stage { width: auto; height: auto; transform: none !important; }
     section.slide { position: relative; opacity: 1; transform: none; page-break-after: always; height: 720px; width: 1280px; }
-    #notes, #pagenum, #progress { display: none !important; }
+    #pagenum, #progress, #s1 .keys { display: none !important; }
   }
 </style>
 </head>
@@ -387,7 +376,7 @@
     <section class="slide" id="s1">
       <div class="equation">agent <span class="op">=</span> modell <span class="op">+</span> <span class="h">harness</span></div>
       <div class="credit">&#171;Agent = Model + Harness&#187; &#8212; LangChain</div>
-      <aside class="notes" data-time="~20 sek" data-cue="Hei. Ti minutter. Den mest undervurderte delen: harness. Hele presentasjonen er denne ene linja.">Hei. Jeg skal bruke ti minutter på den mest undervurderte delen av å utvikle med AI: harnessen. Hele presentasjonen er egentlig denne ene linja i praksis.</aside>
+      <div class="keys">&#8592; &#8594; naviger &#183; Home/End f&#248;rste/siste &#183; F fullskjerm &#183; Esc avslutt</div>
     </section>
 
     <!-- 2 ------------------------------------------------------------ -->
@@ -404,7 +393,6 @@ <h1>Samme modell. <span class="thin">Helt forskjellig resultat.</span></h1>
         </div>
       </div>
       <div class="landing">Samme modell.</div>
-      <aside class="notes" data-time="~35 sek" data-cue="Mandag: feil kommando, feil mappe, gammelt mønster. Tirsdag: alt riktig, stoppet force push. Ikke modellen. Alt rundt den.">Typisk situasjon: du ber agenten fikse noe, og den kjører testene med feil kommando, legger filer i feil mappe, og finner opp et mønster dere gikk bort fra i fjor. Andre dager gjør samme modell alt riktig, og stopper til og med seg selv før en force push. Forskjellen ligger ikke i modellen. Den ligger i alt rundt den.</aside>
     </section>
 
     <!-- 3 ------------------------------------------------------------ -->
@@ -427,7 +415,6 @@ <h1>Harness: <span class="thin">alt som ikke er modellen</span></h1>
           <div class="model">modell</div>
         </div>
       </div>
-      <aside class="notes" data-time="~45 sek" data-cue="Harness: alt som ikke er modellen. Copilot CLI er en harness, men generisk. Motoren leier vi. Resten av bilen er vår.">Det rundt har et navn: harness. Alt som ikke er modellen. System-prompten, tools, tilgang til filsystem og terminal, context management, regler, feedback loops. Copilot CLI er i seg selv en harness: den tar en rå modell og gir den en agent loop, tools og et sted å jobbe. Men den er generisk. Den vet ingenting om akkurat vårt repo, våre konvensjoner, vår deploy. Modellen er motoren, harnessen er resten av bilen. Motoren får vi ikke gjort noe med, den leier vi. Resten av bilen er vår.</aside>
     </section>
 
     <!-- 4 ------------------------------------------------------------ -->
@@ -451,7 +438,6 @@ <h3>Programmatisk</h3>
         </div>
       </div>
       <div class="maxim">Prose er <b>forslag</b>. Kode er <b>garantier</b>.</div>
-      <aside class="notes" data-time="~35 sek" data-cue="Tre nivåer. Null: out of the box. Én: prose, fortelle. To: kode, garantere. Prose er forslag, kode er garantier.">Harnessen kan vi bygge på, og jeg tenker på det som tre nivåer. Nivå null står vi allerede på: CLI-en rett ut av boksen, den forrige sliden. Nivå én er prose: du skriver tekst som styrer agenten, altså instructions og skills. Nivå to er programmatisk: du skriver kode som håndhever ting, hooks. Forskjellen mellom dem er den som betyr noe: prose er forslag, kode er garantier.</aside>
     </section>
 
     <!-- 5 ------------------------------------------------------------ -->
@@ -481,7 +467,6 @@ <h1>AGENTS.md: <span class="thin">alltid i kontekst</span></h1>
         </div>
         <p class="foot">Leses automatisk hver session, fra git root og cwd &#183; path-spesifikke regler: <span class="mono">.github/instructions/*.instructions.md</span> med <span class="mono">applyTo</span>-glob &#183; leser også <span class="mono">CLAUDE.md</span></p>
       </div>
-      <aside class="notes" data-time="~55 sek" data-cue="AGENTS.md i rota, leses hver session. Alt du sier til nye utviklere. Path-spesifikke regler finnes. Leser også CLAUDE.md. Ti minutters jobb, best ROI.">Nivå én, laveste terskel: en markdown-fil i roten av repoet. AGENTS.md. Copilot CLI leser den automatisk i hver session. Der skriver dere det dere ellers må si til hver nye utvikler: hvordan kjøre testene, hvor ting ligger, hvilke mønstre dere bruker, hva man ikke skal røre. Omtrent som denne. Trenger dere mer presisjon finnes path-spesifikke instructions, egne regler som bare gjelder for eksempel frontend-koden. Og en fin detalj: Copilot leser også CLAUDE.md, så har dere en fra før, gjelder den allerede. Dette er ti minutters jobb, og sannsynligvis den beste ROI-en i hele denne presentasjonen.</aside>
     </section>
 
     <!-- 6 ------------------------------------------------------------ -->
@@ -505,7 +490,6 @@ <h1>Skills: <span class="thin">kunnskap on demand</span></h1>
           <li class="grey">Samme gate: custom agents (<span class="mono">.agent.md</span>, subagent med eget context window og begrensede tools)</li>
         </ul>
       </div>
-      <aside class="notes" data-time="~60 sek" data-cue="Instructions er alltid med, koster context. Skills lastes on demand: bare navn og beskrivelse. Eksempler: deploy, internrammeverk, migrasjon. Pluss custom agents: security-reviewer.">Men instructions har en kostnad: de er alltid med, i hver eneste prompt. Context window er begrenset, og alt dere dytter inn der konkurrerer om modellens oppmerksomhet. Ting den ikke trenger akkurat nå er støy. Skills løser det. En skill er en mappe med en SKILL.md, pluss eventuelt scripts og ressurser. Agenten ser bare navnet og beskrivelsen, og laster resten først når det er relevant for oppgaven. Kunnskap on demand. Typiske skills: deploy-rutinen deres, konvensjoner for internrammeverket, hvordan skrive en migrasjon. I samme gate finner dere custom agents: spesialiserte agenter med et avgrenset oppdrag og egne rettigheter, som en security-reviewer dere kaller på ved behov.</aside>
     </section>
 
     <!-- 7 ------------------------------------------------------------ -->
@@ -549,7 +533,6 @@ <h1>Hvorfor hooks, <span class="thin">og ikke bare prose?</span></h1>
           <div class="ev">permissionRequest</div>
         </div>
       </div>
-      <aside class="notes" data-time="~1 min 15 sek" data-cue="Tre grunner. Én: prose drukner i lange sessions. To: prose koster context, hooks koster null. 35 millisekunder. Tre: garantier, ikke 99 prosent. Krasj blokkerer, timeout slipper gjennom. Pre tool use: allow, deny, ask. Prose for skjønn, kode for aldri.">Alt til nå har vært prose, og prose har tre begrensninger. Én: modellen er probabilistisk, og i lange sessions begynner den å glemme regler. Jo mer context, jo lettere drukner de. To: prose koster context, det var derfor skills lastes on demand. En hook koster null context: den kjører utenfor modellen og fyrer hver gang, uansett hvor lang sessionen er blitt. Og den er billig, målt til rundt 35 millisekunder for en enkel hook. Tre: noen ting skal ikke være sannsynlige. For farlige kommandoer holder det ikke med 99 prosent etterlevelse. Siden dette er kode, hører feilmodusen med: krasjer hooken, blokkeres kallet. Timer den ut, slipper det gjennom. Så sett en timeout, og hold den rask. Mekanikken er enkel: en hook kjører på events i agent-loopen, og den viktigste er preToolUse. Den ser hvert tool call før det kjører, og svarer allow, deny eller ask. Tommelfingerregelen min: prose for det som krever skjønn, kode for det som aldri skal skje.</aside>
     </section>
 
     <!-- 8 ------------------------------------------------------------ -->
@@ -597,7 +580,6 @@ <h4>Sikkerhet</h4>
         </div>
       </div>
       <p class="debugfoot">debug: /env viser lastede hooks &#183; stdout &#8594; ~/.copilot/logs/ &#183; lastes ved session-start &#183; Windows: egne bash- og powershell-nøkler</p>
-      <aside class="notes" data-time="~1 min 10 sek" data-cue="Testet på vår versjon. JSON peker på seks linjer bash. Pek på outputen: denied. Mer enn guardrails: formatter, tester, session start. Trusted repo. Policy sentralt på enterprise.">Sånn ser det ut i praksis, og dette er testet på versjonen vi faktisk kjører. Én JSON-fil som sier: før hvert tool call, kjør dette scriptet, fem sekunders timeout. Og scriptet er seks linjer bash: les input, sjekk etter rm minus rf, svar deny med en begrunnelse. Det er alt. Nederst ser dere hva som skjer når agenten prøver seg: den får beskjed, med begrunnelsen vår. Samme mekanikk brukes til mer enn guardrails: kjør formatter og tester etter hver edit, eller injecter git status ved session start så agenten starter orientert. Og to ting til de sikkerhetsbevisste: repo-hooks kjører først når mappa er trusted, så et fremmed repo dere kloner får ikke kjøre shell hos dere automatisk. Og på enterprise kan policyer legges sentralt, de kan ikke skrus av av brukeren.</aside>
     </section>
 
     <!-- 9 ------------------------------------------------------------ -->
@@ -635,7 +617,6 @@ <h1>Fra min egen verktøykasse</h1>
           </div>
         </div>
       </div>
-      <aside class="notes" data-time="~45 sek · KUTTBAR: går tiden, dropp hele sliden (slide 10 refererer den ikke)" data-cue="Mine to. Tiering-guard: deny med regelen i meldinga, agenten retter seg selv. Budget-advisor: varsler på 50 og 75 prosent. Vanlige shell-scripts. Bare feltnavnene må matche.">To fra mitt eget oppsett, i Claude Code, samme konsept. Den første denier alle subagent-kall som ikke har valgt modell eksplisitt. Det fine er at deny-meldingen inneholder selve regelen. Agenten leser den, retter seg og prøver igjen. Ingen spør meg om noe, den oppdrar seg selv. Den andre leser context-forbruket ved hver stopp, og ber agenten runde av eller ta handoff når vi passerer 50 og 75 prosent av vinduet. Begge er vanlige shell-scripts som JSON-en peker på. Skulle jeg flytte dem til Copilot, gjenbruker jeg scriptene som de er. Det som må matche er feltnavnene inn og ut, ikke koden.</aside>
     </section>
 
     <!-- 10 ----------------------------------------------------------- -->
@@ -660,7 +641,6 @@ <h3>Sensors <span class="grey" style="font-weight:400">fanger opp etter</span><s
       </div>
       <div class="landing">Dårlig output er ofte en manglende sensor.</div>
       </div>
-      <aside class="notes" data-time="~50 sek" data-cue="Feedback loops, fra definisjonen i starten. Tester, lint, typecheck er øynene. Guides før: prose. Sensors etter: hooks. Dårlig output er ofte en manglende sensor.">Helt i starten definerte vi harness med feedback loops på lista. Det er den siste brikken. En agent er bare så god som feedbacken den får: tester, linter, typecheck, build-output er øynene dens. Uten dem gjetter den, med dem retter den seg selv. Birgitta Böckeler hos Thoughtworks kaller det guides og sensors, og det mapper rett på trappa vår. Guides styrer agenten før den handler: instructions og skills, prose-nivået. Sensors fanger opp feil etterpå: for eksempel hooks som kjører testene og dytter resultatet tilbake. Neste gang agenten leverer noe dårlig, sjekk om den hadde mulighet til å oppdage feilen selv. Som regel hadde den ikke det. Da er det ikke modellen det står på, det er en sensor som mangler.</aside>
     </section>
 
     <!-- 11 ----------------------------------------------------------- -->
@@ -676,7 +656,6 @@ <h1>Oppsummert</h1>
       <p class="std">Åpen standard, aug 2026: Agent Plugins 1.0 &#183; AWS &#183; Anysphere &#183; Microsoft &#183; OpenAI &#183; Vercel</p>
       <div class="eq">agent = modell + <span style="color:var(--amber)">harness</span></div>
       <div class="q">Spørsmål?</div>
-      <aside class="notes" data-time="~35 sek + Q&amp;A" data-cue="Alt er filer i repoet. Én bygger, alle får nytte. Åpen standard i august. Modellene blir bedre av seg selv, harnessen bare hvis noen bygger den. Spørsmål.">For å samle det: alt dere har sett er filer i repoet. En markdown-fil, en mappe med skills, en JSON med hooks. De versjoneres og deles som all annen kode, så én person bygger og alle får nytte. Og formatet ble i august en åpen standard, så det dere lager flytter med dere på tvers av verktøy. Modellene blir bedre av seg selv, det ordner andre. Harnessen blir bare bedre hvis noen bygger den. Det var det jeg hadde. Spørsmål?</aside>
     </section>
 
   </div>
@@ -684,7 +663,6 @@ <h1>Oppsummert</h1>
 
 <div id="pagenum"></div>
 <div id="progress"></div>
-<div id="notes"><div class="nhead"></div><div class="nbody"></div></div>
 
 <script>
 (function () {
@@ -692,9 +670,6 @@ <h1>Oppsummert</h1>
   var stage = document.getElementById('stage');
   var pagenum = document.getElementById('pagenum');
   var progress = document.getElementById('progress');
-  var notes = document.getElementById('notes');
-  var nhead = notes.querySelector('.nhead');
-  var nbody = notes.querySelector('.nbody');
   var idx = 0;
 
   function clamp(n) { return Math.max(0, Math.min(slides.length - 1, n)); }
@@ -706,66 +681,10 @@ <h1>Oppsummert</h1>
     if (location.hash !== '#' + (idx + 1)) {
       history.replaceState(null, '', '#' + (idx + 1));
     }
-    var aside = slides[idx].querySelector('aside.notes');
-    if (aside) {
-      nhead.textContent = 'SLIDE ' + (idx + 1) + ' · ' + (aside.getAttribute('data-time') || '');
-      nbody.textContent = aside.textContent;
-    } else {
-      nhead.textContent = 'SLIDE ' + (idx + 1);
-      nbody.textContent = '';
-    }
   }
 
   function go(n) {
-    var next = clamp(n);
-    if (next !== idx) speakStop();
-    idx = next; render();
-  }
-
-  /* ---- tale (T): les notatene for gjeldende slide høyt ---- */
-  var speaking = false;
-  var voiceNb = null;
-  function pickVoice() {
-    try {
-      var vs = speechSynthesis.getVoices();
-      voiceNb = null;
-      for (var i = 0; i < vs.length; i++) {
-        if (/^(nb|nn|no)([-_]|$)/i.test(vs[i].lang)) { voiceNb = vs[i]; break; }
-      }
-    } catch (e) {}
-  }
-  if ('speechSynthesis' in window) {
-    pickVoice();
-    speechSynthesis.onvoiceschanged = pickVoice;
-  }
-  function speakStop() {
-    if (!('speechSynthesis' in window)) return;
-    speechSynthesis.cancel();
-    speaking = false;
-    pagenum.classList.remove('speaking');
-  }
-  function speakNotes() {
-    if (!('speechSynthesis' in window)) return;
-    if (speaking) { speakStop(); return; }
-    var aside = slides[idx].querySelector('aside.notes');
-    if (!aside) return;
-    var text = (aside.getAttribute('data-cue') || aside.textContent).replace(/\s+/g, ' ').trim();
-    if (!text) return;
-    speechSynthesis.cancel();
-    // setningsvis kø: gjør stopp responsiv og unngår Chrome-kutt på lange utterances
-    var parts = text.match(/[^.!?]+[.!?]+\s*/g) || [text];
-    speaking = true;
-    pagenum.classList.add('speaking');
-    parts.forEach(function (p, i) {
-      var u = new SpeechSynthesisUtterance(p.trim());
-      u.lang = 'nb-NO';
-      if (voiceNb) u.voice = voiceNb;
-      u.rate = 1.25;
-      if (i === parts.length - 1) {
-        u.onend = function () { speaking = false; pagenum.classList.remove('speaking'); };
-      }
-      speechSynthesis.speak(u);
-    });
+    idx = clamp(n); render();
   }
 
   function fit() {
@@ -786,18 +705,14 @@ <h1>Oppsummert</h1>
         if (document.fullscreenElement) { document.exitFullscreen(); }
         else { document.documentElement.requestFullscreen(); }
         break;
-      case 'n': case 'N':
-        notes.classList.toggle('open'); break;
-      case 't': case 'T':
-        speakNotes(); break;
       case 'Escape':
-        speakStop(); break;
+        if (document.fullscreenElement) { document.exitFullscreen(); }
+        break;
     }
   });
 
   // click zones: outer 12% edges = prev/next
   document.addEventListener('click', function (e) {
-    if (notes.contains(e.target)) return;
     var x = e.clientX / window.innerWidth;
     if (x > 0.88) go(idx + 1);
     else if (x < 0.12) go(idx - 1);
diff --git a/public/work/be-my-guide/feed.jpg b/public/work/be-my-guide/feed.jpg
deleted file mode 100644
index dcaaa5d..0000000
Binary files a/public/work/be-my-guide/feed.jpg and /dev/null differ
diff --git a/public/work/be-my-guide/landing.jpg b/public/work/be-my-guide/landing.jpg
deleted file mode 100644
index d58fd74..0000000
Binary files a/public/work/be-my-guide/landing.jpg and /dev/null differ
diff --git a/public/work/be-my-guide/request.jpg b/public/work/be-my-guide/request.jpg
deleted file mode 100644
index 02a66c4..0000000
Binary files a/public/work/be-my-guide/request.jpg and /dev/null differ
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 8d7db59..8919de9 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -9,7 +9,7 @@ import JsonLd from '@/components/seo/JsonLd';
 export const metadata = buildPageMetadata({
   title: 'About',
   description:
-    'Nima Hakimi — developer and AI engineer with a designer’s eye, building accessible, expressive web interfaces. Experience, education, and skills.',
+    'Nima Hakimi, developer and AI engineer with a designer’s eye, building accessible, expressive interfaces. Experience, education, and skills.',
   path: '/about',
 });
 
@@ -40,7 +40,7 @@ export default function AboutPage() {
           style={{ fontSize: 'clamp(2.25rem, 6.5vw, 4.5rem)' }}
         >
           <span className="block overflow-hidden">
-            <Reveal>I’m a frontend developer</Reveal>
+            <Reveal>I’m a developer and AI&nbsp;engineer</Reveal>
           </span>
           <span className="block overflow-hidden">
             <Reveal delay={0.06}>
@@ -52,7 +52,7 @@ export default function AboutPage() {
         <Reveal delay={0.12} className="mt-[clamp(1.5rem,5vh,2.5rem)]">
           <p className="measure text-[clamp(1rem,2vw,1.25rem)] leading-relaxed text-muted">
             I build <span className="text-ink">accessible</span>, <span className="text-ink">expressive</span>{' '}
-            interfaces with React, TypeScript and Kotlin. Engineering comes first — but a feel for typography, motion
+            interfaces with React, TypeScript, and Kotlin. Engineering comes first. But a feel for typography, motion,
             and detail is the edge that makes the work land. Currently building platform frontend at{' '}
             <span className="text-ink">NAV</span>, based in {about.location}.
           </p>
@@ -183,22 +183,6 @@ export default function AboutPage() {
           </Reveal>
         </div>
 
-        <div>
-          <SectionLabel>Strengths</SectionLabel>
-          <Reveal delay={0.04}>
-            <ul className="mt-6 flex flex-wrap gap-2">
-              {about.skills.personal.map((skill) => (
-                <li
-                  key={skill}
-                  className="rounded-full border border-white/10 px-3 py-1.5 font-mono text-xs text-muted transition-colors hover:border-accent/40 hover:text-ink"
-                >
-                  {skill}
-                </li>
-              ))}
-            </ul>
-          </Reveal>
-        </div>
-
         <div>
           <SectionLabel>Languages</SectionLabel>
           <div className="mt-6 border-t border-white/10">
@@ -244,9 +228,9 @@ export default function AboutPage() {
       <section className="mt-[clamp(4rem,12vh,7rem)] border-t border-white/10 pt-12">
         <Reveal>
           <p className="measure text-lg leading-relaxed text-muted sm:text-xl sm:leading-7">
-            Want to know more about my work, or talk about a role?{' '}
+            If a role or a project fits,{' '}
             <UnderlineLink href="/contact" className="text-ink">
-              Send me a message
+              send me a message
             </UnderlineLink>{' '}
             or email{' '}
             <UnderlineLink href={`mailto:${SITE_EMAIL}`} className="text-ink">
diff --git a/src/app/contact/ContactClient.tsx b/src/app/contact/ContactClient.tsx
index a33cf4b..b36917f 100644
--- a/src/app/contact/ContactClient.tsx
+++ b/src/app/contact/ContactClient.tsx
@@ -60,7 +60,7 @@ function toastForResult(state: ContactFormState): ToastState {
     return { type: 'success', title: 'Message sent', desc: state.message ?? 'Thanks! I’ll get back to you soon.' };
   }
   if (state.status === 'error' && state.message) {
-    return { type: 'error', title: 'Something went wrong', desc: state.message };
+    return { type: 'error', title: 'Message not sent', desc: state.message };
   }
   return null;
 }
@@ -139,8 +139,8 @@ export default function ContactClient({ siteKey }: Props) {
 
           <Reveal delay={0.12} className="mt-[clamp(1.5rem,5vh,2.5rem)]">
             <p className="measure text-[clamp(1rem,2vw,1.1875rem)] leading-relaxed text-muted">
-              Open to frontend roles and collaborations. Have a question about my work, or a team I’d be a fit for? Drop
-              a line — I read everything and reply.
+              Open to new roles and collaborations. Have a question about my work, or a team I’d be a fit for? Drop a
+              line. I read everything and reply.
             </p>
           </Reveal>
         </header>
@@ -243,7 +243,9 @@ export default function ContactClient({ siteKey }: Props) {
                   <div className="g-recaptcha" data-sitekey={siteKey} />
                 </div>
               ) : (
-                <div className="text-sm text-red-400">reCAPTCHA is not configured.</div>
+                <div className="text-sm text-red-400">
+                  The form is unavailable right now. Email me at nima@hackimi.dev instead.
+                </div>
               )}
 
               <SubmitButton />
diff --git a/src/app/contact/actions.ts b/src/app/contact/actions.ts
index 2bfd205..0b1b75d 100644
--- a/src/app/contact/actions.ts
+++ b/src/app/contact/actions.ts
@@ -33,17 +33,13 @@ export async function submitContact(_: ContactFormState, formData: FormData): Pr
 
   const isHuman = await verifyRecaptcha(token);
   if (!isHuman) {
-    return errorState('Please confirm you are not a robot and try again.', values);
+    return errorState('Confirm you’re not a robot and try again.', values);
   }
 
   const parsed = contactSchema.safeParse(values);
   if (!parsed.success) {
     const { fieldErrors, formErrors } = parsed.error.flatten();
-    return errorState(
-      formErrors[0] ?? 'Please correct the highlighted fields and resend your message.',
-      values,
-      fieldErrors
-    );
+    return errorState(formErrors[0] ?? 'Fix the highlighted fields and send again.', values, fieldErrors);
   }
 
   const { name, email, subject, message } = parsed.data;
@@ -51,11 +47,11 @@ export async function submitContact(_: ContactFormState, formData: FormData): Pr
 
   try {
     await sendMail(
-      `Svar til ${name}`,
+      'Thanks for your message',
       email,
-      `Hei ${name},\n\nTakk for din henvendelse. Jeg vil svare deg så snart som mulig.\n\nMed vennlig hilsen,\nNima Hakimi`
+      `Hi ${name},\n\nThanks for reaching out. I’ll get back to you as soon as I can.\n\nNima Hakimi`
     );
-    await sendMail(subject || 'Kontakt via hackimi.dev', 'nima@hackimi.dev', body);
+    await sendMail(subject || 'Contact via hackimi.dev', 'nima@hackimi.dev', body);
   } catch (error) {
     console.error('Contact form sendMail failed', error);
     return errorState('Could not send your message right now. Please try again.', values);
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 877baea..6cc0eab 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -5,7 +5,7 @@ export const runtime = 'nodejs';
 
 export const metadata = buildPageMetadata({
   title: 'Contact',
-  description: 'Send a message to Nima Hakimi through a secure contact form powered by reCAPTCHA.',
+  description: 'Send Nima Hakimi a message. He reads everything and replies.',
   path: '/contact',
 });
 
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..5256402
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,46 @@
+import Reveal from '@/components/motion/Reveal';
+import MagneticButton from '@/components/motion/MagneticButton';
+import UnderlineLink from '@/components/motion/UnderlineLink';
+
+export const metadata = { title: 'Not found' };
+
+/**
+ * On-brand 404 for unknown routes and notFound() calls. Before this existed a
+ * dead link landed on Next's unstyled default — a white page on a dark site.
+ */
+export default function NotFound() {
+  return (
+    <section className="flex min-h-[70svh] flex-col justify-center py-24">
+      <Reveal>
+        <div className="mb-[clamp(1.25rem,4vh,2.25rem)] flex items-center gap-3">
+          <span aria-hidden className="h-px w-7 bg-accent" />
+          <span className="mono-label text-accent">404</span>
+        </div>
+      </Reveal>
+
+      <h1
+        className="font-display font-bold leading-[1.04] tracking-tight"
+        style={{ fontSize: 'clamp(2.25rem, 6.5vw, 4.5rem)' }}
+      >
+        <span className="block overflow-hidden">
+          <Reveal>This page doesn’t exist.</Reveal>
+        </span>
+      </h1>
+
+      <Reveal delay={0.1} className="mt-[clamp(1.5rem,5vh,2.5rem)]">
+        <p className="measure text-[clamp(1rem,2vw,1.25rem)] leading-relaxed text-muted">
+          The link is stale, or the address is off. Everything that does exist is a step away.
+        </p>
+      </Reveal>
+
+      <Reveal delay={0.2} className="mt-[clamp(1.75rem,6vh,2.75rem)]">
+        <div className="flex flex-wrap items-center gap-x-8 gap-y-4">
+          <MagneticButton href="/">Back home</MagneticButton>
+          <UnderlineLink href="/work" className="font-mono text-xs uppercase tracking-[0.12em] text-muted">
+            All work →
+          </UnderlineLink>
+        </div>
+      </Reveal>
+    </section>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 428b832..595e0e1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,7 +3,6 @@ import Reveal from '@/components/motion/Reveal';
 import MagneticButton from '@/components/motion/MagneticButton';
 import UnderlineLink from '@/components/motion/UnderlineLink';
 import WorkRow from '@/components/work/WorkRow';
-import PlaygroundSection from '@/components/playground/PlaygroundSection';
 import work from '@/data/work';
 import { SITE_EMAIL, SITE_SOCIAL_LINKS } from '@/lib/site';
 
@@ -16,7 +15,7 @@ export default function Home() {
         {/* Eyebrow */}
         <div className="mb-[clamp(1.25rem,4vh,2.5rem)] flex items-center gap-3">
           <span aria-hidden className="h-px w-7 bg-accent" />
-          <span className="mono-label text-accent">Frontend Developer</span>
+          <span className="mono-label text-accent">Developer &amp; AI Engineer</span>
         </div>
 
         {/* Name headline — masked reveal target lives in `data-hero-line` */}
@@ -37,10 +36,10 @@ export default function Home() {
         {/* Positioning line */}
         <Reveal delay={0.1} className="mt-[clamp(1.5rem,5vh,3rem)]">
           <p className="measure text-[clamp(1rem,2.1vw,1.3125rem)] font-medium leading-relaxed text-muted">
-            <span className="text-ink">Frontend developer</span> with a{' '}
-            <span className="text-ink">designer&rsquo;s eye</span> — I build{' '}
-            <span className="text-ink">accessible</span>, <span className="text-ink">expressive</span> interfaces for
-            the web. Currently at <span className="text-accent">NAV</span>.
+            <span className="text-ink">Developer and AI engineer</span> with a{' '}
+            <span className="text-ink">designer&rsquo;s eye</span>. I build <span className="text-ink">accessible</span>
+            , <span className="text-ink">expressive</span> interfaces for the web. Currently at{' '}
+            <span className="text-accent">NAV</span>.
           </p>
         </Reveal>
 
@@ -67,11 +66,12 @@ export default function Home() {
       {/* Selected Work */}
       <section id="work" className="scroll-mt-24 py-24">
         <Reveal>
-          <h2 className="mono-label">Selected Work</h2>
+          <h2 className="mono-label">Selected work</h2>
         </Reveal>
 
         <div className="work-list mt-2 border-t border-white/10">
-          {work.map((c, index) => (
+          {/* Curated cut: top three only — the full list lives on /work. */}
+          {work.slice(0, 3).map((c, index) => (
             <Reveal key={c.slug} delay={index * 0.05}>
               <WorkRow c={c} index={index} />
             </Reveal>
@@ -85,15 +85,10 @@ export default function Home() {
         </div>
       </section>
 
-      {/* Playground — live interactive component demos */}
-      <section id="playground" className="scroll-mt-24 py-24">
-        <PlaygroundSection />
-      </section>
-
       {/* Contact — big-type closing moment */}
       <section id="contact" className="scroll-mt-24 border-t border-white/10 py-24">
         <Reveal>
-          <h2 className="mono-label text-accent">Open to frontend roles</h2>
+          <h2 className="mono-label text-accent">Open to new roles</h2>
         </Reveal>
 
         <h3
@@ -107,14 +102,14 @@ export default function Home() {
 
         <Reveal delay={0.1} className="mt-[clamp(1.5rem,5vh,2.5rem)]">
           <p className="measure text-[clamp(1rem,2.1vw,1.3125rem)] leading-relaxed text-muted">
-            Looking for a frontend developer who sweats the details? I’m{' '}
-            <span className="text-ink">open to new opportunities</span> — let’s get into it.
+            I’m <span className="text-ink">open to new opportunities</span>. If what you’re building needs{' '}
+            <span className="text-ink">engineering with design taste</span>, get in touch.
           </p>
         </Reveal>
 
         <Reveal delay={0.2} className="mt-[clamp(2rem,7vh,3.5rem)]">
           <div className="flex flex-wrap items-center gap-x-8 gap-y-4">
-            <MagneticButton href="/contact">Start a conversation</MagneticButton>
+            <MagneticButton href="/contact">Get in touch</MagneticButton>
             <UnderlineLink href={`mailto:${SITE_EMAIL}`} className="text-muted">
               {SITE_EMAIL}
             </UnderlineLink>
diff --git a/src/app/work/page.tsx b/src/app/work/page.tsx
index c40d640..fcafdab 100644
--- a/src/app/work/page.tsx
+++ b/src/app/work/page.tsx
@@ -13,11 +13,11 @@ export default function WorkPage() {
   return (
     <section className="py-[clamp(3rem,10vh,7rem)]">
       <Reveal>
-        <h1 className="mono-label">Selected Work</h1>
+        <h1 className="mono-label">Selected work</h1>
       </Reveal>
       <Reveal delay={0.05}>
         <p className="measure mt-4 text-[clamp(1.125rem,2.4vw,1.625rem)] font-medium leading-snug text-ink">
-          Case studies in product engineering — design and build, end to end.
+          Case studies in product engineering: design and build, end to end.
         </p>
       </Reveal>
 
diff --git a/src/components/layout/SiteNav.tsx b/src/components/layout/SiteNav.tsx
index f0c0516..f01017b 100644
--- a/src/components/layout/SiteNav.tsx
+++ b/src/components/layout/SiteNav.tsx
@@ -12,7 +12,6 @@ type NavItem = { label: string; href: string };
 const NAV_ITEMS: NavItem[] = [
   { label: 'Work', href: '/work' },
   { label: 'About', href: '/about' },
-  { label: 'Playground', href: '/#playground' },
   { label: 'Contact', href: '/contact' },
 ];
 
@@ -74,7 +73,7 @@ export default function SiteNav() {
           </ul>
           <MagneticButton href="/contact" className="mono-label text-dark!">
             <span aria-hidden className="h-1.5 w-1.5 rounded-full bg-dark" />
-            Let&apos;s talk
+            Let&rsquo;s talk
           </MagneticButton>
         </div>
 
@@ -84,7 +83,7 @@ export default function SiteNav() {
             href="/contact"
             className="mono-label inline-flex min-h-11 items-center rounded-full bg-accent px-4 py-2.5 text-dark! focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent/60 focus-visible:ring-offset-2 focus-visible:ring-offset-dark"
           >
-            Let&apos;s talk
+            Let&rsquo;s talk
           </Link>
           <button
             type="button"
diff --git a/src/components/motion/SmoothScroll.tsx b/src/components/motion/SmoothScroll.tsx
index c3a8cc7..f800428 100644
--- a/src/components/motion/SmoothScroll.tsx
+++ b/src/components/motion/SmoothScroll.tsx
@@ -24,7 +24,7 @@ export default function SmoothScroll({ children }: { children: React.ReactNode }
       id = requestAnimationFrame(raf);
     });
 
-    // Smooth in-page anchor navigation (`/#work`, `#playground`, `#contact`).
+    // Smooth in-page anchor navigation (`/#work`, `#contact`).
     // We intercept clicks on links whose target is a same-page hash and hand
     // the scroll to Lenis. Anything that isn't a resolvable in-page target is
     // left to the browser (native jump still works, the CSS import above fixes
diff --git a/src/components/playground/CopyChip.tsx b/src/components/playground/CopyChip.tsx
deleted file mode 100644
index 8954863..0000000
--- a/src/components/playground/CopyChip.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
-
-const VALUE = 'hakimi.nima1@gmail.com';
-
-/**
- * A copy-to-clipboard chip. Clicking copies the value and swaps the label to
- * "COPIED" with a tick for 1.5s, then reverts. The swap is a cross-fade that
- * collapses to an instant cut under reduced motion. `aria-live` announces the
- * state change to screen readers; the button stays a single focusable target.
- */
-export default function CopyChip() {
-  const reduce = useReducedMotion();
-  const [copied, setCopied] = useState(false);
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(
-    () => () => {
-      if (timer.current) clearTimeout(timer.current);
-    },
-    []
-  );
-
-  const copy = async () => {
-    try {
-      await navigator.clipboard?.writeText(VALUE);
-    } catch {
-      // Clipboard may be blocked (e.g. insecure context); still flash feedback.
-    }
-    setCopied(true);
-    if (timer.current) clearTimeout(timer.current);
-    timer.current = setTimeout(() => setCopied(false), 1500);
-  };
-
-  const swap = reduce
-    ? { initial: false, animate: {}, exit: {} }
-    : {
-        initial: { y: 8, opacity: 0 },
-        animate: { y: 0, opacity: 1 },
-        exit: { y: -8, opacity: 0 },
-      };
-
-  return (
-    <button
-      type="button"
-      onClick={copy}
-      aria-label={copied ? 'Copied to clipboard' : `Copy ${VALUE}`}
-      className="group inline-flex items-center gap-3 rounded-full border border-white/10 bg-surface py-2 pl-4 pr-3 font-mono text-sm text-ink transition-colors hover:border-accent/40 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-accent/60"
-    >
-      <span className="truncate">{VALUE}</span>
-      <span
-        aria-hidden
-        className="relative grid h-6 w-16 place-items-center overflow-hidden rounded-full bg-white/5 text-[0.625rem] font-medium uppercase tracking-[0.12em]"
-      >
-        <AnimatePresence mode="wait" initial={false}>
-          {copied ? (
-            <motion.span
-              key="copied"
-              {...swap}
-              transition={{ duration: 0.18 }}
-              className="absolute inset-0 flex items-center justify-center gap-1 text-accent"
-            >
-              <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
-                <path
-                  d="M2.5 6.5L4.8 8.8L9.5 3.5"
-                  stroke="currentColor"
-                  strokeWidth="1.6"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-              Copied
-            </motion.span>
-          ) : (
-            <motion.span
-              key="copy"
-              {...swap}
-              transition={{ duration: 0.18 }}
-              className="absolute inset-0 flex items-center justify-center text-muted"
-            >
-              Copy
-            </motion.span>
-          )}
-        </AnimatePresence>
-      </span>
-      <span aria-live="polite" className="sr-only">
-        {copied ? 'Copied to clipboard' : ''}
-      </span>
-    </button>
-  );
-}
diff --git a/src/components/playground/PlaygroundSection.tsx b/src/components/playground/PlaygroundSection.tsx
deleted file mode 100644
index 89f345f..0000000
--- a/src/components/playground/PlaygroundSection.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import Reveal from '@/components/motion/Reveal';
-import SegmentedControl from './SegmentedControl';
-import SpringSlider from './SpringSlider';
-import CopyChip from './CopyChip';
-
-type Demo = {
-  caption: string;
-  node: React.ReactNode;
-};
-
-const demos: Demo[] = [
-  { caption: 'Segmented control', node: <SegmentedControl /> },
-  { caption: 'Spring slider', node: <SpringSlider /> },
-  { caption: 'Copy chip', node: <CopyChip /> },
-];
-
-/**
- * Frames a few genuinely interactive component demos — the "I sweat the
- * details" proof. Hairline separation, no heavy cards. Each demo is a
- * self-contained client island wrapped in a staggered Reveal.
- */
-export default function PlaygroundSection() {
-  return (
-    <>
-      <Reveal>
-        <h2 className="mono-label">Playground</h2>
-      </Reveal>
-      <Reveal delay={0.05}>
-        <p className="measure mt-4 text-[clamp(1.125rem,2.4vw,1.625rem)] font-medium leading-snug text-ink">
-          Small interactions, built to feel right.
-        </p>
-      </Reveal>
-
-      <div className="mt-[clamp(2rem,6vh,4rem)] grid border-t border-white/10 lg:grid-cols-3">
-        {demos.map((demo, i) => (
-          <Reveal
-            key={demo.caption}
-            delay={i * 0.06}
-            className="border-b border-white/10 lg:border-b-0 lg:border-r lg:last:border-r-0"
-          >
-            <div className="flex min-h-48 flex-col justify-between gap-6 py-8 lg:px-8 lg:first:pl-0 lg:last:pr-0">
-              <div className="flex flex-1 items-center">{demo.node}</div>
-              <p className="mono-label">{demo.caption}</p>
-            </div>
-          </Reveal>
-        ))}
-      </div>
-    </>
-  );
-}
diff --git a/src/components/playground/SegmentedControl.tsx b/src/components/playground/SegmentedControl.tsx
deleted file mode 100644
index a5ee593..0000000
--- a/src/components/playground/SegmentedControl.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client';
-
-import { useId, useRef, useState } from 'react';
-import { motion, useReducedMotion } from 'motion/react';
-
-const OPTIONS = ['Design', 'Build', 'Ship'] as const;
-type Option = (typeof OPTIONS)[number];
-
-/**
- * A segmented control with a single acid-lime indicator that slides between
- * options. The indicator uses a shared `layoutId` so it physically travels
- * (springs) from one segment to the next; under reduced motion it jumps.
- *
- * Keyboard: roving tabindex — Left/Right (and Up/Down) move the selection,
- * Home/End jump to the ends. Implemented as an ARIA radiogroup.
- */
-export default function SegmentedControl() {
-  const reduce = useReducedMotion();
-  const [active, setActive] = useState<Option>('Build');
-  const groupId = useId();
-  const refs = useRef<(HTMLButtonElement | null)[]>([]);
-
-  const focusIndex = (i: number) => {
-    const clamped = (i + OPTIONS.length) % OPTIONS.length;
-    setActive(OPTIONS[clamped]);
-    refs.current[clamped]?.focus();
-  };
-
-  const onKeyDown = (e: React.KeyboardEvent, i: number) => {
-    switch (e.key) {
-      case 'ArrowRight':
-      case 'ArrowDown':
-        e.preventDefault();
-        focusIndex(i + 1);
-        break;
-      case 'ArrowLeft':
-      case 'ArrowUp':
-        e.preventDefault();
-        focusIndex(i - 1);
-        break;
-      case 'Home':
-        e.preventDefault();
-        focusIndex(0);
-        break;
-      case 'End':
-        e.preventDefault();
-        focusIndex(OPTIONS.length - 1);
-        break;
-    }
-  };
-
-  return (
-    <div
-      role="radiogroup"
-      aria-label="Workflow stage"
-      className="inline-flex rounded-full border border-white/10 bg-surface p-1"
-    >
-      {OPTIONS.map((opt, i) => {
-        const selected = opt === active;
-        return (
-          <button
-            key={opt}
-            ref={(el) => {
-              refs.current[i] = el;
-            }}
-            type="button"
-            role="radio"
-            aria-checked={selected}
-            tabIndex={selected ? 0 : -1}
-            onClick={() => setActive(opt)}
-            onKeyDown={(e) => onKeyDown(e, i)}
-            className="relative rounded-full px-4 py-1.5 text-sm font-medium transition-colors focus:outline-hidden focus-visible:ring-2 focus-visible:ring-accent/60"
-          >
-            {selected && (
-              <motion.span
-                layoutId={`seg-${groupId}`}
-                aria-hidden
-                className="absolute inset-0 rounded-full bg-accent"
-                transition={reduce ? { duration: 0 } : { type: 'spring', stiffness: 480, damping: 34 }}
-              />
-            )}
-            <span className={`relative z-10 ${selected ? 'text-dark' : 'text-muted'}`}>{opt}</span>
-          </button>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/src/components/playground/SpringSlider.tsx b/src/components/playground/SpringSlider.tsx
deleted file mode 100644
index b4c6819..0000000
--- a/src/components/playground/SpringSlider.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { motion, useMotionValue, useSpring, useTransform, useReducedMotion } from 'motion/react';
-
-const MIN = 0;
-const MAX = 100;
-
-/**
- * A draggable slider with a springy thumb that drives a live value readout and
- * an acid-lime fill. The thumb is a native-feeling custom control built on an
- * ARIA `slider` role so it is fully keyboard-operable (Arrow keys step by 1,
- * Shift+Arrow / PageUp/Down by 10, Home/End to the bounds).
- *
- * Reduced motion: the spring is collapsed to an instant follow so the thumb
- * tracks the pointer/keyboard with no overshoot.
- */
-export default function SpringSlider() {
-  const reduce = useReducedMotion();
-  const trackRef = useRef<HTMLDivElement>(null);
-  const [value, setValue] = useState(64);
-  const [dragging, setDragging] = useState(false);
-
-  // Fraction 0..1 of the current value, smoothed by a spring for the visual.
-  const pct = useMotionValue(value / MAX);
-  const springPct = useSpring(pct, { stiffness: 420, damping: 32, mass: 0.6 });
-  const visualPct = reduce ? pct : springPct;
-
-  const fillWidth = useTransform(visualPct, (p) => `${p * 100}%`);
-  const thumbLeft = useTransform(visualPct, (p) => `${p * 100}%`);
-
-  useEffect(() => {
-    pct.set(value / MAX);
-  }, [value, pct]);
-
-  const setFromClientX = (clientX: number) => {
-    const track = trackRef.current;
-    if (!track) return;
-    const rect = track.getBoundingClientRect();
-    const ratio = (clientX - rect.left) / rect.width;
-    const next = Math.round(MIN + Math.min(1, Math.max(0, ratio)) * (MAX - MIN));
-    setValue(next);
-  };
-
-  const startDrag = (e: React.PointerEvent) => {
-    (e.target as Element).setPointerCapture?.(e.pointerId);
-    setDragging(true);
-    setFromClientX(e.clientX);
-  };
-
-  const onMove = (e: React.PointerEvent) => {
-    if (!dragging) return;
-    setFromClientX(e.clientX);
-  };
-
-  const endDrag = () => setDragging(false);
-
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    let next = value;
-    switch (e.key) {
-      case 'ArrowRight':
-      case 'ArrowUp':
-        next = value + (e.shiftKey ? 10 : 1);
-        break;
-      case 'ArrowLeft':
-      case 'ArrowDown':
-        next = value - (e.shiftKey ? 10 : 1);
-        break;
-      case 'PageUp':
-        next = value + 10;
-        break;
-      case 'PageDown':
-        next = value - 10;
-        break;
-      case 'Home':
-        next = MIN;
-        break;
-      case 'End':
-        next = MAX;
-        break;
-      default:
-        return;
-    }
-    e.preventDefault();
-    setValue(Math.min(MAX, Math.max(MIN, next)));
-  };
-
-  return (
-    <div className="w-full max-w-xs select-none">
-      <div className="mb-4 flex items-baseline gap-2 font-display">
-        <span className="text-4xl font-bold tabular-nums text-ink">{value}</span>
-        <span className="text-sm text-muted">/ {MAX}</span>
-      </div>
-
-      <div
-        ref={trackRef}
-        onPointerDown={startDrag}
-        onPointerMove={onMove}
-        onPointerUp={endDrag}
-        onPointerCancel={endDrag}
-        className="relative h-10 cursor-pointer touch-none"
-      >
-        {/* Rail */}
-        <div className="absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-white/10" />
-        {/* Fill */}
-        <motion.div
-          aria-hidden
-          style={{ width: fillWidth }}
-          className="absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent"
-        />
-        {/* Thumb */}
-        <motion.div
-          role="slider"
-          aria-label="Value"
-          aria-valuemin={MIN}
-          aria-valuemax={MAX}
-          aria-valuenow={value}
-          tabIndex={0}
-          onKeyDown={onKeyDown}
-          style={{ left: thumbLeft }}
-          animate={reduce ? undefined : { scale: dragging ? 1.25 : 1 }}
-          transition={{ type: 'spring', stiffness: 500, damping: 28 }}
-          className="absolute top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-accent bg-dark shadow-[0_0_0_4px_rgba(198,255,61,0.12)] focus:outline-hidden focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-dark"
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/src/data/about.ts b/src/data/about.ts
index 058a776..34aa4d9 100644
--- a/src/data/about.ts
+++ b/src/data/about.ts
@@ -28,7 +28,6 @@ type AboutData = {
   education: Education[];
   skills: {
     technical: string[];
-    personal: string[];
   };
   interests: string[];
   languages: {
@@ -43,7 +42,7 @@ const about: AboutData = {
   location: 'Oslo, Norway',
   photo: '/bigSmile.JPEG',
   summary:
-    'I am a developer with experience from NAV IT and TV 2 Skole, with a focus on accessibility and user experience. I work with modern technologies such as React, TypeScript and Kotlin to develop responsive and user-friendly applications. My background in software development and design provides a solid foundation for delivering holistic solutions with the user in focus.',
+    'I am a developer with experience from NAV IT and TV 2 Skole, focused on accessibility and user experience. I work mostly in TypeScript and React, with Kotlin and Python where a project calls for them, and I design what I build as well as engineering it.',
 
   experience: [
     {
@@ -52,9 +51,9 @@ const about: AboutData = {
       location: 'Oslo',
       period: 'Jul 2024 — Present',
       details: [
-        'Frontend developer in Team Min side – a cross-functional platform team delivering platform services for microfrontends and notifications on nav.no.',
-        'Contribute to the maintenance and further development of the shared products Utbetalinger (Payments) and Dokumenter (Documents) for logged-in users.',
-        'Technologies: Astro.js, TypeScript, Kotlin, Kafka',
+        'I work in Team Min side, a cross-functional platform team behind the microfrontends and notifications on nav.no.',
+        'I maintain and develop the shared products Utbetalinger (Payments) and Dokumenter (Documents) for logged-in users.',
+        'Technologies: Astro, TypeScript, Kotlin, Kafka',
       ],
     },
     {
@@ -63,8 +62,8 @@ const about: AboutData = {
       location: 'Oslo',
       period: 'Jun 2023 — Aug 2023',
       details: [
-        'Led planning, design, and development of an internal registration app that replaced manual processes.',
-        'The solution is now NAV’s primary platform for event registration and management of internal events.',
+        'I led the planning, design, and development of an internal registration app that replaced manual processes.',
+        'It is now NAV’s primary platform for internal events.',
         'Technologies: Next.js, Kotlin/Ktor, PostgreSQL',
       ],
     },
@@ -74,19 +73,19 @@ const about: AboutData = {
       location: 'Hybrid',
       period: 'Mar 2023 — Jun 2024 (part-time)',
       details: [
-        'Advisor for Elevkanalen, identified and implemented measures in line with WCAG/EN301549.',
-        'Participated in planning and carried out user and accessibility testing for external clients, including DNB and Designit.',
-        'This experience strengthened my competence in test design, analysis, and concrete recommendations.',
+        'I advised Elevkanalen on accessibility, finding problems and fixing them to WCAG and EN 301 549.',
+        'I took part in planning and ran user and accessibility testing for external clients, including DNB and Designit.',
+        'I designed accessibility tests, ran them with users, and turned the findings into concrete recommendations.',
       ],
     },
     {
       title: 'Leader, Musikkom',
-      company: 'NTNU – EMIL student association',
+      company: 'NTNU — EMIL student association',
       location: 'Trondheim',
       period: 'Jan 2018 — Aug 2021',
       details: [
-        'Musikkom is a committee in the EMIL student association for Energy and Environment. Its purpose is to provide students interested in music with opportunities to further develop their interest alongside their studies.',
-        'As leader, I learned the importance of collaboration and communication, and what it means to take responsibility.',
+        'Musikkom is the music committee in EMIL, NTNU’s student association for Energy and Environment, for students who want to keep playing alongside their studies.',
+        'Leading it taught me collaboration and communication, and what it means to take responsibility for a group.',
       ],
     },
   ],
@@ -103,7 +102,7 @@ const about: AboutData = {
       institution: 'NTNU',
       location: 'Trondheim, Norway',
       period: 'Aug 2019 — Jun 2024',
-      details: ['Specialization: Software Systems'],
+      details: ['Specialisation: Software Systems'],
     },
     {
       degree: 'Energy and Environment, 5-year Master’s Programme',
@@ -121,26 +120,19 @@ const about: AboutData = {
 
   skills: {
     technical: [
-      'Astro.js',
-      'React.js',
+      'Astro',
+      'React',
       'Next.js',
       'TypeScript',
-      'JavaScript (ES5/ES6)',
+      'JavaScript',
       'CSS/SCSS',
       'Tailwind CSS',
       'DevOps',
-      'Starlight (Documentation framework)',
+      'Starlight',
       'Kotlin',
       'Java',
-      'Agile development in cross-functional teams',
-      'Web Content Accessibility Guidelines (WCAG)',
-    ],
-    personal: [
-      'Analytical and structured',
-      'Eager and willing to learn',
-      'Programming and problem-solving',
-      'Perseverance',
-      'Humble and approachable',
+      'Agile teamwork',
+      'WCAG',
     ],
   },
 
diff --git a/src/data/work.ts b/src/data/work.ts
index f780ade..7ecdc07 100644
--- a/src/data/work.ts
+++ b/src/data/work.ts
@@ -23,65 +23,98 @@ const ORDER = ['Context', 'My role', 'Problem', 'Approach', 'Result'] as const;
 
 const work: CaseStudy[] = [
   {
-    slug: 'be-my-guide',
-    title: 'Be My Guide',
+    slug: 'sonari',
+    title: 'Sonari',
     summary:
-      'A request-broadcast platform that pairs visually impaired Norwegians with nearby sighted volunteer guides for running, hiking, and cross-country skiing.',
+      'A text-to-speech layer that makes Claude Code usable with the screen off. Built for blind and low-vision developers: every session is read aloud in order, and a distinct sound tells you the moment a decision needs you.',
     year: '2026',
-    role: 'Solo full-stack — design and engineering',
-    tech: [
-      'Next.js 16',
-      'React 19',
-      'TypeScript (strict)',
-      'Tailwind CSS v4',
-      'Neon Postgres',
-      'Prisma',
-      'Auth.js v5',
-      'Web Push',
-      'Upstash Redis',
-      'Vercel BotID',
-      'Resend',
-      'Vitest',
+    role: 'Solo: design and engineering',
+    tech: ['Python', 'Swift', 'Claude Code hooks', 'launchd', 'Kokoro TTS', 'pytest'],
+    links: [{ label: 'GitHub', href: 'https://github.com/nimkimi/sonari' }],
+    sections: [
+      {
+        heading: 'Context',
+        body: 'Coding agents run in terminals that redraw constantly, and screen readers handle that badly. A blind developer can use the model but not the tool around it. Sonari is a macOS speech layer for Claude Code that reads each session aloud, in order. The goal is a full working session with the screen off.',
+      },
+      {
+        heading: 'My role',
+        body: 'I built it end to end: the daemon architecture, the sound vocabulary, the hotkey system, and the product decisions about what is worth saying out loud. Sound is the whole interface, so the design work here was picking earcons, verbosity levels, and wording that stays truthful about what the agent is doing.',
+      },
+      {
+        heading: 'Problem',
+        body: 'The hard part is trust in what you hear. Speech has to arrive in the order things happened, across several concurrent sessions, and it can never stall: a silent failure and a finished task sound identical. That makes liveness the core engineering problem. The interface also has to stay controllable mid-speech, because listening is slow and you constantly want to skip, repeat, or jump.',
+      },
+      {
+        heading: 'Approach',
+        body: 'A launchd-managed daemon owns the speech pipeline, and every Claude Code session feeds it through hooks; each session’s output is queued and spoken in the order it happened. Decisions get earcons, one sound per type, so a question registers before the words do. Answers go by option number. A small Swift helper intercepts the global hotkeys (stop, repeat, jump between sessions, jump to the open decision) at the OS level, so they work while speech is playing. The core runs on the stock macOS Python with no third-party packages, so an install cannot be broken by whatever Python arrives next; a neural voice is an optional add-on.',
+      },
+      {
+        heading: 'Result',
+        body: 'Sonari is public and installs from a Claude Code marketplace, and I run my own sessions through it. Most of the engineering went into the failures you would never see: the hotkey helper sounds an alarm if the speech daemon dies, and an update that fails to speak is kept unheard rather than dropped, so you catch up on it instead of missing it.',
+      },
     ],
+  },
+  {
+    slug: 'syncward',
+    title: 'syncward',
+    summary:
+      'Carries your whole Claude Code setup between machines as config-as-code in a git repo you own, guarded by a secret scanner that blocks the push instead of warning you.',
+    year: '2026',
+    role: 'Solo: design and engineering',
+    tech: ['TypeScript', 'Bun', 'Git', 'Shell', 'bun:test'],
     inProgress: true,
-    links: [{ label: 'GitHub', href: 'https://github.com/nimkimi/be-my-guide' }],
-    images: [
+    sections: [
       {
-        src: '/work/be-my-guide/landing.jpg',
-        alt: 'Be My Guide landing page with a hero photo of a runner on a forest trail and two role-based entry points: find a guide or become one.',
-        caption: 'Landing',
+        heading: 'Context',
+        body: 'An AI coding setup accumulates real value: settings, memory, skills, hooks, keybindings, an installed-plugin list. Carrying ~/.claude between machines by hand is tedious, and the folder sits next to API keys and tokens, so naive syncing is exactly how credentials end up in a git repo. syncward syncs the whole setup as config-as-code in a repository you own, with a scanner standing between your files and every push.',
+      },
+      {
+        heading: 'My role',
+        body: 'I designed the safety model first and let it constrain everything else: the scanner, the backup and restore path, the locking, and the shape of the CLI all follow from one rule, that a bad push has to be stopped by the tool rather than by me remembering to check.',
       },
       {
-        src: '/work/be-my-guide/feed.jpg',
-        alt: 'A guide’s request feed showing nearby open requests grouped by week, with activity filters for running, hiking, and cross-country skiing.',
-        caption: 'Guide feed',
+        heading: 'Problem',
+        body: 'One push with a token in it cannot be taken back: the token sits in the git history and the only fix left is rotating it. Divergence is the quieter risk: two machines drift, and a careless apply flattens one of them. A plugin manifest also executes, because a Claude Code plugin runs code at launch. Each of those needed a default that fails safe.',
+      },
+      {
+        heading: 'Approach',
+        body: 'Every push runs through a fail-closed secret scanner that reads exactly the bytes being committed. Anything that looks like a credential blocks the push; you opt out per finding with a reviewed fingerprint allowlist. An apply backs up first, takes a lock, refuses to silently clobber a machine that has diverged, and can be rolled back. syncward holds new plugins back until you approve them, and the installer is built to verify a published checksum before it touches your PATH. TypeScript on Bun, backed by about 1,500 tests.',
       },
       {
-        src: '/work/be-my-guide/request.jpg',
-        alt: 'A single request detail view a guide sees before offering to help, with activity, time, and the participant’s note.',
-        caption: 'Request detail',
+        heading: 'Result',
+        body: 'The build is complete: scanner, sync, backup and restore, doctor, and init. What remains before it goes public is release engineering, so the repo is private for now.',
       },
     ],
+  },
+  {
+    slug: 'dovetail',
+    title: 'dovetail',
+    summary:
+      'Catches the quality shortcuts an AI coding agent takes, in the seconds before the code lands. Two advisory hooks for Claude Code that can only advise: no blocking, no auto-edits, no network.',
+    year: '2026',
+    role: 'Solo: design and engineering',
+    tech: ['Python (stdlib only)', 'Claude Code hooks', 'pytest', 'JSONL telemetry'],
+    links: [{ label: 'GitHub', href: 'https://github.com/nimkimi/dovetail' }],
     sections: [
       {
         heading: 'Context',
-        body: 'Visually impaired Norwegians can run, ski, and hike — but only alongside a sighted guide, and finding one is informal and ad-hoc: word of mouth, Facebook groups, and club rosters that have not been updated in years. Plenty of sighted people would happily guide a couple of times a month, but there is no low-commitment way to plug in. Be My Guide is a request-broadcast matching app that closes that coordination gap for two real Oslo archetypes: a participant who just wants company for a 5K, and a volunteer who wants to help without joining a formal club.',
+        body: 'Written rules decay: instructions loaded at session start get buried as the context grows, and review tools only speak after the code exists. In my own sessions the agent would settle on the first solution that worked, not the best-integrated one. dovetail is a Claude Code plugin that raises the right concern at the moment code is written: that a guard is about to be shortened, that something two files over already does this, that a new dependency needs vetting.',
       },
       {
         heading: 'My role',
-        body: 'I am designing and building this solo, end to end — product scope, the accessibility-first UX, the data model, auth, and the real-time notification layer. It is currently in active development, with the data model, magic-link and Google auth, the request and matching flows, and admin guide-review under construction toward an MVP whose success bar is five approved guides and one real arrangement.',
+        body: 'One call shaped everything: the hooks advise and do nothing else, so the worst case is an ignorable line of text rather than a broken session. I am also the entire user base. dovetail runs in every one of my Claude Code sessions, so a bad decision turns into noise in my own workflow the same day, and the tuning loop runs on that: build a change, live with it, adjust against the telemetry.',
       },
       {
         heading: 'Problem',
-        body: 'The hardest design problem is trust and accessibility under low coordination friction: the experience has to meet WCAG 2.2 AA in both light and dark modes, work screen-reader-first for participants, and still feel calm rather than like a SaaS dashboard. The hardest engineering problem is fan-out — when a participant posts a request, every approved guide in that region with a matching activity type needs a push notification within seconds, without spamming anyone and without leaking personal contact details before both sides have agreed.',
+        body: 'The first failure mode is banner blindness: a block repeated on every edit becomes wallpaper, and on day one dovetail spoke on 71 percent of the edits it evaluated. The opposite failure is silence, the default for a hook that is only allowed to advise: one hook had been dead in production for weeks, because real session transcripts had a different shape than every test fixture assumed. Neither failure is visible without measurement.',
       },
       {
         heading: 'Approach',
-        body: 'On the design side I gave the two roles distinct entry points from the landing page, kept request creation to a single mobile-first form with native pickers for screen-reader friendliness, and deferred contact reveal until an arrangement is confirmed so phone and email stay private until they are needed. On the engineering side I modelled Users, Requests, Interests, and Arrangements in Postgres with the indexes the matching fan-out actually queries (region + verificationStatus for guide lookup), built notifications on the raw Web Push API with a hand-rolled service worker to avoid PWA bloat, gated every new guide behind manual admin review, and hardened the public endpoints with Upstash Redis rate limiting and Vercel BotID. Tokens and sessions run through Auth.js v5 with a database session strategy so sessions are revocable.',
+        body: 'dovetail is two Python hooks, standard library only, and they exit 0 on every path, so a crash in a hook can never take a session down with it. The author-time cue is proportional: silent on cosmetic and out-of-lane changes, a full teaching block once per fresh context, a one-line stand-in on repeats. The finish check fires only when the agent’s reply changed source files, and it names them. Every firing writes a metadata-only telemetry record, and a weekly job reads the log and flags drift on its own.',
       },
       {
         heading: 'Result',
-        body: 'The build is in progress, but the architecture is already proving the duality I care about: an accessibility-first, deliberately calm interface sitting on top of a real-time, abuse-resistant matching backend. It is a genuinely hard product — broadcast matching, push fan-out, contact-privacy, and strict a11y all at once — and it is the clearest current example of how I work as a developer who designs.',
+        body: 'The first month of telemetry, 8,953 firings, showed that one cue in ten was a reuse nudge on a file that already existed, right where it helped least; that cue now fires only on new files. The dead-hook incident became regression tests derived from real transcripts, and the suite is 115 tests now. The cues also reach the sub-sessions I hand implementation work to, which is where most of the code in a big change gets written; I verified that path live. The code is public and installs as a Claude Code plugin, though it stays tooling for my own setup first.',
       },
     ],
   },
@@ -89,9 +122,9 @@ const work: CaseStudy[] = [
     slug: 'concert-radar',
     title: 'Concert Radar',
     summary:
-      'A Spotify-connected concert discovery app that aggregates four ticketing sources and emails you when an artist you follow plays within your radius. MVP shipped — 123 tests passing.',
+      'Connects to your Spotify and watches four ticketing platforms, then emails you when an artist you actually listen to announces a show near you.',
     year: '2026',
-    role: 'Solo full-stack — design and engineering',
+    role: 'Solo full-stack: design and engineering',
     tech: [
       'Next.js 15',
       'TypeScript (strict)',
@@ -125,23 +158,23 @@ const work: CaseStudy[] = [
     sections: [
       {
         heading: 'Context',
-        body: 'Music fans miss concerts by artists they follow because announcements are scattered across Instagram, venue sites, and a handful of separate ticketing platforms. There is no single place to say "tell me when any of my Spotify artists plays within 100km of Bergen." Concert Radar aggregates Ticketmaster, Bandsintown, Songkick, and Billetto — the latter being the dominant Nordic platform — to cover the smaller venues and touring acts that announce on some sources but not others.',
+        body: 'Concert announcements are scattered across Instagram, venue pages, and ticketing platforms that each only know their own listings, so following an artist means following four services and still missing the show announced somewhere else. Concert Radar watches Ticketmaster, Bandsintown, Songkick, and Billetto, which carries many of the smaller Nordic venues, and lets you say “tell me when any of my Spotify artists plays within 100 km of Bergen.”',
       },
       {
         heading: 'My role',
-        body: 'I designed and built the whole MVP solo: the Spotify-native visual direction, the dashboard and concert flows, the data model, the multi-source aggregation backend, and the daily notification pipeline. I shipped all 15 planned vertical-slice tasks, then followed up with a v2 redesign and a dedicated mobile port with a bottom tab bar.',
+        body: 'I designed and built the whole thing: the Spotify-native visual direction, the dashboard and concert flows, the data model, the multi-source aggregation backend, and the daily notification pipeline. I shipped the MVP one working feature at a time, then followed up with a v2 redesign and a dedicated mobile port with a bottom tab bar.',
       },
       {
         heading: 'Problem',
-        body: 'Aggregating four independent APIs creates real engineering problems: the same show appears on multiple sources, free-text artist search produces false positives like "The 1975" matching "1975 Anniversary Concert," and a user with 200 tracked artists hitting four APIs could fire 800 calls at once. On the design side the dashboard had to feel like a native companion to Spotify — rich artist imagery, not a bare table — while staying fast and never emailing the same user about the same concert twice.',
+        body: 'Four independent APIs disagree with each other. The same show appears on several of them, free-text artist search matches “The 1975” to a “1975 Anniversary Concert,” and a user tracking 200 artists across four APIs could fire 800 calls at once. The dashboard had to feel like a native companion to Spotify, big artist imagery instead of a bare table, and stay fast. And it could never email the same person about the same concert twice.',
       },
       {
         heading: 'Approach',
-        body: 'I abstracted every source behind a shared SourceAdapter interface so adapters are independently unit-tested against recorded JSON fixtures, with no live network in CI, and put Songkick and Billetto behind feature flags. Cross-source duplicates collapse to one card with multiple source badges by grouping on (normalized artist, venue city, event date), using diacritic-stripping name normalization and Spotify popularity as a matching confidence signal. A daily Vercel Cron job syncs all users, writes per-source SyncLog rows so one failing source never aborts the run, and sends a Resend digest — with a unique (userId, concertId) constraint guaranteeing no concert is ever emailed twice. Spotify OAuth tokens are AES-256-GCM encrypted at rest behind a custom NextAuth adapter, distances use an inline Haversine, and concert times render in the venue local time zone.',
+        body: 'Each source sits behind a shared SourceAdapter interface, unit-tested against recorded JSON fixtures. CI never touches the network. Songkick and Billetto ship behind feature flags, so a misbehaving source can be switched off without a deploy. Cross-source duplicates collapse into one card with a badge per source, grouped on normalized artist, venue city, and event date, with diacritic-stripped names and Spotify popularity as a confidence signal. A daily Vercel cron job syncs every user instead of fanning out on demand, writes a SyncLog row per source so one failure never aborts the run, and sends a Resend digest; a unique (userId, concertId) constraint makes double-emailing impossible. Spotify OAuth tokens are AES-256-GCM encrypted at rest behind a custom NextAuth adapter, distances use an inline Haversine, and concert times render in the venue’s local time zone.',
       },
       {
         heading: 'Result',
-        body: 'The MVP shipped with 29 of 30 definition-of-done items complete and 123 tests passing across 17 files on a clean production build and 14 routes. It then earned a full v2 redesign — a marketing landing page, a hero-card dashboard, light and dark themes — plus a mobile port. It is my strongest proof of disciplined, test-first engineering paired with a coherent design system.',
+        body: 'The MVP shipped with 29 of its 30 planned scope items: 14 routes on a clean production build, 123 tests across 17 files. It then got a marketing landing page, a hero-card dashboard, light and dark themes, and the mobile port.',
       },
     ],
   },
@@ -149,30 +182,30 @@ const work: CaseStudy[] = [
     slug: 'nav-event-registration',
     title: 'NAV Internal Event Registration',
     summary:
-      'Led design and development of an internal event-registration app that replaced NAV’s manual processes and became the organisation’s primary tool for internal events.',
+      'The tool NAV uses to register and run internal events. I led the build as a summer intern, and it turned into a full-time job.',
     year: '2023',
     role: 'Lead designer & developer (summer internship)',
     tech: ['Next.js', 'TypeScript', 'Kotlin', 'Ktor', 'PostgreSQL'],
     sections: [
       {
         heading: 'Context',
-        body: 'During my 2023 summer internship at NAV IT — Norway’s Labour and Welfare Administration, one of the country’s largest public-sector tech organisations — internal events were still being organised through manual, spreadsheet-and-email processes that did not scale across teams. The internship brief was to design and build a better way to register for and manage internal events.',
+        body: 'NAV IT, the tech arm of Norway’s Labour and Welfare Administration, was organising internal events over spreadsheets and email in 2023, and that did not scale across one of the country’s largest public-sector tech organisations. My internship brief was to build a better way to register for and manage internal events.',
       },
       {
         heading: 'My role',
-        body: 'I led the planning, design, and development of the application as the internship’s driving contributor — owning the user flows and information design as well as the implementation across the stack. It was a genuinely full-stack role: a React/Next.js frontend talking to a Kotlin/Ktor backend over a PostgreSQL database.',
+        body: 'It was a full-stack role: I led the planning, design, and development, owning the user flows and information design as well as the implementation on both sides of the API.',
       },
       {
         heading: 'Problem',
-        body: 'A registration tool for a large organisation has to be obvious enough that any employee can sign up for an event in seconds, while giving organisers the structure they need to manage capacity and attendance. The design challenge was reducing a sprawling manual workflow into a few clear screens; the engineering challenge was a clean data model for events, registrations, and capacity behind a typed Kotlin API.',
+        body: 'Any employee had to be able to sign up for an event in seconds, without instructions, while organisers needed enough structure to manage capacity and attendance. The design job was compressing a sprawling manual workflow into a few obvious screens; the engineering job, a data model for events, registrations, and capacity behind a typed Kotlin API.',
       },
       {
         heading: 'Approach',
-        body: 'I designed the flows around the two distinct jobs — registering as an attendee and administering an event — and kept each path short and self-explanatory. On the backend I built a Ktor service in Kotlin over PostgreSQL with a schema centred on events, registrations, and capacity rules, and a Next.js frontend in TypeScript that consumed it. Working inside NAV’s platform meant building to public-sector expectations for reliability and accessibility from the start.',
+        body: 'I split the flows by job, registering as an attendee and administering an event, and kept each path short enough to need no explanation. The backend is a Kotlin/Ktor service over PostgreSQL; the frontend is React with Next.js in TypeScript. Working inside NAV’s platform meant meeting public-sector reliability and accessibility requirements from the start.',
       },
       {
         heading: 'Result',
-        body: 'The solution replaced the manual process and became NAV’s primary platform for registering and managing internal events — adoption well beyond a typical internship deliverable. It is the project that turned a summer internship into a full-time frontend role at NAV IT, where I now work on platform services for nav.no. (Internal tool — no public link.)',
+        body: 'It became NAV’s primary platform for internal events, more adoption than a summer project usually gets, and it turned the internship into a full-time frontend role at NAV IT, where I now work on platform services for nav.no. It is an internal tool, so there is no public link.',
       },
     ],
   },
diff --git a/src/lib/site.ts b/src/lib/site.ts
index 0ef8b0f..8c0f6a4 100644
--- a/src/lib/site.ts
+++ b/src/lib/site.ts
@@ -3,7 +3,7 @@ export const SITE_AUTHOR = 'Nima Hakimi';
 export const SITE_ROLE = 'Developer & AI Engineer';
 export const SITE_TITLE = `${SITE_AUTHOR} — ${SITE_ROLE}`;
 export const SITE_DESCRIPTION =
-  'Portfolio of Nima Hakimi, a developer and AI engineer building accessible, high-performance web applications.';
+  'Portfolio of Nima Hakimi, a developer and AI engineer building accessible, expressive interfaces for the web.';
 export const SITE_KEYWORDS = ['Nima Hakimi', 'Developer', 'AI Engineer', 'Next.js', 'React', 'Oslo'];
 export const SITE_EMAIL = 'nima@hackimi.dev';
 export const SITE_LOCATION = {
diff --git a/src/lib/validation.ts b/src/lib/validation.ts
index ed0d315..e9ec011 100644
--- a/src/lib/validation.ts
+++ b/src/lib/validation.ts
@@ -1,10 +1,12 @@
 import { z } from 'zod';
 
+// Every rule carries its own message: zod's defaults ("Too small: expected
+// string to have >=1 characters") would otherwise render verbatim in the form.
 export const contactSchema = z.object({
-  name: z.string().trim().min(1).max(100),
-  email: z.string().trim().email(),
-  subject: z.string().trim().min(1).max(120),
-  message: z.string().trim().min(1).max(5000),
+  name: z.string().trim().min(1, 'Add your name.').max(100, 'Keep your name under 100 characters.'),
+  email: z.string().trim().email('Enter a valid email address.'),
+  subject: z.string().trim().min(1, 'Add a subject.').max(120, 'Keep the subject under 120 characters.'),
+  message: z.string().trim().min(1, 'Write a message.').max(5000, 'Keep the message under 5,000 characters.'),
 });
 
 export type ContactInput = z.infer<typeof contactSchema>;
diff --git a/tests/components/PlaygroundSection.test.tsx b/tests/components/PlaygroundSection.test.tsx
deleted file mode 100644
index 752fb85..0000000
--- a/tests/components/PlaygroundSection.test.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-
-import PlaygroundSection from '@/components/playground/PlaygroundSection';
-
-/**
- * Composition / smoke test for the Playground section wrapper.
- *
- * PlaygroundSection frames three self-contained interactive demos
- * (SegmentedControl, SpringSlider, CopyChip) under a "Playground" heading.
- * The inner behaviour of each demo is covered in
- * tests/components/playground.test.tsx, so here we only assert that the
- * section composes the heading, intro copy, captions and one distinctive
- * landmark element from each demo — not their internals.
- *
- * The demos are `motion/react` client islands relying on matchMedia; the
- * jsdom setup (tests/setup/jsdom-setup.ts) already stubs that, so the tree
- * renders in full without extra mocking.
- */
-describe('PlaygroundSection', () => {
-  it('renders the Playground heading and intro copy', () => {
-    render(<PlaygroundSection />);
-
-    const heading = screen.getByRole('heading', { level: 2 });
-    expect(heading).toHaveTextContent('Playground');
-    expect(screen.getByText('Small interactions, built to feel right.')).toBeInTheDocument();
-  });
-
-  it('composes all three interactive demos', () => {
-    render(<PlaygroundSection />);
-
-    // SegmentedControl — its ARIA radiogroup.
-    expect(screen.getByRole('radiogroup', { name: 'Workflow stage' })).toBeInTheDocument();
-
-    // SpringSlider — its ARIA slider thumb.
-    expect(screen.getByRole('slider', { name: 'Value' })).toBeInTheDocument();
-
-    // CopyChip — its copy button.
-    expect(screen.getByRole('button', { name: /^Copy / })).toBeInTheDocument();
-  });
-
-  it('renders a caption for each demo', () => {
-    render(<PlaygroundSection />);
-
-    expect(screen.getByText('Segmented control')).toBeInTheDocument();
-    expect(screen.getByText('Spring slider')).toBeInTheDocument();
-    expect(screen.getByText('Copy chip')).toBeInTheDocument();
-  });
-});
diff --git a/tests/components/SiteNav.test.tsx b/tests/components/SiteNav.test.tsx
index 9ea5b2b..5dba272 100644
--- a/tests/components/SiteNav.test.tsx
+++ b/tests/components/SiteNav.test.tsx
@@ -17,7 +17,6 @@ vi.mock('next/navigation', () => ({
 const NAV_ITEMS = [
   { label: 'Work', href: '/work' },
   { label: 'About', href: '/about' },
-  { label: 'Playground', href: '/#playground' },
   { label: 'Contact', href: '/contact' },
 ];
 
@@ -45,6 +44,11 @@ describe('SiteNav', () => {
     }
   });
 
+  it('does not render a Playground link (section removed 2026-08)', () => {
+    render(<SiteNav />);
+    expect(screen.queryByRole('link', { name: 'Playground' })).toBeNull();
+  });
+
   it('renders the mobile-panel nav links with correct hrefs once opened', async () => {
     const user = userEvent.setup();
     render(<SiteNav />);
diff --git a/tests/components/playground.test.tsx b/tests/components/playground.test.tsx
deleted file mode 100644
index 649e4c5..0000000
--- a/tests/components/playground.test.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import CopyChip from '@/components/playground/CopyChip';
-import SegmentedControl from '@/components/playground/SegmentedControl';
-import SpringSlider from '@/components/playground/SpringSlider';
-
-describe('SegmentedControl', () => {
-  it('renders all segment options inside a radiogroup', () => {
-    render(<SegmentedControl />);
-
-    const group = screen.getByRole('radiogroup', { name: 'Workflow stage' });
-    expect(group).toBeInTheDocument();
-
-    const radios = screen.getAllByRole('radio');
-    expect(radios).toHaveLength(3);
-    expect(radios.map((r) => r.textContent)).toEqual(['Design', 'Build', 'Ship']);
-  });
-
-  it('defaults to "Build" being selected', () => {
-    render(<SegmentedControl />);
-
-    expect(screen.getByRole('radio', { name: 'Build' })).toHaveAttribute('aria-checked', 'true');
-    expect(screen.getByRole('radio', { name: 'Design' })).toHaveAttribute('aria-checked', 'false');
-    expect(screen.getByRole('radio', { name: 'Ship' })).toHaveAttribute('aria-checked', 'false');
-  });
-
-  it('updates the active selection when a different segment is clicked', async () => {
-    const user = userEvent.setup();
-    render(<SegmentedControl />);
-
-    await user.click(screen.getByRole('radio', { name: 'Ship' }));
-
-    expect(screen.getByRole('radio', { name: 'Ship' })).toHaveAttribute('aria-checked', 'true');
-    expect(screen.getByRole('radio', { name: 'Build' })).toHaveAttribute('aria-checked', 'false');
-  });
-
-  it('moves the selection with arrow keys (roving tabindex radiogroup)', async () => {
-    const user = userEvent.setup();
-    render(<SegmentedControl />);
-
-    // The selected radio ("Build") is the only one in the tab order.
-    await user.tab();
-    expect(screen.getByRole('radio', { name: 'Build' })).toHaveFocus();
-
-    await user.keyboard('{ArrowRight}');
-    expect(screen.getByRole('radio', { name: 'Ship' })).toHaveAttribute('aria-checked', 'true');
-    expect(screen.getByRole('radio', { name: 'Ship' })).toHaveFocus();
-
-    // Arrow wraps around from the end back to the start.
-    await user.keyboard('{ArrowRight}');
-    expect(screen.getByRole('radio', { name: 'Design' })).toHaveAttribute('aria-checked', 'true');
-
-    await user.keyboard('{ArrowLeft}');
-    expect(screen.getByRole('radio', { name: 'Ship' })).toHaveAttribute('aria-checked', 'true');
-  });
-
-  it('jumps to the bounds with Home and End', async () => {
-    const user = userEvent.setup();
-    render(<SegmentedControl />);
-
-    await user.tab();
-    await user.keyboard('{End}');
-    expect(screen.getByRole('radio', { name: 'Ship' })).toHaveAttribute('aria-checked', 'true');
-
-    await user.keyboard('{Home}');
-    expect(screen.getByRole('radio', { name: 'Design' })).toHaveAttribute('aria-checked', 'true');
-  });
-});
-
-describe('SpringSlider', () => {
-  it('renders a slider with sensible ARIA bounds and the default value', () => {
-    render(<SpringSlider />);
-
-    const slider = screen.getByRole('slider', { name: 'Value' });
-    expect(slider).toHaveAttribute('aria-valuemin', '0');
-    expect(slider).toHaveAttribute('aria-valuemax', '100');
-    expect(slider).toHaveAttribute('aria-valuenow', '64');
-  });
-
-  it('shows the current value in the readout', () => {
-    render(<SpringSlider />);
-    expect(screen.getByText('64')).toBeInTheDocument();
-  });
-
-  it('increments / decrements by 1 with arrow keys and updates the readout', async () => {
-    const user = userEvent.setup();
-    render(<SpringSlider />);
-
-    const slider = screen.getByRole('slider', { name: 'Value' });
-    slider.focus();
-
-    await user.keyboard('{ArrowRight}');
-    expect(slider).toHaveAttribute('aria-valuenow', '65');
-    expect(screen.getByText('65')).toBeInTheDocument();
-
-    await user.keyboard('{ArrowLeft}{ArrowLeft}');
-    expect(slider).toHaveAttribute('aria-valuenow', '63');
-    expect(screen.getByText('63')).toBeInTheDocument();
-  });
-
-  it('steps by 10 with PageUp/PageDown and clamps at the bounds with Home/End', async () => {
-    const user = userEvent.setup();
-    render(<SpringSlider />);
-
-    const slider = screen.getByRole('slider', { name: 'Value' });
-    slider.focus();
-
-    await user.keyboard('{PageUp}');
-    expect(slider).toHaveAttribute('aria-valuenow', '74');
-
-    await user.keyboard('{End}');
-    expect(slider).toHaveAttribute('aria-valuenow', '100');
-    expect(screen.getByText('100')).toBeInTheDocument();
-
-    // Already at max — does not exceed it.
-    await user.keyboard('{ArrowUp}');
-    expect(slider).toHaveAttribute('aria-valuenow', '100');
-
-    await user.keyboard('{Home}');
-    expect(slider).toHaveAttribute('aria-valuenow', '0');
-    expect(screen.getByText('0')).toBeInTheDocument();
-
-    // Already at min — does not go below it.
-    await user.keyboard('{ArrowDown}');
-    expect(slider).toHaveAttribute('aria-valuenow', '0');
-  });
-});
-
-describe('CopyChip', () => {
-  const VALUE = 'hakimi.nima1@gmail.com';
-
-  // jsdom does not implement navigator.clipboard, and user-event v14's
-  // `setup()` installs its own clipboard stub — so the mock must be applied
-  // *after* setup() (and right before render) to be the one the component hits.
-  const mockClipboard = () => {
-    const writeText = vi.fn().mockResolvedValue(undefined);
-    Object.defineProperty(navigator, 'clipboard', {
-      configurable: true,
-      writable: true,
-      value: { writeText },
-    });
-    return writeText;
-  };
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('renders the value and an idle "Copy" label', () => {
-    render(<CopyChip />);
-
-    expect(screen.getByText(VALUE)).toBeInTheDocument();
-    expect(screen.getByText('Copy')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: `Copy ${VALUE}` })).toBeInTheDocument();
-  });
-
-  it('copies the value to the clipboard and shows the copied state on click', async () => {
-    const user = userEvent.setup();
-    const writeText = mockClipboard();
-    render(<CopyChip />);
-
-    await user.click(screen.getByRole('button'));
-
-    expect(writeText).toHaveBeenCalledTimes(1);
-    expect(writeText).toHaveBeenCalledWith(VALUE);
-
-    // Copied state is driven directly by React state (not gated by the
-    // AnimatePresence cross-fade): the button relabels and the live region
-    // announces. Assert those rather than the animated label swap.
-    expect(await screen.findByRole('button', { name: 'Copied to clipboard' })).toBeInTheDocument();
-    expect(screen.getByText('Copied to clipboard')).toBeInTheDocument();
-  });
-
-  it('reverts to the idle state after the 1.5s timer elapses', async () => {
-    vi.useFakeTimers();
-    mockClipboard();
-    render(<CopyChip />);
-
-    // Use fireEvent (no internal user-event timers to deadlock the fake clock)
-    // and flush the awaited clipboard promise so `copied` flips to true.
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button'));
-    });
-    expect(screen.getByRole('button', { name: 'Copied to clipboard' })).toBeInTheDocument();
-
-    // The 1.5s timer flips `copied` back to false: the button reverts.
-    await act(async () => {
-      vi.advanceTimersByTime(1500);
-    });
-    expect(screen.getByRole('button', { name: `Copy ${VALUE}` })).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Copied to clipboard' })).not.toBeInTheDocument();
-  });
-
-  it('still flashes the copied state even if the clipboard write rejects', async () => {
-    const user = userEvent.setup();
-    const writeText = mockClipboard();
-    writeText.mockRejectedValueOnce(new Error('blocked'));
-    render(<CopyChip />);
-
-    await user.click(screen.getByRole('button'));
-
-    expect(writeText).toHaveBeenCalledWith(VALUE);
-    expect(await screen.findByRole('button', { name: 'Copied to clipboard' })).toBeInTheDocument();
-  });
-});
diff --git a/tests/components/work-components.test.tsx b/tests/components/work-components.test.tsx
index 7006d8a..f24b528 100644
--- a/tests/components/work-components.test.tsx
+++ b/tests/components/work-components.test.tsx
@@ -99,7 +99,9 @@ describe('WorkRow', () => {
   it('works with a real case from data/work', () => {
     const real = work[0];
     render(<WorkRow c={real} index={0} />);
-    expect(screen.getByText(real.title)).toBeInTheDocument();
+    // Image-less cases render the title twice: the row name plus the
+    // gradient-tile watermark. At least one is enough here.
+    expect(screen.getAllByText(real.title).length).toBeGreaterThanOrEqual(1);
     const link = screen.getByRole('link', { name: `View case study: ${real.title}` });
     expect(link).toHaveAttribute('href', `/work/${real.slug}`);
   });
diff --git a/tests/integration/ContactClient.test.tsx b/tests/integration/ContactClient.test.tsx
index fc704fb..cb07174 100644
--- a/tests/integration/ContactClient.test.tsx
+++ b/tests/integration/ContactClient.test.tsx
@@ -176,7 +176,7 @@ describe('ContactClient — top-level error message', () => {
     // error to assistive tech — exactly one role="alert" on the page now.
     const alerts = screen.getAllByRole('alert');
     expect(alerts).toHaveLength(1);
-    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+    expect(screen.getByText('Message not sent')).toBeInTheDocument();
   });
 });
 
@@ -259,7 +259,9 @@ describe('ContactClient — reCAPTCHA widget', () => {
     expect(script).toHaveAttribute('data-src', 'https://www.google.com/recaptcha/api.js');
 
     // The "not configured" fallback is absent when a key exists.
-    expect(screen.queryByText('reCAPTCHA is not configured.')).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('The form is unavailable right now. Email me at nima@hackimi.dev instead.')
+    ).not.toBeInTheDocument();
   });
 
   it('skips the widget/script and shows a not-configured notice when site key is empty', () => {
@@ -268,7 +270,9 @@ describe('ContactClient — reCAPTCHA widget', () => {
 
     expect(container.querySelector('.g-recaptcha')).toBeNull();
     expect(screen.queryByTestId('next-script')).not.toBeInTheDocument();
-    expect(screen.getByText('reCAPTCHA is not configured.')).toBeInTheDocument();
+    expect(
+      screen.getByText('The form is unavailable right now. Email me at nima@hackimi.dev instead.')
+    ).toBeInTheDocument();
   });
 });
 
@@ -289,7 +293,7 @@ describe('ContactClient — toast across successive submissions', () => {
     setState({ status: 'error', message: 'Could not send your message right now. Please try again.' });
     rerender(<ContactClient siteKey="test-site-key" />);
 
-    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+    expect(screen.getByText('Message not sent')).toBeInTheDocument();
     expect(screen.queryByText('Message sent')).not.toBeInTheDocument();
     expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'assertive');
     expect(screen.queryByRole('status')).not.toBeInTheDocument();
diff --git a/tests/integration/pages.test.tsx b/tests/integration/pages.test.tsx
index ae8b700..85446a9 100644
--- a/tests/integration/pages.test.tsx
+++ b/tests/integration/pages.test.tsx
@@ -16,8 +16,8 @@ import { SITE_AUTHOR } from '@/lib/site';
  *   const ui = await CasePage({ params: Promise.resolve({ slug }) });
  *   render(ui);
  *
- * The pages pull in client islands (Reveal, MagneticButton, the Playground
- * demos, WorkRow). These use `motion/react` + IntersectionObserver/matchMedia,
+ * The pages pull in client islands (Reveal, MagneticButton, WorkRow). These
+ * use `motion/react` + IntersectionObserver/matchMedia,
  * all of which the jsdom setup (tests/setup/jsdom-setup.ts) already stubs, so
  * the trees render in full under jsdom without extra mocking. The only mock
  * required is `next/navigation`'s `notFound`, which we make a throwing spy so
@@ -44,15 +44,20 @@ describe('Home page (/)', () => {
     expect(heading).toHaveTextContent('Nima Hakimi');
   });
 
-  it('renders the "Selected Work" section and the first project title', async () => {
+  it('renders the "Selected work" section and the first project title', async () => {
     const Home = (await import('@/app/page')).default;
     render(<Home />);
 
-    expect(screen.getByText('Selected Work')).toBeInTheDocument();
-    // Every case from the data layer gets a WorkRow link on the home page.
-    for (const c of work) {
+    expect(screen.getByText('Selected work')).toBeInTheDocument();
+    // Home is a curated cut: the top three cases get rows, the rest live only
+    // on /work behind the "All work" link.
+    for (const c of work.slice(0, 3)) {
       expect(screen.getByRole('link', { name: `View case study: ${c.title}` })).toBeInTheDocument();
     }
+    for (const c of work.slice(3)) {
+      expect(screen.queryByRole('link', { name: `View case study: ${c.title}` })).toBeNull();
+    }
+    expect(screen.getByRole('link', { name: /all work/i })).toHaveAttribute('href', '/work');
   });
 
   it('exports absolute name-led home metadata', async () => {
@@ -69,7 +74,7 @@ describe('About page (/about)', () => {
     render(<About />);
 
     const heading = screen.getByRole('heading', { level: 1 });
-    expect(heading).toHaveTextContent('I’m a frontend developer');
+    expect(heading).toHaveTextContent('I’m a developer and AI engineer');
     expect(heading).toHaveTextContent('designer’s');
 
     // The intro paragraph interpolates the location from the data layer.
@@ -93,7 +98,7 @@ describe('About page (/about)', () => {
     const About = (await import('@/app/about/page')).default;
     render(<About />);
 
-    // Some skills (e.g. "Astro.js", "Kotlin") also appear as experience tech
+    // Some skills (e.g. "Astro", "Kotlin") also appear as experience tech
     // tags elsewhere on the page, so the same label can occur more than once.
     for (const skill of about.skills.technical) {
       expect(screen.getAllByText(skill).length).toBeGreaterThan(0);
@@ -113,7 +118,16 @@ describe('Work list page (/work)', () => {
     render(<Work />);
 
     const heading = screen.getByRole('heading', { level: 1 });
-    expect(heading).toHaveTextContent('Selected Work');
+    expect(heading).toHaveTextContent('Selected work');
+  });
+
+  it('renders an on-brand 404 page with routes back in', async () => {
+    const NotFound = (await import('@/app/not-found')).default;
+    render(<NotFound />);
+
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('This page doesn’t exist.');
+    expect(screen.getByRole('link', { name: 'Back home' })).toHaveAttribute('href', '/');
+    expect(screen.getByRole('link', { name: /all work/i })).toHaveAttribute('href', '/work');
   });
 
   it('renders one case-study link per entry in data/work', async () => {
diff --git a/tests/server/contact-action.test.ts b/tests/server/contact-action.test.ts
index 8741787..c68e1e2 100644
--- a/tests/server/contact-action.test.ts
+++ b/tests/server/contact-action.test.ts
@@ -51,7 +51,7 @@ describe('submitContact', () => {
     const result = await submitContact(initialContactState, fd);
 
     expect(result.status).toBe('error');
-    expect(result.message).toBe('Please confirm you are not a robot and try again.');
+    expect(result.message).toBe('Confirm you’re not a robot and try again.');
     expect(result.values).toEqual(VALID);
     expect(sendMailMock).not.toHaveBeenCalled();
   });
@@ -67,7 +67,7 @@ describe('submitContact', () => {
     expect(result.fieldErrors).toBeDefined();
     expect(Object.keys(result.fieldErrors ?? {}).sort()).toEqual(['email', 'message', 'name', 'subject']);
     // No formErrors for these field-level issues -> falls back to default message.
-    expect(result.message).toBe('Please correct the highlighted fields and resend your message.');
+    expect(result.message).toBe('Fix the highlighted fields and send again.');
     expect(result.values).toEqual({ name: '', email: '', subject: '', message: '' });
     expect(sendMailMock).not.toHaveBeenCalled();
   });
@@ -97,6 +97,23 @@ describe('submitContact', () => {
     expect(sendMailMock).toHaveBeenCalledTimes(2);
   });
 
+  it('sends the visitor auto-reply in English, in the site voice', async () => {
+    verifyRecaptchaMock.mockResolvedValue(true);
+    sendMailMock.mockResolvedValue(undefined as unknown as void);
+
+    await submitContact(initialContactState, buildFormData(VALID));
+
+    // The auto-reply is the sendMail call addressed to the visitor.
+    const autoReply = sendMailMock.mock.calls.find(([, to]) => to === VALID.email);
+    expect(autoReply).toBeTruthy();
+    const [subject, , body] = autoReply as [string, string, string];
+    expect(subject).toBe('Thanks for your message');
+    expect(body).toContain('Hi Ada Lovelace,');
+    // No Norwegian may leak into anything a visitor receives (the auto-reply
+    // shipped in Norwegian on an otherwise all-English site until 2026-08).
+    expect(`${subject} ${body}`).not.toMatch(/Hei |Takk |vennlig|Svar til/);
+  });
+
   it('falls back to recaptchaToken when g-recaptcha-response is absent', async () => {
     verifyRecaptchaMock.mockResolvedValue(false);
 
diff --git a/tests/unit/about.test.ts b/tests/unit/about.test.ts
index 6c5bd46..ac1cb79 100644
--- a/tests/unit/about.test.ts
+++ b/tests/unit/about.test.ts
@@ -33,10 +33,6 @@ describe('about data — required arrays are non-empty', () => {
     expect(Array.isArray(about.skills.technical)).toBe(true);
     expect(about.skills.technical.length).toBeGreaterThan(0);
   });
-  it('skills.personal is a non-empty array', () => {
-    expect(Array.isArray(about.skills.personal)).toBe(true);
-    expect(about.skills.personal.length).toBeGreaterThan(0);
-  });
   it('interests is a non-empty array', () => {
     expect(Array.isArray(about.interests)).toBe(true);
     expect(about.interests.length).toBeGreaterThan(0);
diff --git a/tests/unit/harness-deck.test.ts b/tests/unit/harness-deck.test.ts
index 74a95b4..c258cdd 100644
--- a/tests/unit/harness-deck.test.ts
+++ b/tests/unit/harness-deck.test.ts
@@ -55,4 +55,20 @@ describe('talk deck is self-contained', () => {
   it('references no remote origin', () => {
     expect(deck).not.toMatch(/https?:\/\//i);
   });
+
+  // 2026-08: the presenter-notes panel (n) and the speech feature (t) were
+  // removed; the deck is navigation-only with a key hint on the first slide.
+  it('carries no notes panel, speaker notes, or speech feature', () => {
+    expect(deck).not.toMatch(/aside class="notes"|id="notes"|speechSynthesis/);
+    expect(deck).not.toMatch(/case 'n'|case 't'/);
+  });
+
+  it('shows a lowkey hotkey hint on the first slide only', () => {
+    expect(deck.match(/class="keys"/g)).toHaveLength(1);
+    // The hint lives inside slide 1's section, before slide 2 begins.
+    const s1 = deck.slice(deck.indexOf('id="s1"'), deck.indexOf('id="s2"'));
+    expect(s1).toContain('class="keys"');
+    expect(s1).toMatch(/fullskjerm/i);
+    expect(s1).toMatch(/Esc/);
+  });
 });
diff --git a/tests/unit/metadata.test.ts b/tests/unit/metadata.test.ts
index 3d02146..dacdb0b 100644
--- a/tests/unit/metadata.test.ts
+++ b/tests/unit/metadata.test.ts
@@ -210,12 +210,12 @@ describe('entity graph builders', () => {
   });
 
   it('BreadcrumbList walks Home → Work → case', () => {
-    const ld = buildBreadcrumbJsonLd('Be My Guide', 'be-my-guide');
+    const ld = buildBreadcrumbJsonLd('Sonari', 'sonari');
     expect(ld['@type']).toBe('BreadcrumbList');
     expect(ld.itemListElement).toEqual([
       { '@type': 'ListItem', 'position': 1, 'name': 'Home', 'item': SITE_URL },
       { '@type': 'ListItem', 'position': 2, 'name': 'Work', 'item': `${SITE_URL}/work` },
-      { '@type': 'ListItem', 'position': 3, 'name': 'Be My Guide', 'item': `${SITE_URL}/work/be-my-guide` },
+      { '@type': 'ListItem', 'position': 3, 'name': 'Sonari', 'item': `${SITE_URL}/work/sonari` },
     ]);
   });
 });
diff --git a/tests/unit/validation.test.ts b/tests/unit/validation.test.ts
index 01898ee..0cbacc9 100644
--- a/tests/unit/validation.test.ts
+++ b/tests/unit/validation.test.ts
@@ -107,3 +107,33 @@ describe('contactSchema', () => {
     }
   });
 });
+
+describe('error messages are human-written, never zod defaults', () => {
+  it('empty name explains itself', () => {
+    const result = contactSchema.safeParse({ ...validInput, name: '' });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.flatten().fieldErrors.name?.[0]).toBe('Add your name.');
+    }
+  });
+
+  it('a bad email explains itself', () => {
+    const result = contactSchema.safeParse({ ...validInput, email: 'not-an-email' });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.flatten().fieldErrors.email?.[0]).toBe('Enter a valid email address.');
+    }
+  });
+
+  it('no field error ever leaks zod default phrasing', () => {
+    const result = contactSchema.safeParse({ name: '', email: 'x', subject: '', message: '' });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const all = Object.values(result.error.flatten().fieldErrors).flat();
+      expect(all.length).toBeGreaterThan(0);
+      for (const message of all) {
+        expect(message).not.toMatch(/too small|expected string|invalid input|invalid string/i);
+      }
+    }
+  });
+});
diff --git a/tests/unit/work.test.ts b/tests/unit/work.test.ts
index 3f46f2a..80c80b6 100644
--- a/tests/unit/work.test.ts
+++ b/tests/unit/work.test.ts
@@ -2,8 +2,31 @@ import { describe, it, expect } from 'vitest';
 import work, { type CaseStudy } from '../../src/data/work';
 
 describe('work data', () => {
-  it('has the three flagship slugs', () => {
-    expect(work.map((w) => w.slug).sort()).toEqual(['be-my-guide', 'concert-radar', 'nav-event-registration'].sort());
+  it('has the five flagship slugs in display order', () => {
+    // Order is deliberate: newest, strongest signal first (WorkRow numbers rows).
+    expect(work.map((w) => w.slug)).toEqual([
+      'sonari',
+      'syncward',
+      'dovetail',
+      'concert-radar',
+      'nav-event-registration',
+    ]);
+  });
+
+  it('dovetail links to its public GitHub repo', () => {
+    const dovetail = work.find((w) => w.slug === 'dovetail');
+    expect(dovetail?.links?.map((l) => l.href)).toContain('https://github.com/nimkimi/dovetail');
+  });
+
+  it('syncward is private pre-release: no outbound links, flagged in progress', () => {
+    const syncward = work.find((w) => w.slug === 'syncward');
+    expect(syncward?.inProgress).toBe(true);
+    expect(syncward?.links ?? []).toEqual([]);
+  });
+
+  it('sonari links to its public GitHub repo', () => {
+    const sonari = work.find((w) => w.slug === 'sonari');
+    expect(sonari?.links?.map((l) => l.href)).toContain('https://github.com/nimkimi/sonari');
   });
   it('each case has required fields and the five ordered sections', () => {
     const req = ['Context', 'My role', 'Problem', 'Approach', 'Result'];