Desktop is a GSAP/Lenis/d3 animated experience that doesn't hold up
on phones. Rather than retrofitting media queries across 1200+ lines
of scroll-trigger code, add a completely isolated static mobile tree:
- protected/mobile/index.html — one-page static flow covering the
intro, 12 timeline events, hero, 4 capability cards, Bifrost
reveal, 3 participation stops, and Join CTA. All copy duplicated
from the desktop HTML on purpose — a shared data module would
re-couple the two trees.
- protected/mobile/mobile.css — paper/ink palette, all m-prefixed,
zero cascade overlap with the desktop CSS.
- protected/mobile/mobile.js — 60-line client: /auth/me check,
/api/bifrost-join POST + panel swap, /auth/logout. No GSAP, no
Lenis, no d3.
Routing (server.js):
- GET /timeline now UA-dispatches via MOBILE_UA_RE. Phone UAs get
the mobile page; everything else gets the desktop page.
- ?view=mobile and ?view=desktop query overrides take precedence
over the UA sniff — for bad guesses or previewing the other
version.
- Gating is unchanged: protected/mobile/ is inside protected/ so
the existing requireAuth + express.static gate covers it.
Docs:
- CLAUDE.md §routing now lists the UA dispatch as step 4.
- PROJECT.md gets a new "Mobile view" section explaining the
isolation rules (no shared JS/CSS, content duplicated manually).
- CHECKLIST.md gains section H0 with dispatch curl checks, render
verification on a phone, and an isolation audit that fails if
mobile classes leak into the desktop HTML or vice versa.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
