/* Section components. */

/* LISTEN */
.listen{background:var(--coal);border-block:1px solid var(--edge);}
.player{display:grid;gap:clamp(1.5rem,4vw,var(--s5));}
.player__art{position:relative;align-self:start;isolation:isolate;}
.player__art>img:not(.player__spin){position:relative;z-index:1;width:100%;aspect-ratio:1;
  object-fit:cover;box-shadow:0 30px 80px -30px rgba(0,0,0,.9);}
.player__art::after{content:"";position:absolute;inset:0;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(230,225,214,.10);pointer-events:none;}
.player__spin{position:absolute;right:-3%;top:50%;width:52%;aspect-ratio:1;z-index:0;
  translate:0 -50%;filter:drop-shadow(0 20px 34px rgba(0,0,0,.85));
  transition:translate var(--dur-4) var(--ease-out),rotate 1.4s var(--ease-out);}
.player__art:hover .player__spin{translate:14% -50%;rotate:22deg;}
.player__art:hover .player__spin{translate:14% -50%;}
.player__body{display:grid;align-content:start;gap:var(--s3);}
.player__title{font-family:var(--f-display);font-variation-settings:'opsz' 96,'wght' 800;
  font-size:var(--step-4);line-height:.85;letter-spacing:-.02em;}
.player__meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);}

.wave{display:flex;align-items:flex-end;gap:2px;height:56px;width:100%;
  cursor:pointer;padding-block:2px;}
.wave__bar{flex:1;min-width:1px;background:var(--edge-hi);transform-origin:bottom;
  transition:background var(--dur-1) linear;}
.wave__bar.on{background:var(--ember);}
.wave__bar.cur{background:var(--bone);}

.tracks{border-top:1px solid var(--edge);}
.track{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s2);
  padding:.7rem 0;border-bottom:1px solid var(--edge);position:relative;
  background:none;width:100%;text-align:left;min-height:44px;
  transition:padding-left var(--dur-2) var(--ease),color var(--dur-1) var(--ease);}
.track:hover,.track:focus-visible{padding-left:.6rem;}
.track::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ember);
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--dur-2) var(--ease);}
.track:hover::before,.track.is-playing::before{transform:scaleY(1);transform-origin:top;}
.track__n{font-family:var(--f-mono);font-size:.72rem;color:var(--bone-dim);width:2.2ch;}
.track.is-playing .track__n,.track.is-playing .track__name{color:var(--ember);}
.track__name{font-variation-settings:'wdth' 92,'wght' 500;}
.track__len{font-family:var(--f-mono);font-size:.72rem;color:var(--bone-dim);}
.track__eq{display:none;gap:2px;align-items:flex-end;height:12px;}
.track.is-playing .track__eq{display:inline-flex;}
.track__eq i{width:2px;background:var(--ember);animation:eq 900ms ease-in-out infinite;}
.track__eq i:nth-child(2){animation-delay:150ms}.track__eq i:nth-child(3){animation-delay:300ms}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}

.dsp{display:flex;flex-wrap:wrap;gap:var(--s1);}
.dsp a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.6rem 1rem;
  border:1px solid var(--edge);font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-dim);
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);}
.dsp a:hover{color:var(--bone);border-color:var(--bone);background:rgba(230,225,214,.05);}
.dsp svg{width:15px;height:15px;flex:none;}
.note{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;color:var(--bone-dim);
  text-transform:uppercase;}

/* MUSIC */
.rel{display:grid;gap:var(--s3);border-top:1px solid var(--edge);padding-top:var(--s3);}
.rel__head{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center;
  width:100%;text-align:left;padding:0;min-height:44px;}
.rel__thumb{width:clamp(64px,16vw,104px);aspect-ratio:1;object-fit:cover;
  transition:transform var(--dur-3) var(--ease-out),filter var(--dur-3) var(--ease);
  filter:saturate(.72) brightness(.9);}
.rel:hover .rel__thumb{transform:scale(1.05) rotate(-1.2deg);filter:none;}
.rel__t{display:block;font-family:var(--f-display);font-variation-settings:'opsz' 96,'wght' 700;
  font-size:var(--step-2);line-height:.95;}
