*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
:root{--navy:#031e63;--royal:#0a55ff;--pink:#ffa3c4;--crimson:#b00b40;--lime:#dcf47a;--ink:#080812;--paper:#f4f1e8;
--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0 70C150 0 300 130 450 70S750 10 900 70 1050 130 1200 70V120H0Z'/%3E%3C/svg%3E");
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
html{scroll-behavior:smooth}
body{background:var(--navy) radial-gradient(rgba(10,85,255,.55) 2px,transparent 2.6px) 0 0/20px 20px;color:var(--paper);font:500 1.1rem/1.6 Karla,system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;background:var(--grain);opacity:.22;mix-blend-mode:overlay;pointer-events:none;z-index:60}
main{flex:1;padding-top:5.5rem}
a{color:inherit}
:focus-visible{outline:4px solid var(--lime);outline-offset:3px}
h1,h2,h3{font-family:"Permanent Marker",cursive;font-weight:400;line-height:1.05}
.note{font:400 1.5rem/1.2 "Permanent Marker",cursive;display:inline-block;color:var(--lime);transform:rotate(-2deg)}

.wash{position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:none;animation:gone 0s 2.7s forwards}
.layer{position:absolute;inset:0;background:var(--c);transform:translateY(calc(100% + 120px));animation:rise 2s cubic-bezier(.65,0,.3,1) var(--d) forwards}
.layer::before{content:"";position:absolute;left:0;right:0;top:-119px;height:120px;background:var(--c);-webkit-mask:var(--wave) 0 0/600px 120px repeat-x;mask:var(--wave) 0 0/600px 120px repeat-x;animation:slosh 1.4s linear infinite}
.layer:nth-child(1){--c:var(--pink);--d:0s}
.layer:nth-child(2){--c:var(--royal);--d:.2s}
.layer:nth-child(3){--c:var(--navy);--d:.4s}
@keyframes rise{to{transform:translateY(-100%)}}
@keyframes slosh{to{-webkit-mask-position:600px 0;mask-position:600px 0}}
@keyframes gone{to{visibility:hidden}}
.in{opacity:0;transform:translateY(24px) rotate(var(--r,0deg));animation:pop .8s cubic-bezier(.3,1.5,.5,1) var(--t,1.9s) forwards}
@keyframes pop{to{opacity:1;transform:rotate(var(--r,0deg))}}

nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem clamp(1rem,4vw,3rem);background:linear-gradient(var(--navy),transparent)}
.brand{font:400 1.3rem "Permanent Marker",cursive;text-decoration:none;color:var(--lime);transform:rotate(-2deg)}
nav ul{display:flex;gap:.6rem;list-style:none;padding:0;flex-wrap:wrap}
nav ul a{display:block;text-decoration:none;font-weight:800;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--royal);padding:.1rem 1rem;transition:transform .15s}
nav ul a:hover{transform:translate(-2px,-2px) rotate(-3deg)}
nav ul a[aria-current]{background:var(--pink)}

html.wave-seen .wash{display:none}

.hero{display:grid;grid-template-columns:1.3fr 1fr;column-gap:2rem;align-items:center;padding:clamp(1.5rem,5vw,3rem) clamp(1.2rem,5vw,4rem) 3rem;max-width:1200px;margin:auto;position:relative;isolation:isolate}
.hero>*{grid-column:1;justify-self:start}
.hero-right{grid-column:2;grid-row:1/span 5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem}
.hero .logo{width:min(80%,300px);aspect-ratio:1;border-radius:50%;border:5px solid var(--ink);box-shadow:9px 9px 0 var(--crimson);animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{translate:0 -10px}}
.title{font:400 clamp(3rem,9vw,7.2rem)/.95 "Rubik Dirt","Permanent Marker",cursive;color:var(--paper);text-shadow:5px 5px 0 var(--royal);transform:rotate(-2deg)}
.title span{display:block;color:var(--pink);margin-left:.3em}
.ask{margin-top:1.5rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:1rem;color:var(--pink)}
.answer{font:400 clamp(2rem,5.5vw,3.6rem)/1.05 "Permanent Marker",cursive;color:var(--lime);text-decoration:underline wavy var(--pink);text-underline-offset:.2em;text-decoration-thickness:3px;transform:rotate(-1deg);margin-top:.3rem}
.cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.8rem}
.btn{display:inline-block;font-weight:800;text-decoration:none;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:10px;box-shadow:5px 5px 0 var(--pink);padding:.6rem 1.3rem;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(3px,3px) rotate(-1deg);box-shadow:2px 2px 0 var(--pink)}
.btn.main{background:var(--lime)}
.btn.sm{padding:.2rem .8rem;font-size:.95rem;box-shadow:3px 3px 0 var(--royal)}

