/* DreamsComeTrue redesign prototype — layout + motion patterns after aardvarkbookclub.com */
:root{
  --ink:#1d1640; --night:#221a5c; --violet:#3b2f8f; --white:#fff;
  --yellow:#ffd54f; --pale-yellow:#fff1a8; --soft-yellow:#fff8d6;
  --orange:#f7941d; --pale-orange:#ffc27a; --soft-orange:#ffe2c2;
  --pink:#ff5fa2; --pale-pink:#ffb3d6; --soft-pink:#ffe3f0;
  --sky:#5cc8ff; --pale-sky:#a8e2ff; --soft-sky:#e2f5ff;
  --lilac:#9b87f5; --pale-lilac:#cdbffb; --soft-lilac:#eee8ff;
  --mint:#3fd6a0; --pale-mint:#a6efd0;
  --rust:#e0582a;
  --gm:1.5em;              /* page side margin */
  --round:10em;            /* big section corner */
  --f-display:"Fredoka",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,sans-serif;
  --f-hand:"Gochi Hand","Comic Sans MS",cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}/* no sideways page scroll on phones; body alone did not stop it (21 Oct 2026) */
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-body);font-weight:600;
  font-size:clamp(8px,.72vw,13px);line-height:1.2;-webkit-font-smoothing:antialiased;overflow-x:clip}/* clip, not hidden: hidden made body a scroll box and broke the pinned "Open it up" scene (23 Oct 2026) */
@media (max-width:991px){body{font-size:clamp(8px,1.35vw,12px)}}
@media (max-width:767px){body{font-size:2.6vw}:root{--round:4.5em;--gm:1.6em}}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- type ---------- */
.h-xxl,.h-xl,.h-l,.h-m,.h-s,.h-xs{font-family:var(--f-display);font-weight:700;margin:0;letter-spacing:-.02em}
.h-xxl{font-size:10.5em;line-height:.82}
.h-xl{font-size:8em;line-height:.86}
.h-l{font-size:6.5em;line-height:.86}
.h-m{font-size:5em;line-height:.88}
.h-s{font-size:2.5em;line-height:.92}
.h-xs{font-size:1.875em;line-height:.95}
.p-l{font-size:2em;line-height:1.2;margin:0}
.p-r{font-size:1.6em;line-height:1.3;margin:0;font-weight:600}
.p-s{font-size:1.25em;line-height:1.3;margin:0}
.p-xs{font-size:1.1em;line-height:1.3;margin:0}
.hand{font-family:var(--f-hand);font-weight:400;font-size:2.4em;line-height:1;color:var(--violet)}
.hand.big{font-size:3em}
.hand .split-word{white-space:nowrap}
@media (max-width:767px){
  .h-xxl{font-size:5.6em}.h-xl{font-size:4.6em}.h-l{font-size:4.2em}.h-m{font-size:3.6em}.h-s{font-size:2.6em}
  .p-r{font-size:1.75em}.p-s{font-size:1.5em}.p-xs{font-size:1.35em}.hand{font-size:2.4em}
}

/* ---------- buttons (pill + attached arrow square) ---------- */
.btn{--bc:var(--pink);--bt:var(--white);display:inline-flex;align-items:stretch;gap:.18em;text-decoration:none;
  font-family:var(--f-body);font-weight:700;color:var(--bt);height:4em;user-select:none}
.btn__t{display:block;line-height:2.96em;background:var(--bc);border-radius:.55em;padding:0 1.15em;font-size:1.35em;letter-spacing:-.01em;white-space:nowrap}
.btn__i{display:grid;place-items:center;aspect-ratio:1;height:100%;background:var(--bc);border-radius:.55em;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.btn__i svg{width:1.1em;height:1.1em}
.btn:hover .btn__i{transform:translateX(.25em) rotate(-8deg)}
.btn.is-white{--bc:var(--white);--bt:var(--ink)}
.btn.is-violet{--bc:var(--violet);--bt:var(--white)}
.btn.is-yellow{--bc:var(--yellow);--bt:var(--ink)}
.btn.is-orange{--bc:var(--orange);--bt:var(--ink)}
.btn.is-ink{--bc:var(--ink);--bt:var(--white)}
.btn .split-char{display:inline-block}
[data-btn-text]{white-space:pre}
@media (max-width:767px){.btn{height:4.6em}.btn__t{font-size:1.55em;line-height:2.97em}}

.pill{display:inline-flex;align-items:center;background:var(--pale-yellow);color:var(--ink);border-radius:99em;padding:.55em 1em .65em;
  font-size:1.25em;font-weight:700;text-decoration:none;white-space:nowrap;transition:background-color .25s}
.pill:hover,.pill[aria-current="page"]{background:var(--yellow)}
.tag{display:inline-block;border-radius:99em;padding:.3em .7em .4em;font-size:1.05em;font-weight:700;background:var(--white);color:var(--ink);white-space:nowrap}
.tag.is-dark{background:var(--ink);color:var(--white)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1.25em var(--gm);
  pointer-events:none;transition:transform .55s cubic-bezier(.65,0,.35,1)}
.hdr.is-hidden{transform:translateY(-130%)}
.hdr>*{pointer-events:auto}
.hdr__logo{display:block;width:17em;filter:drop-shadow(0 .15em .4em rgba(0,0,0,.08))}
.hdr__logo img{width:100%;height:auto}
.hdr__nav{display:flex;gap:.5em;align-items:center;position:absolute;left:50%;transform:translateX(-50%)}
.hdr__sub{display:flex;gap:.5em;align-items:center}
.hdr .btn{height:3.4em}.hdr .btn__t{font-size:1.2em;line-height:2.83em}
.hdr__menu{display:none}
.dd{position:relative}
.dd__panel{position:absolute;top:calc(100% + .6em);left:50%;width:34em;transform:translate(-50%,.8em) scale(.96);opacity:0;visibility:hidden;
  background:var(--white);border-radius:1.6em;padding:1.2em;display:flex;flex-wrap:wrap;gap:.45em;box-shadow:0 1.5em 3em rgba(29,22,64,.18);
  transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1),visibility .25s}
