/* ============================================================ Layout-shift reservations. This site renders much of its content on the client (the runtime + React mount into empty containers from KSHN_DATA). Without reserved space those containers collapse to 0 and then jump to full height when filled, which reads as the page "glitching" (high Cumulative Layout Shift). `:empty` applies the reservation ONLY before the runtime injects content; once filled, the element's natural height takes over (no leftover gap). Heights are tuned to the typical filled height to minimise the hand-off. ============================================================ */ /* The sticky site header is built by the runtime and prepended to AFTER first paint, which shoves the whole page down by its height (a ~0.26 layout shift on every page). Reserve that height until the header exists; once it's prepended it occupies the same space, so the swap is seamless. */ body:not(:has(.site-header)) { padding-top: 78px; } /* Flavor detail page (/pouches/) — flavor.js builds the WHOLE page into this empty

, so reserve a tall canvas to keep the footer from jumping. */ [data-flavor-root]:empty { display: block; min-height: 220vh; } /* /pouches flavor grid */ [data-grid]:empty { display: block; min-height: clamp(640px, 78vh, 900px); } @media (max-width: 760px) { [data-grid]:empty { min-height: 1500px; } } /* Home — Pick Your Vibe carousel (React/Vibe3D), state cards, ritual steps, gallery, journal, and the Instagram strip all fill after load. */ [data-lineup]:empty { min-height: 480px; } [data-states]:empty { display: block; min-height: 360px; } [data-steps]:empty { display: block; min-height: 240px; } [data-gallery]:empty { display: block; min-height: 320px; } [data-journal]:empty { display: block; min-height: 380px; } [data-ig-strip]:empty { display: block; min-height: 200px; }