/* Frosted-glass approximation for the sticky navigation. */
.nav.scrolled {
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  box-shadow: 0 1px 0 rgb(255 255 255 / .14) inset;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

@supports not (backdrop-filter: blur(1px)) {
  .nav.scrolled { background: var(--bg); }
}

@media (prefers-reduced-transparency: reduce) {
  .nav.scrolled {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}