/* Module menu: the evening ship fills the screen, numbered brass markers sit beside the elements, a typographic legend
   lists the seven modules. Clicking zooms gently towards the element and opens a card next to it.
   Sizes use cqw (container width) so the composition scales like one picture. */
.menu{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--night);color:var(--moon);container-type:inline-size}
/* one unit = 1% of the width, but never more than on an 1800 px screen, so text and markers stop growing on wide monitors */
.menu *{--u:min(1cqw,18px);--fx:max(0px,calc((100cqw - 2200px) / 2))}
/* on very wide screens the composition stays within 2200 px in the middle */
.menu .site.dark .in{max-width:2200px}
.menu .frame{position:absolute;inset:14px;border:1px solid rgba(201,161,90,.35);border-radius:3px;pointer-events:none;z-index:7}
.menu .frame::before{content:"";position:absolute;inset:5px;border:1px solid rgba(201,161,90,.15);border-radius:2px}
.stage{position:absolute;inset:0;background:linear-gradient(180deg,#22343F 0%,#34505F 34%,#2E4756 52%,#18282F 76%,#101A1D 100%)}
.world{position:absolute;inset:0;transform-origin:0 0;transform:translate(0px,0px) scale(1);transition:transform 1.3s cubic-bezier(.22,.61,.36,1);will-change:transform;backface-visibility:hidden}
.shift{position:absolute;bottom:0;right:-4%;width:min(80%,calc((100svh - 56px) * 16 / 9));aspect-ratio:16/9;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 18%,#000 36%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 18%,#000 36%);mask-composite:intersect}
.shift .pic{position:absolute;inset:0;background:url(../img/schiff-abend4.jpg) 50% 50%/cover no-repeat;animation:mdrift 26s ease-in-out infinite alternate}
.shift .pic.sea{-webkit-mask-image:linear-gradient(to bottom,transparent var(--m0),#000 var(--m1));mask-image:linear-gradient(to bottom,transparent var(--m0),#000 var(--m1));animation:seax 5.2s ease-in-out infinite alternate,seay 5.2s ease-in-out -2.6s infinite alternate}
.shift .pic.s1{--m0:84%;--m1:88%}.shift .pic.s2{--m0:91%;--m1:94%;animation:seax 4.3s ease-in-out -1.2s infinite alternate,seay 4.3s ease-in-out -3.35s infinite alternate}
@keyframes mdrift{from{transform:scale(1.02) translateX(-.3%)}to{transform:scale(1.045) translateX(.3%)}}
@keyframes seax{from{transform:scale(1.03) translateX(-.25%)}to{transform:scale(1.03) translateX(.25%)}}
@keyframes seay{from{translate:0 calc(var(--u)*-.12)}to{translate:0 calc(var(--u)*.18)}}
.menu .veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(14,22,30,.9) 0%,rgba(14,22,30,.6) 28%,rgba(14,22,30,0) 46%),radial-gradient(120% 90% at 70% 40%,transparent 55%,rgba(10,16,22,.45))}

.legend{position:absolute;left:calc(var(--fx) + var(--u)*4.6);top:clamp(84px,calc(var(--u)*7.4),120px);width:calc(var(--u)*25);min-width:300px;z-index:6;display:grid;gap:calc(var(--u)*.7);transition:opacity .5s,filter .5s}
.legend .eyebrow{margin:0;font-family:var(--mono);font-size:max(10px,calc(var(--u)*.74));letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.legend h1{margin:0;font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 144;font-weight:320;font-size:max(30px,calc(var(--u)*3.5));line-height:.98;letter-spacing:-.015em}
.legend h1 i{font-style:italic;font-weight:300;color:var(--brass)}
.legend .rule{display:flex;align-items:center;gap:calc(var(--u)*.7);margin:calc(var(--u)*.3) 0 calc(var(--u)*.2)}
.legend .rule::before,.legend .rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(201,161,90,.6),rgba(201,161,90,.1))}
.legend .rule::after{background:linear-gradient(90deg,rgba(201,161,90,.1),rgba(201,161,90,.6))}
.legend .rule img{width:max(14px,calc(var(--u)*1.2));height:auto}
.legend ol{list-style:none;margin:0;padding:0;display:grid}
.legend button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:max(30px,calc(var(--u)*2.8)) 1fr auto;align-items:baseline;gap:0 calc(var(--u)*.5);width:100%;padding:max(6px,calc(var(--u)*.42)) 0;border-bottom:1px solid rgba(243,234,219,.12);cursor:pointer}
.legend .n{font-family:var(--display);font-style:italic;font-size:max(14px,calc(var(--u)*1.15));color:var(--brass)}
.legend b{font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 36;font-weight:400;font-size:max(15px,calc(var(--u)*1.2));line-height:1.15;color:var(--moon);transition:color .2s}
.legend .c{grid-column:2;font-family:var(--body);font-size:max(11.5px,calc(var(--u)*.8));line-height:1.35;color:var(--moon2)}
.legend .c em{font-style:normal;color:var(--brass)}
.legend .arr{grid-row:1;grid-column:3;font-size:max(12px,calc(var(--u)*1));color:var(--brass);opacity:0;transform:translateX(calc(var(--u)*-.4));transition:opacity .2s,transform .2s}
.legend button.on b,.legend button:hover b{color:#F6D9A6}
.legend button.on .arr,.legend button:hover .arr{opacity:1;transform:none}
.legend button:focus-visible{outline:1px solid var(--brass);outline-offset:3px}

.mk{position:absolute;z-index:5;width:max(24px,calc(var(--u)*2.1));height:max(24px,calc(var(--u)*2.1));transform:translate(-50%,-50%);border-radius:50%;padding:0;cursor:pointer;
  background:rgba(14,22,30,.55);color:#F6D9A6;border:1px solid var(--brass);font-family:var(--display);font-style:italic;font-size:max(11px,calc(var(--u)*.95));line-height:1;display:grid;place-items:center;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 0 calc(var(--u)*1.2) rgba(240,180,100,.25);transition:transform .25s,background .25s,color .25s,opacity .3s}
.mk.extra{width:max(14px,calc(var(--u)*1.15));height:max(14px,calc(var(--u)*1.15));font-size:0}
.mk::after{content:"";position:absolute;inset:calc(var(--u)*-.45);border-radius:50%;border:1px solid rgba(201,161,90,.7);opacity:0;animation:mping 3.2s ease-out infinite;animation-delay:var(--d,0s)}
.mk.extra::after{display:none}
.mk.on,.mk:hover{transform:translate(-50%,-50%) scale(1.2);background:var(--brass);color:var(--night)}
.mk .tip{position:absolute;left:50%;bottom:140%;transform:translateX(-50%);white-space:nowrap;font-family:var(--body);font-style:normal;font-size:max(12px,calc(var(--u)*.9));line-height:1.3;padding:calc(var(--u)*.3) calc(var(--u)*.7);border-radius:3px;background:rgba(14,22,30,.88);color:var(--moon);border:1px solid rgba(201,161,90,.4);opacity:0;pointer-events:none;transition:opacity .2s}
.mk.on .tip,.mk:hover .tip,.mk:focus-visible .tip{opacity:1}
.mk:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@keyframes mping{0%{transform:scale(.7);opacity:.8}70%,100%{transform:scale(1.7);opacity:0}}
.menu .coords{position:absolute;right:calc(var(--u)*4.6);bottom:calc(var(--u)*2.4);z-index:6;font-family:var(--mono);font-size:max(10px,calc(var(--u)*.7));letter-spacing:.2em;color:var(--moon2);opacity:.75;text-transform:uppercase}
.menu .coords,.mk{transition:transform .25s,background .25s,color .25s,opacity .5s ease}
.menu.focus .legend,.menu.focus .coords{opacity:.12;filter:blur(2px);pointer-events:none}
.menu.focus .mk:not(.on){opacity:0;pointer-events:none}

.card{position:absolute;z-index:8;width:max(320px,calc(var(--u)*28));left:var(--cx);top:var(--cy);background:var(--ivory);color:var(--ink);border-radius:4px;padding:max(22px,calc(var(--u)*2)) max(24px,calc(var(--u)*2.2)) max(20px,calc(var(--u)*1.8));display:grid;gap:max(10px,calc(var(--u)*.8));box-shadow:0 calc(var(--u)*1) calc(var(--u)*2.6) rgba(0,0,0,.4);border-top:3px solid var(--brass);animation:cin .6s .35s cubic-bezier(.2,.7,.2,1) both}
.card[hidden]{display:none!important}
.card .eyebrow{margin:0;font-family:var(--mono);font-size:max(10px,calc(var(--u)*.74));letter-spacing:.2em;text-transform:uppercase;color:var(--brass2)}
.card h2{margin:0;font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 96;font-weight:360;font-size:max(26px,calc(var(--u)*2.4));line-height:1.04}
.card h2 i{font-style:italic;color:var(--brass2)}
.card .q{margin:0;font-family:var(--display);font-style:italic;font-size:max(15px,calc(var(--u)*1.1));line-height:1.4;color:var(--ink2)}
.card p{margin:0;font-size:max(14.5px,calc(var(--u)*1.02));line-height:1.6}
.card .go{justify-self:start;display:inline-flex;gap:8px;align-items:center;font:600 max(14px,calc(var(--u)*1)) var(--ui);letter-spacing:.03em;padding:max(11px,calc(var(--u)*.75)) max(20px,calc(var(--u)*1.6));border-radius:999px;border:0;background:var(--ink);color:var(--ivory);cursor:pointer;white-space:nowrap;text-decoration:none}
.card .go[aria-disabled="true"]{background:var(--paper2);color:var(--ink2);cursor:default}
.card .x{position:absolute;right:calc(var(--u)*.9);top:calc(var(--u)*.6);font:max(22px,calc(var(--u)*1.6))/1 var(--ui);border:0;background:none;color:var(--ink);cursor:pointer;padding:calc(var(--u)*.3) calc(var(--u)*.5)}
@keyframes cin{from{opacity:0;translate:0 calc(var(--u)*-.6)}to{opacity:1;translate:0 0}}

/* phones: picture on top, legend below, card as bottom sheet */
@media (max-width:760px){
  .menu{height:auto;min-height:0;container-type:normal;padding-top:56px}
  .menu .frame,.menu .coords{display:none}
  .stage{position:relative;height:66vw;min-height:240px}
  .shift{left:-18%;right:auto;width:118%;-webkit-mask-image:none;mask-image:none}
  .menu .veil{background:linear-gradient(180deg,rgba(14,22,30,0) 60%,rgba(14,22,30,.95) 100%)}
  .mk .tip{display:none}
  .legend{position:relative;left:auto;top:auto;width:auto;min-width:0;padding:4px max(16px,env(safe-area-inset-left,0px)) 28px;gap:10px}
  .legend h1{font-size:32px}
  .legend button{grid-template-columns:34px 1fr auto;gap:6px;padding:11px 0}
  .legend .arr{opacity:.7;transform:none}
  .card{position:fixed;left:0!important;right:0;bottom:0;top:auto!important;width:auto;border-radius:16px 16px 0 0;padding:24px 20px calc(22px + env(safe-area-inset-bottom,0px));z-index:50;box-shadow:0 -10px 40px rgba(0,0,0,.35)}
  .card .x{right:12px;top:10px}
  .menu.focus .legend{opacity:.35;filter:none}
}
/* reduced motion: the click zoom stays (it is calm and user-triggered), the ongoing drift stops and the card fades */
@keyframes cfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.shift .pic,.shift .pic.sea,.mk::after{animation:none}.card{animation:cfade .4s ease both}}