*,*::before,*::after{box-sizing:border-box}
:root{
  --black:#0E0E11;--cream:#F6EFD9;--pink:#EC2A7F;--cyan:#27A7E1;
  /* content never gets wider than --content: past that, the side gutters grow instead.
     Backgrounds (shards, ticker, checker strip) still run edge to edge. */
  --content:1200px;
  --pad:max(clamp(1rem,4.5vw,3.5rem),calc((100vw - var(--content))/2));
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--cream);font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.page{position:relative;overflow:hidden}
.page::before{content:"";position:absolute;inset:0;background:radial-gradient(#ffffff1c 1.2px,transparent 1.5px) 0 0/9px 9px;-webkit-mask:linear-gradient(115deg,#000,transparent 55%);mask:linear-gradient(115deg,#000,transparent 55%);pointer-events:none}

.hrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem}
.h2{font:400 clamp(2.3rem,6.5vw,4.4rem)/.95 Anton,sans-serif;text-transform:uppercase;margin-bottom:1.6rem}
.h2 em{font:400 .62em/1 Knewave,cursive;color:var(--pink);display:inline-block;transform:rotate(-5deg) translateY(-.1em);margin-left:.15em;text-transform:none}

/* ───────── nav ───────── */
.nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--pad)}
.lockup{display:flex;align-items:center;gap:.45rem}
.lockup img{height:1.35rem;width:auto}
.nav ul{display:flex;align-items:center;gap:clamp(.8rem,2.4vw,1.8rem);font:400 .95rem/1 Anton,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.nav-book{background:var(--pink);color:var(--black);padding:.5rem .95rem;transform:skewX(-10deg);display:inline-block;box-shadow:4px 4px 0 var(--cyan)}

/* ───────── hero ───────── */
.hero{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(1.6rem,4.5vw,4rem);align-items:center;padding:clamp(1.6rem,4vw,3rem) var(--pad) clamp(3.2rem,7vw,5.5rem)}
.shard{position:absolute;z-index:0}
.shard--pink{left:0;top:-90px;width:54%;height:76%;background:var(--pink);clip-path:polygon(0 0,100% 0,30% 100%,0 80%)}
.shard--cyan{right:0;bottom:0;width:36%;height:62%;background:var(--cyan);clip-path:polygon(46% 0,100% 16%,100% 100%,0 100%)}
.hatch{position:absolute;right:var(--pad);top:0;width:clamp(90px,14vw,170px);height:clamp(54px,8vw,96px);background:repeating-linear-gradient(-32deg,var(--pink) 0 5px,transparent 5px 15px);clip-path:polygon(18% 0,100% 12%,84% 100%,0 82%)}
.hero-copy,.hero-media{position:relative;z-index:1}
.brush{font:400 clamp(1.3rem,3vw,2.2rem)/1 Knewave,cursive;text-shadow:3px 3px 0 var(--black);transform:rotate(-4deg);transform-origin:left bottom;margin-bottom:1.1rem}
.slab{background:var(--cream);padding:clamp(.9rem,2.2vw,1.6rem) clamp(1rem,2.6vw,1.9rem);transform:rotate(-2.5deg);box-shadow:9px 9px 0 var(--black),17px 17px 0 var(--cyan);max-width:600px}
.strap{font:400 clamp(2rem,4.3vw,3.25rem)/.98 Anton,sans-serif;text-transform:uppercase;margin-top:clamp(2.2rem,5vw,3.4rem)}
.strap b{font-weight:400;color:var(--pink)}
.strap b+i+b{color:var(--cyan)}
.strap i{font:400 .8em/1 Knewave,cursive}
.ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.6rem}
.btn{font:400 1rem/1 Anton,sans-serif;letter-spacing:.12em;text-transform:uppercase;background:var(--pink);color:var(--black);padding:.9rem 1.35rem;transform:skewX(-10deg);box-shadow:5px 5px 0 var(--cream)}
.btn--alt{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 3px var(--cyan)}
.hero-media{justify-self:center;width:min(100%,560px)}
.hero-photo{position:relative;transform:rotate(3deg);box-shadow:-11px 11px 0 var(--pink),11px -11px 0 var(--cream)}
/* hero reel: live clips in the tilted frame */
.hero-video{aspect-ratio:3/2;background:#000}
.reel-stage{position:absolute;inset:0;overflow:hidden;background:#000}
.reel-stage > *{position:absolute;inset:0}
.reel-cam{transition:opacity .18s}
.is-cutting .reel-cam{opacity:0}
.reel{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transform-origin:0 0;will-change:transform}
.reel.is-directed{object-fit:fill}
/* looks for individual shots: black and white, or a pink / cyan wash like the posters */
.reel-cam[data-look=bw],.reel-cam[data-look=pink],.reel-cam[data-look=cyan]{filter:grayscale(1) contrast(1.25) brightness(1.12)}
.reel-tint{mix-blend-mode:multiply;opacity:0;pointer-events:none}
.reel-cam[data-look=pink] ~ .reel-tint{background:var(--pink);opacity:1}
.reel-cam[data-look=cyan] ~ .reel-tint{background:var(--cyan);opacity:1}
.reel-split{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--pink)}
.reel-split[hidden]{display:none}
.reel-split canvas{display:block;width:100%;height:100%}
.reel-scan{pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 2px,#00000026 2px 3px),radial-gradient(ellipse at center,transparent 55%,#00000070 100%)}
.reel-flash{pointer-events:none;background:var(--cream);opacity:0}
.reel-where{position:absolute;left:.7rem;bottom:.7rem;max-width:46%;font:400 clamp(.85rem,1.6vw,1.05rem)/1.1 Knewave,cursive;text-shadow:2px 2px 0 var(--black),-1px -1px 0 var(--black)}
.reel-controls{position:absolute;right:.7rem;bottom:.7rem;display:flex;gap:.5rem}
.reel-btn{display:inline-flex;align-items:center;gap:.45rem;border:0;background:var(--black);color:var(--cream);font:400 .8rem/1 Anton,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:.5rem .65rem;transform:skewX(-10deg);cursor:pointer}
.reel-btn svg{width:1.05rem;height:1.05rem;fill:currentColor;transform:skewX(10deg)}
.reel-btn--sound{background:var(--pink);color:var(--black)}
.is-sound .reel-btn--sound{background:var(--cream)}
.icon-play,.is-paused .icon-pause,.icon-sound,.is-sound .icon-muted{display:none}
.is-paused .icon-play,.is-sound .icon-sound{display:block}
.reel-more{margin-top:1.6rem;text-align:right;font:400 .95rem/1 Anton,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.reel-more a{border-bottom:3px solid var(--cyan);padding-bottom:.25rem}
.sticker{position:absolute;left:-9%;top:-7%;width:clamp(74px,11vw,112px);aspect-ratio:1;border-radius:50%;background:var(--cream);color:var(--black);border:4px solid var(--black);outline:4px solid var(--cream);display:grid;place-content:center;text-align:center;font:400 clamp(1rem,2.1vw,1.5rem)/.95 Anton,sans-serif;text-transform:uppercase;transform:rotate(-16deg)}

/* ───────── ticker ───────── */
.ticker{position:relative;z-index:2;background:var(--pink);color:var(--black);transform:rotate(-1.4deg);width:104%;margin-left:-2%;overflow:hidden;padding:.6rem 0 .5rem;font:400 clamp(1.1rem,2.4vw,1.7rem)/1 Anton,sans-serif;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.ticker div{display:inline-block;animation:tick 30s linear infinite}
.ticker span{margin:0 .9em}
@keyframes tick{to{transform:translateX(-50%)}}

/* ───────── gigs: poster carousel ───────── */
.gigs{position:relative;padding:clamp(3rem,7vw,5rem) var(--pad) clamp(.5rem,2vw,1.5rem)}
.gigs .hrow{align-items:center}
.gigs .h2{margin-bottom:.3rem}
.reel-nav{display:flex;gap:.6rem;margin-left:auto}
.reel-nav[hidden]{display:none}
.reel-nav button{width:2.7rem;height:2.7rem;border:0;background:var(--cream);color:var(--black);font:400 1.25rem/1 Anton,sans-serif;transform:skewX(-10deg);box-shadow:4px 4px 0 var(--pink);cursor:pointer}
.reel-nav button:disabled{opacity:.3;cursor:default}
.posters{--gap:clamp(.9rem,2.6vw,2.2rem);display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*var(--gap))/4);gap:var(--gap);align-items:start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:1rem;padding:1.8rem 1rem 3.4rem;margin:0 -1rem;scrollbar-width:none}
.posters::-webkit-scrollbar{display:none}
.posters li{position:relative;scroll-snap-align:start;transform:rotate(var(--r));box-shadow:0 14px 34px #000a}
.posters li::before{content:"";position:absolute;z-index:1;top:-11px;left:50%;width:74px;height:24px;margin-left:-37px;background:#eadfbfb8;transform:rotate(var(--t,-3deg));pointer-events:none}
.posters a{display:block;cursor:zoom-in}
.posters img{width:100%;aspect-ratio:1054/1492;object-fit:cover}

.lightbox{border:0;padding:0;background:transparent;overflow:visible;max-width:min(88vw,720px)}
.lightbox::backdrop{background:#000000e0}
.lightbox img{width:auto;max-width:100%;max-height:88vh;box-shadow:-10px 10px 0 var(--pink),10px -10px 0 var(--cyan)}
.lightbox button{position:absolute;top:-1rem;right:-1rem;width:2.5rem;height:2.5rem;border:0;border-radius:50%;background:var(--cream);color:var(--black);font:400 1.2rem/1 Anton,sans-serif;cursor:pointer}

/* ───────── set list ───────── */
.checker{height:32px;background:repeating-conic-gradient(var(--pink) 0 25%,var(--black) 0 50%) 0 0/32px 32px}
.setlist{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(3rem,7vw,5rem) var(--pad) clamp(3.5rem,8vw,6rem)}
.tape{position:relative;container-type:inline-size;aspect-ratio:1.58;background:#1b1b20;border:3px solid var(--cream);border-radius:16px;transform:rotate(-5deg);box-shadow:12px 12px 0 var(--pink)}
.tape-label{position:absolute;left:6%;right:6%;top:8%;height:64%;background:var(--cream);color:var(--black);border-radius:8px;padding:4% 5%;overflow:hidden}
.tape-label::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(var(--pink) 50%,var(--cyan) 50%)}
.tape-title{font:400 3.8cqw/1.15 "Permanent Marker",cursive;padding-right:10%}
.tape-side{position:absolute;right:5%;top:7%;font:400 6.5cqw/1 Anton,sans-serif}
.tape-window{position:absolute;left:23%;right:23%;top:37%;height:25%;background:#1b1b20;border-radius:999px;display:flex;justify-content:space-between;align-items:center;padding:0 4%}
.tape-window i{height:74%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#1b1b20 0 30%,transparent 31%),repeating-conic-gradient(var(--cream) 0 30deg,#1b1b20 0 60deg);border:3px solid var(--cream)}
.tape-foot{position:absolute;left:19%;right:19%;bottom:-3px;height:19%;border:3px solid var(--cream);border-radius:8px 8px 0 0;display:flex;justify-content:space-around;align-items:center}
.tape-foot i{width:9px;height:9px;border-radius:50%;background:var(--cream)}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.4rem)}
.side h3{font:400 clamp(1.05rem,2.2vw,1.8rem)/1 Anton,sans-serif;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.6rem}
.side:nth-child(1) h3,.side:nth-child(1) li::before{color:var(--pink)}
.side:nth-child(2) h3,.side:nth-child(2) li::before{color:var(--cyan)}
.side ol{counter-reset:t}
.side li{counter-increment:t;display:grid;grid-template-columns:2.1rem 1fr;padding:.5rem 0;border-bottom:1px dashed #ffffff38;font-weight:600;font-size:.95rem}
.side li::before{content:counter(t,decimal-leading-zero);font:400 1rem/1.3 Anton,sans-serif}
.side li span{display:block;font-weight:400;font-size:.82rem;opacity:.65}
/* rotating view: row numbers and rules stay fixed; the songs for each row are stacked in one cell and cross-fade */
.side:nth-child(2) .rows{counter-reset:t 5}
.titles{display:grid;align-items:start}
/* both sides share one set of row tracks, so row 3 on side A is always level with row 8 on side B */
@supports (grid-template-rows:subgrid){
  @media (min-width:461px){
    .sides{grid-template-rows:auto repeat(5,auto);row-gap:0}
    .side.is-rotating{display:grid;grid-template-rows:subgrid;grid-row:span 6}
    .side.is-rotating .rows{display:grid;grid-template-rows:subgrid;grid-row:span 5}
  }
}
.titles > div{grid-area:1/1;opacity:0;transition:opacity .45s ease calc(var(--i)*140ms)}
.titles > div.is-on{opacity:1;transition:opacity .75s ease calc(.3s + var(--i)*140ms)}
.side.is-rotating .tracks{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ───────── gigs page: vertical timeline ───────── */
.nav a[aria-current]{border-bottom:3px solid var(--pink);padding-bottom:.25rem}
.gigs-more{margin:0 0 clamp(2rem,5vw,3rem)}
.page-head{position:relative;z-index:1;padding:clamp(1.4rem,4vw,2.6rem) var(--pad) clamp(1.8rem,4.5vw,3rem)}
.page-head .h2{margin-bottom:.5rem}
.page-head p{font-weight:600;max-width:36ch}
.gigs-noscript{padding:0 var(--pad) 3rem;font-weight:600}

.timeline{--node:5.2rem;position:relative;z-index:1;padding:0 max(var(--pad),calc((100vw - 1020px)/2))}
/* the spine: a checker strip, bright for what's coming and faded for what's been */
.timeline::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:16px;margin-left:-8px;background:repeating-conic-gradient(var(--cream) 0 25%,transparent 0 50%) 0 0/16px 16px;opacity:.3}
.timeline--next{--node:6.6rem}
.timeline--next::before{background-image:repeating-conic-gradient(var(--pink) 0 25%,transparent 0 50%);opacity:1}
.timeline--past{padding-bottom:clamp(3rem,8vw,6rem)}
.timeline > li{position:relative;display:grid;grid-template-columns:1fr var(--node) 1fr;column-gap:clamp(1rem,3vw,2.2rem);align-items:center;padding:clamp(.9rem,2.4vw,1.6rem) 0}
.timeline > .tl-flag,.timeline > .tl-year,.timeline > .tl-end,.timeline > .tl-empty{grid-template-columns:1fr;justify-items:center}
.tl-flag span,.tl-year span,.tl-end span{position:relative;display:inline-block;font:400 1.05rem/1 Anton,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--black);background:var(--cream);padding:.6rem 1.1rem .55rem;transform:skewX(-10deg);box-shadow:5px 5px 0 var(--pink)}
.timeline--next .tl-flag span{background:var(--pink);box-shadow:5px 5px 0 var(--cyan)}
.tl-year span{font-size:1.7rem;letter-spacing:.04em;background:var(--cyan);box-shadow:5px 5px 0 var(--cream);padding:.4rem .9rem .35rem}
.tl-end span{background:var(--black);color:var(--cream);box-shadow:none;outline:2px dashed #ffffff66;font-size:.85rem}

.gig{--accent:var(--pink)}
.gig--right{--accent:var(--cyan);--tilt:6deg;--lean:1deg}
.gig-date{grid-area:1/2;justify-self:center;position:relative;z-index:1;width:var(--node);aspect-ratio:1;border-radius:50%;background:var(--cream);color:var(--black);border:4px solid var(--black);outline:4px solid var(--cream);display:grid;place-content:center;text-align:center;font-family:Anton,sans-serif;text-transform:uppercase;transform:rotate(var(--tilt,-7deg))}
.gig-date b{font-weight:400;font-size:2.1rem;line-height:.9}
.gig-date span{font-size:.82rem;letter-spacing:.12em;margin-top:.15rem}
.gig-card{grid-area:1/1;justify-self:end;text-align:right;position:relative;z-index:1;width:min(100%,23rem);background:#18181d;padding:1rem 1.2rem 1.1rem;box-shadow:6px 6px 0 var(--accent);transform:rotate(var(--lean,-1deg))}
.gig--right .gig-card{grid-area:1/3;justify-self:start;text-align:left;box-shadow:-6px 6px 0 var(--accent)}
.gig-when{font:600 .74rem/1 Archivo,sans-serif;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:.5rem}
.gig-card h3{font:400 clamp(1.35rem,2.7vw,1.8rem)/1 Anton,sans-serif;text-transform:uppercase}
.gig-where{font-weight:600;font-size:.95rem;margin-top:.35rem}
.gig-time{font:400 1.05rem/1 Knewave,cursive;color:var(--accent);margin-top:.55rem}
.gig-tags{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;margin-bottom:.65rem}
.gig--right .gig-tags{justify-content:flex-start}
.gig-tag{font:400 .76rem/1 Anton,sans-serif;letter-spacing:.1em;text-transform:uppercase;background:var(--cream);color:var(--black);padding:.3rem .5rem .26rem;transform:skewX(-10deg)}
.gig-links{margin-top:1rem}
.gig-link{display:inline-block;font:400 .85rem/1 Anton,sans-serif;letter-spacing:.12em;text-transform:uppercase;background:var(--black);color:var(--cream);padding:.6rem .9rem;transform:skewX(-10deg)}
.gig-poster{grid-area:1/3;justify-self:start;position:relative;z-index:1;width:clamp(92px,13vw,140px);transform:rotate(var(--r,2.5deg));box-shadow:0 10px 26px #000a;cursor:zoom-in}
.gig--right .gig-poster{grid-area:1/1;justify-self:end;--r:-2.5deg}
.gig-poster::before{content:"";position:absolute;z-index:1;top:-9px;left:50%;width:56px;height:20px;margin-left:-28px;background:#eadfbfb8;transform:rotate(-4deg);pointer-events:none}
.gig-poster img{width:100%}

/* what's coming up is louder than what's been */
.timeline--next .gig-date{background:var(--pink);outline-color:var(--pink)}
.timeline--next .gig-date b{font-size:2.8rem}
.timeline--next .gig-date span{font-size:.95rem}
.timeline--next .gig-card{width:min(100%,27rem);background:var(--pink);color:var(--black);padding:1.5rem 1.5rem 1.6rem;box-shadow:9px 9px 0 var(--cyan)}
.timeline--next .gig--right .gig-card{box-shadow:-9px 9px 0 var(--cyan)}
.timeline--next .gig-card h3{font-size:clamp(2rem,4.6vw,3rem)}
.timeline--next .gig-when{opacity:1;font-size:.82rem}
.timeline--next .gig-where{font-size:1.05rem}
.timeline--next .gig-time{color:var(--black);font-size:1.4rem}
.timeline--next .gig-tag{background:var(--black);color:var(--cream)}
.timeline--next .gig-poster{width:clamp(130px,21vw,230px)}
.gig-nextup{position:absolute;top:-1.6rem;left:1rem;font:400 1.6rem/1 Knewave,cursive;color:var(--cream);text-shadow:3px 3px 0 var(--black);transform:rotate(-6deg)}
.gig--right .gig-nextup{left:auto;right:1rem}
.tl-empty .gig-card{grid-area:auto;justify-self:center;text-align:center;transform:none}

/* ───────── watch page ───────── */
.watch-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1.8rem,4vw,3rem) clamp(1.4rem,3vw,2.4rem);align-items:start;padding:0 var(--pad) clamp(3rem,8vw,6rem)}
.clip{--accent:var(--pink);grid-column:span 2}
.clip:nth-child(even){--accent:var(--cyan)}
.clip-frame{background:#000;box-shadow:8px 8px 0 var(--accent)}
/* every wide clip gets the same 3:2 frame and every tall clip the same 9:16 one, so each row lines up;
   the picture is cropped slightly to fit (full picture comes back in full screen) */
.clip video{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#000}
.clip--tall video{aspect-ratio:9/16}
.clip video:fullscreen{object-fit:contain}
.clip figcaption{margin-top:1.1rem}
.clip h2{font:400 clamp(1.2rem,2.3vw,1.6rem)/1 Anton,sans-serif;text-transform:uppercase}
.clip p{font:400 1rem/1 Knewave,cursive;color:var(--accent);margin-top:.4rem}
/* narrower screens: wide clips get the full width, tall ones sit side by side */
@media (max-width:860px){
  .clip{grid-column:span 6}
  .clip--tall{grid-column:span 2}
}
@media (max-width:520px){
  .clip--tall{grid-column:span 3}
  .reel-where{max-width:38%;font-size:.78rem}
}

/* ───────── watch page: the bootleg (audio) ───────── */
.text-link{border-bottom:3px solid var(--cyan);padding-bottom:.1rem}
.listen{position:relative;z-index:1;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start;padding:clamp(3rem,7vw,5rem) var(--pad) clamp(3.5rem,8vw,6rem)}
.listen .tape{position:sticky;top:2.5rem;margin-top:1rem}
.listen .h2{margin-bottom:.7rem}
.listen-intro{font-weight:600;max-width:44ch;margin-bottom:1.4rem}
.listen.is-playing .tape-window i{animation:reel 2.4s linear infinite}
@keyframes reel{to{transform:rotate(360deg)}}
.track{display:grid;grid-template-columns:2.9rem 1fr auto;align-items:center;gap:0 1rem;padding:.75rem 0 .8rem;border-bottom:1px dashed #ffffff38}
.track-play{display:grid;place-content:center;width:2.7rem;height:2.7rem;border:0;background:var(--cream);color:var(--black);transform:skewX(-10deg);box-shadow:3px 3px 0 var(--pink);cursor:pointer}
.track-play svg{width:1.15rem;height:1.15rem;fill:currentColor;transform:skewX(10deg)}
.track .icon-play,.track.is-playing .icon-pause{display:block}
.track .icon-pause,.track.is-playing .icon-play{display:none}
.track.is-current .track-play{background:var(--pink);box-shadow:3px 3px 0 var(--cyan)}
.track strong{display:block;font:400 clamp(1.1rem,2.1vw,1.4rem)/1.1 Anton,sans-serif;letter-spacing:.02em;text-transform:uppercase}
.track .by{font-size:.85rem;opacity:.65}
.track-time{font:400 .95rem/1 Anton,sans-serif;letter-spacing:.06em;opacity:.85;white-space:nowrap}
.track-bar{display:none;grid-column:1/-1;height:8px;margin-top:.7rem;background:#ffffff24;cursor:pointer}
.track.is-current .track-bar{display:block}
.track-bar i{display:block;width:0;height:100%;background:var(--cyan)}

/* ───────── book us page ───────── */
.book-pitch{position:relative;z-index:1;padding:0 var(--pad) clamp(2rem,5vw,3rem);max-width:calc(46rem + 2 * var(--pad))}
.book-pitch .lead,.patch .lead{font:400 clamp(1.5rem,3.2vw,2.3rem)/1.08 Anton,sans-serif;text-transform:uppercase;margin-bottom:1rem}
.book-pitch p,.patch p,.contact p{font-size:1.05rem;line-height:1.55}
.book-cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.2rem);padding:0 var(--pad) clamp(3rem,7vw,5rem)}
.book-card{background:#18181d;padding:1.4rem 1.4rem 1.5rem;box-shadow:8px 8px 0 var(--accent)}
.book-card:nth-child(2){transform:rotate(-1.2deg)}
.book-card h2{font:400 clamp(1.4rem,2.6vw,1.8rem)/1 Anton,sans-serif;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem}
.book-card p{line-height:1.5;margin-bottom:.6rem}
.book-big{font:400 clamp(1.5rem,3vw,2.1rem)/1.05 Anton,sans-serif;text-transform:uppercase}
.patch{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(3rem,7vw,5rem) var(--pad)}
.patch p{max-width:40ch;margin-bottom:.9rem}
.patch-frame{box-shadow:-10px 10px 0 var(--cyan),10px -10px 0 var(--cream)}
.patch-map{display:block;width:100%;height:auto}
.patch-map .town{font:400 22px/1 Anton,sans-serif;letter-spacing:.04em;text-transform:uppercase;fill:var(--cream);paint-order:stroke;stroke:#17171c;stroke-width:5px}
.patch-map .town--big{font-size:30px}
.patch-map .patch-tag{font:400 26px/1 Anton,sans-serif;letter-spacing:.08em;text-transform:uppercase;fill:var(--black)}
.contact{position:relative;z-index:1;padding:clamp(1rem,3vw,2rem) var(--pad) clamp(4rem,9vw,6.5rem)}
.contact .h2{margin-bottom:.6rem}
.contact p{max-width:46ch;margin-bottom:1.6rem}
.contact-email{display:inline-block;max-width:100%;padding:1rem clamp(.9rem,3vw,1.4rem) .9rem;background:var(--pink);color:var(--black);font:400 clamp(1rem,3.6vw,2rem)/1.15 Anton,sans-serif;letter-spacing:.03em;overflow-wrap:anywhere;box-shadow:8px 8px 0 var(--cyan);transform:rotate(-1deg)}

/* ───────── band page ───────── */
.band-intro{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,5vw,4rem);align-items:center;padding:clamp(.5rem,2vw,1.5rem) var(--pad) clamp(3rem,7vw,5rem)}
.band-photo{position:relative;transform:rotate(-2deg);box-shadow:-10px 10px 0 var(--cyan),10px -10px 0 var(--cream)}
.band-photo img{width:100%}
.band-photo::before,.mugshot::before{content:"";position:absolute;z-index:1;top:-12px;left:50%;width:84px;height:26px;margin-left:-42px;background:#eadfbfb8;transform:rotate(-3deg)}
.band-bio .lead{font:400 clamp(1.5rem,3.2vw,2.3rem)/1.08 Anton,sans-serif;text-transform:uppercase;margin-bottom:1.1rem}
.band-bio p{font-size:1.05rem;line-height:1.55;max-width:46ch;margin-bottom:.9rem}
.facts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.facts li{font:400 .85rem/1 Anton,sans-serif;letter-spacing:.1em;text-transform:uppercase;background:var(--cream);color:var(--black);padding:.5rem .75rem .45rem;transform:skewX(-10deg)}
.facts li:nth-child(2){background:var(--pink)}
.facts li:nth-child(3){background:var(--cyan)}

.suspects{position:relative;z-index:1;display:grid;gap:clamp(3rem,7vw,5.5rem);padding:clamp(3rem,7vw,5rem) var(--pad)}
.suspects > .h2{margin-bottom:0}
.suspect{display:grid;grid-template-columns:minmax(200px,330px) 1fr;gap:clamp(1.8rem,6vw,5rem);align-items:center}
.suspect:nth-of-type(even){grid-template-columns:1fr minmax(200px,330px)}
.suspect:nth-of-type(even) .mugshot{order:2}
.suspect:nth-of-type(even) .sheet{justify-self:end}
.mugshot{position:relative;transform:rotate(var(--r,-3deg));box-shadow:10px 10px 0 var(--accent)}
.mugshot img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* the booking-number plate on each mugshot */
.mugshot figcaption{position:absolute;left:-.6rem;bottom:1rem;background:var(--black);color:var(--cream);font:400 1rem/1 Anton,sans-serif;letter-spacing:.14em;padding:.5rem .7rem .42rem;transform:rotate(-4deg);box-shadow:3px 3px 0 var(--accent)}
.mugshot--pending > div{aspect-ratio:4/5;display:grid;place-content:center;text-align:center;background:radial-gradient(var(--accent) 1.6px,transparent 1.9px) 0 0/9px 9px,#17171c}
.mugshot--pending span{font:400 clamp(1.5rem,3.4vw,2.2rem)/1 Anton,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);background:var(--black);border:4px solid var(--cream);padding:.5em .7em .42em;transform:rotate(-8deg)}
.sheet{width:min(100%,34rem)}
.sheet h3{font:400 clamp(3rem,8vw,5rem)/.9 Anton,sans-serif;text-transform:uppercase}
.sheet .role{display:inline-block;font:400 clamp(1.25rem,2.6vw,1.7rem)/1 Knewave,cursive;color:var(--accent);transform:rotate(-3deg);margin:.5rem 0 1.4rem}
.sheet dl{display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.3rem;margin:0}
.sheet dt{font:400 .8rem/1.75 Anton,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sheet dd{margin:0;font-weight:600;line-height:1.45}
.wanted{position:relative;z-index:1;padding:clamp(2rem,5vw,3.5rem) var(--pad) clamp(4rem,9vw,6.5rem);text-align:center}
.wanted .h2{margin-bottom:.6rem}
.wanted-photo{width:min(100%,460px);margin:0 auto clamp(2.2rem,5vw,3.2rem);transform:rotate(2deg)}
.wanted .ctas{justify-content:center}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .listen.is-playing .tape-window i{animation:none}
  .ticker div{animation:none}
}
@media (max-width:640px){
  .posters{grid-auto-columns:calc((100% - 2*var(--gap))/3)}
}
@media (max-width:720px){
  .nav li:not(:last-child){display:none}
  .hero,.setlist{grid-template-columns:1fr}
  .hero-media{width:min(94%,460px);margin-top:1rem}
  .shard--pink{width:86%;height:44%}
  .shard--cyan{width:60%;height:30%}
  .tape{width:min(86%,360px);margin:0 auto 1rem}
}
@media (max-width:520px){
  .posters{grid-auto-columns:64%}
}
@media (max-width:460px){
  .sides{grid-template-columns:1fr}
}
@media (max-width:700px){
  .timeline{--node:4.3rem}
  .timeline--next{--node:5rem}
  .timeline::before{left:calc(var(--pad) + var(--node)/2)}
  .timeline > li{grid-template-columns:var(--node) 1fr;column-gap:1rem;align-items:start}
  .timeline > .tl-flag,.timeline > .tl-year,.timeline > .tl-end,.timeline > .tl-empty{grid-template-columns:1fr;justify-items:start}
  .gig-date{grid-area:1/1}
  .gig-date b{font-size:1.7rem}
  .gig-date span{font-size:.7rem}
  .timeline--next .gig-date b{font-size:2rem}
  .timeline--next .gig-date span{font-size:.78rem}
  .gig-card,.gig--right .gig-card{grid-area:1/2;justify-self:start;text-align:left;box-shadow:6px 6px 0 var(--accent)}
  .timeline--next .gig-card,.timeline--next .gig--right .gig-card{box-shadow:7px 7px 0 var(--cyan)}
  .gig-tags,.gig--right .gig-tags{justify-content:flex-start}
  .gig-nextup,.gig--right .gig-nextup{left:auto;right:.8rem}
  .gig-poster,.gig--right .gig-poster{grid-area:2/2;justify-self:start;margin-top:1.2rem;--r:2deg}
}
@media (max-width:760px){
  .band-intro,.suspect,.suspect:nth-of-type(even),.listen,.book-cards,.patch{grid-template-columns:1fr}
  .book-card:nth-child(2){transform:none}
  .patch-map .town{font-size:25px}
  .patch-map .town--big{font-size:33px}
  .listen .tape{position:relative;top:0;width:min(86%,360px);margin:0 auto 1rem}
  .band-photo{width:92%;margin:0 auto .6rem}
  .suspect:nth-of-type(even) .mugshot{order:0}
  .suspect:nth-of-type(even) .sheet{justify-self:start}
  .mugshot{width:min(78%,300px)}
}