:root{--kraft:#c9a26b;--kraft2:#b88b52;--ink:#2a1a0a;--pink:#ff2bd6;--lime:#7dff2b;--cyan:#21e6ff;--yellow:#ffe62b;--orange:#ff7a1a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:19px/1.5 "Patrick Hand","Comic Sans MS",cursive;
 background:
  radial-gradient(circle at 8% 12%,rgba(255,43,214,.55) 0 38px,transparent 40px),
  radial-gradient(circle at 92% 30%,rgba(33,230,255,.5) 0 55px,transparent 58px),
  radial-gradient(circle at 15% 70%,rgba(125,255,43,.45) 0 46px,transparent 49px),
  radial-gradient(circle at 85% 85%,rgba(255,230,43,.55) 0 36px,transparent 39px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 2px,transparent 2px 9px),
  linear-gradient(180deg,var(--kraft),var(--kraft2));
 background-attachment:fixed}
a{color:#a0007f}
.marquee{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;
 padding:.6rem 1.2rem;background:#1b1022;border-bottom:6px dashed var(--yellow);box-shadow:0 4px 0 var(--pink)}
.logo{font:2.2rem/1 Bangers,Impact,sans-serif;letter-spacing:2px;text-decoration:none;
 background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--lime),var(--cyan),#a35bff);
 -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(2px 2px 0 #000)}
.logo small{font-size:1.2rem}
nav a{font:1.25rem Bangers,Impact,sans-serif;letter-spacing:1px;color:#fff;text-decoration:none;margin-left:.4rem;
 padding:.2rem .7rem;border:2px solid #fff;border-radius:999px;display:inline-block;transform:rotate(-2deg)}
nav a:nth-child(2n){transform:rotate(2deg)}
nav a:hover,nav a.on{background:var(--lime);color:#000;border-color:var(--lime)}
main{max-width:1000px;margin:0 auto;padding:1.5rem 1rem 3rem}
h1.drip{font:3rem/1.05 Bangers,Impact,sans-serif;letter-spacing:2px;color:#fff;text-align:center;margin:1.2rem 0 .4rem;
 text-shadow:3px 3px 0 var(--pink),6px 6px 0 #000;transform:rotate(-1.5deg)}
h2,h3{font-family:"Permanent Marker",cursive;font-weight:normal;margin:.2rem 0 .3rem}
.marker{font-size:2rem;color:#1b1022;display:inline-block;background:var(--yellow);padding:0 .6rem;transform:rotate(-1deg);box-shadow:4px 4px 0 #000}
.lead{text-align:center;font-size:1.3rem;margin:.2rem auto 1rem;max-width:700px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1.5rem;align-items:center}
.splat-card,.board,.card,.sticky{background:#f3e3c3;border:3px solid #000;border-radius:6px;box-shadow:7px 7px 0 rgba(0,0,0,.85);position:relative}
.splat-card{padding:1rem 1.4rem;transform:rotate(.6deg)}
.splat-card h1.drip{font-size:2.5rem;color:var(--cyan);text-shadow:3px 3px 0 #000;margin-top:0}
.splat-card::before,.card::before,.board::before{content:"";position:absolute;top:-14px;left:40%;width:110px;height:26px;background:rgba(255,255,200,.75);
 border:1px solid rgba(0,0,0,.15);transform:rotate(-4deg)}
.quote{font-family:"Permanent Marker",cursive;font-size:1.25rem;color:#a0007f;border-left:6px solid var(--lime);padding-left:.7rem}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0}
.tile{display:block;text-align:center;text-decoration:none;color:#000;font:1.6rem Bangers,Impact,sans-serif;letter-spacing:1px;
 padding:1rem .6rem;border:3px solid #000;border-radius:14px;box-shadow:6px 6px 0 #000;transition:transform .15s}
.tile b{display:block;font-size:3.2rem;line-height:1}
.tile span{display:block;font:1rem "Patrick Hand",cursive}
.tile:hover{transform:rotate(-3deg) scale(1.04)}
.pink{background:var(--pink)}.green{background:var(--lime)}.blue{background:var(--cyan)}
.board{padding:1.2rem 1.4rem;margin:2rem 0}
.cols{display:grid;grid-template-columns:1.3fr 1fr;gap:1rem;align-items:center}
.cols .polaroid{max-width:230px}
.facts{list-style:"🎨 ";padding-left:1.4rem}.moves li{margin:.3rem 0}
.polaroid{background:#fff;padding:.5rem .5rem .2rem;margin:.5rem auto;box-shadow:5px 5px 0 rgba(0,0,0,.7);max-width:320px;border:1px solid #000}
.polaroid img{display:block;width:100%;height:auto}
.polaroid figcaption{font:1rem "Permanent Marker",cursive;text-align:center;padding:.3rem 0;color:#333}
.polaroid.big{max-width:420px}.polaroid.wide{max-width:100%}
.tilt-l{transform:rotate(-3deg)}.tilt-r{transform:rotate(3deg)}
.gallery{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin:1.2rem 0}
.gallery .polaroid{max-width:260px;margin:0}
.toc{columns:2;background:#1b1022;color:#fff;padding:1rem 1rem 1rem 2.4rem;border-radius:8px;border:3px dashed var(--lime)}
.toc a{color:var(--yellow)}
.card{padding:1.1rem 1.4rem;margin:2.2rem 0;overflow:hidden}
.card.c0{border-left:12px solid var(--pink)}.card.c1{border-left:12px solid var(--lime)}
.card.c2{border-left:12px solid var(--cyan)}.card.c3{border-left:12px solid var(--orange)}
.card h2{font-size:1.8rem;color:#1b1022}
.of{margin:0 0 .6rem;font-style:italic;color:#6b4a22}
.lyric{white-space:pre-line}
.script .lyric{font-size:1.08rem}
.side{float:right;max-width:220px;margin:0 0 .8rem 1rem}
hr.squiggle{border:0;height:12px;margin:1rem 0;background:radial-gradient(circle at 6px 0,transparent 5px,var(--pink) 6px,transparent 7px) 0 0/24px 12px repeat-x}
.top{float:right;font-size:.9rem}
.jokes{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.4rem;margin:1rem 0}
.sticky{padding:1rem;border-radius:2px}
.sticky h3{font-size:1.35rem}
.s0{background:#fffb8f;transform:rotate(-2deg)}.s1{background:#ffb3ef;transform:rotate(1.5deg)}
.s2{background:#b8ffa1;transform:rotate(-1deg)}.s3{background:#a8f3ff;transform:rotate(2deg)}.s4{background:#ffd1a1;transform:rotate(-1.5deg)}
footer{text-align:center;background:#1b1022;color:#fff;padding:1.2rem;border-top:6px dashed var(--pink);font-family:"Permanent Marker",cursive}
footer .tiny{font:.95rem "Patrick Hand",cursive;color:#ccc}
@media (max-width:720px){.hero,.cols,.tiles{grid-template-columns:1fr}.toc{columns:1}.side{float:none;margin:0 auto 1rem}h1.drip{font-size:2.3rem}}