/* Mobile menu, shared by every page. Desktop is untouched: the button only
   appears below 760px, where the inline nav links are hidden. */

.wf-menu-btn{
  display:none;
  position:relative;
  width:42px;height:42px;margin-left:10px;flex:none;
  border:1px solid color-mix(in srgb, var(--ink, #17120D) 14%, transparent);
  border-radius:50%;
  background:color-mix(in srgb, #fff 55%, transparent);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .3s ease, border-color .3s ease;
}
.wf-menu-btn i{
  position:absolute;left:12px;right:12px;height:1.75px;border-radius:2px;
  background:var(--ink, #17120D);
  transition:transform .45s cubic-bezier(.34,1.56,.5,1), top .3s ease, background .3s ease;
}
.wf-menu-btn i:nth-child(1){top:16px;}
.wf-menu-btn i:nth-child(2){top:24px;}
.wf-menu-btn[aria-expanded="true"] i:nth-child(1){top:20px;transform:rotate(45deg);}
.wf-menu-btn[aria-expanded="true"] i:nth-child(2){top:20px;transform:rotate(-45deg);}
nav.night .wf-menu-btn,
html.wf-menu-open .wf-menu-btn{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);}
nav.night .wf-menu-btn i,
html.wf-menu-open .wf-menu-btn i{background:#FDFDFB;}

/* while open, the nav joins the night so the X sits on the sheet */
html.wf-menu-open nav{
  background:#1A1116 !important;
  border-bottom-color:rgba(255,255,255,.08) !important;
}
html.wf-menu-open nav .lockup .wf{color:#FDFDFB;}
html.wf-menu-open nav .lockup .dg{color:rgba(253,253,251,.6);}
html.wf-menu-open, html.wf-menu-open body{overflow:hidden;}

.wf-menu{
  position:fixed;left:0;right:0;bottom:0;top:68px;z-index:49;
  display:flex;flex-direction:column;
  padding:28px 24px calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  background:#1A1116;color:#FDFDFB;
  visibility:hidden;opacity:0;
  transform:translateY(-10px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s;
}
.wf-menu::before{
  content:"";position:absolute;inset:-20% -30% auto auto;width:120%;height:70%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,101,48,.30), rgba(178,24,8,.10) 55%, transparent 75%);
}
.wf-menu.is-open{
  visibility:visible;opacity:1;transform:none;
  transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1), visibility 0s;
}
.wf-menu > *{position:relative;}

.wf-menu .wfm-k{
  display:block;margin:0 0 10px;
  font-family:var(--font-code, "Martian Mono", monospace);
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(253,253,251,.5);
}
.wf-menu .wfm-main{list-style:none;margin:0 0 30px;padding:0;}
.wf-menu .wfm-main a{
  display:block;padding:7px 0;
  font-family:var(--font-display, "Bricolage Grotesque", sans-serif);
  font-weight:800;font-size:clamp(2rem,9vw,2.6rem);letter-spacing:-.03em;line-height:1.05;
  color:#FDFDFB;text-decoration:none;
}
.wf-menu .wfm-cases{
  list-style:none;margin:0 0 30px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;
}
.wf-menu .wfm-cases a{
  display:flex;align-items:center;gap:9px;padding:9px 0;
  font-size:16px;font-weight:600;color:rgba(253,253,251,.82);text-decoration:none;
}
.wf-menu .wfm-cases a::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--dot, #E8283C);
}
.wf-menu .wfm-cases li:nth-child(3n+2) a{--dot:#0BA37F;}
.wf-menu .wfm-cases li:nth-child(3n+3) a{--dot:#7A3CFF;}
.wf-menu .wfm-cases a[aria-current="page"]{color:#FF8A65;}
.wf-menu .wfm-main a:active, .wf-menu .wfm-cases a:active{opacity:.6;}

.wf-menu .wfm-cta{
  margin-top:auto;
  display:flex;justify-content:center;align-items:center;
  padding:16px 24px;border-radius:100px;
  font-weight:600;font-size:16px;color:#fff;text-decoration:none;
  background:linear-gradient(115deg,#E8283C,#FF8A65);
  box-shadow:0 10px 26px -10px #E8283C;
}
.wf-menu .wfm-mail{
  display:block;margin-top:16px;text-align:center;
  font-size:14px;color:rgba(253,253,251,.6);text-decoration:none;
}

/* staggered entrance */
.wf-menu .wfm-anim{opacity:0;transform:translateY(12px);transition:opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1);}
.wf-menu.is-open .wfm-anim{opacity:1;transform:none;transition-delay:calc(var(--i, 0) * 35ms + 60ms);}

@media (max-width:760px){
  nav .nav-links{display:none !important;}
  .wf-menu-btn{display:block;}
  nav .nav-inner > .btn{margin-left:auto;}
}
@media (max-width:380px){
  nav .nav-inner > .btn{display:none;}
  .wf-menu-btn{margin-left:auto;}
}
@media (min-width:761px){
  .wf-menu{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .wf-menu, .wf-menu .wfm-anim, .wf-menu-btn i{transition:none !important;}
}