/* ------------------------------------------------------------------
   Drop — the download page, as a build sheet.
   Inherits the Drop cel world: paper, ink, one blue, coral registration
   marks, masking tape, hand lettering, seeded-jitter drawn marks.
   ------------------------------------------------------------------ */

@font-face{font-family:"Shantell Sans";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/shantell-sans-latin-500.woff2) format("woff2")}
@font-face{font-family:"Shantell Sans";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/shantell-sans-latin-600.woff2) format("woff2")}
@font-face{font-family:"Shantell Sans";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/shantell-sans-latin-700.woff2) format("woff2")}
@font-face{font-family:"Gaegu";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/gaegu-latin-400.woff2) format("woff2")}
@font-face{font-family:"Gaegu";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/gaegu-latin-700.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/nunito-latin-400.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/nunito-latin-600.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/nunito-latin-700.woff2) format("woff2")}

:root{
  --paper:#faf9f6;
  --paper-white:#fff;
  --ink:#16150f;
  --ink-soft:#16150fa8;
  --ink-mid:#16150f99;
  --ink-faint:#16150f33;
  --ink-hair:#16150f1c;
  --blue:#1e6fd9;
  --blue-deep:#17579e;
  --coral:#c65b4d;
  --coral-ink:#b0483a;
  --moss:#3d7d63;
  --cel-face:#fafcfbc7;
  --cel-edge:#29435247;
  --tape-face:#efe6cdeb;
  --font-hand:"Shantell Sans";
  --font-note:"Gaegu";
  --font-ui:"Nunito";
  --shadow:0 22px 55px #232d3a1f, 0 5px 13px #232d3a14;
  --shadow-panel:0 16px 40px #232d3a14;
  --gutter:clamp(20px,4vw,72px);
  --head-h:70px;
}

@media (min-width:1100px){ :root{ --head-h:80px } }

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 18px)}
body{
  margin:0;
  background-color:var(--paper);
  background-image:url(assets/paper.png);
  color:var(--ink);
  font-family:var(--font-ui),system-ui,sans-serif;
  font-size:clamp(1rem,.94rem + .28vw,1.13rem);
  line-height:1.65;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--blue);outline-offset:5px;border-radius:2px}
::selection{background:var(--blue);color:var(--paper-white)}
main{padding-top:var(--head-h)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:80}
.skip:focus{left:12px;top:12px;background:var(--paper-white);padding:10px 16px;border:2px solid var(--blue);font:700 1rem/1 var(--font-note),cursive}

/* ---------- registration marks : the world's punctuation ---------- */
.reg{position:absolute;width:15px;height:15px;color:var(--coral);font:400 21px/15px var(--font-note),cursive;pointer-events:none;z-index:6}
.reg::before{content:"+"}
.reg--tl{top:9px;left:9px}
.reg--tr{top:9px;right:9px}
.reg--bl{bottom:9px;left:9px}
.reg--br{bottom:9px;right:9px}

/* ---------- header ---------- */
.head{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--head-h);
  padding:10px var(--gutter);
  background:#faf9f6e0;
  -webkit-backdrop-filter:blur(9px) saturate(1.1);
  backdrop-filter:blur(9px) saturate(1.1);
  border-bottom:1px solid var(--ink-faint);
  box-shadow:0 7px 22px #232d3a0f;
}
.wordmark{
  display:flex;align-items:baseline;gap:12px;
  font:700 clamp(1.85rem,3vw,2.6rem)/1 var(--font-hand),cursive;
  letter-spacing:-.04em;transform:rotate(-2deg);transform-origin:0 60%;
}
.wordmark small{font:700 .95rem/1 var(--font-note),cursive;color:var(--ink-mid);letter-spacing:0;transform:rotate(2deg)}
@media (max-width:720px){.wordmark small{display:none}}

