/* ============================================================
   source layer: site-header-frost-20260530.css
   ============================================================ */
/* Site header frosted scroll state (2026-05-30) */
:root,
:root[data-theme="light"] {
  --header-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.68),
    rgba(255, 255, 255, 0.48)
  );
}

:root[data-theme="dark"],
body.dark {
  --header-bg: linear-gradient(
    180deg,
    rgba(26, 26, 26, 0.72),
    rgba(26, 26, 26, 0.56)
  );
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --header-bg: linear-gradient(
      180deg,
      rgba(26, 26, 26, 0.72),
      rgba(26, 26, 26, 0.56)
    );
  }
}

.site-header.is-scrolled,
.site-header.hm-nav-open,
.site-header.hm-mega-open {
  background: var(--header-bg);
  border-bottom-color: rgba(0, 0, 0, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 12px 30px rgba(23, 23, 23, 0.055);
}

:root[data-theme="dark"] .site-header.is-scrolled,
:root[data-theme="dark"] .site-header.hm-nav-open,
:root[data-theme="dark"] .site-header.hm-mega-open,
body.dark .site-header.is-scrolled,
body.dark .site-header.hm-nav-open,
body.dark .site-header.hm-mega-open {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 30px rgba(0, 0, 0, 0.24);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .site-header.is-scrolled,
  :root:not([data-theme]) .site-header.hm-nav-open,
  :root:not([data-theme]) .site-header.hm-mega-open {
    border-bottom-color: rgba(255, 255, 255, 0.12);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 12px 30px rgba(0, 0, 0, 0.24);
  }
}

@supports ((backdrop-filter: blur(22px)) or (-webkit-backdrop-filter: blur(22px))) {
  .site-header.is-scrolled,
  .site-header.hm-nav-open,
  .site-header.hm-mega-open {
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
  }
}

@media (max-width: 900px) {
  :root,
  :root[data-theme="light"] {
    --header-bg: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.84),
      rgba(255, 255, 255, 0.72)
    );
  }

  :root[data-theme="dark"],
  body.dark {
    --header-bg: linear-gradient(
      180deg,
      rgba(26, 26, 26, 0.84),
      rgba(26, 26, 26, 0.72)
    );
  }
}

@media (max-width: 900px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --header-bg: linear-gradient(
      180deg,
      rgba(26, 26, 26, 0.84),
      rgba(26, 26, 26, 0.72)
    );
  }
}

body.hm-ios-touch .site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}