qualia-framework 4.5.0 → 5.3.0

package/skills/qualia-polish-loop/SKILL.md

@@ -0,0 +1,201 @@
+---
+name: qualia-polish-loop
+description: "Autonomous visual-polish loop — screenshots a live URL at three viewports, scores 8 design dimensions against the rubric using vision, fixes issues in the codebase, re-screenshots, loops until every dimension scores ≥ 3 or the kill-switch fires. Trigger on 'polish loop', 'visual loop', 'screenshot polish', 'visual QA loop', 'fix what I see', 'make it look right', 'iterate on the design until it's correct'. v5.1 flagship — closes the design-iteration churn friction."
+allowed-tools:
+  - Bash
+  - Read
+  - Write
+  - Edit
+  - Grep
+  - Glob
+  - Agent
+argument-hint: "{url} [--brief PATH] [--max 8] [--viewports 375,768,1440] [--ref PATH] [--budget 100000]"
+---
+
+# /qualia-polish-loop — Autonomous Visual-Polish Loop
+
+See its own work. Fix its own work. Stop only when correct.
+
+## What it does
+
+Takes a URL + design brief. Screenshots at 3 viewports (mobile / tablet / desktop). Spawns a vision evaluator that scores 8 dimensions of `rules/design-rubric.md` against the brief with cited evidence. Spawns up to 3 fix-builders in parallel for the top issues. Re-screenshots. Loops until all dimensions ≥ 3 or the kill-switch trips (regression, budget, or max iterations).
+
+Different from `/qualia-polish`: that one is read+edit+slop-detect, single pass. This one is **see+edit+verify+repeat** with a real loop and real screenshots.
+
+## When to use
+
+- After `/qualia-build` or `/qualia-verify` when visual issues remain that text-based slop-detect can't catch (mobile-only breakage, motion missing, hero-video framing)
+- When the user says "it doesn't look right" / "fix what I see" / "the mobile version is broken"
+- As an opt-in upgrade to `/qualia-polish --redesign` Stage 4 (vision loop)
+- Before `/qualia-ship` for a final visual QA pass
+
+## Pre-flight (sequential, every invocation)
+
+```bash
+node ~/.claude/bin/qualia-ui.js banner polish
+```
+
+Run these in order. Halt on the first failure.
+
+| Gate | Check | If fail |
+|---|---|---|
+| Substrate | `rules/design-rubric.md`, `rules/design-laws.md` exist | Run `npx qualia install` |
+| Brief | `--brief` PATH if provided, else `.planning/DESIGN.md`, else PRODUCT.md | If none, HALT: "No design brief found. Pass --brief or run /qualia-new." |
+| Browser | `node ~/.claude/skills/qualia-polish-loop/scripts/playwright-capture.mjs --url about:blank --out /tmp/qpl-preflight` exits 0 | HALT with the script's setup hint |
+| URL reachable | `curl -fsS -o /dev/null -w '%{http_code}' "$URL"` returns 2xx/3xx | HALT — start the dev server first |
+| Working tree | `git status --porcelain` is empty | HALT — "Loop commits per iteration. Stash or commit pending changes first." |
+| Budget | Estimate iters × ~14.5K tokens; warn if > 100K | If `--budget` not set, default 100K. Surface estimate to user. |
+
+State the preflight explicitly:
+
+```
+QPL_PREFLIGHT: substrate=pass brief={path} browser=pass url=200 git=clean budget=100K
+```
+
+## Loop (max 8 iterations, default 6)
+
+Single state file at `/tmp/qpl-{timestamp}/state.json` keeps the deterministic counters (iteration, fingerprints, fixes, verdict) out of the LLM context.
+
+```bash
+RUN_ID="qpl-$(date +%s)"
+STATE="/tmp/${RUN_ID}/state.json"
+node ~/.claude/skills/qualia-polish-loop/scripts/loop.mjs init \
+  --state "$STATE" --url "$URL" --brief "$BRIEF" \
+  --max "${MAX:-8}" --budget "${BUDGET:-100000}"
+```
+
+Each iteration:
+
+### 1. Capture (deterministic, ~3-5s)
+
+```bash
+ITER_DIR="/tmp/${RUN_ID}/iter-${N}"
+node ~/.claude/skills/qualia-polish-loop/scripts/playwright-capture.mjs \
+  --url "$URL" --out "$ITER_DIR" --viewports 375,768,1440 --wait 1500
+```
+
+Three PNGs land in `$ITER_DIR/{mobile,tablet,desktop}-*.png`. The capture script auto-selects a backend: Playwright if `import('playwright')` resolves, else the cached `~/.cache/ms-playwright/chromium-*` binary, else `google-chrome` / `chromium` on PATH.
+
+### 2. Evaluate (vision — single Agent spawn per iteration)
+
+Spawn `Agent` with `subagent_type="qualia-visual-evaluator"`. Inline the rubric, the brief, the screenshots paths, the viewport meta, and the previous iteration's issues (if any). The agent reads the screenshots itself and returns a single JSON envelope per the contract in `agents/visual-evaluator.md`.
+
+Save the agent's JSON to `$ITER_DIR/eval.json`. The exact spawn template lives in REFERENCE.md (so the SKILL.md stays under 250 lines per progressive-disclosure discipline).
+
+### 3. Decide (deterministic)
+
+```bash
+node ~/.claude/skills/qualia-polish-loop/scripts/loop.mjs record \
+  --state "$STATE" --eval "$ITER_DIR/eval.json"
+```
+
+Exit codes: `0` = SUCCESS (all dims ≥ 3), `1` = CONTINUE (more iterations), `3` = KILLED (regression / budget / max).
+
+The orchestrator computes the verdict per `rules/design-rubric.md`:
+
+- **all aggregate scores ≥ 3 AND no critical issues remain** → SUCCESS, exit loop
+- **same issue fingerprint recurred 3 consecutive iterations** → KILL, `LOOP_REGRESSION_DETECTED`
+- **tokens used exceeds budget** → KILL, `OUT_OF_BUDGET`
+- **iteration count = max** → KILL, `MAX_ITERATIONS_REACHED`
+- **else** → CONTINUE
+
+### 4. Fix (parallel, up to 3 builders)
+
+For the top 3 issues from `eval.json.top_issues`, spawn `qualia-builder` agents IN THE SAME RESPONSE TURN (parallel). Each builder receives the issue, the design tokens from DESIGN.md, and explicit "fix only this dimension, do not refactor" rules. Template in REFERENCE.md.
+
+Each builder commits its fix via the orchestrator's slop-detect-gated commit:
+
+```bash
+node ~/.claude/skills/qualia-polish-loop/scripts/loop.mjs commit-fix \
+  --state "$STATE" --file "$AFFECTED_FILE" --slug "{issue-slug}"
+```
+
+This stages the file, runs `slop-detect` first (critical findings BLOCK and the builder must retry), then commits with `qpl-{N}: {slug}`. Every fix is a real revertable git commit. Failed fixes leave the working tree clean — no half-edits.
+
+### 5. Redeploy (default: dev-localhost)
+
+Default mode does NOT redeploy. The loop assumes the dev server is running with HMR; the next capture re-screenshots the changed page. Verify the dev server is still up:
+
+```bash
+curl -fsS -o /dev/null "$URL" || HALT "dev server died at iteration $N"
+```
+
+For Vercel-preview mode (opt-in via `--deploy preview`), run `vercel deploy` (NOT `--prod`) and update `URL` to the deploy URL before the next capture. Slower (~30-60s/iter), but works against a fully-built environment when HMR isn't reliable.
+
+### 6. Loop back to Capture, increment N
+
+## Post-loop
+
+```bash
+node ~/.claude/skills/qualia-polish-loop/scripts/loop.mjs report --state "$STATE" \
+  > .planning/visual-polish-loop.md
+git add .planning/visual-polish-loop.md
+git -c user.name="Qualia Solutions" -c user.email="info@qualiasolutions.net" \
+    commit -m "qpl-final: visual-polish-loop report"
+```
+
+Then a closing card via `qualia-ui`:
+
+```bash
+node ~/.claude/bin/qualia-ui.js divider
+node ~/.claude/bin/qualia-ui.js ok "Iterations: {N}/{max}"
+node ~/.claude/bin/qualia-ui.js ok "Final aggregate: {sum}/40 (avg {avg})"
+node ~/.claude/bin/qualia-ui.js ok "Fixes committed: {count}"
+node ~/.claude/bin/qualia-ui.js ok "Tokens used: {N}K of {budget}K"
+node ~/.claude/bin/qualia-ui.js end "VISUAL POLISH LOOP — {SUCCESS|KILLED-AT-N|OUT-OF-BUDGET}" "/qualia-verify or /qualia-ship"
+```
+
+## Hard rules
+
+1. **Vision-eval is anchored.** The rubric criteria are inlined in the eval prompt verbatim. Never spawn the evaluator with "tell me what you think" — that's how you get "looks great!" hallucinations. The verbatim contract is in REFERENCE.md.
+2. **Per-iteration commits.** Every fix gets `qpl-{N}: {slug}` prefix so the user can `git revert` any iteration cleanly. The orchestrator enforces this via `loop.mjs commit-fix`.
+3. **Slop-detect gate.** Critical findings BLOCK the commit. The fix-builder must retry (or the loop kills if the same fingerprint recurs 3x).
+4. **No silent destruction.** All edits go through git. Failed iterations leave clear `qpl-N:` commit trail. No working-tree side effects.
+5. **`prefers-reduced-motion` honored.** If reduced motion is set, the evaluator scores motion on CSS-declaration quality, not visible animation. Don't penalize "no motion" when reduced motion is on.
+6. **Budget discipline.** Token usage is tracked in state. KILL at cap. Surface partial progress.
+7. **Cleanup on exit.** No orphan browser processes (the capture script spawns short-lived headless processes, but verify nothing lingers via `pgrep -f chrome --headless`). Temp dirs left for forensic debugging until the next run.
+
+## Failure modes
+
+| Symptom | Likely cause | Action |
+|---|---|---|
+| `playwright-capture.mjs` exits 2 with `no_browser_backend` | No Chrome/Chromium found anywhere | `npx playwright install chromium` or install Google Chrome |
+| Screenshot is blank | Page not done rendering | Increase `--wait` to 3000ms; retry once |
+| Vision agent says "looks great!" to everything | Rubric not inlined / prompt drift | Verify REFERENCE.md prompt is being used verbatim. Check `agents/visual-evaluator.md` is on disk. |
+| Same issue every iteration | Fix-builder not addressing root cause | Kill at 3 recurrences (automatic). Read `state.json.fingerprints[*]` for diagnosis. Hand-fix and resume. |
+| Dev server died mid-loop | Port conflict / crash | Detect via curl heartbeat in step 5. HALT — restart server, run loop with `--resume STATE`. |
+| Token budget blown | Too many iterations needed | KILL at cap (automatic). Report partial progress. Consider tightening DESIGN.md or pre-running `/qualia-polish` once first. |
+
+## Setup notes for users
+
+The loop requires headless Chrome/Chromium. Two ways to get it:
+
+```bash
+# A. Playwright (recommended — best stability + waiting semantics)
+npx playwright install chromium
+
+# B. System Chrome (fallback — works if google-chrome or chromium is on PATH)
+# Already installed on most dev machines; nothing to do.
+```
+
+The capture script tries Playwright first, then the cached chromium binary, then PATH lookups. No npm dependency on Playwright is added to your project — it's optional.
+
+## Self-tests (the spec mandates 3 scenarios)
+
+`docs/playwright-loop-pilot-results.md` records the outcome of running the loop against:
+1. `fixtures/clean.html` (well-designed page) — expect SUCCESS in 1-2 iterations
+2. `fixtures/broken.html` (deliberately bad page) — expect SUCCESS in 4-6 iterations after fixes
+3. Synthetic kill-switch test — verify regression detection fires at iteration 4
+
+Run them with `bash skills/qualia-polish-loop/scripts/_self-tests.sh` (if present) or follow the manual instructions in REFERENCE.md.
+
+## Token-budget discipline
+
+| Max iterations | Estimated tokens | Notes |
+|---|---|---|
+| 2 | ~30K | tight — only for known-clean pages |
+| 4 | ~60K | standard |
+| 6 | ~90K | default |
+| 8 | ~120K | maximum — set `--budget 150000` to allow |
+
+Each iteration costs roughly: 3 PNG vision reads (~9K), rubric prompt (~2K), 3 fix-builder spawns with file reads (~3.5K). Plus the orchestrator's deterministic CLI calls (~negligible). The state file persists outside Claude's context entirely — only the per-iteration eval JSON and fix outcomes flow back in.

