/* ============================================================ MAILROOM — the mobile nav sheet. ONE definition, every page. Loaded by every page that has a nav bar (all of them except live.html), alongside whichever stylesheet owns that page's bar: site.css for the nine legal/flow pages, home.css for the homepage. WHAT LIVES HERE vs WHAT DOES NOT Only the parts that are genuinely identical everywhere: the hamburger, the sheet, and the breakpoint that swaps one for the other. The bar itself (.nav, .nav-inner, .nav-links, .nav-cta) stays with its owning stylesheet, because those DIFFER on purpose — site.css sizes the bar in fixed px, the homepage in the fluid clamp scale. Hoisting those too would have forced one of the two to change how it looks in order to share a file. This file exists because the toggle/sheet rules were originally copy-pasted into both site.css and home.css. They were in sync on the day they were written, which is exactly how that kind of duplication always starts. WHY THE SHEET IS NOT INSIDE

.nav carries backdrop-filter, and a backdrop-filter makes an element a CONTAINING BLOCK for its position:fixed descendants. Nested in the header the sheet resolved `inset: 68px 0 0` against the 68px-tall bar instead of the viewport and rendered as a ~40px strip. It is a direct child of on every page, and must stay one. The markup says so too. ============================================================ */ /* The no-JS fallback (see the breakpoint at the bottom): without JS the links stay in the bar at every width, and wrapping to a second line beats a row that runs off the side of a phone. */ .nav-inner { flex-wrap: wrap; } /* ---------------- the hamburger ---------------- */ .nav-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 0; } .nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ---------------- the sheet ---------------- visibility + pointer-events, NOT opacity alone. The sheet is fixed at `inset: 68px 0 0`, so it covers everything below the bar. Left at opacity:0 it is still laid out, still hit-testable and still in the tab order — it would silently swallow taps meant for the page underneath and hand a keyboard user a screenful of invisible links. --gutter only exists on the homepage (home.css's fluid scale); the fallback is site.css's fixed 32px wrap padding, so one rule serves both. */ .nav-sheet { position: fixed; inset: 68px 0 0; z-index: 55; background: var(--bg); padding: clamp(20px, 5vw, 32px) var(--gutter, 32px) calc(env(safe-area-inset-bottom, 0px) + 32px); display: none; flex-direction: column; gap: 6px; overflow-y: auto; opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out); } .nav-sheet.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; } .nav-sheet a.sheet-link { display: flex; align-items: center; justify-content: space-between; font-size: clamp(20px, 4.4vw, 26px); font-weight: 640; letter-spacing: -0.025em; color: var(--text); padding: 16px 2px; min-height: 60px; border-bottom: 1px solid var(--border); } .nav-sheet a.sheet-link .arrow { color: var(--text-faint); font-size: 18px; } .nav-sheet .sheet-cta { display: grid; gap: 12px; margin-top: 26px; } .nav-sheet .sheet-cta .btn { width: 100%; } .nav-sheet .sheet-fine { margin-top: 22px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } /* Locks the page behind the sheet; without it the body scrolls under a fixed overlay, which reads as the sheet itself being broken. */ body.sheet-open { overflow: hidden; } /* ---------------- the swap ---------------- 1080, not 980. The full bar — logo, six links, two CTAs — needs 937px of content; 980 was where the CTA's right edge finally landed on the gutter rather than past it, but it hid the links with nothing in their place. 1080 is where the bar stops needing to eat its gutter at all. Every rule is gated on .js (set on by each page's head script), because the hamburger is the ONLY way back to the links once they collapse. If nav.js does not load, the links stay in the bar and wrap — a dead hamburger next to no links is the one outcome worth engineering against. .has-sheet scopes the COLLAPSE, not the sheet. buy.html — the Stripe checkout bridge — carries a deliberately minimal bar (logo + two CTAs, no section links) and no sheet. An unscoped `.nav-cta { display: none }` would have deleted both of its buttons on every phone, on the one page where a buyer is midway to paying. The sheet rule is NOT scoped to .has-sheet because the sheet is a sibling of the header, not a descendant of it; its presence in the document is the signal, and buy.html has no .nav-sheet. */ @media (max-width: 1080px) { .js .has-sheet .nav-links { display: none; } .js .has-sheet .nav-cta { display: none; } .js .has-sheet .nav-toggle { display: flex; } .js .nav-sheet { display: flex; } } /* The narrow-phone gutter, carried over from site.css. It existed there because site.css's sheet padding was a static 32px and needed tightening below 520px; the homepage never needed it because --gutter was already fluid. Writing it as `var(--gutter, 20px)` keeps both behaviours in one rule: the homepage stays on its clamp, the other nine drop to 20px and line up with site.css's own `.wrap { padding: 0 20px }` at this breakpoint. Dropping this in the hoist cost those nine pages 24px of usable sheet width on a small phone — silent, not visibly broken, which is exactly why it is back. */ @media (max-width: 520px) { .nav-sheet { padding-left: var(--gutter, 20px); padding-right: var(--gutter, 20px); } }