mobilelisted

# /mobile Skill hardened by real iterations. All rules below come from projects where mobile ate weeks and hundreds of fixes. ## When to use - `brief/00-priority.md` = `desktop-first`. - After `/build` (desktop version ready). - Edits to an existing mobile version. **If mobile-first** — this skill does not apply. Mobile is built directly in `/build`, desktop is extended via `expansion.css`. ## Requirements - Desktop version exists and works. - All sections assembled, `/audit` shows desktop = pass. - `site/css/responsive.css` exists (empty template). ## Rules (must-follow) ### 1. Breakpoints - `≤ 768px` = mobile (hamburger active, layout adapted). - `≤ 480px` = small-phone (targeted fixes where general mobile rules are insufficient). ### 2. Preserve desktop composition **Do NOT restructure blocks.** Do not change element order inside a section. Do not swap layouts (grid → stack without reason). Scale proportionally in the same positioning. Exception: if an element physically does not fit (e.g. a horizontal-timeline of 6 steps does not work at 390px) — make an explicit decision to restructure and log it in `DESIGN.md`. ### 3. Uniform scale factor per block Within one block — one multiplier for all sizes (card:phone ratio, gap, margin, height). Otherwise proportions break. Example: if desktop `.card { width: 20vw; }` → mobile `.card { width: 45vw; }` (×2.25). Then gap, phone-mockup, and everything inside — also ×2.25. ### 4. Preserve JS-driven carousels **Never** tu