/* CBT Toolbox for Tweens & Teens. Colours sampled from the cover (ART-DIRECTION.md). Without the js class (no JavaScript,
   or reduced motion) every scene is a still block in the page's flow; with it, the scenes share one sticky stage and
   site.js moves everything from the scroll position. */
@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(/assets/fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins-700.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 800; font-display: swap; src: url(/assets/fonts/poppins-800.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 900; font-display: swap; src: url(/assets/fonts/poppins-900.woff2) format('woff2'); }
@font-face { font-family: Marker; font-display: swap; src: url(/assets/fonts/marker.woff2) format('woff2'); }

:root { --yellow: #FFFC01; --lilac: #917DFF; --purple: #5B3FD9; --ink: #221C1C; --cyan: #08FEDF; --pink: #FF56FF; --soft: #FFC8FF; --grey: #575757; --paper: #fffef6; --tape-h: 48px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--yellow); color: var(--ink); font: 400 17px/1.6 Poppins, system-ui, sans-serif; overflow-x: hidden; }
img { max-width: 100%; }
.sr-only { position: absolute; left: 0; top: 0; margin: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: normal; }
.hand { font-family: Marker, 'Comic Sans MS', cursive; font-weight: 400; letter-spacing: .01em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.skip { position: fixed; left: 12px; top: 10px; z-index: 60; transform: translateY(-160%); background: var(--ink); color: var(--yellow); padding: 12px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { transform: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 24px; border-radius: 999px; border: 2.5px solid var(--ink);
  background: var(--lilac); color: #fff; font: 800 16px/1.1 Poppins, sans-serif; text-decoration: none; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.pin-buy { position: fixed; top: 12px; right: 12px; z-index: 40; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  background: var(--ink); color: var(--yellow); font: 700 14px/1 Poppins, sans-serif; text-decoration: none; border: 2px solid var(--ink); }
.pin-buy:hover { background: var(--lilac); color: #fff; }

/* ---------- the still page (no JavaScript, reduced motion) ---------- */
#stage { position: relative; }
.sc { position: relative; padding: 90px 7vw 70px; min-height: 80vh; overflow: hidden; }
.s3, .s4 { background: var(--purple); color: #fff; }
.bg-purple, .road, .zoom, .stickers, .box, .tools, .frame, .bk-end { display: none; }
.st { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: rotate(var(--r)); pointer-events: none; }
.hero-lines { margin: 0; font: 900 clamp(46px, 9vw, 120px)/.95 Poppins, sans-serif; letter-spacing: -.02em; }
.hero-lines .ln { display: block; }
.key { color: var(--lilac); }
.s2 .key, .s5 .key { color: var(--purple); }
.hero-sub { font-weight: 700; max-width: 34em; margin: 22px 0 14px; }
.hero-buy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; }
.when { font-weight: 600; font-size: 15px; }
.bk-hero { width: min(280px, 60vw); aspect-ratio: 7 / 10; margin: 30px 0 0; }
.bk-hero img, .bk-buy img { width: 100%; height: 100%; object-fit: contain; box-shadow: 0 18px 40px rgba(34, 28, 28, .28); }
.pile { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.w { display: block; font: 900 clamp(34px, 7vw, 92px)/1 Poppins, sans-serif; letter-spacing: -.02em; }
.w.key { font-size: clamp(42px, 9vw, 120px); }
.note-roller, .note-normal { font-size: clamp(22px, 3vw, 34px); margin: 0; }
.arrow { width: 64px; height: 32px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.shove { margin: 40px 0 0; font: 900 clamp(32px, 6vw, 84px)/1 Poppins, sans-serif; letter-spacing: -.02em; }
.shove span { display: block; }
.handle { color: var(--lilac); font-weight: 900; font-size: 1.2em; }
.cbt .q { color: var(--yellow); font-size: clamp(34px, 5vw, 64px); margin: 0; }
.cbt .a { font-weight: 600; font-size: clamp(17px, 1.6vw, 22px); max-width: 30em; }
.cbt em { color: var(--cyan); font-style: normal; }
.open, .lvl { font: 900 clamp(34px, 6vw, 80px)/1 Poppins, sans-serif; color: var(--yellow); margin: 30px 0 10px; letter-spacing: -.02em; }
.cards { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 12px; }
.card { background: #fff; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 12px; padding: 12px 16px 10px; box-shadow: 4px 4px 0 var(--ink); min-width: 150px; }
.card b { display: block; font: 900 18px/1.1 Poppins, sans-serif; }
.card .hand { display: block; color: var(--purple); font-size: 17px; margin-top: 4px; }
.c1, .c4 { background: var(--cyan); } .c2, .c5 { background: var(--soft); } .c3, .c6 { background: var(--yellow); }
.back, .resil, .ready { font-size: clamp(24px, 3.4vw, 40px); color: var(--yellow); margin: 18px 0 0; }
.ready { color: var(--ink); }
.checks { list-style: none; padding: 0; margin: 10px 0; }
.ck { font: 900 clamp(26px, 4vw, 52px)/1.15 Poppins, sans-serif; letter-spacing: -.01em; }
.ck i { font-style: normal; color: var(--lilac); }
.ck b { color: var(--cyan); }
.got { margin: 0; font: 900 clamp(60px, 14vw, 200px)/.9 Poppins, sans-serif; color: var(--purple); letter-spacing: -.03em; position: relative; }
.underline { display: block; width: 80%; height: .2em; fill: none; stroke: var(--pink); stroke-width: 7; stroke-linecap: round; }
.end-title { font: 900 clamp(30px, 4vw, 54px)/1 Poppins, sans-serif; color: var(--lilac); margin: 0 0 18px; }
.end-title span { display: block; color: var(--ink); font-size: .62em; margin-top: 6px; }
.s6 { min-height: 0; }

/* ---------- the moving page: one sticky stage ---------- */
.js #film { position: relative; }
.js #stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--yellow); }
.js .sc { position: absolute; inset: 0; padding: 0; min-height: 0; background: none; overflow: visible; pointer-events: none; }
.js .sc a, .js .sc .btn { pointer-events: auto; }
.js .still-only { display: none; }
.js .bg-purple { display: block; position: absolute; inset: 0; background: var(--purple); clip-path: circle(0 at 50% 50%); }
.js .road { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.js .zoom { display: block; position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: var(--yellow); border-radius: 12px; opacity: 0; transform-origin: 50% 50%; }
.js .stickers { display: block; position: absolute; inset: 0; }
.on-purple .stickers .doodle { filter: brightness(3); }
.stickers img { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
.js [data-a], .js .card, .js .tool, .js .box, .js .frame .part, .js .whole { opacity: 0; }
.js [data-a] { will-change: transform, opacity; }
/* until site.js runs only the opening words show, so nothing piles up while the page loads */
.js:not(.live) #stage > *:not(.s1), .js:not(.live) .bk-hero { visibility: hidden; }

.js .s1 { --fs: min(5.5vw, 10vh); }
.js .hero-lines { position: absolute; left: 6vw; top: 14vh; font-size: var(--fs); white-space: nowrap; }
.js .hero-lines .ln { transform-origin: 0 60%; }
.js .hero-lines .key { font-size: 1.32em; }
.js .hero-foot { position: absolute; left: 6vw; top: calc(14vh + 3.32 * var(--fs) * .95 + 30px); max-width: 44vw; }
.js .hero-sub { margin-top: 0; }
.js .bk-hero { position: absolute; right: 5vw; top: 13vh; width: 50vh; height: 72vh; margin: 0; aspect-ratio: auto; }
.js .bk-hero img { box-shadow: none; }

.js .note-roller { position: absolute; left: 6vw; top: 10vh; }
.js .pile { position: absolute; inset: 0; margin: 0; display: block; }
.js .w { position: absolute; white-space: nowrap; font-size: min(6.4vw, 11vh); }
.js .w.key { font-size: min(8.6vw, 15vh); }
.js .w1 { left: 8vw; top: 22vh; --rot: -4deg; --to: 3vw 6vh; }
.js .w2 { left: 44vw; top: 36vh; --rot: 3deg; --to: 60vw 12vh; }
.js .w3 { left: 8vw; top: 50vh; --rot: -2deg; --to: 2vw 64vh; }
.js .w4 { left: 30vw; top: 70vh; --rot: 4deg; --to: 48vw 82vh; }
.js .note-normal { position: absolute; right: 7vw; top: 82vh; }
.js .shove { position: absolute; left: 0; right: 0; top: 30vh; margin: 0; text-align: center; font-size: min(7.4vw, 13vh); }
.js .shove span { transform-origin: 50% 60%; }

.js .cbt { position: absolute; left: 6vw; top: 9vh; width: min(560px, 44vw); }
.js .cbt .a { margin: 8px 0 0; }
.js .open { position: absolute; right: 6vw; top: 9vh; margin: 0; text-align: right; font-size: min(4.4vw, 8vh); }
.js .box { display: block; position: absolute; left: 50%; bottom: 3vh; width: min(440px, 36vw, 52vh); margin-left: calc(min(440px, 36vw, 52vh) / -2); opacity: 1; }
.js .box img { display: block; width: 100%; }
.js .box-lid { position: absolute; left: 0; bottom: 92%; transform-origin: 6% 100%; }
.js .cards { position: absolute; inset: 0; margin: 0; display: block; }
.js .card { position: absolute; left: 0; top: 0; width: 190px; padding: 10px 14px 8px; }
.js .card b { font-size: 17px; }
.js .tools { display: block; position: absolute; inset: 0; }
.js .tool { position: absolute; left: 0; top: 0; }
.js .t1, .js .t2 { width: min(150px, 12vw); }
.js .t3 { width: min(170px, 14vw); }
.js .back { position: absolute; right: 6vw; top: 9vh; margin: 0; white-space: nowrap; text-align: right; }
.back .arrow { display: block; margin: 6px 0 0 auto; width: 80px; height: 60px; }

.js .lvl { position: absolute; left: 6vw; top: 9vh; margin: 0; font-size: min(6vw, 11vh); }
.js .checks { position: absolute; inset: 0; margin: 0; }
.js .ck { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: min(3.6vw, 6.6vh); color: #fff; }
.js .resil { position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; }
.road .sq { stroke: var(--ink); stroke-width: 3; }
.road .trail { fill: none; stroke: rgba(255, 255, 255, .22); stroke-linecap: round; stroke-linejoin: round; }
.road .done { fill: none; stroke: var(--yellow); stroke-linecap: round; stroke-linejoin: round; }
.road .cp { stroke: var(--ink); stroke-width: 4; }
.road text { font: 900 22px Poppins, sans-serif; fill: var(--ink); }

.js .got { position: absolute; left: 0; right: 0; top: 50%; text-align: center; white-space: nowrap; font-size: 100px; transform-origin: 50% 50%; }
.js .got .key { font-size: 1.15em; }
.js .got span { display: inline-block; }
.js .underline { position: absolute; left: 10%; width: 80%; top: 100%; height: .22em; }
.underline path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .ready { position: absolute; right: 7vw; top: 13vh; margin: 0; }

.js .frame { display: block; position: absolute; left: 0; top: 0; width: 2100px; height: 3000px; transform-origin: 0 0; }
.js .frame .part, .js .whole { position: absolute; display: block; max-width: none; }
.js .whole { left: 0; top: 0; width: 2100px; height: 3000px; }
.js .frame::after { content: ''; position: absolute; inset: 0; box-shadow: 0 0 0 6px rgba(34, 28, 28, var(--edge, 0)); }
.js .bk-end { display: block; position: absolute; left: 0; top: 0; width: 60vh; height: 90vh; transform-origin: 0 0; visibility: hidden; opacity: 0; }
.js .end-buy { position: absolute; left: 56vw; top: 30vh; width: 36vw; }

/* phones */
@media (max-width: 699px), (max-aspect-ratio: 85/100) {
  .js .s1 { --fs: 8vw; }
  .js .hero-lines { top: 9svh; }
  .js .hero-foot { top: calc(9svh + 3.32 * 8vw * .95 + 16px); max-width: 88vw; right: 6vw; }
  .js .hero-sub { font-size: 14px; line-height: 1.45; margin-bottom: 10px; }
  .js .when { font-size: 13px; }
  .js .bk-hero { left: 50%; right: auto; top: calc(9svh + 25vw + 170px); bottom: 5svh; height: auto; width: 76vw; margin-left: -38vw; }
  .js .note-roller { top: 9svh; font-size: 21px; left: 6vw; right: 6vw; }
  .js .w { font-size: min(11vw, 7svh); }
  .js .w.key { font-size: min(13vw, 8.4svh); }
  .js .w1 { left: 6vw; top: 18svh; --to: 6vw 47svh; } .js .w2 { left: 14vw; top: 27svh; --to: 30vw 56svh; } .js .w3 { left: 5vw; top: 36svh; --to: 4vw 65svh; } .js .w4 { display: none; }
  .js .note-normal { right: 6vw; top: 50svh; font-size: 21px; }
  .js .shove { top: 12svh; font-size: 11vw; }
  .js .cbt { top: 9svh; left: 6vw; width: 88vw; }
  .js .cbt .q { font-size: 38px; }
  .js .cbt .a { font-size: 16px; }
  .js .open { top: 10svh; left: 6vw; right: 6vw; text-align: left; font-size: 10vw; }
  .js .box { width: 80vw; margin-left: -40vw; bottom: 6svh; }
  .js .card { width: 41vw; padding: 8px 10px 6px; }
  .js .card b { font-size: 14px; }
  .js .card .hand { font-size: 15px; }
  .js .t1, .js .t2 { width: 22vw; } .js .t3 { width: 26vw; }
  .js .back { left: 6vw; right: 6vw; margin: 0; bottom: auto; top: 9svh; white-space: normal; font-size: 24px; }
  .js .lvl { top: 9svh; font-size: 10.5vw; }
  .js .ck { font-size: 7.4vw; white-space: normal; line-height: 1.05; }
  .js .got { top: 22svh; white-space: normal; line-height: 1.08; font-size: 100px; }
  .js .got span { display: block; }
  .js .ready { left: 6vw; right: 6vw; top: auto; bottom: 22svh; font-size: 22px; text-align: right; }
  .js .end-buy { left: 6vw; right: 6vw; width: auto; top: 8svh; text-align: center; }
  .js .end-title { font-size: 8vw; margin-bottom: 12px; }
  .js .end-buy p { margin: 0 0 8px; }
}

/* ---------- the sketchbook page ---------- */
.paper { position: relative; z-index: 2; background-color: var(--paper);
  background-image: linear-gradient(90deg, var(--yellow) 0 22px, transparent 22px), repeating-linear-gradient(180deg, transparent 0 33px, rgba(145, 125, 255, .22) 33px 34px);
  background-size: 100% 100%, 100% 34px; }
.paper::before { content: ''; display: block; height: 80px; background: linear-gradient(var(--yellow), rgba(255, 252, 1, 0)); }
.paper section { max-width: 1120px; margin: 0 auto; padding: 50px 7vw 60px 9vw; }
.get { display: grid; grid-template-columns: minmax(220px, 5fr) 7fr; gap: 6vw; align-items: start; }
.get-book { position: sticky; top: 90px; }
.bk-buy { width: 100%; aspect-ratio: 7 / 10; }
.marked { font: 900 clamp(34px, 4.6vw, 58px)/1 Poppins, sans-serif; margin: 0 0 16px; display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(transparent 62%, rgba(145, 125, 255, .55) 62% 88%, transparent 88%); }
.get-sub { font-weight: 700; margin-top: 22px; }
.get h3 { font-size: 30px; margin: 26px 0 6px; color: var(--purple); }
.inside { padding-left: 1.3em; }
.inside li { margin: 6px 0; }
.facts { font-weight: 700; }
.ph { font-size: 14px; color: #6a6262; font-style: italic; }
.try { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; }
.try h2, .adults h2 { font: 800 clamp(26px, 3vw, 36px)/1.15 Poppins, sans-serif; margin: 0 0 14px; }
.taped { position: relative; background: #fff; border: 2px dashed var(--grey); border-radius: 6px; min-height: 220px; display: grid; place-items: center; padding: 24px; transform: rotate(-1.5deg); }
.taped::before { content: ''; position: absolute; top: -14px; left: 50%; width: 110px; height: 28px; margin-left: -55px; background: rgba(8, 254, 223, .75); transform: rotate(3deg); }
.remind label { display: block; font-weight: 700; margin: 12px 0 6px; }
.remind .row { display: flex; gap: 10px; flex-wrap: wrap; }
.remind input { flex: 1 1 200px; min-height: 48px; border: 2.5px solid var(--ink); border-radius: 12px; padding: 0 14px; font: 16px Poppins, sans-serif; background: #fff; }
.adults details { border-bottom: 2px solid var(--ink); padding: 4px 0; max-width: 720px; }
.adults summary { cursor: pointer; font-weight: 800; font-size: 19px; min-height: 48px; display: flex; align-items: center; }
.author { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center; margin-top: 56px; }
.author-photo { position: relative; width: 200px; height: 200px; display: grid; place-items: center; text-align: center; }
.author-photo svg { position: absolute; inset: 0; fill: none; stroke: var(--purple); stroke-width: 4; stroke-linecap: round; }
.author-photo .ph { max-width: 120px; margin: 0; }
.foot { max-width: 1120px; margin: 0 auto; padding: 26px 7vw calc(var(--tape-h) + 46px) 9vw; font-size: 14px; font-weight: 600; border-top: 2px solid var(--ink); }
.foot p { margin: 0; }
@media (max-width: 760px) {
  .get, .try { grid-template-columns: 1fr; }
  .get-book { position: relative; top: 0; max-width: 240px; }
  .author { grid-template-columns: 1fr; }
}

/* ---------- concept tape ---------- */
.tape { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--tape-h); display: flex; align-items: center; gap: 8px;
  padding: 0 8px calc(env(safe-area-inset-bottom, 0px) * .5); pointer-events: none; font: 700 11px/1 Poppins, sans-serif; color: #111; }
.tape-run { flex: 1; overflow: hidden; height: 22px; display: flex; align-items: center; border-radius: 3px;
  background: rgba(250, 204, 21, .95); border-top: 2px solid #111; border-bottom: 2px solid #111; }
.tape-track { display: flex; white-space: nowrap; animation: tape 40s linear infinite; }
.tape-track span { padding: 0 1.2em; letter-spacing: .04em; text-transform: uppercase; }
.tape.paused .tape-track { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-50%); } }
.tape-pause { pointer-events: auto; flex: none; width: 44px; height: 44px; border: 0; padding: 0; border-radius: 8px; background: #111; color: #facc15; display: grid; place-items: center; cursor: pointer; }
.tape-pause span { display: grid; place-items: center; }
.tape-cta { pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #111; color: #facc15; text-decoration: none;
  height: 44px; padding: 0 12px; border-radius: 8px; font-size: 11px; line-height: 1.1; white-space: nowrap; flex: none; }
.tape-cta small { font-size: 9px; font-weight: 500; color: #fff; }
@media (max-width: 420px) { .tape-cta { padding: 0 8px; font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .tape-track { animation: none; } .btn { transition: none; } }