.ticker{overflow:hidden;background:var(--crimson);color:var(--paper);border-block:4px solid var(--ink);transform:rotate(-1.5deg);margin:1rem -2rem;font:400 1.35rem "Permanent Marker",cursive}
.track{display:flex;width:max-content;animation:scroll 32s linear infinite;padding:.5rem 0}
.track span{padding-right:2rem;white-space:nowrap}
@keyframes scroll{to{transform:translateX(-50%)}}

.page-head{padding:2rem clamp(1.2rem,5vw,4rem) 0;max-width:1200px;margin:auto}
.page-head h1{font:400 clamp(3rem,10vw,6.5rem)/1 "Rubik Dirt","Permanent Marker",cursive;text-shadow:5px 5px 0 var(--royal);transform:rotate(-2deg)}
section{padding:2.5rem clamp(1.2rem,5vw,4rem) 3rem;max-width:1200px;margin:auto}
h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:1.8rem;text-shadow:3px 3px 0 var(--royal)}
h2::after{content:"";display:block;height:14px;width:min(260px,70%);background:var(--pink);-webkit-mask:var(--wave) 0 0/90px 14px repeat-x;mask:var(--wave) 0 0/90px 14px repeat-x;margin-top:.4rem}
.card{background:radial-gradient(circle at 15% 10%,rgba(60,40,0,.10),transparent 45%),radial-gradient(circle at 90% 95%,rgba(60,40,0,.12),transparent 40%),var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--royal);padding:1.1rem}

