/* A separate surface lets the glass fade without fading links or focus rings. */
.site-header.site-header {
  --navigation-tint: 32%;
  isolation: isolate;
  background: transparent;
  color: var(--seed-ink);
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header.site-header[data-seed-theme="dark"] { --navigation-tint: 22%; }
.site-header.site-header[data-overlay="true"] {
  --navigation-tint: 12%;
  background: transparent;
  position: absolute;
  inset: 0 0 auto;
}

.site-header.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -20px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--seed-bg) var(--navigation-tint), transparent),
    color-mix(in srgb, var(--seed-bg) var(--navigation-tint), transparent) 55%,
    transparent);
  -webkit-backdrop-filter: blur(12px) saturate(105%);
  backdrop-filter: blur(12px) saturate(105%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

/* Keep navigation usable when the visitor disables transparency or blur is absent. */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .site-header.site-header,
  .site-header.site-header[data-overlay="true"] { background: var(--seed-bg); }
  .site-header.site-header::before { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header.site-header,
  .site-header.site-header[data-overlay="true"] { background: var(--seed-bg); }
  .site-header.site-header::before { display: none; }
}