/* ==========================================================================
   RANEY
   Palette pulled off the record sleeves: a 1970s snapshot that has been in a
   shoebox for fifty years. Warm espresso ground, aged-paper type, bone gold
   from the blown highlights, dusty maroon from the Healing cover.
   The logo's thin rectangle is the structural motif and repeats at every
   scale: wordmark, section labels, buttons.
   ========================================================================== */
:root{
  --ground:   #1C1613;
  --ground-2: #251D19;
  --char:     #120D0B;
  --paper:    #EAE2D4;
  --paper-dim:#B4A89B;
  --gold:     #C9A97C;
  --maroon:   #7A443B;

  --display: "Bodoni Moda", Didot, Georgia, serif;
  --util: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --hair: 1px solid rgba(234,226,212,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ground);color-scheme:dark}
/* jump targets clear the fixed header */
section[id]{scroll-margin-top:84px}
body{
  margin:0;background:var(--ground);color:var(--paper);
  font-family:var(--util);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* grain, so nothing on the page looks freshly printed */
.grain{
  position:fixed;inset:-3%;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 800ms steps(3) infinite;
}
@keyframes grainshift{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}}

/* ---------- THE BOX: the logo's rectangle, reused as the system ---------- */
.boxed{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid currentColor;
  font-family:var(--display);font-weight:500;
  text-transform:uppercase;letter-spacing:.34em;
  text-indent:.34em; /* optical centering against the tracking */
  line-height:1;
}
.label{
  font-family:var(--util);font-size:.68rem;font-weight:600;margin:0;
  letter-spacing:.26em;text-transform:uppercase;
  border:1px solid rgba(234,226,212,.3);padding:.45rem .85rem .4rem;
  display:inline-block;color:var(--paper-dim);
}
.section-head{
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  margin-bottom:clamp(2rem,5vw,3.5rem);
}
.section-head::after{content:"";flex:1;height:1px;background:rgba(234,226,212,.18)}
.section-head .note{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim);
}
.band{padding:clamp(4.5rem,10vw,8rem) var(--gutter);background:var(--ground)}
.lede{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.25;max-width:24ch;margin:0;font-weight:500}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--util);font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  padding:.95rem 1.5rem;border:1px solid var(--paper);
  transition:background .3s,color .3s,border-color .3s;
}
.btn:hover{background:var(--paper);color:var(--ground)}
.btn--solid{background:var(--gold);border-color:var(--gold);color:var(--char)}
.btn--solid:hover{background:transparent;color:var(--gold)}
.btn--ghost{border-color:rgba(234,226,212,.28);color:var(--paper-dim)}
.btn--ghost:hover{background:transparent;border-color:var(--paper);color:var(--paper)}

/* ============================ NAV ============================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;gap:2rem;padding:.85rem var(--gutter);
  background:linear-gradient(to bottom,rgba(18,13,11,.96),rgba(18,13,11,0));
  backdrop-filter:blur(6px);
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.nav.is-visible{transform:translateY(0)}
.nav__mark{display:block;line-height:0}
.nav__mark img{width:104px;display:block}
.nav__links{display:flex;gap:1.6rem;margin-left:auto;align-items:center}
.nav__links a{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);transition:color .25s}
.nav__links a:hover,.nav__links a.is-active{color:var(--paper)}
.nav__cta{color:var(--gold)!important;border-bottom:1px solid var(--gold);padding-bottom:2px}
.nav__toggle{
  display:none;margin-left:auto;background:none;border:0;color:var(--paper);
  font-family:var(--util);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;padding:.5rem 0;
}
.menu{
  position:fixed;inset:0;z-index:85;background:var(--char);
  display:flex;flex-direction:column;justify-content:center;gap:.3rem;padding:var(--gutter);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.menu.is-open{opacity:1;visibility:visible}
.menu a{font-family:var(--display);font-weight:500;font-size:clamp(2rem,10vw,3rem);line-height:1.2}
.menu__close{
  position:absolute;top:1rem;right:var(--gutter);background:none;border:0;color:var(--paper);
  font-family:var(--util);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;
}

/* ============================ HERO ============================ */
/* The band photograph is a 2:1 landscape with six people across it. Any
   crop-to-fill treatment loses whoever is on the ends, so the photo is never
   cropped at any width: it keeps its own proportions, capped in height, and
   the wordmark and calls to action sit on solid ground underneath it. */
