/* ═══════════════════════════════════════════════════════════════════
   TOONSHEAD — art-led build.
   Skeleton runs OUTER → INNER: a figure being taken apart.
   Chunky plastic, hard offset shadows, flat lime field, zero paper.
   Display face: Super Bouncer (dafont, 100% Free). Body: Manrope.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Super Bouncer';
  src:url('/fonts/superbouncer.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Manrope VF';
  src:url('/fonts/manrope.woff2') format('woff2-variations'),
      url('/fonts/manrope.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0}

:root{
  /* the collection's own field — every one of the 7,777 sits on it */
  --lime:#c7f464;
  --lime-d:#a9d945;
  --lime-dd:#8bb832;
  /* ink is warm, not slate — this is molded plastic, not a document */
  --ink:#181a12;
  --ink-2:#3f4530;
  --ink-3:#5d6547;
  /* the passenger colours, taken straight off the art */
  --bowl:#12c4d6;
  --bowl-d:#0a8d9b;
  --hot:#f0464b;
  --gold:#d9a520;
  --gold-l:#f2cc5c;
  --shadow:6px 6px 0 var(--ink);
  --shadow-lg:12px 12px 0 var(--ink);
  --disp:'Super Bouncer','Comic Sans MS',system-ui,sans-serif;
  --body:'Manrope VF','Manrope',system-ui,-apple-system,sans-serif;
}

html{scroll-behavior:smooth}
body{
  background:var(--lime);
  color:var(--ink);
  font-family:var(--body);
  font-weight:450;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{width:min(1220px,92vw);margin:0 auto}
img{max-width:100%;display:block}
a{color:inherit}

/* ═══ ambient bubbles — the water the passengers ride in ═══
   Fixed layer sitting on the lime body bg, behind all content.
   The ink-dark sections have solid fills, so bubbles only ever
   surface over the lime panels — never muddy the dark ones. */
#bubbles{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#bubbles i{position:absolute;bottom:-70px;border-radius:50%;
  background:var(--bf);border:2.5px solid rgba(24,26,18,.55);
  box-shadow:inset 8px 8px 0 rgba(255,255,255,.42);
  opacity:0;animation:bubUp var(--dur) linear var(--del) infinite}
@keyframes bubUp{
  0%{transform:translate(0,0) scale(.6);opacity:0}
  8%{opacity:.9}
  50%{transform:translate(calc(var(--drift) * .6),-52vh) scale(1)}
  88%{opacity:.9}
  100%{transform:translate(var(--drift),-108vh) scale(1.05);opacity:0}
}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--lime);
  padding:12px 18px;z-index:99;font-weight:700}
.skip:focus{left:8px;top:8px}

/* ── displayed type: chunky, bouncing, never tracked-out ── */
h1,h2,h3,.wm,.big{font-family:var(--disp);font-weight:400;letter-spacing:0;line-height:.94}

/* ═══ RAIL — a depth meter, not a list of page links ═══ */
.rail{position:sticky;top:0;z-index:40;background:var(--lime);
  border-bottom:4px solid var(--ink)}