.rel__sub{display:block;color:var(--bone-dim);font-size:var(--step--1);font-family:var(--f-mono);
  letter-spacing:.08em;text-transform:uppercase;margin-top:.4rem;text-wrap:balance;}
@media (max-width:479px){.rel__sub{letter-spacing:.04em;font-size:.72rem;}}
.rel__tog{width:40px;height:40px;border:1px solid var(--edge-hi);display:grid;place-items:center;
  flex:none;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);}
.rel__head:hover .rel__tog{border-color:var(--ember);background:rgba(224,85,47,.12);}
.rel__tog svg{width:14px;height:14px;transition:transform var(--dur-2) var(--ease);}
.rel__head[aria-expanded="true"] .rel__tog svg{transform:rotate(45deg);}
.rel__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-3) var(--ease-out);}
.rel__panel>div{overflow:hidden;}
.rel[data-open="true"] .rel__panel{grid-template-rows:1fr;}
.rel__list{columns:2;column-gap:var(--s4);padding-block:var(--s3);}
.rel__list li{break-inside:avoid;display:flex;gap:.7rem;padding:.3rem 0;color:var(--bone-dim);
  font-size:var(--step--1);}
.rel__list span{font-family:var(--f-mono);color:var(--bone-dim);font-size:.7rem;}

/* TOUR */
.date{display:grid;grid-template-columns:1fr;gap:var(--s2) var(--s3);align-items:center;
  padding:clamp(.9rem,2.4vw,1.4rem) 0;border-bottom:1px solid var(--edge);position:relative;
  isolation:isolate;transition:padding var(--dur-2) var(--ease);}
.date::before{content:"";position:absolute;inset:0 -1rem;background:var(--ember);z-index:0;
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--dur-2) var(--ease-out);}
.date>*{position:relative;z-index:1;}
.date:hover:not(.is-out),.date:focus-within:not(.is-out){
  padding-left:clamp(.6rem,2vw,1.4rem);padding-right:clamp(.6rem,2vw,1.4rem);}
.date:hover:not(.is-out)::before,.date:focus-within:not(.is-out)::before{transform:scaleY(1);transform-origin:top;}
/* everything on the ember fill flips to ink — 5.19:1 */
.date:hover:not(.is-out) .date__city,
.date:hover:not(.is-out) .date__venue,
.date:hover:not(.is-out) .date__when{color:var(--on-ember);}
.date:hover:not(.is-out) .btn--solid{background:var(--ink);color:var(--bone);border-color:var(--ink);}
.date:hover:not(.is-out) .btn--solid::before{background:var(--bone);}
.date__main{display:grid;grid-template-columns:1fr;gap:.35rem;align-items:baseline;min-width:0;}
.date__when{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;color:var(--ember);
  white-space:nowrap;}
.date__city{font-family:var(--f-ui);font-variation-settings:'wdth' 74,'wght' 800;
  text-transform:uppercase;font-size:var(--step-2);line-height:1;letter-spacing:.005em;
  overflow-wrap:anywhere;}
.date__venue{display:block;font-family:var(--f-ui);font-variation-settings:'wdth' 100,'wght' 400;
  text-transform:none;letter-spacing:0;font-size:var(--step--1);color:var(--bone-dim);margin-top:.3rem;}
.date__act{display:flex;align-items:center;gap:var(--s2);justify-self:start;}
.date.is-out .date__city{color:var(--bone-dim);}
.soldout{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-dim);border:1px solid var(--edge);padding:.55rem .9rem;white-space:nowrap;}

/* VIDEOS */
.vids{display:grid;gap:var(--s3);}
.vid{position:relative;display:block;overflow:hidden;background:var(--coal);width:100%;padding:0;
  text-align:left;}
.vid img{width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform var(--dur-4) var(--ease-out),filter var(--dur-3) var(--ease);
  filter:saturate(.7) brightness(.82);}
