/* menu.css — the site menu: a fixed "Menu" pill that opens a full-screen list of the home page and
   every piece of work. Built by js/menu.js on every page. Tokens only; GT America Condensed for the
   small labels, Harry Fat for the links, as elsewhere on the site. */
@font-face{
  font-family:"GT America Condensed";
  src:url("../fonts/gt-america-condensed-medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

.menu-btn{
  position:fixed;z-index:90;
  top:clamp(.75rem,1.6vw,1.25rem);right:var(--step,1.5rem);
  font-family:"GT America Condensed",var(--ui);font-weight:500;
  font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--forest-900);background:var(--apricot-50);
  border:1px solid var(--forest-900);border-radius:999px;
  padding:.6rem 1.05rem;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.menu-btn:hover{background:var(--forest-900);color:var(--apricot-50);}
.menu-btn:focus-visible{outline:2px solid var(--forest-900);outline-offset:3px;box-shadow:0 0 0 5px var(--apricot-50);}
/* the home page's intro sits above everything; the button waits until it has gone */
html.intro-on .menu-btn{display:none;}

html.menu-lock{overflow:hidden;}
.menu{
  width:100vw;height:100vh;max-width:none;max-height:none;
  margin:0;padding:0;border:0;
  background:var(--forest-900);color:var(--apricot-50);
  --focus-ring:var(--apricot-50);
  overflow:auto;
}
.menu::backdrop{background:var(--forest-900);}
.menu-inner{
  max-width:96rem;margin-inline:auto;
  padding:clamp(.75rem,1.6vw,1.25rem) var(--step,1.5rem) clamp(2.5rem,6vw,5rem);
  min-height:100%;
  display:flex;flex-direction:column;
}
.menu-top{display:flex;justify-content:flex-end;}
.menu-close{
  font-family:"GT America Condensed",var(--ui);font-weight:500;
  font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--apricot-50);background:transparent;
  border:1px solid currentColor;border-radius:999px;
  padding:.6rem 1.05rem;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.menu-close:hover{background:var(--apricot-50);color:var(--forest-900);}

.menu a{color:inherit;text-decoration:none;}
.menu-home{
  display:inline-block;margin-top:clamp(1.5rem,4vw,3.5rem);
  font-family:var(--display);font-size:clamp(3.5rem,13vw,11rem);line-height:.9;letter-spacing:.02em;
}
.menu-groups{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem);
  margin-top:clamp(2rem,5vw,4.5rem);
}
.menu-group{border-top:1px solid var(--apricot-50);padding-top:1rem;}
.menu-group h2{
  font-family:"GT America Condensed",var(--ui);font-weight:500;
  font-size:clamp(1.25rem,1.9vw,1.6rem);letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--apricot-200);
}
.menu-group ul{margin-top:1.1rem;display:grid;gap:.35rem;}
.menu-link{
  font-family:var(--display-alt);font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.75rem);line-height:1.05;letter-spacing:-.005em;text-transform:uppercase;
  transition:color .2s ease;
}
.menu-link:hover{color:var(--apricot-200);}
.menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em;}

@media (max-width:47.99rem){
  .menu-groups{grid-template-columns:minmax(0,1fr);}
}
@media (prefers-reduced-motion:reduce){.menu-btn,.menu-close,.menu-link{transition:none;}}