.header{position:sticky;top:0;z-index:100;transition:transform 220ms ease;transform:translateY(0)}
.header.header-hidden{transform:translateY(-100%)}
@supports (backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px)){
  .header{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
html{scroll-padding-top:100px}
@media(max-width:760px){html{scroll-padding-top:88px}}
@media(prefers-reduced-motion:reduce){.header{transition:none}}