/* marea-neagra-din-interior: a sea seen from the inside. Mist and slate by day, deep water by night.
   Three colours carry the story everywhere: oxygen (teal), the boundary (gold), water without oxygen (ink). */
:root{
  --bg:#eef1ee; --bg2:#e2e7e4; --surface:#fbfcfa; --ink:#121a20; --ink2:#2c3840; --muted:#46535b; --line:#c3ccc9; --line-soft:#d8dfdc;
  --ox:#1d7f8f; --gold:#b85a12; --dead:#4a3c54; --cold:#1f4fb4; --acc:#8a3f0a; --focus:#1f4fd1; --water:#1d7f8f;
  --stage-bg:#e4ebe9; --stage-grad:radial-gradient(120% 90% at 65% 30%,#f3f6f4 0%,#dfe7e5 60%,#cfd9d7 100%); --card:rgba(251,252,250,.95);
  --serif:"Source Serif 4",Georgia,serif; --sans:"Atkinson Next","Atkinson Hyperlegible Next",system-ui,"Segoe UI",sans-serif;
  color-scheme:light;
}
html.dark{
  --bg:#060a10; --bg2:#0b1219; --surface:#0f1820; --ink:#e7ebe6; --ink2:#cdd5d1; --muted:#a7b2b0; --line:#25323b; --line-soft:#16212a;
  --ox:#5fd0dc; --gold:#ffc46b; --dead:#2a1b3a; --cold:#8cb8ff; --acc:#ffbd6e; --focus:#9db8ff; --water:#5fd0dc;
  --stage-bg:#070d16; --stage-grad:radial-gradient(120% 90% at 65% 25%,#13233a 0%,#08111d 55%,#04070c 100%); --card:rgba(10,16,22,.93);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden]{display:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:58px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.125rem/1.62 var(--serif);text-rendering:optimizeLegibility}
a{color:var(--acc);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:.5rem 1rem;z-index:50}
.skip:focus{left:8px;top:8px}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.012em;line-height:1.14;margin:0 0 .55em;text-wrap:balance}
h1{font-size:clamp(2rem,2.2vw + 1.2rem,3.1rem);font-weight:620}
h2{font-size:clamp(1.35rem,1vw + 1rem,1.8rem);position:relative}
p{margin:0 0 1em}
.anchor{position:absolute;left:-1em;opacity:0;text-decoration:none;color:var(--muted);font-weight:400}
h2:hover .anchor,.anchor:focus{opacity:1}
.kicker{font:600 .82rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ox);margin:0 0 1rem}
.kicker a{color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:46rem;margin:0 auto;padding:0 16px}
.btn{display:inline-block;font:600 1rem/1 var(--sans);padding:.8rem 1.15rem;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none;border:0;cursor:pointer}
.hint{font:400 .92rem/1.45 var(--sans);color:var(--muted)}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.9rem;height:46px;padding:0 max(16px,env(safe-area-inset-left));background:var(--bg);border-bottom:1px solid var(--line-soft);font:500 .92rem/1 var(--sans)}
.home{display:flex;align-items:center;gap:.45rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.home .motif{width:22px;height:22px}
.topnav{display:flex;gap:1rem;overflow:hidden;min-width:0}
.topnav a{color:var(--ink2);text-decoration:none;white-space:nowrap}
.topnav a:hover{color:var(--ink);text-decoration:underline}
.spacer{flex:1}
.chip{color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.38rem .7rem}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.progress i{display:block;height:100%;width:0;background:var(--gold)}
@media (max-width:1100px){.topnav{display:none}}

/* story: the sea fills the screen, the text passes over it on the left */
.story{position:relative}
.stage-col{position:sticky;top:46px;height:calc(100vh - 46px);height:calc(100svh - 46px);z-index:0}
.stage{position:relative;margin:0;height:100%;background:var(--stage-grad)}
.canvaswrap{position:absolute;inset:0;overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:crosshair}
.stage .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .6s}
.stage.live .still{opacity:0;pointer-events:none}
.stage.nogl canvas{display:none}
.labels{position:absolute;inset:0;pointer-events:none;font:600 .78rem/1 var(--sans);color:var(--ink2)}
.labels .city{position:absolute;left:0;top:0;white-space:nowrap;margin:-.5em 0 0 .45em;text-shadow:0 0 3px var(--stage-bg),0 0 6px var(--stage-bg)}
.labels .city::before{content:"";position:absolute;left:-.55em;top:.3em;width:4px;height:4px;border-radius:50%;background:currentColor}
.labels .mark{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;border:2px solid var(--gold);background:color-mix(in srgb,var(--gold) 30%,transparent)}
.labels .mark.end{width:10px;height:10px;left:-5px;top:-5px;background:var(--gold)}
.tip{position:absolute;left:50%;top:14px;transform:translateX(-50%);margin:0;background:var(--ink);color:var(--bg);font:600 .9rem/1.2 var(--sans);padding:.5rem .8rem;border-radius:8px}
.pill{position:absolute;right:14px;top:14px;display:flex;align-items:center;gap:.4rem;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.25rem .3rem .25rem .8rem;font:600 .85rem/1 var(--sans)}
.pill button{width:28px;height:28px;border-radius:50%;border:0;background:var(--bg2);color:var(--ink);cursor:pointer;font-size:1.05rem}
.pad{position:absolute;right:14px;bottom:96px;display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px) 30px;gap:2px;opacity:.72}
.pad:hover,.pad:focus-within{opacity:1}
.pad button{border:0;background:var(--card);color:var(--ink);border-radius:7px;font:600 1rem/1 var(--sans);cursor:pointer;padding:0}
.pad [data-d=u]{grid-column:2;grid-row:1}.pad [data-d=l]{grid-column:1;grid-row:2}.pad [data-d=home]{grid-column:2;grid-row:2}
.pad [data-d=r]{grid-column:3;grid-row:2}.pad [data-d=d]{grid-column:2;grid-row:3}.pad [data-d=in]{grid-column:1;grid-row:4}.pad [data-d=out]{grid-column:3;grid-row:4}
.hudbar{position:absolute;right:14px;bottom:12px;width:min(34rem,calc(100% - 28px));background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.55rem .75rem;font:400 .86rem/1.35 var(--sans);color:var(--ink2)}
.hud{margin:0 0 .4rem;color:var(--ink)}
.tl{display:flex;align-items:center;gap:.6rem}
.tl input{flex:1;accent-color:var(--gold)}
.tl output{font:700 .95rem/1 var(--sans);min-width:2.6em;text-align:right;color:var(--ink)}
.play{font:600 .85rem/1 var(--sans);border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:.4rem .7rem;cursor:pointer;white-space:nowrap}
.legend{margin:.45rem 0 0;font-size:.8rem;color:var(--muted)}
.legend .l-t{display:none}.legend[data-mode=temp] .l-t{display:inline}.legend[data-mode=temp] .l-ox{display:none}
.sw{display:inline-block;width:.9em;height:.9em;border-radius:2px;vertical-align:-.12em;margin:0 .25em 0 .5em}
.sw:first-child{margin-left:0}
.sw.ox{background:var(--ox)}.sw.gold{background:var(--gold)}.sw.dead{background:var(--dead);outline:1px solid var(--line)}
.sw.cold{background:var(--cold)}.sw.cool{background:color-mix(in srgb,var(--cold) 25%,var(--bg2))}.sw.warm{background:#d97b3f}

.steps{position:relative;z-index:1;margin-top:calc(-100vh + 46px);margin-top:calc(-100svh + 46px);width:min(31rem,42vw);margin-left:max(16px,3vw);pointer-events:none}
.step{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:12vh 0}
.step.hero{align-items:flex-start;padding-top:4vh}
.card{pointer-events:auto;background:var(--card);border:1px solid var(--line-soft);border-radius:14px;padding:1.3rem 1.4rem .4rem;box-shadow:0 10px 40px rgba(0,0,0,.16)}
.lede{font-size:1.2rem;line-height:1.52}
.find{margin:1.2rem 0 .6rem}
.chart{margin:.4rem 0 1rem}
.chart svg{width:100%;height:auto;display:block;font:400 11px var(--sans)}
.chart .grid{stroke:var(--line);stroke-width:.6}
.chart .ax{fill:var(--muted)}
.chart .lab{fill:var(--ink2);font-weight:600}
.chart .mean{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 3}
.chart .se{stroke:var(--ox);stroke-width:1;opacity:.45}
.chart .off{fill:none;stroke:var(--ox);stroke-width:1.6}
.chart .offp{fill:var(--ox)}
.chart .ours{fill:none;stroke:var(--gold);stroke-width:2}
.chart .oursp{fill:var(--gold)}.chart .oursp.hollow{fill:var(--card);stroke:var(--gold);stroke-width:1.4}
.chart .cold{fill:var(--cold)}
.chart figcaption{font:400 .82rem/1.4 var(--sans);color:var(--muted);margin-top:.35rem}
.chart .k{display:inline-block;width:1.4em;height:3px;vertical-align:.25em;margin-right:.3em}
.chart .k.off{background:var(--ox)}.chart .k.ours{background:var(--gold);margin-left:.5em}
.presets{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .9rem}
.chipbtn{font:600 .9rem/1 var(--sans);border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.5rem .8rem;cursor:pointer}
.chipbtn:hover{border-color:var(--gold)}
.byear{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 1rem;font:600 .95rem/1 var(--sans)}
.byear input{font:600 1.1rem/1 var(--sans);width:6.5em;padding:.6rem .7rem;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
#an-out .big{font-size:1.2rem;line-height:1.5}
#an-out .small{font:400 .9rem/1.45 var(--sans);color:var(--muted)}

/* share */
.share-row{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin:.6rem 0 .2rem;font:600 .88rem/1 var(--sans)}
.share-row .lbl{margin-right:.3rem;color:var(--ink2)}
.sh{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.sh svg{width:17px;height:17px}
.status{min-height:1.2em;font:400 .85rem/1.2 var(--sans);color:var(--muted);margin:.2rem 0 .8rem}

/* blocks after the story */
.block{padding:3.2rem 0 2rem;position:relative;z-index:2;background:var(--bg)}
.block.tinted{background:var(--bg2)}
.sources{padding-left:1.1rem}.sources li{margin:.35rem 0;font-size:1rem}
footer{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;padding:2rem 16px 3rem;font:400 .9rem/1.3 var(--sans);color:var(--muted);background:var(--bg);position:relative;z-index:2}
footer a{color:var(--ink2)}

/* phones and narrow windows: the sea keeps the top of the screen, the text passes below it */
@media (max-width:899px){
  html{scroll-padding-top:calc(58px + 40svh)}
  .stage-col{height:40vh;height:40svh;z-index:3;box-shadow:0 6px 18px rgba(0,0,0,.18)}
  .steps{margin:0;width:auto;pointer-events:auto;padding:0 16px}
  .step{min-height:auto;padding:1.4rem 0 2.2rem;display:block}
  .step.hero{padding-top:1.2rem}
  .card{background:none;border:0;box-shadow:none;padding:0}
  .hudbar{left:8px;right:8px;bottom:6px;width:auto;padding:.35rem .5rem;font-size:.74rem}
  .hud{margin-bottom:.25rem}.legend{display:none}
  .pad{right:6px;bottom:auto;top:6px;grid-template-columns:repeat(3,22px);grid-template-rows:repeat(3,22px) 22px;gap:1px;opacity:.5}
  .pad button{font-size:.75rem;border-radius:5px}
  .pill{top:auto;bottom:70px;right:8px}
  .labels{font-size:.68rem}
  h1{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}