/* Header: one sticky line — account left, X-style tabs center, empty right
   spacer keeps the tabs centered. Only the tab group carries a backing; the
   avatar floats on its shadow. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 1vw, 0.8rem);
  padding: 0.4rem clamp(0.45rem, 2vw, var(--gap));
  transition: transform 0.22s ease;
}
/* navhide.js: slides off scrolling down, back on scrolling up */
.site-header.nav-hidden { transform: translateY(-110%); }

.header-side { flex: 1; display: flex; align-items: center; min-width: 0; }
.header-side-right { justify-content: flex-end; }
.header-account { display: inline-flex; }
.header-account .avatar {
  width: clamp(1.7rem, 4vw, 2rem);
  height: clamp(1.7rem, 4vw, 2rem);
  margin: 0;
}
.header-account:hover .avatar { border-color: var(--gold); }

.site-header .signin {
  font-size: clamp(0.64rem, 1.6vw, 0.8rem);
  padding: 0.24rem clamp(0.35rem, 1vw, 0.8rem);
  white-space: nowrap;
}

/* X-style tab group: the dark backing hugs the tabs, not the viewport.
   All sizes are fluid so the line degrades continuously instead of
   overflowing between breakpoints. */
.navlinks {
  display: flex;
  width: fit-content;
  padding: 0 clamp(0.15rem, 0.8vw, 0.4rem);
  background: var(--panel);
}

.navlinks a {
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: clamp(0.001em, 0.15vw, 0.06em);
  font-size: clamp(0.71rem, 1.7vw, 0.9rem);
  color: var(--muted);
  padding: 0.68rem clamp(0.4rem, 1.6vw, 1.2rem) 0.55rem;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.navlinks a:hover { color: var(--text); }
.navlinks a.active {
  color: var(--text);
  border-bottom-color: var(--gold);
}

/* Below the point where equal side columns cost too much width, give up
   perfect tab centering: sides shrink to content, tabs center themselves. */
@media (max-width: 760px) {
  .header-side { flex: none; }
  .navlinks { margin: 0 auto; }
}

/* Tiny screens: with the wordmark gone the account button shares the tab
   line all the way down — just tighten the tabs so four of them plus the
   sign-in/avatar never overflow. */
@media (max-width: 374px) {
  .site-header { gap: 0.25rem; }
  .navlinks a {
    padding: 0.68rem 0.3rem 0.55rem;
    font-size: 0.68rem;
    letter-spacing: 0;
  }
}