/* Canonical site navigation.
   Shared across every page so all headers match the landing page header.
   Colors are hardcoded (not var()) so the nav renders identically regardless
   of the design tokens defined by an individual page. Layout/position is left
   to each page so existing content flow is not disturbed. */

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 2rem;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #141414;
  transition: border-color 0.3s, background 0.3s;
}

nav.scrolled {
  border-bottom-color: #232323;
  background: rgba(0, 0, 0, 0.92);
}

nav .brand {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #FFFFFF;
}

nav .brand a {
  color: inherit;
  text-decoration: none;
}

/* Suppress the pseudo-element dot some pages draw via .brand::before;
   the canonical markup uses an explicit .brand-mark element instead. */
nav .brand::before {
  content: none !important;
}

nav .brand-mark {
  flex: none;
  width: 7px;
  height: 7px;
  background: #7DC9A2;
  border-radius: 50%;
  box-shadow: 0 0 10px #7DC9A2;
  animation: navPulse 2.4s ease-in-out infinite;
}

nav ul {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

nav ul li {
  margin: 0;
}

nav a {
  color: #6B7280;
  text-decoration: none;
  transition: color 0.2s;
  position: relative;
}

nav a:hover {
  color: #FFFFFF;
}

nav a.active {
  color: #FFFFFF;
}

nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: #FF6B35;
}

@keyframes navPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}