/* Keep the site navigation readable on the homepage and the guides. */
.topbar .brand-mark{flex:none}
.topbar .brand-name{max-width:none}
.topbar .nav a[aria-current]{color:var(--accent-deep);text-decoration:underline;text-underline-offset:.3em}

@media(min-width:1241px){
  .topbar .topbar-inner{width:min(calc(100% - 40px),1400px);gap:20px}
  .topbar .brand,.topbar .top-actions{flex:none}
  .topbar .nav{gap:clamp(14px,1.3vw,23px)}
  .topbar .nav a,.topbar .top-actions .btn{white-space:nowrap}
}

@media(min-width:1121px) and (max-width:1240px){
  .topbar .menu-toggle{display:block}
  .topbar .nav{position:fixed;top:78px;right:0;left:0;display:grid;gap:0;padding:10px 20px 24px;border-bottom:1px solid var(--line);background:var(--paper);opacity:0;pointer-events:none;transform:translateY(-10px);transition:.2s ease}
  .topbar .nav.is-open{opacity:1;pointer-events:auto;transform:none}
  .topbar .nav a{padding:14px 0;border-bottom:1px solid var(--line)}
}


@media(max-width:1240px){
  .topbar .nav{visibility:hidden;max-height:calc(100dvh - 78px);overflow-y:auto}
  .topbar .nav.is-open{visibility:visible}
}

@media(min-width:1241px){
  body.nav-open:not(.modal-open){overflow:visible}
}