/* ============ NAV ============ */
.nav{
  position:fixed; top:16px; left:0; right:0; z-index:100;
  display:flex; justify-content:center; pointer-events:none;
  transition:top .4s var(--e-out);
}
.nav__inner{
  pointer-events:auto;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px;
  width:min(1360px, calc(100% - 32px));
  padding:14px 18px 14px 22px;
  border-radius:100px;
  background:transparent;
  border:1px solid transparent;
  transition:background .4s var(--e-out), backdrop-filter .4s, border-color .4s, padding .4s, box-shadow .4s;
}
.nav.is-stuck .nav__inner{
  background:rgba(244,242,236,.72);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-color:rgba(16,16,16,.08);
  box-shadow:0 20px 40px -20px rgba(16,16,16,.15);
  padding:10px 14px 10px 18px;
}

.nav__logo{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:15px; letter-spacing:-.02em;
}
.nav__logo-mark{
  width:22px; height:16px; display:inline-flex; align-items:flex-end; justify-content:center;
  color:var(--violet);
  transition: transform .3s var(--e-spring);
}
.nav__logo:hover .nav__logo-mark{ transform: translateY(-1px); }
.nav__logo-mark svg{ width:100%; height:auto; overflow:visible; display:block; }
.nav__logo-word{ letter-spacing:-.02em; font-weight:700; }
.nav__logo-word .v{ color:var(--ink); }
.nav__logo-word .a{ color:var(--violet); }

.nav__center{
  display:flex; justify-content:center; gap:6px;
  padding:4px 6px; border-radius:100px;
}
.nav__center a{
  padding:8px 14px; font-size:13.5px; font-weight:450;
  color:var(--ink-2); border-radius:100px; position:relative;
  transition:color .3s, background .3s;
}
.nav__center a::before{
  content:""; position:absolute; inset:0; border-radius:100px;
  background:rgba(16,16,16,.05); opacity:0; transition:opacity .25s;
}
.nav__center a:hover::before{ opacity:1; }
.nav__center a:hover{ color:var(--ink); }
.nav__center a.is-active{ color:var(--ink); }
.nav__center a.is-active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  background:var(--violet); border-radius:2px;
}

.nav__right{ display:flex; align-items:center; gap:8px; }
.nav__login{
  font-size:13.5px; padding:8px 14px; color:var(--ink-2); border-radius:100px;
  transition:color .25s, background .25s;
}
.nav__login:hover{ color:var(--ink); background:rgba(16,16,16,.05); }

.nav__cta{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px 10px 18px; background:var(--ink); color:var(--ivory);
  font-size:13.5px; font-weight:500; border-radius:100px;
  transition:background .3s, gap .3s;
}
.nav__cta:hover{ background:var(--violet); gap:10px; }
.nav__cta svg{ transition:transform .3s; }
.nav__cta:hover svg{ transform:translateX(2px); }

@media (max-width:960px){
  .nav__center{ display:none; }
  .nav__inner{ grid-template-columns:auto 1fr; padding:10px 14px 10px 16px; }
  .nav__right{ justify-self:end; }
  .nav__login{ display:none; }
}