.rail-in{display:flex;align-items:center;gap:18px;padding:11px 0}
.wm{font-size:22px;display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.wm i{font-style:normal;font-family:var(--body);font-weight:800;font-size:11px;
  background:var(--ink);color:var(--lime);padding:3px 7px;letter-spacing:.04em}
.depthbar{display:flex;margin-left:auto;border:3px solid var(--ink);background:#fff}
.dstep{border:0;border-right:3px solid var(--ink);background:transparent;cursor:pointer;
  font-family:var(--body);font-weight:800;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;padding:8px 13px;color:var(--ink-2);transition:.16s}
.dstep:last-child{border-right:0}
.dstep:hover{background:var(--bowl);color:var(--ink)}
.dstep[aria-current="true"]{background:var(--ink);color:var(--lime)}
.dstep.hit{animation:dstepHit .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes dstepHit{
  0%{transform:translateY(0)}
  40%{transform:translateY(3px) scaleY(.9)}
  100%{transform:translateY(0)}
}

/* ═══ landing on a depth — the nav performs the descent ═══
   Clicking a depth step doesn't just scroll: the target section
   gets wiped by a plate (same move as the intro) and its heading
   drops in, so you feel which layer you landed on. */
main section{position:relative}
section.landed::after{content:'';position:absolute;inset:0;z-index:5;
  pointer-events:none;background:var(--bowl);
  animation:landWipe .62s cubic-bezier(.7,0,.3,1) forwards}
@keyframes landWipe{
  0%{clip-path:inset(0 100% 0 0)}
  38%{clip-path:inset(0 0 0 0)}
  100%{clip-path:inset(0 0 0 100%)}
}
section.landed .sec-t,section.landed h1.shout{animation:landDrop .5s cubic-bezier(.34,1.56,.64,1) .22s both}
@keyframes landDrop{
  0%{transform:translateY(-22px) rotate(-1.2deg);opacity:0}
  100%{transform:translateY(0) rotate(0);opacity:1}
}

/* ═══ 01 OUTSIDE — the figure, whole, art at full size ═══ */
.outside{padding:46px 0 60px;position:relative;overflow:hidden}
.outside::before{content:'';position:absolute;left:50%;top:-8%;width:min(760px,120vw);
  height:min(760px,120vw);transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,var(--lime-d),transparent 66%);pointer-events:none}
.out-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:46px;align-items:center;position:relative}
.kick{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;background:var(--ink);color:var(--lime);
  padding:6px 11px;margin-bottom:20px}
.kick b{color:var(--gold-l)}
.shout{font-size:clamp(44px,7.4vw,94px);margin-bottom:20px}
.shout em{font-style:normal;color:var(--bowl-d);
  text-shadow:3px 3px 0 var(--ink)}
.lede{font-size:16px;max-width:44ch;color:var(--ink-2);margin-bottom:26px;font-weight:500}
.lede b{color:var(--ink);font-weight:800}

/* counts as chips, NOT a dl/dt/dd figure block */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.chip-n{background:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  padding:8px 13px;display:flex;align-items:baseline;gap:7px}
.chip-n strong{font-family:var(--disp);font-size:21px;font-weight:400}
.chip-n span{font-weight:700;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.cta{display:flex;flex-wrap:wrap;gap:16px}
.btn{font-family:var(--disp);font-size:19px;padding:13px 26px;border:4px solid var(--ink);
  cursor:pointer;text-decoration:none;display:inline-block;transition:.14s;box-shadow:var(--shadow)}
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.btn-a{background:var(--ink);color:var(--lime)}
.btn-a:hover{background:var(--bowl);color:var(--ink)}
.btn-b{background:#fff;color:var(--ink)}
.btn-b:hover{background:var(--gold-l)}
.btn-c{background:#fff;color:var(--bowl-d);border-color:var(--bowl-d)}
.btn-c:hover{background:var(--bowl);color:var(--ink);border-color:var(--ink)}

/* the figure itself — plastic, tilted, casting a hard shadow */
.figure{position:relative;justify-self:center;width:100%;max-width:460px}
.fbody{border:5px solid var(--ink);background:var(--lime-d);box-shadow:var(--shadow-lg);
  position:relative;transform:rotate(-1.6deg);transition:transform .3s}
.figure:hover .fbody{transform:rotate(1deg) scale(1.012)}
.fbody img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--lime)}
.fbody .sk{position:absolute;inset:0;background:
  repeating-linear-gradient(45deg,var(--lime-d) 0 14px,var(--lime-dd) 14px 28px);
  animation:sk 1.1s linear infinite}
@keyframes sk{to{background-position:40px 0}}
.ftag{position:absolute;left:-14px;top:-14px;background:var(--gold);color:var(--ink);
  font-family:var(--disp);font-size:16px;border:4px solid var(--ink);padding:6px 12px;
  transform:rotate(-7deg);box-shadow:3px 3px 0 var(--ink)}
.fname{margin-top:18px;display:flex;justify-content:space-between;
  align-items:flex-end;gap:10px;padding:0 4px}
.fname h3{font-size:24px}
.fname p{font-weight:700;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.spin{margin-top:16px;width:100%;font-family:var(--disp);font-size:17px;background:#fff;
  border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:12px;cursor:pointer;transition:.14s}
.spin:hover{background:var(--bowl)}
.spin:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}

/* ═══ 02 OPEN — the layer strip. this replaces every figure-row list ═══ */
.open{background:var(--ink);color:var(--lime);padding:66px 0 74px}
.sec-t{font-size:clamp(30px,4.6vw,54px);margin-bottom:10px}
.sec-p{font-weight:500;font-size:15px;color:#93a06b;max-width:56ch;margin-bottom:34px}
.open .sec-p b{color:var(--gold-l);font-weight:800}
.peel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:34px;align-items:start}
.peel-art{position:relative;border:5px solid var(--lime);background:var(--lime);
  box-shadow:10px 10px 0 var(--bowl-d)}
.peel-art img{width:100%;aspect-ratio:1;object-fit:cover}
.peel-art .badge{position:absolute;right:-5px;bottom:-5px;background:var(--lime);color:var(--ink);
  font-family:var(--disp);font-size:15px;padding:7px 13px;border:5px solid var(--ink)}
.layers{display:flex;flex-direction:column;gap:10px}
.layer{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;
  background:#22261a;border:3px solid #3d4530;padding:13px 15px;cursor:pointer;
  text-align:left;color:inherit;font:inherit;transition:.16s}
.layer:hover{border-color:var(--lime);background:#2b3021}
.layer[aria-pressed="true"]{background:var(--lime);color:var(--ink);border-color:var(--lime);
  box-shadow:6px 6px 0 var(--bowl-d)}
.layer[aria-pressed="true"] .ldepth{background:var(--ink);color:var(--lime)}
.layer[aria-pressed="true"] .lsub,.layer[aria-pressed="true"] .lqty{color:var(--ink-2)}
.ldepth{font-family:var(--disp);font-size:19px;background:var(--lime);color:var(--ink);
  width:52px;height:44px;display:grid;place-items:center;border:3px solid var(--ink)}
.lmain{font-family:var(--disp);font-size:20px;line-height:1.04}
.lsub{display:block;font-family:var(--body);font-weight:600;font-size:12px;
  letter-spacing:.02em;color:#93a06b;margin-top:3px}
.lqty{font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:#93a06b;white-space:nowrap;text-align:right}
.punchline{margin-top:26px;font-family:var(--disp);font-size:clamp(19px,2.5vw,29px);
  color:var(--lime);line-height:1.08}
.punchline em{font-style:normal;color:var(--gold-l)}

/* ═══ 03 SPLIT — 1,693 XOR 848. two stages, not two data cards ═══ */
.split{padding:66px 0 70px}
.forks{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;margin-top:30px}
.fork{border:5px solid var(--ink);background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column}
.fork-h{background:var(--ink);color:var(--lime);padding:12px 15px;display:flex;
  justify-content:space-between;align-items:baseline;gap:10px}
.fork-h h3{font-size:26px}
.fork-h span{font-weight:800;font-size:11.5px;letter-spacing:.05em;color:var(--gold-l);white-space:nowrap}
.fork-strip{display:flex;background:var(--ink)}
.fork-strip img{width:33.334%;aspect-ratio:1;object-fit:cover;background:var(--lime);
  border-right:4px solid var(--ink)}
.fork-strip img:last-child{border-right:0}
.fork-b{padding:15px;font-weight:500;font-size:13.5px;color:var(--ink-2);flex:1}
.fork-b b{color:var(--ink);font-weight:800}
.xor{display:grid;place-items:center;padding:0 16px}
.xor span{font-family:var(--disp);font-size:26px;background:var(--hot);color:#fff;
  border:5px solid var(--ink);padding:16px 10px;box-shadow:4px 4px 0 var(--ink);
  writing-mode:vertical-rl;text-orientation:upright;letter-spacing:2px}

/* ═══ 04 SHELLS — 12 runs as physical widths, labels outside the colour ═══ */
.shells{padding:0 0 70px}
.runbar{display:flex;border:5px solid var(--ink);box-shadow:var(--shadow);overflow:hidden;margin-top:26px}
.run{flex-grow:var(--g);min-width:16px;height:96px;border-right:4px solid var(--ink);
  position:relative;cursor:pointer;transition:.16s}
.run:last-child{border-right:0}
.run:hover{filter:brightness(1.22)}
.run.short{box-shadow:inset 0 0 0 5px var(--hot)}
.runlabels{display:flex;margin-top:9px}
.rl{flex-grow:var(--g);min-width:16px;text-align:center;overflow:hidden;padding:0 2px}
.rl strong{display:block;font-family:var(--disp);font-size:16px;color:var(--ink)}
.rl span{font-weight:700;font-size:10px;letter-spacing:.02em;color:var(--ink-3);
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* --hot on lime measured 2.91:1 at 10px — short runs get ink + a hot underline instead */
.rl.short strong{color:var(--ink);box-shadow:inset 0 -4px 0 var(--hot)}
.rl.short span{color:var(--ink-2);font-weight:800}
.runnote{margin-top:18px;font-weight:500;font-size:14.5px;color:var(--ink-2);max-width:66ch}
.runnote b{color:var(--ink);font-weight:800;box-shadow:inset 0 -5px 0 var(--hot)}

/* ═══ 05 WALL — the 7,777. flood first, controls second ═══ */
.wallsec{background:var(--ink);color:var(--lime);padding:66px 0 74px}
.wallhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:24px}
.tools{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:20px}
.tab{font-family:var(--disp);font-size:16px;background:#22261a;color:var(--lime);
  border:3px solid #3d4530;padding:9px 16px;cursor:pointer;transition:.14s}
.tab:hover{border-color:var(--lime)}
.tab.on{background:var(--lime);color:var(--ink);border-color:var(--lime);box-shadow:4px 4px 0 var(--bowl-d)}
.seek{display:flex;margin-left:auto;border:3px solid #3d4530;background:#22261a}
.seek input{background:transparent;border:0;color:var(--lime);font-family:var(--body);
  font-weight:700;font-size:13px;padding:9px 12px;width:130px;outline:0}
.seek input::placeholder{color:#6f7a52}
.seek button{font-family:var(--disp);font-size:14px;background:var(--lime);color:var(--ink);
  border:0;border-left:3px solid #3d4530;padding:0 15px;cursor:pointer}
.seek button:hover{background:var(--bowl)}
.tally{font-weight:700;font-size:12.5px;color:#93a06b;margin-bottom:14px}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:11px}
.tok{border:4px solid var(--lime);background:var(--lime);cursor:pointer;position:relative;
  padding:0;font:inherit;color:inherit;display:block;transition:.14s}
.tok:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--bowl)}
.tok img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--lime-d)}
.tok b{display:block;background:var(--ink);color:var(--lime);font-family:var(--disp);
  font-size:14px;padding:5px 7px;text-align:left}
.tok .pin{position:absolute;right:-4px;top:-4px;background:var(--gold);color:var(--ink);
  font-weight:800;font-size:10px;padding:3px 6px;border:3px solid var(--ink)}
.tok .pin.g{background:var(--bowl)}
.more{display:block;margin:26px auto 0;font-family:var(--disp);font-size:19px;
  background:var(--lime);color:var(--ink);border:4px solid var(--lime);padding:13px 32px;cursor:pointer}
.more:hover{background:var(--bowl);border-color:var(--bowl)}

/* ═══ 06 GOLD — the nine single-unit parts ═══ */
.goldsec{padding:66px 0 74px}
.golds{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-top:28px}
.gold{border:5px solid var(--gold);background:#fff;box-shadow:5px 5px 0 var(--ink);
  position:relative;cursor:pointer;transition:.16s;padding:0;font:inherit;text-align:left;display:block}
.gold:hover{transform:translateY(-6px);box-shadow:5px 11px 0 var(--ink)}
.gold.grail{border-color:var(--bowl)}
.gold img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--lime)}
.gold-b{padding:10px 11px 12px}
.gold-b strong{display:block;font-family:var(--disp);font-size:18px;line-height:1.02}
.gold-b span{font-weight:700;font-size:11px;letter-spacing:.03em;color:var(--ink-3)}
.gold .flag{position:absolute;right:-5px;top:-5px;background:var(--gold);color:var(--ink);
  font-family:var(--disp);font-size:13px;padding:5px 10px;border:4px solid var(--ink)}
.gold.grail .flag{background:var(--bowl)}

/* ═══ 07 DROP ═══ */
.dropsec{background:var(--ink);color:var(--lime);padding:66px 0 74px}
.drops{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin-top:28px}
.drop{background:#22261a;border:4px solid #3d4530;padding:19px}
.drop:hover{border-color:var(--lime)}
.drop h3{font-size:22px;margin:10px 0 8px}
.drop span{font-weight:800;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-l)}
.drop p{font-weight:500;font-size:13.5px;color:#93a06b}
.drop a{color:var(--bowl);font-weight:800;text-decoration:underline;text-decoration-thickness:2px}

/* ═══ FOOT ═══ */
.foot{padding:40px 0 54px}
.foot-in{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.foot p{font-weight:500;font-size:13.5px;color:var(--ink-2);max-width:44ch;margin-top:9px}
.flinks{display:flex;flex-wrap:wrap;gap:9px}
.flinks a{font-family:var(--disp);font-size:16px;background:#fff;border:4px solid var(--ink);
  padding:9px 15px;text-decoration:none;box-shadow:4px 4px 0 var(--ink)}
.flinks a:hover{background:var(--bowl)}

/* ═══ SHEET (token detail) ═══ */
.veil{position:fixed;inset:0;background:rgba(24,26,18,.86);display:none;
  place-items:center;padding:22px;z-index:60}
.veil.on{display:grid}
.sheet{width:min(760px,94vw);max-height:90vh;overflow:auto;background:var(--lime);
  border:6px solid var(--ink);box-shadow:var(--shadow-lg)}
.sheet-h{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:15px 18px;background:var(--ink);color:var(--lime);position:sticky;top:0}
.sheet-h h3{font-size:27px}
.x{background:var(--lime);color:var(--ink);border:0;font-family:var(--disp);font-size:19px;
  width:40px;height:40px;cursor:pointer;flex:0 0 auto}
.x:hover{background:var(--hot);color:#fff}
.sheet-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:18px;padding:18px}
.sheet-art{border:5px solid var(--ink);background:var(--lime);box-shadow:5px 5px 0 var(--bowl-d)}
.sheet-art img{width:100%;aspect-ratio:1;object-fit:cover}
.srow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.sbit{background:#fff;border:3px solid var(--ink);padding:7px 11px}
.sbit strong{display:block;font-family:var(--disp);font-size:19px}
.sbit span{font-weight:800;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.parts{display:flex;flex-direction:column;gap:7px}
.part{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  background:#fff;border-left:6px solid var(--bowl);padding:8px 11px}
.part i{font-style:normal;font-weight:800;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.part b{font-family:var(--disp);font-size:16px;font-weight:400;text-align:right}
.part.rare{border-left-color:var(--hot)}
.part.gold{border-left-color:var(--gold)}

@media(max-width:980px){
  .out-grid,.peel,.sheet-b{grid-template-columns:1fr}
  .out-grid{gap:56px}
  .forks{grid-template-columns:1fr}
  .xor{padding:14px 0}
  .xor span{writing-mode:horizontal-tb;padding:10px 20px}
  .depthbar{display:none}
  .figure{max-width:400px}
}
@media(max-width:620px){
  .rail-in{padding:9px 0}
  .wm{font-size:18px}
  .wall{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
  .seek{margin-left:0;width:100%}
  .seek input{flex:1;width:auto}
  .rl span{display:none}
  .lqty{display:none}
  .layer{grid-template-columns:44px 1fr}
  .ldepth{width:44px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}