/* The shared site navigation bar.
   Every page except the homepage (which has its own hero nav) and maintenance.html
   (deliberately bare — during an outage the links would be dead) links this file and
   uses the same <nav class="sitenav"> markup, so the bar is identical everywhere.
   It relies only on the --ink / --dim / --acc1 / --acc2 vars every page already defines. */

.sitenav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 20px; flex-wrap: wrap;
  /* Pinned to the top of the viewport on every page. The bar needs its own opaque-ish
     background or the page content shows through as it scrolls underneath. */
  position: sticky; top: 0; z-index: 60;
  background: rgba(5, 8, 15, .93);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding: 14px 0; margin: 0 0 30px;
}
.sitenav .wordmark {
  font-weight: 800; font-size: 18px; letter-spacing: -.3px;
  text-decoration: none; color: var(--ink, #eef2ff); flex: none;
}
.sitenav .wordmark span {
  background: linear-gradient(90deg, var(--acc1, #6e8bff), var(--acc2, #3dd6f5));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sitenav-links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.sitenav-links a {
  color: var(--dim, #8e97b3); text-decoration: none; font-size: 14px; white-space: nowrap;
}
.sitenav-links a:hover { color: var(--ink, #eef2ff); }
/* The page you are already on stays lit, so the bar doubles as a "you are here". */
.sitenav-links a[aria-current="page"] { color: var(--ink, #eef2ff); font-weight: 600; }

/* On a phone the bar is pinned, so it must not eat the viewport: keep it to a single
   row and let the links scroll sideways rather than wrapping onto three lines. */
/* Full-bleed variant: wrap the bar in <div class="navbar"> and the background runs edge
   to edge instead of stopping at the content column. Needed wherever the page background
   is not flat — the 404's orbs showed past the ends of a column-width bar. */
.navbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(5, 8, 15, .93);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.navbar { margin-bottom: 30px; }
.navbar .sitenav {
  position: static; background: none; border-bottom: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  max-width: 1060px; margin: 0 auto; padding: 14px 24px;
}

@media (max-width: 700px) {
  .sitenav { flex-wrap: nowrap; gap: 14px; padding: 11px 0; margin-bottom: 22px; }
  .navbar .sitenav { padding: 11px 20px; }
  .sitenav-links {
    flex-wrap: nowrap; overflow-x: auto; min-width: 0; gap: 14px;
    scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  }
  .sitenav-links::-webkit-scrollbar { display: none; }
  .sitenav-links a { font-size: 13px; }
}