/* Dive with Kobina (Nachtrag 9). One committed dark underwater look, the water
   colour comes from the depth (js/dive-kobina.js). The base of this file is the
   page without motion: everything in normal order, every effect in its end
   state. The block for html.js without reduced motion at the end reserves the
   sticky heights and sets the start states, so nothing shifts when scripts run.
   Text on the water sits on a field of at least rgba(2,14,22,.62). */
.dk{--bio:#78f0dc;--dim:#c9dbdf;--field:rgba(2,14,22,.62);--wall:#0a3346;--wall-2:#082838;--floor:#06131a;position:relative;color:var(--text)}
.dk-page{background:#02070b}
.dk-page .hd.solid:not(.menu-open){background:rgba(3,14,22,.6)}
.dk-page .ft{position:relative;z-index:4;background:#01060a}
.dk ::selection{background:var(--bio);color:#02070b}
.dk .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.dk-defs{position:absolute;width:0;height:0}
.dk p{max-width:58ch}
.dk-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dk .vplay{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 104px)}
.dk-media .vplay{top:12px;right:12px;bottom:auto}
.dk section,.dk-reef{position:relative}

/* ---------- the water ---------- */
.dk-water,.dk-tint{position:fixed;inset:0;z-index:-3;background:#0e7096}
.dk-tint{z-index:-1;background:transparent;transition:background .6s}
.dk-caustic{position:fixed;left:-1500px;top:-2200px;right:0;bottom:0;z-index:-2;pointer-events:none;opacity:.11;background-image:url(/assets/images/dive/caustics.png),url(/assets/images/dive/caustics.png);background-size:1100px,1500px;mix-blend-mode:screen;filter:blur(2px)}
.dk-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.dk-bits{z-index:3}

/* ---------- gauges ---------- */
.dk-hud,.dk-top{position:fixed;z-index:40;left:0;right:0;display:flex;justify-content:space-between;gap:16px;padding-left:var(--gut);padding-right:var(--gut-r);pointer-events:none;transition:opacity .3s}
.dk-hud{bottom:0;align-items:flex-end;padding-top:26px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px);background:linear-gradient(to top,rgba(2,12,20,.72),rgba(2,12,20,.5) 60%,rgba(2,12,20,0))}
.dk-top{top:calc(env(safe-area-inset-top,0px) + 78px);align-items:center}
.dk-hud.off,.dk-top.off{opacity:0;visibility:hidden}
.dk-where{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:rgba(2,14,22,.5);padding:4px 8px}
.dk-snd{pointer-events:auto;min-height:40px;padding:8px 14px;background:rgba(2,14,22,.55);border:1px solid rgba(255,255,255,.5);color:var(--text);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.dk-snd[aria-pressed="true"]{border-color:var(--bio);color:var(--bio)}
.dk-gauge{display:grid;gap:4px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.dk-gauge strong{font:800 clamp(28px,3.6vw,46px)/1 var(--display);font-stretch:125%;font-variant-numeric:tabular-nums;letter-spacing:0}
.dk-air{justify-items:end;text-align:right}
.dk-airbar{width:min(180px,34vw);height:6px;background:rgba(255,255,255,.2)}
.dk-airbar i{display:block;height:100%;width:100%;background:var(--bio);transition:background .4s}

/* ---------- type ---------- */
.dk h2.disp{font-size:clamp(40px,7vw,104px);text-transform:uppercase}
.dk h2.dk-h-m{font-size:clamp(34px,5vw,72px)}
.dk h2.dk-h-l{font-size:clamp(38px,6vw,90px)}
.dk .lede{font-size:clamp(20px,1.8vw,25px);line-height:1.45;font-weight:500;max-width:36ch;text-wrap:pretty}
.dk-mark{font:500 12px var(--mono);letter-spacing:.1em;color:var(--bio);text-transform:uppercase}
.dk-mark.warm{color:var(--yellow)}
.dk-quote{font-weight:700;font-stretch:110%;font-size:clamp(26px,3.4vw,50px);line-height:1.08;text-wrap:balance}
.dk p.dk-quote{max-width:22ch}
.dk p.dk-quote.small{font-size:clamp(22px,2.4vw,34px);max-width:30ch}
.dk-who{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.dk-dim{color:var(--dim)}
.dk-scene{display:inline-flex;gap:8px;align-items:center;justify-self:start;font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding:6px 0 2px}
.dk-scene::before{content:"";width:0;height:0;border-left:8px solid currentColor;border-block:5px solid transparent}
.dk-field{display:grid;gap:18px;justify-items:start;background:var(--field);padding:clamp(18px,2.4vw,32px)}

/* ---------- hero ---------- */
.dk-hero .stick{position:relative;height:100vh;height:100svh;overflow:hidden}
.dk-under{display:none;position:absolute;inset:0;background:linear-gradient(to bottom,rgba(9,80,110,.55),rgba(3,30,48,.92));-webkit-backdrop-filter:blur(7px) saturate(1.3);backdrop-filter:blur(7px) saturate(1.3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 2000' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q150 0 300 40 T600 40 T900 40 T1200 40 V2000 H0Z'/%3E%3C/svg%3E") 0 0/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 2000' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q150 0 300 40 T600 40 T900 40 T1200 40 V2000 H0Z'/%3E%3C/svg%3E") 0 0/100% 100%}
.dk-hero .copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:clamp(12px,2.4vh,22px);padding:84px var(--gut-r) calc(max(13vh,92px) + env(safe-area-inset-bottom,0px)) var(--gut);background:linear-gradient(to top,rgba(2,12,20,.82),rgba(2,12,20,.35) 55%,rgba(2,12,20,.1))}
.dk-hero h1{font-size:clamp(46px,min(15vw,11vh),92px);filter:url(#dk-wobble)}
@media (min-width:760px){.dk-hero h1{font-size:min(10.4vw,23vh);white-space:nowrap}}
.dk-hero h1 span{display:block}
.dk-hero h1 em{font-style:normal;color:var(--bio)}
.dk-row{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center}

/* ---------- chapters ---------- */
.dk-ch{padding-block:22vh}
.dk-ch.dk-short{padding-block:10vh 18vh}
.dk-head{display:grid;gap:18px;margin-bottom:8vh;justify-items:start}
.dk-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.dk-split>*{min-width:0}
.dk-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#04121b;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.dk-photo{width:100%;height:auto}
.dk-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:10vh}
.dk-facts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.dk-fact{background:var(--field);padding:18px 20px}
.dk-fact b{display:block;font-weight:800;font-stretch:125%;font-size:clamp(48px,6vw,88px);line-height:.9;font-variant-numeric:tabular-nums}
.dk-fact span{display:block;margin-top:8px;color:var(--dim);max-width:24ch;font-size:16px}
.dk-got{display:inline-flex;gap:14px;align-items:center;padding:12px 16px;border:1px dashed rgba(255,255,255,.5);font:500 13px var(--mono);letter-spacing:.04em}
.dk-got b{font:800 28px var(--display);color:var(--yellow);font-variant-numeric:tabular-nums}

/* ---------- works in the water ---------- */
.dk-drift{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);align-items:end;margin-top:8vh}
.dk-split .dk-drift{margin-top:0}
.dk-drift.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.dk-wk{border:0;padding:0;background:none;color:inherit;text-align:left;cursor:zoom-in;display:grid;gap:10px;font:inherit}
.dk-wk img{width:100%;height:auto;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.dk-wk span{font:500 12px var(--mono);letter-spacing:.05em;color:var(--dim);background:var(--field);padding:4px 8px;justify-self:start}
.dk-wk b{color:var(--text);font-weight:500}
.dk-heat .dk-wk img{filter:url(#dk-heat)}

/* ---------- porthole ---------- */
.dk-port .stick{position:relative;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.dk-port .dk-fill{clip-path:circle(var(--r,100%) at 50% 50%)}
.dk-rim{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 10px rgba(220,240,245,.18),0 0 0 22px rgba(220,240,245,.06),inset 0 0 60px rgba(0,0,0,.6);pointer-events:none}
.dk-cap{position:absolute;left:0;right:0;bottom:max(12vh,96px);display:grid;gap:12px;padding:0 var(--gut-r) 0 var(--gut);opacity:var(--capo,1);text-shadow:0 2px 30px rgba(0,0,0,.8);background:linear-gradient(to top,rgba(2,12,20,.6),transparent)}

/* ---------- the shoal writes ---------- */
.shoal{height:100vh;height:100svh}
.shoal .stick{position:relative;height:100%;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}
.dk .shoal .note{position:absolute;z-index:2;left:var(--gut);right:var(--gut-r);bottom:calc(max(16vh,96px) + env(safe-area-inset-bottom,0px));max-width:44ch;background:var(--field);padding:14px 18px;font-size:16px;color:var(--dim)}
html:not(.js) .shoal{height:auto;padding-block:12vh}
html:not(.js) .shoal .stick{height:auto;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) .dk .shoal .note{position:static}

/* ---------- the net ---------- */
.dk-net{padding-block:12vh}
.dk-net .stick{position:relative;overflow:hidden}
.dk-netsvg{position:absolute;top:0;bottom:0;left:0;width:130%;height:100%;opacity:.85;transform:translateX(-100%)}
.dk-net .copy{position:relative;margin-inline:var(--gut) var(--gut-r);max-width:600px}
.dk-missing{aspect-ratio:114/81;width:min(420px,100%);border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;align-content:center;text-align:center;padding:20px;font:500 12px var(--mono);color:var(--dim);background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 10px,transparent 10px 20px)}

/* ---------- the silver river ---------- */
.dk-river{padding-block:12vh}
.dk-river .stick{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:24px;padding-inline:var(--gut) var(--gut-r)}
.dk-map{display:block;width:100%;height:auto}
.dk-land{fill:url(#dk-landfill);stroke:rgba(238,245,246,.55);stroke-width:1.5}
.dk-rv{fill:none;stroke:#c9974d;stroke-linecap:round}
.dk-mpa{fill:none;stroke:var(--bio);stroke-width:2;transition:opacity .5s}
.dk-map text{font:15px var(--mono);fill:var(--text)}
.dk-map circle.k0,.dk-map circle.k2{fill:var(--text)}
.dk-map .k1{fill:var(--yellow)}
.dk-map .k3{fill:var(--bio)}
.dk-map .dk-rn{font-size:14px;font-style:italic;fill:#c9974d}
.dk-map .dk-note{font-size:12px;fill:rgba(238,245,246,.7)}
.dk-steps{display:grid;gap:40px;min-width:0}
.dk-step{display:grid;gap:14px;background:var(--field);padding:clamp(16px,2vw,24px);justify-items:start}
.dk-meter{font:800 clamp(52px,6vw,92px)/.9 var(--display);font-stretch:125%;font-variant-numeric:tabular-nums}
.dk-meter small{display:block;font:500 13px var(--mono);letter-spacing:.06em;color:var(--dim);margin-top:8px;text-transform:uppercase}

/* ---------- the dark ---------- */
.dk-dark .stick{position:relative;background:#000;display:grid;gap:24px;padding-block:14vh}
.dk-torch{display:block;width:min(100%,900px);margin-inline:auto;border:0;padding:0;background:none;cursor:zoom-in}
.dk-torch img{display:block;width:100%;height:auto}
.dk-dark .copy{order:-1;display:grid;gap:14px;justify-items:center;text-align:center;padding-inline:var(--gut) var(--gut-r);pointer-events:none}
.dk-yet{order:2;margin:0 auto;text-align:center;font:800 clamp(40px,7vw,110px)/.9 var(--display);font-stretch:125%;text-transform:uppercase;color:var(--bio);text-shadow:0 0 40px rgba(120,240,220,.6),0 2px 10px #02101a,0 0 3px #02101a;padding-block:.35em;background:linear-gradient(to right,rgba(2,14,22,0),rgba(2,14,22,.72) 30%,rgba(2,14,22,.72) 70%,rgba(2,14,22,0))}

/* ---------- the rainbow ---------- */
.dk-rainbow{padding-block:12vh}
.dk-rainbow .stick{display:grid;gap:24px}
.dk-rainbow .copy{display:grid;gap:12px;padding-inline:var(--gut) var(--gut-r);justify-items:start}
.dk-rb{position:relative;display:block;width:100%;border:0;padding:0;background:none;cursor:zoom-in}
.dk-rb img{display:block;width:min(100%,1320px);height:auto;margin-inline:auto}
.dk-rb canvas{display:none}

/* ---------- word by word, nothing can be done ---------- */
.dk-bio .stick{display:grid;place-items:center;padding-block:14vh;padding-inline:var(--gut) var(--gut-r)}
.dk-biobox{display:grid;gap:22px;justify-items:start}
.dk p.dk-bioq{max-width:20ch;font:800 clamp(34px,5.6vw,86px)/1.02 var(--display);font-stretch:118%;text-transform:uppercase;text-wrap:balance;color:var(--bio)}
.dk-nothing .stick{display:grid;align-content:center;gap:4vh;padding-block:12vh;padding-inline:var(--gut) var(--gut-r)}
.dk-no{position:relative;justify-self:start;font:800 clamp(44px,9vw,150px)/.88 var(--display);font-stretch:125%;text-transform:uppercase;opacity:calc(1 - var(--ns,1) * .5)}
.dk-no::after{content:"";position:absolute;left:-2%;right:-2%;top:48%;height:.12em;background:var(--green);transform-origin:left;transform:scaleX(var(--ns,1))}
.dk-yes{display:flex;gap:clamp(16px,4vw,60px);align-items:end;flex-wrap:wrap;opacity:var(--yo,1);transform:translateY(calc((1 - var(--yo,1)) * 40px))}
.dk-eighty{font:800 clamp(80px,14vw,230px)/.8 var(--display);font-stretch:125%;color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}
.dk-yes>div{display:grid;gap:12px;max-width:40ch;background:var(--field);padding:14px 16px}
.dk-yes p:first-child{font-size:clamp(19px,1.8vw,24px);font-weight:600}

/* ---------- the exhibition: the wall of Nachtrag 8, under water ---------- */
.dk-expo{padding-block:20vh 6vh}
.dk-expo .dk-field{max-width:1320px;gap:24px;margin-inline:auto;background:transparent}
.o-bio{--ring:var(--bio);--accent:var(--bio)}
.dk-reef .gw-sticky{background:linear-gradient(180deg,#0a3346 0%,#082838 70%,#041722 100%)}
.dk-reef .gw-sticky::before{content:"";position:absolute;left:-600px;top:-1200px;right:0;bottom:0;background-image:url(/assets/images/dive/caustics.png);background-size:600px;mix-blend-mode:screen;opacity:.11;pointer-events:none;will-change:transform}
.dk-reef .gw-sticky::after{background:linear-gradient(#06131a,#020a0f);border-top-color:rgba(255,255,255,.08)}
.dk-reef .gw-spot{background:linear-gradient(to bottom,rgba(180,240,255,0) 0%,rgba(180,240,255,.07) 45%,rgba(180,240,255,.12) 72%,rgba(180,240,255,0) 100%)}
.dk-reef .gw-halo{background:radial-gradient(closest-side,rgba(180,240,255,.24),rgba(180,240,255,0))}
.dk-reef .gw-lamp{background:#123242}
.dk-reef .gw-room{opacity:.34}
.dk-reef .gw-room small{display:none}
.dk-reef .gw-person svg{fill:#5d7c86;opacity:.5}
.dk-reef .gw-hud{bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}
@media (min-width:760px){.dk-reef .gw-hud{bottom:calc(env(safe-area-inset-bottom,0px) + 118px)}}
.dk-reef .gw-where{color:var(--dim)}

/* ---------- five ways in ---------- */
.dk-mods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin-top:6vh;background:rgba(255,255,255,.12)}
.dk-mod{background:rgba(2,16,24,.92);padding:28px 24px;display:grid;gap:12px;align-content:start;min-width:0}
.dk-mod .n{font:800 46px/1 var(--display);font-stretch:125%;color:var(--bio)}
.dk-mod h3{font:800 20px/1.15 var(--display);text-transform:uppercase;letter-spacing:.02em}
.dk-mod p{color:var(--dim);font-size:16px}
.dk-media2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2px;margin-top:2px}
.dk-media2 .dk-photo{height:100%;object-fit:cover;aspect-ratio:16/10}
.dk-hosth{margin-top:8vh;font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bio)}
.dk-hosts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.dk-hosts li{border:1px solid rgba(255,255,255,.4);padding:8px 12px;font:500 13px var(--mono);letter-spacing:.03em;background:var(--field)}

/* ---------- surfacing ---------- */
.dk-surface .stick{position:relative;height:100vh;height:100svh;overflow:hidden}
.dk-sun{position:absolute;inset:0;-webkit-mask:linear-gradient(#000,#000) 0 0/100% var(--sh,100%) no-repeat;mask:linear-gradient(#000,#000) 0 0/100% var(--sh,100%) no-repeat}
.dk-surface .vplay{top:132px;bottom:auto;left:var(--gut);right:auto}
.dk-line{position:absolute;left:0;right:0;top:var(--sh,100%);height:3px;background:rgba(255,255,255,.7);box-shadow:0 0 20px #fff;opacity:calc(1 - var(--done,1))}
.dk-surface .copy{position:absolute;left:0;right:0;bottom:0;display:grid;gap:22px;justify-items:start;padding:80px var(--gut-r) calc(max(14vh,92px) + env(safe-area-inset-bottom,0px)) var(--gut);opacity:var(--co2,1);background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.45) 60%,transparent)}

/* ---------- sources ---------- */
.dk-sources{padding-block:12vh;background:#01060a;z-index:4}
.dk-sources h2{text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:500;font-size:13px}
.dk-sources ol{margin:16px 0 0;padding-left:20px;display:grid;gap:8px;font-size:14px;color:var(--dim);max-width:90ch}

/* ---------- film overlay ---------- */
.dk-film{width:min(1100px,calc(100vw - 32px));max-width:none;padding:0;border:0;background:none;color:var(--text);overflow:visible}
.dk-film::backdrop{background:rgba(1,8,12,.92)}
.dk-film-x{display:block;margin:0 0 10px auto;min-height:44px;padding:8px 16px;background:none;border:2px solid var(--text);color:var(--text);font:700 14px var(--body);text-transform:uppercase;cursor:pointer}
.dk-film .yt-note{margin-top:8px}

@media (max-width:1000px){.dk-mods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.dk-split{grid-template-columns:minmax(0,1fr)}.dk-river .stick{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.dk-facts,.dk-facts.two,.dk-drift,.dk-drift.two,.dk-media2{grid-template-columns:minmax(0,1fr)}.dk-where{font-size:12px;max-width:60vw}}
@media (max-width:520px){.dk-mods{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.dk-map text{font-size:27px}.dk-map .dk-rn{font-size:25px}.dk-map .dk-note{display:none}}
@media (max-height:820px){.dk-missing{aspect-ratio:auto;width:100%;padding:10px}.dk-missing br{display:none}}

/* The smallest phones: the stages stay on one screen. */
@media (max-height:600px){
  .dk .lede{font-size:17px}
  .dk-hero h1{font-size:42px}
  .dk-hero .copy{gap:8px;padding-bottom:84px}
  .dk .dk-step .dk-dim,.dk-net .dk-dim{font-size:14.5px;line-height:1.45}
  .dk p.dk-quote.small{font-size:19px}
  .dk-net .dk-field{gap:8px;padding:12px 14px}
  .dk .dk-eighty{font-size:68px}
  .dk-no{font-size:38px}
  .dk-yes p:first-child{font-size:16px}
}

/* ---------- the dive itself: scripted, motion allowed ---------- */
@media (prefers-reduced-motion:no-preference){
  .dk-caustic{animation:dk-caus 40s linear infinite;will-change:transform}
  .dk-reef .gw-sticky::before{animation:dk-caus2 30s linear infinite}
  @keyframes dk-caus{to{transform:translate(1100px,2200px)}}
  @keyframes dk-caus2{to{transform:translate(600px,1200px)}}

  .js .dk-hero{height:190vh}
  .js .dk-hero .stick{position:sticky;top:0}
  .js .dk-under{display:block;transform:translateY(100%)}

  .js .dk-port{height:230vh}
  .js .dk-port .stick{position:sticky;top:0}
  .js .dk-port .dk-fill{clip-path:circle(var(--r,18%) at 50% 50%)}
  .js .dk-rim{display:block;width:36vmin}
  .js .dk-cap{--capo:0}
  .js .dk-port{--capo:0}

  .js .dk-wk{will-change:transform}

  .js .shoal{height:300vh}
  .js .shoal .stick{position:sticky;top:0;height:100vh;height:100svh}

  .js .dk-net{height:240vh;padding:0}
  .js .dk-net .stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-content:center}
  .js .dk-net .copy{margin-left:auto}

  .js .dk-river{height:460vh;padding:0}
  .js .dk-river .stick{position:sticky;top:0;height:100vh;height:100svh;align-items:center;padding-block:120px 90px}
  .js .dk-map{max-height:calc(100svh - 210px)}
  .js .dk-steps{position:relative;display:block;min-height:60vh}
  .js .dk-step{position:absolute;left:0;right:0;top:50%;opacity:0;visibility:hidden;transform:translateY(calc(-50% + 20px));transition:opacity .5s,transform .5s,visibility .5s}
  .js .dk-step.on{opacity:1;visibility:visible;transform:translateY(-50%)}

  .js .dk-dark{height:260vh}
  .js .dk-dark .stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:block;padding:0;cursor:none;--lr:150px;--yo:0}
  .js .dk-torch{position:absolute;inset:0;width:100%;height:100%;max-width:none;cursor:none;-webkit-mask:radial-gradient(circle var(--lr) at var(--mx,50%) var(--my,50%),#000 35%,rgba(0,0,0,.4) 60%,transparent 75%);mask:radial-gradient(circle var(--lr) at var(--mx,50%) var(--my,50%),#000 35%,rgba(0,0,0,.4) 60%,transparent 75%)}
  .js .dk-torch img{width:100%;height:100%;object-fit:cover}
  .js .dk-dark .copy{position:absolute;left:0;right:0;top:calc(16vh + 56px);opacity:calc(1 - var(--yo))}
  .js .dk-yet{position:absolute;left:0;right:0;bottom:22vh;margin:0;opacity:var(--yo)}

  .js .dk-rainbow{height:340vh;padding:0}
  .js .dk-rainbow .stick{position:sticky;top:0;height:100vh;height:100svh;grid-template-rows:auto minmax(0,1fr);gap:2vh;padding-block:136px 84px}
  .js .dk-rb{height:100%}
  .js .dk-rb img{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
  .js .dk-rb canvas{display:block;position:absolute;inset:0;width:100%;height:100%}

  .js .dk-bio{height:260vh}
  .js .dk-bio .stick{position:sticky;top:0;height:100vh;height:100svh;padding-block:0}
  .js .dk p.dk-bioq span{color:rgba(238,245,246,.5);transition:color .5s,text-shadow .5s}
  .js .dk p.dk-bioq span.lit{color:var(--bio);text-shadow:0 0 24px rgba(120,240,220,.75),0 0 60px rgba(120,240,220,.35)}

  .js .dk-nothing{height:240vh;--ns:0;--yo:0}
  .js .dk-nothing .stick{position:sticky;top:0;height:100vh;height:100svh;padding-block:0}

  .js .dk-surface{height:200vh;--sh:0%;--done:0;--co2:0}
  .js .dk-surface .stick{position:sticky;top:0}
}
@media (prefers-reduced-motion:reduce){.dk-tint{transition:none}}
html:not(.js) .dk video{display:none}