/* Thriving Stars - one page per book (book.html?b=<id>). Same Sunshine look as the home page. */
.bookpage{--acc:#FFE9C9;--cv:#F3E6C4}
.bookpage main{display:block}
.ico{width:1em;height:1em;flex:none}

/* ---------- top of the page: the book and its words ---------- */
.bhero{position:relative;overflow:hidden;background:var(--acc);padding:calc(68px + clamp(1.6rem,4vw,3.2rem)) max(6vw,24px) clamp(2.8rem,6vw,4.6rem)}
.bhero::before{content:"";position:absolute;left:27%;top:56%;width:min(44rem,52vw);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.5);transform:translate(-50%,-50%)}
.bhero .stars{position:absolute;inset:0;pointer-events:none;color:var(--cv)}
.bhero .stars svg{position:absolute;width:var(--w);height:var(--w);opacity:.38;animation:float 7s ease-in-out infinite}
.bhero .stars svg:nth-child(2n){animation-duration:9s;animation-delay:-3s}
.bhero .in{position:relative;max-width:76rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem 4rem;align-items:center}

/* the 3D book: closed on the cover, then it opens by itself; tap to close or open */
.stage{--P:min(19rem,22vw,40vh);--t:6px;--pg:#FBF3DC;position:relative;height:calc(var(--P)*1.42);perspective:2000px;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.stage:focus-visible{outline:3px solid var(--teal);outline-offset:6px;border-radius:24px}
.stage .bob{position:absolute;inset:0;transform-style:preserve-3d;animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.stage .mbook{top:46%}
.stage .hint{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center}
.stage .hint span{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border-radius:999px;padding:.32rem .9rem .26rem;font-weight:800;font-size:.9rem;box-shadow:0 3px 10px -4px rgba(43,35,64,.35);opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.stage .hint span.on{opacity:1;transform:none}
.stage .hint svg{width:1rem;height:1rem;color:var(--coral)}

.bwords{position:relative}
.bwords .back{display:flex;width:fit-content;align-items:center;gap:.4rem;font-weight:800;font-size:.95rem;text-decoration:none;margin-bottom:1.1rem;opacity:.85}
.bwords .back:hover{opacity:1;text-decoration:underline;text-underline-offset:.2em}
.bwords .back svg{width:1rem;height:1rem;transform:scaleX(-1)}
.helps{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border-radius:999px;padding:.38rem 1rem .32rem .6rem;font-weight:800;color:var(--teal);font-size:.98rem;box-shadow:0 3px 12px -5px rgba(43,35,64,.35)}
.helps svg{width:1.25rem;height:1.25rem;color:#FFC83D}
.bwords h1{font-size:clamp(2.4rem,4.8vw,4.1rem);margin-top:1rem;max-width:15ch;text-wrap:balance}
.bwords .by{margin-top:.55rem;font-weight:700;color:var(--muted)}
.bwords .line{margin-top:1.1rem;font-size:1.22rem;font-weight:800;line-height:1.35;max-width:32rem}
.bwords .about{margin-top:.6rem;font-size:1.1rem;max-width:33rem}
.bacts{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:1rem 1.1rem;align-items:center}
.btn.big{font-size:1.28rem;padding:1.08rem 1.9rem .98rem}
.btn.big svg{width:1.2rem;height:1.2rem}
.bfine{margin-top:1.1rem;font-size:.92rem;font-weight:700;color:var(--muted)}

/* ---------- peek inside ---------- */
.peekin .lede{max-width:40rem}
.pages{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3.4vw,3rem);max-width:66rem}
.pages li:nth-child(1){--r:-2.5deg}.pages li:nth-child(2){--r:1.5deg;margin-top:1.2rem}.pages li:nth-child(3){--r:-1deg}
.pages button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;transform:rotate(var(--r));transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.pages button:hover,.pages button:focus-visible{transform:rotate(0) translateY(-8px) scale(1.02)}
.pages img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;background:#fff;box-shadow:0 0 0 clamp(5px,.7vw,9px) #fff,0 22px 34px -16px rgba(43,35,64,.55)}
.pages .zoom{display:inline-flex;align-items:center;gap:.35rem;margin-top:1.1rem;font-weight:800;font-size:.92rem;color:var(--teal)}
.pages .zoom svg{width:1rem;height:1rem}

/* the big picture when a page is tapped */
dialog.lb{border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;color:#fff}
dialog.lb::backdrop{background:rgba(32,26,48,.86)}
.lb .wrap{position:absolute;inset:0;display:grid;place-items:center;padding:4.5rem 5rem}
.lb img{display:block;width:min(86vh,100%);max-height:100%;aspect-ratio:1;object-fit:contain;border-radius:6px;background:#fff;box-shadow:0 0 0 8px #fff,0 30px 60px rgba(0,0,0,.4)}
.lb button{position:absolute;display:grid;place-items:center;width:3.3rem;height:3.3rem;border-radius:50%;border:0;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.2)}
.lb button:hover{background:var(--sun)}
.lb button svg{width:1.4rem;height:1.4rem}
.lb .x{top:1rem;right:1rem}
.lb .pv{left:1rem;top:50%;margin-top:-1.65rem}
.lb .pv svg{transform:scaleX(-1)}
.lb .nx{right:1rem;top:50%;margin-top:-1.65rem}
.lb .count{position:absolute;left:0;right:0;bottom:1.3rem;text-align:center;font-weight:800}
@media (max-width:700px){
  .lb .wrap{padding:4.5rem .8rem 6rem}
  .lb .pv,.lb .nx{top:auto;bottom:1rem;margin-top:0}
  .lb .pv{left:calc(50% - 4.4rem)} .lb .nx{right:calc(50% - 4.4rem)}
  .lb .count{bottom:5.2rem}
}

/* ---------- read-aloud ---------- */
.listen .vbox{position:relative;margin-top:2.2rem;max-width:58rem;aspect-ratio:16/9;border-radius:30px;overflow:hidden;background:var(--cv);box-shadow:0 22px 40px -22px rgba(43,35,64,.6)}
.vbox .face-btn{position:absolute;inset:0;width:100%;border:0;padding:0;background:none;cursor:pointer;overflow:hidden}
.vbox .blur{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(22px) saturate(1.15);opacity:.85}
.vbox .cvr{position:absolute;left:50%;top:47%;height:66%;aspect-ratio:1;object-fit:cover;transform:translate(-50%,-50%) rotate(-3deg);border-radius:3px;box-shadow:0 18px 34px rgba(0,0,0,.35);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.vbox .face-btn:hover .cvr{transform:translate(-50%,-50%) rotate(0) scale(1.03)}
.vbox .play{position:absolute;left:50%;top:47%;width:5.2rem;height:5.2rem;margin:-2.6rem 0 0 -2.6rem;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;box-shadow:0 6px 0 var(--coral-d),0 14px 30px rgba(0,0,0,.3)}
.vbox .play svg{width:2.2rem;height:2.2rem;margin-left:.3rem}
.vbox .say{position:absolute;left:50%;bottom:5.5%;transform:translateX(-50%);white-space:nowrap;background:#fff;color:var(--ink);border-radius:999px;padding:.42rem 1.1rem .36rem;font-weight:800;font-size:.98rem}
.vbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.listen .yt{margin-top:1rem;font-weight:800;font-size:.95rem}

/* ---------- buy band ---------- */
.buyband .sec{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.8rem 3rem;align-items:center;padding-top:clamp(2.6rem,5vw,3.6rem);padding-bottom:clamp(2.6rem,5vw,3.6rem)}
.buyband .thumb{width:clamp(7rem,12vw,9.5rem);perspective:800px}
.buyband .thumb img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;transform:rotateY(-18deg) rotate(-2deg);box-shadow:0 16px 26px -12px rgba(43,35,64,.55)}
.buyband h2{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:none}
.buyband p{margin-top:.5rem;font-weight:700}

/* ---------- about the book (words from the Amazon listing) ---------- */
.pills{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.agepill{background:var(--ink);color:#fff;border-radius:999px;padding:.4rem 1rem .34rem;font-weight:800;font-size:.95rem}
.aboutbk .ab{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:2.5rem clamp(2rem,5vw,4.5rem);align-items:start}
.story h2{margin-bottom:.4rem}
.story p{margin-top:1rem;font-size:1.12rem;line-height:1.7;max-width:38rem}
.story p.hook{font-family:var(--head);font-weight:700;font-size:clamp(1.3rem,2vw,1.55rem);line-height:1.3;margin-top:1.2rem}
.inside{position:sticky;top:92px;background:#fff;border-radius:30px;padding:clamp(1.5rem,3vw,2.3rem);box-shadow:0 0 0 2px rgba(43,35,64,.06),0 24px 44px -26px rgba(43,35,64,.5)}
.inside h3{font-size:1.65rem}
.ticks{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.85rem}
.ticks li{display:flex;gap:.75rem;align-items:flex-start;font-weight:700;line-height:1.42}
.ticks li::before{content:"";flex:none;width:1.55rem;height:1.55rem;margin-top:-.02rem;border-radius:50%;
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/68% no-repeat}
.perfect{margin-top:1.4rem;padding:1rem 1.15rem;background:var(--acc);border-radius:18px;font-weight:700;line-height:1.45}
.inside .btn{margin-top:1.4rem;width:100%}

/* ---------- more books ---------- */
.lib.four{grid-template-columns:repeat(4,minmax(0,1fr));max-width:64rem}

@media (max-width:899px){
  .bhero{padding-top:calc(60px + 1.2rem)}
  .bhero .in{grid-template-columns:1fr;gap:.6rem}
  .bhero::before{left:50%;top:21%;width:110vw}
  .stage{--P:min(40vw,27vh,15rem)}
  .bwords{text-align:center}
  .bwords h1,.bwords .line,.bwords .about{margin-left:auto;margin-right:auto}
  .bwords .back{display:none}
  .pills{justify-content:center}
  .aboutbk .ab{grid-template-columns:1fr}
  .inside{position:static}
  .bacts{justify-content:center}
  .pages{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 6vw 24px;margin-left:calc(max(6vw,24px)*-1);margin-right:calc(max(6vw,24px)*-1);scrollbar-width:none}
  .pages::-webkit-scrollbar{display:none}
  .pages li{scroll-snap-align:center}
  .pages li:nth-child(2){margin-top:0}
  .buyband .sec{grid-template-columns:1fr;justify-items:center;text-align:center}
  .lib.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bhero .stars svg:nth-child(n+4){display:none}
  .vbox .cvr{height:54%;top:43%}
  .vbox .play{top:43%;width:4.2rem;height:4.2rem;margin:-2.1rem 0 0 -2.1rem}
  .vbox .play svg{width:1.8rem;height:1.8rem}
  .vbox .say{font-size:.8rem;padding:.3rem .8rem .26rem;bottom:4%}
}
@media (max-width:420px){ .btn.big{font-size:1.15rem;padding:1rem 1.5rem .9rem} }
@media (prefers-reduced-motion:reduce){ .stage .bob,.bhero .stars svg{animation:none} }