/* Keep navigation available on upward scroll without a solid bar over the page. */
.site-shell{padding-top:118px}
.site-header{
  position:fixed;
  top:0;
  left:50%;
  width:min(100% - 72px,1280px);
  margin:0;
  z-index:1000;
  isolation:isolate;
  background:transparent!important;
  transform:translateX(-50%);
  transition:transform .3s ease,opacity .3s ease;
}
.site-header::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:8px -18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(11,31,51,.68);
  box-shadow:0 14px 35px rgba(11,31,51,.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.site-header.header-scrolled::before,.site-header.header-menu-open::before{opacity:1}
.site-header.header-hidden:not(.header-menu-open):not(:focus-within){
  transform:translate(-50%,-120%);
  opacity:0;
  pointer-events:none;
}
@media(max-width:1050px){
  .site-header{width:min(100% - 52px,1280px)}
}
@media(max-width:760px){
  .site-shell{padding-top:92px}
  .site-header{width:min(100% - 40px,650px)}
  .site-header::before{inset:5px -10px;border-radius:15px}
}
@media(prefers-reduced-motion:reduce){
  .site-header,.site-header::before{transition:none}
}