/* ══════════════════════════════════════════════════════════════════════════
   The Pool — you swim the length of it.
   Flat colour blocks, hard edges, one length per lane. The only thing that
   moves by itself is the water in the section drawing on lane 5 FT.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink:#06303F;
  --foam:#EAFAFF;
  --sun:#FFD451;
  --coral:#FF6F7D;
  --mint:#8DF3C4;

  /* one flat colour per length, shallow end to deep end */
  --l0:#FFEFD2; --l0f:#F2DEB4;
  --l1:#8FE5F6; --l1f:#6ED4EB;
  --l2:#28B6E4; --l2f:#149FD0;
  --l3:#0A6FA8; --l3f:#095C8C;
  --l4:#075482; --l4f:#06456C;
  --l5:#043A63; --l5f:#032D4F;

  --display:'Bricolage Grotesque','Outfit',system-ui,sans-serif;
  --body:'Outfit',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --bar:64px;
  --ruler:66px;
  --ease:cubic-bezier(.22,.9,.24,1);
}

*,*::before,*::after { box-sizing:border-box; }

body {
  margin:0; background:var(--l0); color:var(--ink);
  font-family:var(--body); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
code { font-family:var(--mono); font-size:.9em; }
::selection { background:var(--sun); color:var(--ink); }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.bar {
  position:fixed; inset:0 0 auto 0; z-index:40; height:var(--bar);
  display:flex; align-items:center; gap:clamp(14px,3vw,34px);
  padding:0 clamp(16px,3vw,32px);
  background:var(--l0); color:var(--ink);
  border-bottom:2px solid rgba(6,48,63,.22);
  transition:background .45s linear, color .45s linear, border-color .45s linear;
}
.brand { display:flex; align-items:center; gap:10px; font-family:var(--display);
  font-size:19px; font-weight:600; letter-spacing:-.02em; }
/* the mark is a ~2:1 photographic cutout, so it sizes by height, not as a square */
.brand img { height:32px; width:auto; }
.brand b { font-weight:800; }

.lanes-nav { display:flex; gap:clamp(4px,1vw,14px); margin-left:auto; }
.lanes-nav a {
  padding:6px 2px; font-size:13.5px; font-weight:500; opacity:.7;
  border-bottom:2px solid transparent; transition:opacity .2s, border-color .2s;
}
.lanes-nav a:hover { opacity:1; border-bottom-color:currentColor; }
.lanes-nav a.on { opacity:1; border-bottom-color:var(--sun); font-weight:600; }
@media (max-width:1040px){ .lanes-nav{ display:none; } }

.mc {
  display:flex; align-items:baseline; gap:7px; margin-left:auto;
  border:2px solid currentColor; padding:5px 12px; font-size:13px;
}
.lanes-nav ~ .mc { margin-left:0; }
.mc em { font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.14em; opacity:.6; }
.mc b { font-family:var(--display); font-weight:800; }
.mc i { font-style:normal; font-size:12px; font-weight:600; }
.mc i.up { color:#07684A; } .mc i.down { color:#A3182A; }

/* the bar takes on the colour of whichever length you're looking at */
body[data-lane="1"] .bar { background:var(--l1); }
body[data-lane="2"] .bar { background:var(--l2); }
body[data-lane="3"] .bar { background:var(--l3); }
body[data-lane="4"] .bar { background:var(--l4); }
body[data-lane="5"] .bar { background:var(--l5); }
body[data-lane="3"] .bar,
body[data-lane="4"] .bar,
body[data-lane="5"] .bar { color:#fff; border-bottom-color:rgba(255,255,255,.28); }
body[data-lane="3"] .mc i.up,
body[data-lane="4"] .mc i.up,
body[data-lane="5"] .mc i.up { color:var(--mint); }
body[data-lane="3"] .mc i.down,
body[data-lane="4"] .mc i.down,
body[data-lane="5"] .mc i.down { color:var(--coral); }

/* ── the rail: vertical scroll drives a sideways track ───────────────────── */
.rail { position:relative; }
.stage { position:sticky; top:0; height:100svh; overflow:hidden; }
.track { display:flex; height:100%; will-change:transform; }

.lane {
  flex:none; position:relative; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--bar) + clamp(20px,4vh,48px)) clamp(36px,5vw,90px)
          calc(var(--ruler) + clamp(48px,7vh,84px));
  min-width:100vw;
}
.lane-in { position:relative; z-index:2; width:100%; max-width:960px; }
.lane-in.split {
  display:grid; grid-template-columns:minmax(300px,1fr) auto;
  gap:clamp(32px,5vw,80px); align-items:center; max-width:1160px;
}

/* the floor of the pool, running the whole length */
.lane::before {
  content:''; position:absolute; left:0; right:0; bottom:var(--ruler); height:clamp(52px,11vh,116px);
  background:var(--floor);
}
/* flat, static tiling */
.lane::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 82px),
    repeating-linear-gradient(0deg,  var(--rule) 0 1px, transparent 1px 82px);
}