.vid:hover img,.vid:focus-visible img{transform:scale(1.06);filter:none;}
.vid__play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;}
.vid__play span{width:clamp(48px,9vw,64px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(230,225,214,.55);display:grid;place-items:center;
  background:rgba(10,10,11,.42);backdrop-filter:blur(3px);
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);}
.vid:hover .vid__play span{background:var(--ember);border-color:var(--ember);transform:scale(1.08);}
.vid__play svg{width:15px;height:15px;margin-left:2px;}
.vid__cap{display:flex;justify-content:space-between;gap:var(--s2);padding-top:.85rem;align-items:baseline;}
.vid__t{font-variation-settings:'wdth' 92,'wght' 600;}

/* lightbox */
.lb{position:fixed;inset:0;z-index:130;background:rgba(6,6,7,.94);display:none;
  place-items:center;padding:var(--gutter);}
.lb[open],.lb.is-open{display:grid;}
.lb__box{width:min(100%,64rem);}
.lb__frame{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--edge);}
.lb__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.lb__fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:var(--s4);gap:var(--s2);align-content:center;}
.lb__close{position:absolute;top:var(--gutter);right:var(--gutter);width:44px;height:44px;
  display:grid;place-items:center;border:1px solid var(--edge-hi);color:var(--bone);}
.lb__close:hover{border-color:var(--ember);color:var(--ember);}
.lb__cap{padding-top:var(--s2);display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;}

/* GALLERY */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;}
.gal__i{position:relative;display:block;overflow:hidden;background:var(--coal);}
.gal__i img{width:100%;aspect-ratio:1;object-fit:cover;
  filter:saturate(.68) brightness(.86);
  transition:transform var(--dur-4) var(--ease-out),filter var(--dur-3) var(--ease);}
.gal__i:hover img,.gal__i:focus-visible img{transform:scale(1.07);filter:none;}
.gal__i::after{content:"";position:absolute;inset:0;background:rgba(224,85,47,0);
  transition:background var(--dur-2) var(--ease);}
.gal__i:hover::after{background:rgba(224,85,47,.10);}
.gal__tag{position:absolute;left:.6rem;bottom:.6rem;font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone);opacity:0;
  transition:opacity var(--dur-2) var(--ease);text-shadow:0 1px 6px rgba(0,0,0,.9);}
.gal__i:hover .gal__tag{opacity:1;}
.ig-embed{border:1px solid var(--edge);background:var(--coal);padding:var(--s3);
  display:grid;gap:var(--s2);align-content:start;align-self:start;}

/* MERCH */
.goods{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s2);}
.good__fig{display:block;position:relative;overflow:hidden;background:var(--coal);
  margin-bottom:.85rem;}
.good__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.7) brightness(.85);
  transition:transform var(--dur-4) var(--ease-out),filter var(--dur-3) var(--ease);}
.good:hover .good__fig img{transform:scale(1.05);filter:none;}
.good__badge{position:absolute;top:.6rem;left:.6rem;background:var(--ember);color:var(--on-ember);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.3rem .55rem;}
.good__row{display:flex;justify-content:space-between;gap:var(--s2);align-items:baseline;}
.good__n{font-variation-settings:'wdth' 94,'wght' 600;font-size:var(--step-0);}
.good__p{font-family:var(--f-mono);font-size:.8rem;color:var(--ember);}
.good__v{display:block;color:var(--bone-dim);font-size:var(--step--1);margin-top:.2rem;}

/* ABOUT */
.about{display:grid;gap:clamp(1.75rem,5vw,var(--s5));}
.bio p{margin-bottom:var(--s3);max-width:60ch;color:var(--bone-dim);font-size:var(--step-1);
  line-height:1.62;}
.bio p:first-of-type{color:var(--bone);}
.bio strong{color:var(--bone);font-weight:600;}
.lineup{border-top:1px solid var(--edge);}
.lineup li{display:flex;justify-content:space-between;gap:var(--s2);padding:.75rem 0;
  border-bottom:1px solid var(--edge);align-items:baseline;}
.lineup b{font-variation-settings:'wdth' 92,'wght' 600;font-weight:400;}
.lineup span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim);text-align:right;}
.quotes{display:grid;gap:var(--s3);}
.quote{border-left:2px solid var(--ember);padding-left:var(--s3);}
.quote p{font-family:var(--f-display);font-variation-settings:'opsz' 40,'wght' 500;
  font-style:italic;font-size:var(--step-1);line-height:1.3;color:var(--bone);}
