/* Reveal the existing header when scrolling upward. */
html:has(.header.scroll-header) {
  scroll-padding-top: calc(var(--scroll-header-height, 94px) + 32px);
}
.header.scroll-header {
  position: fixed;
  inset: 16px 16px auto;
  z-index: 80;
  margin: 0;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 22px #25221f14;
  transform: none;
  transition: transform .24s ease, visibility .24s, background .2s, color .2s;
}
.header.scroll-header .brand-logo {
  filter: brightness(0);
  opacity: .8;
}
.header.scroll-header.scroll-header-hidden {
  transform: translateY(calc(-100% - 32px));
  visibility: hidden;
  pointer-events: none;
}
.header-scroll-spacer[hidden] { display: none; }
@media (max-width: 760px) {
  .header.scroll-header {
    inset: max(8px, env(safe-area-inset-top)) 8px auto;
    border-radius: 10px;
  }
  /* A transform would constrain the fixed, full-screen mobile menu. */
  .header.scroll-header.mobile-menu-open {
    transform: none;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header.scroll-header { transition: none; }
}