.hero{
  position:relative;display:flex;flex-direction:column;background:var(--ground);
  padding:0 0 clamp(2.5rem,6vw,4rem);overflow:hidden;
}
.hero__photo{
  position:relative;width:100%;aspect-ratio:16/9;max-height:72svh;
  background-color:var(--ground);background-image:var(--hero-wide);
  background-size:cover;background-position:center 42%;
  filter:saturate(.92) contrast(1.02);
}
.hero__photo::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:24%;
  background:linear-gradient(to top,var(--ground) 6%,rgba(28,22,19,0));
}
.hero__scrim{display:none}
.hero__inner{position:relative;z-index:2;width:100%;padding:0 var(--gutter);margin-top:-.25rem}
.hero__mark{
  margin:0;line-height:0;
  opacity:0;animation:rise 1.1s .25s forwards;
}
.hero__mark img{width:clamp(230px,42vw,540px);display:block}
.hero__line{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.35;color:var(--paper);
  max-width:26ch;margin:1.1rem 0 0;opacity:0;animation:rise 1s .75s forwards;
}
.hero__cta{margin-top:1.5rem;opacity:0;animation:rise 1s .95s forwards}
@media (max-width:760px){
  .hero__line{font-size:1.15rem;max-width:none}
  .hero__cta .btn{width:100%;justify-content:center}
}
.hero__place{
  margin:1.15rem 0 0;font-size:.68rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);opacity:0;animation:rise .9s .55s forwards;
}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ============================ MUSIC ============================ */
.music{background:var(--ground-2)}
.releases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(2.5rem,6vw,5rem)}

/* Covers sit like prints laid on a table, then straighten when you reach for them. */
.sleeve{
  display:block;background:#EFE9DC;padding:12px 12px 46px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  transform:rotate(var(--tilt,-1.4deg));
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s;
  max-width:420px;
}
.release:hover .sleeve{transform:rotate(0) translateY(-6px);box-shadow:0 26px 55px rgba(0,0,0,.55)}
.sleeve img{width:100%;aspect-ratio:1;object-fit:cover}
.sleeve figcaption{
  margin-top:12px;font-size:.6rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#7A6A5C;text-align:center;
}
.release__body{margin-top:2rem}
.release h3{font-family:var(--display);font-size:clamp(2rem,4.6vw,3rem);line-height:1;margin:.7rem 0 .4rem;font-weight:400}
.release__meta{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim);margin:0 0 1.2rem}
.release__story{max-width:44ch;color:var(--paper-dim);margin:0 0 1.8rem;font-size:.95rem;line-height:1.65}
.platforms{list-style:none;margin:0;padding:0;border-top:var(--hair);max-width:420px}
.platforms li{border-bottom:var(--hair)}
.platforms a{
  display:flex;align-items:center;gap:1rem;padding:.85rem .2rem;
  font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  transition:padding-left .3s,color .3s;
}
.platforms a:hover{padding-left:.9rem;color:var(--gold)}
.platforms .arrow{margin-left:auto;color:var(--paper-dim);transition:transform .3s}
.platforms a:hover .arrow{transform:translateX(5px)}

/* ============================ WATCH ============================ */
.studiogrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.1rem;
}
.studiogrid img{aspect-ratio:3/4;object-fit:cover;transition:filter .45s,opacity .45s}
/* the tracking grid doubles as a mixer once the audio is loaded */
.apart{margin-top:clamp(2.5rem,5vw,3.5rem)}
.apart__lede{font-size:.98rem;line-height:1.7;color:var(--paper-dim);max-width:56ch;margin:0 0 1.2rem}
.apart__lede em{color:var(--paper);font-style:italic}
.apart__deck{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  border:var(--hair);padding:.9rem 1.1rem;margin-bottom:1.2rem}
.apart__play{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid var(--gold);
  background:none;color:var(--gold);cursor:pointer;display:grid;place-items:center;font-size:.85rem;
  transition:background .25s,color .25s}
