/* SKYLINE ARCHIVE — transparent navigation, mobile and desktop. */
#menuDots{top:max(22px,env(safe-area-inset-top))!important;right:max(18px,env(safe-area-inset-right))!important;width:48px;height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:10px;border:1px solid #ffffff26;border-radius:50%;background:#06080966;color:#f4f3ef;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:1}
#menuDots .dot{display:block;width:23px;height:1.5px;border-radius:2px;background:currentColor;box-shadow:none;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
#menuDots[aria-expanded="true"] .dot:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
#menuDots[aria-expanded="true"] .dot:nth-child(2){opacity:0}
#menuDots[aria-expanded="true"] .dot:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
#menuDots:focus-visible{outline:2px solid #e8c483;outline-offset:5px}
body.home-menu-open{overflow:hidden!important}
body.home-menu-open #current{opacity:.08!important;pointer-events:none!important}
#topMenu{position:fixed!important;inset:0!important;width:100%;height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:clamp(6px,1.5vh,20px);padding:90px clamp(26px,6vw,100px) max(40px,env(safe-area-inset-bottom));background:linear-gradient(90deg,rgba(0,3,5,.44),rgba(0,3,5,.84));overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transform:none;transition:opacity .55s ease,visibility 0s .55s}
#topMenu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
#topMenu .menuItem{display:block;flex:none;max-width:100%;box-sizing:border-box;padding:8px 0;min-height:44px;text-align:right;font:400 clamp(26px,3vw,42px)/1.12 Arial,Helvetica,sans-serif;letter-spacing:.01em;text-transform:uppercase;white-space:normal;text-decoration:none;color:#f4f3ef;opacity:0;transform:translateX(20px);text-shadow:none;transition:opacity .4s ease,transform .65s cubic-bezier(.16,1,.3,1),color .25s ease}
#topMenu.open .menuItem{opacity:1;transform:translateX(0);transition-delay:calc(var(--menu-order,0)*35ms)}
#topMenu .menuItem:nth-child(2){--menu-order:1}#topMenu .menuItem:nth-child(3){--menu-order:2}#topMenu .menuItem:nth-child(4){--menu-order:3}#topMenu .menuItem:nth-child(5){--menu-order:4}#topMenu .menuItem:nth-child(6){--menu-order:5}#topMenu .menuItem:nth-child(7){--menu-order:6}#topMenu .menuItem:nth-child(8){--menu-order:7}
#topMenu .menuItem:hover,#topMenu .menuItem:focus-visible,#topMenu .menuItem:active,#topMenu .menuItem.isPressed,#topMenu .menuItem.tactile-pressed{text-shadow:none}
#topMenu .menuItem:focus-visible{outline:1px solid #e8c483;outline-offset:5px}
#topMenu .menuItem[data-releases-link]{color:#f3c45c}
#topMenu .menuItem.journalLink{color:#ff916b}
#topMenu .menuItem.collectorsLink{color:#f4f3ef}
@media(max-height:650px){#topMenu{justify-content:flex-start;gap:3px;padding-top:82px;padding-bottom:24px}#topMenu .menuItem{font-size:25px;padding:6px 0}}
/* Mobile: a short flowing reveal, with no coloured-link flash.
   Keep layout, language controls and the desktop presentation unchanged. */
@media(max-width:767px){
  body #topMenu{transition:opacity 180ms ease-out,visibility 0s 180ms;will-change:opacity}
  body #topMenu.open{transition:opacity 240ms ease-out,visibility 0s;transition-delay:0s}
  body #topMenu .menuItem{opacity:0;transform:translate3d(10px,3px,0);transition:opacity 160ms ease-out,transform 180ms ease-out,color 150ms ease;transition-delay:0s;will-change:transform,opacity}
  body #topMenu:not(.open) .menuItem{opacity:0}
  body #topMenu.open .menuItem{opacity:1;transform:translate3d(0,0,0);transition:opacity 220ms ease-out,transform 280ms cubic-bezier(.2,.75,.25,1),color 150ms ease;transition-delay:calc(var(--menu-order,0)*18ms),calc(var(--menu-order,0)*18ms),0s}
  #topMenu .menuItem:nth-child(9){--menu-order:8}
  #menuDots{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  #menuDots .dot{transition:transform 280ms cubic-bezier(.2,.75,.25,1),opacity 160ms ease-out}
}
/* Independent translation leaves the approved reveal transform untouched.
   The transparent trailing hit area prevents hover flicker at the right edge. */
body #topMenu .menuItem{position:relative;translate:0 0;filter:brightness(1);transition-property:opacity,transform,color,translate,filter;transition-duration:400ms,650ms,250ms,260ms,200ms;transition-timing-function:ease,cubic-bezier(.16,1,.3,1),ease,cubic-bezier(.2,.75,.25,1),ease;transition-delay:0s}
body #topMenu.open .menuItem{transition-delay:calc(var(--menu-order,0)*35ms),calc(var(--menu-order,0)*35ms),0s,0s,0s}
body #topMenu .menuItem::before{content:"";position:absolute;inset:0 -12px 0 0;background:transparent}
body #topMenu .menuItem::after{content:"";position:absolute;right:0;bottom:3px;width:100%;height:1px;background:currentColor;opacity:0;transform:scaleX(0);transform-origin:right center;pointer-events:none;transition:transform 260ms cubic-bezier(.2,.75,.25,1),opacity 180ms ease}
@media(hover:hover) and (pointer:fine){
  body #topMenu.open .menuItem:hover{translate:-12px 0;filter:brightness(1.12)}
  body #topMenu.open .menuItem:hover::after{transform:scaleX(1);opacity:.8}
}
body #topMenu.open .menuItem:focus-visible{translate:-12px 0;filter:brightness(1.12)}
body #topMenu.open .menuItem:focus-visible::after{transform:scaleX(1);opacity:.8}
@media(max-width:767px){
  body #topMenu .menuItem{transition-duration:160ms,180ms,150ms,140ms,140ms;transition-timing-function:ease-out,ease-out,ease,ease-out,ease-out}
  body #topMenu.open .menuItem{transition-property:opacity,transform,color,translate,filter;transition-duration:220ms,280ms,150ms,140ms,140ms;transition-timing-function:ease-out,cubic-bezier(.2,.75,.25,1),ease,ease-out,ease-out;transition-delay:calc(var(--menu-order,0)*18ms),calc(var(--menu-order,0)*18ms),0s,0s,0s}
  body #topMenu.open .menuItem:focus-visible{translate:-6px 0}
}
@media(hover:none), (pointer:coarse){
  body #topMenu.open .menuItem:active,body #topMenu.open .menuItem.isPressed,body #topMenu.open .menuItem.tactile-pressed{translate:-6px 0;filter:brightness(1.12);transition-duration:220ms,280ms,150ms,100ms,100ms}
  body #topMenu.open .menuItem:active::after,body #topMenu.open .menuItem.isPressed::after,body #topMenu.open .menuItem.tactile-pressed::after{transform:scaleX(1);opacity:.8;transition-duration:100ms}
}
@media(prefers-reduced-motion:reduce){#menuDots .dot,#topMenu,#topMenu .menuItem{transition:none!important;transform:none!important;translate:none!important}body #topMenu .menuItem::after{display:none;transition:none}#menuDots[aria-expanded="true"] .dot:nth-child(1){transform:translateY(7.5px) rotate(45deg)!important}#menuDots[aria-expanded="true"] .dot:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)!important}}