/* ---------- cels ---------- */
.cel{
  position:relative;background:var(--cel-face);border:1px solid var(--cel-edge);border-radius:14px;
  box-shadow:var(--shadow);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.cel--cyan{background:#def4f88a}
.cel--blue{background:#dce9fa9e}
.tape{
  position:absolute;z-index:5;background:#e7dbbec9;height:30px;width:42%;left:29%;top:-13px;
  transform:rotate(2deg);box-shadow:0 4px 9px #2d251b1a;
}
.tape::before,.tape::after{
  content:"";position:absolute;top:0;height:100%;width:15px;background:inherit;
  clip-path:polygon(22% 0,100% 7%,83% 19%,100% 29%,84% 42%,100% 56%,78% 72%,100% 88%,60% 100%,0 94%,14% 75%,0 60%,13% 42%,0 27%,18% 11%);
}
.tape::before{left:-11px}
.tape::after{right:-11px;transform:scaleX(-1)}

/* ---------- tape action ---------- */
.tape-action{
  display:inline-flex;align-items:center;gap:14px;cursor:pointer;min-height:56px;
  font:700 1.32rem/1 var(--font-note),cursive;background:var(--tape-face);padding:14px 26px 12px;
  position:relative;transform:rotate(-1deg);box-shadow:0 8px 20px #372d1c26;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;
}
.tape-action::before,.tape-action::after{
  content:"";position:absolute;top:0;height:100%;width:18px;background:inherit;
  clip-path:polygon(22% 0,100% 7%,83% 19%,100% 29%,84% 42%,100% 56%,78% 72%,100% 88%,60% 100%,0 94%,14% 75%,0 60%,13% 42%,0 27%,18% 11%);
}
.tape-action::before{left:-12px}
.tape-action::after{right:-12px;transform:scaleX(-1)}
.tape-action svg{width:26px;height:14px;overflow:visible;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.tape-action svg path{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tape-action:hover{transform:translateY(-3px) rotate(0);box-shadow:0 13px 30px #372d1c33}
.tape-action:hover svg{transform:translateX(5px)}
/* the header's compact strip — same tape, one step down */
.tape-action--sm{min-height:46px;padding:11px 20px 9px;gap:11px;font-size:1.08rem;transform:rotate(-1.4deg)}
.tape-action--sm::before,.tape-action--sm::after{width:14px}
.tape-action--sm::before{left:-9px}
.tape-action--sm::after{right:-9px}
.tape-action--sm svg{width:22px}
@media (max-width:420px){.tape-action--sm{font-size:1rem;padding:10px 15px 8px}.tape-action--sm svg{display:none}}

.pencil-link{
  display:inline-block;position:relative;min-height:46px;padding:10px 2px 8px;
  font:700 1.2rem/1 var(--font-note),cursive;color:var(--blue);cursor:pointer;
}
.pencil-link::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:3px;background:var(--blue);transform:rotate(-1deg);transform-origin:0 50%;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.pencil-link:hover::after{transform:rotate(-1deg) scaleX(1.06)}

.chip{display:inline-block;margin-top:11px;padding:5px 13px 4px;border:1.5px solid var(--ink-faint);border-radius:999px;font:700 .88rem/1.2 var(--font-note),cursive;color:var(--ink-soft);background:#fffc}

/* ---------- scenes ---------- */
.scene{position:relative;padding:clamp(84px,9vw,150px) var(--gutter);border-bottom:1px solid var(--ink-faint)}
.scene--wash{background:#ffffff8f}
.scene--cyan{background:#def4f847}
.scene--grid{background:
  linear-gradient(#16150f1c 1px,transparent 1px) 0 0/100% 120px,
  linear-gradient(90deg,#16150f1c 1px,transparent 1px) 0 0/120px 100%,
  linear-gradient(#16150f0d 1px,transparent 1px) 0 0/100% 24px,
  linear-gradient(90deg,#16150f0d 1px,transparent 1px) 0 0/24px 100%,
  #f6f8f9b3}
.scene-inner{max-width:1240px;margin:0 auto}

.scene h2{
  font:700 clamp(2.5rem,5.3vw,4.6rem)/1 var(--font-hand),cursive;
  letter-spacing:-.045em;text-wrap:balance;max-width:17ch;margin:0;
}
.scene h2 + .rule-crayon{margin:16px 0 0}
.rule-crayon{border-top:4px solid var(--blue);border-bottom:2px solid var(--blue);height:9px;width:min(74%,330px);transform:rotate(-1.1deg);opacity:.92}
.scene h3{font:700 clamp(1.28rem,1.8vw,1.6rem)/1.2 var(--font-hand),cursive;letter-spacing:-.03em;margin:0}
.lede{max-width:56ch;color:var(--ink-soft);font-size:clamp(1.06rem,1.02rem + .35vw,1.28rem);line-height:1.62;margin-top:30px}
.body-p{max-width:64ch;color:var(--ink-soft);margin-top:22px}
.body-p strong{color:var(--ink);font-weight:700}
.note{font:700 clamp(1rem,1.4vw,1.24rem)/1.4 var(--font-note),cursive;color:var(--blue);max-width:58ch}

/* ================= hero ================= */
.title-card{padding-top:clamp(46px,6vw,86px);padding-bottom:clamp(60px,7vw,110px);overflow:clip}
.title-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,5vw,86px);align-items:center;max-width:1300px;margin:0 auto}
.title-copy{position:relative;z-index:4;max-width:640px}
.title-copy h1{
  font:700 clamp(2.8rem,5.2vw,4.5rem)/1 var(--font-hand),cursive;
  letter-spacing:-.045em;text-wrap:balance;max-width:15ch;
}
.title-copy h1 em{font-style:normal;color:var(--blue)}
.title-copy .rule-crayon{width:min(66%,300px);margin:18px 0 0 8%}
.title-actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,38px);margin-top:38px}
.dl{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.dl-meta{font:700 1.02rem/1 var(--font-note),cursive;color:var(--ink-mid);padding-left:4px}
.dl-meta b{color:var(--ink)}
.title-meta{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:40px;padding-top:22px;border-top:1px solid var(--ink-faint);font:700 1rem/1.4 var(--font-note),cursive;color:var(--ink-mid)}
.title-meta b{color:var(--ink);font-weight:700}

.title-stage{position:relative;min-height:min(600px,66vw);display:flex;flex-direction:column;align-items:flex-end;justify-content:center}
.rain{position:absolute;inset:-14% -6% auto -6%;height:88%;width:112%;fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;overflow:visible;z-index:1;opacity:.5}
.rain path:nth-of-type(2){stroke-width:3}
.rain path:nth-of-type(3){stroke-width:5}
.rain circle{fill:var(--paper);stroke-width:4}

.day-cel{position:relative;z-index:3;width:min(408px,88%);padding:40px 30px 30px;background:#fbfcfbf5;transform:rotate(-1.4deg)}
.day-cel .k{font:700 1.05rem/1 var(--font-note),cursive;color:var(--ink-mid)}
.day-cel .big{display:flex;align-items:baseline;gap:12px;margin-top:4px}
.day-cel .big strong{font:700 clamp(3.1rem,5.4vw,4.4rem)/.9 var(--font-hand),cursive;letter-spacing:-.045em}
.day-cel .big span{font:600 1.3rem/1 var(--font-hand),cursive;color:var(--ink-soft)}
.day-cel .wk{display:flex;justify-content:space-between;align-items:baseline;margin-top:26px;font:700 .98rem/1 var(--font-note),cursive;color:var(--ink-mid)}
.day-cel .wk b{color:var(--ink)}
.day-cel .bar{position:relative;height:13px;margin-top:9px;border:1.5px solid var(--ink-faint);border-radius:7px;overflow:hidden;background:#fff9}
.day-cel .bar i{display:block;height:100%;width:10.8%;background:var(--blue);border-radius:6px}
.day-cel ul{margin-top:24px;border-top:1px solid var(--ink-faint)}
.day-cel li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--ink-hair)}
.day-cel li .nm{font-weight:600;font-size:.99rem;line-height:1.25}
.day-cel li .qt{display:block;font:700 .88rem/1 var(--font-note),cursive;color:var(--ink-mid);margin-top:5px}
.day-cel li .v{font:700 1.16rem/1 var(--font-hand),cursive;letter-spacing:-.03em;white-space:nowrap}

.range-cel{position:relative;z-index:5;align-self:flex-start;margin:-16px 0 0 4%;width:min(288px,74%);padding:24px 22px 20px;background:#e6f5f8f2;transform:rotate(3deg)}
.range-cel .nm{font:600 1.02rem/1.2 var(--font-hand),cursive}
.range-cel .val{display:flex;align-items:baseline;gap:7px;margin-top:8px}
.range-cel .val strong{font:700 clamp(1.9rem,3vw,2.5rem)/.95 var(--font-hand),cursive;letter-spacing:-.04em;color:var(--blue)}
.range-cel .val span{font:600 1.05rem/1 var(--font-hand),cursive;color:var(--ink-soft)}
.range-cel .src{margin-top:12px;font:700 .95rem/1.35 var(--font-note),cursive;color:var(--ink-soft)}

.mascot{position:absolute;z-index:6;filter:drop-shadow(0 10px 14px #16150f1f);height:auto;pointer-events:none}
.title-stage .mascot{width:clamp(104px,10vw,150px);right:1%;bottom:-8%;z-index:2}

/* ================= what it does ================= */
.storyboard{
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(50px,5.4vw,82px);background:#fffffff5;border:1px solid var(--ink-faint);
  border-radius:16px;box-shadow:var(--shadow);transform:rotate(-.4deg);
}
.storyboard .tape{width:186px;left:38%;top:-14px}
.sb-panel{position:relative;padding:clamp(30px,3.2vw,44px) clamp(24px,2.6vw,38px) clamp(30px,3.2vw,40px)}
.sb-panel + .sb-panel{border-left:1px solid var(--ink-hair)}
.sb-panel .no{font:700 1rem/1 var(--font-note),cursive;color:var(--coral-ink);letter-spacing:.08em}
.sb-panel h3{margin-top:12px}
.sb-panel p{margin-top:14px;color:var(--ink-soft);font-size:1.01rem;line-height:1.55}
.sb-panel p strong{color:var(--ink);font-weight:700}
.sb-arrow{position:absolute;top:calc(clamp(30px,3.2vw,44px) + 30px);right:-15px;width:30px;height:16px;overflow:visible;z-index:4}
.sb-arrow path{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sb-arrow::before{content:"";position:absolute;inset:-8px -6px;background:#fffffff5;border-radius:50%;z-index:-1}

.pull{position:relative;max-width:1000px;margin-top:clamp(50px,5.5vw,86px);padding:clamp(34px,4vw,60px) clamp(28px,4vw,64px);background:#def4f877;border:1px solid #29435240;border-radius:16px;box-shadow:var(--shadow);transform:rotate(-.5deg)}
.pull p{font:700 clamp(1.85rem,3.9vw,3.3rem)/1.08 var(--font-hand),cursive;letter-spacing:-.04em;text-wrap:balance;max-width:24ch}
.pull .who{margin-top:20px;font:700 1.05rem/1 var(--font-note),cursive;color:var(--ink-soft)}
.pull .mascot{width:clamp(88px,9vw,136px);right:5%;bottom:-16px}
@media (max-width:820px){.pull .mascot{width:78px;right:2%;bottom:-10px}}

/* ================= the build sheet ================= */
.get-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,4.5vw,76px);align-items:start;margin-top:clamp(46px,5vw,76px)}

.build{
  position:relative;padding:32px 30px 30px;background:#fffffff5;border:1px solid var(--cel-edge);
  border-radius:16px;box-shadow:var(--shadow);transform:rotate(-.45deg);
}
.build-hd{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--ink-faint)}
.build-hd .fn{font:700 clamp(1.16rem,1.7vw,1.44rem)/1.15 var(--font-hand),cursive;letter-spacing:-.03em;word-break:break-word}
.build-hd .wt{display:flex;align-items:baseline;gap:7px;flex:none}
.build-hd .wt strong{font:700 clamp(2.2rem,3.6vw,3rem)/.9 var(--font-hand),cursive;letter-spacing:-.045em;color:var(--blue)}
.build-hd .wt span{font:600 1.06rem/1 var(--font-hand),cursive;color:var(--ink-soft)}

.kv{margin-top:6px}
.kv > div{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:8px 20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--ink-hair)}
.kv dt{font:700 1rem/1.3 var(--font-note),cursive;color:var(--ink-mid)}
.kv dd{font-size:1rem;line-height:1.45;color:var(--ink-soft)}

.sha{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;margin-top:22px;padding:12px 18px 14px;background:#f3f7fbb8;border:1px solid var(--ink-faint);border-radius:12px}
.sha-k{grid-column:1;grid-row:1;font:700 .95rem/1 var(--font-note),cursive;color:var(--ink-mid);letter-spacing:.05em}
.sha-v{grid-column:1/-1;grid-row:2;font:700 .93rem/1.5 var(--font-note),cursive;color:var(--ink-soft);word-break:break-all;font-variant-numeric:tabular-nums}
.copy{
  grid-column:2;grid-row:1;justify-self:end;position:relative;min-height:44px;padding:11px 4px 9px;
  font:700 1.06rem/1 var(--font-note),cursive;color:var(--blue);cursor:pointer;
}
.copy::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:3px;background:var(--blue);transform:rotate(-1deg);transform-origin:0 50%;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.copy:hover::after{transform:rotate(-1deg) scaleX(1.06)}
.copy[data-done="1"]{color:var(--moss)}
.copy[data-done="1"]::after{background:var(--moss)}

.build-cta{margin-top:26px}

.steps-h{margin-bottom:6px}
.ladder{margin-top:8px;counter-reset:g}
.ladder li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--ink-hair)}
.ladder li:last-child{border-bottom:0}
.ladder li::before{counter-increment:g;content:counter(g);font:700 1.5rem/1 var(--font-hand),cursive;color:var(--blue);letter-spacing:-.03em;min-width:1.2ch;grid-row:1/3}
.ladder li p{font:600 clamp(1.06rem,1.4vw,1.24rem)/1.4 var(--font-ui),sans-serif;color:var(--ink)}
.ladder li p strong{font-weight:700}
.ladder li span{grid-column:2;font-size:.99rem;line-height:1.55;color:var(--ink-soft)}
.ladder code{font:700 .95rem/1.4 var(--font-note),cursive;color:var(--coral-ink);overflow-wrap:anywhere}
.steps-alt{margin-top:20px;font:700 1.06rem/1.5 var(--font-note),cursive;color:var(--ink-soft)}
.steps-alt .pencil-link{min-height:0;font-size:1.06rem;padding:0 2px 4px}

/* ================= the engine ================= */
.lanes{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(20px,3vw,52px);align-items:stretch;
  margin-top:clamp(46px,5vw,78px);
}
.lane{position:relative;padding:32px 30px 30px;background:#ffffffef;border:1px solid var(--ink-faint);border-radius:14px;box-shadow:0 14px 34px #232d3a12;transform:rotate(-.5deg)}
.lane--engine{background:#dce9faa8;border-color:#1e6fd93d;transform:rotate(.45deg)}
.lane h3{font-size:clamp(1.2rem,1.7vw,1.5rem)}
.lane ol{margin-top:22px;counter-reset:l}
.lane li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;padding:15px 0;border-top:1px solid var(--ink-hair);font-size:1.04rem;line-height:1.45}
.lane li::before{counter-increment:l;content:counter(l);font:700 1.02rem/1 var(--font-note),cursive;color:var(--ink-mid);min-width:1ch}
.lane--engine li::before{color:var(--blue)}
.wall{position:relative;display:flex;align-items:center;justify-content:center;min-width:56px}
.wall::before{content:"";position:absolute;top:-6px;bottom:-6px;left:50%;width:0;border-left:3px dashed var(--coral);opacity:.8}
.wall span{
  position:relative;z-index:2;writing-mode:vertical-rl;transform:rotate(180deg);
  font:700 1.02rem/1 var(--font-note),cursive;color:var(--coral-ink);letter-spacing:.02em;
  background:var(--paper);padding:14px 4px;white-space:nowrap;
}
@media (max-width:960px){
  .lanes{grid-template-columns:1fr;gap:16px}
  .lane,.lane--engine{transform:none}
  .wall{min-width:0;padding:16px 0}
  .wall::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:0;border-left:0;border-top:3px dashed var(--coral)}
  .wall span{writing-mode:horizontal-tb;transform:none;padding:6px 16px}
}

.sheet-nums{margin-top:clamp(46px,5vw,76px);position:relative;background:#fffffff2;border:1px solid var(--ink-faint);border-radius:14px;box-shadow:var(--shadow-panel);transform:rotate(-.3deg);overflow:hidden}
.sheet-nums .hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:20px 26px 16px;border-bottom:1px solid var(--ink-faint);background:#f3f7fbb0}
.sheet-nums .hd b{font:700 1.1rem/1 var(--font-hand),cursive;letter-spacing:-.02em}
.sheet-nums .hd span{font:700 .95rem/1 var(--font-note),cursive;color:var(--ink-mid)}
.ledger{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center}
.ledger .total{display:flex;align-items:baseline;gap:20px;padding:34px 30px 30px;border-right:1px solid var(--ink-hair)}
.ledger .total strong{font:700 clamp(3.2rem,6vw,5rem)/.86 var(--font-hand),cursive;letter-spacing:-.05em;color:var(--blue);flex:none}
.ledger .total span{font:700 1.04rem/1.4 var(--font-note),cursive;color:var(--ink-soft);max-width:20ch}
.cover{padding:26px 30px 22px}
.cover svg{width:100%;height:auto;overflow:visible}
.ledger .tests{grid-column:1/-1;display:flex;align-items:baseline;gap:16px;padding:20px 30px 26px;border-top:1px solid var(--ink-hair)}
.ledger .tests b{font:700 1.9rem/1 var(--font-hand),cursive;letter-spacing:-.04em;min-width:3.2ch}
.ledger .tests span{font:700 1rem/1.35 var(--font-note),cursive;color:var(--ink-soft)}

/* ================= what runs on the phone ================= */
.measure-rule{width:100%;height:26px;margin-top:clamp(38px,4vw,60px);overflow:visible}
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,38px);margin-top:22px}
.perk{padding:30px 26px 26px}
.perk:nth-child(1){transform:rotate(-.7deg)}
.perk:nth-child(2){transform:rotate(.5deg)}
.perk:nth-child(3){transform:rotate(-.3deg)}
.perk h3{max-width:18ch}
.perk p{margin-top:14px;color:var(--ink-soft);font-size:1rem;line-height:1.58}

/* ================= end card ================= */
.endcard{
  background:var(--blue-deep);
  background-image:url(assets/paper.png);
  background-blend-mode:multiply;
  color:var(--paper);border-bottom:0;
  padding-top:clamp(96px,10vw,168px);padding-bottom:clamp(96px,10vw,168px);
  position:relative;overflow:clip;
}
.endcard .scene-inner{position:relative;z-index:3;max-width:1080px}
.endcard .reg{color:#ffffffb0}
.endcard p.big{font:700 clamp(2rem,4.6vw,3.9rem)/1.06 var(--font-hand),cursive;letter-spacing:-.045em;text-wrap:balance;max-width:19ch}
.endcard p.mid{margin-top:clamp(26px,3vw,44px);font:600 clamp(1.2rem,1.9vw,1.6rem)/1.45 var(--font-ui),sans-serif;color:#ffffffd6;max-width:44ch}
.endcard .rule-crayon{border-top-color:var(--paper);border-bottom-color:#ffffffb5;width:min(60%,290px);margin:clamp(34px,4vw,56px) 0}
.endcard .tape-action{color:var(--ink)}
.end-actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,40px);margin-top:clamp(38px,4.4vw,60px)}
.pencil-link--light{color:var(--paper)}
.pencil-link--light::after{background:var(--paper)}
.endcard p.last{font:700 clamp(1.25rem,2.1vw,1.8rem)/1.4 var(--font-note),cursive;color:#fffffff0;max-width:38ch}
.endcard .mascot{width:clamp(126px,13vw,206px);right:4%;bottom:7%;filter:drop-shadow(0 14px 22px #06203f4d) invert(1)}
.end-rain{position:absolute;inset:auto 0 0 0;height:62%;width:100%;fill:none;stroke:#ffffff54;stroke-width:4;stroke-linecap:round;z-index:1;overflow:visible}
.end-rain path:nth-of-type(2){stroke-width:6}
.end-rain path:nth-of-type(3){stroke-width:3}
.end-rain path:nth-of-type(4){stroke-width:5}
@media (max-width:820px){.endcard .mascot{width:104px;right:-2%;bottom:2%;opacity:.9}}

/* ================= footer ================= */
.foot{padding:clamp(56px,6vw,88px) var(--gutter) clamp(50px,5vw,72px);background:#ffffff8f}
.foot-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,80px);align-items:start}
.foot h3{margin-bottom:18px}
.foot .brand{font:700 clamp(2.2rem,3.4vw,3rem)/1 var(--font-hand),cursive;letter-spacing:-.04em;transform:rotate(-1.6deg);transform-origin:0 50%;display:inline-block}
.foot-mascot{width:clamp(120px,11vw,168px);height:auto;margin-top:36px;filter:drop-shadow(0 10px 14px #16150f1a)}
.foot .meta{margin-top:22px;font:700 1.02rem/1.6 var(--font-note),cursive;color:var(--ink-soft)}
.foot .meta b{color:var(--ink)}
.sources{display:grid;gap:14px}
.sources li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--ink-hair);font-size:.99rem;line-height:1.5;color:var(--ink-soft)}
.sources li:last-child{border-bottom:0}
.sources li b{font:700 .95rem/1.4 var(--font-note),cursive;color:var(--coral-ink);letter-spacing:.05em;white-space:nowrap}

/* ================= drawn-mark motion : the one authored moment ==== */
.ink path,.ink line,.ink polyline,.ink circle,.ink rect{
  stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);
}
.ink.inked path,.ink.inked line,.ink.inked polyline,.ink.inked circle,.ink.inked rect{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.05s cubic-bezier(.16,.9,.24,1);
  transition-delay:calc(var(--i,0) * 90ms);
}
.ink [data-nodraw]{stroke-dasharray:none;stroke-dashoffset:0}

.rise{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,.9,.24,1),transform .8s cubic-bezier(.16,.9,.24,1);transition-delay:calc(var(--i,0) * 75ms)}
.rise.inked{opacity:1;transform:none}
/* the tilted surfaces keep their tilt through the rise */
.build.rise.inked{transform:rotate(-.45deg)}
.perk.rise{transform:translateY(16px)}
.perk.rise.inked:nth-child(1){transform:rotate(-.7deg)}
.perk.rise.inked:nth-child(2){transform:rotate(.5deg)}
.perk.rise.inked:nth-child(3){transform:rotate(-.3deg)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ink path,.ink line,.ink polyline,.ink circle,.ink rect{stroke-dasharray:none;stroke-dashoffset:0}
  .rise{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
.no-js .rise{opacity:1;transform:none}
.no-js .ink path,.no-js .ink line,.no-js .ink polyline,.no-js .ink circle,.no-js .ink rect{stroke-dasharray:none;stroke-dashoffset:0}
.no-js .copy{display:none}

/* ================= responsive ================= */
@media (max-width:1180px){
  .ledger{grid-template-columns:1fr}
  .ledger .total{border-right:0;border-bottom:1px solid var(--ink-hair)}
  .perks{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .title-grid{grid-template-columns:1fr;gap:44px}
  .title-stage{min-height:0;padding:20px 0 30px;justify-content:flex-start}
  .day-cel{width:min(380px,92%)}
  .range-cel{right:0;bottom:-12px;width:min(250px,64%)}
  .title-stage .mascot{width:104px;left:auto;right:2%;top:-4px;bottom:auto}
  .rain{inset:-8% -4% auto -4%;height:70%}
  .get-grid,.foot-inner{grid-template-columns:1fr;gap:44px}
  .storyboard{grid-template-columns:1fr}
  .sb-panel + .sb-panel{border-left:0;border-top:1px solid var(--ink-hair)}
  .sb-arrow{display:none}
}
@media (max-width:720px){
  .scene h2{max-width:none}
  .title-copy h1{max-width:none}
  .day-cel{width:100%}
  .range-cel{position:relative;right:auto;bottom:auto;width:min(280px,80%);margin:-26px 0 0 auto;transform:rotate(2.4deg)}
  .perks{grid-template-columns:1fr}
  .perk:nth-child(n),.perk.rise.inked:nth-child(n){transform:none}
  .build{transform:none}
  .build.rise.inked{transform:none}
  .kv > div{grid-template-columns:1fr;gap:4px;padding:12px 0}
}
@media (max-width:560px){
  .build{padding:26px 20px 24px}
  .build-hd{flex-direction:column;gap:10px}
}