:root{--mag:#b8207f;--pink:#c21f8a;--lime:#7cf04a;--yellow:#ffe94d;--blue:#1a00a8;--ink:#111;--paper:#fff7fb}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Nunito,system-ui,sans-serif;color:var(--ink);line-height:1.6;background:var(--paper);background-image:radial-gradient(rgba(184,32,127,.14) 1.6px,transparent 1.8px);background-size:16px 16px}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.spk{position:absolute;width:44px;height:44px;z-index:2;pointer-events:none}
.s1{top:24px;left:6%;width:56px;height:56px}.s2{top:120px;right:8%;width:34px;height:34px}.s3{bottom:40px;left:12%;width:30px;height:30px}.s4{bottom:90px;right:5%;width:60px;height:60px}
header{position:relative;text-align:center;padding:40px 20px 60px;background:var(--mag);color:#fff;overflow:hidden;border-bottom:6px solid var(--ink)}
.logo{width:150px;height:150px;object-fit:cover;display:block;margin:0 auto 18px;border:5px solid var(--ink);border-radius:18px;box-shadow:8px 8px 0 var(--yellow);transform:rotate(-4deg);position:relative;z-index:3}
h1{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(2.4rem,7vw,4.6rem);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--lime);text-shadow:4px 4px 0 var(--ink);margin:6px 0 14px;position:relative;z-index:3}
.tagline{display:inline-block;font-family:"Permanent Marker",cursive;font-size:1.3rem;background:var(--yellow);color:var(--ink);padding:4px 16px;border:3px solid var(--ink);transform:rotate(-2deg);box-shadow:4px 4px 0 var(--ink);position:relative;z-index:3}
.hero{display:block;width:min(620px,100%);margin:30px auto 0;border:6px solid var(--ink);border-radius:10px;box-shadow:12px 12px 0 var(--yellow);transform:rotate(1.2deg);position:relative;z-index:3}
main{padding-top:56px}
.bio{position:relative;max-width:760px;margin:0 auto 70px;background:#fff;border:5px solid var(--ink);border-radius:6px;padding:36px 34px 28px;box-shadow:12px 12px 0 var(--mag);font-size:1.03rem;transform:rotate(-.6deg)}
.bio h2{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2rem,5vw,2.8rem);text-align:center;color:var(--mag);margin-bottom:10px;letter-spacing:.02em}
.bio .bio-sub{text-align:center;font-weight:800;margin:0 auto 22px;max-width:560px;line-height:1.7;background:var(--yellow);border:3px solid var(--ink);padding:8px 14px;transform:rotate(-1deg)}
.bio p{margin:0 0 12px}
.bio .sig{font-family:"Permanent Marker",cursive;font-size:1.6rem;color:var(--pink);text-align:right;margin-top:14px;transform:rotate(-3deg)}
.bio .spk{top:-26px;right:-22px;width:64px;height:64px}
.feature{position:relative;background:var(--mag);border:5px solid var(--ink);border-radius:10px;padding:30px 24px;margin:0 auto 60px;display:flex;gap:30px;align-items:center;justify-content:center;flex-wrap:wrap;box-shadow:12px 12px 0 var(--ink)}
.feature img{width:min(400px,100%);border:5px solid var(--ink);border-radius:6px;transform:rotate(-1.5deg);box-shadow:8px 8px 0 var(--yellow)}
.feature .txt{max-width:420px;color:#fff}
.feature h2,.custom h2{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1;color:var(--lime);text-shadow:3px 3px 0 var(--ink);margin-bottom:12px}
.feature p{font-weight:700;font-size:1.1rem}
.feature .s1{top:-22px;left:-14px}.feature .s4{bottom:-24px;right:-18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:40px 34px;padding:0 6px}
.card{background:#fff;border:4px solid var(--ink);border-radius:4px;padding:12px 12px 0;display:flex;flex-direction:column;box-shadow:9px 9px 0 var(--mag);transition:transform .2s,box-shadow .2s}
.card:nth-child(5n+1){transform:rotate(-1.6deg)}.card:nth-child(5n+2){transform:rotate(1.2deg);box-shadow:9px 9px 0 var(--lime)}
.card:nth-child(5n+3){transform:rotate(-.8deg);box-shadow:9px 9px 0 var(--yellow)}.card:nth-child(5n+4){transform:rotate(1.6deg);box-shadow:9px 9px 0 var(--blue)}
.card:nth-child(5n){transform:rotate(-1.1deg);box-shadow:9px 9px 0 var(--lime)}
.card:hover{transform:rotate(0) scale(1.03);box-shadow:14px 14px 0 var(--ink)}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border:3px solid var(--ink);background:#eee}
.card .body{padding:16px 6px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h2{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:1.45rem;line-height:1.1;letter-spacing:.02em;color:var(--mag)}
.price{align-self:flex-start;font-family:"Permanent Marker",cursive;font-size:1.25rem;background:var(--mag);color:#fff;padding:0 12px;border:3px solid var(--ink);border-radius:30px;transform:rotate(-3deg)}
.desc{font-size:.95rem;color:#333;flex:1}
.btn{margin-top:10px;display:block;text-align:center;font-family:Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.06em;background:var(--yellow);color:var(--ink);text-decoration:none;font-size:1.2rem;padding:10px;border:3px solid var(--ink);border-radius:10px;box-shadow:5px 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);background:var(--lime)}
.custom{position:relative;margin:80px auto 0;background:#1b1b1b;border:5px solid var(--ink);border-radius:10px;padding:30px 24px;display:flex;gap:30px;align-items:center;justify-content:center;flex-wrap:wrap;box-shadow:12px 12px 0 var(--mag)}
.custom img{width:min(300px,100%);border:5px solid var(--yellow);border-radius:6px;transform:rotate(1.5deg)}
.custom .txt{max-width:440px;color:#fff;font-size:1.1rem;font-weight:700}
.custom a{display:inline-block;margin-top:16px;font-family:Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:1.2rem;background:var(--lime);color:var(--ink);text-decoration:none;padding:10px 20px;border:3px solid var(--ink);border-radius:10px;box-shadow:5px 5px 0 var(--mag)}
.custom .s2{top:-18px;right:24px}
.note{text-align:center;font-weight:800;margin:60px auto 0;display:table;background:#fff;border:3px dashed var(--mag);padding:8px 18px;border-radius:8px}
.tag{display:block;width:min(520px,100%);margin:34px auto 0;border:4px solid var(--ink);border-radius:8px;box-shadow:8px 8px 0 var(--yellow)}
footer{position:relative;overflow:hidden;margin-top:70px;padding:48px 0 50px;background:var(--mag);color:#fff;text-align:center;border-top:6px solid var(--ink)}
footer h3{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:2.6rem;color:var(--lime);text-shadow:3px 3px 0 var(--ink);margin-bottom:14px}
footer a{color:#fff;text-decoration:none;font-weight:800;font-size:1.08rem;border-bottom:3px solid var(--yellow)}
footer a:hover{color:var(--yellow)}
footer p{margin:8px 0;word-break:break-word}
.copy{margin-top:22px!important;font-size:.85rem;opacity:.9}
@media(max-width:600px){.bio{transform:none;padding:30px 20px 22px;box-shadow:8px 8px 0 var(--mag)}.bio .spk{right:-8px;width:46px;height:46px}.logo{width:120px;height:120px}.hero{transform:none;box-shadow:8px 8px 0 var(--yellow)}.spk.s2,.spk.s3{display:none}.feature,.custom{padding:24px 16px}}
footer .powered{margin-top:2px!important;font-size:.8rem;opacity:.8}
footer .powered a{font-size:inherit;font-weight:700;border-bottom-width:2px}
footer .footnav a{font-size:.95rem;border-bottom-width:2px}