/* The native modal occupies the top layer, outside the header's glass
   containing block. The original details menu remains the no-script fallback. */
.mobile-menu-dialog {
  --mobile-menu-ink: var(--site-ink);
  --mobile-menu-muted: var(--mobile-menu-ink);
  --mobile-menu-pane: rgba(255, 254, 250, .70);
  --mobile-menu-film: linear-gradient(135deg,
    rgba(255, 255, 255, .24), rgba(255, 255, 255, .05) 55%, transparent);
  --mobile-menu-control-border: rgba(40, 35, 44, .30);
  --mobile-menu-control-active: rgba(40, 35, 44, .08);
  --mobile-menu-atmosphere-opacity: 1;
  --mobile-menu-glass-film: linear-gradient(135deg,
    rgba(255, 255, 255, .48), rgba(255, 254, 250, .40) 55%, rgba(255, 255, 255, .48));
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100vh;
  block-size: 100dvh;
  min-inline-size: 0;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--mobile-menu-film), var(--mobile-menu-pane);
  color: var(--mobile-menu-ink);
  box-shadow: none;
  font-family: var(--font-latin), var(--font-japanese);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking);
  -webkit-backdrop-filter: blur(30px) saturate(130%);
  backdrop-filter: blur(30px) saturate(130%);
  opacity: 0;
  transform: translate3d(0, -12px, 0);
  transition: opacity .28s ease, transform .40s cubic-bezier(.22, 1, .36, 1);
}

.mobile-menu-dialog:not([open]) {
  display: none;
}

.mobile-menu-dialog[open] {
  display: flex;
  flex-direction: column;
}

.mobile-menu-dialog::backdrop {
  background: transparent;
}

.mobile-menu-dialog.is-visible:not(.is-closing) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.mobile-menu-dialog.is-closing {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition-duration: .28s;
}

/* The shared hero SVG supplies the entire pigment cycle inside an isolated
   shadow root. Its motion follows the menu lifecycle while this layer fades.
   The separate glass still samples the page; text and controls remain still. */
.mobile-menu-atmosphere,
.mobile-menu-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mobile-menu-atmosphere {
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .8s ease;
}

.mobile-menu-glass {
  z-index: 1;
  background: var(--mobile-menu-glass-film);
}

.mobile-menu-dialog.is-visible:not(.is-closing) .mobile-menu-atmosphere {
  opacity: var(--mobile-menu-atmosphere-opacity);
}

.mobile-menu-dialog.is-closing .mobile-menu-atmosphere {
  opacity: 0;
  transition-duration: .2s;
}

.mobile-menu-head,
.mobile-menu-content {
  position: relative;
  z-index: 2;
}

.mobile-menu-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-copy-gap, 1.5rem);
  min-block-size: calc(68px + env(safe-area-inset-top, 0px));
  padding-block: calc(12px + env(safe-area-inset-top, 0px)) 12px;
  padding-inline:
    max(var(--site-gutter), env(safe-area-inset-left, 0px))
    max(var(--site-gutter), env(safe-area-inset-right, 0px));
}

.mobile-menu-head .logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 44px;
  min-block-size: 44px;
  color: inherit;
}

.mobile-menu-head .logo img {
  inline-size: 28px;
  block-size: 28px;
}

.mobile-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: .75rem;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 9px 16px;
  border: 1px solid var(--mobile-menu-control-border);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--type-body-small-size);
  font-weight: var(--type-subheading-weight);
  line-height: 1.5;
  letter-spacing: var(--type-body-tracking);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .18s ease, border-color .18s ease;
}

.mobile-menu-close svg {
  display: block;
  flex: 0 0 auto;
  inline-size: 16px;
  block-size: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.mobile-menu-close:active {
  background: var(--mobile-menu-control-active);
  border-color: currentColor;
}

.mobile-menu-dialog :is(a, button):focus-visible {
  outline: 3px solid var(--interaction-focus-color, var(--site-blue));
  outline-offset: 5px;
}

.mobile-menu-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-block: clamp(1rem, 4vh, 3rem) calc(24px + env(safe-area-inset-bottom, 0px));
  padding-inline:
    max(var(--site-gutter), env(safe-area-inset-left, 0px))
    max(var(--site-gutter), env(safe-area-inset-right, 0px));
}

.mobile-menu-eyebrow {
  flex: 0 0 auto;
  margin: 0;
  color: var(--mobile-menu-muted);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-subheading-weight);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.mobile-menu-dialog .mobile-menu-links {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(.25rem, 1.2vh, .75rem);
  min-inline-size: 0;
  margin-block: clamp(1.5rem, 4vh, 3rem) 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.mobile-menu-dialog .mobile-menu-links > a {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 3.5rem;
  padding-block: .2em;
  color: inherit;
  font-family: var(--font-latin), var(--font-japanese);
  font-size: clamp(1.75rem, 6.4vw, 2.5rem);
  font-weight: var(--type-subheading-weight);
  line-height: 1.25;
  letter-spacing: var(--type-heading-tracking);
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .36s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--menu-order, 0) * 35ms);
}

.mobile-menu-dialog.is-visible:not(.is-closing) .mobile-menu-links > a {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.mobile-menu-dialog.is-closing .mobile-menu-links > a {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition-delay: 0s;
  transition-duration: .20s;
}

.mobile-menu-credit {
  flex: 0 0 auto;
  margin: auto 0 0;
  padding-top: var(--layout-heading-gap, 2.5rem);
  color: var(--mobile-menu-muted);
  font-size: var(--type-body-small-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-small-leading);
  letter-spacing: var(--type-body-tracking);
}

body.spatial-art-theme .mobile-menu-dialog {
  --mobile-menu-ink: var(--spatial-ink, #f2f0e9);
  --mobile-menu-muted: var(--mobile-menu-ink);
  --mobile-menu-pane: rgba(14, 17, 19, .76);
  --mobile-menu-film: linear-gradient(135deg, rgba(255, 255, 255, .055), transparent 65%);
  --mobile-menu-control-border: rgba(242, 240, 233, .30);
  --mobile-menu-control-active: rgba(242, 240, 233, .08);
  --mobile-menu-atmosphere-opacity: .74;
  --mobile-menu-glass-film: linear-gradient(135deg,
    rgba(14, 17, 19, .45), rgba(14, 17, 19, .50) 55%, rgba(14, 17, 19, .45));
}

@media (hover: hover) {
  .mobile-menu-close:hover {
    background: var(--mobile-menu-control-active);
    border-color: currentColor;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-menu-dialog {
    --mobile-menu-pane: rgba(255, 254, 250, .96);
  }
  body.spatial-art-theme .mobile-menu-dialog {
    --mobile-menu-pane: rgba(14, 17, 19, .96);
  }
}

.mobile-menu-dialog.is-static[open],
.mobile-menu-dialog.is-static .mobile-menu-links > a {
  opacity: 1;
  transform: none;
  transition: none;
}

.mobile-menu-dialog.is-static[open] .mobile-menu-atmosphere {
  opacity: var(--mobile-menu-atmosphere-opacity);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-dialog[open],
  .mobile-menu-dialog .mobile-menu-links > a {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mobile-menu-dialog .mobile-menu-close {
    transition: none;
  }
  .mobile-menu-dialog[open] .mobile-menu-atmosphere {
    opacity: var(--mobile-menu-atmosphere-opacity);
    transition: none;
  }
}