:root{
  --sky:#C9EBF9; --sky-deep:#8FD4F2; --sky-soft:#E8F7FE;
  --grass:#58B368; --grass-dark:#3E9B4F; --grass-soft:#E3F5E6;
  --sun:#FFC93C; --sun-dark:#E8A90B;
  --candy:#FF6B4A; --candy-dark:#D94E2B; --candy-soft:#FFE9E2;
  --cream:#FFF9EC; --paper:#FFFDF7;
  --ink:#33313B; --ink-soft:#5B5766;
  --gray:#9AA3B2; --purple:#9B7EDE; --night:#3B3A5C;
  --radius:28px;
  --shadow:0 8px 0 rgba(51,49,59,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito',system-ui,sans-serif;color:var(--ink);
  background:var(--cream);font-size:1.15rem;line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.chunky{font-family:'Fredoka','Baloo 2',system-ui,sans-serif;font-weight:700;line-height:1.15;letter-spacing:.01em}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- floating sky bits ---------- */
.sky{position:relative;overflow:hidden}
.cloud{position:absolute;background:#fff;border-radius:999px;opacity:.95;animation:drift linear infinite;z-index:0}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
/* Sky band rule: in every .sky section the drifting decor (clouds, balloons,
   sparkles, sun) stays inside the top 132px band, above the content. Heroes pad
   their top by 132px to hold the band, so decor never crosses text at any width
   or at any point in its animation. Keep all decor lanes within 0-132px. */
.cloud.c1{width:130px;height:42px;top:28px;animation-duration:38s}
.cloud.c1::before{width:56px;height:56px;top:-26px;left:22px}
.cloud.c1::after{width:40px;height:40px;top:-18px;left:66px}
.cloud.c2{width:90px;height:32px;top:78px;animation-duration:52s;animation-delay:-18s;opacity:.8}
.cloud.c2::before{width:42px;height:42px;top:-20px;left:16px}
.cloud.c2::after{width:30px;height:30px;top:-14px;left:48px}
.cloud.c3{width:160px;height:48px;top:84px;animation-duration:64s;animation-delay:-30s;opacity:.7}
.cloud.c3::before{width:64px;height:64px;top:-30px;left:30px}
.cloud.c3::after{width:46px;height:46px;top:-22px;left:84px}
@keyframes drift{from{left:-220px}to{left:110%}}
.sparkle{position:absolute;color:var(--sun-dark);font-size:1.4rem;animation:twinkle 2.6s ease-in-out infinite;z-index:0}
.sparkle.s1{top:20px;left:9%}
.sparkle.s2{top:92px;left:87%}
.sparkle.s3{top:56px;left:30%}
.sparkle.s4{top:88px;left:60%}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0deg)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
.sun{position:absolute;top:18px;right:6%;width:110px;height:110px;z-index:0}
.sun .face{position:absolute;inset:14px;background:var(--sun);border-radius:50%;border:4px solid var(--ink)}
.sun .rays{position:absolute;inset:0;animation:spin 24s linear infinite}
.sun .rays i{position:absolute;left:50%;top:50%;width:8px;height:26px;margin:-13px 0 0 -4px;background:var(--sun);border:3px solid var(--ink);border-radius:6px;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- nav ---------- */
nav.topnav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:4px solid var(--ink)}
.nav-in{display:flex;align-items:center;gap:10px;padding:10px 16px;max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.02rem;flex:0 0 auto}
.brand img{width:50px;height:50px;border-radius:16px;border:3px solid var(--ink);object-fit:cover}
.nav-links{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{text-decoration:none;font-weight:800;padding:9px 14px;border-radius:999px;font-size:.98rem}
.nav-links a:hover{background:var(--sky-soft)}
.nav-links a.active{background:var(--sun);border:3px solid var(--ink);box-shadow:0 4px 0 rgba(51,49,59,.15);padding:6px 12px}
@media(max-width:560px){
  .nav-in{padding:8px 10px;gap:8px}
  .brand{font-size:.85rem}
  .brand img{width:42px;height:42px}
  .nav-links a{padding:7px 10px;font-size:.85rem}
  .nav-links a.active{padding:4px 8px}
}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--sky) 0%,var(--sky-soft) 78%,var(--cream) 100%);padding:132px 0 60px;position:relative;text-align:center}
.hero .wrap{position:relative;z-index:2}
.eyebrow{display:inline-block;background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:8px 20px;font-weight:800;font-size:.95rem;letter-spacing:.12em;box-shadow:var(--shadow);margin-bottom:18px}
.hero h1{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:900;font-size:clamp(2.5rem,9vw,4.2rem);line-height:1.04;margin-bottom:14px;letter-spacing:.01em;color:var(--ink)}
.hero h1 .l1{display:block}
.hero h1 .swoosh{display:block;width:min(230px,68%);height:12px;margin:6px auto 0}
.hero h1 .l2{display:block;font-size:.78em;white-space:nowrap;margin-top:8px;background:linear-gradient(180deg,#ffd43b 15%,#f59f00 55%,#e8590c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(255,255,255,.6))}
.hero h1 .pop{color:var(--candy-dark)}
.hero h1 .l1{display:block}
.hero h1 .l2{display:block;font-size:.8em}
.nowrap{white-space:nowrap}
.hero p.lead{font-size:1.25rem;font-weight:600;max-width:640px;margin:0 auto 26px;color:var(--ink-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.35rem;color:var(--ink);background:var(--sun);border:4px solid var(--ink);border-radius:999px;padding:18px 40px;min-height:68px;box-shadow:0 7px 0 var(--sun-dark);transition:transform .08s,box-shadow .08s;cursor:pointer}
.btn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--sun-dark)}
.btn.candy{background:var(--candy);color:#fff;box-shadow:0 7px 0 var(--candy-dark)}
.btn.candy:active{box-shadow:0 2px 0 var(--candy-dark)}
.btn.green{background:var(--grass);color:#fff;box-shadow:0 7px 0 var(--grass-dark)}
.btn.green:active{box-shadow:0 2px 0 var(--grass-dark)}
.btn.ghost{background:var(--paper);box-shadow:0 7px 0 rgba(51,49,59,.18)}
.btn.ghost:active{box-shadow:0 2px 0 rgba(51,49,59,.18)}
.btn.small{font-size:1.05rem;padding:12px 26px;min-height:56px}
.btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}

/* ---------- featured hero player ---------- */
.hero-player{position:relative;max-width:560px;margin:30px auto 0;border:4px solid var(--ink);border-radius:36px;overflow:hidden;box-shadow:0 12px 0 rgba(51,49,59,.14);background:var(--night);color:#fff;text-align:center}
.hp-bg{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(28px) brightness(.55);transform:scale(1.1)}
.hp-in{position:relative;z-index:2;padding:30px 26px 28px}
.badge-week{display:inline-block;background:var(--sun);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:8px 22px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.05rem;box-shadow:0 4px 0 rgba(0,0,0,.25);margin-bottom:18px;transform:rotate(-2deg)}
.hp-cover{width:190px;height:190px;margin:0 auto 16px;border-radius:28px;border:5px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.4);object-fit:cover}
.hp-in h2{font-size:clamp(1.5rem,5.5vw,2.1rem);color:#fff;margin-bottom:4px}
.hp-in .by{color:#FFE9A8;font-weight:800;margin-bottom:18px}
.hp-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:6px}
.hp-skip{width:58px;height:58px;border-radius:50%;border:3px solid #fff;background:rgba(255,255,255,.14);color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:.95rem;cursor:pointer}
.hp-skip:active{transform:scale(.93)}
.hp-play{width:92px;height:92px;border-radius:50%;border:5px solid var(--ink);background:var(--candy);color:#fff;font-size:2.4rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 0 var(--candy-dark)}
.hp-play:active{transform:translateY(4px);box-shadow:0 2px 0 var(--candy-dark)}
.hp-times{display:flex;justify-content:space-between;font-weight:800;font-size:.95rem;color:#FFE9A8;margin:10px 4px 0}
input[type=range].scrub{width:100%;margin-top:14px;accent-color:var(--sun);height:36px;cursor:pointer}
.hp-in input[type=range].scrub{accent-color:var(--sun)}

/* ---------- celebration banner ---------- */
.brag{background:var(--candy);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);color:#fff;text-align:center;padding:30px 20px;position:relative;overflow:hidden}
.brag h2{font-size:clamp(1.6rem,5.5vw,2.4rem);text-shadow:0 3px 0 rgba(0,0,0,.15)}
.brag p{font-weight:700;font-size:1.1rem;opacity:.95;margin-top:6px}
.brag .stars{font-size:1.6rem;letter-spacing:.4em;margin-bottom:8px;color:var(--sun)}

/* ---------- sections ---------- */
section{padding:56px 0}
.sec-head{text-align:center;margin-bottom:30px}
.sec-head h2{font-size:clamp(1.7rem,5.5vw,2.5rem);margin-bottom:8px}
.sec-head p{color:var(--ink-soft);font-weight:600;font-size:1.15rem;max-width:620px;margin:0 auto}

/* ---------- story cards ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:720px){.cards{grid-template-columns:1fr 1fr}}
.story-card{background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:flex;gap:16px;align-items:center;transition:transform .12s;position:relative}
.story-card:hover{transform:translateY(-3px) rotate(-.4deg)}
.story-card img.thumb{width:104px;height:104px;flex:0 0 104px;border-radius:20px;border:3px solid var(--ink);object-fit:cover}
.story-card .info{min-width:0;flex:1}
.story-card h3{font-size:1.25rem;margin-bottom:2px}
.story-card .by{color:var(--ink-soft);font-weight:700;font-size:.98rem}
.dur{display:inline-block;margin-top:8px;background:var(--sky-soft);border:2px solid var(--ink);border-radius:999px;padding:3px 14px;font-weight:800;font-size:.9rem}
.card-play{flex:0 0 auto;width:76px;height:76px;border-radius:50%;background:var(--grass);border:4px solid var(--ink);color:#fff;font-size:1.9rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 5px 0 var(--grass-dark)}
.card-play:active{transform:translateY(3px);box-shadow:0 2px 0 var(--grass-dark)}
.card-play.playing{background:var(--sun);color:var(--ink);box-shadow:0 5px 0 var(--sun-dark)}
.ribbon{position:absolute;top:-14px;left:18px;background:var(--sun);border:3px solid var(--ink);border-radius:999px;padding:4px 16px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:.85rem;box-shadow:0 3px 0 rgba(51,49,59,.2);transform:rotate(-3deg)}
.center{text-align:center;margin-top:28px}

/* ---------- storytellers ---------- */
.tellers{background:var(--grass-soft);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.teller-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:720px){.teller-grid{grid-template-columns:repeat(3,1fr)}}
.teller{background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 22px;text-align:center}
.teller .face{width:96px;height:96px;margin:0 auto 14px;border-radius:50%;border:4px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-size:2.6rem;font-weight:700;color:#fff}
.teller .face-img{width:120px;height:120px;margin:0 auto 14px;border-radius:50%;border:4px solid var(--ink);object-fit:cover;object-position:top;background:var(--cream)}
.teller h3{font-size:1.5rem;margin-bottom:6px}
.teller p{color:var(--ink-soft);font-weight:600}

/* ---------- grownups ---------- */
.grownups{text-align:center}
.grownups .chips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:20px 0 26px}
.chip{background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:10px 22px;font-weight:800;box-shadow:0 4px 0 rgba(51,49,59,.12);font-size:1.05rem}

/* ---------- vote banner ---------- */
.vote-banner{background:linear-gradient(135deg,var(--purple),#7A5FD0);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);color:#fff;text-align:center;padding:44px 20px;position:relative;overflow:hidden}
.vote-banner h2{font-size:clamp(1.8rem,6vw,2.6rem);text-shadow:0 3px 0 rgba(0,0,0,.2);margin-bottom:8px}
.vote-banner p{font-weight:700;font-size:1.15rem;opacity:.95;margin-bottom:22px}
.vote-banner .btn{background:#fff}
/* vote banner text is white and the banner is too short for a sky band, so the
   white clouds and the sun sit this section out entirely; its own floating
   postcards and corner sparkles carry the decoration instead */
.vote-banner .cloud,.vote-banner .sun{display:none}
.vote-banner .sparkle.s1{top:2px;left:4%}
.vote-banner .sparkle.s2{top:auto;bottom:10px;left:auto;right:5%}
.vote-banner .sparkle.s3{top:2px;left:auto;right:24%}
.vote-banner .sparkle.s4{top:auto;bottom:10px;left:6%}

/* ---------- request ---------- */
.request{background:linear-gradient(180deg,var(--sky-soft),var(--sky));border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);text-align:center;position:relative;overflow:hidden}
.request .card{position:relative;z-index:2;background:var(--paper);border:4px solid var(--ink);border-radius:32px;box-shadow:var(--shadow);padding:36px 28px;max-width:640px;margin:0 auto}
.request h2{font-size:clamp(1.7rem,5.5vw,2.4rem);margin-bottom:10px}
.request p{color:var(--ink-soft);font-weight:600;font-size:1.15rem;margin-bottom:22px}

/* ---------- books ---------- */
.book-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:720px){.book-grid{grid-template-columns:1fr 1fr}}
.book-card{background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.book-card .spine{position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--candy);border-right:3px solid var(--ink)}
.book-card:nth-child(2n) .spine{background:var(--grass)}
.book-card:nth-child(3n) .spine{background:var(--sun)}
.book-card:nth-child(4n) .spine{background:var(--purple)}
.book-card h3{font-size:1.45rem;padding-left:16px}
.book-card .author{font-weight:800;color:var(--ink-soft);padding-left:16px}
.book-card .ep-link{padding-left:16px;font-weight:700}
.book-card .ep-link a{color:var(--candy-dark);font-weight:800}
.book-card .book-cover{width:110px;height:auto;border-radius:10px;border:3px solid var(--ink);margin:4px 0 4px 16px;display:block;box-shadow:0 4px 0 rgba(51,49,59,.12)}
.book-card .buy-row{padding-left:16px;margin-top:6px}
.disclosure{text-align:center;color:var(--ink-soft);font-weight:600;font-size:1rem;max-width:640px;margin:30px auto 0}

/* ---------- vote page ---------- */
.vote-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:720px){.vote-grid{grid-template-columns:1fr 1fr}}
.vote-card{background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px;text-align:center;transition:transform .12s}
.vote-card:hover{transform:translateY(-3px) rotate(.4deg)}
.vote-card .emoji{font-size:2.6rem;display:block;margin-bottom:10px}
.vote-card h3{font-size:1.5rem;margin-bottom:4px}
.vote-card .author{font-weight:800;color:var(--ink-soft);margin-bottom:10px}
.vote-card p.blurb{color:var(--ink-soft);font-weight:600;margin-bottom:20px}
.vote-note{text-align:center;max-width:640px;margin:0 auto 30px;color:var(--ink-soft);font-weight:600;font-size:1.15rem}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:24px;max-width:860px;margin:0 auto}
@media(min-width:760px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-card{background:var(--paper);border:4px solid var(--ink);border-radius:32px;box-shadow:var(--shadow);padding:32px 26px;text-align:center}
.contact-card h2{font-size:1.7rem;margin-bottom:10px}
.contact-card p{color:var(--ink-soft);font-weight:600;margin-bottom:22px}
.contact-form{max-width:640px;margin:0 auto;background:var(--paper);border:4px solid var(--ink);border-radius:32px;box-shadow:var(--shadow);padding:32px 26px}
.field{margin-bottom:18px;text-align:left}
.field label{display:block;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.1rem;margin-bottom:8px}
.field input,.field textarea{width:100%;border:3px solid var(--ink);border-radius:18px;padding:14px 16px;font-family:'Nunito',sans-serif;font-size:1.1rem;font-weight:600;background:var(--cream);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.form-note{text-align:center;color:var(--ink-soft);font-weight:600;font-size:.98rem;margin-top:14px}
.listen-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px;max-width:560px;margin-left:auto;margin-right:auto}
.listen-row .btn{width:100%;padding-left:12px;padding-right:12px}

/* ---------- about page ---------- */
.about-hero{background:linear-gradient(180deg,var(--sky),var(--sky-soft) 80%,var(--cream));padding:132px 0 52px;text-align:center;position:relative;overflow:hidden}
.about-hero .wrap{position:relative;z-index:2}
.about-hero h1{font-size:clamp(2rem,6.5vw,3.2rem);margin-bottom:12px}
.cover-frame{display:inline-block;margin:26px 0;background:#fff;padding:14px;border:5px solid var(--ink);border-radius:36px;box-shadow:0 12px 0 rgba(51,49,59,.14);transform:rotate(-2deg)}
.cover-frame img{width:min(300px,72vw);height:auto;border-radius:22px}
.prose{max-width:700px;margin:0 auto;text-align:center}
.prose p{font-size:1.2rem;font-weight:600;color:var(--ink-soft);margin-bottom:18px}
.prose p b{color:var(--ink)}
.signoff{background:var(--paper);border:4px solid var(--ink);border-radius:32px;box-shadow:var(--shadow);padding:34px 28px;max-width:720px;margin:10px auto 0;text-align:center}
.signoff .q{font-family:'Fredoka',sans-serif;font-size:clamp(1.4rem,4.8vw,2rem);line-height:1.4}
.signoff .q .heart{color:var(--candy-dark)}
.badge-row{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin:26px 0}
.top10{background:var(--sun);border:4px solid var(--ink);border-radius:999px;box-shadow:var(--shadow);padding:14px 30px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.25rem;transform:rotate(-2deg)}

/* ---------- sticky player bar ---------- */
#playerbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;background:var(--paper);border:4px solid var(--ink);border-radius:26px;box-shadow:0 10px 0 rgba(51,49,59,.22);padding:14px 16px 12px;display:none;max-width:680px;margin:0 auto}
#playerbar.show{display:block;animation:pop .25s ease}
@keyframes pop{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.pb-top{display:flex;align-items:center;gap:12px}
.pb-top img{width:54px;height:54px;border-radius:14px;border:3px solid var(--ink);object-fit:cover;flex:0 0 54px}
.pb-t{min-width:0;flex:1;text-align:left}
.pb-t b{font-family:'Fredoka',sans-serif;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.02rem}
.pb-t span{font-size:.85rem;color:var(--ink-soft);font-weight:700}
.pb-mid{display:flex;align-items:center;gap:10px;margin-top:8px}
.pb-mid .t{font-size:.85rem;font-weight:800;color:var(--ink-soft);min-width:44px}
.pb-mid .t:last-child{text-align:right}
.pb-mid input[type=range]{flex:1;accent-color:var(--candy);height:32px;cursor:pointer;margin-top:0}
.pb-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.pb-btn{width:60px;height:60px;border-radius:50%;border:3px solid var(--ink);background:var(--sky-soft);color:var(--ink);font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pb-btn:active{transform:scale(.93)}
.pb-btn.main{width:74px;height:74px;background:var(--candy);color:#fff;font-size:1.7rem;box-shadow:0 5px 0 var(--candy-dark)}
.pb-btn.main:active{transform:translateY(3px);box-shadow:0 2px 0 var(--candy-dark)}
.pb-btn.tool{background:var(--sun);font-size:.95rem;width:64px}
.pb-btn.sleep-on{background:var(--night);color:#fff;border-color:var(--night)}
.pb-pop{position:absolute;bottom:calc(100% + 10px);left:12px;right:12px;background:var(--paper);border:4px solid var(--ink);border-radius:22px;box-shadow:0 8px 0 rgba(51,49,59,.2);padding:16px;display:none;max-height:320px;overflow:auto}
.pb-pop.show{display:block;animation:pop .2s ease}
.pb-pop h4{font-family:'Fredoka',sans-serif;font-size:1.15rem;margin-bottom:12px;text-align:center}
.sleep-opts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sleep-opts button{border:3px solid var(--ink);border-radius:999px;background:var(--sky-soft);font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;padding:10px 20px;cursor:pointer;min-height:52px}
.sleep-opts button.on{background:var(--night);color:#fff}
.queue-list{display:flex;flex-direction:column;gap:6px}
.queue-item{display:flex;align-items:center;gap:10px;border:3px solid transparent;border-radius:16px;padding:10px 12px;cursor:pointer;font-weight:700;text-align:left;width:100%;background:none;font-family:'Nunito',sans-serif;font-size:1rem;color:var(--ink)}
.queue-item:hover{background:var(--sky-soft)}
.queue-item.now{border-color:var(--ink);background:var(--sun)}
.queue-item .qd{margin-left:auto;font-size:.85rem;color:var(--ink-soft);font-weight:800;flex:0 0 auto}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--cream);text-align:center;padding:44px 20px 260px}
footer .tag{font-family:'Fredoka',sans-serif;font-size:clamp(1.3rem,4.5vw,1.8rem);max-width:640px;margin:0 auto 18px;line-height:1.45}
footer .tag .heart{color:var(--candy)}
footer .flinks{margin-bottom:14px;display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:center}
footer .flinks a{color:var(--cream);font-weight:700;margin:0 8px;text-decoration:none}
footer .flinks a:hover{text-decoration:underline}
footer .tiny{opacity:.65;font-size:.9rem;font-weight:600}
footer .xlinks{margin:6px auto 18px;max-width:640px}
footer .xlinks-title{display:block;font-family:'Fredoka',sans-serif;font-size:1.05rem;margin-bottom:12px;color:var(--cream)}
footer .xlinks-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
footer .xlinks-row a{display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;border-radius:999px;border:2px solid var(--candy);color:var(--cream);font-weight:700;text-decoration:none}
footer .xlinks-row a:hover{background:var(--candy);color:var(--ink)}
.page-pad{padding-bottom:40px}

/* ---------- episode pages ---------- */
.ep-hero{text-align:center}
.ep-cover{width:min(280px,64vw);border-radius:28px;border:5px solid var(--ink);box-shadow:0 8px 0 rgba(51,49,59,.18);margin:6px auto 18px;display:block;background:#fff}
.ep-art{margin:0 auto 22px;max-width:640px}
.ep-art img{width:100%;height:auto;display:block;border-radius:28px;border:5px solid var(--ink);box-shadow:0 8px 0 rgba(51,49,59,.18)}
.page-hero-art{margin:24px auto 0;max-width:640px}
.page-hero-art img{width:100%;height:auto;display:block;border-radius:28px;border:5px solid var(--ink);box-shadow:0 8px 0 rgba(51,49,59,.18)}
.page-hero-art figcaption{margin-top:12px;font-size:1rem;font-weight:800;color:var(--ink-soft);line-height:1.5}
.t-art{margin:26px 0}
.t-art img{width:100%;height:auto;display:block;border-radius:22px;border:4px solid var(--ink);box-shadow:0 6px 0 rgba(51,49,59,.14)}
.t-art figcaption{margin-top:10px;font-size:.95rem;font-weight:700;color:var(--ink-soft);line-height:1.5}
.ep-by{font-size:1.15rem;font-weight:700;color:var(--ink-soft);margin:8px 0 4px}
.ep-dur{display:inline-block;font-weight:800;color:var(--ink-soft);margin-bottom:18px}
.ep-play{display:flex;justify-content:center;margin:6px 0 26px}
.ep-play .card-play{width:96px;height:96px;font-size:2.6rem}
.transcript{background:#fff;border:4px solid var(--ink);border-radius:28px;padding:28px 26px;box-shadow:0 8px 0 rgba(51,49,59,.12);text-align:left}
.transcript h2{font-size:1.6rem;margin-bottom:6px}
.transcript .t-note{font-size:.95rem;color:var(--ink-soft);font-weight:600;margin-bottom:16px}
.transcript p{margin-bottom:14px;line-height:1.75;font-size:1.05rem}
.ep-nav{display:flex;gap:12px;justify-content:space-between;margin:30px 0 8px;flex-wrap:wrap}
.ep-nav a{flex:1 1 200px}
.book-cta{background:var(--sun);border:4px solid var(--ink);border-radius:28px;padding:26px;text-align:center;box-shadow:0 8px 0 rgba(51,49,59,.12);margin:30px 0}
.book-cta h3{font-size:1.4rem;margin-bottom:6px}
.book-cta p{font-weight:600;color:var(--ink-soft);margin-bottom:16px}
.book-cta .cover{width:140px;height:auto;border-radius:12px;border:3px solid var(--ink);box-shadow:0 6px 0 rgba(51,49,59,.15);margin:0 auto 14px;display:block}
.story-card .info h3 a{color:inherit;text-decoration:none}
.story-card .info h3 a:hover{text-decoration:underline}

/* ============ WOW: storybook magic ============ */
/* scroll reveals (the .rv hooks already in the markup) */
.rv{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .65s ease,transform .65s cubic-bezier(.2,1.35,.4,1)}
.rv.in{opacity:1;transform:none}
.cards .story-card:nth-child(2),.teller-grid .teller:nth-child(2),.book-grid .book-card:nth-child(2),.vote-grid .vote-card:nth-child(2){transition-delay:.1s}
.cards .story-card:nth-child(3),.teller-grid .teller:nth-child(3),.book-grid .book-card:nth-child(3),.vote-grid .vote-card:nth-child(3){transition-delay:.2s}
.cards .story-card:nth-child(4),.teller-grid .teller:nth-child(4),.book-grid .book-card:nth-child(4),.vote-grid .vote-card:nth-child(4){transition-delay:.3s}

/* hero entrance: everything pops in like a pop-up book */
@keyframes rise-in{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:rise-in .55s cubic-bezier(.2,1.4,.4,1) .05s both}
.hero h1{animation:rise-in .7s cubic-bezier(.2,1.4,.4,1) .18s both}
.hero p.lead{animation:rise-in .7s cubic-bezier(.2,1.4,.4,1) .34s both}
.hero-player{animation:rise-in .8s cubic-bezier(.2,1.4,.4,1) .48s both}
.hero .btn-row{animation:rise-in .7s cubic-bezier(.2,1.4,.4,1) .62s both}
@keyframes swoosh-draw{from{stroke-dashoffset:240}to{stroke-dashoffset:0}}
.hero h1 .swoosh path{stroke-dasharray:240;stroke-dashoffset:240;animation:swoosh-draw .9s ease .9s forwards}

/* rainbow arc in the hero sky */
.rainbow{position:absolute;left:50%;bottom:-24px;width:min(560px,130vw);height:280px;transform:translateX(-50%);z-index:0;opacity:.85;pointer-events:none}
.rainbow svg{width:100%;height:100%;display:block}

/* hot air balloons drifting across the hero */
.balloon{position:absolute;z-index:1;pointer-events:none;animation:drift-across linear infinite}
.balloon .env{width:64px;height:80px;border-radius:50% 50% 50% 50%/55% 55% 45% 45%;border:4px solid var(--ink);position:relative;overflow:hidden}
.balloon .env::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 42%,rgba(255,255,255,.55) 42%,rgba(255,255,255,.55) 58%,transparent 58%)}
.balloon.b1 .env{background:var(--candy)}
.balloon.b2 .env{background:var(--purple)}
.balloon.b3 .env{background:var(--grass)}
.balloon .basket{width:26px;height:20px;margin:2px auto 0;background:#B08968;border:3px solid var(--ink);border-radius:0 0 8px 8px}
.balloon.b1{top:8px;animation-duration:46s;animation-delay:-8s;transform:scale(.9)}
.balloon.b2{top:44px;animation-duration:68s;animation-delay:-40s;transform:scale(.6)}
.balloon.b3{top:26px;animation-duration:58s;animation-delay:-25s;transform:scale(.8)}
@keyframes drift-across{from{left:-120px}to{left:110%}}

/* musical notes floating up from the hero player */
.note{position:absolute;bottom:18%;font-size:1.6rem;color:var(--purple);z-index:1;pointer-events:none;animation:note-rise 5s ease-in infinite;opacity:0}
.note.n2{color:var(--candy-dark);animation-delay:1.6s;font-size:1.3rem}
.note.n3{color:var(--sun-dark);animation-delay:3.1s;font-size:1.9rem}
@keyframes note-rise{0%{opacity:0;transform:translateY(0) rotate(-12deg)}18%{opacity:.95}100%{opacity:0;transform:translateY(-150px) rotate(18deg)}}

/* pulsing glow ring on the big hero play button */
.hp-play{position:relative}
.hp-play::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:4px solid rgba(255,255,255,.75);animation:ring-pulse 2.2s ease-out infinite;pointer-events:none}
@keyframes ring-pulse{0%{transform:scale(.82);opacity:.9}100%{transform:scale(1.28);opacity:0}}

/* twinkling star cascade on the brag band */
.brag .stars span{display:inline-block;animation:star-bounce 1.8s ease-in-out infinite}
.brag .stars span:nth-child(2){animation-delay:.25s}
.brag .stars span:nth-child(3){animation-delay:.5s}
@keyframes star-bounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.25)}}

/* story cards: sheen sweep + bouncier hover */
.story-card{overflow:hidden}
.story-card::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.story-card:hover::after{left:130%}
.story-card:hover{transform:translateY(-5px) rotate(-.6deg)}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.card-play:hover{animation:wiggle .45s ease}
.teller .face{transition:transform .2s}
.teller:hover .face{animation:wiggle .5s ease}

/* rainbow strip divider */
.rainbow-strip{height:14px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);background:linear-gradient(90deg,#FF6B6B 0 16%,#FFA94D 16% 32%,#FFD43B 32% 48%,#69DB7C 48% 64%,#4DABF7 64% 80%,#9775FA 80% 100%)}

/* vote banner: floating envelope trail */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
.vote-banner .fly{position:absolute;font-size:2rem;line-height:1;animation:floaty 4s ease-in-out infinite;opacity:.9;pointer-events:none}

/* book cards: spine glow on hover */
.book-card{transition:transform .15s}
.book-card:hover{transform:translateY(-4px) rotate(.4deg)}

/* sec-head emoji bounce */
.sec-head h2{animation:head-bob 3.2s ease-in-out infinite}
@keyframes head-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}


/* ---------- site navigation standard (Oct 22, 2026) ---------- */
#minibar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;background:var(--paper);border-bottom:4px solid var(--ink);padding:8px 14px}
.pg-back{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:8px 18px 8px 12px;border:3px solid var(--ink);border-radius:999px;background:var(--sun);color:var(--ink);font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.05rem;text-decoration:none;box-shadow:0 4px 0 rgba(51,49,59,.18)}
.pg-back:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(51,49,59,.18)}
.pg-back .arr{font-size:1.3rem;line-height:1}
.pg-sec{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.02rem;color:var(--ink-soft)}
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:1080px;margin:0 auto;padding:16px 20px 0;font-weight:800;font-size:.98rem;color:var(--ink-soft)}
.crumbs a{color:var(--grass-dark);text-decoration:none;padding:6px 4px}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{color:var(--gray)}
.crumbs .here{color:var(--ink)}
.keepgoing{max-width:1080px;margin:0 auto;padding:38px 20px 6px}
.kg-title{font-family:'Fredoka',sans-serif;font-size:clamp(1.5rem,5vw,2rem);text-align:center;margin-bottom:18px}
.np-cards{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.np-card{flex:1 1 250px;display:flex;gap:14px;align-items:center;background:#fff;border:4px solid var(--ink);border-radius:26px;box-shadow:0 6px 0 rgba(51,49,59,.12);padding:14px 16px;text-decoration:none;min-height:96px}
.np-card.next{text-align:right;flex-direction:row-reverse}
.np-card img{width:76px;height:76px;border-radius:18px;border:3px solid var(--ink);object-fit:cover;flex:0 0 76px}
.np-card .dir{display:block;font-size:.82rem;font-weight:800;letter-spacing:.06em;color:var(--candy-dark);text-transform:uppercase}
.np-card .ttl{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.08rem;line-height:1.25}
.kg-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.kg-card{background:#fff;border:4px solid var(--ink);border-radius:26px;box-shadow:0 6px 0 rgba(51,49,59,.12);overflow:hidden;text-decoration:none;display:block}
.kg-card img{width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:4px solid var(--ink)}
.kg-card .kg-in{padding:14px 16px 16px}
.kg-card h3{font-size:1.12rem;margin-bottom:4px}
.kg-card p{font-size:.95rem;font-weight:600;color:var(--ink-soft);line-height:1.45}
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;background:var(--paper);border-top:4px solid var(--ink);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 0 rgba(51,49,59,.08)}
#tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:56px;justify-content:center;text-decoration:none;font-weight:800;font-size:.8rem;color:var(--ink-soft);border-radius:16px;padding:4px 2px}
#tabbar a .ic{font-size:1.35rem;line-height:1}
#tabbar a.on{background:var(--sun);color:var(--ink)}
@media(max-width:760px){#tabbar{display:flex}body{padding-bottom:86px}#playerbar{bottom:96px}}

/* ---------- news ---------- */
.news-meta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.news-tag{display:inline-block;background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:6px 18px;font-weight:800;font-size:.95rem;box-shadow:0 4px 0 rgba(51,49,59,.12)}
.news-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:720px){.news-grid{grid-template-columns:repeat(3,1fr)}}
.news-card{background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .12s}
.news-card:hover{transform:translateY(-4px) rotate(-.4deg)}
.news-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:4px solid var(--ink)}
.news-card .nc-in{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.news-card .nc-date{font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--candy-dark)}
.news-card h3{font-size:1.28rem;line-height:1.25}
.news-card p{color:var(--ink-soft);font-weight:600;font-size:1rem;line-height:1.5}
.news-card .nc-more{margin-top:auto;font-family:'Fredoka',sans-serif;font-weight:700;color:var(--grass-dark);font-size:1.05rem}
.news-hero-art{margin:0 auto 22px;max-width:640px}
.news-hero-art img{width:100%;height:auto;display:block;border-radius:28px;border:5px solid var(--ink);box-shadow:0 8px 0 rgba(51,49,59,.18)}
.news-hero-art figcaption{margin-top:12px;font-size:1rem;font-weight:800;color:var(--ink-soft);line-height:1.5;text-align:center}
.article-card{background:#fff;border:4px solid var(--ink);border-radius:28px;padding:30px 26px;box-shadow:0 8px 0 rgba(51,49,59,.12);text-align:left;max-width:760px;margin:0 auto}
.article-card p{margin-bottom:14px;line-height:1.7;font-size:1.08rem}
.article-card h2{font-size:1.55rem;margin:28px 0 10px}
.article-card ul{margin:0 0 16px 22px;line-height:1.7;font-size:1.08rem}
.article-card li{margin-bottom:8px}
.article-card figure{margin:24px 0}
.article-card figure img{width:100%;height:auto;display:block;border-radius:22px;border:4px solid var(--ink);box-shadow:0 6px 0 rgba(51,49,59,.14)}
.article-card figure.cover-shot img{width:min(300px,72vw);margin:0 auto}
.article-card figcaption{margin-top:10px;font-size:.95rem;font-weight:700;color:var(--ink-soft);line-height:1.5;text-align:center}
.pullquote{background:var(--sun);border:4px solid var(--ink);border-radius:26px;box-shadow:0 6px 0 rgba(51,49,59,.15);padding:26px 24px;margin:26px 0;text-align:center;transform:rotate(-1deg)}
.pullquote p{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(1.3rem,4.6vw,1.7rem);line-height:1.35;margin:0}
.src-note{max-width:760px;margin:22px auto 0;color:var(--ink-soft);font-weight:600;font-size:.95rem;text-align:center}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv{opacity:1 !important;transform:none !important}
  .balloon,.rainbow,.note{display:none !important}
}