/* The one navbar (partials/nav.html), used on every page. Pages define the color tokens. */
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.top .wrap{max-width:1180px;margin:0 auto;padding-inline:20px;display:flex;align-items:center;gap:20px;min-height:60px}
nav.top .logo{font-family:var(--display);font-weight:800;font-size:22px;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:8px;white-space:nowrap}
nav.top .logo .dot{color:var(--lilac)}
nav.top .logo svg{flex:none}
nav.top ul{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0;overflow-x:auto;scrollbar-width:none}
nav.top ul::-webkit-scrollbar{display:none}
nav.top ul a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;font-family:var(--body);font-weight:600;font-size:14px;white-space:nowrap;color:var(--ink)}
nav.top ul a:hover{background:var(--lilac-soft)}
nav.top ul a.cta{background:var(--pine);color:var(--on-pine)}
nav.top ul a.cta:hover{background:var(--pine);opacity:.9}
/* phones: logo + newsletter button on top, the links scroll sideways underneath */
@media (max-width:820px){
  nav.top .wrap{flex-wrap:wrap;gap:6px 12px;padding-block:8px;position:relative}
  nav.top .logo{font-size:20px}
  nav.top ul{order:3;flex-basis:100%;margin:0 -8px}
  nav.top ul li.keep{position:absolute;right:16px;top:10px}
}