.dd:hover .dd__panel,.dd:focus-within .dd__panel{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.dd__panel .pill{font-size:1.15em;background:var(--soft-yellow)}
.dd__panel .pill:hover{background:var(--yellow)}
@media (max-width:991px){
  .hdr__nav,.hdr__sub .btn{display:none}
  .hdr__menu{display:inline-flex}
  .hdr__logo{width:15em}
}
.menu{position:fixed;inset:0;z-index:60;background:var(--violet);color:var(--white);padding:7em var(--gm) 3em;display:flex;flex-direction:column;gap:1.4em;
  clip-path:inset(0 0 100% 0 round 0 0 var(--round) var(--round));transition:clip-path .7s cubic-bezier(.65,0,.35,1);overflow:auto}
.menu.is-open{clip-path:inset(0 0 0 0 round 0)}
.menu a.big{font-family:var(--f-display);font-weight:700;font-size:5em;line-height:.95;text-decoration:none}
.menu__close{position:absolute;top:1.5em;right:var(--gm)}
.menu__cats{display:flex;flex-wrap:wrap;gap:.5em}
.menu__cats .pill{font-size:1.6em}

/* ---------- loader / page curtain ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--violet);display:grid;place-items:center;
  clip-path:inset(0 0 0 0 round 0)}
/* Safety: if the scripts never run, the loader fades by itself after 3s so nobody is stuck on it. */
.loader{animation:loader-safety .5s ease 3s forwards}
@keyframes loader-safety{to{opacity:0;visibility:hidden}}
.loader__mark{width:11em;height:11em}
.loader__mark svg{width:100%;height:100%}
.loader__mark:has(.star-mark){visibility:hidden} /* no star in the middle: only the takeover stars (its shape is reused by site.js) */
html.is-loaded .loader{pointer-events:none}
.curtain{position:fixed;inset:0;z-index:99;background:var(--violet);transform:translateY(105%);border-radius:var(--round) var(--round) 0 0;pointer-events:none}

/* ---------- sections ---------- */
.sec{position:relative}
.round-b{border-radius:0 0 var(--round) var(--round);z-index:2}
.under{margin-top:calc(var(--round) * -1);padding-top:var(--round);z-index:1}
.inner-clip{margin:0 var(--gm);border-radius:5em;overflow:clip}
@media (max-width:767px){.inner-clip{border-radius:3em;margin:0 1em}}
.bg-yellow{background:var(--yellow)}.bg-pale-yellow{background:var(--pale-yellow)}.bg-soft-yellow{background:var(--soft-yellow)}
.bg-pink{background:var(--pink)}.bg-soft-pink{background:var(--soft-pink)}.bg-pale-pink{background:var(--pale-pink)}
.bg-sky{background:var(--pale-sky)}.bg-soft-sky{background:var(--soft-sky)}
.bg-lilac{background:var(--pale-lilac)}.bg-soft-lilac{background:var(--soft-lilac)}
.bg-orange{background:var(--pale-orange)}.bg-soft-orange{background:var(--soft-orange)}
.bg-mint{background:var(--pale-mint)}.bg-white{background:var(--white)}.bg-violet{background:var(--violet);color:var(--white)}
.wrap{padding:0 var(--gm)}
.center{text-align:center}
.sec-head{display:flex;flex-direction:column;align-items:center;gap:2em;text-align:center;position:relative}
.sec-head .p-r{max-width:34ch}
.note-abs{position:absolute;opacity:.85}

/* breathing blob backgrounds */
[data-blobs]{isolation:isolate}
.blobs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}
.blobs path{stroke-linejoin:round}

/* ---------- 3D hardcover (8x11 portrait) ---------- */
.book3d{--w:16em;--d:calc(var(--w) * .065);--col:#6b5bd6;position:relative;width:var(--w);aspect-ratio:8/11;transform-style:preserve-3d}
.book3d>i{position:absolute;display:block}
.book3d .bf{inset:0;transform:translateZ(calc(var(--d) / 2));border-radius:.2em .45em .45em .2em;background:var(--col) center/cover no-repeat;overflow:hidden;backface-visibility:hidden}
.book3d .bf::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(0,0,0,.32) 0,rgba(255,255,255,.22) 1.4%,rgba(0,0,0,.14) 3%,rgba(0,0,0,0) 6.5%),
             linear-gradient(115deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 38%)}
