.nav__inner{position:relative;height:100%}

.nav__socials a{
  border-color:transparent;background:transparent;
  transition:color .2s ease,transform .2s ease
}
.nav__socials a:hover{
  color:var(--ink-white);border-color:transparent;background:transparent;
  transform:translateY(-1px)
}

.nav__toggle,.nav__mobile{display:none}
.nav__toggle{
  place-items:center;width:38px;height:38px;padding:0;color:var(--muted);
  border:0;background:transparent;font-size:19px;cursor:pointer;
  transition:color .18s ease,transform .18s ease
}
.nav__toggle:hover{color:var(--ink-white)}
.nav__toggle:active{transform:scale(.94)}
.nav__toggle:focus-visible{outline:1px solid rgba(229,51,43,.7);outline-offset:3px}
.nav__toggle i{pointer-events:none}

@keyframes nav-menu-in{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

@media(max-width:760px){
  .nav__links,.nav__socials{display:none}
  .nav__toggle{display:grid}
  .nav.is-menu-open{
    background:rgba(10,11,14,.9);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom-color:rgba(236,234,228,.1)
  }
  .nav__mobile:not([hidden]){
    position:absolute;top:calc(100% + 1px);right:0;display:block;
    width:min(360px,calc(100vw - 40px));padding:9px;
    background:rgba(11,13,17,.98);border:1px solid rgba(128,134,144,.32);
    box-shadow:0 26px 60px rgba(0,0,0,.62);
    animation:nav-menu-in .2s cubic-bezier(.22,1,.36,1) both
  }
  .nav__mobile::before{
    content:"";position:absolute;top:-1px;left:14px;width:64px;height:2px;
    background:var(--red);box-shadow:0 0 12px rgba(229,51,43,.5)
  }
  .nav__mobile-head{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:10px 11px 12px;color:var(--muted);font-family:var(--f-mono);
    font-size:8px;font-weight:500;letter-spacing:1.55px
  }
  .nav__mobile-head span:last-child{color:rgba(199,184,155,.7)}
  .nav__mobile-links{display:grid}
  .nav__mobile-links a{
    position:relative;display:flex;align-items:center;justify-content:space-between;
    min-height:48px;padding:0 12px;color:var(--muted);border-left:2px solid transparent;
    border-top:1px solid rgba(236,234,228,.065);font-family:var(--f-mono);
    font-size:11px;font-weight:500;letter-spacing:1.7px;
    transition:color .16s ease,background-color .16s ease,border-color .16s ease
  }
  .nav__mobile-links a:hover,.nav__mobile-links a.is-active{
    color:var(--ink-white);background:rgba(255,255,255,.035);border-left-color:var(--red)
  }
  .nav__mobile-links small{color:rgba(124,130,140,.65);font-size:8px;letter-spacing:1px}
  .nav__mobile-comms{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin-top:5px;padding:10px 10px 5px;border-top:1px solid rgba(236,234,228,.09)
  }
  .nav__mobile-comms>span{
    color:var(--muted);font-family:var(--f-mono);font-size:8px;
    font-weight:500;letter-spacing:1.4px;white-space:nowrap
  }
  .nav__mobile-socials{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
  .nav__mobile-socials a{
    display:grid;place-items:center;width:34px;height:34px;color:var(--muted);
    border:0;background:transparent;font-size:15px;
    transition:color .18s ease,transform .18s ease
  }
  .nav__mobile-socials a:hover{color:var(--ink-white);transform:translateY(-1px)}
  .nav__mobile-socials a:focus-visible{outline:1px solid rgba(229,51,43,.7);outline-offset:1px}
}

@media(prefers-reduced-motion:reduce){
  .nav__mobile:not([hidden]){animation:none}
  .nav__toggle,.nav__socials a,.nav__mobile-socials a{transition:none}
}