.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  min-width:46px;
  min-height:46px;
  padding:8px 12px;
  border:3px solid var(--black);
  border-radius:14px;
  background:var(--yellow);
  color:var(--black);
  box-shadow:3px 3px 0 var(--black);
  font:800 13px/1 var(--font-display, var(--display));
  cursor:pointer;
}
.nav-toggle:focus-visible{outline:4px solid var(--cobalt);outline-offset:3px;}
.nav-toggle-icon{display:grid;gap:4px;width:20px;}
.nav-toggle-icon::before,.nav-toggle-icon::after,.nav-toggle-icon span{content:"";display:block;height:3px;border-radius:99px;background:currentColor;transition:transform .18s ease,opacity .18s ease;}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span{opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{transform:translateY(-7px) rotate(-45deg);}

@media(max-width:760px){
  .topbar .wrap{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:10px 14px;
    height:auto !important;
    min-height:78px;
    width:100%;
    padding:10px var(--pad-x,20px) !important;
  }
  .topbar .brand{grid-column:1;grid-row:1;justify-self:start;}
  .nav-toggle{display:inline-flex;grid-column:3;grid-row:1;justify-self:end;}
  .topbar .topbar-mid{
    display:none !important;
    grid-column:1/-1;
    grid-row:2;
    width:100%;
    padding:8px 0 4px;
    gap:4px;
    flex-direction:column;
    align-items:stretch;
  }
  .topbar .topbar-mid[data-open="true"]{display:flex !important;}
  .topbar .topbar-mid a{
    display:block;
    width:100%;
    padding:12px 14px;
    border:2px solid var(--black);
    border-radius:12px;
    background:#fff;
    text-align:center;
  }
  .topbar .topbar-mid a[aria-current="page"]{background:var(--mint);}
  .topbar .topbar-mid a::after{display:none;}
  .topbar > .wrap > .btn{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    width:auto;
    max-width:100%;
    padding:11px 16px;
    font-size:clamp(12px,2.2vw,14px);
    line-height:1.1;
    white-space:nowrap;
    text-align:center;
    box-shadow:4px 4px 0 rgba(20,20,14,.24);
  }
}

@media(max-width:520px){
  .topbar .wrap{grid-template-columns:1fr auto;}
  .topbar > .wrap > .btn{display:none;}
  .nav-toggle{grid-column:2;}
  .topbar .brand{font-size:26px;gap:10px;}
  .topbar .brand .badge-x{width:40px;height:40px;font-size:20px;}
}

@media(prefers-reduced-motion:reduce){
  .nav-toggle-icon::before,.nav-toggle-icon::after,.nav-toggle-icon span{transition:none;}
}