.apart__play:hover{background:var(--gold);color:var(--ground)}
.apart__play:disabled{opacity:.45;cursor:progress}
.apart__now{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim)}
.apart__time{margin-left:auto;font-size:.68rem;color:var(--paper-dim);font-variant-numeric:tabular-nums}
.apart__reset,.apart__share{font:inherit;font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);background:none;border:var(--hair);padding:.6rem .9rem;cursor:pointer}
.apart__reset:hover,.apart__share:hover{border-color:var(--gold);color:var(--gold)}
/* a part that has been taken out drains of colour */
.studiogrid figure.is-out img{filter:grayscale(1) brightness(.34);opacity:.75}
.studiogrid figure.is-live{cursor:pointer}
.studiogrid figure .level{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.4);opacity:0;transition:opacity .3s}
.studiogrid figure.is-live .level{opacity:1}
.studiogrid figure .level i{display:block;height:100%;width:0;background:var(--gold);transition:width .09s linear}
.studiogrid figure.is-out .level i{background:rgba(234,226,212,.22)}
/* on/off word, top-right, opposite the name; only shown once the audio is live */
.livepic .state{
  position:absolute;top:.95rem;right:1rem;z-index:2;
  font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);pointer-events:none;opacity:0;transition:opacity .3s,color .3s;
}
.studiogrid figure.is-live .state{opacity:1}
.studiogrid figure.is-out .state{color:var(--paper-dim)}
@media (max-width:760px){ .livepic .state{top:.7rem;right:.7rem;letter-spacing:.14em} }
/* name in the top-left, over a soft scrim so it reads on any photo */
.livepic figcaption.who{
  position:absolute;top:0;left:0;width:100%;bottom:auto;
  padding:.95rem 1rem 2.2rem;
  background:linear-gradient(to bottom,rgba(14,10,9,.62),transparent);
  font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper);pointer-events:none;
}
.livepic figcaption.who span{color:var(--paper-dim);font-weight:500}
@media (max-width:760px){ .livepic figcaption.who{font-size:.6rem;padding:.7rem .7rem 1.6rem;letter-spacing:.14em} }
.livegrid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;
  align-items:stretch;margin-bottom:3rem;
}
.livegrid .livepic img{aspect-ratio:3/2;object-fit:cover;object-position:center}
.livepic{position:relative;margin:0;border:var(--hair);overflow:hidden}
.livepic img{width:100%;display:block}
.livepic figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.75rem 1.1rem .95rem;
  background:linear-gradient(to top,rgba(14,10,9,.92),transparent);
  font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);
}
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1.5rem}
/* one video = let it own the full width of the page */
.videos:has(.video:only-child){
  grid-template-columns:1fr;
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.videos:has(.video:only-child){margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.videos:has(.video:only-child) .video{border-left:0;border-right:0}
.videos:has(.video:only-child) .video__frame{aspect-ratio:16/9}
.videos:has(.video:only-child) .video__frame img,
.videos:has(.video:only-child) .video__frame video,
.videos:has(.video:only-child) .video__frame iframe{
  width:100%;height:100%;object-fit:cover;
}
.videos:has(.video:only-child) .video__meta{
  max-width:1180px;margin:0 auto;padding-left:clamp(1.1rem,5vw,2.5rem);
}
.video{position:relative;border:var(--hair);background:var(--ground-2);cursor:pointer;overflow:hidden}
.video--soon{cursor:default}
.video--soon .video__frame img{opacity:.4}
.video--soon:hover .video__frame img{transform:none;opacity:.4}
.video__soon{
  position:absolute;inset:auto 0 0 0;padding:2.5rem 1.1rem 1rem;text-align:center;
  background:linear-gradient(to top,rgba(14,10,9,.85),transparent);
  font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-dim);
}
.video__frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--char)}
.video__frame img{width:100%;height:100%;object-fit:cover;opacity:.6;transition:transform .8s,opacity .4s}
.video:hover .video__frame img{transform:scale(1.05);opacity:.85}
.video.is-playing{cursor:default}
.video.is-playing .video__play{display:none}
.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.video__play span{
  width:60px;height:60px;border:1px solid var(--paper);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(18,13,11,.35);
  transition:background .3s,border-color .3s,color .3s;
}
.video:hover .video__play span{background:var(--gold);border-color:var(--gold);color:var(--char)}
.video__meta{padding:1rem 1.2rem 1.3rem}
.video__meta h3{font-family:var(--display);font-size:1.25rem;margin:.55rem 0 0;line-height:1.25;font-weight:500}

