/* ==========================================================================
   Layout shell — page-level stacking context and the sticky nav.
   ========================================================================== */

main {
  position: relative;
  z-index: 1;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem clamp(1.25rem, 5vw, 3.5rem);
  backdrop-filter: blur(16px);
  background: linear-gradient(180deg, rgba(5, 5, 10, 0.55), rgba(5, 5, 10, 0));
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
}

.nav__brand-mark {
  background: linear-gradient(135deg, var(--violet-soft), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav__link {
  font-size: 0.9rem;
  color: var(--text-1);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}

.nav__link:hover {
  color: var(--text-0);
  border-color: var(--glass-border);
  background: var(--glass-bg);
}