.book3d .bb{inset:0;transform:rotateY(180deg) translateZ(calc(var(--d) / 2));border-radius:.45em .2em .2em .45em;background:var(--col);filter:brightness(.8);backface-visibility:hidden}
.book3d .bs{top:0;left:calc(var(--d) / -2);width:var(--d);height:100%;transform:rotateY(-90deg);background:linear-gradient(90deg,var(--col),color-mix(in srgb,var(--col) 70%,#000));border-radius:.2em}
.book3d .bp{top:1.2%;right:calc(var(--d) / -2 + .25em);width:var(--d);height:97.6%;transform:rotateY(90deg);
  background:repeating-linear-gradient(90deg,#fbf7ee 0 .12em,#e9e2d2 .12em .2em)}
.book3d .bt{left:.1em;top:calc(var(--d) / -2 + .2em);width:calc(100% - .45em);height:var(--d);transform:rotateX(90deg);
  background:repeating-linear-gradient(0deg,#fbf7ee 0 .12em,#e6dfcf .12em .2em)}
.book3d .bbo{left:.1em;bottom:calc(var(--d) / -2 + .2em);width:calc(100% - .45em);height:var(--d);transform:rotateX(-90deg);background:#ddd5c3}
.shadow{position:absolute;left:8%;right:8%;bottom:-6%;height:10%;border-radius:50%;background:rgba(29,22,64,.35);filter:blur(1.2em);z-index:-1}

/* flat cover with hardcover hinge (used in cards) */
.cover{position:relative;aspect-ratio:8/11;border-radius:.35em .8em .8em .35em;overflow:hidden;background:#eee;box-shadow:0 .5em 1.2em rgba(29,22,64,.22)}
.cover img{width:100%;height:100%;object-fit:cover}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.3) 0,rgba(255,255,255,.25) 1.5%,rgba(0,0,0,.12) 3.2%,rgba(0,0,0,0) 7%)}

/* personalised name chip in titles */
.tok{position:relative;white-space:nowrap}
.tok.is-generic{opacity:.9;font-style:normal}

/* ---------- hero ---------- */
.hero{min-height:max(100svh,58em);overflow:hidden;display:flex;align-items:stretch}
.hero__content{position:relative;z-index:3;padding:15em var(--gm) 12em;display:flex;flex-direction:column;align-items:flex-start;gap:2.2em;max-width:100%}
.hero__title{max-width:9ch}
.hero__title .line{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__p{max-width:31ch}
.hero__ctas{display:flex;gap:.8em;flex-wrap:wrap}
.hero__books{position:absolute;inset:0;z-index:2;pointer-events:none;perspective:1600px}
.hb{position:absolute;transform-style:preserve-3d}
.hb .hp,.hb .hf{transform-style:preserve-3d}
.hb .hf{position:relative}
[data-spin]{position:relative;transform-style:preserve-3d}
.hv{position:absolute;left:52%;top:21%;width:min(31em,40vw);pointer-events:auto;cursor:pointer;display:block;perspective:1200px}
.hv__p,.hv__f{transform-style:preserve-3d}
.hv__f{position:relative;border-radius:1.6em;overflow:hidden;box-shadow:0 2em 5em rgba(10,6,40,.55),0 0 4em rgba(255,213,79,.18);background:#120c33}
.hv video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
@media (max-width:767px){.hero__books{height:auto!important;padding-bottom:3em}.hv{position:relative;left:auto;top:auto;width:auto;margin:1em var(--gm) 0}}
.hero__note{position:absolute;right:5em;bottom:5em;z-index:4;transform:rotate(5deg);text-align:center;max-width:9ch}
.hero__badge{position:absolute;right:var(--gm);bottom:2.5em;z-index:4;width:8em;height:8em}
@media (max-width:767px){
  .hero{flex-direction:column;min-height:0}
  .hero__content{padding:11em var(--gm) 2em}
  .hero__books{position:relative;inset:auto;height:44em;flex:none}
  .hero__note{right:auto;left:var(--gm);bottom:3em}
}

/* ---------- book slider ---------- */
.books{padding-bottom:5em;overflow:clip}
.books__head{padding:4em var(--gm) 3em}
.books__note{position:absolute;left:7%;top:2.5em;transform:rotate(-10deg);max-width:11ch;text-align:center}
.slider-ctrl{display:flex;justify-content:flex-end;gap:.6em;padding:0 2.5em 2em;position:relative;z-index:3}
.slider-ctrl button{width:4.5em;height:4.5em;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;transition:opacity .3s,background-color .3s,transform .3s}
.slider-ctrl button svg{width:1.4em;height:1.4em}
.slider-ctrl button.prev svg{transform:rotate(180deg)}
.slider-ctrl button.is-disabled{background:#cfcfd6;pointer-events:none}
.slider-ctrl button:hover{transform:scale(1.08)}
.slider{position:relative;touch-action:pan-y;cursor:grab;user-select:none;padding:3em 0 4em}
.slider.is-dragging{cursor:grabbing}
.slider__track{display:flex;align-items:center;padding:0 1em;will-change:transform}
.slider__item{flex:none;width:26em;padding:0 2em}
.slider.is-tight .slider__item{width:24em;padding:0 1.2em}
@media (max-width:767px){.slider__item{width:24em;padding:0 1.2em}.slider-ctrl{padding-right:var(--gm)}}

.bcard{--c:var(--pink);--k:var(--white);display:block;text-decoration:none;color:var(--k);position:relative;-webkit-user-drag:none}
.bcard__in{background:var(--c);border-radius:2em;padding:1.1em 1.1em 1.6em;display:flex;flex-direction:column;gap:1em;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.bcard:hover .bcard__in{transform:translateY(-.6em) rotate(var(--hr,-1.5deg))}
.bcard .cover{border-radius:.35em 1em 1em .35em}
.bcard img{pointer-events:none;-webkit-user-drag:none}
.bcard__tags{display:flex;flex-wrap:wrap;gap:.3em}
.bcard__title{font-family:var(--f-display);font-weight:700;font-size:2.15em;line-height:.95;letter-spacing:-.015em;margin:0;hyphens:auto}
.bcard__sub{font-size:1.15em;line-height:1.25;opacity:.88;margin:0}
.bcard__bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:1em}
.bcard__price{font-size:1.1em;font-weight:700;opacity:.9;white-space:nowrap}

/* ---------- how it works (fanned cards) ---------- */
.how{padding:8em 0 9em}
.how__head{display:flex;justify-content:space-between;align-items:flex-start;padding:0 4em;gap:2em;position:relative}
.how__note{position:absolute;left:28em;top:1.4em;transform:rotate(-6deg);max-width:12ch}
.how__cards{display:flex;justify-content:center;padding:6em 4em 0;position:relative}
.how__card{flex:none;width:30em;margin:0 -1.2em;border-radius:2.2em;padding:2em 2em 2.6em;display:flex;flex-direction:column;gap:1.2em;color:var(--ink);
  box-shadow:0 1.6em 2.4em -1em rgba(29,22,64,.25);will-change:transform}
.how__card .hand{color:var(--ink);text-align:center;font-size:2.6em}
.how__art{height:12em;display:flex;justify-content:center;align-items:center;overflow:visible}
.how__art svg{height:100%;width:auto;max-width:100%;overflow:visible}
.how__inner{display:flex;flex-direction:column;gap:.9em}
.how__card .p-s{font-weight:600}
@media (max-width:991px){
  .how__head{flex-direction:column;padding:0 var(--gm)}
  .how__note{position:static;margin-top:-1em}
  .how__cards{flex-direction:column;align-items:center;padding:4em var(--gm) 0;gap:0}
  .how__card{width:min(100%,34em);margin:-1.2em 0}
}

/* ---------- open-the-book pinned scroll ---------- */
.open{height:340vh;position:relative}
.open__stick{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;margin:0 var(--gm);border-radius:5em}
@media (max-width:767px){.open__stick{margin:0 1em;border-radius:3em}}
.open__title{position:absolute;top:12vh;left:0;right:0;text-align:center;z-index:3;padding:0 var(--gm)}
.open__title .h-l{display:block}
.open__stage{position:relative;z-index:2;perspective:2200px;width:min(64vw,96vh);margin-top:16vh}
.ob{position:relative;width:100%;aspect-ratio:1400/939;transform-style:preserve-3d}
.ob__spread{position:absolute;inset:0;border-radius:.6em;overflow:hidden;box-shadow:0 2em 4em rgba(29,22,64,.3)}
.ob__spread img{width:100%;height:100%;object-fit:cover}
.ob__spread::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:6%;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.18) 45%,rgba(0,0,0,.24) 50%,rgba(0,0,0,.18) 55%,rgba(0,0,0,0))}
.ob__left-mask{position:absolute;top:0;bottom:0;left:0;width:50%;z-index:1;background:transparent}
.ob__cover{position:absolute;top:-1.2%;bottom:-1.2%;left:50%;width:51.2%;transform-origin:0 50%;transform-style:preserve-3d;z-index:4}
.ob__cover>div{position:absolute;inset:0;backface-visibility:hidden;border-radius:.3em .8em .8em .3em;overflow:hidden}
.ob__front{background:center/cover no-repeat}
.ob__front::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.3) 0,rgba(255,255,255,.2) 1.6%,rgba(0,0,0,.1) 3.4%,rgba(0,0,0,0) 7%)}
.ob__inside{transform:rotateY(180deg);background:var(--soft-yellow);
  background-image:radial-gradient(circle at 30% 30%,rgba(255,213,79,.5) 0 .25em,transparent .3em),radial-gradient(circle at 70% 60%,rgba(255,95,162,.35) 0 .2em,transparent .25em);background-size:3em 3em,4em 4em}
.ob__notes .hand{position:absolute;z-index:5;white-space:nowrap}
.open__end{position:absolute;bottom:2.5vh;left:0;right:0;display:flex;justify-content:center;z-index:5}
@media (max-width:767px){.open{height:260vh}.open__stage{width:88vw;margin-top:6vh}.ob__notes .hand{font-size:1.9em}}

/* ---------- categories list (genre interaction) ---------- */
.cats{padding:12em var(--gm) 12em;overflow:hidden}
.cats__head{text-align:center;margin-bottom:1.5em}
.cats__list{list-style:none;margin:0;padding:0;text-align:center;position:relative;z-index:2}
.cats__list li{display:block}
.cats__list a{display:inline-block;font-family:var(--f-display);font-weight:700;font-size:7.2em;line-height:.98;letter-spacing:-.025em;text-decoration:none;color:var(--ink);
  transition:color .25s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.cats__list a sup{font-family:var(--f-body);font-size:.22em;vertical-align:top;position:relative;top:.6em;margin-left:.15em;opacity:.7}
.cats__list a:hover{color:var(--white);transform:scale(1.03) rotate(-1deg)}
.cats__more{font-family:var(--f-display);font-weight:700;font-size:7.2em;line-height:1;opacity:.5}
.cats__float{position:absolute;left:0;top:0;width:14em;z-index:3;pointer-events:none;transform:scale(0)}
.cats__float .cover{box-shadow:0 1.2em 2.4em rgba(29,22,64,.3)}
@media (max-width:767px){.cats__list a,.cats__more{font-size:4.2em}.cats__float{display:none}}

/* ---------- why us (spinning ring + stickers) ---------- */
.why{padding:10em var(--gm) 12em;overflow:hidden;min-height:72em;display:grid;place-items:center}
.why__ring{position:relative;width:46em;height:46em;z-index:2}
.why__ring svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 28s linear infinite}
.why__ring .mark{position:absolute;inset:22%;}
@keyframes spin{to{transform:rotate(360deg)}}
.stick{position:absolute;z-index:3;display:inline-block;font-family:var(--f-display);font-weight:700;font-size:3.4em;line-height:1;padding:.25em .55em .32em;border-radius:99em;white-space:nowrap;
  box-shadow:0 .25em 0 rgba(29,22,64,.18)}
.why__stage{position:relative;width:100%;max-width:150em;display:grid;place-items:center}
@media (max-width:767px){
  .why{min-height:0;padding:7em var(--gm) 9em}
  .why__ring{width:30em;height:30em}
  .why__stage{display:flex;flex-direction:column;align-items:center;gap:1em}
  .stick{position:relative;inset:auto!important;font-size:2.6em}
}

/* ---------- faq ---------- */
.faq{padding:12em var(--gm) 10em;overflow:hidden}
.faq__list{max-width:62em;margin:4em auto 3em;display:flex;flex-direction:column;gap:.6em;position:relative;z-index:2}
.acc{background:var(--soft-sky);border-radius:1em;overflow:hidden}
.acc:nth-child(3n+2){background:var(--soft-pink)}.acc:nth-child(3n){background:var(--soft-yellow)}
.acc__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1em;text-align:left;padding:1.2em 1.4em;font-size:1.5em;font-weight:700}
.acc__q i{flex:none;width:1em;height:1em;position:relative;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.acc__q i::before,.acc__q i::after{content:"";position:absolute;left:0;right:0;top:50%;height:.14em;margin-top:-.07em;background:currentColor;border-radius:1em}
.acc__q i::after{transform:rotate(90deg)}
.acc.is-open .acc__q i{transform:rotate(135deg)}
.acc__a{height:0;overflow:hidden}
.acc__a p{margin:0;padding:0 1.4em 1.4em;font-size:1.4em;line-height:1.4;font-weight:500;max-width:52em}

/* ---------- gift (curved tagline) ---------- */
.gift{padding:2em 0 10em;overflow:hidden;position:relative}
.curve{width:100%;overflow:visible;display:block;margin-bottom:-4em}
.curve text{font-family:var(--f-display);font-weight:700;fill:var(--ink);letter-spacing:-.02em}
.gift__body{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 var(--gm);gap:4em}
.gift__copy{padding-left:8%;display:flex;flex-direction:column;gap:2em;align-items:flex-start;max-width:44em}
.gift__visual{display:grid;place-items:center;perspective:1600px;min-height:46em}
@media (max-width:767px){.gift__body{grid-template-columns:1fr}.gift__copy{padding-left:0}.gift__visual{min-height:38em}}

/* ---------- ribbons (badge) ---------- */
.ribbons{position:relative;height:30em;overflow:hidden;z-index:3}
.ribbon{position:absolute;left:-5%;right:-5%;display:flex;overflow:hidden;padding:.9em 0 1.1em}
.ribbon:nth-child(1){top:4em;background:var(--pink);transform:rotate(-2deg)}
.ribbon:nth-child(2){top:12em;background:var(--pale-sky);transform:rotate(-4.7deg)}
.ribbon__row{display:flex;flex:none;gap:1.4em;padding-right:1.4em;animation:marq 26s linear infinite}
.ribbon:nth-child(2) .ribbon__row{animation-direction:reverse}
.ribbon span{font-family:var(--f-display);font-weight:700;font-size:5.2em;line-height:1;white-space:nowrap;color:var(--night)}
.ribbon span.star{color:var(--white)}
@keyframes marq{to{transform:translateX(-100%)}}
@media (max-width:767px){.ribbons{height:20em}.ribbon span{font-size:3.4em}.ribbon:nth-child(2){top:9em}}

/* ---------- formats ---------- */
.formats{padding:10em var(--gm) 14em;overflow:clip}
.formats__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4em;margin-top:5em;position:relative;z-index:2}
.fmt{background:var(--white);border-radius:2em;padding:1.6em 1.4em 1.8em;display:flex;flex-direction:column;gap:.8em;align-items:flex-start;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;box-shadow:0 .4em 0 rgba(29,22,64,.08)}
.fmt:hover{transform:translateY(-.8em) rotate(-2deg);box-shadow:0 1.4em 2em -.6em rgba(29,22,64,.2)}
.fmt:nth-child(even):hover{transform:translateY(-.8em) rotate(2deg)}
.fmt__art{height:9em;width:100%;display:grid;place-items:center}
.fmt__art svg{height:100%;width:auto}
.fmt__name{font-family:var(--f-display);font-weight:700;font-size:2.1em;line-height:.95}
.fmt__price{font-family:var(--f-display);font-weight:700;font-size:3.2em;line-height:1;color:var(--violet)}
.fmt__p{font-size:1.15em;line-height:1.3;font-weight:500;margin:0}
.fmt.is-plus{background:var(--soft-lilac)}
@media (max-width:991px){.formats__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.formats__grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- create your own (feature) ---------- */
.custom{padding:12em var(--gm) 14em;overflow:clip}
.custom__flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:2em;margin-top:6em;position:relative;z-index:2}
.custom__arrow{font-family:var(--f-hand);font-size:5em;color:var(--violet)}
.custom__col{display:flex;flex-direction:column;align-items:center;gap:1.4em;text-align:center}
.photo{width:12em;background:var(--white);padding:.7em .7em 2.6em;border-radius:.4em;box-shadow:0 1em 2em rgba(29,22,64,.18)}
.photo>div{aspect-ratio:1;border-radius:.2em;display:grid;place-items:center}
.photo svg{width:62%;height:62%}
.photos{position:relative;height:22em;width:26em}
.photos .photo{position:absolute}
.idea{width:24em;border-radius:1.4em;padding:1.4em 1.6em;text-align:left;box-shadow:0 1em 2em -1em rgba(29,22,64,.3)}
.idea .p-xs{opacity:.85;margin-top:.4em;font-weight:500}
.idea b{font-family:var(--f-display);font-size:1.9em;line-height:1;display:block}
.ideas{display:flex;flex-direction:column;gap:.6em;align-items:center}
@media (max-width:991px){.custom__flow{grid-template-columns:1fr;justify-items:center}.custom__arrow{transform:rotate(90deg)}}

/* ---------- footer (parallax reveal) ---------- */
.footer{background:var(--violet);color:var(--white);margin-top:calc(var(--round) * -1);padding-top:var(--round);position:relative;overflow:hidden;z-index:0}
.footer__top{padding:7em var(--gm) 4em;display:grid;grid-template-columns:1.2fr 1fr 1.3fr;gap:3em;position:relative;z-index:2}
.footer__logo{width:19em;background:var(--white);border-radius:2em;padding:1.2em 1.6em}
.footer__nav{display:flex;flex-direction:column;gap:.7em}
.footer__nav a{font-family:var(--f-display);font-weight:700;font-size:2.4em;line-height:1;text-decoration:none}
.footer__nav a:hover{color:var(--yellow)}
.footer form{display:flex;flex-direction:column;gap:1em}
.footer label{font-family:var(--f-display);font-weight:700;font-size:2.4em;line-height:1}
.footer .field{display:flex;gap:.4em}
.footer input{flex:1;min-width:0;font:inherit;font-size:1.4em;padding:.8em 1em;border-radius:.6em;border:0;background:rgba(255,255,255,.12);color:var(--white)}
.footer input::placeholder{color:rgba(255,255,255,.65)}
.footer__visual{position:absolute;right:-4em;bottom:-14em;width:44em;z-index:1;pointer-events:none;opacity:.95}
.footer__bottom{background:var(--ink);padding:1em var(--gm) 1.2em;display:flex;justify-content:space-between;gap:1em;font-size:1.1em;position:relative;z-index:2;flex-wrap:wrap}
.footer__bottom span{opacity:.6}
.footer__overlay{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:3}
@media (max-width:767px){.footer__top{grid-template-columns:1fr}.footer__visual{width:30em;bottom:-10em}}

/* ---------- inner pages ---------- */
.hero-xs{padding:17em var(--gm) 8em;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2.4em;overflow:hidden}
.hero-xs .h-xl{max-width:14ch}
.hero-xs .p-r{max-width:38ch}
.toolbar{display:flex;flex-direction:column;align-items:center;gap:1.4em;padding:5em var(--gm) 2em;position:relative;z-index:3}
.search{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}
.field-big{font:inherit;font-size:1.6em;font-weight:700;padding:.75em 1.1em;border-radius:99em;border:.14em solid var(--ink);background:var(--white);color:var(--ink);min-width:16em}
.field-big:focus{outline:none;box-shadow:0 0 0 .25em var(--yellow)}
.filters{display:flex;gap:.45em;flex-wrap:wrap;justify-content:center;max-width:120em}
.filters .pill{cursor:pointer;background:var(--soft-yellow)}
.filters .pill.is-active{background:var(--ink);color:var(--white)}
.filters--who{align-items:center;margin-top:-.6em}
.filters__label{font-weight:700;margin-right:.3em}
.filters--who .pill{background:var(--white);box-shadow:inset 0 0 0 2px var(--ink)}
.filters--who .pill.is-active{background:var(--ink);color:var(--white)}
.row-head{display:flex;align-items:baseline;justify-content:space-between;gap:2em;padding:4em var(--gm) 0}
.row-head a{font-weight:700;font-size:1.4em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(22em,1fr));gap:3em 2em;padding:3em var(--gm) 8em}
.grid .bcard:nth-child(odd) .bcard__in{transform:rotate(-1.2deg)}
.grid .bcard:nth-child(even) .bcard__in{transform:rotate(1.2deg)}
.grid .bcard:hover .bcard__in{transform:translateY(-.6em) rotate(0)}
@media (max-width:767px){.grid{grid-template-columns:1fr 1fr;gap:2em 1em}.grid .bcard__title{font-size:1.9em}}
.empty{text-align:center;padding:4em var(--gm);font-size:1.6em}

/* book page */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:4em;padding:4em var(--gm) 8em;align-items:start}
.detail__visual{position:sticky;top:8em;display:grid;place-items:center;perspective:1800px;min-height:62em}
.detail__info{display:flex;flex-direction:column;gap:2.2em;padding-right:4%}
.glance{display:flex;flex-wrap:wrap;gap:.45em}
.glance .tag{font-size:1.3em;background:var(--soft-yellow)}
.cast{display:flex;flex-wrap:wrap;gap:.5em}
.cast span{display:inline-flex;align-items:center;gap:.4em;background:var(--soft-sky);border-radius:99em;padding:.45em .9em .5em;font-size:1.35em;font-weight:700}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.opt{position:relative;display:flex;flex-direction:column;gap:.3em;padding:1.1em 1.1em 1.2em;border-radius:1.2em;background:var(--white);border:.15em solid #e5e1f3;cursor:pointer;text-align:left;
  transition:border-color .2s,transform .4s cubic-bezier(.34,1.56,.64,1),background-color .2s}