/* ============================ PRESS ============================ */
.press{background:var(--ground-2)}

.podcasts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.pod{
  display:block;border:var(--hair);padding:clamp(1.5rem,3vw,2.1rem);
  background:var(--ground);transition:border-color .35s,transform .35s;
}
.pod:hover{border-color:var(--gold);transform:translateY(-3px)}
.pod__show{
  display:flex;align-items:center;gap:.6rem;
  font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.pod__show::before{
  content:"";width:22px;height:22px;border:1px solid var(--gold);border-radius:50%;
  background:radial-gradient(circle at 58% 50%, var(--gold) 0 3px, transparent 3px);
  flex:0 0 auto;
}
.pod__title{
  font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.1;margin:.9rem 0 .2rem;color:var(--paper);
}
.pod__ep{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim)}
.pod__blurb{font-size:.9rem;line-height:1.6;color:var(--paper-dim);margin:.9rem 0 1.2rem;max-width:44ch}
.pod__listen{
  font-size:.64rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);
}
.pod:hover .pod__listen{color:var(--gold)}
.pull{margin:0 0 clamp(2.5rem,5vw,3.5rem);padding:0 0 clamp(2rem,4vw,2.75rem);border-bottom:var(--hair)}
.pull blockquote{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.6rem,4vw,2.9rem);line-height:1.22;margin:0;max-width:19ch;color:var(--paper);
}
.pull blockquote::before{content:"\201C"}
.pull blockquote::after{content:"\201D"}
.pull figcaption{
  margin-top:1.25rem;font-size:.64rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
}
.pull figcaption span{color:var(--paper-dim);font-weight:500}
.credits{margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;border-top:var(--hair)}
.credits div{
  display:grid;grid-template-columns:11rem 1fr;gap:1.5rem;
  padding:1.15rem .2rem;border-bottom:var(--hair);
}
.credits dt{font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.credits dd{margin:0;font-size:.92rem;line-height:1.55;color:var(--paper-dim)}

/* ============================ SHOWS ============================ */
.showlist{list-style:none;margin:0;padding:0;border-top:var(--hair)}
.show{
  display:grid;grid-template-columns:9rem 1fr auto;gap:1.5rem;align-items:center;
  padding:1.3rem .2rem;border-bottom:var(--hair);
}
.show__date{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.show__venue{font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1.25}
.show__city{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}
.show__poster{
  width:clamp(108px,11vw,148px);height:auto;border:6px solid #EFE9DC;
  box-shadow:0 8px 24px rgba(0,0,0,.45);justify-self:end;cursor:zoom-in;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s;
}
.show__poster:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 40px rgba(0,0,0,.6)}
.show--past{opacity:.6}

/* ---------- poster lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(14,10,9,.94);padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;cursor:zoom-out;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{
  max-width:min(92vw,760px);max-height:86svh;width:auto;height:auto;
  border:clamp(8px,1.4vw,14px) solid #EFE9DC;box-shadow:0 30px 80px rgba(0,0,0,.7);
  transform:scale(.96);transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.lightbox.is-open img{transform:scale(1)}
.lightbox__cap{
  position:absolute;left:0;right:0;bottom:clamp(1rem,3vw,2rem);text-align:center;
  font-size:.64rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-dim);
}
.lightbox__close{
  position:absolute;top:clamp(.8rem,2vw,1.4rem);right:clamp(.8rem,2vw,1.4rem);
  background:none;border:0;color:var(--paper);cursor:pointer;
  font-family:var(--util);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:.75rem;min-height:44px;
}
.show--past .show__date{color:var(--paper-dim)}
.empty{border:1px dashed rgba(234,226,212,.24);padding:clamp(2rem,5vw,3.5rem);text-align:center}
.empty p{font-family:var(--display);font-size:clamp(1.35rem,3vw,1.9rem);margin:0 auto 1.5rem;max-width:24ch}
.mailnote{
  display:block;margin-top:.7rem;font-size:.72rem;letter-spacing:.06em;color:var(--paper-dim);
}
.mailnote a{color:var(--paper-dim);border-bottom:1px solid rgba(180,168,155,.35)}
.mailnote a:hover{color:var(--gold);border-color:var(--gold)}
.booking{
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);border-top:var(--hair);
  display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;
}

/* ============================ MERCH ============================ */
.merch{background:var(--ground-2)}
.goods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:2rem}
.good__img{
  aspect-ratio:4/5;border:var(--hair);margin-bottom:1rem;overflow:hidden;
  background:linear-gradient(160deg,#2C221D,#171110);
  display:flex;align-items:center;justify-content:center;
  color:rgba(234,226,212,.3);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  transition:border-color .35s;
}
.good__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.good:hover .good__img img{transform:scale(1.03)}
.good:hover .good__img{border-color:var(--gold)}
.good h3{font-family:var(--display);font-size:1.3rem;margin:0 0 .15rem;font-weight:500}
.good__price{font-size:.75rem;letter-spacing:.12em;color:var(--paper-dim)}
.good__buy{margin-top:1rem}

/* ============================ SUBSCRIBE ============================ */
.subscribe{
  position:relative;text-align:center;
  background:radial-gradient(75% 130% at 50% 0%, rgba(122,68,59,.4), transparent 68%),var(--ground);
}
.subscribe .lede{max-width:19ch;margin:1.25rem auto 1rem}
.subscribe p.sub{color:var(--paper-dim);max-width:44ch;margin:0 auto 2.5rem}
.signup{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;max-width:540px;margin:0 auto}
.signup input{
  flex:1 1 250px;background:transparent;border:1px solid rgba(234,226,212,.32);
  color:var(--paper);font-family:var(--util);font-size:.9rem;padding:.9rem 1.1rem;
}
.signup input::placeholder{color:var(--paper-dim);letter-spacing:.06em}
.signup input:focus{border-color:var(--gold);outline:none}
.signup button{border:0;cursor:pointer;font-family:var(--util)}
.signup__note{margin-top:1.2rem;font-size:.68rem;letter-spacing:.12em;color:var(--paper-dim)}

/* ============================ ABOUT ============================ */
.about__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.about__photo{border:12px solid #EFE9DC;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.about__photo{width:100%}
.about__then{margin:1.5rem 0 0}
.about__then img{width:100%;border:8px solid #EFE9DC;box-shadow:0 14px 32px rgba(0,0,0,.4)}
.about__then figcaption{
  margin-top:.8rem;font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-dim);
}
.members{list-style:none;margin:2.25rem 0 0;padding:1.5rem 0 0;border-top:var(--hair);max-width:32rem}
.members li{
  display:flex;justify-content:space-between;gap:1.5rem;padding:.5rem 0;
  font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim);
}
.members li span{color:var(--paper)}
.about__copy p{max-width:54ch;color:var(--paper-dim)}
.about__copy p:first-of-type{font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.55;color:var(--paper)}

/* ============================ FOOTER ============================ */
.foot{padding:clamp(3.5rem,7vw,5rem) var(--gutter) 7rem;border-top:var(--hair)}
.foot__grid{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;align-items:flex-start}
.foot__mark{font-size:1.1rem;padding:.6rem 1rem .55rem}
.socials{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.5rem}
.socials a{font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim);transition:color .25s}
.socials a:hover{color:var(--gold)}
.foot__contact{font-size:.85rem;line-height:1.9;color:var(--paper-dim)}
.foot__contact a:hover{color:var(--paper)}
.foot__fine{margin-top:3rem;padding-top:1.4rem;border-top:var(--hair);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(162,149,138,.65)}

