/* MASTERS — isolated premium treatment for the shared public navigation rail. */
@media (min-width:821px){
  :root{--frontier-rail:282px}

  header.site-nav,
  header.site-nav.scrolled{
    width:var(--frontier-rail);
    padding:24px 25px 22px;
    overflow-x:hidden;
    border-right:1px solid rgba(193,128,74,.28);
    background:
      radial-gradient(circle at 50% 9%,rgba(129,67,36,.12),transparent 25%),
      linear-gradient(180deg,rgba(12,14,13,.995),rgba(7,9,8,.995));
    box-shadow:18px 0 70px rgba(0,0,0,.34),inset -1px 0 rgba(255,218,163,.025);
  }

  header.site-nav::before{
    content:"MASTERS  ·  TERRITORY";
    left:7px;
    top:38px;
    color:rgba(188,154,111,.36);
    font-size:7px;
    letter-spacing:.28em;
  }

  header.site-nav::after{
    left:18px;
    top:28px;
    bottom:28px;
    background:linear-gradient(transparent,rgba(174,111,64,.24) 12%,rgba(174,111,64,.24) 88%,transparent);
  }

  .nav-logo,
  header.site-nav>.nav-logo{
    position:relative;
    width:172px;
    height:128px;
    margin:0 auto 18px;
    border:1px solid rgba(183,120,70,.16);
    border-radius:52% 48% 50% 50%/46% 46% 54% 54%;
    background-size:148px auto;
    filter:drop-shadow(0 15px 22px rgba(0,0,0,.6));
  }

  header.site-nav>.nav-logo::before{
    content:"";
    position:absolute;
    inset:8px;
    pointer-events:none;
    border:1px solid rgba(202,146,91,.12);
    border-radius:inherit;
    box-shadow:inset 0 0 22px rgba(178,95,45,.06);
  }

  .nav-links{
    gap:2px;
    padding-top:12px;
    border-top:1px solid rgba(202,146,91,.12);
    font-size:11px;
    letter-spacing:.19em;
  }

  .nav-links>a,
  .nav-more>summary{
    position:relative;
    min-height:42px;
    padding:9px 13px 9px 15px;
    border:1px solid transparent;
    border-left:0;
    background:transparent;
    transform:none;
  }

  .nav-links>a::before,
  .nav-more summary::before{
    width:6px;
    height:6px;
    margin-right:13px;
    border-color:rgba(201,172,126,.6);
    opacity:.55;
    transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
  }

  .nav-links>a:hover,
  .nav-more>summary:hover{
    color:#e6d8bb;
    border-color:rgba(183,110,60,.12);
    background:linear-gradient(90deg,rgba(127,55,29,.16),rgba(127,55,29,.025));
    transform:none;
  }

  .nav-links>a.active,
  .nav-more.active>summary{
    color:#f0dfbb;
    border-color:rgba(184,107,57,.27);
    background:
      linear-gradient(90deg,rgba(133,57,30,.26),rgba(133,57,30,.04)),
      rgba(20,17,14,.28);
    box-shadow:inset 3px 0 #b66034,inset 0 1px rgba(255,217,160,.035);
  }

  .nav-links>a.active::before,
  .nav-more.active>summary::before{
    border-color:#d59458;
    background:#8d3c24;
    box-shadow:0 0 10px rgba(196,102,54,.48);
  }

  .nav-more{margin-top:3px}
  .nav-more>summary{cursor:pointer}
  .nav-more summary::after{
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    margin-left:auto;
    color:#c47743;
    border:1px solid rgba(192,113,64,.18);
    font-size:13px;
    line-height:1;
  }
  .nav-more>span{
    margin:3px 5px 8px 18px;
    padding:4px 0 4px 17px;
    gap:0;
    border-left:1px solid rgba(178,108,62,.2);
  }
  .nav-more>span a{
    position:relative;
    padding:7px 9px;
    color:#898b84;
    font-size:9px;
    letter-spacing:.16em;
  }
  .nav-more>span a:hover{color:#e4d3b5;background:rgba(146,68,34,.08)}

  .portal-status{
    position:relative;
    min-height:36px;
    margin:auto 0 8px;
    padding:9px 11px;
    border-color:rgba(142,152,116,.22);
    background:linear-gradient(90deg,rgba(126,134,110,.09),rgba(126,134,110,.025));
    color:#aeb497;
    font-size:8px;
    letter-spacing:.08em;
  }

  .portal-status::before{
    content:"LAISSE TON NOM DANS L'OUEST";
    position:absolute;
    left:0;
    right:0;
    bottom:calc(100% + 24px);
    padding-top:16px;
    color:rgba(190,159,117,.27);
    border-top:1px solid rgba(184,118,68,.1);
    font:400 9px 'IM Fell English SC',serif;
    letter-spacing:.19em;
    text-align:center;
  }

  .portal-status i{
    width:6px;
    height:6px;
    box-shadow:0 0 11px rgba(142,154,112,.5);
  }

  .language-switch{
    min-height:35px;
    margin-bottom:8px;
    padding:8px 10px;
    color:#b9b3a6;
    border-color:rgba(205,179,139,.16);
    background:rgba(255,255,255,.012);
    font-size:9px;
    letter-spacing:.22em;
  }
  .language-switch:hover{color:#ebddc2;border-color:rgba(194,126,76,.38);background:rgba(149,70,35,.07)}

  header.site-nav>.btn-discord-nav{
    position:relative;
    min-height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 42px 12px 16px;
    border-color:rgba(189,97,54,.62);
    background:linear-gradient(180deg,#7b351f,#4e2016);
    box-shadow:inset 0 0 0 1px rgba(255,212,155,.055),0 14px 28px rgba(0,0,0,.28);
    letter-spacing:.12em;
  }
  header.site-nav>.btn-discord-nav::after{
    content:"M";
    position:absolute;
    right:10px;
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    color:#eed8b3;
    border:1px solid rgba(239,189,126,.45);
    border-radius:50%;
    background:#602417;
    box-shadow:inset 0 0 0 3px rgba(35,10,7,.2),0 2px 7px rgba(0,0,0,.3);
    font:700 10px Georgia,serif;
  }
  header.site-nav>.btn-discord-nav:hover{
    border-color:rgba(217,130,76,.82);
    background:linear-gradient(180deg,#8b3d25,#592318);
    transform:translateY(-1px);
  }
}

@media (min-width:821px) and (max-height:790px){
  header.site-nav,header.site-nav.scrolled{padding-top:16px;padding-bottom:15px}
  .nav-logo,header.site-nav>.nav-logo{width:142px;height:98px;margin-bottom:12px;background-size:126px auto}
  .nav-links{padding-top:8px}
  .nav-links>a,.nav-more>summary{min-height:36px;padding-block:7px}
  .portal-status::before{display:none}
}

@media (max-width:820px){
  header.site-nav,
  header.site-nav.scrolled{
    border-bottom-color:rgba(193,128,74,.28);
    background:linear-gradient(180deg,rgba(11,13,12,.99),rgba(7,9,8,.99));
    box-shadow:0 14px 36px rgba(0,0,0,.34);
  }
  .nav-logo,header.site-nav>.nav-logo{background-size:contain;filter:drop-shadow(0 7px 12px rgba(0,0,0,.55))}
  header.site-nav.menu-open .nav-links{border-top:1px solid rgba(191,125,76,.16)}
  .nav-links>a.active,.nav-more.active>summary{box-shadow:inset 3px 0 #b66034}
}