@font-face{font-family:"Patrick Hand";src:url(fonts/PatrickHand.woff2) format("woff2");font-display:swap}
:root{
  --paper:#f8f4e8;--dot:#e4dcc4;--ink:#2b2b33;--muted:#6b6658;
  --blue:#4a72bf;--blue-dark:#355a9e;--sun:#f6c453;--sun-line:#eaa63a;--orange:#e9a23b;
  --grass:#dcebc6;--grass-line:#9cc87a;--pink:#f3b6bf;--card:#fffdf6;
  --hand:"Patrick Hand","Comic Sans MS","Chalkboard SE",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:18px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--paper) radial-gradient(var(--dot) 1.4px,transparent 1.6px) 0 0/26px 26px}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-dark)}
h1,h2,.tagline,.btn,.grid span,.cards b{font-family:var(--hand);font-weight:400}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:680px}

/* hero */
.hero{position:relative;overflow:hidden;padding:96px 0 120px}
.hero__inner{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap}
.nimbus{width:min(380px,72vw);animation:float 5s ease-in-out infinite;filter:drop-shadow(0 14px 10px rgba(80,70,40,.12))}
.hero__text{text-align:center}
h1{margin:0;font-size:clamp(3rem,8vw,5.4rem);line-height:1;color:var(--blue);letter-spacing:.01em}
h1 span{color:var(--orange)}
.tagline{margin:14px 0 30px;font-size:clamp(1.4rem,3.2vw,1.9rem);color:var(--orange)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px 14px 22px;border-radius:999px;
  background:var(--blue);color:#fff;text-decoration:none;font-size:1.5rem;border:3px solid var(--ink);
  box-shadow:0 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn svg{width:26px;height:26px;fill:#fff}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--ink)}
.btn:active{transform:translateY(5px);box-shadow:none}
.btn:focus-visible,.grid a:focus-visible{outline:4px solid var(--sun-line);outline-offset:4px}
.hill{position:absolute;left:0;bottom:0;width:100%;height:120px}
.sun{position:absolute;top:22px;right:3%;width:80px;height:80px;border-radius:50%;background:var(--sun);
  border:4px solid var(--sun-line);box-shadow:0 0 0 18px rgba(246,196,83,.18);animation:spin 40s linear infinite}
.puff{position:absolute;width:120px;height:48px;border:3px solid #9aa3bd;border-radius:40px;background:#fbfbfd}
.puff::before,.puff::after{content:"";position:absolute;background:#fbfbfd;border:3px solid #9aa3bd;border-radius:50%;border-bottom-color:transparent;border-right-color:transparent}
.puff::before{width:56px;height:56px;left:16px;top:-30px;transform:rotate(45deg)}
.puff::after{width:42px;height:42px;left:58px;top:-20px;transform:rotate(45deg)}
.puff--1{top:60px;left:6%;animation:drift 26s ease-in-out infinite alternate}
.puff--2{top:24px;left:52%;transform:scale(.7);animation:drift 32s ease-in-out infinite alternate-reverse}

/* sections */
section{padding:64px 0}
h2{margin:0 0 8px;font-size:clamp(2.2rem,5vw,3rem);color:var(--blue);text-align:center;line-height:1.1}
.lead{text-align:center;color:var(--muted);margin:0 auto 36px;max-width:560px}
.episodes{background:var(--grass);padding-top:24px}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.grid a{display:block;height:100%;background:var(--card);border:3px solid var(--ink);border-radius:20px;overflow:hidden;
  text-decoration:none;color:var(--ink);box-shadow:0 6px 0 rgba(43,43,51,.85);transition:transform .15s}
.grid a:hover{transform:translateY(-4px) rotate(-.6deg)}
.grid img{aspect-ratio:16/9;object-fit:cover;width:100%;border-bottom:3px solid var(--ink)}
.grid span{display:block;padding:10px 14px 12px;font-size:1.3rem;line-height:1.2}
.more a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:180px;background:var(--sun);text-align:center}
.more__cloud{width:84px;height:62px;background:url(img/nimbus-180.png) center/contain no-repeat}

.cards{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.cards li{background:var(--card);border:3px solid var(--ink);border-radius:22px;padding:20px 22px;color:var(--muted)}
.cards b{display:block;font-size:2rem;line-height:1.1;margin-bottom:6px;color:var(--ink)}
.c-blue{box-shadow:inset 0 10px 0 #b9cdf0}.c-yellow{box-shadow:inset 0 10px 0 var(--sun)}
.c-pink{box-shadow:inset 0 10px 0 var(--pink)}.c-green{box-shadow:inset 0 10px 0 var(--grass-line)}

.grownups{background:var(--card);border-block:3px dashed var(--dot)}
.grownups p{margin:0 0 14px}

footer{padding:40px 0 48px;text-align:center;color:var(--muted);font-size:.95rem}
footer img{margin:0 auto 8px}
footer p{margin:0}

@keyframes float{50%{transform:translateY(-14px) rotate(-1.5deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{to{translate:60px 0}}
@media (max-width:640px){.hero{padding:48px 0 100px}.sun{width:64px;height:64px;top:20px}.puff--2{display:none}.hero__inner{gap:20px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.grid small{display:block;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.8rem;color:var(--muted);margin-top:3px}
.about{padding-block:56px 72px}
.about img{width:120px;margin:28px auto 4px}
.about p{text-align:center;margin:0 0 28px}
.about dl{margin:0 auto;max-width:460px;display:grid;grid-template-columns:max-content 1fr;gap:10px 18px;background:var(--card);border:3px solid var(--ink);border-radius:20px;padding:22px 24px}
.about dt{color:var(--muted)}
.about dd{margin:0;word-break:break-word}
.back{font-family:var(--hand);font-size:1.3rem;text-decoration:none}
@media (max-width:420px){.about dl{grid-template-columns:1fr;gap:2px}.about dt{margin-top:8px;font-size:.85rem}}