:root {
  --ink: #151515;
  --paper: #f7f5ef;
  --acid: #ee8a35;
  --line: rgba(21, 21, 21, .22);
}

.menu-toggle {
  position: fixed;
  top: 34px;
  right: 6vw;
  z-index: 55;
  width: 72px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}

.menu-toggle span {
  position: absolute;
  left: 0;
  top: 15px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.menu-toggle i {
  position: absolute;
  right: 0;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform .35s, top .35s;
}

.menu-toggle i:nth-of-type(1) { top: 16px; }
.menu-toggle i:nth-of-type(2) { top: 24px; }
.menu-toggle.is-open i:nth-of-type(1) { top: 20px; transform: rotate(45deg); }
.menu-toggle.is-open i:nth-of-type(2) { top: 20px; transform: rotate(-45deg); }

.menu-panel {
  position: fixed;
  z-index: 50;
  inset: 18px;
  padding: 118px 4vw 42px;
  border-radius: 34px;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-115%);
  transition: transform .7s cubic-bezier(.77,0,.18,1);
  overflow: hidden;
  box-shadow: 0 18px 70px rgba(21,21,21,.12);
}

.menu-panel.is-open { transform: translateY(0); }
.menu-wash { position: absolute; width: 28vw; height: 28vw; right: -7vw; bottom: -12vw; border: 1px solid rgba(21,21,21,.24); border-radius: 50%; background: transparent; opacity: 1; animation: menu-spin 16s linear infinite; }
.menu-panel nav { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.menu-panel nav a { width: fit-content; display: flex; align-items: baseline; gap: 20px; color: inherit; text-decoration: none; font: 500 clamp(38px, 5.8vw, 82px)/1 "DM Sans", sans-serif; letter-spacing: -.06em; transition: color .2s, transform .2s; }
.menu-panel nav a:hover { color: var(--acid); transform: translateX(12px); }
.menu-panel nav small { font: 500 10px/1 "DM Sans", sans-serif; letter-spacing: .18em; color: var(--acid); }
body.menu-open { overflow: hidden; }

@keyframes menu-spin { to { transform: rotate(360deg); } }

@media (max-width: 800px) {
  .menu-toggle { top: 18px; right: 18px; }
  .menu-panel { inset: 18px; padding: 96px 20px 28px; border-radius: 24px; }
  .menu-panel nav a { font-size: clamp(38px, 13vw, 62px); }
  .menu-wash { width: 70vw; height: 70vw; right: -26vw; bottom: -24vw; }
}