.sitenav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--brand-ink) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--brand-ink3);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.sitenav{background:var(--brand-ink)}}
/* The drawer is absolutely positioned against whichever header hosts it. A host that is
   already fixed/sticky/relative is left alone — nav.js only promotes a static one, because
   a CSS rule here would out-specify the homepages' own header{position:fixed}. */
.sitenav-in{max-width:1120px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:20px;
  /* No flex-wrap. The bar must never become two rows — that is what the drawer is for. */
  flex-wrap:nowrap}
.sitenav-home{display:flex;align-items:center;gap:9px;margin-right:auto;text-decoration:none;
  color:var(--brand-cream);font-family:var(--brand-display-font);font-size:17px;
  line-height:1;white-space:nowrap;min-width:0}
.sitenav-home span{overflow:hidden;text-overflow:ellipsis}
.sitenav-mark{height:22px;width:auto;display:block;flex:none}
.sitenav-links{display:flex;gap:22px}
.sitenav-links a{text-decoration:none;color:var(--brand-muted);
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;
  text-transform:uppercase;padding:12px 0;transition:color .15s}
.sitenav-links a:hover,.sitenav-links a[aria-current]{color:var(--brand-cream)}
.sitenav-account{text-decoration:none;color:var(--brand-muted);white-space:nowrap;
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;
  text-transform:uppercase;padding:12px 0;transition:color .15s}
.sitenav-account:hover,.sitenav-account[aria-current]{color:var(--brand-cream)}
.sitenav-cta{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:5px;
  background:var(--brand-pink);color:var(--brand-ink);text-decoration:none;white-space:nowrap;
  font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;
  text-transform:uppercase;transition:filter .15s}
.sitenav-cta:hover{filter:brightness(1.08)}
.sitenav-cta-short{display:none}
.sitenav :focus-visible{outline:2px solid var(--brand-pink);outline-offset:3px;border-radius:3px}

/* The menu button. 44x44 is the touch target, the bars inside are 17px. */
.sitenav-burger{display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;
  background:none;border:1px solid var(--brand-ink3);border-radius:7px;cursor:pointer;
  color:var(--brand-cream);padding:0}
.sitenav-burger span{display:block;width:17px;height:1.5px;background:currentColor;position:relative}
.sitenav-burger span::before,.sitenav-burger span::after{content:"";position:absolute;left:0;
  width:17px;height:1.5px;background:currentColor;transition:transform .18s ease,opacity .15s}
.sitenav-burger span::before{top:-5.5px}
.sitenav-burger span::after{top:5.5px}
.sitenav-burger[aria-expanded="true"] span{background:transparent}
.sitenav-burger[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.sitenav-burger[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

.sitenav-drawer{display:none;position:absolute;top:100%;left:0;right:0;
  border-top:1px solid var(--brand-ink3);border-bottom:1px solid var(--brand-ink3);
  background:var(--brand-ink2);max-height:calc(100vh - 60px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;text-align:left}
.sitenav-drawer[hidden]{display:none}
.sitenav-drawer.is-open{display:block}
.sitenav-drawer a{display:flex;align-items:center;min-height:44px;padding:0 20px;
  text-decoration:none;color:var(--brand-cream);border-bottom:1px solid var(--brand-ink3);
  font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;
  text-transform:uppercase}
.sitenav-drawer a[aria-current]{color:var(--brand-pink)}
.sitenav-drawer-foot{display:flex;gap:18px;padding:14px 20px}
.sitenav-drawer-foot a{display:inline;min-height:0;padding:0;border:0;text-transform:none;
  letter-spacing:.04em;font-weight:500;color:var(--brand-muted)}

@media (max-width:820px){
  .sitenav-links,.sitenav-account{display:none}
  .sitenav-burger{display:flex}
  .sitenav-in{gap:12px}
  .sitenav-cta-long{display:none}
  .sitenav-cta-short{display:inline}
  .sitenav-home{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .sitenav *,.sitenav *::before,.sitenav *::after{transition:none!important;animation:none!important}
}