/* Warm glass stays on existing controls; photographs keep their own light. */
:root {
  --glass-smoke: #211f1be8;
  --glass-paper: #f7f5eee8;
  --glass-ink: #eeece4;
  --glass-reading-ink: #302f29;
  --glass-edge: inset 0 1px 0 #fff5, inset 0 -1px 0 #fff1;
  --glass-cast: 0 12px 32px -22px #0009;
}

.visitor-mode .site-header {
  background: transparent;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.visitor-mode .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(#0f0e0c8a, transparent);
  transition: opacity 220ms ease;
}
.series-page .site-header.on-paper::before { opacity: 0; }
.series-page .site-header.on-paper {
  background: #efede7;
  color: var(--glass-reading-ink);
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.visitor-mode .site-header .logo,
.visitor-mode .site-header .desktop-nav a {
  transition: color 220ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.visitor-mode:not(.home-dynamic) .desktop-nav,
.home-dynamic .desktop-nav .nav-rail,
.visitor-mode .mobile-nav {
  background: linear-gradient(140deg, #fff8e70c, transparent 55%), var(--glass-smoke);
  border: 0;
  box-shadow: var(--glass-edge), var(--glass-cast);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  color: var(--glass-ink);
}
.visitor-mode:not(.home-dynamic) .desktop-nav {
  padding: 5px;
  gap: 4px;
  border-radius: 999px;
  transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}
.visitor-mode:not(.home-dynamic) .desktop-nav > a {
  padding: 8px 13px;
  justify-content: center;
  color: var(--glass-ink);
}
.visitor-mode:not(.home-dynamic) .desktop-nav > a:hover,
.home-dynamic .nav-rail .nav-trigger:hover,
.home-dynamic .nav-rail #nav-about:hover {
  background: #f7f2e419;
  box-shadow: inset 0 1px 0 #fff2;
}
.visitor-mode:not(.home-dynamic) .desktop-nav > a[aria-current=page],
.home-dynamic .nav-rail .nav-trigger[aria-expanded=true] {
  background: #f7f2e422;
  box-shadow: inset 0 1px 0 #fff3;
}
.series-page .site-header.on-paper .desktop-nav,
.series-page:has(.site-header.on-paper) .mobile-nav {
  background: linear-gradient(140deg, #fff9, transparent 60%), var(--glass-paper);
  color: var(--glass-reading-ink);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #5b554216, 0 12px 32px -22px #443c3145;
}
.series-page .site-header.on-paper .desktop-nav > a,
.series-page:has(.site-header.on-paper) .mobile-nav a {
  color: var(--glass-reading-ink);
}
.series-page .site-header.on-paper .desktop-nav > a:hover,
.series-page .site-header.on-paper .desktop-nav > a[aria-current=page] {
  background: #56514512;
  box-shadow: inset 0 1px 0 #fff9;
}
.visitor-mode .mobile-nav {
  background: linear-gradient(140deg, #fff8e70a, transparent 55%), #211f1bb3;
  transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}
.series-page:has(.site-header.on-paper) .mobile-nav {
  background: linear-gradient(140deg, #fff7, transparent 60%), #f7f5eec9;
}
.series-page:has(.site-header.on-paper) .mobile-nav-lens {
  background: #56514515;
  box-shadow: inset 0 1px 0 #fff;
}
.visitor-mode .desktop-nav :focus-visible,
.visitor-mode .mobile-nav a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.home-dynamic .morph-dropdown {
  background: radial-gradient(ellipse at var(--glass-x,50%) var(--glass-y,10%), #fff5dc0b, transparent 65%), var(--glass-smoke);
  border: 0;
  box-shadow: var(--glass-edge), 0 24px 56px -24px #000a;
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
}
.home-dynamic .explore-media::before {
  background: linear-gradient(90deg, #211f1b80, transparent);
}
.home-dynamic .morph-dropdown .glass-ripple { display: none; }

.lightbox.immersive-viewer:not([data-frame=paper]) {
  background: radial-gradient(ellipse at 50% 0, #b9ac9209, transparent 65%), #151411;
}
.immersive-viewer .photo-tools,
.immersive-viewer .viewer-more-panel {
  background: linear-gradient(145deg, #fff8e70b, transparent 60%), var(--glass-smoke);
  box-shadow: var(--glass-edge), var(--glass-cast);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}
.immersive-viewer .photo-tools > button,
.immersive-viewer #photo-close,
.immersive-viewer .viewer-more-panel > button,
.immersive-viewer .viewer-more-panel > a {
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--kai-motion);
}
.immersive-viewer[data-frame=paper] .photo-tools,
.immersive-viewer[data-frame=paper] .viewer-more-panel {
  background: linear-gradient(145deg, #fffc, transparent 65%), var(--glass-paper);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #5b554216, 0 12px 32px -22px #443c3145;
}
.immersive-viewer .photo-tools > button:focus-visible,
.immersive-viewer .viewer-more-panel :focus-visible { outline-offset: 2px; }

@media(max-width:760px), (max-width:1000px) and (max-height:500px) {
  .visitor-mode .mobile-nav,
  .immersive-viewer .photo-tools,
  .immersive-viewer .viewer-more-panel {
    backdrop-filter: blur(12px) saturate(110%);
    -webkit-backdrop-filter: blur(12px) saturate(110%);
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root { --glass-smoke:#25231e; --glass-paper:#f7f5ee; }
  .visitor-mode .mobile-nav { background:#25231e; }
  .series-page:has(.site-header.on-paper) .mobile-nav { background:#f7f5ee; }
}
@media(prefers-reduced-transparency:reduce) {
  :root { --glass-smoke:#25231e; --glass-paper:#f7f5ee; }
  .visitor-mode .mobile-nav { background:#25231e; }
  .series-page:has(.site-header.on-paper) .mobile-nav { background:#f7f5ee; }
  .visitor-mode:not(.home-dynamic) .desktop-nav, .home-dynamic .desktop-nav .nav-rail, .visitor-mode .mobile-nav,
  .home-dynamic .morph-dropdown, .immersive-viewer .photo-tools, .immersive-viewer .viewer-more-panel {
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  .visitor-mode .site-header, .visitor-mode .site-header .logo,
  .visitor-mode .site-header::before, .visitor-mode:not(.home-dynamic) .desktop-nav,
  .visitor-mode .site-header .desktop-nav a, .visitor-mode .mobile-nav,
  .immersive-viewer .photo-tools > button, .immersive-viewer #photo-close,
  .immersive-viewer .viewer-more-panel > button, .immersive-viewer .viewer-more-panel > a {
    transition:none;
  }
}