/* THE WOLFF — shared site navigation drawer */
.topbar{z-index:60}
.menu{
  position:relative;z-index:61;
  width:48px;height:42px;
  display:grid;align-content:center;justify-items:end;gap:6px;
  border:0;background:none;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.menu i{
  height:1px;background:#c8ac77;display:block;opacity:.72;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),width .28s ease,opacity .2s ease,background-color .2s ease;
  transform-origin:center;
}
.menu i:nth-child(1){width:29px}
.menu i:nth-child(2){width:21px}
.menu i:nth-child(3){width:25px}
.menu:hover i,.menu:focus-visible i{background:#e0c58c;opacity:1}
.menu:focus-visible{outline:1px solid rgba(216,189,132,.46);outline-offset:5px;border-radius:2px}

body.nav-open{overflow:hidden}
body.nav-open .menu i:nth-child(1){width:27px;transform:translateY(7px) rotate(45deg)}
body.nav-open .menu i:nth-child(2){opacity:0;width:0;transform:scaleX(0)}
body.nav-open .menu i:nth-child(3){width:27px;transform:translateY(-7px) rotate(-45deg)}

.nav-backdrop{
  position:fixed;inset:0;z-index:40;
  background:rgba(0,0,0,.50);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .34s ease,visibility 0s linear .34s;
}
.site-drawer{
  position:fixed;z-index:50;top:0;right:0;height:100dvh;width:min(390px,88vw);
  transform:translateX(102%);
  background:
    linear-gradient(180deg,rgba(11,12,14,.98),rgba(4,5,7,.985)),
    radial-gradient(circle at 70% 18%,rgba(201,170,111,.06),transparent 38%);
  border-left:1px solid rgba(201,170,111,.20);
  box-shadow:-24px 0 80px rgba(0,0,0,.56);
  transition:transform .42s cubic-bezier(.2,.8,.2,1);
  overflow:auto;overscroll-behavior:contain;
}
@supports(backdrop-filter:blur(18px)){
  .site-drawer{background:rgba(5,6,8,.88);backdrop-filter:blur(20px) saturate(.82);-webkit-backdrop-filter:blur(20px) saturate(.82)}
  .nav-backdrop{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
}
body.nav-open .nav-backdrop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .34s ease}
body.nav-open .site-drawer{transform:translateX(0)}

.drawer-inner{min-height:100%;padding:136px 48px 56px;display:flex;flex-direction:column}
.drawer-kicker{
  margin:0 0 28px;color:rgba(208,180,119,.42);
  font-size:8px;font-weight:600;letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;
}
.drawer-rule{height:1px;margin:0 0 13px;background:linear-gradient(90deg,rgba(201,170,111,.38),rgba(201,170,111,.08),transparent)}
.drawer-nav{display:flex;flex-direction:column}
.drawer-link{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  min-height:66px;border-bottom:1px solid rgba(201,170,111,.11);
  color:rgba(208,180,119,.76);
  font-size:11px;font-weight:600;letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;
  transition:color .22s ease,padding-left .28s cubic-bezier(.2,.8,.2,1),border-color .22s ease;
}
.drawer-link::after{
  content:"";width:18px;height:1px;background:rgba(208,180,119,.36);
  transform:scaleX(.45);transform-origin:right center;
  transition:transform .25s ease,background-color .22s ease;
}
.drawer-link:hover,.drawer-link:focus-visible{color:#dfc58e;padding-left:8px;border-color:rgba(201,170,111,.22);outline:none}
.drawer-link:hover::after,.drawer-link:focus-visible::after{transform:scaleX(1);background:#d7bb82}
.drawer-link[aria-current="page"]{color:#e4ca94}
.drawer-link[aria-current="page"]::before{
  content:"";position:absolute;left:-18px;top:50%;width:5px;height:5px;
  background:#c9aa6f;transform:translateY(-50%) rotate(45deg);
  box-shadow:0 0 12px rgba(201,170,111,.35);
}
.drawer-meta{
  margin-top:auto;padding-top:38px;color:rgba(193,188,177,.28);
  font-size:8px;letter-spacing:.24em;text-transform:uppercase;
}

@media(max-width:760px){
  .menu{width:42px;height:38px}
  .site-drawer{width:min(350px,88vw)}
  .drawer-inner{padding:104px 28px 38px}
  .drawer-link{min-height:62px;font-size:10px;letter-spacing:.30em;text-indent:.30em}
  .drawer-kicker{font-size:7px;margin-bottom:23px}
}
@media(prefers-reduced-motion:reduce){
  .site-drawer,.nav-backdrop,.menu i,.drawer-link,.drawer-link::after{transition:none!important}
}