.menu-panel {
  --menu-ink: #100f0e;
  --menu-accent: #ad3527;
  --menu-rule: rgb(46 33 24 / .25);
  --menu-paper: var(--paper) url('/assets/paper-seamless.webp');
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #090909;
  color: var(--menu-ink);
}

.menu-panel::backdrop { background: #090909; }
.menu-close span:first-child { transform: translateY(5px) rotate(45deg); }
.menu-close span:last-child { transform: translateY(-5px) rotate(-45deg); }

.menu-layout {
  position: absolute;
  inset: var(--rail-inset) var(--rail-inset) var(--rail-inset) calc(var(--rail-inset) + var(--rail) + 3px);
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
  overflow: hidden auto;
  overscroll-behavior: contain;
}

.menu-paper {
  --menu-indent: clamp(24px, 3.25vw, 66px);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  padding: 0 clamp(12px, 1.15vw, 24px) clamp(18px, 4.2svh, 54px);
  background: var(--menu-paper);
}

.menu-paper::before {
  position: absolute;
  z-index: -1;
  inset: 2% 8% 2% 5%;
  border-inline: 1px solid rgb(46 33 24 / .1);
  content: '';
  pointer-events: none;
}

.menu-paper :is(.menu-wordmark, .menu-nav a, .menu-brief), .menu-count {
  font-family: LiraStudioUnbounded, Arial, sans-serif;
  font-weight: 500;
}

.menu-wordmark {
  margin: 0;
  padding: clamp(24px, 7.4svh, 92px) var(--menu-indent) clamp(12px, 2.2svh, 28px);
  border-bottom: 1px solid var(--menu-rule);
  font-size: clamp(13px, 3.7cqi, 28px);
  line-height: 1.15;
  letter-spacing: -.045em;
}

.menu-nav {
  padding-top: clamp(20px, 4.65svh, 68px);
  margin-bottom: clamp(20px, 3.8svh, 48px);
}

.menu-nav a {
  --menu-shift: .95em;
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(44px, 8.5svh, 105px);
  padding: .08em 0 .08em var(--menu-indent);
  color: inherit;
  font-size: clamp(20px, 8cqi, 66px);
  line-height: 1.12;
  letter-spacing: -.065em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.menu-nav a[href="#development-approach"] { --menu-shift: .4em; }
.menu-nav a span { transition: translate var(--motion-ui) var(--motion-ease); }
.menu-nav a svg,
.menu-nav a::before {
  position: absolute;
  top: 50%;
  left: max(3px, calc(var(--menu-indent) - .76em));
  opacity: 0;
  translate: -.2em -50%;
  transition: opacity var(--motion-fast) ease, translate var(--motion-ui) var(--motion-ease);
}

.menu-nav a svg { width: .78em; color: var(--rail-color); }
.menu-nav a::before {
  width: max(3px, .15em);
  height: .73em;
  background: var(--rail-color);
  content: '';
}

.menu-nav a[aria-current][data-preview-active]::before,
.menu-nav a[data-preview-active]:not([aria-current]) svg {
  opacity: 1;
  translate: 0 -50%;
}

.menu-nav a[data-preview-active]:not([aria-current]) { color: var(--menu-accent); }
.menu-nav a[data-preview-active]:not([aria-current]) span { translate: var(--menu-shift) 0; }

.menu-brief {
  position: relative;
  display: flex;
  align-items: center;
  gap: .95em;
  margin-top: auto;
  min-height: clamp(48px, 8.6svh, 94px);
  padding: 8px var(--menu-indent);
  border: 0;
  border-block: 1px solid var(--menu-rule);
  background: transparent;
  color: inherit;
  text-align: left;
  font-size: clamp(13px, 4.2cqi, 30px);
  line-height: 1.2;
  letter-spacing: -.065em;
}

.menu-brief-arrow {
  flex: 0 0 auto;
  width: 1.3em;
  height: auto;
  transition: translate var(--motion-ui) var(--motion-ease);
}

.menu-brief:is(:hover, :focus-visible) { color: var(--menu-accent); }
.menu-brief:is(:hover, :focus-visible) .menu-brief-arrow { translate: .18em 0; }
.menu-nav a:focus-visible, .menu-brief:focus-visible { outline: 2px solid var(--menu-accent); outline-offset: -2px; }

.menu-hatch {
  position: absolute;
  top: 0;
  right: max(5px, calc(var(--menu-indent) / 2));
  width: clamp(24px, 6.4cqi, 108px);
  stroke: var(--menu-rule);
  stroke-width: 1.4;
  pointer-events: none;
}

.menu-visual {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(16px, 4svh, 50px);
  padding: clamp(18px, 6.4svh, 85px) clamp(18px, 2.35vw, 55px) clamp(18px, 5.25svh, 66px);
  background: #11100f;
  color: var(--paper);
}

.menu-frame {
  --menu-corner: clamp(13px, 1.9vw, 36px);
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 0;
  padding: clamp(9px, 1.3vw, 28px);
}

.menu-preview {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 260ms;
}

.menu-preview[data-active] { opacity: 1; visibility: visible; }
.menu-preview > img, .menu-army { display: block; width: 100%; height: 100%; object-fit: contain; }
.menu-preview--start > img { object-position: center; }
.menu-army { width: calc(100% + 2 * clamp(9px, 1.3vw, 28px)); }

.menu-partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 4vw, 70px); width: 84%; }
.menu-partners img { display: block; width: 100%; max-height: 100px; height: auto; object-fit: contain; filter: brightness(0) invert(1); }
.menu-preview-note {
  width: 86%;
  margin: 0;
  font: 500 clamp(21px, 3.3vw, 60px)/1.18 LiraStudioUnbounded, Arial, sans-serif;
  letter-spacing: -.06em;
  text-wrap: balance;
}