.releases{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.2rem}
.rel{position:relative;transition:transform .2s}
.rel:nth-child(odd){transform:rotate(-2deg)}.rel:nth-child(even){transform:rotate(1.8deg);box-shadow:7px 7px 0 var(--crimson)}
.rel:hover{transform:rotate(0) scale(1.03)}
.tape{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-4deg);z-index:2;max-width:94%;padding:.25rem .9rem;border:2px solid var(--ink);font:400 1.05rem/1.1 "Permanent Marker",cursive;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel:nth-child(4n+1) .tape{background:var(--lime);color:var(--ink)}
.rel:nth-child(4n+2) .tape{background:var(--pink);color:var(--ink)}
.rel:nth-child(4n+3) .tape{background:var(--crimson);color:var(--paper)}
.rel:nth-child(4n+4) .tape{background:var(--royal);color:var(--paper)}
.art{position:relative;aspect-ratio:1;overflow:hidden;margin-bottom:.9rem;border:3px solid var(--ink);background:repeating-linear-gradient(-60deg,var(--pink) 0 3px,var(--navy) 3px 12px)}
.art img{display:block;width:100%;height:100%;object-fit:cover}
.art.noart{display:grid;place-items:center}
.art.wide{aspect-ratio:3/2;margin:1.5rem 0 .3rem}
.art.noart::after{content:attr(data-label);font:400 1.5rem/1.2 "Permanent Marker",cursive;color:var(--paper);text-align:center;padding:1rem}
.rel h3{font-size:1.4rem}.rel p{font-weight:700;opacity:.65}
.rel .links{display:flex;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
.vids-wide{padding:.6rem}
.vids-wide iframe{display:block;width:100%;height:clamp(360px,52vw,560px);border:0}

.search{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-bottom:2rem}
.search label{color:var(--lime)}
.search input{flex:1;min-width:240px;max-width:520px;font:600 1.15rem Karla,sans-serif;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--pink);padding:.6rem 1.3rem}
.search input::placeholder{color:#555}
.shows{list-style:none;padding:0;display:grid;gap:1.5rem}
.ticket{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:center;background:var(--lime);color:var(--ink);border:3px dashed var(--ink);box-shadow:7px 7px 0 var(--royal);padding:1.2rem 1.5rem}
.ticket:nth-child(even){transform:rotate(.8deg);background:var(--pink)}.ticket:nth-child(odd){transform:rotate(-.8deg)}
.ticket.past{background:#9aa3bd;box-shadow:7px 7px 0 #1a2c78}
.ticket time{font:400 2.1rem/1 "Permanent Marker",cursive;padding-right:1.5rem;border-right:3px dashed var(--ink)}
.ticket b{font-size:1.35rem}.ticket small{display:block;font-size:1.05rem;font-weight:600}
.tag{font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;border:2px solid var(--ink);padding:.1rem .6rem}
#none{font-size:1.3rem;margin-top:1rem}

.about{display:grid;grid-template-columns:3fr 2fr;gap:2.5rem;align-items:start}
.about p+p{margin-top:1rem}
.members{list-style:none;padding:0;display:grid;gap:1.4rem}
.members li:nth-child(odd){transform:rotate(1.5deg)}.members li:nth-child(even){transform:rotate(-1.5deg)}
.members b{font:400 1.6rem "Permanent Marker",cursive;display:block}
.members li:nth-child(1){background-color:var(--pink)}.members li:nth-child(2){background-color:var(--lime)}.members li:nth-child(3){background-color:#7fa8ff}
small.credit{font-weight:700;color:var(--pink)}

footer{margin-top:3rem;background:var(--ink);border-top:6px solid var(--pink);text-align:center;padding:2.5rem 1.5rem}
footer .note{font-size:1.9rem}
footer .links{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin:1rem 0}
footer .links a{background:var(--paper);color:var(--ink);font-weight:800;text-decoration:none;border-radius:999px;padding:.1rem 1rem}
footer .links a:hover{background:var(--lime)}

.now-playing{position:absolute;top:.5rem;right:clamp(.5rem,3vw,2rem);width:min(420px,42vw);transform:rotate(5deg);z-index:4}
.now-playing .card{padding:.5rem}
.now-playing .tag{background:var(--lime);color:var(--ink);display:inline-block;margin-bottom:.5rem;font-size:.85rem}
.now-playing iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:6px}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.4rem}
.frame{position:relative;transition:transform .2s}
.frame:nth-child(3n+1){transform:rotate(-2deg)}
.frame:nth-child(3n+2){transform:rotate(1.6deg);box-shadow:8px 8px 0 var(--crimson)}
.frame:nth-child(3n){transform:rotate(-1deg);box-shadow:8px 8px 0 var(--cyan,var(--lime))}
.frame:hover{transform:rotate(0) scale(1.02)}
.frame::before{content:"";position:absolute;top:-14px;left:50%;width:90px;height:26px;background:rgba(220,244,122,.9);border:2px solid var(--ink);transform:translateX(-50%) rotate(-4deg);z-index:2}
.frame img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border:3px solid var(--ink);margin-bottom:.8rem}
.frame .credit{font-weight:800}
.frame .credit a{color:var(--pink);text-decoration:none;border-bottom:2px dotted var(--pink)}
.frame .credit a:hover{color:var(--lime);border-color:var(--lime)}