.quote cite{display:block;margin-top:.6rem;font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);font-style:normal;}

/* CONTACT */
.contact{display:grid;gap:clamp(1.75rem,5vw,var(--s5));}
.cards{display:grid;gap:var(--s3);}
.card{border:1px solid var(--edge);padding:var(--s3);background:var(--slate);
  transition:border-color var(--dur-2) var(--ease);}
.card:hover{border-color:var(--edge-hi);}
.card h3{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ember);margin-bottom:.65rem;}
.card p{color:var(--bone-dim);font-size:var(--step--1);}
.card a{color:var(--bone);border-bottom:1px solid var(--edge-hi);
  transition:border-color var(--dur-1) var(--ease);word-break:break-word;}
.card a:hover{border-color:var(--ember);}

.form{display:grid;gap:var(--s3);}
.field{display:grid;gap:.45rem;}
.field>label,.field__legend{display:block;font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);}
/* whole row is the hit area, comfortably over 44px */
.check{display:flex;gap:.75rem;align-items:flex-start;min-height:44px;padding:.6rem .75rem;
  border:1px solid var(--edge);background:var(--coal);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);}
.check:hover{border-color:var(--edge-hi);background:var(--slate);}
.check:focus-within{border-color:var(--ember);}
.check input[type="checkbox"]{width:22px;height:22px;min-height:0;flex:none;
  margin:.15rem 0 0;accent-color:var(--ember);}
.check span{font-size:var(--step--1);color:var(--bone-dim);line-height:1.5;}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.8rem .9rem;
  background:var(--coal);border:1px solid var(--edge);color:var(--bone);font:inherit;
  font-size:var(--step-0);border-radius:0;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);}
.field textarea{min-height:8rem;resize:vertical;}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--edge-hi);}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ember);
  background:var(--slate);outline:none;}
.field .hint{font-size:var(--step--1);color:var(--bone-dim);}
.field .err{font-size:var(--step--1);color:var(--ember-hot);display:none;}
.field.has-err input,.field.has-err textarea,.field.has-err select{border-color:var(--ember-hot);}
.field.has-err .err{display:block;}
.form__status{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;min-height:1.2em;}
.form__status[data-s="ok"]{color:var(--ember);}

/* FOOTER */
.foot{border-top:1px solid var(--edge);background:var(--coal);padding-block:var(--s5) var(--s4);}
.foot__grid{display:grid;gap:var(--s4);}
.foot__sig{width:44px;color:var(--ember);margin-bottom:var(--s2);}
.foot__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);}
.foot h4{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-dim);margin-bottom:.75rem;}
.foot li{margin-bottom:.1rem;}
.foot li a{display:inline-flex;align-items:center;min-height:34px;padding:.25rem 0;
  color:var(--bone-dim);font-size:var(--step--1);transition:color var(--dur-1) var(--ease);}
.foot li a:hover{color:var(--ember);}
.foot__base{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);justify-content:space-between;
  border-top:1px solid var(--edge);margin-top:var(--s4);padding-top:var(--s3);}
.socials{display:flex;gap:var(--s1);}
.socials a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--edge);
  color:var(--bone-dim);transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);}
.socials a:hover{color:var(--ember);border-color:var(--ember);}
.socials svg{width:17px;height:17px;}

/* ---------------- responsive ---------------- */
@media (min-width:640px){
  .gal{grid-template-columns:repeat(3,1fr);}
  .vids{grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3);}
  .goods{grid-template-columns:repeat(4,1fr);}
  .foot__cols{grid-template-columns:repeat(4,1fr);}
  .cards{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:560px){
  .date{grid-template-columns:1fr auto;}
  .date__main{grid-template-columns:1fr;}
}
@media (min-width:900px){
  .player{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;}
  .rel__head{grid-template-columns:auto 1fr auto;}
  .about{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);}
  .contact{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);}
  .foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s6);}
  .gallery-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);display:grid;gap:var(--s4);}
}
@media (min-width:1200px){
  .date__main{grid-template-columns:13rem 1fr;gap:var(--s3);}
}

/* honeypot — off-screen rather than display:none, which bots skip */
.honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}