Status: Phase 1 stub. Matures in Phase 5 per §8.1.

Statement

Below the xl: breakpoint (768px — overridden from Tailwind's 1280px default in tailwind.config.js so tablets in any orientation join the desktop bucket), every product surface renders inside a 430px-wide phone-frame container with 100dvh height. Above xl:, the frame breaks: a 64px vertical sidebar replaces the header/footer, and content fills the available width. Mobile is the canonical layout; desktop is the responsive accommodation.

Why

Epoch Shield is a private-messaging app. Private messaging is overwhelmingly a mobile interaction — read in transit, replied to walking, dismissed at the lock screen. Designing desktop-first and shrinking to mobile produces the typical reverse-responsive failure: hovercard primitives, click-target sizes calibrated for a mouse, gestures that fight the touch surface. Designing mobile-first and expanding to desktop produces a desktop layout that respects the touch primitives a mobile-native interaction uses.

The 430px frame is also a self-imposed constraint that forces content discipline. If a feature can't fit 430px wide on a phone, it gets simpler — not a desktop-only sub-surface that the mobile user never sees.

How

<MainLayout> enforces max-w-[430px] + h-[100dvh] below xl:. At xl:+ with an unlocked identity, it switches to xl:max-w-none xl:flex-1 and renders <DesktopSidebar>. Two-panel layouts (messaging, groups, mail) appear only above xl:; below it, the same data is one-panel-at-a-time with the standard mobile back-stack.

Auth surfaces (signin, identity create/unlock) keep the phone frame at all breakpoints — the phone-frame container is the auth surface, not a mobile compromise of it.

Phase 5 deepens this stub with the per-breakpoint specification, content-parity rules (P-5), and per-route citations.