.nav{position:fixed;top:10px;right:12px;z-index:60}
.nav>summary{
  list-style:none;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:11px;cursor:pointer;
  background:#12281D;border:1px solid rgba(198,163,83,.42);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.85)
}
/* Safari draws its own disclosure triangle and ignores list-style. */
.nav>summary::-webkit-details-marker{display:none}
.nav>summary::marker{content:""}
.nav>summary:hover{border-color:var(--gold)}
.nav>summary:focus-visible{outline:none;box-shadow:0 0 0 2px var(--gold)}
.nav-bars{display:flex;flex-direction:column;gap:4px;width:19px}
/* 2px bar on a 4px gap puts the outer two exactly 6px from the middle, which is
   how far each has to travel to meet it and make the cross. */
.nav-bars span{height:2px;background:var(--gold-soft);border-radius:2px;transition:transform .18s,opacity .18s}
.nav[open] .nav-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav[open] .nav-bars span:nth-child(2){opacity:0}
.nav[open] .nav-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-panel{
  position:absolute;top:52px;right:0;
  width:min(272px,calc(100vw - 24px));
  max-height:calc(100vh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#12281D;border:1px solid var(--stroke);border-radius:13px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.9);padding:9px
}
.nav-panel a{
  display:block;padding:8px 12px;border-radius:8px;
  text-decoration:none;color:#DDE6DF;font-size:.93rem;line-height:1.35
}
.nav-panel a:hover{background:rgba(198,163,83,.14);color:var(--gold-soft)}
.nav-panel a:focus-visible{outline:none;box-shadow:0 0 0 2px var(--gold)}
/* The page you are on is a link to itself; say so rather than just styling it. */
.nav-panel a[aria-current="page"]{color:var(--gold);font-weight:650;background:rgba(198,163,83,.10)}
.nav-h{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:650;
  color:var(--text-2);opacity:.7;margin:11px 12px 4px
}
.nav-h:first-child{margin-top:2px}
/* The burger is fixed to the viewport corner, so on a wide screen it sits well
   clear of the 760px content column. Narrow enough and it lands on top of the
   sticky promo bar instead, so the bar stops short of it. Above that width the
   clearance would only make the promo look off-centre. */
@media(max-width:880px){ .promo-bar{padding-right:46px} }
@media(prefers-reduced-motion:reduce){ .nav-bars span{transition:none} }