:root { --ink:#132a3a; --blue:#57b4d6; --yellow:#ffd141; --coral:#ef4e43; --cream:#fff8e9; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; overflow:hidden; color:var(--ink); background:var(--blue); font-family:"DM Mono", monospace; }
.card { position:relative; isolation:isolate; width:min(950px,calc(100% - 32px)); min-height:min(650px,calc(100vh - 32px)); overflow:hidden; border:7px solid var(--ink); border-radius:28px; background:var(--cream); box-shadow:12px 12px 0 rgba(19,42,58,.9); }
.sunburst { position:absolute; z-index:-1; width:760px; aspect-ratio:1; top:-260px; left:-210px; border-radius:50%; opacity:.32; background:repeating-conic-gradient(var(--yellow) 0 11deg,transparent 11deg 22deg); }
.content { position:relative; z-index:1; width:52%; margin:0 auto; padding:84px 0 88px; text-align:center; }
.eyebrow { margin:0 0 8px; font-weight:bold; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:0; color:var(--coral); font-family:"Luckiest Guy", Impact, sans-serif; font-size:clamp(4rem,10vw,7.8rem); line-height:.79; letter-spacing:.035em; text-shadow:4px 4px 0 var(--ink); }
h1 span { color:var(--yellow); }
.tagline { max-width:430px; margin:31px auto 14px; font-size:clamp(1rem,2vw,1.2rem); line-height:1.55; }
.note { display:inline-block; margin:0; padding:9px 12px; border:3px solid var(--ink); border-radius:999px; background:#fff; font-size:.78rem; font-weight:bold; transform:rotate(-2deg); }
.pj-wrap, .rooster-wrap { position:absolute; bottom:36px; width:min(31%,275px); margin:0; filter:drop-shadow(7px 7px 0 rgba(19,42,58,.92)); }
.pj-wrap { left:3%; }
.rooster-wrap { right:3%; }
.pj-wrap img, .rooster-wrap img { display:block; width:100%; height:auto; }
.pj-wrap img { transform:scaleX(-1) rotate(2deg); }
.rooster-wrap img { transform:rotate(3deg); }
footer { position:absolute; right:28px; bottom:15px; font-size:.7rem; font-weight:bold; }
@media (max-width:700px) { .card { min-height:calc(100vh - 26px); border-width:5px; border-radius:20px; box-shadow:7px 7px 0 var(--ink); } .content { width:auto; padding:56px 25px 285px; } .pj-wrap, .rooster-wrap { width:150px; bottom:47px; } .pj-wrap { left:3%; } .rooster-wrap { right:3%; } footer { right:50%; transform:translateX(50%); bottom:16px; white-space:nowrap; } }