/* Shared top navigation - single owner for the site-wide nav.
   Matches the home page hero-dark nav (prototype-hero-dark.html). Literal colors
   on purpose: this file loads on pages with different :root palettes.
   Fonts are pinned to the system mono stack WITHOUT webfont names on purpose:
   the home page does not load JetBrains Mono, so it renders this stack's system
   fallback - pinning the same stack here keeps every page's nav identical. */
nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 48px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  /* transparent at top so the bar dissolves into the page; glass only after scroll */
  background: transparent;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background .25s ease, border-color .25s ease;
}
nav.nav-scrolled,
nav:has(.nav-links.open) {
  background: rgba(5, 5, 5, .55);
  border-bottom-color: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
/* engines without backdrop-filter get a near-solid bar instead, but only after scroll */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  nav.nav-scrolled, nav:has(.nav-links.open) { background: rgba(5, 5, 5, .96); }
}
/* Full-bleed top nav on the capped-width pages (.tape-shell on the tape pages,
   .shell on Terms/Privacy): stretch it to the viewport so it matches the home
   page, where nav is a direct child of body. Both containers are centered, so
   width 100vw with margin-left calc(50% - 50vw) lands the box flush with the
   viewport edges. The global overflow-x: clip prevents any scrollbar side
   effect. Home nav is not inside either container and is untouched. */
.tape-shell > nav,
.shell > nav {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #f2f0ea;
  text-decoration: none;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-logo {
  width: 32px; height: 32px;
  display: block;
  flex: none;
}
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  color: #a3a3a0;
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.nav-links a.on { color: #ec011c; }
.nav-links a:hover { color: #f2f0ea; }
.nav-cta {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 9px 18px;
  color: #f2f0ea !important;
}
.nav-links a.nav-cta.on { color: #ec011c !important; border-color: rgba(236,1,28,.55); }
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 9px;
  background: #000000;
  cursor: pointer;
}
.nav-toggle .dot { width: 5px; height: 5px; border-radius: 50%; background: #ec011c; }
.nav-toggle:hover, .nav-toggle:focus-visible { border-color: #ec011c; outline: none; }
@media (max-width: 980px) {
  nav { padding: 18px 20px; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% - 6px);
    right: 20px;
    width: min(240px, calc(100vw - 40px));
    padding: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: #050505;
    box-shadow: 0 20px 50px rgba(0,0,0,.8);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; }
}