html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.menu-toggle,
.site-menu__close {
  width: 42px;
  height: 42px;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.menu-toggle__line,
.site-menu__close span {
  display: block;
  width: 21px;
  height: 1px;
  background: currentColor;
  transition: transform .25s ease;
}
.menu-toggle:hover { color: #ef3e6e; }
.menu-toggle:focus-visible,
.site-menu__close:focus-visible,
.site-menu__projects-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--paper, #f3f1eb);
  color: var(--ink, #151515);
  opacity: 0;
  transform: translateX(3%);
  transition: opacity .28s ease, transform .38s cubic-bezier(.2,.8,.2,1);
}
.site-menu[hidden] { display: none; }
.site-menu.is-open { opacity: 1; transform: translateX(0); }
.site-menu__inner { min-height: 100%; max-width: 1180px; margin: 0 auto; padding: 22px 30px 64px; }
.site-menu__top { display: flex; align-items: center; justify-content: space-between; height: 42px; }
.site-menu__wordmark { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.site-menu__close { position: relative; }
.site-menu__close span { position: absolute; }
.site-menu__close span:first-child { transform: rotate(45deg); }
.site-menu__close span:last-child { transform: rotate(-45deg); }

.site-menu__primary { display: grid; gap: 14px; width: min(780px, 100%); margin: clamp(88px, 16vh, 190px) auto 0; }
.site-menu__primary > a,
.site-menu__projects-toggle {
  width: fit-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(50px, 6vw, 88px);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .88;
  text-align: left;
}
.site-menu__primary > a:hover,
.site-menu__projects a:hover,
.site-menu__projects-toggle:hover { color: #ef3e6e; }
.site-menu__projects-toggle { display: inline-flex; align-items: center; gap: .2em; cursor: pointer; }
.site-menu__projects-arrow { font-family: var(--sans, Arial, sans-serif); font-size: .38em; font-weight: 400; letter-spacing: 0; transform-origin: center; transition: transform .28s ease; }
.site-menu__projects-toggle[aria-expanded="true"] .site-menu__projects-arrow { transform: rotate(180deg); }

.site-menu__project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: max-height .48s cubic-bezier(.2,.8,.2,1), margin .32s ease, opacity .24s ease, transform .32s ease;
}
.site-menu__project-list.is-open { max-height: 360px; margin: 15px 0 12px; opacity: 1; pointer-events: auto; transform: translateY(0); }
.site-menu__project-list li { border-bottom: 1px solid var(--line, rgba(21,21,21,.16)); }
.site-menu__project-list a { display: grid; grid-template-columns: 35px 1fr; align-items: baseline; gap: 12px; padding: 11px 0 10px; }
.site-menu__number { font-size: 10px; letter-spacing: .1em; color: var(--muted, #706f6a); }
.site-menu__project-name { font-family: var(--serif, Georgia, serif); font-size: clamp(22px, 2.7vw, 38px); font-weight: 400; letter-spacing: -.055em; line-height: .96; }
.menu-is-open { overflow: hidden; }

@media (max-width: 680px) {
  .menu-toggle, .site-menu__close { width: 38px; height: 38px; }
  .site-menu__inner { padding: 16px 17px 40px; }
  .site-menu__primary { margin-top: 88px; gap: 14px; }
  .site-menu__primary > a, .site-menu__projects-toggle { font-size: clamp(49px, 15vw, 72px); }
  .site-menu__project-list { grid-template-columns: 1fr; }
  .site-menu__project-list.is-open { max-height: 440px; margin: 14px 0 13px; }
  .site-menu__project-name { font-size: 30px; }
  .site-menu__project-list a { padding: 11px 0 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu,
  .site-menu__project-list,
  .site-menu__projects-arrow,
  .menu-toggle__line,
  .site-menu__close span { transition: none; }
}