:root{
  --teal:#57b8ad; --teal-d:#3f9a90; --coral:#ec8a6a; --coral-d:#d9744f;
  --cream:#fbf4e6; --sand:#f4e8cf; --green:#8fca7f; --gold:#f4c453;
  --ink:#33474a; --muted:#6d7f80; --card:#ffffff; --shadow:0 10px 30px rgba(60,80,80,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);
  background:var(--cream);line-height:1.65;font-size:18px}
h1,h2,h3,.brand{font-family:'Baloo 2','Nunito',sans-serif;line-height:1.15;font-weight:700}
a{color:var(--teal-d);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;background:var(--coral);color:#fff;font-weight:800;font-family:'Baloo 2',sans-serif;
  padding:14px 28px;border-radius:999px;box-shadow:var(--shadow);transition:transform .15s,background .15s;border:none;cursor:pointer;font-size:18px}
.btn:hover{background:var(--coral-d);transform:translateY(-2px)}
.btn.ghost{background:#fff;color:var(--teal-d);border:2px solid var(--teal)}
.btn.ghost:hover{background:var(--sand)}
/* header */
header.site{position:sticky;top:0;z-index:20;background:rgba(251,244,230,.92);backdrop-filter:blur(6px);
  border-bottom:2px solid var(--sand)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-size:24px;color:var(--teal-d)}
.brand img{width:40px;height:40px;border-radius:50%;border:2px solid var(--teal)}
.nav a.link{color:var(--ink);font-weight:700;margin-left:22px;font-family:'Baloo 2',sans-serif}
.nav a.link:hover{color:var(--coral-d)}
.nav .menu{display:flex;align-items:center}
.burger{display:none;background:none;border:none;font-size:28px;cursor:pointer;color:var(--teal-d)}
/* hero */
.hero{background:linear-gradient(180deg,#eaf7f4 0%,var(--cream) 100%);padding:56px 0 40px;overflow:hidden}
.hero .row{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center}
.hero h1{font-size:52px;color:var(--teal-d)}
.hero p.lead{font-size:22px;color:var(--muted);margin:18px 0 26px}
.hero .art{filter:drop-shadow(0 20px 30px rgba(60,80,80,.18))}
.tag{display:inline-block;background:var(--gold);color:#6a4a10;font-weight:800;padding:6px 16px;border-radius:999px;font-size:15px;font-family:'Baloo 2',sans-serif}
/* sections */
section{padding:48px 0}
section h2{font-size:34px;text-align:center;color:var(--teal-d)}
section .sub{text-align:center;color:var(--muted);max-width:620px;margin:10px auto 34px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value{background:var(--card);border-radius:22px;padding:26px;box-shadow:var(--shadow);text-align:center}
.value .emoji{font-size:40px}
.value h3{margin:10px 0 6px;color:var(--coral-d)}
/* episode cards */
.eps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ep{background:var(--card);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s}
.ep:hover{transform:translateY(-4px)}
.ep .thumb{position:relative;aspect-ratio:16/9;background:var(--sand)}
.ep .thumb img{width:100%;height:100%;object-fit:cover}
.ep .pill{position:absolute;top:10px;left:10px;background:var(--teal);color:#fff;font-weight:800;font-size:12px;
  padding:4px 12px;border-radius:999px;font-family:'Baloo 2',sans-serif}
.ep .pill.soon{background:var(--muted)}
.ep .body{padding:16px 18px 20px}
.ep .body h3{font-size:20px;color:var(--ink)}
.ep .body p{color:var(--muted);font-size:15px;margin:6px 0 14px}
/* featured video */
.video-frame{max-width:820px;margin:0 auto;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:16/9;background:#000}
.video-frame iframe{width:100%;height:100%;border:0}
/* characters */
.cast{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.char{background:var(--card);border-radius:22px;padding:22px;box-shadow:var(--shadow);text-align:center}
.char img{width:130px;height:130px;object-fit:contain;margin:0 auto 10px}
.char h3{color:var(--teal-d)}
/* band + signup */
.band{background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;border-radius:28px;
  padding:40px;text-align:center;box-shadow:var(--shadow)}
.band h2{color:#fff}
.band .sub{color:#eafaf7}
.signup{display:flex;gap:10px;max-width:460px;margin:8px auto 0;flex-wrap:wrap;justify-content:center}
.signup input{flex:1;min-width:220px;padding:14px 18px;border-radius:999px;border:none;font-size:16px;font-family:inherit}
/* about text */
.prose{max-width:760px;margin:0 auto}
.prose p{margin:16px 0;font-size:19px}
.prose h2{text-align:left;margin-top:30px;font-size:28px}
/* footer */
footer.site{background:var(--ink);color:#d6e2e2;padding:34px 0;margin-top:20px;text-align:center}
footer.site a{color:#fff;font-weight:700}
footer.site .small{color:#9fb0b0;font-size:14px;margin-top:12px}
/* responsive */
@media(max-width:820px){
  .hero .row,.values,.eps,.cast{grid-template-columns:1fr}
  .hero h1{font-size:38px}.hero .art{max-width:320px;margin:0 auto}
  .nav .menu{display:none;position:absolute;top:64px;right:12px;background:#fff;flex-direction:column;
    padding:14px 20px;border-radius:16px;box-shadow:var(--shadow)}
  .nav .menu.open{display:flex}.nav a.link{margin:8px 0}
  .burger{display:block}
}

/* mobile hero: center text + align buttons */
@media(max-width:820px){
  .hero .row{text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero .btn{display:block;width:100%;max-width:300px;margin:12px auto 0 !important}
  .hero .tag{display:inline-block}
}

/* ---- per-episode story pages ---- */
.crumb{color:var(--muted);font-size:14px;margin-bottom:10px}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--coral-d)}
.storywrap{max-width:820px;margin:0 auto;padding:0 20px}
.videoposter{position:relative;display:block;aspect-ratio:16/9;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:#0d1a1a}
.videoposter img{width:100%;height:100%;object-fit:cover;display:block}
.videoposter::after{content:"";position:absolute;inset:0;background:rgba(18,38,38,.16)}
.videoposter .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:82px;height:82px;border-radius:50%;background:var(--coral);color:#fff;font-size:32px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(0,0,0,.32);transition:transform .15s,background .15s}
.videoposter:hover .play{transform:translate(-50%,-50%) scale(1.08);background:var(--coral-d)}
.videoposter .wl{position:absolute;bottom:14px;right:16px;z-index:2;background:rgba(0,0,0,.6);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;padding:7px 15px;border-radius:999px}
.story h2{text-align:left;color:var(--teal-d);font-size:28px;margin-top:6px}
.story p{font-size:19px;margin:15px 0}
.story .say{color:var(--ink);font-style:italic}
.teachbox{background:#eaf7f4;border-left:6px solid var(--teal);border-radius:16px;padding:22px 26px;margin:24px 0}
.teachbox h3{color:var(--teal-d);margin-bottom:6px}
.askbox{background:#fdf3e0;border-left:6px solid var(--gold);border-radius:16px;padding:22px 26px;margin:24px 0}
.askbox h3{color:var(--coral-d);margin-bottom:6px}
.activitybox{background:#eef7e9;border-left:6px solid var(--green);border-radius:16px;padding:22px 26px;margin:24px 0}
.activitybox h3{color:#4f8a3f;margin-bottom:6px}
.colorbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:2px dashed var(--sand);border-radius:16px;padding:18px 22px;margin:24px 0}
.colorbar p{margin:0;font-weight:700;color:var(--ink)}
.moretitle{text-align:left;color:var(--teal-d);margin-top:36px;font-size:26px}

/* fix: sections that are also .wrap/.storywrap lost their vertical padding
   (the .wrap/.storywrap class overrode section{padding:48px 0}), which made
   video→cards and cards→signup seams collide. Restore vertical breathing room. */
section.wrap, section.storywrap{padding-top:44px;padding-bottom:44px}
.video-frame{margin-bottom:6px}
.band{margin-top:10px}
@media(max-width:820px){
  section.wrap, section.storywrap{padding-top:34px;padding-bottom:34px}
}