/* ============================ THE DECK ============================
   Pinned to the bottom once you leave the hero. For a band with two singles
   and a growing audience, a stream is the most valuable thing a visitor can
   give you, so it stays one tap away the whole way down the page.
   ================================================================ */
.deck{
  position:fixed;left:0;right:0;bottom:0;z-index:88;
  background:rgba(14,10,9,.95);backdrop-filter:blur(10px);
  border-top:1px solid rgba(201,169,124,.4);
  transform:translateY(100%);transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.deck.is-visible{transform:translateY(0)}
.deck__bar{display:flex;align-items:center;gap:1rem;padding:.65rem var(--gutter);cursor:pointer}
.deck__play{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s;
}
.deck__bar:hover .deck__play{background:var(--gold);color:var(--char)}
.deck__now{font-size:.57rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--maroon);display:block;filter:brightness(1.5)}
.deck__track{font-family:var(--util);font-weight:500;font-size:.92rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck__hint{margin-left:auto;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim);white-space:nowrap}
.deck__player{height:0;overflow:hidden;transition:height .45s ease}
.deck.is-open .deck__player{height:352px}
.deck__player iframe{width:100%;height:352px;border:0;display:block}

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px){
  .nav__links{display:none}
  .nav__toggle{display:block}
  .about__grid{grid-template-columns:1fr}
  .show{grid-template-columns:1fr;gap:.3rem;padding:1.15rem .2rem}
  .credits div{grid-template-columns:1fr;gap:.3rem;padding:1rem .2rem}
  /* comfortable touch targets */
  .nav__toggle{padding:.85rem 0;min-height:44px}
  .menu__close{padding:.75rem .25rem;min-height:44px;display:flex;align-items:center}
  .socials a,.foot__contact a,.pull figcaption a{display:inline-block;padding:.45rem 0;min-height:34px}
  .menu a{padding:.35rem 0}
  .podcasts{grid-template-columns:1fr;gap:1rem}
  .show .btn{justify-self:start;margin-top:.55rem}
  .deck__hint{display:none}
}

