(where the content sections live) rather than /. Putting any overflow-x on the root/body relocates or removes the page's own vertical scrollbar, which reintroduced the sideways "jump" when a modal/lightbox opened (the scroll-lock could no longer measure/compensate the scrollbar width). Clipping only

keeps the page scrollbar — and the scroll-lock — untouched while still stopping any stray-wide section from creating a horizontal scrollbar. */ body > main { overflow-x: clip; } /* --- Responsive foundations --- Reducing --container-pad (and the header height) at each breakpoint cascades to EVERY section at once, since every layout consumes these tokens rather than hard-coded values. One change, whole-site effect. */ @media (max-width: 1024px) { :root { --container-pad: 32px; } } @media (max-width: 767px) { :root { --container-pad: 20px; --header-height: 68px; } } @media (max-width: 480px) { :root { --container-pad: 16px; } } /* Sticky footer: body is a column flex box spanning at least the full viewport height, and

(the middle child, between

and