/* secret video player (shows page) */
button.btn{font-family:inherit;line-height:1.6;cursor:pointer}
.player{margin:auto;padding:0;border:0;background:none;color:inherit;overflow:visible;width:min(92vw,880px);max-width:none}
.player::backdrop{background:rgba(3,30,99,.9)}
.player .card{position:relative;padding:1.4rem 1rem 1.1rem;box-shadow:9px 9px 0 var(--crimson)}
.player .tape{background:var(--lime);color:var(--ink)}
.player video,.player iframe{display:block;margin:.4rem auto 0;max-width:100%;max-height:70vh;background:#000;border:3px solid var(--ink)}
.player video{width:100%;aspect-ratio:16/9}
.player iframe{width:100%;height:auto;aspect-ratio:16/9}
.player .note{display:block;font-size:1.15rem;margin:.8rem 0 0;color:var(--crimson)}
.player .btn{margin-top:.9rem}

/* EPK page */
.facts{position:relative;background-color:var(--pink);transform:rotate(1.5deg)}
.facts .tape{background:var(--lime);color:var(--ink)}
.facts dl{margin-top:.8rem}
.facts dt{font:400 1.15rem/1.2 "Permanent Marker",cursive}
.facts dd{font-weight:700;margin-bottom:.8rem}
.facts dd:last-child{margin-bottom:0}
.members.lineup{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.discog{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.8rem}
.discog li:nth-child(odd){transform:rotate(-1.2deg)}
.discog li:nth-child(even){transform:rotate(1.2deg);box-shadow:7px 7px 0 var(--crimson)}
.discog b{font:400 1.4rem/1.1 "Permanent Marker",cursive;display:block}
.discog span{display:block;font-weight:700;opacity:.65}
.discog p{margin-top:.5rem;font-size:1rem;line-height:1.4}
.discog .links{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.photos{display:flex;gap:2.2rem;align-items:flex-start}
.photos>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2.2rem}
.shot{position:relative}
.shot::before{content:"";position:absolute;top:-14px;left:50%;width:90px;height:26px;background:rgba(220,244,122,.9);border:2px solid var(--ink);transform:translateX(-50%) rotate(-4deg);z-index:2}
.shot:nth-child(odd){transform:rotate(-1.5deg)}
.shot:nth-child(even){transform:rotate(1.2deg);box-shadow:7px 7px 0 var(--crimson)}
.shot a{display:block}
.shot .art{margin:0;aspect-ratio:auto}
.shot .art img{height:auto}
.shot.tall .art{aspect-ratio:4/5}
.shot.tall .art img{height:100%;object-position:50% 38%}
.plot{display:block;max-width:720px}
.plot img{display:block;width:100%;height:auto}
.played{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem}
.played .card:nth-child(odd){transform:rotate(-1deg)}
.played .card:nth-child(even){transform:rotate(1deg);box-shadow:7px 7px 0 var(--crimson)}
.played h3{font-size:1.5rem;margin-bottom:.6rem}
.played ul{padding-left:1.2rem}
.played li+li{margin-top:.3rem}
.played li a{font-weight:800;text-decoration:underline wavy var(--crimson);text-decoration-thickness:2px;text-underline-offset:.2em}
.played li a:hover{background:var(--lime);text-decoration-color:var(--ink)}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.8rem}
.chips li{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--royal);padding:.1rem 1rem;font-weight:800}
.chips li:nth-child(3n+2){box-shadow:3px 3px 0 var(--pink)}
.chips li:nth-child(3n){box-shadow:3px 3px 0 var(--crimson)}
.book{background-color:var(--lime);text-align:center;padding:2rem 1.5rem;transform:rotate(-1deg)}
.book .note{color:var(--crimson);margin-bottom:.6rem}
.book p{font-weight:700}
.book p+p{margin-top:1rem}
@media(max-width:700px){.photos{flex-direction:column;align-items:stretch}}

@media(max-width:800px){.hero{grid-template-columns:1fr}.hero-right{grid-column:1;grid-row:auto;order:-1;margin-bottom:1rem}.hero .logo{width:min(60%,220px)}.now-playing{position:static;width:100%;max-width:420px;margin:0 auto 1.5rem;order:-2;transform:none}}
@media(max-width:700px){.brand{display:none}nav{justify-content:center}.about{grid-template-columns:1fr}.ticket{grid-template-columns:1fr;gap:.5rem}.ticket time{border:0;padding:0}}
@media(prefers-reduced-motion:reduce){.wash{display:none}.in{animation:none;opacity:1;transform:rotate(var(--r,0deg))}.track,.logo{animation:none}}