/* The World: a dive (Nachtrag 5, O1/O2). Only on /themes/world/.
   A fixed sea (z-index -1, under all content) changes colour with the scroll
   progress (js/dive.js); one fixed canvas draws light rays, sinking plastic
   and bioluminescence. Every text on the water stands on a field of at least
   rgba(5,10,14,.55): .62 near the surface (only rays behind), .86 from 40 m,
   where plastic and glowing points pass behind (a white piece behind .62
   would drop --text-dim to about 3.4:1). Without JavaScript the colours come
   from a gradient on .dive and the shoal sentence is a plain heading. */

.dive{position:relative}
.sea,.dive-fx{position:fixed;inset:0;z-index:-1;pointer-events:none}
.sea{background:rgb(14,112,150)}
.dive-fx{width:100%;height:100%;display:block}
html:not(.js) .dive{background:linear-gradient(rgb(14,112,150) 0%,rgb(8,74,110) 18%,rgb(4,40,64) 45%,rgb(2,16,28) 75%,rgb(1,5,9) 100%)}
html:not(.js) .sea,html:not(.js) .dive-fx,html:not(.js) .gauge{display:none}

/* Header over bright water: a tint so the menu keeps its contrast. */
.hd:not(.solid):not(.menu-open){background:linear-gradient(rgba(5,10,14,.72),rgba(5,10,14,.6))}

.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Text fields on the water */
/* .lit: near the surface, where no plastic passes behind (it starts at 40 m). */
.field{background:rgba(5,10,14,.86);padding:clamp(20px,2.4vw,32px)}
.field.lit{background:rgba(5,10,14,.62)}
.field.deep{background:rgba(1,5,9,.86)}
.dive .depth{color:var(--blue-on-ink)}
.dive .links{display:flex;flex-wrap:wrap;gap:12px 24px}

/* Room for the gauge on the right */
@media (min-width:701px){.dive .wrap{padding-right:calc(var(--gut-r) + 92px)}}

/* ---------- depth gauge ---------- */
.gauge{position:fixed;right:var(--gut-r);top:52%;transform:translateY(-50%);z-index:5;display:grid;justify-items:end;gap:10px;pointer-events:none}
.gauge .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:rgba(5,10,14,.86);padding:2px 6px}
.gauge .scale{display:block;position:relative;width:2px;height:min(46vh,380px);margin-right:10px;background:rgba(244,243,239,.4)}
.gauge .scale i{position:absolute;left:-5px;top:0;width:12px;height:2px;background:var(--text);will-change:transform}
/* Fixed width: the value changes while scrolling, the box must not move. */
.gauge .val{font:500 15px var(--mono);letter-spacing:.04em;background:rgba(5,10,14,.86);padding:4px 8px;min-width:8.6ch;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .gauge{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);transform:none}
  .gauge .lbl,.gauge .scale{display:none}
  .gauge .val{font-size:13px;padding:3px 7px}
}

/* ---------- surface ---------- */
.dive-surface{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding-block:120px 12vh}
.dive-surface .wrap{width:100%}
.dive-surface .field{display:grid;gap:22px;justify-items:start;width:fit-content;max-width:100%}
.dive-surface .kicker{color:var(--text)}
.dive-surface h1{font-size:clamp(46px,10vw,164px)}
.dive-surface .lede{max-width:34ch}

/* ---------- zones along the dive ---------- */
.zone{min-height:110vh;display:flex;align-items:center;padding-block:12vh}
.zone > .wrap{width:100%}
.zone.why{min-height:90vh}
.zone h2{font-size:clamp(30px,3.6vw,58px)}
.card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,48px);align-items:center}
.copy{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start;justify-items:start;max-width:46ch}
.copy .btns{margin-top:6px}
.media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#04121b}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media .vplay{top:12px;right:12px}
.films h2{margin-bottom:28px}
.films .doc .dim{max-width:56ch}
@media (max-width:860px){.card{grid-template-columns:1fr}.zone{min-height:100vh}}

/* works on the water */
.dive .work .t{color:var(--text)}
.dive .work .a{color:var(--text-dim)}
.works3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end}
.works3 .work,.works1 .work{width:100%}
.works3 .work img{width:100%}
.works1{justify-self:center;width:min(100%,520px)}
.works1 .work img{width:100%;max-height:70vh;object-fit:contain}
@media (max-width:520px){.works3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* artists */
.dive #artists .sec-head{margin-bottom:32px}

/* ---------- O2 · the shoal writes ---------- */
.shoal{position:relative;height:240vh}
.shoal .stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.shoal-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.js .shoal-h{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.shoal .note{position:absolute;z-index:2;left:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)));bottom:28px;max-width:44ch;background:rgba(3,10,16,.82);padding:18px 20px;display:grid;gap:8px}
@media (max-width:700px){.shoal .note{right:var(--gut-r);bottom:calc(env(safe-area-inset-bottom,0px) + 52px);padding:14px 16px;font-size:16px}}
/* Without JavaScript: the sentence as a heading, no empty scene. */
html:not(.js) .shoal{height:auto;padding-block:12vh}
html:not(.js) .shoal .stick{position:static;height:auto;overflow:visible;display:grid;gap:24px;padding-inline:var(--gut) var(--gut-r);max-width:var(--wrap);margin-inline:auto}
html:not(.js) .shoal-canvas{display:none}
html:not(.js) .shoal-h{font-size:clamp(34px,5vw,80px);background:rgba(5,10,14,.62);padding:24px}
html:not(.js) .shoal .note{position:static}

/* ---------- 1,000 m ---------- */
.abyss{min-height:120vh;display:flex;align-items:center;text-align:center;padding-block:12vh}
.abyss > .wrap{width:100%}
.abyss .field{display:grid;gap:18px;justify-items:center;max-width:62ch;margin-inline:auto}
.abyss h2{font-size:clamp(34px,5.2vw,84px)}
.abyss p:last-child{max-width:46ch}

/* Bookable exhibitions and contact on dark ground, over the canvas. */
.floor,.ft{background:rgb(1,5,9)}