:root{
  --purple:#8266b5; --purple-dark:#5e4690; --purple-soft:#efe8fa;
  --pink:#f26d9a; --pink-soft:#ffe3ec;
  --peach:#fff1e8; --cream:#fffaf4;
  --yellow:#ffc94a; --mint:#d9f3e4; --sky:#dcefff;
  --ink:#2c2347;--surface:#ffffff;--footer-bg:#2c2347; --muted:#6b6384;
  --radius:24px; --shadow:0 8px 0 rgba(94,70,144,.18);
  --font-head:"Fredoka",system-ui,sans-serif; --font-body:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--cream)}
img{max-width:100%;display:block}
a{color:var(--purple-dark)}
h1,h2,h3{font-family:var(--font-head);line-height:1.15;margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(2.2rem,6vw,3.8rem)}
h2{font-size:clamp(1.7rem,4vw,2.4rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.section{padding:64px 0}
.eyebrow{display:inline-block;font-family:var(--font-head);font-weight:500;color:var(--pink);background:var(--pink-soft);padding:4px 14px;border-radius:99px;font-size:.95rem;margin-bottom:12px}
.lead{font-size:1.2rem;color:var(--muted);max-width:60ch}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,250,244,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--purple-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-family:var(--font-head);font-weight:600;font-size:1.35rem;color:var(--purple-dark);text-decoration:none;display:flex;align-items:center;gap:8px}
.brand span.dot{font-size:1.6rem}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{font-family:var(--font-head);font-weight:500;text-decoration:none;color:var(--ink);padding:8px 14px;border-radius:99px}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:var(--purple-soft);color:var(--purple-dark)}
.nav-toggle{display:none;background:none;border:0;font-size:1.7rem;cursor:pointer;color:var(--purple-dark)}
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--cream);padding:12px 16px 20px;border-bottom:2px solid var(--purple-soft);display:none}
  .nav-links.open{display:flex}.nav-links .btn{text-align:center}
}