.l0 { background:var(--l0); --floor:var(--l0f); }
.l1 { background:var(--l1); --floor:var(--l1f); }
.l2 { background:var(--l2); --floor:var(--l2f); }
.l3 { background:var(--l3); --floor:var(--l3f); }
.l4 { background:var(--l4); --floor:var(--l4f); }
.l5 { background:var(--l5); --floor:var(--l5f); }

.l0,.l1,.l2 { color:var(--ink); --rule:rgba(6,48,63,.055);
  --line:rgba(6,48,63,.2); --line-2:rgba(6,48,63,.32); --panel:rgba(6,48,63,.05); }
.l3,.l4,.l5 { color:#fff; --rule:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.24); --line-2:rgba(255,255,255,.38); --panel:rgba(255,255,255,.06); }

/* lane rope between one length and the next */
.rope {
  position:absolute; top:0; bottom:0; right:0; width:13px; z-index:3;
  background:repeating-linear-gradient(180deg,
    var(--coral) 0 16px, var(--foam) 16px 32px, #2AD4F0 32px 48px, var(--foam) 48px 64px);
  box-shadow:inset 0 0 0 1px rgba(6,48,63,.16);
}

/* depth, painted on the floor */
.paint {
  position:absolute; left:clamp(36px,5vw,90px); bottom:calc(var(--ruler) + clamp(2px,1vh,14px));
  z-index:1; font-family:var(--display); font-weight:800; line-height:.76;
  font-size:clamp(4rem,13vh,8.5rem); letter-spacing:-.05em;
  color:currentColor; opacity:.16; display:flex; align-items:baseline; gap:.05em;
}
.paint i { font-style:normal; font-size:.32em; letter-spacing:.08em; }
.paint.wide { letter-spacing:.02em; font-size:clamp(2.6rem,8vh,5.2rem); }

/* ── type ────────────────────────────────────────────────────────────────── */
.eyebrow {
  margin:0; font-size:11.5px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; opacity:.62;
}
.eyebrow b { font-weight:800; opacity:1; }
.display {
  margin:14px 0 0; font-family:var(--display); font-weight:800; line-height:.92;
  letter-spacing:-.045em; font-size:clamp(2.3rem,6.4vh,4.3rem);
}
h1.display { font-size:clamp(2.9rem,min(7vw,10.5vh),6.6rem); }
.lede { margin:22px 0 0; max-width:50ch; font-size:clamp(1rem,1.75vh,1.14rem); line-height:1.6; opacity:.85; }
.lede b { font-weight:700; opacity:1; }
.head { margin-bottom:clamp(22px,4vh,44px); }
.note { margin:20px 0 0; font-size:13px; opacity:.6; }

.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:30px; }
.btn {
  display:inline-flex; align-items:center; gap:10px; padding:14px 24px;
  background:var(--ink); color:var(--l0); font-weight:700; font-size:15px;
  transition:transform .18s var(--ease);
}
.btn svg { width:19px; height:19px; }
.btn:hover { transform:translateX(5px); }
.l3 .btn,.l4 .btn,.l5 .btn { background:var(--sun); color:var(--ink); }

.ca {
  display:inline-flex; align-items:center; gap:9px; padding:8px 8px 8px 13px;
  font:inherit; cursor:pointer; background:transparent;
  border:2px solid var(--line-2); color:inherit;
}
.ca:hover { border-color:currentColor; }
.ca em { font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.14em; opacity:.6; }
.ca code { font-size:12px; max-width:min(38vw,250px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ca .ca-copy { font-size:11.5px; font-weight:700; padding:5px 11px; background:var(--ink); color:var(--l0); }
/* nothing to copy yet — the slot is held open so the hero doesn't jump later */
.ca.pending { border-style:dashed; cursor:default; opacity:.72; }
.ca.pending:hover { border-color:var(--line-2); }
.ca.pending code { font-style:italic; }
.ca.pending .ca-copy { display:none; }
.ca.copied .ca-copy { background:#0B7A52; color:#fff; }

.hero-mark { width:clamp(260px,32vw,470px); height:auto; }

/* ── lane 1 · the loop, as three swim lanes ──────────────────────────────── */
.strips { list-style:none; margin:0; padding:0; max-width:820px; }
.strip {
  display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,3vw,36px); align-items:start;
  padding:clamp(16px,3vh,28px) 0; border-top:2px solid var(--line);
}
.strip:last-child { border-bottom:2px solid var(--line); }
.strip .n { font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,4vh,2.5rem);
  letter-spacing:-.04em; opacity:.4; line-height:1; }
.strip h3 { margin:0 0 6px; font-family:var(--display); font-weight:800;
  font-size:clamp(1.2rem,2.8vh,1.75rem); letter-spacing:-.03em; }
.strip p { margin:0; font-size:clamp(.9rem,1.6vh,1rem); line-height:1.55; opacity:.82; max-width:58ch; }
.strip code { background:var(--panel); padding:1px 6px; }
.l3 .strip code,.l4 .strip code,.l5 .strip code { color:var(--sun); }

/* ── lane 2 · the figures and the section drawing ────────────────────────── */
.figures { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2); max-width:540px; }
.fig { background:var(--l2); padding:clamp(13px,2.3vh,21px) clamp(13px,1.8vw,21px); }
.fig label { display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; opacity:.62; }
.fig b { display:block; margin:9px 0 5px; font-family:var(--display); font-weight:800;
  font-size:clamp(1.45rem,3.5vh,2.2rem); letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums; }
.fig span { font-size:12px; opacity:.66; }
.fig .delta { font-weight:600; opacity:1; }
.fig .delta.up { color:#05512F; } .fig .delta.down { color:#8E1420; }

.diagram { margin:0; width:clamp(300px,36vw,470px); }
.diagram svg { width:100%; height:auto; display:block; }
.dg-key { list-style:none; margin:14px 0 12px; padding:0; display:grid; gap:9px; }
.dg-key li { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
  font-size:13px; line-height:1.4; opacity:.82; }
.dg-key i { width:15px; height:15px; margin-top:1px; border:2px solid var(--ink); }
.dg-key .k-in  { background:var(--sun); border-color:var(--ink); }
.dg-key .k-out { background:repeating-linear-gradient(45deg,
  var(--ink) 0 2px, transparent 2px 5px); }

.diagram figcaption {
  background:var(--ink); color:var(--l0); padding:9px 12px; text-align:center;
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}

/* type inside the drawing */
.diagram text { fill:var(--ink); font-family:var(--body); }
.dg-label { font-size:15px; font-weight:700; letter-spacing:.11em; }
.dg-sub   { font-size:12.5px; opacity:.72; }
.dg-tick  { font-family:var(--display); font-size:17px; font-weight:800; text-anchor:end; }
.dg-value { font-family:var(--display); font-size:30px; font-weight:800; letter-spacing:-.03em; }

/* The water sits at the floor until the lane is reached, then rises to the
   level line and stays there — the one piece of motion left on the page. */
.dg-fill { transform:translateY(220px); transition:transform 1.6s var(--ease); }
.lane.is-in .dg-fill { transform:translateY(70px); }
.dg-wave { animation:drift 9s linear infinite; }
@keyframes drift { to { transform:translateX(-272px); } }
.dg-level { opacity:0; transition:opacity .6s var(--ease) 1.1s; }
.lane.is-in .dg-level { opacity:1; }

/* Before a launch the pool really is empty, so the drawing shows it empty and
   drops the level annotation rather than pointing a leader line at nothing. */
body.prelaunch .lane.is-in .dg-fill { transform:translateY(220px); }
body.prelaunch .dg-level { display:none; }

/* ── lane 3 · the deep end ───────────────────────────────────────────────── */
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2); max-width:880px; }
.cell { background:var(--l3); padding:clamp(13px,2.2vh,19px) clamp(13px,1.6vw,19px); }
.cell label { display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; opacity:.62; }
.cell b { display:block; margin:9px 0 5px; font-family:var(--display); font-weight:800;
  font-size:clamp(1.1rem,2.5vh,1.55rem); letter-spacing:-.035em; line-height:1.05;
  word-break:break-word; font-variant-numeric:tabular-nums; }
