html { scroll-behavior: auto; }

.nav-context {
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: 34px;
  padding-left: 24px;
  border-left: 1px solid rgba(255,255,255,.14);
  white-space: nowrap;
}
.topbar.is-fixed .nav-context { display: flex; }
.nav-context small { color: #686371; font: 500 .48rem/1 "IBM Plex Mono",monospace; letter-spacing: .13em; }
.nav-context strong { color: #d8d5df; font: 500 .56rem/1 "IBM Plex Mono",monospace; letter-spacing: .08em; text-transform: uppercase; }

.topbar__nav > a { position: relative; display: flex; align-items: baseline; gap: 7px; padding: 28px 0 25px; transition: color .25s ease; }
.topbar.is-fixed .topbar__nav > a { padding-top: 22px; padding-bottom: 21px; }
.topbar__nav > a small { color: rgba(168,240,90,.35); font-size: .46rem; transition: color .25s ease; }
.topbar__nav > a::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:#a8f05a; transform:scaleX(0); transform-origin:left; transition:transform .28s ease; }
.topbar__nav > a.is-active { color:#f1f0e7; }
.topbar__nav > a.is-active small { color:#a8f05a; }
.topbar__nav > a.is-active::after { transform:scaleX(1); }
.topbar__nav > a:focus { outline:none; }
.topbar__nav > a:focus-visible { outline:1px solid rgba(168,240,90,.75); outline-offset:-4px; }
.topbar__nav-pages { display:none; }

.menu-toggle { display:none; position:relative; width:42px; height:42px; padding:0; border:1px solid rgba(255,255,255,.18); background:transparent; color:#fff; cursor:pointer; }
.menu-toggle i { position:absolute; left:11px; width:18px; height:1px; background:currentColor; transition:transform .3s ease,top .3s ease; }
.menu-toggle i:first-child { top:16px; }
.menu-toggle i:last-child { top:24px; }
.menu-toggle[aria-expanded="true"] i:first-child { top:20px; transform:rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:last-child { top:20px; transform:rotate(-45deg); }

@media (max-width: 1220px) {
  .topbar__nav { gap: 1.35rem; }
  .topbar__actions { margin-left: 1.5rem; }
  .nav-context { display:none!important; }
}

@media (max-width: 1100px) {
  .menu-toggle { display:block; z-index:3; }
  .topbar__actions { margin-left:auto; }
  .topbar .topbar__nav {
    display:flex;
    position:fixed;
    z-index:2;
    inset:0;
    height:100vh;
    padding:112px var(--gutter) 35px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(9,8,18,.985);
    backdrop-filter:blur(24px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-12px);
    transition:opacity .28s ease,transform .28s ease,visibility .28s;
  }
  .menu-open .topbar .topbar__nav { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .topbar__nav > a,.topbar.is-fixed .topbar__nav > a { justify-content:space-between; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.12); color:#f1f0e7; font:500 clamp(1.5rem,5vw,2.5rem)/1.2 Manrope,sans-serif; letter-spacing:-.035em; text-transform:none; }
  .topbar__nav > a small { order:2; color:#a8f05a; font:500 .58rem/1 "IBM Plex Mono",monospace; letter-spacing:.12em; }
  .topbar__nav > a::after { display:none; }
  .topbar__nav-pages { display:flex; margin-top:auto; padding-top:26px; gap:28px; }
  .topbar__nav-pages a { color:#8e8998; font:500 .56rem/1.5 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
  .menu-open { overflow:hidden; }
  .topbar.is-fixed { z-index:30; }
}

@media (max-width: 580px) {
  .topbar__nav-pages { flex-direction:column; gap:13px; }
  .topbar__actions .nav-cta { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar .topbar__nav,.menu-toggle i,.topbar__nav > a::after { transition:none; }
}