/* V12: guard the header's paint area during mobile browser-toolbar transitions. */
html { background-color:#08070c; }

.navigation {
  /* Keep native sticky positioning and one stable composited surface. */
  isolation:isolate;
  transform:translateZ(0);
}

.navigation::before,
.menu-bar::before {
  /* iOS can expose the area above top:0 while its toolbar expands/collapses.
     This is paint only: no extra layout space, scroll listener or touch target. */
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:calc(100% - 1px);
  height:max(120px, env(safe-area-inset-top, 0px));
  background:#08070c;
  pointer-events:none;
  z-index:-1;
}

/* Moving a visible link offscreen leaks into iOS's translucent browser chrome.
   Clip it while unfocused; retain normal keyboard and screen-reader access. */
.skip {
  transform:none;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  clip-path:inset(50%);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}
.skip:focus {
  width:auto;
  height:auto;
  padding:10px 16px;
  overflow:visible;
  white-space:normal;
  clip:auto;
  clip-path:none;
  opacity:1;
  pointer-events:auto;
  max-width:calc(100% - 30px);
}

@media print {
  html { background:#fff; }
  .navigation::before,.menu-bar::before { display:none; }
}