.cell span { font-size:11.5px; opacity:.66; }
.cell span.mono { font-family:var(--mono); font-size:10.5px; word-break:break-all;
  color:var(--sun); opacity:.85; }

.chart { margin:clamp(16px,3vh,28px) 0 0; max-width:880px; }
.chart figcaption { display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--line); padding-bottom:9px; }
.chart h3 { margin:0; font-family:var(--display); font-weight:800; font-size:1rem; letter-spacing:-.02em; }
.chart figcaption span { font-size:11.5px; opacity:.6; }
#chartSvg { width:100%; height:clamp(84px,15vh,140px); margin-top:12px; overflow:visible; }
.chart.bare #chartSvg { display:none; }
.chart .placeholder { display:none; }
.chart.bare .placeholder { display:block; margin-top:12px; padding:20px 22px;
  border:1px dashed var(--line); font-size:13px; opacity:.66; }
#chartSvg .ln { stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:draw 1.6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }

/* ── lane 4 · the checks ─────────────────────────────────────────────────── */
.checks { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(26px,4vw,60px); max-width:1040px; }
.checks > div { display:grid; grid-template-columns:148px 1fr; gap:12px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--line); }
.checks dt { font-size:12.5px; font-weight:600; opacity:.72; }
.checks dt::before { content:'✓'; color:var(--sun); font-weight:800; margin-right:6px; }
/* a checklist tick above a line saying "it cannot claim" would be a lie */
.checks .warn dt::before { content:'!'; color:var(--coral); }
/* nothing to tick yet — a checklist tick would be claiming it had been checked */
.checks .pending dt::before { content:'·'; color:currentColor; opacity:.45; }
.checks .pending dt { opacity:.45; }
.checks .warn dd { color:var(--coral); }
.checks dd { margin:0; font-family:var(--mono); font-size:11.5px; word-break:break-all; }
.checks dd a { border-bottom:1px solid var(--line-2); }
.checks dd a:hover { color:var(--sun); border-color:var(--sun); }
.checks .muted { opacity:.4; }
@media (max-width:820px){ .checks{ grid-template-columns:1fr; } }