.menu-corner {
  position: absolute;
  width: var(--menu-corner);
  height: var(--menu-corner);
  border: solid var(--rail-color);
  border-width: 0;
  pointer-events: none;
}

.menu-corner--tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.menu-corner--tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.menu-corner--bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.menu-corner--br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.menu-count {
  display: flex;
  align-items: center;
  white-space: pre;
  font-size: clamp(12px, 1.4vw, 22px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  line-height: 1.2;
}

.menu-count::before {
  flex: 1;
  height: 1px;
  margin-right: clamp(12px, 1.5vw, 26px);
  background: rgb(249 236 226 / .58);
  content: '';
}

html[data-motion="reduced"] .menu-nav a span,
html[data-motion="reduced"] .menu-brief-arrow { translate: none; }

@media (max-width: 840px) {
  .menu-layout { display: block; background: var(--menu-paper); }
  .menu-paper { --menu-indent: clamp(14px, 4.75vw, 40px); padding: 0 clamp(10px, 2vw, 22px); background: none; }
  .menu-paper::before { inset: 2% 6% 0 4%; }
  .menu-wordmark { padding-block: clamp(19px, 4.4svh, 46px) clamp(10px, 1.6svh, 22px); }
  .menu-nav { padding-top: clamp(12px, 2.4svh, 26px); margin-bottom: clamp(12px, 2.9svh, 38px); }
  .menu-nav a { --menu-shift: .37em; min-height: max(44px, 10.8cqi); font-size: clamp(16px, 7.7cqi, 45px); }
  .menu-nav a[href="#development-approach"] { --menu-shift: .18em; }
  .menu-nav a svg { width: .64em; }
  .menu-brief { min-height: clamp(46px, 6.2svh, 78px); font-size: clamp(13px, 4.45cqi, 25px); }
  .menu-visual { display: block; margin: clamp(12px, 2.3svh, 28px) clamp(12px, 3.7vw, 36px) clamp(12px, 3.3svh, 36px); padding: clamp(8px, 2vw, 22px); }
  .menu-frame { aspect-ratio: 4 / 3; }
  .menu-preview--start { background: var(--menu-paper); }
  .menu-count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-nav a span, .menu-brief-arrow { translate: none; }
}