/* Keep a solid viewport-edge surface for mobile browser toolbar tinting.
   The negative margin preserves the original hero position; the menu overlays it. */
@media screen and (max-width:960px){
 .site-header,.site-header.is-scrolled{
  --header-height:80px;
  position:sticky;
  top:0;
  height:var(--header-height);
  margin-bottom:calc(-1 * var(--header-height));
  background:var(--paper);
  color:var(--ink);
 }
 .site-header::before{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:100%;
  height:max(100px,env(safe-area-inset-top,0px));
  background:var(--paper);
  pointer-events:none;
 }
 .site-header .brand-point{background:var(--ink)}
 .site-header .mobile-nav{
  position:absolute;
  inset:100% 0 auto;
  max-height:calc(100svh - var(--header-height) - env(safe-area-inset-bottom,0px));
  overflow-y:auto;
  overscroll-behavior-y:contain;
 }
}
@media screen and (max-width:650px){
 .site-header,.site-header.is-scrolled{--header-height:78px}
}