/* Liquid glass nav: the whole navbar is one floating pill (logo, three links,
   the "Hiring?" CTA). js/liquid-glass.js upgrades it at runtime:
   - Chromium: backdrop-filter: url(#lens) refracts the page through a
     Snell's-law displacement map with a little chromatic aberration.
   - Safari / Firefox ([data-glass="simple"]): frosted glass, strong blur and
     saturation, a white body and a crisp inner rim.
   - Reduced transparency ([data-glass="opaque"]): a solid white pill.
   Loaded after styles.css and glass-nav.css; it overrides both inside .nav. */

.nav,
.nav.scrolled,
.nav:not(.scrolled) {
  --lg-ink: #141414;
  --lg-ink-soft: rgba(20, 20, 20, .62);
  top: 14px; left: 50%; right: auto;
  transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 24px);
  height: 56px;
  padding: 0 7px 0 20px;
  gap: clamp(18px, 2.6vw, 40px);
  justify-content: flex-start;
  border-radius: 999px;
  pointer-events: auto;
  color: var(--lg-ink);
  mix-blend-mode: normal;
  isolation: isolate;
  background-color: rgba(255, 255, 255, .3);
  box-shadow: 0 12px 40px rgb(0 0 0 / .18), inset 0 1px 0 rgb(255 255 255 / .55), inset 0 0 0 1px rgb(255 255 255 / .18);
  -webkit-backdrop-filter: blur(10px) saturate(1.6) brightness(1.04);
  backdrop-filter: blur(10px) saturate(1.6) brightness(1.04);
  transition: color .3s, background-color .3s, box-shadow .3s;
}

/* Safari / Firefox: frosted. */
.nav[data-glass="simple"] {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgb(255 255 255 / .42), rgb(255 255 255 / .22));
  -webkit-backdrop-filter: blur(18px) saturate(1.8) brightness(1.05);
  backdrop-filter: blur(18px) saturate(1.8) brightness(1.05);
  box-shadow: 0 12px 40px rgb(0 0 0 / .16), inset 0 1px 0 rgb(255 255 255 / .75), inset 0 0 0 1px rgb(255 255 255 / .38);
}
.nav[data-glass="opaque"] {
  background: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 12px 40px rgb(0 0 0 / .14), inset 0 0 0 1px rgba(20, 20, 20, .08);
}

/* Over the black About and footer the text flips to white; the glass body
   darkens a touch so the white labels keep their contrast. */
.nav.is-dark { --lg-ink: #fff; --lg-ink-soft: rgba(255, 255, 255, .7); }
.nav.is-dark[data-glass="simple"] {
  background-image: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / .06));
  box-shadow: 0 12px 40px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .3), inset 0 0 0 1px rgb(255 255 255 / .14);
}
.nav.is-dark[data-glass="refract"] { background-color: rgba(30, 30, 32, .55); }
.nav.is-dark[data-glass="opaque"] { background: #141414; }

/* Logo and links take the pill's ink. */
.nav .logo, .nav:not(.scrolled) .logo { color: var(--lg-ink); }
.nav .logo .st-svg, .nav .logo svg { height: 26px; }
.nav .menu { gap: clamp(2px, .6vw, 8px); align-items: center; perspective: none; }

/* The old glass buttons become plain text links inside the glass. */
.nav .glass-button-wrap { transform: none !important; transform-style: flat; }
.nav .glass-button-shadow, .nav .glass-button::after, .nav .glass-button-text::after { display: none; }
.nav .glass-button,
.nav .glass-button:hover {
  --pad-y: .62em; --pad-x: .9em;
  padding: var(--pad-y) var(--pad-x);
  font-size: 14.5px;
  background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: none;
  border-radius: 999px;
  transition: background-color .25s, color .25s;
}
.nav .glass-button-text { color: var(--lg-ink); text-shadow: none; font-weight: 500; }
.nav .glass-button:hover, .nav .glass-button:focus-visible { background-color: rgb(127 127 127 / .14); }
.nav .glass-button:focus-visible { outline: 2px solid var(--cobalt, #2f2bff); outline-offset: 2px; }

/* The one primary: an ink pill inside the glass (white on the dark sections). */
.nav .glass-button-wrap.is-primary { margin-left: clamp(4px, 1vw, 12px); }
.nav .glass-button-wrap.is-primary .glass-button,
.nav .glass-button-wrap.is-primary .glass-button:hover {
  --pad-y: .78em; --pad-x: 1.25em;
  background-color: #141414;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18);
}
.nav .glass-button-wrap.is-primary .glass-button:hover { background-color: #000; }
.nav .glass-button-wrap.is-primary .glass-button-text { color: #fff; }
.nav.is-dark .glass-button-wrap.is-primary .glass-button { background-color: #fff; }
.nav.is-dark .glass-button-wrap.is-primary .glass-button-text { color: #141414; }

/* The SVG filter host never takes space. */
.lg-filter { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

@media (max-width: 820px) {
  .nav, .nav.scrolled, .nav:not(.scrolled) {
    top: 10px; height: 48px; padding: 0 5px 0 14px; gap: 10px;
    max-width: calc(100% - 16px);
  }
  .nav .logo .st-svg, .nav .logo svg { height: 20px; }
  .nav .menu { gap: 0; }
  .nav .glass-button, .nav .glass-button:hover { --pad-y: .6em; --pad-x: .6em; font-size: 13px; }
  .nav .glass-button-wrap.is-primary { margin-left: 2px; }
  .nav .glass-button-wrap.is-primary .glass-button { --pad-y: .7em; --pad-x: .95em; }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav .glass-button { transition: none; }
}