Fix the example pages the new render check caught failing

[aievolutionpl]

Follow-up to #1, which merged before this work was pushed. Same branch, rebased onto the new main.

#1 added scripts/screenshot.mjs. Running it against this repository's own 15 example pages found faults it tells other people's agents to treat as blockers. Fixing them here — a quality gate the repo itself fails is not a gate.

18 files changed · +191 / −28 · validation and CI green.

---

🔴 Blockers — horizontal overflow at a mobile viewport

Style	Failure
07-neumorphism	Nav had no mobile treatment: logo + links + CTA pushed +10px past 390 (+40px at 360)
11-editorial-magazine	Same cause, +32px at 390
14-3d-spatial-ui	Same cause, +23px at 390
12-maximalism	Hero action row overflowed +10px at 360
06-brutalist-anti-grid	The deliberate width:120% headline bleed created a page scrollbar at 1440

For 06, the bleed is the style's signature — so it is now clipped at the hero rather than removed. Intent preserved, scrollbar gone.

Navigation stripped rather than transformed

03-liquid-glass, 04-bento-grid, 05-neo-brutalism, 08-claymorphism and 13-y2k-retrofuturism set nav ul { display: none } below 900px with no replacement — no drawer, no overlay, nothing. That is precisely the "desktop stripped for mobile" failure responsive/RESPONSIVE-FOUNDATIONS.md and component-patterns/COMPONENT-PATTERNS.md warn about.

The link row now moves to its own line beneath the logo and CTA, and every nav target is at least 44px tall. No JavaScript, no hamburger.

Reviewer note: this changes how those five pages look below 900px. It's defensible by the repo's own rules, but it is a design change rather than a pure bug fix — the first thing to push back on if you disagree.

Touch targets under the 44px floor

05-neo-brutalism buttons (38px) · 07-neumorphism chips (40px) · 10-swiss-international project links (15px tall).

Contrast

13-y2k-retrofuturism's chrome hero headline measured 1.1:1 against the light --sky background — the exact failure accessibility/ACCESSIBILITY.md § 10 names for Y2K ("chrome needs a dark backing plate").

It now sits on a dark --ink plate: 3.8:1 at the chrome gradient's darkest stop, 13.9:1 at its lightest, using the style's existing --chrome token rather than a new value. That is also the style's own documented signature move, so the fix reinforces the DNA instead of compromising it.

A first attempt used a ::before at z-index:-1, which painted over the text — negative-z-index children paint after the element's own background, and here the background is the background-clip: text gradient. The plate is now a wrapper element.

Tooling precision — so the check gets trusted, not ignored

A noisy checker is an ignored checker, so three fixes to screenshot.mjs before trusting its output:

• Overflow attribution skips elements clipped by an ancestor. A clipped element cannot create page scroll, so blaming it sends you to the wrong CSS. This is what revealed the real culprit in 14 (the nav CTA, not the decorative .grid-floor).
• Touch-target checks apply the WCAG 2.2 SC 2.5.8 exemptions: inline links inside a sentence, and undersized targets with 44px of clear space around them, are no longer reported. Height below 32px is still flagged regardless of spacing.
• Page load waits on load + document.fonts.ready instead of networkidle, which never settles on a page with webfonts — it was costing 30s per viewport.

Verification

All 15 examples, at 1440 / 768 / 390 / 360: zero horizontal overflow, nav links reachable at every width, no target under the floor. Screenshots are gitignored — no binaries added.

python3 scripts/validate.py     # 943 checks, all passing
node scripts/screenshot.mjs     # 15 examples × 4 viewports, no blockers

🤖 Generated with Claude Code

https://claude.ai/code/session_01MSG5kjLk3ZvmZy2C4B17kP

---

Generated by Claude Code