/* === SITE NAV === */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Matches .hero, which the nav sits directly above at the top of the
     page — both read var(--color-primary-strong), so they retheme
     together with the day's kueh (src/organisms/kueh-of-day.js) instead
     of drifting apart. Same noise-grain texture as .matte-metal-surface
     (styles/atoms.css)/.hero (index.html) layered on top too, for the
     same reason — the exact feTurbulence recipe, tiled and blended via
     multiply, over the flat theme color rather than that panel's own
     metal-tinted gradient underneath. */
  background-color: var(--color-primary-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  background-blend-mode: multiply;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Anchor-jump targets: offsets each linked section's scroll position so it
   stops clear of the sticky nav instead of scrolling right underneath it.
   --site-nav-height is measured in site-nav.js (the nav's own height
   differs between desktop and the 640px mobile layout below); the 64px
   fallback only matters for the instant before that JS runs. */
#brief,
#timeline,
#guide,
#leveling-up {
  scroll-margin-top: calc(var(--site-nav-height, 64px) + 12px);
}

.site-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.site-nav a {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  /* on-primary, not on-surface: the nav's own background is now
     var(--color-primary-strong) (matches .hero), so its text needs the
     token pairing audited against *that* background, not --color-surface. */
  --sheen-base: var(--color-text-on-primary-muted);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}

.site-nav a:hover {
  --sheen-base: var(--color-text-on-primary);
}

.site-nav a.active {
  --sheen-base: var(--color-text-on-primary);
  border-bottom-color: var(--color-accent);
}

@media (max-width: 640px) {
  .site-nav-inner {
    padding: 12px 16px;
    gap: 20px;
  }
  .site-nav a {
    font-size: 0.75rem;
  }
}