/* ==========================================================================
   MOBILE
   The band photograph is a 2:1 landscape with six people across it. Forcing
   that into a full-height portrait viewport crops four of them out, so on a
   phone the hero stacks instead: the whole photo at its own proportions, then
   the wordmark and the calls to action on solid ground beneath it. Nothing
   gets cropped and the buttons land above the fold.
   ========================================================================== */
@media (max-width:760px){
  html,body{-webkit-tap-highlight-color:rgba(201,169,124,.2)}

  .hero{padding-bottom:clamp(2.5rem,8vw,3.5rem)}
  /* A portrait frame from the same night, so the phone hero has real height
     instead of a thin landscape strip. */
  .hero__photo{background-image:var(--hero-tall);aspect-ratio:3/4;max-height:66svh;background-position:center 30%}
  .hero__mark img{width:min(74vw,320px)}
  .nav__mark img{width:88px}
  .hero__place{margin-top:.9rem;letter-spacing:.22em;font-size:.68rem}

  /* Tilted sleeves depend on hover to straighten, which a phone cannot do.
     Lay them flat and let them run full width instead. */
  .sleeve{transform:none;max-width:none;padding:10px 10px 38px}
  .release:hover .sleeve{transform:none}
  .releases{gap:3.5rem}
  .platforms{max-width:none}

  .livegrid{grid-template-columns:1fr;gap:1rem}
  .livegrid .livepic img{aspect-ratio:3/2}
  .videos:has(.video:only-child) .video__frame{aspect-ratio:16/10}
  .studiogrid{grid-template-columns:1fr 1fr;gap:.7rem}
  .section-head{gap:.9rem;margin-bottom:2rem}
  .about__photo{border-width:8px}
  .goods{grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .good h3{font-size:1.15rem}
  .booking{gap:1.25rem}
  .booking .btn{width:100%;justify-content:center}
  .signup{max-width:none}
  .signup input,.signup button{flex:1 1 100%;justify-content:center}
  .foot{padding-bottom:8rem}
  .foot__grid{gap:2rem}

  /* The compact Spotify embed, so the deck never eats half the screen. */
  .deck.is-open .deck__player{height:80px}
  .deck__player iframe{height:80px}
  .deck__bar{padding:.6rem var(--gutter)}
}

@media (max-width:400px){
  .goods{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero__mark,.hero__place{opacity:1}
}

/* ================= THE CONSOLE (the-console branch) ================= */

/* The grid is also a stage: the spectrum washes behind the photographs. */
.studiogrid{position:relative}
.studiogrid > canvas.spectrum{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.5}
.studiogrid figure{z-index:1}

/* Each photograph breathes with its own signal. --lv is written per frame
   by the meters; at zero everything below is exactly the resting look. */
.studiogrid figure.is-live:not(.is-out) img{
  filter:brightness(calc(1 + var(--lv,0)*.45));
  transform:scale(calc(1 + var(--lv,0)*.02));
  transition:filter .09s linear,transform .09s linear;
}
canvas.ribbon{position:absolute;left:0;right:0;bottom:0;width:100%;height:44px;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s}
figure.is-live canvas.ribbon{opacity:1}
figure.is-out canvas.ribbon{opacity:.25}

/* Press and hold: one player alone, everyone else steps back. */
.studiogrid figure{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.studiogrid.is-holding figure:not(.is-held) img{opacity:.3}
.studiogrid figure.is-held{outline:1px solid var(--gold);outline-offset:-1px}

/* The assembly: parts wait in the dark and ignite as they enter. */
.studiogrid figure.is-waiting img{filter:grayscale(.9) brightness(.3);opacity:.8}
.studiogrid figure.is-lit img{animation:ignite 1.4s ease-out}
@keyframes ignite{0%{filter:brightness(.3) grayscale(.9)}35%{filter:brightness(1.7) grayscale(0)}100%{filter:brightness(1)}}

.apart__share.is-on{border-color:var(--gold);color:var(--gold)}

/* The wall: mixes from the crowd. */
.wall__sign{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0;max-width:540px}
.wall__sign input#wallName{
  flex:1 1 220px;background:transparent;border:1px solid rgba(234,226,212,.32);
  color:var(--paper);font-family:var(--util);font-size:.9rem;padding:.9rem 1.1rem;
}
.wall__sign input#wallName:focus{outline:none;border-color:var(--gold)}
.wall__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.9rem;margin-top:1.4rem}
.wallmix{border:var(--hair);background:var(--ground-2);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem}
.wallmix b{font-family:var(--display);font-weight:500;font-size:1.15rem;letter-spacing:.01em}
.wallmix .wallmix__parts{color:var(--gold);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.wallmix .wallmix__row{display:flex;gap:.5rem;margin-top:.4rem}
.wallmix button{font:inherit;font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  background:none;border:1px solid rgba(234,226,212,.3);color:var(--paper-dim);padding:.45rem .8rem;cursor:pointer}
.wallmix button:hover{border-color:var(--gold);color:var(--gold)}
.wallmix .wallmix__you{color:var(--gold);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}

@media (prefers-reduced-motion: reduce){
  .studiogrid figure.is-live:not(.is-out) img{filter:none;transform:none;transition:none}
  .studiogrid figure.is-lit img{animation:none}
  canvas.ribbon,.studiogrid > canvas.spectrum{display:none}
}

/* The stage: players you can pick up and move. */
.stagepanel{position:relative;height:190px;border:var(--hair);background:var(--ground-2);margin-top:1rem;touch-action:none;overflow:hidden}
.stagepanel::after{content:"the audience";position:absolute;bottom:.45rem;left:50%;transform:translateX(-50%);
  color:var(--paper-dim);font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;pointer-events:none}
.stagepanel::before{content:"";position:absolute;left:8%;right:8%;bottom:1.6rem;border-top:1px dashed rgba(234,226,212,.14);pointer-events:none}
.stagechip{position:absolute;transform:translate(-50%,-50%);font:600 .6rem var(--util);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);background:var(--ground);border:1px solid rgba(201,169,124,.5);padding:.4rem .7rem;cursor:grab;touch-action:none;user-select:none}
.stagechip.is-moving{cursor:grabbing;border-color:var(--gold);box-shadow:0 0 18px rgba(201,169,124,.25);z-index:2}

/* Lights out: the room goes dark, the song becomes a landscape. */
.lightsout{position:fixed;inset:0;z-index:200;background:#0B0806}
.lightsout canvas{position:absolute;inset:0;width:100%;height:100%}
.lightsout__close{position:absolute;top:1.2rem;right:1.2rem;z-index:2;font:600 .6rem var(--util);letter-spacing:.2em;text-transform:uppercase;
  background:none;border:1px solid rgba(234,226,212,.35);color:var(--paper);padding:.55rem 1rem;cursor:pointer}
.lightsout__close:hover{border-color:var(--gold);color:var(--gold)}
.lightsout__hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);
  color:var(--paper-dim);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;pointer-events:none}

