/* the footer: deep water, a playful sign-up, the useful bits, and a giant wordmark (back to top) with the ship floating on it */
.foot { position: relative; background: #020b1d; color: #fff; overflow: hidden; display: flex; flex-direction: column; min-height: 100vh; padding: clamp(120px, 18vh, 170px) clamp(16px, 6vw, 96px) 0; font-family: var(--sans); }
.foot a { color: inherit; text-decoration: none; }
.ft-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
.ft-cta h2 { margin: 0 0 18px; font: 900 clamp(36px, 4vw, 72px)/.9 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.ft-cta p { margin: 0 0 22px; max-width: 420px; font: 400 16px/1.55 var(--sans); color: rgba(255, 255, 255, .72); }
.ft-news { display: flex; gap: 8px; max-width: 460px; }
.ft-news input { flex: 1; min-width: 0; height: 50px; padding: 0 22px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; font: 400 15px/1 var(--sans); outline: none; transition: border-color .25s; }
.ft-news input::placeholder { color: rgba(255, 255, 255, .5); }
.ft-news input:focus { border-color: #fff; }
.ft-news button { height: 50px; padding: 0 24px; border-radius: 999px; border: 1.5px solid #fff; background: #fff; color: #0d0b10; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s; }
.ft-news button:hover { background: transparent; color: #fff; }
.ft-news.done { display: block; font: 500 15px/1.5 var(--sans); color: #fff; }
.ft-col h3 { margin: 6px 0 18px; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ft-col p { margin: 0 0 14px; font: 400 15px/1.55 var(--sans); color: rgba(255, 255, 255, .85); }
.ft-col > a { display: block; width: fit-content; margin-bottom: 12px; font: 500 15px/1.2 var(--sans); position: relative; }
.ft-col > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .3, 1); }
.ft-col > a:hover::after { transform: none; }
.ft-social { display: flex; gap: 10px; }
.ft-social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .4); transition: background .25s, border-color .25s, color .25s; }
.ft-social a:hover { background: #fff; border-color: #fff; color: #020b1d; }
.ft-social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the wordmark: as wide as the page; the ship floats slowly along the top of the letters */
.ft-word { position: relative; display: block; margin-top: auto; padding-top: clamp(60px, 10vh, 120px); font: 900 15vw/.78 var(--display); letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; }
.ft-text { display: inline-block; }
.ft-ship { position: absolute; left: 0; top: calc(clamp(60px, 10vh, 120px) - 5.4vw); width: 6.4vw; font-size: 16px; pointer-events: none; animation: ftsail 64s linear infinite; }
@keyframes ftsail { 0% { left: -2%; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { left: 94%; opacity: 0; } }   /* drifts slowly along the letters, then slips away and starts again */
.ft-ship img { display: block; width: 100%; filter: invert(1); transform-origin: 50% 90%; animation: ftbob 4.2s ease-in-out infinite; }
@keyframes ftbob { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-4px); } }
.ft-base { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0 26px; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
@media (max-width: 900px) { .ft-top { grid-template-columns: 1fr 1fr; } .ft-cta { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ft-top { grid-template-columns: 1fr; } .ft-base { flex-direction: column; } }

/* the phone menu: a Menu button in the nav pill opens a full-screen panel of deep water with big links */
.menu-btn { display: none; align-items: center; gap: 10px; padding: 0 18px 0 6px; border: 0; background: none; color: inherit; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.menu-btn i { display: grid; gap: 5px; } .menu-btn i::before, .menu-btn i::after { content: ""; display: block; width: 20px; height: 1.5px; background: currentColor; }
body.dark .menu-btn { color: #fff; }
.mm { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; padding: 28px 24px calc(28px + env(safe-area-inset-bottom)); background: #020b1d; color: #fff; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.mm.open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.mm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7vh; }
.mm-head img { width: 44px; height: 44px; filter: invert(1); }
.mm-close { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .4); background: none; color: #fff; font: 300 26px/1 var(--sans); cursor: pointer; }
.mm nav { display: flex; flex-direction: column; }
.mm nav a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); color: #fff; text-decoration: none; font: 900 clamp(34px, 10vw, 52px)/1 var(--display); letter-spacing: -.03em; text-transform: uppercase;
  opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .3, 1); }
.mm.open nav a { opacity: 1; transform: none; }
.mm.open nav a:nth-child(2) { transition-delay: .04s; } .mm.open nav a:nth-child(3) { transition-delay: .08s; } .mm.open nav a:nth-child(4) { transition-delay: .12s; }
.mm-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mm-foot a { display: inline-flex; align-items: center; height: 50px; padding: 0 26px; border-radius: 999px; background: #fff; color: #0d0b10; text-decoration: none; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.mm-foot span { font: 400 14px/1.4 var(--sans); color: rgba(255, 255, 255, .7); }
@media (max-width: 760px) { .menu-btn { display: flex; } }

/* the nav, balanced: it runs margin to margin like the page, logo left, links in the middle, tickets an inset pill on the right */
.top { left: clamp(16px, 3.6vw, 56px) !important; right: clamp(16px, 3.6vw, 56px) !important; transform: none !important; justify-content: space-between; }   /* the same margins on every page */
.top nav { flex: 1; justify-content: center; }
.top .tix { margin: 8px; border-radius: 999px; padding: 0 clamp(20px, 2.2vw, 30px) !important; }
@media (max-width: 760px) { .top { left: 12px !important; right: 12px !important; } .top nav { display: none; } .menu-btn { margin-left: auto; } }

/* no bar: the logo, the links and the ticket pill each sit on the page on their own.
   On white they're just ink; over the dark scenes the links (and the phone menu button) get their own little glass pill so they still read */
.top, body.dark .top { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible !important; border-radius: 0 !important; }
.top nav { position: absolute; left: 50%; top: 8px; bottom: 8px; transform: translateX(-50%); flex: none; padding: 0 clamp(18px, 2vw, 28px) !important; gap: clamp(18px, 3.2vw, 46px) !important; border-radius: 999px; transition: background .25s ease, box-shadow .25s ease; }
.top .tix { margin-left: auto; }
body.dark .top nav, body.dark .menu-btn { background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.menu-btn { margin: 8px 0; border-radius: 999px; padding: 0 16px; }

/* the page change: a wave of the site's water rises over the page, then carries on up and off the next one */
html.wave-in body::before { content: ""; position: fixed; inset: 0; z-index: 59; background: #08070b; }   /* covers the new page until the wave takes over */
.wv { position: fixed; inset: 0; z-index: 60; width: 100vw; height: 100vh; pointer-events: none; }
.wv.busy { pointer-events: auto; }
.wv img { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; filter: invert(1); opacity: 0; }

/* the other pages' logo: the same moving octopus, same size and spot as on the home page */
.top:has(.logo) { padding-left: 14px !important; }
.top .logo { margin: 0; }
.top .logo canvas { display: block; width: 62px; height: 62px; transition: filter .2s ease; }
body.dark .top .logo canvas { filter: invert(1); }

/* the scroller: a hairline down the right edge, a small pill that rides it, and the depth you're at beside it.
   Dark on white, white in the deep; it settles back when you stop scrolling */
html { scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
.sb { position: fixed; z-index: 40; right: 14px; top: 110px; bottom: 34px; width: 22px; color: #0d0b10; opacity: .4; transition: opacity .4s ease, color .25s ease; touch-action: none; cursor: pointer; }
body.dark .sb { color: #fff; }
.sb.on, .sb:hover { opacity: 1; }
.sb::before { content: ""; position: absolute; right: 6px; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .25; }
.sb-thumb { position: absolute; right: 4px; top: 0; width: 5px; height: 46px; border-radius: 999px; background: currentColor; transition: width .2s ease, right .2s ease; will-change: transform; }
.sb:hover .sb-thumb, .sb.drag .sb-thumb { width: 7px; right: 3px; }
.sb-depth { position: absolute; right: 20px; top: 0; white-space: nowrap; font: 500 10px/1 'Instrument Sans', system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: translateX(4px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.sb.on .sb-depth, .sb:hover .sb-depth { opacity: .8; transform: none; }
@media (max-width: 760px) { .sb { display: none; } }

/* the cursor: a small dot with a hairline ring that drifts after it, in the same quiet style as the scroller.
   It inverts against whatever is under it, so it reads on white and in the deep. Mouse only */
@media (hover: hover) and (pointer: fine) {
  html.cur, html.cur * { cursor: none !important; }
  html.cur input, html.cur textarea { cursor: text !important; }
  .cur-dot, .cur-ring { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; will-change: transform; }
  .cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; transition: opacity .2s ease, width .25s ease, height .25s ease, margin .25s ease; }
  .cur-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid #fff; transition: width .35s cubic-bezier(.2, .8, .3, 1), height .35s cubic-bezier(.2, .8, .3, 1), margin .35s cubic-bezier(.2, .8, .3, 1), opacity .3s ease, background .3s ease; }
  html.cur-hover .cur-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(255, 255, 255, .12); }
  html.cur-hover .cur-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
  html.cur-down .cur-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  html.cur-out .cur-dot, html.cur-out .cur-ring { opacity: 0; }
}