package/skills/qualia-polish-loop/fixtures/broken.html

@@ -0,0 +1,117 @@
+<!doctype html>
+<!--
+  Deliberately broken page used by /qualia-polish-loop self-test Scenario 2.
+  Hits multiple absolute-ban patterns from rules/design-laws.md and
+  rules/design-brand.md so the vision evaluator has to identify them all.
+  Banned font (Inter), pure white + pure black, blue-purple gradient,
+  gradient text, identical 3-column card grid, "Get Started" / "Learn More"
+  generic CTAs, side-stripe border-left:4px decorative, max-width:1280
+  fixed container, outline:none without focus replacement. This fixture
+  is intentional shipped slop. Do not lift patterns from it.
+-->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>BrandX</title>
+<style>
+  body {
+    margin: 0;
+    background: #ffffff;
+    color: #000000;
+    font-family: Inter, sans-serif;
+    font-weight: 400;
+  }
+  .container { max-width: 1280px; margin: 0 auto; padding: 24px; }
+  header { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; }
+  .logo { font-size: 18px; font-weight: 700; }
+  nav a { color: #000; margin-left: 24px; text-decoration: none; outline: none; }
+  nav a:hover { text-decoration: underline; }
+
+  .hero {
+    text-align: center;
+    padding: 80px 16px;
+    background: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);
+    color: #ffffff;
+  }
+  .hero h1 {
+    font-size: 56px;
+    font-family: Inter, sans-serif;
+    font-weight: 800;
+    margin: 0 0 16px;
+    background: linear-gradient(90deg, #fff, #c4b5fd);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+  .hero p { font-size: 18px; max-width: 620px; margin: 0 auto 32px; }
+
+  .cta-row { display: flex; gap: 12px; justify-content: center; }
+  .btn {
+    background: #ffffff;
+    color: #000;
+    padding: 12px 24px;
+    border: 0;
+    font-family: Inter, sans-serif;
+    font-size: 16px;
+    cursor: pointer;
+    outline: none;
+  }
+  .btn-secondary { background: transparent; color: #fff; border: 1px solid #fff; }
+
+  .features { padding: 80px 0; }
+  .features h2 { font-size: 32px; text-align: center; margin: 0 0 48px; font-family: Inter, sans-serif; }
+  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
+  .card {
+    background: #f8f9fa;
+    padding: 32px;
+    border-left: 4px solid #2563eb;
+  }
+  .card h3 { font-size: 18px; margin: 0 0 8px; font-family: Inter, sans-serif; }
+  .card p { color: #666; font-size: 14px; margin: 0; }
+
+  footer { background: #000; color: #fff; padding: 32px 0; text-align: center; font-size: 14px; }
+</style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <span class="logo">BrandX</span>
+      <nav>
+        <a href="#">Features</a>
+        <a href="#">Pricing</a>
+        <a href="#">About</a>
+      </nav>
+    </header>
+  </div>
+
+  <section class="hero">
+    <h1>Welcome to BrandX</h1>
+    <p>The AI-powered platform that helps you do more with less, built for modern teams who care about results.</p>
+    <div class="cta-row">
+      <button class="btn">Get Started</button>
+      <button class="btn btn-secondary">Learn More</button>
+    </div>
+  </section>
+
+  <div class="container features">
+    <h2>Everything you need to succeed</h2>
+    <div class="grid">
+      <div class="card">
+        <h3>Fast</h3>
+        <p>Lightning-fast performance that scales with your business needs and grows alongside you.</p>
+      </div>
+      <div class="card">
+        <h3>Secure</h3>
+        <p>Bank-grade security with end-to-end encryption keeping your data safe from prying eyes.</p>
+      </div>
+      <div class="card">
+        <h3>Easy</h3>
+        <p>Intuitive interface designed for everyone, from beginners to power users.</p>
+      </div>
+    </div>
+  </div>
+
+  <footer>2026 BrandX. All rights reserved.</footer>
+</body>
+</html>

package/skills/qualia-polish-loop/fixtures/clean.html

@@ -0,0 +1,196 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Lumen Audit · case study</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg:        oklch(0.16 0.012 220);
+    --bg-2:      oklch(0.20 0.014 220);
+    --surface:   oklch(0.24 0.014 220);
+    --text:      oklch(0.94 0.006 220);
+    --muted:     oklch(0.66 0.010 220);
+    --dim:       oklch(0.50 0.012 220);
+    --line:      oklch(0.32 0.012 220);
+    --accent:    oklch(0.78 0.14 196);
+    --accent-2:  oklch(0.70 0.13 196);
+
+    --shadow-sm: 0 1px 2px oklch(0.10 0.020 220 / 0.40);
+    --shadow-md: 0 8px 24px -8px oklch(0.10 0.030 220 / 0.50);
+    --shadow-lg: 0 20px 60px -20px oklch(0.10 0.035 220 / 0.60);
+
+    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
+  body {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: clamp(0.95rem, 0.5rem + 0.5vw, 1.0625rem);
+    line-height: 1.55;
+    font-feature-settings: "tnum" 1, "ss01" 1;
+    -webkit-font-smoothing: antialiased;
+  }
+  header, main, footer {
+    padding-inline: clamp(1.25rem, 5vw, 4rem);
+    padding-block:  clamp(1.5rem, 4vw, 3rem);
+  }
+  a { color: var(--text); text-decoration: none; transition: color 150ms var(--ease-out); }
+  a:hover { color: var(--accent); }
+  a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
+
+  header {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: baseline;
+    gap: clamp(1rem, 3vw, 2.5rem);
+    border-bottom: 1px solid var(--line);
+  }
+  .logo {
+    font-family: 'Fraunces', serif;
+    font-weight: 600;
+    font-size: 1.25rem;
+    letter-spacing: -0.02em;
+  }
+  .logo span { color: var(--accent); }
+  nav { display: flex; gap: clamp(1rem, 2vw, 2rem); justify-self: end; font-size: 0.875rem; color: var(--muted); }
+  nav a:hover { color: var(--text); }
+
+  .hero {
+    display: grid;
+    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+    gap: clamp(1.5rem, 4vw, 4rem);
+    align-items: end;
+    padding-block: clamp(3rem, 8vw, 7rem);
+    border-bottom: 1px solid var(--line);
+  }
+  @media (max-width: 720px) { .hero { grid-template-columns: 1fr; } }
+  h1 {
+    font-family: 'Fraunces', serif;
+    font-weight: 350;
+    font-variation-settings: "opsz" 144;
+    font-size: clamp(2.25rem, 1rem + 6vw, 5.25rem);
+    line-height: 1.02;
+    letter-spacing: -0.035em;
+    margin: 0 0 1.5rem;
+    max-width: 16ch;
+  }
+  h1 em {
+    font-style: italic;
+    font-weight: 400;
+    color: var(--accent);
+  }
+  .lede { color: var(--muted); max-width: 38ch; font-size: 1rem; }
+  .meta {
+    align-self: end;
+    display: grid;
+    gap: 0.5rem;
+    font-size: 0.8125rem;
+    color: var(--dim);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+  .meta dt { color: var(--muted); }
+  .meta dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
+
+  .work { padding-block: clamp(3rem, 7vw, 6rem); }
+  .work h2 {
+    font-family: 'Fraunces', serif;
+    font-weight: 400;
+    font-size: clamp(1.5rem, 0.5rem + 2.5vw, 2.5rem);
+    letter-spacing: -0.02em;
+    margin: 0 0 2.5rem;
+  }
+  .work-grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 1.25rem;
+  }
+  .work-grid > article { background: var(--surface); border: 1px solid var(--line); padding: 1.5rem; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
+  .work-grid > article:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
+  .item-1 { grid-column: span 7; min-height: 18rem; display: grid; align-content: end; }
+  .item-2 { grid-column: span 5; min-height: 18rem; }
+  .item-3 { grid-column: span 5; min-height: 14rem; }
+  .item-4 { grid-column: span 7; min-height: 14rem; }
+  @media (max-width: 720px) { .item-1, .item-2, .item-3, .item-4 { grid-column: span 12; min-height: 11rem; } }
+  .work-grid h3 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
+  .work-grid p { color: var(--muted); margin: 0; font-size: 0.9375rem; }
+  .work-grid .num { color: var(--dim); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; }
+
+  footer { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: end; color: var(--dim); font-size: 0.8125rem; }
+  footer a:hover { color: var(--accent); }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
+  }
+</style>
+</head>
+<body>
+  <header>
+    <span class="logo">Lumen<span>·</span></span>
+    <nav>
+      <a href="#work">Work</a>
+      <a href="#process">Process</a>
+      <a href="#contact">Get in touch</a>
+    </nav>
+    <a class="logo" href="#contact" style="color: var(--accent); font-size: 0.875rem;">Audit a brand</a>
+  </header>
+
+  <main>
+    <section class="hero">
+      <div>
+        <h1>Brands that age <em>well</em>, on the second glance.</h1>
+        <p class="lede">Lumen audits the visual language of design-led companies. We score against a 64-point rubric and ship the rewrite, not the slide deck.</p>
+      </div>
+      <dl class="meta">
+        <dt>Engagements</dt>
+        <dd>148 since 2019</dd>
+        <dt>Average lead time</dt>
+        <dd>11 days</dd>
+        <dt>Repeat-customer rate</dt>
+        <dd>72%</dd>
+      </dl>
+    </section>
+
+    <section class="work" id="work">
+      <h2>Recent audits, picked because they read</h2>
+      <div class="work-grid">
+        <article class="item-1">
+          <span class="num">01 / Fintech, NL</span>
+          <h3>Onyx Treasury</h3>
+          <p>Replaced a navy-and-gold palette saturated with sector clichés. Shipped a single-hue OKLCH system, restored 12 of 14 contrast pairs, gave the dashboard six months of breathing room.</p>
+        </article>
+        <article class="item-2">
+          <span class="num">02 / Healthcare, IE</span>
+          <h3>Verge Diagnostics</h3>
+          <p>Removed pastel teal. Rebuilt around editorial Fraunces and a single accent pulled from the diagnostic chart. Saved 41kb of icon font weight.</p>
+        </article>
+        <article class="item-3">
+          <span class="num">03 / Voice AI, US</span>
+          <h3>Hum.</h3>
+          <p>Pulled motion back from elastic-spring chaos to one signature reveal per page. Kept the personality, lost the seasickness.</p>
+        </article>
+        <article class="item-4">
+          <span class="num">04 / Restaurant group, CY</span>
+          <h3>Olive &amp; Bone</h3>
+          <p>One typeface (Fraunces) across the brand, the menu, the wayfinding, the receipts. The legibility budget went to text, not chrome.</p>
+        </article>
+      </div>
+    </section>
+  </main>
+
+  <footer id="contact">
+    <div>
+      <span class="logo" style="font-size: 1rem;">Lumen<span>·</span></span>
+      <p style="margin: 0.5rem 0 0; max-width: 40ch;">Brand audits with a real opinion. We say no to projects we can&rsquo;t move forward.</p>
+    </div>
+    <div style="text-align: right;">
+      <a href="mailto:hello@lumenaudit.studio">hello@lumenaudit.studio</a><br>
+      <span>2026 Lumen Audit, Nicosia + Amsterdam</span>
+    </div>
+  </footer>
+</body>
+</html>