.opt:hover{transform:translateY(-.25em)}
.opt b{font-size:1.35em}
.opt span{font-family:var(--f-display);font-weight:700;font-size:2em;color:var(--violet);line-height:1}
.opt input{position:absolute;opacity:0}
.opt:has(input:checked){border-color:var(--ink);background:var(--soft-yellow)}
.buy{display:flex;align-items:center;gap:1.4em;flex-wrap:wrap}
.buy__total{font-family:var(--f-display);font-weight:700;font-size:4em;line-height:1}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.perk{border-radius:1.4em;padding:1.2em;display:flex;flex-direction:column;gap:.4em}
.perk b{font-family:var(--f-display);font-size:1.8em;line-height:1}
.perk p{margin:0;font-size:1.2em;line-height:1.3;font-weight:500}
.excerpt{border-left:.3em solid var(--pink);padding:.2em 0 .2em 1.2em}
.excerpt p{margin:0;font-size:1.7em;line-height:1.4;font-weight:500;font-style:italic}
@media (max-width:991px){.detail{grid-template-columns:1fr}.detail__visual{position:relative;top:0;min-height:44em}.opts,.perks{grid-template-columns:1fr 1fr}}
.inside{padding:9em var(--gm) 10em}
.inside__stage{max-width:110em;margin:4em auto 0;perspective:2200px;cursor:pointer}
.inside__hint{text-align:center;margin-top:2em}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .open{height:auto}.open__stick{position:relative;height:auto;padding:12em 0}
}
/* SplitText line masks: keep descenders */
.line-mask{padding-bottom:.14em;margin-bottom:-.14em}
@media (max-width:767px){
  .hero__note{display:none}
  .books__note{position:static;transform:rotate(-4deg)}
  .ob__notes .hand:nth-child(3){display:none}
  .ob__notes .hand:nth-child(1){left:0!important}
}

