/* ========================================
   NAVIGATION — always visible, compact on scroll
   ======================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: transparent;
  border-bottom: none;
  transition: background 0.4s ease;
  pointer-events: none; /* let clicks pass through the empty nav bar */
}
/* On hover reveal a subtle full-width backdrop so links stay readable */
.nav:hover {
  background: rgba(7, 14, 41, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Hover zone no longer needed */
.nav-hover-zone { display: none; }

.nav-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: flex-start; justify-content: flex-end;
  height: 72px; padding: 16px 32px 0; transition: height 0.4s;
  pointer-events: none;
}

/* ---- Logo — pinned to far left of viewport, outside max-width ---- */
.nav-logo {
  font-family: 'Newsreader', serif; color: white;
  font-size: 18px; font-weight: 400; letter-spacing: 0.02em;
  position: fixed; top: 16px; left: 24px;
  z-index: 1001; cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center;
  pointer-events: auto;
}

.nav-logo em { font-style: italic; font-weight: 600; color: var(--mint); }

.nav-logo-icon {
  width: 22px; height: 22px; vertical-align: middle; margin-right: 9px; margin-top: -1px;
  flex-shrink: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Links — visible by default, fade out on scroll, re-appear on nav hover */
.nav-links {
  display: flex; gap: 6px;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: auto;
}
.nav-links a {
  color: rgba(255, 255, 255, 0.55); text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 6px 14px;
  border-radius: 100px; transition: all 0.25s;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--mint); background: rgba(157, 212, 207, 0.1);
}

/* Scrolled state: links hidden, revealed on hover */
.nav.nav-scrolled .nav-links {
  opacity: 0; pointer-events: none; transform: translateX(10px);
}
.nav.nav-scrolled:hover .nav-links {
  opacity: 1; pointer-events: auto; transform: translateX(0);
}

.nav-mob {
  display: none; background: none; border: none;
  color: white; font-size: 24px; cursor: pointer;
  pointer-events: auto;
}

/* Floating logo — no longer needed (nav stays visible) */
.nav-floating-logo { display: none; }