.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #4B0082;
  box-shadow: 0 2px 12px rgba(75, 0, 130, 0.28);
}

.site-nav .nav-inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 1180px;
  min-width: 0;
  margin: 0 auto;
  padding: 0 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.site-nav .nav-inner::-webkit-scrollbar { display: none; }
.site-nav .brand,
.site-nav a.navlink {
  flex: 0 0 auto;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav .brand {
  padding: 13px 16px 13px 0;
  font-size: 1.05em;
  font-weight: 750;
}

.site-nav .brand span { color: #E6E6FA; font-weight: 400; }

.site-nav .navlink {
  margin: 8px 0;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.9em;
  font-weight: 650;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.site-nav a.navlink:hover { background: rgba(255, 255, 255, 0.17); }
.site-nav a.navlink.active { background: #fff; color: #4B0082; }

@media (max-width: 640px) {
  .site-nav .nav-inner { padding: 0 12px; }
  .site-nav .brand { padding-right: 12px; }
  .site-nav a.navlink { padding-right: 10px; padding-left: 10px; }
}