@property --menu-mix {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: var(--z-menu);
  pointer-events: none;
}

.menu__desktop,
.menu__mobile,
.menu__overlay {
  display: none;
}

.menu__link {
  --menu-mix: 0%;
  --menu-top-a: #f5f5f5;
  --menu-top-b: #ffdc62;
  --menu-mid-a: #e3e3e3;
  --menu-mid-b: #f2bd38;
  --menu-bot-a: #bfbfbf;
  --menu-bot-b: #d99b24;
  position: relative;
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--menu-mid-b) var(--menu-mix), var(--menu-mid-a));
  transition: --menu-mix var(--exit-ms) var(--ease-in-quad), color var(--exit-ms) var(--ease-in-quad);
}

.menu__link::after {
  content: "";
  position: absolute;
  left: var(--menu-ls-pad, 0px);
  right: var(--menu-ls, 0px);
  bottom: var(--menu-line-bottom, 0px);
  height: var(--menu-line-h, 1.5px);
  background: linear-gradient(90deg, rgba(226, 173, 69, 0), #e2ad45 18%, #fde08a 50%, #e2ad45 82%, rgba(226, 173, 69, 0));
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform var(--exit-ms) var(--ease-in-quad);
  pointer-events: none;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) and (color: color-mix(in srgb, red 50%, blue)) {
  .menu__link {
    background-image: linear-gradient(180deg,
      color-mix(in srgb, var(--menu-top-b) var(--menu-mix), var(--menu-top-a)) var(--menu-g0, 20%),
      color-mix(in srgb, var(--menu-mid-b) var(--menu-mix), var(--menu-mid-a)) var(--menu-g1, 50%),
      color-mix(in srgb, var(--menu-bot-b) var(--menu-mix), var(--menu-bot-a)) var(--menu-g2, 75%));
    background-origin: content-box;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.menu__link.is-active {
  --menu-mix: 100%;
  transition: --menu-mix var(--enter-ms) var(--ease-in-out-quad), color var(--enter-ms) var(--ease-in-out-quad);
}

@media (hover: hover) {
  .menu__link:hover {
    --menu-mix: 100%;
    transition: --menu-mix var(--enter-ms) var(--ease-in-out-quad), color var(--enter-ms) var(--ease-in-out-quad);
  }

  .menu__link:hover::after {
    transform: scaleX(1);
    transition: transform var(--enter-ms) var(--ease-in-out-quad);
  }
}

.menu__link:focus-visible {
  --menu-mix: 100%;
  outline-offset: 2px;
  transition: --menu-mix var(--enter-ms) var(--ease-in-out-quad), color var(--enter-ms) var(--ease-in-out-quad);
}

.menu__link:focus-visible::after {
  transform: scaleX(1);
  transition: transform var(--enter-ms) var(--ease-in-out-quad);
}

.menu__logo,
.menu__mobile-logo {
  display: block;
  pointer-events: auto;
}

.menu__logo-mark {
  display: block;
  width: 100%;
  height: 100%;
}

.menu__logo-mark .svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 1024px) {
  .menu__desktop {
    --mu: min(var(--u), calc(1100px / 1070));
    --x0: 186;
    --y0: 24;
    --menu-ls: calc(2.1 * var(--mu));
    --menu-ls-pad: var(--menu-ls);
    --menu-line-bottom: calc(8.6 * var(--mu));
    --menu-line-h: max(1px, calc(1.5 * var(--mu)));
    --menu-g0: 20.8%;
    --menu-g1: 48%;
    --menu-g2: 72%;
    display: block;
    position: absolute;
    left: calc(50% + (var(--x0) - 720) * var(--mu));
    top: calc(var(--y0) * var(--mu));
    width: calc(1070 * var(--mu));
    height: calc(124 * var(--mu));
    pointer-events: none;
  }

  .menu__logo {
    position: absolute;
    left: calc((658.3 - var(--x0)) * var(--mu));
    top: calc((25.3 - var(--y0)) * var(--mu));
    width: calc(121.9 * var(--mu));
    height: calc(121.9 * var(--mu));
    border-radius: 50%;
  }

  .menu__rule {
    position: absolute;
    height: calc(23.3 * var(--mu));
  }

  .menu__rule--left {
    left: calc((186.5 - var(--x0)) * var(--mu));
    top: calc((62.35 - var(--y0)) * var(--mu));
    width: calc((645.2 - 186.5) * var(--mu));
  }

  .menu__rule--right {
    left: calc((793.8 - var(--x0)) * var(--mu));
    top: calc((62.2 - var(--y0)) * var(--mu));
    width: calc((1255 - 793.8) * var(--mu));
  }

  .menu__line {
    position: absolute;
    display: block;
    height: calc(2 * var(--mu));
    background: linear-gradient(180deg, rgba(200, 181, 84, 0.84) 0 50%, #d09e2c 50% 100%);
    box-shadow: 0 calc(1 * var(--mu)) 0 rgba(0, 0, 0, 0.78), 0 calc(2 * var(--mu)) calc(1.2 * var(--mu)) rgba(0, 0, 0, 0.32);
  }

  .menu__rule--left .menu__line {
    left: calc((221 - 186.5) * var(--mu));
    right: 0;
    top: calc((73 - 62.35) * var(--mu));
    transform-origin: 100% 50%;
  }

  .menu__rule--right .menu__line {
    left: 0;
    width: calc((1221.4 - 793.8) * var(--mu));
    top: calc((73 - 62.2) * var(--mu));
    transform-origin: 0% 50%;
  }

  .menu__tip {
    position: absolute;
    display: block;
    top: 0;
    height: calc(23.3 * var(--mu));
  }

  .menu__tip--left {
    left: 0;
    width: calc(34.5 * var(--mu));
  }

  .menu__tip--right {
    left: calc((1221.4 - 793.8) * var(--mu));
    width: calc(33.6 * var(--mu));
  }

  .menu__tip .svg {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
  }

  .menu__list {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .menu__item {
    position: absolute;
    top: calc((81.85 - var(--y0)) * var(--mu));
    width: 0;
    display: flex;
    justify-content: center;
  }

  .menu__list--left .menu__item:nth-child(1) {
    left: calc((342 - var(--x0)) * var(--mu));
  }

  .menu__list--left .menu__item:nth-child(2) {
    left: calc((539.5 - var(--x0)) * var(--mu));
  }

  .menu__list--right .menu__item:nth-child(1) {
    left: calc((900.5 - var(--x0)) * var(--mu));
  }

  .menu__list--right .menu__item:nth-child(2) {
    left: calc((1087.5 - var(--x0)) * var(--mu));
  }

  .menu__desktop .menu__link {
    flex: none;
    padding: calc(8 * var(--mu)) 0 calc(8 * var(--mu)) var(--menu-ls-pad);
    font-size: calc(22 * var(--mu));
    line-height: calc(30 * var(--mu));
    letter-spacing: var(--menu-ls);
    filter: drop-shadow(0 calc(1.2 * var(--mu)) calc(0.8 * var(--mu)) rgba(0, 0, 0, 0.82)) drop-shadow(0 0 calc(3 * var(--mu)) rgba(0, 0, 0, 0.42));
    pointer-events: auto;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .js .menu__desktop:not(.is-intro-done) .menu__logo,
  .js .menu__desktop:not(.is-intro-done) .menu__line,
  .js .menu__desktop:not(.is-intro-done) .menu__tip,
  .js .menu__desktop:not(.is-intro-done) .menu__item {
    opacity: 0;
    animation: menu-failsafe 600ms var(--ease-in-out-quad) 3.5s forwards;
  }

  .js .menu__desktop.is-intro:not(.is-intro-done) .menu__logo,
  .js .menu__desktop.is-intro:not(.is-intro-done) .menu__line,
  .js .menu__desktop.is-intro:not(.is-intro-done) .menu__tip,
  .js .menu__desktop.is-intro:not(.is-intro-done) .menu__item {
    animation: none;
  }
}

@keyframes menu-failsafe {
  to {
    opacity: 1;
  }
}

@media (max-width: 1023.98px) {
  .menu__mobile {
    --menu-bar: 72px;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: calc(var(--menu-bar) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    pointer-events: none;
  }

  .menu__mobile::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(100% + 24px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0));
    transition: opacity var(--exit-ms) var(--ease-in-quad);
    pointer-events: none;
  }

  .is-menu-open .menu__mobile::before {
    opacity: 0;
  }

  .menu__mobile-logo {
    position: absolute;
    left: 50%;
    top: calc(env(safe-area-inset-top) + 8px);
    width: 56px;
    height: 56px;
    margin-left: -28px;
    border-radius: 50%;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  }

  .menu__toggle {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 14px);
    right: max(16px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    border-radius: 3px;
    background: var(--hamburger);
    box-shadow: inset 0 1px 0 rgba(255, 250, 220, 0.55), inset 0 -1px 0 rgba(120, 82, 20, 0.35), 0 2px 10px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    touch-action: manipulation;
  }

  .menu__toggle:focus-visible {
    outline: 2px solid #fff4c9;
    outline-offset: 3px;
  }

  .menu__toggle-bar {
    position: absolute;
    left: 11px;
    top: 21px;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: #1d1508;
    transform-origin: 50% 50%;
    transition: transform var(--exit-ms) var(--ease-in-quad), opacity var(--exit-ms) var(--ease-in-quad);
  }

  .menu__toggle-bar:nth-child(1) {
    transform: translateY(-7px);
  }

  .menu__toggle-bar:nth-child(3) {
    transform: translateY(7px);
  }

  .is-menu-open .menu__toggle-bar {
    transition: transform var(--enter-ms) var(--ease-in-out-quad), opacity var(--enter-ms) var(--ease-in-out-quad);
  }

  .is-menu-open .menu__toggle-bar:nth-child(1) {
    transform: rotate(45deg);
  }

  .is-menu-open .menu__toggle-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.2);
  }

  .is-menu-open .menu__toggle-bar:nth-child(3) {
    transform: rotate(-45deg);
  }

  .menu__overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1;
    align-items: center;
    justify-content: center;
    padding: calc(var(--menu-bar, 72px) + env(safe-area-inset-top) + 24px) 24px calc(48px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: radial-gradient(120% 80% at 50% 45%, rgba(20, 15, 8, 0.9), rgba(4, 3, 2, 0.96) 70%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--exit-ms) var(--ease-in-quad), visibility 0s linear var(--exit-ms);
  }

  .is-menu-open .menu__overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 540ms var(--ease-in-out-quad), visibility 0s linear 0s;
  }

  .menu__overlay-nav {
    width: 100%;
  }

  .menu__overlay-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 3.2vh, 26px);
  }

  .menu__overlay-item {
    display: flex;
    justify-content: center;
  }

  .menu__link--overlay {
    --menu-ls: 0.16em;
    --menu-ls-pad: 0.16em;
    --menu-line-bottom: 10px;
    --menu-line-h: 1.5px;
    --menu-g0: 22%;
    --menu-g1: 47%;
    --menu-g2: 71%;
    padding: 10px 0 10px 0.16em;
    font-size: clamp(26px, 7.4vw, 36px);
    line-height: 1.4;
    letter-spacing: 0.16em;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.45));
  }

  [data-section] {
    scroll-margin-top: calc(72px + env(safe-area-inset-top));
  }

  html.is-menu-open,
  html.is-menu-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }
}

@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .menu__overlay,
  .is-menu-open .menu__overlay,
  .menu__toggle-bar,
  .is-menu-open .menu__toggle-bar {
    transition-duration: 1ms;
    transition-delay: 0s;
  }
}