/* The console: one bar, numbered steps, one open panel, and the
   photographs on screen the whole time. */
.console{border:var(--hair);background:rgba(0,0,0,.14);padding:clamp(.9rem,2vw,1.4rem);margin-top:1.2rem}
.console__bar{border:0;padding:0;margin:0 0 .9rem}
.console__bar #apartLights{margin-left:.9rem}
.console__steps{display:flex;gap:.4rem;flex-wrap:wrap;border-bottom:var(--hair);padding-bottom:.7rem}
.console__tab{font:600 .62rem var(--util);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  background:none;border:1px solid transparent;color:var(--paper-dim);padding:.55rem .9rem}
.console__tab:hover{color:var(--gold)}
.console__tab.is-active{color:var(--gold);border-color:rgba(201,169,124,.5)}
.console__panel{padding:.9rem 0 1rem;min-height:96px}
.console__how{font-size:.85rem;line-height:1.7;color:var(--paper-dim);max-width:64ch;margin:0 0 .8rem}
.console__note{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);margin:.2rem 0 .6rem}
.stagepanel__hint{position:absolute;top:.6rem;left:50%;transform:translateX(-50%);width:max-content;max-width:92%;text-align:center;
  color:var(--paper-dim);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;pointer-events:none}

/* Inside the console the grid tightens so the whole instrument fits a
   screen: one row of six on a desktop, two rows of three on a phone. */
