/* Fun layer, Nov 11 */
:root{--yellow:#ffd84d;--pink:#ff8fb8;--sky:#9ed3ff;--hand:"Caveat","Comic Sans MS","Marker Felt",cursive}
.center{text-align:center}.mx{margin-left:auto;margin-right:auto}.pt0{padding-top:0}
.center-btns{justify-content:center}
.sticker{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:999px;color:var(--navy);background:var(--sky);transform:rotate(-3deg);box-shadow:0 3px 0 rgba(15,21,35,.15);margin-bottom:16px}
.sticker.yellow{background:var(--yellow)}.sticker.pink{background:var(--pink)}.sticker.blue{background:var(--sky)}
.fun-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem);background:radial-gradient(circle at 12% 20%,#fff6cc 0,transparent 32%),radial-gradient(circle at 88% 30%,#ffe1ec 0,transparent 30%),linear-gradient(180deg,#fff,var(--page));overflow:hidden}
.fun-hero.slim{padding-bottom:clamp(1.5rem,4vw,2.5rem)}
.fun-hero h1{font-size:clamp(2.6rem,7vw,4.8rem);font-weight:900;line-height:1.02}
.fun-hero .lede{font-size:clamp(1.15rem,2.2vw,1.45rem);margin-top:16px;max-width:560px;color:var(--text)}
.squiggle{color:var(--blue);background:linear-gradient(transparent 68%,var(--yellow) 68%,var(--yellow) 92%,transparent 92%);padding:0 .08em}
.fun-hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
/* polaroids */
.pola{background:#fff;padding:10px 10px 0;border-radius:4px;box-shadow:0 12px 30px rgba(15,21,35,.16);position:relative;transition:transform .2s}
.pola img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;background:#e6ebf2}
.pola figcaption{font-family:var(--hand);font-weight:700;font-size:1.45rem;line-height:1.1;color:var(--navy);text-align:center;padding:10px 6px 12px}
.pola::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(255,216,77,.75);transform:rotate(-4deg);border-radius:2px}
.pola:hover{transform:rotate(0) scale(1.03);z-index:5}
.collage{position:relative;height:500px}
.collage .pola{position:absolute;width:52%}
.collage .p1{left:0;top:30px;transform:rotate(-7deg);z-index:2}
.collage .p1 img{aspect-ratio:1}
.collage .p2{right:0;top:0;transform:rotate(5deg);z-index:1}
.collage .p3{left:28%;top:210px;width:44%;transform:rotate(-2deg);z-index:3}
.collage .p3::before{background:rgba(255,143,184,.75)}
/* mega line */
.mega{font-size:clamp(2rem,5.5vw,3.6rem);font-weight:900;color:#fff;line-height:1.08;letter-spacing:-.02em}
.mega.dark{color:var(--navy);margin-top:56px}
/* doors */
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:28px}
.door{display:flex;flex-direction:column;background:#fff;border-radius:16px;padding:12px 12px 18px;text-decoration:none;color:var(--navy);box-shadow:0 10px 26px rgba(15,21,35,.1);border:3px solid var(--navy);transition:transform .15s}
.door:nth-child(odd){transform:rotate(-1.5deg)}.door:nth-child(even){transform:rotate(1.5deg)}
.door:hover{transform:rotate(0) translateY(-4px)}
.door img,.door-art{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.door .qr-door{object-fit:contain;background:#fff;padding:10px;border:1px solid var(--border)}
.door-art{display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;background:var(--yellow);font-family:var(--hand);font-size:2rem;font-weight:700;line-height:1.05}
.door-art.indigo{background:var(--indigo);color:#fff;font-family:var(--font);font-weight:900;font-size:2.2rem}
.door span{font-weight:900;font-size:1.35rem;margin-top:14px}
.door small{color:var(--muted);font-size:15px;margin-top:2px}
/* family wall */
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 30px;margin-top:16px}
.wall .pola:nth-child(6n+1){transform:rotate(-3deg)}
.wall .pola:nth-child(6n+2){transform:rotate(2.5deg);margin-top:24px}
.wall .pola:nth-child(6n+3){transform:rotate(-1.5deg)}
.wall .pola:nth-child(6n+4){transform:rotate(3deg)}
.wall .pola:nth-child(6n+5){transform:rotate(-2.5deg);margin-top:24px}
.wall .pola:nth-child(6n+6){transform:rotate(1.5deg)}
.wall .pola:nth-child(3n+2)::before{background:rgba(255,143,184,.75)}
.wall .pola:nth-child(3n)::before{background:rgba(158,211,255,.85)}
.wall .w4 img{background:#000;object-fit:contain}
.note{margin-top:44px;font-size:1.3rem;font-weight:800;color:var(--navy)}
.note .sticker{margin:0 8px 0 0;vertical-align:middle}
/* music */
.music{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.video-pola{background:#fff;padding:12px 12px 4px;border-radius:4px;box-shadow:0 14px 34px rgba(15,21,35,.18);transform:rotate(-2deg);max-width:460px;justify-self:center;width:100%}
.video-pola video{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:#000;border-radius:2px}
.video-pola .cap{font-family:var(--hand);font-size:1.5rem;font-weight:700;text-align:center;color:var(--navy);padding:8px 0}
.music h2{font-size:clamp(2rem,4vw,2.8rem);font-weight:900}
.band{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.band li{background:#fff;border:2px solid var(--navy);border-radius:14px;padding:12px 14px;font-size:15.5px;box-shadow:4px 4px 0 var(--navy)}
.band li b{display:block;font-size:1.25rem;font-weight:900;color:var(--navy)}
.band li:nth-child(1){background:#fff6cc}.band li:nth-child(2){background:#e3f2ff}.band li:nth-child(3){background:#ffe1ec}.band li:nth-child(4){background:#eeedf8}
/* hobbies */
.hobbies{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-top:28px}
.hob{width:260px;padding:30px 20px;border-radius:20px;border:3px solid var(--navy);box-shadow:6px 6px 0 var(--navy);background:var(--yellow);display:flex;flex-direction:column;align-items:center}
.hob.h1{transform:rotate(-3deg)}.hob.h2{transform:rotate(3deg);background:var(--pink)}
.hob .big{font-size:3rem;font-weight:900;color:var(--navy);line-height:1}
.hob small{font-size:16px;font-weight:600;color:var(--navy);margin-top:8px}
/* comic */
.comic{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:20px}
.panel{grid-column:span 2;background:#fff;border:3px solid var(--navy);border-radius:14px;padding:24px 22px 22px;box-shadow:6px 6px 0 var(--navy);position:relative}
.panel.c4,.panel.c5{grid-column:span 3}
.panel.c1{background:#fff6cc}.panel.c3{background:#ffe1ec}.panel.c5{background:#e3f2ff}
.panel .num{position:absolute;top:-16px;left:-12px;width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;font-weight:900;font-size:1.3rem;display:flex;align-items:center;justify-content:center;border:3px solid var(--navy)}
.panel h3{font-size:1.45rem;font-weight:900;line-height:1.15}
.panel p{margin-top:8px;font-size:16.5px}
.bubble{display:inline-block;position:relative;background:#fff;border:2px solid var(--navy);border-radius:18px;padding:10px 16px;margin-top:14px !important;font-family:var(--hand);font-size:1.5rem !important;font-weight:700;color:var(--navy);line-height:1.15}
.bubble::after{content:"";position:absolute;left:24px;bottom:-10px;width:16px;height:16px;background:#fff;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg)}
/* services */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:16px}
.svc-card{background:#fff;border:3px solid var(--navy);border-radius:18px;padding:30px;box-shadow:8px 8px 0 var(--blue);position:relative}
.svc-card.s2{box-shadow:8px 8px 0 var(--indigo)}
.svc-card .tag{font-weight:900;font-size:3.2rem;line-height:1;color:var(--yellow);-webkit-text-stroke:2px var(--navy)}
.svc-card.s2 .tag{color:var(--pink)}
.svc-card h3{font-size:1.75rem;font-weight:900;margin:8px 0 10px}
.svc-card .more{display:block;margin-top:22px;font-weight:700;text-decoration:none}
/* work */
.fun-cta{border:3px solid var(--navy);box-shadow:8px 8px 0 var(--yellow)}
.fun-cta h2{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:900}
.asks{display:grid;gap:14px;margin-top:18px}
.asks li{font-size:1.1rem}.asks b{color:var(--navy)}
.qr-pola{background:#fff;padding:12px 12px 4px;border-radius:4px;box-shadow:0 12px 30px rgba(15,21,35,.16);transform:rotate(3deg)}
.qr-pola .qr{border:0}
.qr-pola .qr-cap{font-family:var(--hand);font-size:1.5rem;color:var(--navy);font-weight:700}
@media (max-width:900px){
 .fun-hero-grid,.music,.svc{grid-template-columns:1fr}
 .collage{height:430px;max-width:480px;width:100%;margin:0 auto}
 .doors{grid-template-columns:repeat(2,minmax(0,1fr))}
 .wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
 .wall .pola{margin-top:0 !important}
 .comic{grid-template-columns:1fr 1fr}
 .panel,.panel.c4,.panel.c5{grid-column:span 1}
 .panel.c5{grid-column:span 2}
}
@media (max-width:560px){
 .collage{height:360px}
 .collage .p3{top:170px}
 .pola figcaption{font-size:1.2rem;padding:8px 4px 10px}
 .doors{gap:16px}
 .door span{font-size:1.1rem}.door small{font-size:13.5px}
 .door-art{font-size:1.4rem;padding:10px}.door-art.indigo{font-size:1.6rem}
 .wall{gap:22px 14px}
 .pola{padding:7px 7px 0}
 .comic{grid-template-columns:1fr;gap:26px}
 .panel.c5{grid-column:span 1}
 .hob{width:100%;max-width:300px}
 .svc-card{padding:24px}
 .band li{font-size:14.5px}
 .note{font-size:1.1rem}
}
/* collage fix */
.collage{height:600px}
.collage .pola{width:46%}
.collage .p1{left:0;top:40px}
.collage .p2{right:0;top:0}
.collage .p3{left:27%;top:330px;width:40%}
@media (max-width:900px){.collage{height:600px}}
@media (max-width:560px){
 .collage{height:420px}
 .collage .p3{top:225px;width:42%;left:28%}
 .collage .pola figcaption{font-size:1.05rem}
}
