/* slide-out site menu (mirrors twisted.co) */
/* Headings use the real Sugar Magic via the @font-face above — the live site
   declares the same stack but never loads the font, so ours renders the true
   brand face where the site shows the sans fallback. */
/* visibility (not display) so the panel has a prior frame to transition from;
   the hide is delayed by the slide duration so the exit animation can finish. */
.menu-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9998; visibility: hidden; transition: visibility 0s linear 1.2s; }
.menu-overlay.show { visibility: visible; transition: visibility 0s linear 0s; }
/* invisible full-screen click-catcher: clicking outside the panel closes the
   menu. The dark veil is NOT here — on the live site it is part of the sliding
   dialog itself, so ours lives on .menu-strip and travels with the panel. */
.menu-backdrop { position: absolute; inset: 0; }
.menu-overlay.show .menu-backdrop { opacity: 1; }
/* black stops short of the right edge: the logo/close strip is translucent so
   the page shows through it (matches the twisted.co menu) */
/* dimensions lifted from the live site's menu popup (606px dialog; content
   padded 15% top / 10% sides + 80% content-width inset -> ~107px left, ~80px
   top, ~54px bottom; 50px gap before each new section) */
/* The panel positions and animates; it does NOT scroll. .menu-scroll does.
   When the panel was both, ::before and .menu-strip - absolutely positioned
   children of a scroll container, so part of its scrollable overflow - were
   exactly one viewport tall and scrolled away with the content. Measured:
   the black ended at clientHeight minus scrollTop, to the pixel, leaving the
   page showing through everything below the fold. Separating the two fixes
   it structurally instead of relying on position:fixed resolving against a
   transformed ancestor, which was tried and did not hold. */
.menu-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 606px; max-width: 92vw; background: none; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 1.2s ease; }
.menu-scroll { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start; padding: 80px 84px 54px 107px; box-sizing: border-box; }
.menu-panel::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 60px; background: #000; }
.menu-overlay.show .menu-panel { transform: translateX(0); }
/* strip geometry mirrors the sidebar exactly (60px column, logo block 60x240,
   burger at 48%) so the morphing burger appears to detach from the sidebar's
   own hamburger and slide right with the panel */
/* z-index above .menu-scroll. The scroll wrapper spans the FULL panel width -
   its 84px right padding is inside its own box - so it overlaps this strip,
   and being both later in the DOM and z-index:1 it was painting on top and
   swallowing every click on the close button. elementFromPoint at the X's
   centre returned .menu-scroll, not the button. */
.menu-strip { position: absolute; top: 0; right: 0; bottom: 0; width: 60px; z-index: 2; background: rgba(0,0,0,.73); }
.menu-logo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 192px; }
.menu-logo img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(90deg); width: 140px; height: auto; }
.menu-nav { display: flex; flex-direction: column; }
.menu-head { font-family: 'Sugar Magic', sans-serif; color: #d19e38; font-weight: 500; font-size: 32px; line-height: 32px; letter-spacing: normal; margin: 0 0 20px; }
.menu-head a { color: inherit; text-decoration: none; }
.menu-overlay a:focus-visible, .menu-overlay button:focus-visible { outline: 2px solid #d19e38; outline-offset: 4px; }
.menu-head + .menu-list { margin-bottom: 50px; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { margin: 0; }
.menu-link { font-family: 'Poppins', sans-serif; color: #505050; font-weight: 300; font-size: 18px; line-height: 20px; text-decoration: none; display: inline-block; padding: 7px 0; cursor: pointer; transition: color .4s; }
.menu-link:hover { color: #fff; }
/* Poppins carries no kana - same problem as Jost in the options panel. */
.menu-link[lang="ja"] { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; }
/* desktop keeps the region links in the left rail, so the menu's copy stays
   hidden here. Declared BEFORE the media query - a later rule of equal
   specificity would otherwise beat the mobile display:flex. */
.menu-regions { display: none; }
/* In flow, pushed down by margin-top:auto rather than pinned with
   position:absolute. Pinning looked identical while the nav fitted, but the
   panel scrolls, and a pinned block does not move with the content it is
   pinned over - so on any short viewport the legal links sat on top of the
   Marine list (measured -252px at 1280x577). auto-margin puts them at the
   bottom when there is room and below the nav when there is not. The 107px/54px
   offsets are not lost: the panel's own padding is already 107px left and 54px
   bottom, so flowing lands in exactly the same place. */
.menu-docs { margin-top: auto; padding-top: 50px; display: flex; flex-direction: column; gap: 10px; }
.menu-docs a { font-family: 'Poppins', sans-serif; color: #505050; font-weight: 300; font-size: 14px; text-decoration: none; cursor: pointer; transition: color .4s; }
.menu-docs a:hover { color: #fff; }
/* burger <-> X morph, replicated from the site's Lottie ("Menu", 140f @60fps):
   outer lines flap outward, collapse into the centre line, then all rotate
   +/-45deg into the X; closing plays the exact mirror (reverse). */
.menu-burger { position: absolute; top: 48%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; }
/* shared by .menu-burger (in the strip) and .side-menu (in the rail / top bar) */
.burger span { position: absolute; left: 50%; top: 50%; width: 20px; height: 3px; margin: -1.5px 0 0 -10px; background: #fff; border-radius: 1.5px; }
.burger .b-top { transform: translateY(-7px); }
.burger .b-bot { transform: translateY(7px); }
.burger.open .b-top { animation: bTop 1.15s ease both; }
.burger.open .b-mid { animation: bMid 1.15s ease both; }
.burger.open .b-bot { animation: bBot 1.15s ease both; }
.burger.closing .b-top { animation: bTop 1.15s ease both reverse; }
.burger.closing .b-mid { animation: bMid 1.15s ease both reverse; }
.burger.closing .b-bot { animation: bBot 1.15s ease both reverse; }
@keyframes bTop {
  0%, 14% { transform: translateY(-7px) rotate(0); }
  33%     { transform: translateY(-10px) rotate(0); }
  51%, 57% { transform: translateY(0) rotate(0); }
  86%, 100% { transform: translateY(0) rotate(-45deg); }
}
@keyframes bMid {
  0%, 57% { transform: rotate(0); }
  86%, 100% { transform: rotate(45deg); }
}
@keyframes bBot {
  0%, 14% { transform: translateY(7px) rotate(0); }
  33%     { transform: translateY(10px) rotate(0); }
  51%, 57% { transform: translateY(0) rotate(0); }
  86%, 100% { transform: translateY(0) rotate(-45deg); }
}