/* BLOB BURST between the hero and the stories (after test.kind.kids/page-c "Pick a need"): the section tucks
   under the hero's round bottom in the hero's deepest wave colour, pins for a screen, and two blobs (pink, then
   white) swell from the bottom centre and spin until white covers the screen; then the heading fades in. */
.burst{position:relative;z-index:1;margin-top:calc(var(--round) * -1);height:130vh;background:#341e58}
.burst__pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:var(--round)}
.burst__pin.open{background:var(--white)}
.burst__blob{position:absolute;left:50%;top:88%;width:40vmax;height:40vmax;pointer-events:none;
  border-radius:42% 58% 70% 30% / 45% 45% 55% 55%;will-change:transform}
.burst__blob.b1{background:var(--pink);
  transform:translate(-50%,-50%) scale(calc(min(var(--ar,0) * 1.5, 1) * var(--cov,6.5))) rotate(calc(var(--ar,0) * 160deg))}
.burst__blob.b2{background:var(--white);border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;
  transform:translate(-50%,-50%) scale(calc(clamp(0, (var(--ar,0) - .25) / .6, 1) * var(--cov,6.5))) rotate(calc(var(--ar,0) * 140deg))}
/* the whole stories block sits in the pinned screen, below the hero's round bottom: the heading rises in with the white blob, then the books and button */
.burst__body{position:relative;z-index:2;width:100%;padding:0;transform:scale(var(--fit,1))}
.burst .books__head{opacity:0;transform:translateY(3em);transition:opacity .45s ease-out,transform .6s cubic-bezier(.22,1,.36,1)}
.burst .slider-ctrl,.burst .slider,.burst .center{opacity:0;transform:translateY(5em);transition:opacity .45s ease-out .08s,transform .7s cubic-bezier(.22,1,.36,1) .08s}
.burst__pin.rh-in .books__head,.burst__pin.rc-in .slider-ctrl,.burst__pin.rc-in .slider,.burst__pin.rc-in .center{opacity:1;transform:none}
.burst .books__head{padding:0 var(--gm) 1.5em}
.burst .books__note{top:-1em}
.burst .slider-ctrl{position:absolute;right:var(--gm);top:0;margin:0;z-index:3}
.burst__body{transform-origin:50% 50%}
@media (prefers-reduced-motion:reduce){.burst{height:auto}.burst__pin{position:relative;height:auto;padding:6em 0;background:var(--white)}.burst__blob{display:none}.burst__body,.burst .books__head,.burst .slider-ctrl,.burst .slider,.burst .center{opacity:1;transform:none}}

