/* ============================================================
   FULLSCREEN MENU, DETAIL REFINEMENT
   One shared layer over the nine inline-styled menu copies.
   Rules: the layout and aesthetic stay; only measure, rhythm,
   hierarchy and motion change. Every animated property is
   transform or opacity. Colours derive from currentColor so
   the dark (DS) and light (NEUN / Shop) panels both hold.
   ============================================================ */

/* ---- panel: a touch more air at the edges ---- */
[data-menuroot] > aside {
  padding: clamp(22px, 3vh, 44px) clamp(26px, 3.4vw, 54px) !important;
}

/* ---- header: logo up, close down ---- */
[data-menuroot] > aside img[src*="ds-logo"] {
  height: clamp(30px, 2.7vw, 38px) !important;
}
[data-menuclose] {
  opacity: .62;
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1) !important;
}
[data-menuclose]:hover,
[data-menuclose]:focus-visible { opacity: 1; }
[data-menuclose]:focus-visible { outline: 0; }
[data-menuclose]:focus-visible span { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
[data-menuclose] span {
  font-size: 10px !important;
  letter-spacing: .28em !important;
  color: currentColor !important;
  opacity: .72;
}
[data-menuclose] iconify-icon {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px;
  color: currentColor !important;
  opacity: .85;
}

/* header row: its bottom margin follows the viewport height */
[data-menuroot] > aside > div:nth-child(3) { margin-bottom: clamp(16px, 3vh, 40px) !important; }

/* ---- nav block: breathing room above and below the timeline ---- */
[data-menuroot] > aside > nav {
  padding: clamp(16px, 3vh, 44px) 0 !important;
}

/* the timeline: thinner, quieter, moved to the left edge so the
   numbers sit 24px off it instead of on top of it */
[data-menuroot] > aside > nav > span:first-child {
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  background: currentColor !important;
  opacity: .085;
}

/* ---- items ---- */
[data-mitem] {
  padding: clamp(5px, 1vh, 12px) 0 clamp(5px, 1vh, 12px) 24px !important;
  gap: clamp(22px, 2.4vw, 36px) !important;
  transform: translateX(0);
  will-change: transform;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .35s ease !important;
}
[data-mitem].mr-active { transform: translateX(8px); }

/* the item's own timeline segment: lights up when active */
[data-mitem]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleY(.35);
  transform-origin: center;
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1);
}
[data-mitem].mr-active::before { opacity: .9; transform: scaleY(1); }
/* the active item slides 8px; its segment stays on the timeline */
[data-mitem].mr-active::before { left: -8px; }

/* numbers: measured, tabular, brightness by state only */
[data-num] {
  width: 34px !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  font-variant-numeric: tabular-nums;
  color: currentColor !important;
  opacity: .34;
  transition: opacity .4s cubic-bezier(.16, 1, .3, 1) !important;
}
[data-mitem].mr-active [data-num] { opacity: 1; }

/* words: +12%, letter-spacing held steady (no reflow animation);
   the slide lives on the item, not the word */
[data-word] {
  font-size: clamp(40px, min(5.2vw, 6.1vh), 80px) !important;
  line-height: .92 !important;
  transform: none !important;
  transition: letter-spacing .45s cubic-bezier(.16, 1, .3, 1) !important;
}
[data-arrow] {
  width: 22px !important;
  transition: opacity .4s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1) !important;
}

/* ---- the oversized background word: pinned low, never through the items ---- */
[data-bgword] {
  top: auto !important;
  bottom: -4% !important;
  left: -2% !important;
  font-size: clamp(96px, 11.5vw, 164px) !important;
  transition: opacity .6s ease;
}

/* ---- bottom utility area: a real grid ---- */
[data-menuroot] > aside > div:last-child {
  display: grid !important;
  grid-template-columns: 1fr;
  row-gap: 0;
  padding-top: clamp(16px, 2.4vh, 28px) !important;
  border-top: 1px solid !important;
  border-color: color-mix(in srgb, currentColor 10%, transparent) !important;
}
[data-menuroot] > aside > div:last-child > p:first-child {
  font-size: clamp(19px, 1.5vw, 24px) !important;
  letter-spacing: .07em !important;
  margin: 0 0 4px !important;
}
[data-menuroot] > aside > div:last-child > p:nth-child(2) {
  font-size: 10px !important;
  letter-spacing: .24em !important;
  color: currentColor !important;
  opacity: .42;
  margin: 0 0 clamp(12px, 1.8vh, 20px) !important;
}
/* the link row becomes a three-cell strip with hairline dividers */
.mr-util iconify-icon { display: none; }
.mr-util {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 !important;
  border-top: 1px solid;
  border-color: color-mix(in srgb, currentColor 8%, transparent);
}
.mr-util > * {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px 10px 0 !important;
  margin: 0 !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: currentColor !important;
  opacity: .62;
  background: none;
  border: 0;
  border-right: 1px solid color-mix(in srgb, currentColor 8%, transparent);
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1) !important;
}
.mr-util > *:not(:first-child) { padding-left: 14px !important; }
.mr-util > *:last-child { border-right: 0; padding-right: 0 !important; }
.mr-util > *:hover,
.mr-util > *:focus-visible { opacity: 1; }
.mr-util small {
  display: block;
  font-size: 9px;
  letter-spacing: .26em;
  opacity: .55;
  margin-bottom: 5px;
}
.mr-util__code { font-size: 12px; letter-spacing: .18em; }

/* ---- the floating language selector never sits on the open menu ---- */
html.mr-menu-open .ds-lang--float {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s ease;
}
.ds-lang--float { transition: opacity .3s ease; }


/* ---- while the menu is open, the floating chat trigger steps aside too ---- */
html.mr-menu-open .dt-trigger { opacity: 0 !important; pointer-events: none !important; transition: opacity .2s ease; }

/* ---- mobile first: 320 to 859 is a single column panel ---- */
@media (max-width: 859px) {
  [data-menuroot] > aside { padding: 22px 22px 18px !important; }
  [data-menuroot] > aside img[src*="ds-logo"] { height: 30px !important; }
  [data-menuroot] > aside > nav { padding: 22px 0 !important; }
  [data-mitem] { padding: clamp(6px, 1vh, 9px) 0 clamp(6px, 1vh, 9px) 22px !important; gap: 18px !important; }
  [data-mitem]::before { left: 0; }
  [data-mitem].mr-active::before { left: -8px; }
  [data-num] { width: 28px !important; }
  [data-word] { font-size: clamp(36px, min(11.4vw, 6.2vh), 56px) !important; }
  [data-bgword] { bottom: -2% !important; font-size: clamp(90px, 26vw, 120px) !important; }
  .mr-util > * { min-height: 46px; font-size: 10px !important; letter-spacing: .16em !important; }
}
@media (max-width: 359px) {
  .mr-util { grid-template-columns: 1fr 1fr; }
  .mr-util > *:nth-child(2) { border-right: 0; }
  .mr-util > *:last-child { grid-column: 1 / -1; border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); padding-left: 0 !important; }
}

/* ---- keyboard: the active segment doubles as the focus cue ---- */
[data-mitem]:focus-visible { outline: 0; }
[data-mitem]:focus-visible [data-word] { text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: 1px; }

/* ---- reduced motion: states switch, nothing glides ---- */
@media (prefers-reduced-motion: reduce) {
  [data-mitem], [data-mitem]::before, [data-num], [data-arrow], [data-bgword], .mr-util > *, [data-menuclose] {
    transition: none !important;
  }
  [data-mitem].mr-active { transform: none; }
}