/* ============================================================ TUNLstack v2 — Site shared CSS (page chrome only) Composed pages inline each scene's styles scoped under [data-section=""]; THIS file owns the page level: dark Void base, skip-link, nav shell (nav-minimal-utility), footer (footer-minimal-centered), section baseline. DELIBERATELY THIN — the choreography layer (Task 10) owns all scroll/motion logic. No animation logic lives here beyond the nav's hairline-on-scroll state and the blocks' own reveals. Tokens: ../assets/showroom/tokens/tokens.css (Ice Blue on Void, DARK ONLY — no light mode by design). ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { color-scheme: dark; background: var(--color-base); /* NO scroll-behavior: smooth — EVER, while Lenis drives the scroll. Lenis writes scrollTop every rAF; CSS smooth turns each write into a native animation the next write interrupts, so the real page crawls while Lenis's internal position races ahead, then snap-teleports on resync (measured 2026-07-09: 7,668px desync, the N5 rail pin jamming mid-traversal, free-spin flings — _scroll_probe.py). Wheel smoothing is Lenis's job; anchor jumps are deliberately instant on all inputs. */ /* overflow-x on BOTH html and body — body alone doesn't suppress html-level horizontal scroll. */ overflow-x: hidden; } body { min-height: 100vh; background: var(--color-base); color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* MUST be `clip`, never `hidden` — `overflow-x: hidden` forces computed `overflow-y: auto`, making the NEAREST SCROLL CONTAINER, so the hero8 curtain's `position: sticky` descendant sticks to body's scrollport (which never scrolls) and the pin silently never engages (hero measured at -796px in the c01 probe). `clip` clips X without creating a scrollport (Chrome 90+/FF 81+/Safari 16+). See the hero8 CURTAIN block below. (html's overflow-x stays `hidden` above — it propagates to the viewport and is harmless there.) */ overflow-x: clip; } a { color: inherit; } img, svg, video { max-width: 100%; } /* ---- composed sections baseline ---- */ main { display: block; } .sec { display: block; position: relative; } /* ============================================================================ hero8 pinned-hero CURTAIN — page-level rules design: docs/plans/2026-07-12-tunlstack-hero8-curtain-reveal-design.md §1/§2/§4 The homepage hero pins while every section below scrolls UP and over its held film, behind a soft leading-edge seam; once consumed (film ended + covered once) the hero is REMOVED so scroll-back never finds a blank end-state hero. The removal + chevron scroll-follow JS lives in the hero block's sequencer (assets/showroom/blocks/hero/hero-tunnel-split-video.html). WHY HERE, not in the block's