/* buttons */
.btn{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:1.05rem;text-decoration:none;padding:14px 26px;border-radius:99px;border:0;cursor:pointer;background:var(--purple);color:#fff;box-shadow:0 5px 0 var(--purple-dark);transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--purple-dark)}
.btn.pink{background:var(--pink);box-shadow:0 5px 0 #c24a76}
.btn.pink:hover{box-shadow:0 3px 0 #c24a76}
.btn.ghost{background:#fff;color:var(--purple-dark);box-shadow:0 5px 0 var(--purple-soft);border:2px solid var(--purple-soft)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}

/* hero */
.hero{background:linear-gradient(180deg,var(--peach),var(--cream));overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:56px 0 72px}
.hero h1 .accent{color:var(--purple)}
.hero-art{position:relative;aspect-ratio:1;background:var(--purple-soft);border-radius:50% 50% 46% 54%/55% 50% 50% 45%;display:grid;place-items:center;box-shadow:var(--shadow)}
.hero-art .raffy{font-size:clamp(7rem,18vw,12rem);filter:drop-shadow(0 8px 0 rgba(94,70,144,.15))}
.hero-art .float{position:absolute;font-size:2.2rem;animation:bob 3s ease-in-out infinite}
.hero-art .f1{top:8%;left:12%}.hero-art .f2{top:16%;right:8%;animation-delay:.6s}.hero-art .f3{bottom:12%;left:8%;animation-delay:1.2s}.hero-art .f4{bottom:8%;right:14%;animation-delay:1.8s}
@keyframes bob{50%{transform:translateY(-10px) rotate(6deg)}}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr;padding:36px 0 48px}.hero-art{width:min(320px,100%);margin:auto;order:-1}}
@media (prefers-reduced-motion:reduce){.hero-art .float{animation:none}html{scroll-behavior:auto}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:32px}
.stat{background:#fff;border-radius:var(--radius);padding:18px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;white-space:nowrap;font-family:var(--font-head);font-size:2rem;color:var(--purple)}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .15s}
.card:hover{transform:translateY(-4px)}
.thumb{aspect-ratio:16/9;display:grid;place-items:center;font-size:3.5rem;position:relative;background:var(--purple-soft)}
.thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.thumb .play{position:absolute;right:10px;bottom:10px;background:rgba(44,35,71,.85);color:#fff;font-size:.8rem;padding:2px 10px;border-radius:99px;font-family:var(--font-head)}
.card-body{padding:16px 18px 20px}
.card-body h3{font-size:1.1rem;margin-bottom:6px}
.tag{font-size:.8rem;font-weight:700;color:var(--purple-dark);background:var(--purple-soft);padding:2px 10px;border-radius:99px}
.bg-pink{background:var(--pink-soft)}.bg-mint{background:var(--mint)}.bg-sky{background:var(--sky)}.bg-yellow{background:#fff0c2}.bg-purple{background:var(--purple-soft)}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.chip{font-family:var(--font-head);font-weight:500;font-size:1rem;padding:8px 18px;border-radius:99px;border:2px solid var(--purple-soft);background:#fff;color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:#fff}

/* topic tiles */
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px}
.topic{border-radius:var(--radius);padding:22px 16px;text-align:center;text-decoration:none;color:var(--ink);font-family:var(--font-head);font-weight:600;font-size:1.15rem;box-shadow:var(--shadow);transition:transform .15s}
.topic:hover{transform:translateY(-4px) rotate(-1deg)}
.topic .emoji{font-size:2.6rem;display:block;margin-bottom:6px}

/* signup */
.signup{background:var(--purple);color:#fff;border-radius:32px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:center;box-shadow:0 10px 0 var(--purple-dark)}
.signup h2{color:#fff}
.signup .cover img{width:100%;height:auto;border-radius:12px;display:block}
.signup .cover{background:var(--cream);border-radius:20px;max-width:300px;margin:auto;overflow:hidden;padding:0;color:var(--ink);font-family:var(--font-head);transform:rotate(-3deg);box-shadow:0 8px 0 rgba(0,0,0,.18)}
.signup .cover big{display:block;font-size:1.7rem;color:var(--pink);line-height:1.1}
.signup form,.kit-slot{background:var(--cream);border-radius:20px;padding:18px;display:flex;gap:12px;flex-wrap:wrap}
.signup input{flex:1 1 200px;font:inherit;padding:14px 16px;border-radius:14px;border:2px solid var(--purple-soft);background:#fff}
.signup small{display:block;margin-top:10px;opacity:.85}
.form-msg{width:100%;margin:0;color:var(--purple-dark);font-weight:700}
@media (max-width:820px){.signup{grid-template-columns:1fr}}

/* about */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.portrait{aspect-ratio:1;border-radius:36px;background:var(--pink-soft);display:grid;place-items:center;font-size:7rem;box-shadow:var(--shadow)}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.value{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.value .emoji{font-size:2rem}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* contact form */
.contact-form{display:grid;gap:14px;max-width:560px}
.contact-form label{font-family:var(--font-head);font-weight:500}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;font:inherit;padding:12px 14px;border-radius:14px;border:2px solid var(--purple-soft);background:#fff}

/* footer */
.site-footer{background:var(--footer-bg);color:#e9e4f5;margin-top:40px;padding:48px 0 28px}
.site-footer a{color:#fff}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.foot-grid h4{font-family:var(--font-head);margin:0 0 10px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:6px}
.copy{border-top:1px solid rgba(255,255,255,.15);margin-top:28px;padding-top:18px;font-size:.9rem;opacity:.8}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr}}

.page-head{background:var(--peach);padding:48px 0 40px}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* ---- real images ---- */
.brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 2px 0 var(--purple-soft)}
.nav-links a{padding:8px 11px}
@media (max-width:980px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--cream);padding:12px 16px 20px;border-bottom:2px solid var(--purple-soft);display:none}
  .nav-links.open{display:flex}
  .nav-links .btn{text-align:center}
}
.hero-photo{position:relative;max-width:520px;margin-left:auto}
.hero-photo .frame{border-radius:36px;overflow:hidden;box-shadow:var(--shadow);border:6px solid #fff;aspect-ratio:4/3.4;background:var(--purple-soft)}
.hero-photo .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hero-photo .raffy-pop{position:absolute;width:24%;right:-4%;bottom:-12%;filter:drop-shadow(0 8px 0 rgba(94,70,144,.18));animation:bob 3.5s ease-in-out infinite}
.hero-photo .float{position:absolute;font-size:2rem;animation:bob 3s ease-in-out infinite}
.hero-photo .f1{top:-14px;left:-10px}.hero-photo .f2{top:8%;right:-14px;animation-delay:.8s}
@media (max-width:820px){.hero-photo{margin:0 auto 24px;order:-1;width:min(420px,88%)}}
.photo-card{border-radius:36px;overflow:hidden;box-shadow:var(--shadow);border:6px solid #fff;background:var(--purple-soft)}
.photo-card img{width:100%;height:auto;display:block}
.round-card{aspect-ratio:1;display:grid;place-items:center;background:var(--purple);border-radius:50%;box-shadow:var(--shadow);overflow:hidden;max-width:380px;margin:auto}
.round-card img{width:100%;height:100%;object-fit:cover}
.decor{position:absolute;pointer-events:none}
.head-flex{display:flex;align-items:center;justify-content:space-between;gap:24px}
.head-flex img{width:clamp(110px,18vw,190px);flex:none;filter:drop-shadow(0 8px 0 rgba(94,70,144,.15))}
@media (max-width:560px){.head-flex img{display:none}}
.raffy-tile{display:grid;place-items:center;background:var(--mint);border-radius:36px;box-shadow:var(--shadow);aspect-ratio:1;padding:24px}
.raffy-tile img{width:78%;filter:drop-shadow(0 8px 0 rgba(0,0,0,.08))}

/* poster gallery */
.poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.poster{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:0;padding:0;cursor:zoom-in;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;transition:transform .15s}
.poster:hover{transform:translateY(-4px) rotate(.5deg)}
.poster img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--purple-soft)}
.poster .cap{padding:12px 16px 16px}
.poster .cap b{font-family:var(--font-head);font-weight:600;display:block;font-size:1.05rem}
.poster .cap span{font-size:.9rem;color:var(--muted)}
.lightbox{position:fixed;inset:0;background:rgba(44,35,71,.88);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-height:88vh;max-width:min(92vw,720px);border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.lightbox button{position:absolute;top:14px;right:14px;font-size:1.6rem;background:#fff;border:0;width:44px;height:44px;border-radius:50%;cursor:pointer;color:var(--purple-dark)}
.cta-band{background:var(--pink-soft);border-radius:32px;padding:clamp(24px,4vw,44px);display:flex;gap:28px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.cta-band h2{margin:0 0 6px}
.poster{min-width:0}
.poster img{min-width:0;max-width:100%}
.hero-photo .raffy-pop{right:-1%;bottom:-10%}
.poster img,.head-flex img,.raffy-tile img,.hero-photo .raffy-pop,.photo-card img{height:auto}

/* ---- section rhythm ---- */
main{overflow-x:clip}
.band{--band:var(--cream);position:relative;background:var(--band);padding:80px 0 72px}
.band::before{content:"";position:absolute;left:0;right:0;top:-39px;height:40px;background:var(--band);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22Q150 0 300 22T600 22T900 22T1200 22V40Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22Q150 0 300 22T600 22T900 22T1200 22V40Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.band.white{--band:#fff}.band.pink{--band:#fff0f5}.band.mint{--band:#eaf8f0}.band.lilac{--band:var(--purple-soft)}.band.cream{--band:var(--cream)}
.sec-head{text-align:center;max-width:680px;margin:0 auto 36px}
.sec-head .lead{margin-inline:auto}
.sec-head h2{margin-bottom:.3em}
.center-row{justify-content:center;margin-top:32px}
.topics.one-row{grid-template-columns:repeat(7,1fr)}
@media (max-width:980px){.topics.one-row{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.topics.one-row{grid-template-columns:repeat(2,1fr)}}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.feature{text-align:center;padding:8px 18px}
.feature .ico{width:84px;height:84px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:2.4rem;box-shadow:var(--shadow)}
.feature p{color:var(--muted);margin:0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.duo-card{background:#fff;border-radius:32px;padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.duo-card .art{width:100%;border-radius:24px;overflow:hidden;display:grid;place-items:center;aspect-ratio:16/10}
.duo-card .art img{height:100%;width:auto;max-width:100%;object-fit:contain;padding:10px}
.duo-card .art.round img{width:auto;height:100%;border-radius:50%;padding:0;aspect-ratio:1;object-fit:cover}
.duo-card h3{font-size:1.5rem;margin:0}
.duo-card p{margin:0;color:var(--muted)}
.join{background:linear-gradient(135deg,var(--purple),#a07fd6);color:#fff;border-radius:36px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center;box-shadow:0 10px 0 var(--purple-dark);position:relative;overflow:hidden}
.join h2{color:#fff;margin-bottom:.3em}.join p{opacity:.95;max-width:46ch}
.join img{width:min(220px,100%);justify-self:center;filter:drop-shadow(0 8px 0 rgba(0,0,0,.15))}
@media (max-width:700px){.join{grid-template-columns:1fr;text-align:center}.join p{margin-inline:auto}.join img{order:-1;width:150px}.join .btn-row{justify-content:center}}
.stats{grid-template-columns:repeat(3,auto);justify-content:start;gap:12px}
.stat{padding:12px 20px}
.stat b{font-size:1.6rem}

/* footer wave */
.site-footer{margin-top:0;position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-39px;height:40px;background:var(--footer-bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22Q150 0 300 22T600 22T900 22T1200 22V40Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22Q150 0 300 22T600 22T900 22T1200 22V40Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand img{width:48px;height:48px;border-radius:50%}
.socials{display:flex;gap:10px;margin-top:14px}
.socials a{display:inline-block;background:rgba(255,255,255,.12);padding:8px 16px;border-radius:99px;text-decoration:none;font-family:var(--font-head)}
.socials a:hover{background:rgba(255,255,255,.22)}

/* featured video */
.featured{display:grid;grid-template-columns:1.2fr 1fr;gap:0;background:#fff;border-radius:32px;overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:inherit;margin-bottom:36px}
.featured .thumb{aspect-ratio:auto;min-height:260px;font-size:5rem}
.featured .body{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;justify-content:center;gap:10px;align-items:flex-start}
.featured h2{font-size:clamp(1.4rem,3vw,2rem);margin:0}
.featured p{margin:0;color:var(--muted)}
@media (max-width:760px){.featured{grid-template-columns:1fr}.featured .thumb{aspect-ratio:16/9;min-height:0}}
.about-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:8px}

/* hero: waving Ms Rae + Raffy */
.hero-photo.round{max-width:480px;margin-left:auto}
.hero-photo.round .frame{border-radius:50%;aspect-ratio:1;border:8px solid #fff;background:var(--purple)}
.hero-photo.round .frame img{object-position:center;transform:scale(1.06)}
.hero-photo.round .f1{top:2%;left:2%}.hero-photo.round .f2{top:6%;right:2%}
@media (max-width:820px){.hero-photo.round{width:min(340px,82%)}}
.duo-card .art.photo{aspect-ratio:16/10}
.duo-card .art.photo img{width:100%;height:100%;object-fit:cover;padding:0}

/* poster sheets: tall pages crop gently, full-page previews show everything */
.poster img{aspect-ratio:3/4;object-position:top}
.poster.full img{aspect-ratio:auto;height:auto;object-fit:contain;background:#fff}
.pack-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.poster{min-width:0}.poster img{min-width:0;max-width:100%;height:auto}

/* animated Raffy (green-screen clip keyed onto a canvas) */
.raffy-anim{display:block;width:min(240px,100%);height:auto;filter:drop-shadow(0 8px 0 rgba(0,0,0,.14));justify-self:center}
.raffy-tile .raffy-anim{width:min(300px,86%)}
.join .raffy-anim{width:min(200px,100%)}
@media (max-width:700px){.join .raffy-anim{order:-1;width:150px;margin:0 auto}}

/* hanging sign in a page header */
.hang-head{position:relative;overflow:hidden;min-height:200px}
.hang-head .hang{position:absolute;top:0;right:max(16px,calc(50% - 540px));width:clamp(190px,26vw,330px);height:auto;transform-origin:50% 0;animation:sway 5s ease-in-out infinite;filter:drop-shadow(0 8px 6px rgba(94,70,144,.18))}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@media (prefers-reduced-motion:reduce){.hang-head .hang{animation:none}}
@media (max-width:620px){.hang-head .hang{width:150px;right:8px}}

/* home "Ideas for home": a balanced row of four, centred */
#play-preview{grid-template-columns:repeat(4,1fr);max-width:1120px;margin-inline:auto}
@media (max-width:980px){#play-preview{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){#play-preview{grid-template-columns:1fr;max-width:340px}}

/* hanging sign adapted per page */
.hang-head .head-flex>img{margin-right:calc(clamp(190px,26vw,330px) + 36px)}
.hang-head .wrap{position:relative;z-index:1}
@media (max-width:760px){.hang-head .head-flex>img{display:none}}
@media (max-width:620px){.hang-head .head-flex>div{max-width:calc(100% - 128px)}.hang-head .hang{width:120px}}
.hang-404{position:relative}
.hang-404 .hang{width:clamp(150px,20vw,260px)}
@media (max-width:760px){.hang-404 .hang{width:120px}.hang-404 .split>div:first-child{max-width:calc(100% - 110px)}}
/* word garden: sign hangs in the sky, only where there is room beside the game card */
.wg .wg-sign{display:none;position:absolute;top:0;left:max(12px,calc(50% - 700px));width:clamp(170px,15vw,240px);height:auto;z-index:3;pointer-events:none;transform-origin:50% 0;animation:sway 5s ease-in-out infinite;filter:drop-shadow(0 8px 6px rgba(0,0,0,.18))}
@media (min-width:1240px){.wg .wg-sign{display:block}}
@media (prefers-reduced-motion:reduce){.wg .wg-sign{animation:none}}

/* long-form text pages (privacy) */
.prose{max-width:760px}
.prose h2{margin-top:1.6em;font-size:clamp(1.4rem,3vw,1.8rem)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;margin:1.2em 0 .3em}
.prose ul{padding-left:1.2em}.prose li{margin-bottom:.5em}

/* ---- accessibility ---- */
.btn.pink{background:#c93f77;box-shadow:0 5px 0 #8f2a58}
.btn.pink:hover{box-shadow:0 3px 0 #8f2a58}
.eyebrow{color:#b8316a}
.signup small{opacity:1}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:var(--purple-dark);padding:10px 18px;border-radius:12px;font-family:var(--font-head);font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.25);text-decoration:none;transition:top .15s}
.skip-link:focus{top:10px}
main:focus{outline:none}
.lightbox button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}


/* =========================================================
   Light / dark theme
   Light is the default. The toggle in the header (or the visitor's device setting) switches to dark.
   ========================================================= */
html{color-scheme:light}
.theme-toggle{order:3;flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--purple-soft);background:var(--surface);color:var(--purple-dark);cursor:pointer;display:grid;place-items:center;transition:transform .15s,background .2s}
.theme-toggle:hover{transform:rotate(-12deg) scale(1.06)}
.theme-toggle svg{width:22px;height:22px;display:block}
.theme-toggle .i-sun{display:none}
html[data-theme="dark"] .theme-toggle .i-sun{display:block}
html[data-theme="dark"] .theme-toggle .i-moon{display:none}
.nav-toggle{order:4}
.nav-links{order:2}
.nav{gap:10px}
.nav .brand{margin-right:auto}
@media (min-width:1101px){.nav .brand{margin-right:0}.nav{justify-content:space-between}}

html[data-theme="dark"]{
  color-scheme:dark;
  --cream:#171228; --peach:#211a35; --ink:#f2edfc; --muted:#b9aed2;
  --purple-soft:#2c2347; --purple-dark:#cbb6f4; --pink-soft:#3a2038; --mint:#1d3a2e; --sky:#1e3550;
  --surface:#241c3b; --footer-bg:#0d0919;
  --shadow:0 8px 0 rgba(0,0,0,.38);
}
html[data-theme="dark"] body{background:var(--cream)}
html[data-theme="dark"] .site-header{background:rgba(23,18,40,.92);border-bottom-color:var(--purple-soft)}
html[data-theme="dark"] .band.white{--band:#1c1530}
html[data-theme="dark"] .band.pink{--band:#2a1a31}
html[data-theme="dark"] .band.mint{--band:#162a22}
html[data-theme="dark"] .btn.ghost,html[data-theme="dark"] .stat,html[data-theme="dark"] .card,html[data-theme="dark"] .chip,
html[data-theme="dark"] .value,html[data-theme="dark"] .poster,html[data-theme="dark"] .duo-card,html[data-theme="dark"] .featured{background:var(--surface)}
html[data-theme="dark"] .btn.ghost{border-color:var(--purple-soft)}
html[data-theme="dark"] .chip{border-color:var(--purple-soft)}
html[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:#fff}
html[data-theme="dark"] .bg-yellow{background:#3b3217}
html[data-theme="dark"] .eyebrow{color:#ff9fc3}
html[data-theme="dark"] .hl{background:linear-gradient(transparent 60%,rgba(255,201,74,.3) 60%)}
html[data-theme="dark"] .hero-photo .frame,html[data-theme="dark"] .photo-card{border-color:#3a2f5c}
html[data-theme="dark"] .hero-photo.round .frame{border-color:#3a2f5c}
html[data-theme="dark"] .contact-form input,html[data-theme="dark"] .contact-form textarea,html[data-theme="dark"] .contact-form select{background:var(--surface);color:var(--ink);border-color:#3f3463}
html[data-theme="dark"] .nav-links a:hover,html[data-theme="dark"] .nav-links a[aria-current="page"]{background:var(--purple-soft);color:#fff}
html[data-theme="dark"] .skip-link{background:var(--surface);color:var(--ink)}
html[data-theme="dark"] .thumb{background:var(--purple-soft)}
html[data-theme="dark"] .raffy-tile,html[data-theme="dark"] .portrait{box-shadow:var(--shadow)}
html[data-theme="dark"] .site-footer a{color:#fff}
html[data-theme="dark"] .band{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23ffffff' fill-opacity='.04'%3E%3Cpath d='M30 18l3 7 8 1-6 5 2 8-7-4-7 4 2-8-6-5 8-1z'/%3E%3Ccircle cx='110' cy='40' r='5'/%3E%3Ccircle cx='70' cy='110' r='4'/%3E%3C/g%3E%3C/svg%3E")}
@media (max-width:1100px){html[data-theme="dark"] .nav-links{background:var(--cream)}}

/* nav: never wrap labels; switch to the menu button before the bar gets crowded */
.nav-links a{white-space:nowrap}
@media (max-width:1100px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--cream);padding:12px 16px 20px;border-bottom:2px solid var(--purple-soft);display:none}
  .nav-links.open{display:flex}
  .nav-links .btn{text-align:center}
}

.foot-grid .foot-h{font-family:var(--font-head);font-weight:600;font-size:1.05rem;margin:0 0 10px}


/* video cards (Free Printables) and portrait picture (About) */
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,330px));gap:36px;justify-content:center}
@media (max-width:760px){.vgrid{grid-template-columns:minmax(0,330px)}}
.vcard{margin:0}
.vcard video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:32px;border:6px solid var(--surface);box-shadow:var(--shadow);background:var(--purple-soft)}
.vcard figcaption{text-align:center;margin-top:14px;font-family:var(--font-head)}
.vcard figcaption b{display:block;font-size:1.15rem}
.vcard figcaption span{font-family:var(--font-body);color:var(--muted);font-size:.95rem}
.portrait-card{max-width:360px;margin-inline:auto}

/* =========================================================
   Atmosphere: subtle backgrounds and decoration
   ========================================================= */
.band .wrap{position:relative;z-index:1}
.band{overflow:visible}

/* 1. Giraffe-spot pattern (Raffy's coat) */
.band.cream,.band.mint{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23d9972b' fill-opacity='.075'%3E%3Cpath d='M40 52c14-20 44-14 48 10s-12 44-38 40-26-30-10-50z'/%3E%3Cpath d='M170 30c10-12 32-8 34 8s-10 30-26 28-18-24-8-36z'/%3E%3Cpath d='M130 140c18-16 48-6 46 20s-22 42-44 34-18-40-2-54z'/%3E%3Cpath d='M22 190c10-10 30-6 32 10s-8 26-22 24-18-22-10-34z'/%3E%3Cpath d='M214 200c14-12 34-4 32 16s-18 30-34 24-12-30 2-40z'/%3E%3C/g%3E%3C/svg%3E")}
html[data-theme="dark"] .band.cream,html[data-theme="dark"] .band.mint{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23ffb347' fill-opacity='.045'%3E%3Cpath d='M40 52c14-20 44-14 48 10s-12 44-38 40-26-30-10-50z'/%3E%3Cpath d='M170 30c10-12 32-8 34 8s-10 30-26 28-18-24-8-36z'/%3E%3Cpath d='M130 140c18-16 48-6 46 20s-22 42-44 34-18-40-2-54z'/%3E%3Cpath d='M22 190c10-10 30-6 32 10s-8 26-22 24-18-22-10-34z'/%3E%3Cpath d='M214 200c14-12 34-4 32 16s-18 30-34 24-12-30 2-40z'/%3E%3C/g%3E%3C/svg%3E")}

/* 4. Notebook grid on Free Printables */
.band.notebook{background-image:linear-gradient(rgba(130,102,181,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(130,102,181,.09) 1px,transparent 1px);background-size:30px 30px}
html[data-theme="dark"] .band.notebook{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:30px 30px}

/* 5. Stage lights on Videos */
.band.stage{background-image:radial-gradient(ellipse 55% 45% at 12% 0%,rgba(255,201,74,.2),transparent 70%),radial-gradient(ellipse 55% 45% at 88% 0%,rgba(242,109,154,.16),transparent 70%),radial-gradient(ellipse 40% 30% at 50% 0%,rgba(130,102,181,.12),transparent 70%)}
html[data-theme="dark"] .band.stage{background-image:radial-gradient(ellipse 55% 45% at 12% 0%,rgba(255,201,74,.12),transparent 70%),radial-gradient(ellipse 55% 45% at 88% 0%,rgba(242,109,154,.1),transparent 70%),radial-gradient(ellipse 40% 30% at 50% 0%,rgba(150,120,220,.12),transparent 70%)}

/* 2. Floating doodles */
.doodles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.doodle{position:absolute;font-family:var(--font-head);font-weight:600;color:var(--purple);opacity:.11;transform:rotate(var(--r,0deg));animation:doodle-drift 20s ease-in-out infinite alternate;user-select:none}
.band.pink .doodle{color:#f26d9a}
html[data-theme="dark"] .doodle{color:#fff;opacity:.07}
@keyframes doodle-drift{from{transform:translateY(0) rotate(var(--r,0deg))}to{transform:translateY(-18px) rotate(calc(var(--r,0deg) + 8deg))}}

/* 3. Hoofprint trails */
.trail{position:absolute;top:30px;width:230px;height:200px;pointer-events:none;z-index:0}
.trail.left{left:max(10px,calc(50% - 700px))}.trail.right{right:max(10px,calc(50% - 700px));transform:scaleX(-1)}
.trail .print{position:absolute;width:26px;height:26px;fill:var(--purple);opacity:.16;left:calc(var(--i) * 34px);top:calc(var(--i) * 26px + (var(--i) % 2) * 16px);transform:rotate(calc(18deg + var(--i) * -4deg))}
html[data-theme="dark"] .trail .print{fill:#fff;opacity:.09}
@media (max-width:1240px){.trail{display:none}}

/* 6. Rainbow and clouds */
.sky-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sky-deco .rainbow{position:absolute;right:-70px;top:-150px;width:420px;height:420px;border-radius:50%;border:16px solid rgba(242,109,154,.22);box-shadow:inset 0 0 0 16px rgba(255,201,74,.22),inset 0 0 0 32px rgba(111,207,151,.2),inset 0 0 0 48px rgba(93,169,233,.2),inset 0 0 0 64px rgba(130,102,181,.2)}
.sky-deco .cloud{position:absolute;opacity:.85;animation:cloud-drift 40s ease-in-out infinite alternate}
.sky-deco .cloud svg{display:block;width:100%;height:auto;fill:#fff}
.sky-deco .c1{top:18px;right:30%;width:130px}.sky-deco .c2{top:80px;right:12%;width:90px;animation-duration:55s;animation-direction:alternate-reverse}
html[data-theme="dark"] .sky-deco .cloud{opacity:.14}
html[data-theme="dark"] .sky-deco .rainbow{opacity:.45}
@keyframes cloud-drift{from{transform:translateX(-26px)}to{transform:translateX(34px)}}
[data-sky]{position:relative;overflow:hidden}
[data-sky]>.wrap{position:relative;z-index:1}

/* 7. Night sky (dark mode only) */
.sky-stars{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
html[data-theme="dark"] .sky-stars{display:block}
.sky-stars i{position:absolute;border-radius:50%;background:#fff;opacity:.2;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.8)}50%{opacity:.85;transform:scale(1.25)}}
.sky-stars .moon{position:absolute;right:7%;top:24px;width:46px;height:46px;border-radius:50%;box-shadow:inset -14px 5px 0 0 #ffe9a8;transform:rotate(-12deg);filter:drop-shadow(0 0 12px rgba(255,233,168,.5))}
.hero,.page-head{position:relative}
.hero>.wrap,.page-head>.wrap{position:relative;z-index:1}
@media (max-width:820px){.sky-stars .moon{top:10px;width:34px;height:34px;box-shadow:inset -10px 4px 0 0 #ffe9a8}}

/* 8. Cursor sparkle */
.cursor-spark{position:fixed;z-index:70;pointer-events:none;line-height:1;transform:translate(-50%,-50%);animation:spark-fade .8s ease-out forwards;user-select:none}
@keyframes spark-fade{0%{opacity:.9;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + 26px)) scale(1.2) rotate(40deg)}}

/* decoration is still when motion is reduced */
@media (prefers-reduced-motion:reduce){.doodle,.sky-deco .cloud,.sky-stars i,.cursor-spark{animation:none !important}}


/* Kit signup form (Home and Free Printables) */
.signup .kit-signup{display:block;background:var(--cream);border-radius:20px;padding:18px;margin:0}
.signup .formkit-fields{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.signup .formkit-field{flex:1 1 220px;min-width:0}
.signup .formkit-field input{width:100%;height:100%;min-height:52px}
.signup .formkit-submit:disabled{opacity:.7;cursor:progress}
.formkit-alert{list-style:none;margin:0 0 10px;padding:0;font-weight:700;font-size:.98rem;line-height:1.45}
.formkit-alert:empty{display:none;margin:0}
.formkit-alert li{padding:10px 14px;border-radius:12px;background:#fdecea;color:#8c1d18}
.formkit-alert-success li,.formkit-alert.formkit-alert-success li{background:#e6f6ec;color:#15613a}
html[data-theme="dark"] .formkit-alert li{background:#4a1f24;color:#ffc9c4}
html[data-theme="dark"] .formkit-alert-success li{background:#173826;color:#bdf0cf}
.signup .kit-signup+small{margin-top:10px}

/* Kit's confirmation text is injected into the form; keep it readable on the form's light background */
.signup .kit-signup{color:var(--ink)}
.signup .kit-signup p,.signup .kit-signup div:not(.formkit-fields):not(.formkit-field),.signup .kit-signup .formkit-alert-success{color:var(--ink);font-weight:700;line-height:1.5}
.signup .kit-signup .formkit-alert-success li{background:#e6f6ec;color:#15613a}


/* contact form */
.contact-form .form-note{margin:0;font-size:.92rem;color:var(--muted)}
.contact-form .form-status{margin:0;font-weight:700;min-height:1.4em}
.contact-form .form-status.ok{color:#15613a}.contact-form .form-status.err{color:#8c1d18}
html[data-theme="dark"] .contact-form .form-status.ok{color:#bdf0cf}html[data-theme="dark"] .contact-form .form-status.err{color:#ffc9c4}
.contact-form .btn:disabled{opacity:.7;cursor:progress}