/* sticky header, desktop nav and mobile menu */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--paper);background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.brand{text-decoration:none;font:700 17px/1 var(--f-display);letter-spacing:-.02em;white-space:nowrap}
.brand small{font:400 13px/1 var(--f-body);letter-spacing:0;color:var(--ink-3);margin-left:10px}
.nav-links{display:flex;gap:32px;font-size:15px}
.nav-links a{text-decoration:none;color:var(--ink-2);background:linear-gradient(var(--ink),var(--ink)) 0 100%/0 1.5px no-repeat;padding-bottom:4px;transition:background-size .35s cubic-bezier(.16,1,.3,1),color .2s}
.nav-links a:hover{color:var(--ink);background-size:100% 1.5px}

.nav-right{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:50%;width:18px;height:1.5px;margin-left:-9px;background:var(--ink);transition:transform .3s cubic-bezier(.16,1,.3,1),background-color .2s}
.burger span{top:50%;margin-top:-.75px}
.burger span::before,.burger span::after{content:"";left:0;margin-left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--ink);box-shadow:0 24px 40px -30px var(--shadow)}
/* one full-width column: overrides justify-content:space-between, which .nav .wrap also applies to this inner .wrap, so every row is a full-width touch target */
.mnav .wrap{height:auto;padding-block:8px 24px;display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;align-items:stretch}
.mnav a:not(.btn){display:block;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;font:500 1.35rem/1.2 var(--f-display);letter-spacing:-.025em}
.mnav .btn{margin-top:20px}
@media (prefers-reduced-motion:no-preference){.mnav:not([hidden]){animation:swap .35s cubic-bezier(.16,1,.3,1) both}}

/* responsive */
@media (max-width:1000px){
  .nav-links{display:none}
  .burger{display:block}
}
@media (min-width:1001px){
  .mnav{display:none!important}
}
@media (max-width:560px){
  .brand{font-size:15px}
  .brand small{display:none}
}
@media (max-width:480px){
  .nav-right .btn{display:none}
}