/* Glass navigation. A CSS approximation of Apple's Liquid Glass look
   (backdrop blur + saturation + edge highlights). Not Apple's material.
   Remove the <link> to glass.css in the page head to revert. */
:root{
  --glass-fill:linear-gradient(180deg,rgb(255 255 255/.58),rgb(255 255 255/.30));
  --glass-edge:rgb(255 255 255/.65);
  --glass-shadow:inset 0 1px 0 rgb(255 255 255/.85),inset 0 -1px 0 rgb(24 36 70/.05),0 1px 2px rgb(24 40 90/.06),0 10px 28px -12px rgb(24 40 90/.22);
  --glass-shadow-raised:inset 0 1px 0 rgb(255 255 255/.85),inset 0 -1px 0 rgb(24 36 70/.05),0 1px 2px rgb(24 40 90/.08),0 16px 36px -14px rgb(24 40 90/.30);
}
/* the full-width bar stays out of the way; the glass lives on the capsule */
nav.fixed.top-0,nav.fixed.top-0.nav-glass{background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
nav.fixed.top-0>div:first-child{height:auto;padding-top:12px;padding-bottom:4px}

nav.fixed.top-0>div>div.hidden,
nav.fixed.top-0>div>button.md\:hidden,
nav.fixed.top-0>div.md\:hidden{
  background:var(--glass-fill);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);
  transition:box-shadow .3s cubic-bezier(.16,1,.3,1),background .3s cubic-bezier(.16,1,.3,1);
}
/* desktop capsule */
nav.fixed.top-0>div>div.hidden{padding:5px;border-radius:999px}
nav.fixed.top-0>div>div.hidden>a:last-child{border-radius:999px;margin-left:8px}
nav.nav-glass>div>div.hidden,nav.nav-glass>div>button.md\:hidden{box-shadow:var(--glass-shadow-raised)}
/* mobile: glass menu button and inset glass dropdown */
nav.fixed.top-0>div>button.md\:hidden{width:42px;height:42px;display:grid;place-items:center;padding:0;border-radius:999px}
nav.fixed.top-0>div.md\:hidden{margin:8px 16px 0;border-radius:20px;border-top:1px solid var(--glass-edge)}
@media (min-width:768px){nav.fixed.top-0>div>button.md\:hidden,nav.fixed.top-0>div.md\:hidden{display:none}}

/* fallbacks: no blur support, or the visitor asked for less transparency */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  nav.fixed.top-0>div>div.hidden,nav.fixed.top-0>div>button.md\:hidden,nav.fixed.top-0>div.md\:hidden{background:rgb(243 242 240/.97)}
}
@media (prefers-reduced-transparency:reduce){
  nav.fixed.top-0>div>div.hidden,nav.fixed.top-0>div>button.md\:hidden,nav.fixed.top-0>div.md\:hidden{background:rgb(243 242 240);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  nav.fixed.top-0>div>div.hidden,nav.fixed.top-0>div>button.md\:hidden{transition:none}
}
/* the dropdown holds text over text, so it gets a denser fill for legibility */
nav.fixed.top-0>div.md\:hidden{background:linear-gradient(180deg,rgb(250 250 249/.9),rgb(244 243 241/.84));-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%)}