.console .studiogrid{margin-top:1rem}
@media (min-width:1020px){
  .console .studiogrid{grid-template-columns:repeat(6,1fr);gap:.7rem}
  .console .livepic figcaption.who{font-size:.55rem;padding:.55rem .55rem 1.1rem;letter-spacing:.1em}
  .console .livepic .state{top:.5rem;right:.5rem;font-size:.5rem}
  .console canvas.ribbon{height:32px}
}
.console .stagepanel{height:150px}

/* The wall as a step: a strip you thumb through, not a page you scroll. */
.console .wall__grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(185px,230px);
  overflow-x:auto;padding-bottom:.6rem;scrollbar-width:thin;margin-top:.4rem}
.console .wall__sign{margin:.4rem 0 .8rem}

/* Focus: the console as its own room. */
.console__exit{display:none;margin-left:auto}
.console.is-focus{position:fixed;inset:0;z-index:180;margin:0;border:0;background:var(--char);
  overflow:auto;padding:clamp(1.1rem,3vh,2.4rem) clamp(1rem,5vw,5rem);display:grid;align-content:safe center}
.console.is-focus .console__exit{display:inline-block}
.console.is-focus .console__bar #apartTime{margin-left:0}
body.console-open{overflow:hidden}
body.console-open .deck,body.console-open .nav{display:none}

/* The Cut: the record's blocks, then yours. */
.cut__source{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.9rem}
.cut__row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;border-top:1px dashed rgba(234,226,212,.14);padding-top:.8rem}
.cut__label{font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.cut__seq{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.cutchip{font:600 .6rem var(--util);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  background:none;border:1px solid rgba(234,226,212,.3);color:var(--paper-dim);padding:.45rem .75rem}
.cutchip:hover{border-color:var(--gold);color:var(--gold)}
.cutchip--mine{border-color:rgba(201,169,124,.55);color:var(--gold)}
.cutchip--mine.is-now{background:var(--gold);color:var(--ground);border-color:var(--gold)}
.cut__empty{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim)}