/* Mobile navigation belongs only to the two portfolio worlds. */
.mobile-menu-toggle{display:none}
@media(max-width:850px){
 #site.white>.topbar,#site.dark>.topbar{flex-wrap:nowrap;min-height:72px}
 #site .mobile-menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;flex:0 0 44px;width:44px;height:44px;padding:10px;border:0;background:transparent;color:inherit;cursor:pointer}
 #site .mobile-menu-toggle span{display:block;width:24px;height:2px;background:currentColor;transition:transform .25s,opacity .2s}
 #site .mobile-menu-toggle:hover,#site .mobile-menu-toggle:focus-visible{color:var(--nav-focus)}
 #site .mobile-menu-toggle:focus-visible{outline:2px solid var(--nav-focus);outline-offset:2px}
 #site .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 #site .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
 #site .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 #site .topbar>.nav-right{display:none;position:absolute;top:100%;left:0;right:0;width:auto;max-height:calc(100svh - 80px);overflow-y:auto;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;margin:0;padding:14px 6% 24px;background:#0b0b0e;color:#fff;border-bottom:1px solid #29272f;box-shadow:0 20px 30px #0003}
 #site .topbar.mobile-menu-open>.nav-right{display:flex;animation:mobile-menu-enter .2s ease-out}
 #site .topbar>.nav-right>a{display:block;padding:15px 0;margin:0;font-size:17px;letter-spacing:.04em;color:#fff}
 #site.dark .topbar>.nav-right{background:#080b10;border-bottom-color:#baff2933}
 #site .topbar>.nav-right .switch{display:flex;align-self:flex-start;margin-top:18px;gap:6px}
 #site .topbar>.nav-right .switch button{padding:11px 14px;font-size:11px}
}
@keyframes mobile-menu-enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#site .mobile-menu-toggle span{transition:none}#site .topbar.mobile-menu-open>.nav-right{animation:none}}

/* Keep the complete section menu comfortable on smaller desktop widths. */
@media(min-width:851px) and (max-width:1200px){
 #site .topbar>.nav-right{gap:12px}
 #site .topbar>.nav-right>a{font-size:10px;letter-spacing:0;white-space:nowrap}
 #site .topbar>.nav-right .switch button{padding:6px 8px;font-size:10px}
}