:root {
  --glass-ink: #fff8ee;
  --glass-gold: #f3d5a2;
  --glass-dark: #161219;
  --glass-line: rgba(255, 250, 245, .20);
  --glass-surface:
    radial-gradient(ellipse at 22% 0%, rgba(255, 250, 245, .08), transparent 70%),
    rgba(20, 19, 24, .64);
  --glass-control: rgba(250, 248, 246, .085);
  --glass-selected: rgba(250, 248, 246, .20);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .22);
}

.nav::before,
.indexbar::before,
.menu.is-open,
.lightbox .lightbox-inner {
  background: var(--glass-surface);
  border-color: var(--glass-line);
  box-shadow: var(--glass-shadow);
}

.nav,
.indexbar {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
}

.nav::before,
.indexbar::before {
  content: "";
  position: absolute;
  inset: 4px 6px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid var(--glass-line);
  border-radius: 24px;
}

.menu.is-open,
.lightbox .lightbox-inner {
  border-radius: 22px;
}

/* The fixed navigation layers share the blur. Individual controls use a tint. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav::before,
  .indexbar::before,
  .menu.is-open {
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
  }
}

.nav .brand-mark,
.menu a,
.menu-toggle,
.indexbar .pill,
.indexbar .index-cta,
.btn,
.soft-btn,
.category-btn,
.lightbox-close,
.mobile-intro-actions a,
.ending-btn {
  color: var(--glass-ink);
  background: var(--glass-control);
  border-color: var(--glass-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11);
}

.menu:not(.is-open) a:not(.cta-nav):not(.active),
.indexbar .pill:not(.active) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.menu a:is(:hover, .active, [aria-current="page"]),
.indexbar .pill:is(:hover, .active),
.category-btn:is(:hover, .active, [aria-pressed="true"]),
.menu-toggle[aria-expanded="true"] {
  color: var(--glass-ink);
  background: var(--glass-selected);
  border-color: var(--glass-line);
}

.btn.primary,
.mobile-intro-actions a:first-child {
  color: #231810;
  background: #f0d2a4;
  border-color: rgba(255, 248, 234, .55);
}

.menu a:active,
.indexbar .pill:active,
.btn:active,
.category-btn:active,
.mobile-intro-actions a:active {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .30);
}

.text-cta,
.faq-q {
  color: var(--glass-gold);
}

form :is(input:not([type="hidden"]), select, textarea) {
  color: var(--glass-ink);
  background: #211a22;
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .23);
}

form :is(input, textarea)::placeholder {
  color: #cbbec2;
  opacity: 1;
}

.nav :is(a, button):focus-visible,
.indexbar a:focus-visible,
main :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--glass-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-transparency: reduce) {
  .nav::before,
  .indexbar::before,
  .menu.is-open,
  .lightbox .lightbox-inner {
    background: var(--glass-dark);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .menu a,
  .menu-toggle,
  .indexbar .pill,
  .category-btn {
    box-shadow: none;
  }
}