/* ── lane 5 · the log and the rules ──────────────────────────────────────── */
.log { list-style:none; margin:0; padding:0; max-width:620px;
  max-height:min(44vh,400px); overflow-y:auto; }
.log li { display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.log .tag { font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 8px; color:var(--l5); }
.log .tag.collect { background:var(--sun); }
.log .tag.claim { background:var(--mint); }
.log .tag.compound { background:#7FE0F2; }
.log .what a { font-family:var(--mono); font-size:11.5px; color:var(--sun); }
.log .when { font-size:11.5px; opacity:.55; white-space:nowrap; }
.log .empty { display:block; border:1px dashed var(--line-2); padding:20px 22px;
  font-size:13.5px; opacity:.72; }
.log .empty b { display:block; margin-bottom:5px; font-weight:700; opacity:1; }

.rules { border:2px solid var(--sun); padding:clamp(20px,3vh,30px); max-width:400px; }
.rules h3 { margin:0 0 16px; font-family:var(--display); font-weight:800; color:var(--sun);
  letter-spacing:.2em; text-transform:uppercase; font-size:.95rem; }
.rules ol { margin:0; padding-left:20px; display:grid; gap:9px; }
.rules li { font-size:.95rem; line-height:1.45; }
.rules li::marker { color:var(--sun); font-weight:700; }
.rules .fine { margin:18px 0 0; font-size:11.5px; opacity:.55; }

/* ── depth ruler ─────────────────────────────────────────────────────────── */
.ruler {
  position:fixed; inset:auto 0 0 0; z-index:40; height:var(--ruler);
  background:var(--ink); color:var(--l0);
  padding:14px clamp(16px,3vw,32px) 10px;
}
.ruler-tape { position:relative; height:6px; background:rgba(255,255,255,.18); }
.ruler-tape span { display:block; height:100%; width:0; background:var(--sun); }
.ruler-tape b { position:absolute; top:50%; left:0; width:15px; height:15px; translate:-50% -50%;
  background:var(--l0); border:3px solid var(--ink); border-radius:50%;
  box-shadow:0 0 0 2px var(--sun); }
.ruler ul { list-style:none; margin:11px 0 0; padding:0; display:flex; justify-content:space-between; }
.ruler li { font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:-.02em; opacity:.55; }
.ruler li i { font-style:normal; font-size:.62em; letter-spacing:.08em; margin-left:2px; }

/* ── reveals ─────────────────────────────────────────────────────────────── */
[data-split] .w { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; }
[data-split] .w > * { display:inline-block; transform:translateY(112%); transition:transform .8s var(--ease); }
.lane.is-in [data-split] .w > * { transform:none; }

.lane .eyebrow,.lane .lede,.lane .row,.lane .note,
.lane .strip,.lane .figures,.lane .diagram,.lane .hero-mark,.lane .grid,
.lane .chart,.lane .checks,.lane .log,.lane .rules {
  opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.lane.is-in .eyebrow,.lane.is-in .lede,.lane.is-in .row,.lane.is-in .note,
.lane.is-in .strip,.lane.is-in .figures,.lane.is-in .diagram,.lane.is-in .hero-mark,.lane.is-in .grid,
.lane.is-in .chart,.lane.is-in .checks,.lane.is-in .log,.lane.is-in .rules {
  opacity:1; transform:none;
}
.lane.is-in .lede { transition-delay:.08s; }
.lane.is-in .row  { transition-delay:.14s; }
.lane.is-in .note { transition-delay:.2s; }
.lane.is-in .strip:nth-child(2) { transition-delay:.08s; }
.lane.is-in .strip:nth-child(3) { transition-delay:.16s; }
.lane.is-in .diagram,.lane.is-in .hero-mark,.lane.is-in .rules { transition-delay:.12s; }

/* ══════════ phones and narrow windows: a plain vertical stack ═══════════ */
@media (max-width:900px){
  .rail { height:auto !important; }
  .stage { position:static; height:auto; overflow:visible; }
  .track { display:block; transform:none !important; }
  .lane {
    min-width:0 !important; width:100%; height:auto; display:block;
    padding:clamp(64px,11vh,96px) 20px clamp(72px,11vh,104px);
  }
  .lane:first-child { padding-top:calc(var(--bar) + 40px); }
  .lane:last-child { padding-bottom:calc(var(--ruler) + 40px); }
  .lane-in,.lane-in.split { max-width:none; display:block; }
  .lane-in.split > * + * { margin-top:32px; }
  .lane::before { bottom:0; height:clamp(40px,8vh,72px); }
  .rope { top:auto; left:0; right:0; bottom:0; width:auto; height:11px;
    background:repeating-linear-gradient(90deg,
      var(--coral) 0 14px, var(--foam) 14px 28px, #2AD4F0 28px 42px, var(--foam) 42px 56px); }
  .paint { font-size:clamp(2.6rem,13vw,4.4rem); left:20px; bottom:16px; }
  h1.display { font-size:clamp(2.5rem,11vw,3.4rem); }
  .display { font-size:clamp(2rem,9vw,2.8rem); }
  .lede { font-size:1rem; max-width:none; }
  .figures,.grid,.strips,.chart,.checks,.log,.rules { max-width:none; }
  .hero-mark { width:min(100%,360px); }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .diagram { width:100%; }
  .log { max-height:none; }
  .ruler ul { display:none; }
  .ruler { height:auto; padding:11px clamp(16px,3vw,32px); }
  .ruler-tape b { display:none; }
  .lane .eyebrow,.lane .lede,.lane .row,.lane .note,.lane .strip,.lane .figures,
  .lane .diagram,.lane .hero-mark,.lane .grid,.lane .chart,.lane .checks,.lane .log,.lane .rules {
    opacity:1; transform:none;
  }
}
@media (max-width:900px){
  .dg-label { font-size:21px; }
  .dg-tick  { font-size:23px; }
  .dg-value { font-size:36px; }
  .dg-sub   { font-size:17px; }
}
@media (max-width:520px){
  .grid,.figures { grid-template-columns:1fr; }
  .strip { grid-template-columns:1fr; gap:6px; }
  .checks > div { grid-template-columns:1fr; gap:3px; }
}

@media (prefers-reduced-motion:reduce){
  .dg-wave { animation:none !important; }
  .dg-fill,.dg-level { transition:none; }
  [data-split] .w > * { transform:none; transition:none; }
  .lane .eyebrow,.lane .lede,.lane .row,.lane .note,.lane .strip,.lane .figures,
  .lane .diagram,.lane .grid,.lane .chart,.lane .checks,.lane .log,.lane .rules {
    opacity:1; transform:none; transition:none;
  }
}