/* New logo on every page (same as the homepage, 11 Oct 2026). */
.hdr__logo{width:11em;filter:none}
.footer__logo{width:13em;height:auto;padding:1em} /* new logo keeps its shape in the footer */
/* Stories shelves: less white space (owner, 11 Oct 2026). */
.row .row-head{align-items:center;padding:2.5em var(--gm) 0}
.row-tools{display:flex;align-items:center;gap:1.4em}
.row-tools .slider-ctrl{padding:0}
.row .slider{padding:1.2em 0 1.5em}
.toolbar{padding-bottom:0}
/* Footer colours swapped: cream footer, so the logo sits on it without a white box. */
.footer{background:#fef3e0;color:var(--ink)}
.footer__logo{background:none;border-radius:0;padding:0;width:12em}
.footer__nav a:hover{color:var(--pink)}
.footer input{background:var(--white);color:var(--ink);border:2px solid var(--ink)}
.footer input::placeholder{color:rgba(29,22,64,.55)}
.footer__visual path[fill="#fff"]{fill:var(--violet)}
.footer__bottom{color:var(--white)}

/* the real photos the book was drawn from, taped beside the open book */
.ob__pol{position:absolute;z-index:5;margin:0;width:17%;background:#fff;padding:.55em .55em 1.7em;box-shadow:0 .6em 1.4em rgba(29,22,64,.28);transform:rotate(var(--r,0deg))}
.ob__pol img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.ob__pol::before{content:"";position:absolute;left:50%;top:-.7em;width:42%;height:1.3em;transform:translateX(-50%) rotate(-4deg);background:rgba(255,213,79,.85)}
@media (max-width:767px){.ob__pol{width:24%;top:-30%!important}.ob__pol:nth-of-type(1){left:2%!important}.ob__pol:nth-of-type(2){left:38%!important}.ob__pol:nth-of-type(3){left:74%!important}}

/* Rhyming edition starburst: top-right corner of the cover (as on the Etsy post 1 cards) */
.bcard__in{position:relative}
.rburst{position:absolute;top:-1.9em;right:-1.9em;width:7.2em;height:7.2em;z-index:4;display:flex;align-items:center;justify-content:center;background:var(--night);color:var(--yellow);transform:rotate(8deg);pointer-events:none;
  clip-path:polygon(50% 0%,61% 12%,75% 4%,79% 19%,95% 18%,91% 33%,100% 45%,90% 56%,98% 70%,83% 75%,82% 91%,67% 88%,57% 100%,46% 90%,32% 98%,27% 83%,11% 84%,14% 68%,1% 58%,10% 46%,2% 32%,17% 27%,16% 11%,32% 14%,40% 1%)}
.rburst span{font-family:"Baloo 2",var(--f-display);font-weight:800;font-size:1.5em;line-height:.9;text-align:center}
.rburst.is-on-dark{background:var(--yellow);color:var(--night)}
[data-book-visual] [data-spin]{position:relative}
.rburst.is-big{top:-4.5em;right:-5.5em;width:10em;height:10em}
.rburst.is-big span{font-size:2.2em}

/* Book page synopsis */
.synopsis p{margin:0;font-size:1.15em;line-height:1.55}

/* ---------- mobile fixes (owner, 14 Oct 2026) ---------- */
@media (max-width:767px){
  /* Logo used to float over the headline once you scrolled: a white bar and a smaller logo behind it now. */
  .hdr{transition:transform .55s cubic-bezier(.65,0,.35,1),background-color .3s,box-shadow .3s,padding .3s}
  .hdr__logo{transition:width .3s}
  .hdr.is-scrolled{background:rgba(255,255,255,.94);box-shadow:0 .2em 1.2em rgba(29,22,64,.08);padding-top:.6em;padding-bottom:.6em}
  .hdr.is-scrolled .hdr__logo{width:6.5em}
  .hero__content{padding-top:13em}
  /* Shelf heading on its own line; "See all" and the arrows on the line below. */
  .row-head,.row .row-head{flex-wrap:wrap;gap:1em 1.4em}
  .row-head h2{flex:1 1 100%}
  .row-tools{width:100%;justify-content:space-between}
  .row-tools a{white-space:nowrap}
  /* The shelves run off the right edge; never let the page itself pan sideways. On BODY, not html: clipping html
     made body the scroll box and broke every sticky section (the opening book, the pink burst) on phones. */
  body{overflow-x:clip}
}

/* ---------- book page (owner, 14 Oct 2026) ---------- */
.bookcard{width:min(30em,100%);margin:0 auto}
.bookcard .bcard__in{padding:1.4em}
.bookcard .cover img{display:block;width:100%;height:auto}
.ob__spread,.ob__cover>div{border-radius:0}
.opt__inc{list-style:none;margin:.3em 0 0;padding:0;display:flex;flex-direction:column;gap:.25em;font-size:1.12em;font-weight:600;line-height:1.3;color:var(--ink)}
.opt__inc li{position:relative;padding-left:1.35em}
.opt__inc li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:var(--violet)}
.fmt .opt__inc{font-size:1.15em;margin-top:.6em}
.ob__leaf{position:absolute;top:0;bottom:0;left:50%;width:50%;transform-origin:0 50%;transform-style:preserve-3d;z-index:3}
.ob__leaf>div{position:absolute;inset:0;backface-visibility:hidden}
.ob__lb{transform:rotateY(180deg)}
/* book page "Look inside": the main site's flipbook (page-flip) */
.fb-wrap{width:min(78vw,120vh);margin:0 auto}
.fb-page{background:#fff}
.fb-page__in{width:100%;height:100%;background-repeat:no-repeat}
.fb-back{background:var(--night)}
@media (max-width:767px){.fb-wrap{width:88vw}}
/* "Most popular" on the Hardcover + Audiobook + Song card, as on the Christmas landing pages (owner 13 + 22 Oct 2026) */
.opt__pop,.opt .opt__pop{position:absolute;top:-11px;right:1em;background:#221a5c;color:#fff;font-family:var(--f-body,Figtree),system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;border-radius:999px;padding:3px 10px;line-height:1.3;z-index:1}
.fmt{position:relative}
.opt:has(.opt__pop),.fmt:has(.opt__pop){padding-top:1.9em}
/* Header "start your book" switch: both doors together (owner 23 Oct 2026, Claude Design option A) */
.hdr__pick{display:flex;flex-direction:column;align-items:center;gap:.15em}
.hdr__pick-note{font-size:1.15em;line-height:1;color:var(--violet)}
.hdr__switch{display:flex;gap:.3em;padding:.3em;border:3px solid var(--ink);border-radius:99em;background:var(--white)}
.hdr__switch a{font:600 1.05em/1 var(--f-display);padding:.75em 1.15em;border-radius:99em;text-decoration:none;white-space:nowrap}
.hdr__switch a:first-child{background:var(--ink);color:var(--white)}
.hdr__switch a:last-child{background:var(--yellow);color:var(--ink)}
.hdr__switch a:hover{filter:brightness(1.08)}
@media (max-width:1100px){.hdr__pick-note{display:none}}
@media (max-width:767px){.hdr__pick{display:none}}