.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--margin);
  background-color: transparent;
  transition: background-color 0.3s ease;
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background-color: var(--background-primary);
  border-bottom-color: var(--background-divider);
}

.nav__logo {
  font-family: var(--font-body);
  font-size: var(--size-body-md);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-48);
}

.nav__link {
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  font-weight: 400;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.nav__link:hover,
.nav__link--active {
  color: var(--accent-primary);
}

/* Mobile nav */
@media (max-width: 768px) {
  .nav {
    padding-inline: var(--space-24);
  }

  .nav__links {
    gap: var(--space-24);
  }
}

@media (max-width: 480px) {
  .nav__links {
    gap: var(--space-16);
  }

  .nav__link {
    font-size: 13px;
  }
}