@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url(fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url(fonts/nunito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url(fonts/nunito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url(fonts/nunito-latin-800-normal.woff2) format("woff2")}
/* Big Little Firsts: warm watercolour palette from the channel banner */
:root{
  --teal:#1f8a85; --teal-ink:#176d69; --sun:#f4a823; --sun-soft:#fff1d4; --coral:#ee6c58; --coral-ink:#c9513f; --coral-soft:#ffe3dd;
  --sky:#3d97dd; --sky-soft:#dcefff; --leaf:#4fae5c; --leaf-soft:#dff4e1;
  --bg:#fdf7ee; --paper:#fffaf2; --ink:#2f2a36; --soft:#6f6779; --line:#efe3d1;
  --display:"Fredoka","Nunito",ui-rounded,system-ui,sans-serif; --body:"Nunito",ui-rounded,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --teal:#5cc6c0; --teal-ink:#7fd6d0; --sun-soft:#3d3222; --coral-soft:#402824; --sky-soft:#1f3242; --leaf-soft:#213826;
  --bg:#17151b; --paper:#1f1c24; --ink:#f4efe8; --soft:#b3aabd; --line:#3a3442; color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--teal-ink)}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}

nav{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:18px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:600 20px var(--display);color:var(--teal);text-decoration:none;margin-right:auto}
.brand img{width:38px;height:38px;border-radius:50%}
nav a.link{color:var(--ink);text-decoration:none;font-weight:700;font-size:15px}
nav a.link:hover{color:var(--teal)}
.yt{background:var(--coral);color:#fff!important;border-radius:999px;padding:6px 14px;text-decoration:none;font-weight:800;font-size:14px}
@media(max-width:560px){nav a.link{display:none}}

.hero img{width:100%;height:auto}
.hero .cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:20px 18px 6px;background:linear-gradient(var(--leaf-soft),var(--bg))}
.btn{display:inline-block;font:800 16px var(--body);border-radius:999px;padding:11px 22px;text-decoration:none}
.btn.main{background:var(--coral);color:#fff;box-shadow:0 3px 0 var(--coral-ink)}
.btn.alt{background:var(--paper);color:var(--teal-ink);border:2px solid var(--teal)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

section{padding-block:44px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.2;text-wrap:balance}
h2{font-size:clamp(26px,4vw,32px);margin:0 0 4px;color:var(--teal)}
.lead{color:var(--soft);margin:0 0 24px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px}
.ep{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative;color:inherit;text-decoration:none;transition:transform .2s}
a.ep:hover{transform:translateY(-3px)}
.ep img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ep .b{padding:12px 14px 16px}
.ep h3{font-size:18px;margin:0 0 6px}
.meta{font-size:14px;color:var(--soft)}
.ribbon{position:absolute;top:10px;right:10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:3px 10px}
.ribbon.now{background:var(--leaf);color:#fff}
.ribbon.soon{background:#fffd;color:#2f2a36}
.ep.soon img{filter:saturate(.6) brightness(1.04)}
.who{display:inline-block;font-size:12px;font-weight:800;border-radius:999px;padding:1px 9px;margin-right:6px}
.who.ezz{background:var(--sky-soft);color:var(--sky)}
.who.nai{background:var(--coral-soft);color:var(--coral)}

.next{display:flex;gap:20px;align-items:center;background:#1f8a85;color:#fff;border-radius:22px;padding:18px 22px;margin-top:26px;flex-wrap:wrap}
.next img{width:240px;border-radius:14px}
.next h3{font-size:22px;margin:0}
.next p{margin:4px 0 0;opacity:.92}

.secrets{background:var(--sun-soft)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.card{background:var(--paper);border-radius:20px;padding:20px;border:2px dashed var(--sun)}
.card .n{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:700 21px var(--display);color:#fff;margin-bottom:8px}
.card h3{font-size:20px;margin:0 0 6px}
.card p{margin:0;color:var(--soft);font-size:15px}

.parents{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px}
@media(max-width:760px){.parents{grid-template-columns:1fr}}
.box{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:20px 22px}
.box h3{font-size:19px;margin:0 0 8px}
.box ol{margin:0;padding-left:1.2em}.box li{margin:.35em 0}
.mail{font-weight:800;color:var(--teal-ink);user-select:all}

footer{border-top:1px solid var(--line);padding-block:22px;font-size:14px;color:var(--soft)}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--soft)}

.page{max-width:720px;padding-block:44px 60px}
.page h1{font-size:clamp(30px,5vw,40px);margin:0 0 6px;color:var(--teal)}
.page h2{font-size:22px;margin:30px 0 6px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}a.ep{transition:none}}

/* feedback form */
.note-form{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.note-form h3{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.topics{border:0;padding:0;margin:4px 0 6px;display:flex;flex-wrap:wrap;gap:8px}
.topics label{cursor:pointer}
.topics input{position:absolute;opacity:0}
.topics span{display:inline-block;border:2px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 13px;font-weight:700;font-size:14px}
.topics input:checked+span{border-color:var(--teal);background:var(--teal);color:#fff}
.topics input:focus-visible+span{outline:3px solid var(--sun);outline-offset:2px}
.fld{font-weight:800;font-size:15px;margin-top:6px}
.note-form textarea,.note-form input[type=email]{font:inherit;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:10px 12px;width:100%}
.note-form textarea:focus,.note-form input[type=email]:focus{outline:none;border-color:var(--teal)}
.count{align-self:flex-end;font-size:12px;color:var(--soft);margin-top:-4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ts:empty{display:none}
.send-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}
.btn:disabled{opacity:.6;cursor:default}
button.btn{border:0;cursor:pointer}
.form-msg{margin:0;font-weight:700;min-height:1.4em}
.form-msg.ok{color:var(--leaf)}.form-msg.bad{color:var(--coral-ink)}