@font-face{font-family:Grandstander;src:url(fonts/Grandstander.ttf);font-weight:100 900}@font-face{font-family:Fredoka;src:url(fonts/Fredoka.ttf);font-weight:300 700}@font-face{font-family:"Baloo 2";src:url(fonts/Baloo2.ttf);font-weight:400 800}@font-face{font-family:Shrikhand;src:url(fonts/Shrikhand.ttf)}@font-face{font-family:"Titan One";src:url(fonts/TitanOne.ttf)}@font-face{font-family:"Mountains of Christmas";src:url(fonts/MountainsofChristmas-Bold.ttf);font-weight:700}
@font-face{font-family:Creepster;src:url(fonts/Creepster-Regular.ttf)}@font-face{font-family:Bungee;src:url(fonts/Bungee-Regular.ttf)}
@font-face{font-family:Righteous;src:url(fonts/Righteous-Regular.ttf)}@font-face{font-family:Rye;src:url(fonts/Rye-Regular.ttf)}
@font-face{font-family:Montserrat;src:url(fonts/Montserrat.ttf);font-weight:100 900}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:var(--bodyw,500) 18px/1.65 var(--body,Montserrat),system-ui,sans-serif;color:var(--ink);background:var(--bg);min-height:100vh;overflow-x:hidden}
a{color:var(--link)}img{max-width:100%}
h1,h2{font-family:var(--head);font-weight:400;line-height:1.1;color:var(--headc);margin:.2em 0 .4em;letter-spacing:.02em}
h1{font-size:clamp(2.6rem,7vw,5rem);text-shadow:var(--hshadow)}h2{font-size:clamp(1.8rem,4vw,2.6rem)}
header.site{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1.2rem;background:var(--bar);backdrop-filter:blur(6px);border-bottom:4px solid var(--accent)}
.logo{font-family:var(--head);font-size:2rem;color:var(--logoc,var(--headc));text-decoration:none;display:flex;align-items:center;gap:.4rem;line-height:1}
.logo small{font-family:var(--accentfont);font-size:.8rem;color:var(--accent);margin-left:.3rem}
.banner-art{width:44px;height:44px;background:var(--art) center/contain no-repeat;display:inline-block;animation:bob 3s ease-in-out infinite}
nav{display:flex;gap:.3rem;flex-wrap:wrap}nav a{font-family:var(--accentfont);text-decoration:none;color:var(--navc);padding:.35rem .8rem;border-radius:999px;transition:.2s}
nav a:hover,nav a[aria-current]{background:var(--accent);color:var(--onaccent);transform:rotate(-2deg)}
.burger{display:none;font-size:1.8rem;color:var(--headc);cursor:pointer}
main{max-width:1100px;margin:0 auto;padding:1rem 1.2rem 3rem;position:relative;z-index:1}
section{margin:2.5rem 0;position:relative}
.hero{display:flex;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:2.5rem 1rem;border-radius:28px;background:var(--herobg);border:4px dashed var(--accent);box-shadow:var(--shadow)}
.hero.small{padding:1.5rem 1rem}.hero-in{max-width:640px}.lead{font-size:1.15rem}
.mascot{width:150px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));animation:bob 4s ease-in-out infinite}.m2{animation-delay:-2s}
.m3{position:absolute;right:-10px;top:-50px;width:110px}
.btn{display:inline-block;margin:.3rem;padding:.8rem 1.4rem;font-family:var(--accentfont);text-decoration:none;background:var(--accent);color:var(--onaccent);border-radius:14px;box-shadow:0 5px 0 var(--accent2);transition:.15s}
.btn:hover{transform:translateY(-3px) rotate(-1deg)}.btn.alt{background:var(--accent2);color:var(--onaccent2);box-shadow:0 5px 0 var(--accent)}
.stamp{display:inline-block;font-family:var(--accentfont);font-size:1.4rem;color:var(--stamp);border:3px solid var(--stamp);padding:.1rem .8rem;transform:rotate(-3deg);border-radius:6px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:120px;padding:1rem;border-radius:18px;text-decoration:none;font-family:var(--accentfont);font-size:1.05rem;color:var(--tilec);background:var(--tile);border:3px solid var(--tileb);box-shadow:var(--shadow);transition:.2s}
.tile:nth-child(even){background:var(--tile2)}.tile:hover{transform:translateY(-5px) rotate(1.5deg) scale(1.03)}
.tile .emo{font-size:2.4rem;transition:.3s}.tile:hover .emo{transform:scale(1.25) rotate(-10deg)}
.tiles.big .tile{min-height:160px;font-size:1.3rem}.center{text-align:center}
.board{padding:2rem 1.2rem 2.5rem;border-radius:24px;background:var(--boardbg);box-shadow:inset 0 0 60px rgba(0,0,0,.5),var(--shadow)}
.board h2{text-align:center;color:var(--boardh)}
.stickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem 1.5rem}
.sticker{position:relative;display:block;text-decoration:none;color:var(--ink);background:#fff;padding:10px 10px 12px;border-radius:16px;box-shadow:0 0 0 4px #fff,0 10px 18px rgba(0,0,0,.45);transition:.25s}
.sticker img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.sticker b{display:block;font-size:.9rem;margin-top:.5rem;text-align:center;color:#222}
.s0{transform:rotate(-3deg)}.s1{transform:rotate(2deg)}.s2{transform:rotate(-1.5deg)}.s3{transform:rotate(3deg)}
.sticker:hover{transform:rotate(0) scale(1.06);z-index:2}
.pin{position:absolute;top:-14px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--pin);box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),0 3px 4px rgba(0,0,0,.4)}
.card{background:var(--card);color:var(--cardink);padding:1.6rem;border-radius:22px;box-shadow:var(--shadow);border:3px solid var(--cardb)}
.card h1,.card h2{color:var(--cardh);text-shadow:none}.card a{color:var(--cardlink)}
.ml{display:flex;flex-wrap:wrap;gap:.6rem}.ml input[type=email]{flex:1 1 220px;padding:.85rem 1rem;border-radius:12px;border:3px solid var(--accent);font:inherit}
.ml button{padding:.85rem 1.4rem;border:0;border-radius:12px;background:var(--accent);color:var(--onaccent);font-family:var(--accentfont);font-size:1rem;cursor:pointer;box-shadow:0 4px 0 var(--accent2)}.hp{position:absolute;left:-9999px}
details{border-bottom:2px dashed var(--cardb);padding:.6rem 0}summary{font-family:var(--accentfont);font-size:1.1rem;cursor:pointer;color:var(--cardh)}
.polaroid{float:right;width:min(320px,45%);margin:0 0 1rem 1.2rem;background:#fff;padding:10px 10px 30px;transform:rotate(3deg);box-shadow:0 8px 16px rgba(0,0,0,.35)}.big{font-family:var(--accentfont);font-size:1.2rem}
footer.site{text-align:center;padding:2rem 1rem;background:var(--bar);color:var(--navc);border-top:4px solid var(--accent);position:relative;z-index:1}footer a{color:var(--navc)}
.fsoc{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;font-family:var(--accentfont)}
.deco{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.deco i{position:absolute;width:var(--dsize,60px);height:var(--dsize,60px);background:var(--decoimg) center/contain no-repeat;opacity:.55;animation:float 14s linear infinite}
.deco i:nth-child(1){left:4%;top:20%}.deco i:nth-child(2){left:88%;top:12%;animation-delay:-3s}.deco i:nth-child(3){left:12%;top:70%;animation-delay:-6s}
.deco i:nth-child(4){left:78%;top:62%;animation-delay:-9s}.deco i:nth-child(5){left:48%;top:85%;animation-delay:-4s}.deco i:nth-child(6){left:60%;top:35%;animation-delay:-11s}
@keyframes bob{50%{transform:translateY(-8px)}}@keyframes float{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(20px,-30px) rotate(12deg)}100%{transform:translate(0,0) rotate(0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:720px){.burger{display:block}nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bar);padding:1rem}
#m:checked~nav{display:flex}.mascot{width:80px}.hero .m2{display:none}.polaroid{float:none;width:80%;margin:1rem auto;display:block}.m3{width:70px;top:-30px}}
/* v3 scenes */
.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.scene{display:block;border-radius:22px;overflow:hidden;border:6px solid #fff;box-shadow:0 12px 26px rgba(0,0,0,.5);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.scene img{display:block;width:100%;height:auto}.scene:nth-child(odd){transform:rotate(-1.5deg)}.scene:nth-child(even){transform:rotate(1.5deg)}
.scene:hover{transform:rotate(0) scale(1.06) translateY(-6px);box-shadow:0 20px 36px rgba(0,0,0,.6);z-index:2}
.collage{margin:1rem auto 0;max-width:1000px;position:relative;z-index:2}.collage img{width:100%;animation:bob 6s ease-in-out infinite}
.stamp{background:var(--bar);position:relative;z-index:3;padding:.25rem .9rem}
.divider{height:46px;margin:1.5rem -1.2rem;background:var(--divider) center/auto 100% repeat-x}
.badge{position:absolute;z-index:3;font-family:var(--accentfont);background:var(--burstbg,#aae63c);color:#1a0f24;padding:.4rem .9rem;border:4px solid #fff;border-radius:10px;box-shadow:0 6px 10px rgba(0,0,0,.4);font-size:1rem}
.b1{top:-18px;left:16px;transform:rotate(-8deg)}.b2{top:-14px;right:20px;transform:rotate(6deg);background:var(--accent)}
.lead{font-size:1.3rem}
@media (max-width:720px){.scenes{grid-template-columns:repeat(2,1fr);gap:.9rem}.badge{font-size:.8rem}}