/* Mobile menu: must open at ANY scroll position.
   Root cause: once scrolled, the sticky header gets -webkit-backdrop-filter (and my earlier
   translateZ) which makes it a CONTAINING BLOCK for position:fixed children in Safari/WebKit.
   The menu's original "inset:var(--header-h) 0 0 0" then resolved bottom:0 against the ~76px
   header box, collapsing the menu to height 0 — invisible, so tapping looked dead unless you
   were at the very top. An explicit height + top (no bottom) works in both cases. */
.menu[data-astro-cid-nen7h5rs]{
  top:var(--header-h); left:0; right:0; bottom:auto;
  height:calc(100vh - var(--header-h));
  height:calc(100dvh - var(--header-h));
  position:fixed; z-index:70; -webkit-overflow-scrolling:touch;
}
.menu[data-astro-cid-nen7h5rs] .menu-nav[data-astro-cid-nen7h5rs]{min-height:100%}
.menu-btn[data-astro-cid-nen7h5rs]{touch-action:manipulation;position:relative;z-index:71;-webkit-tap-highlight-color:transparent}
html[data-menu-open] .menu[data-astro-cid-nen7h5rs]{opacity:1}

/* Desktop nav: every item on one level line — "Try it" must never wrap to two lines.
   It is the only two-word item; when the bar is tight, flex shrink wrapped it at the
   space and it read as the item "dropping down". */
.nav[data-astro-cid-nen7h5rs] ul[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs]{white-space:nowrap}
/* Tight band just above the mobile breakpoint: give the row its room back so the
   single-line items fit cleanly instead of being squeezed. */
@media (1024px <= width <= 1279px){
  .bar[data-astro-cid-nen7h5rs]{gap:16px}
  .nav[data-astro-cid-nen7h5rs] ul[data-astro-cid-nen7h5rs]{gap:clamp(12px,1.5vw,19px)}
  .nav[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs]{font-size:clamp(.95rem,1.35vw,1rem)}
}