/* Top nav */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 18px var(--gutter);
  transition: transform 420ms var(--ease-out-quart), background-color 280ms var(--ease-out-quart), border-color 280ms var(--ease-out-quart), color 280ms var(--ease-out-quart);
  border-bottom: 1px solid transparent;
  mix-blend-mode: normal;
}
.nav.hidden { transform: translateY(-110%); }
.nav.on-cream { background: rgba(245, 241, 232, 0.92); color: var(--mv-ink); border-bottom-color: var(--mv-bone); backdrop-filter: blur(10px); }
.nav.on-dark  { background: rgba(10, 11, 10, 0.72); color: var(--mv-cream); border-bottom-color: var(--mv-line); backdrop-filter: blur(10px); }
.nav.on-lime  { background: rgba(184, 242, 48, 0.92); color: var(--mv-ink); border-bottom-color: rgba(0,0,0,0.12); backdrop-filter: blur(10px); }

.nav-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ff-display);
  font-weight: 700; letter-spacing: -0.02em;
  font-size: 15px;
}
.nav-brand .mark {
  width: 26px; height: 26px;
  display: inline-block;
  background: var(--mv-lime);
  -webkit-mask: url(../assets/mv-icon-lime.png) center/contain no-repeat;
          mask: url(../assets/mv-icon-lime.png) center/contain no-repeat;
  transition: background-color 280ms var(--ease-out-quart);
}
.nav.on-cream .nav-brand .mark,
.nav.on-lime  .nav-brand .mark { background: var(--mv-ink); }

.nav-links { display: flex; justify-content: center; gap: 28px; }
.nav-links a {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
  opacity: 0.82;
  transition: opacity 150ms var(--ease-out-quart);
}
.nav-links a:hover { opacity: 1; }
.nav-links a::after {
  content: ""; position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--mv-lime);
  transition: right 220ms var(--ease-out-quart);
}
.nav-links a:hover::after { right: 0; }

.nav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--mv-lime);
  color: var(--mv-lime);
  transition: all 180ms var(--ease-out-quart);
}
.nav-cta:hover {
  background: var(--mv-lime);
  color: var(--mv-ink);
}
.nav.on-cream .nav-cta { border-color: var(--mv-ink); color: var(--mv-ink); }
.nav.on-cream .nav-cta:hover { background: var(--mv-ink); color: var(--mv-cream); }
.nav.on-lime .nav-cta { border-color: var(--mv-ink); color: var(--mv-ink); }
.nav.on-lime .nav-cta:hover { background: var(--mv-ink); color: var(--mv-lime); }

@media (max-width: 720px) {
  .nav-links { display: none; }
}