.site-header {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  width: min(1120px, calc(100% - 3rem));
  min-height: 68px;
  padding: .55rem 1.3rem;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 999px;
  background: rgba(10,10,10,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.06), 0 12px 38px rgba(0,0,0,.14);
  backdrop-filter: blur(12px) saturate(1.14);
  -webkit-backdrop-filter: blur(12px) saturate(1.14);
  transform: translateX(-50%);
  animation: header-arrive .75s cubic-bezier(.2,.8,.2,1) both;
  transition: top .4s cubic-bezier(.2,.8,.2,1), min-height .4s cubic-bezier(.2,.8,.2,1), background .35s ease, border-color .35s ease, box-shadow .35s ease;
  isolation: isolate;
  overflow: hidden;
}

.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(220px 90px at var(--glass-x, 30%) -20%, rgba(255,255,255,.2), transparent 72%),
    linear-gradient(105deg, rgba(255,255,255,.055), transparent 42%, rgba(255,255,255,.035));
  pointer-events: none;
  transition: opacity .35s ease;
}

.site-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  box-shadow: inset 16px 10px 34px rgba(255,255,255,.035), inset -18px -12px 30px rgba(0,0,0,.18);
  pointer-events: none;
}

.site-header.is-scrolled {
  top: .7rem;
  min-height: 58px;
  background: rgba(3,3,3,.78);
  border-color: rgba(255,255,255,.17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 9px 30px rgba(0,0,0,.25);
}

.site-header .wordmark,
.site-header nav,
.site-header .bag,
.site-header .menu-toggle { position: relative; z-index: 2; }

.site-header nav a,
.site-header .bag,
.site-header .menu-toggle { min-height: 44px; display: inline-flex; align-items: center; }

.site-header .menu-toggle { display: none; }

@supports ((backdrop-filter: url("#aurelia-liquid")) or (-webkit-backdrop-filter: url("#aurelia-liquid"))) {
  .site-header {
    backdrop-filter: blur(9px) saturate(1.18) url("#aurelia-liquid");
    -webkit-backdrop-filter: blur(9px) saturate(1.18) url("#aurelia-liquid");
  }
}

@keyframes header-arrive {
  from { opacity: 0; transform: translate(-50%,-14px) scale(.985); }
  to { opacity: 1; transform: translate(-50%,0) scale(1); }
}

@media (max-width: 820px) {
  .site-header {
    top: .75rem;
    width: calc(100% - 1rem);
    min-height: 58px;
    padding: .4rem .85rem;
    overflow: visible;
    backdrop-filter: blur(12px) saturate(1.08);
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
  }
  .site-header.is-scrolled { top: .4rem; min-height: 54px; }
  .site-header > .wordmark,
  .site-header > .menu-toggle,
  .site-header > .bag { z-index: 3; }
  .site-header .menu-toggle { display: inline-flex; }
  .site-header nav {
    position: absolute;
    top: -.75rem;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 100vw;
    height: 100svh;
    z-index: 1;
    transform: translateX(-50%);
    border-radius: 0 0 1.5rem 1.5rem;
    background: rgba(5,5,5,.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header { animation: none; transition: none; }
  .site-header::before { transition: none; }
}