/* Paint the canvas so overscroll / the gap around the floating pill
   isn't a default-white hole. The bar itself stays transparent; only
   `.nav.is-scrolled .nav__inner` is coloured. */
html{background:var(--off-white)}
html:has(body.has-stone-hero){background:var(--grey)}

@media (max-width:860px){
  /* The closed mobile menu was leaving an off-white strip across the top of the viewport.
     It hides by translating up, but it sits at `top:72px`, and once scrolled the pill's
     backdrop-filter makes `.nav__inner` the containing block for the fixed panel — so the
     offset is measured from inside the nav and the panel's bottom edge stays on screen.
     Hiding it outright is the only placement-independent guarantee; it also keeps the closed
     links out of the tab order. Visibility flips back only after the slide-out finishes. */
  .nav__links{
    visibility:hidden;
    transition:transform var(--t-med) var(--ease),visibility 0s linear var(--t-med);
  }
  .nav__links.is-open{
    visibility:visible;
    transition:transform var(--t-med) var(--ease),visibility 0s;
  }
}