/* ══════════════════════════════════════════════════════════════════════
   TRIPLE KARMA
   Dark, electric, glitched. One stylesheet, no build step.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#050506;
  --bg-2:#0b0b0f;
  --ink:#f3f3f6;
  --dim:#83838f;
  --line:#1c1c22;

  --cyan:#22e6ff;
  --mag:#ff1f5a;
  --acid:#d8ff2e;

  --display:'Archivo Black', 'Haettenschweiler', 'Arial Black', Impact, sans-serif;
  --ui:'Barlow Condensed', 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gut: clamp(1.25rem, 4vw, 5rem);
  --maxw: 1280px;

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
/* .glitch sets display:inline-block, which outranks the UA rule for [hidden]. */
[hidden]{ display:none !important; }

/* Only while the plasma hold is active. iOS reads a long press as "select
   text" and shows the callout menu; this suppresses both without taking
   away the ability to copy an e-mail address the rest of the time. */
html.is-holding, html.is-holding *{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ui);
  font-size:clamp(16px,1.05vw,19px);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ─── FX stack ──────────────────────────────────────────────────────── */

#fx{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  /* the canvas paints its own black; this keeps a floor under it */
  background:radial-gradient(120% 90% at 50% 0%, #101019 0%, #050506 55%, #000 100%);
}

#scanlines{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.55) 2px 3px);
  mix-blend-mode:multiply;
}

#grain{
  position:fixed; inset:-50%; z-index:3; pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 700ms steps(4,end) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}      25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}  75%{transform:translate(-2%,-2%)}
  100%{transform:translate(0,0)}
}

/* full-bleed white-out on a hard hit — capped well under 3Hz by JS */
#flash{
  position:fixed; inset:0; z-index:4; pointer-events:none;
  background:#fff; opacity:0; transition:opacity 180ms ease-out;
  mix-blend-mode:overlay;
}
#flash.on{ opacity:.16; transition-duration:20ms; }

body.fx-off #fx,
body.fx-off #grain,
body.fx-off #scanlines,
body.fx-off #flash{ display:none; }

/* ─── glitch text ───────────────────────────────────────────────────── */
/*
   Two coloured copies of the same text sit exactly behind the original.
   On a burst they are torn sideways and sliced by clip-path, which reads
   as the RGB channels pulling out of the white.
*/

.glitch{ position:relative; display:inline-block; isolation:isolate; }

.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  clip-path:inset(100% 0 0 0);
}
.glitch::before{ color:var(--cyan); text-shadow:-1px 0 var(--cyan); }
.glitch::after { color:var(--mag);  text-shadow: 1px 0 var(--mag);  }

.glitch.is-glitching::before{ opacity:.9; animation:g-left  .42s steps(2,end) 1 both; }
.glitch.is-glitching::after { opacity:.9; animation:g-right .42s steps(2,end) 1 both; }
.glitch.is-glitching{ animation:g-body .42s steps(2,end) 1 both; }

@keyframes g-body{
  0%,100%{ transform:translate(0) }
  22%{ transform:translate(-2px,1px) }
  47%{ transform:translate(3px,-1px) }
  68%{ transform:translate(-1px,0) }
}
@keyframes g-left{
  0%  { clip-path:inset(4% 0 82% 0);  transform:translate(-9px,0)  scaleX(1.06) }
  20% { clip-path:inset(58% 0 22% 0); transform:translate(-14px,0) scaleX(1.14) }
  40% { clip-path:inset(28% 0 55% 0); transform:translate(-5px,0)  scaleX(1.02) }
  60% { clip-path:inset(76% 0 8% 0);  transform:translate(-18px,0) scaleX(1.2)  }
  80% { clip-path:inset(12% 0 70% 0); transform:translate(-4px,0)  scaleX(1.03) }
  100%{ clip-path:inset(100% 0 0 0);  transform:translate(0)       scaleX(1)    }
}
@keyframes g-right{
  0%  { clip-path:inset(66% 0 14% 0); transform:translate(8px,0)  scaleX(1.08) }
  20% { clip-path:inset(16% 0 68% 0); transform:translate(15px,0) scaleX(1.16) }
  40% { clip-path:inset(48% 0 38% 0); transform:translate(4px,0)  scaleX(1.02) }
  60% { clip-path:inset(6% 0 84% 0);  transform:translate(20px,0) scaleX(1.22) }
  80% { clip-path:inset(80% 0 6% 0);  transform:translate(6px,0)  scaleX(1.04) }
  100%{ clip-path:inset(100% 0 0 0);  transform:translate(0)      scaleX(1)    }
}

/* a longer, lazier version for headings that hold the eye */
.section__title.is-glitching::before{ animation-duration:.7s }
.section__title.is-glitching::after { animation-duration:.7s }
.section__title.is-glitching        { animation-duration:.7s }

/* ─── fatal error notice ───────────────────────────────────────────── */

#fatal{
  position:fixed; inset:auto 0 0 0; z-index:70;
  background:#12040a; border-top:2px solid var(--mag); color:var(--ink);
  font-family:var(--mono); font-size:12px; line-height:1.7;
  padding:1rem var(--gut); white-space:pre-wrap;
}
#fatal b{ color:var(--mag); }

/* ─── consent ───────────────────────────────────────────────────────── */

#consent{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding:1rem var(--gut);
  background:#08080c; border-top:1px solid var(--cyan);
  box-shadow:0 -20px 60px rgba(0,0,0,.7);
}
.consent__txt{
  margin:0; flex:1 1 320px; max-width:70ch;
  font-family:var(--mono); font-size:11px; line-height:1.8; color:var(--dim);
}
.consent__btns{ display:flex; gap:.6rem; margin-left:auto; }
#consent button{
  appearance:none; cursor:pointer; font-family:var(--ui); font-weight:700;
  letter-spacing:.14em; font-size:.8rem; padding:.6rem 1.1rem; white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s;
}
.consent__no{ background:transparent; border:1px solid var(--line); color:var(--dim); }
.consent__no:hover{ border-color:var(--ink); color:var(--ink); }
.consent__yes{ background:var(--ink); border:1px solid var(--ink); color:#000; }
.consent__yes:hover{ background:var(--acid); border-color:var(--acid); }

.foot__consent{
  appearance:none; background:transparent; border:0; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--dim);
  padding:0; transition:color .2s;
}
.foot__consent:hover{ color:var(--cyan); }

@media (max-width:560px){
  .consent__btns{ margin-left:0; width:100%; }
  #consent button{ flex:1; }
}

/* ─── nav ───────────────────────────────────────────────────────────── */

#nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; gap:1.5rem;
  padding:.85rem var(--gut);
  background:linear-gradient(to bottom, rgba(5,5,6,.92), rgba(5,5,6,0));
  animation:navdrop .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes navdrop{ from{ transform:translateY(-110%) } to{ transform:none } }

.nav__mark img{ height:26px; width:auto; filter:drop-shadow(0 0 10px rgba(34,230,255,.25)); }
#nav nav{ margin-left:auto; display:flex; gap:1.4rem; flex-wrap:wrap; }
#nav nav a{
  font-family:var(--ui); font-weight:700; font-size:.85rem;
  letter-spacing:.18em; text-decoration:none; color:var(--dim);
  transition:color .2s;
}
#nav nav a:hover,#nav nav a:focus-visible{ color:var(--ink); }
.nav__cta{ color:var(--acid) !important; }

/* ─── social icons in the nav ───────────────────────────────────────── */
/*
   Same tear as the text: the icon is a CSS mask, so the cyan and magenta
   copies (::before / ::after, driven by .glitch) slice and slide exactly like
   letters do. The mask sits on the <i> and the pseudo-copies, never on the
   link itself — a mask there would clip the torn copies back into the icon.
*/
.nav__social{
  display:flex; align-items:center; gap:.95rem; flex:0 0 auto;
  padding-left:1.2rem; border-left:1px solid var(--line);
}
.soc{ width:18px; height:18px; color:var(--dim); transition:color .2s; }
.soc:hover,.soc:focus-visible{ color:var(--ink); outline:none; }
.soc:focus-visible{ outline:1px solid var(--cyan); outline-offset:4px; }
.soc i,
.soc.glitch::before,
.soc.glitch::after{
  -webkit-mask:var(--ico) center / contain no-repeat;
          mask:var(--ico) center / contain no-repeat;
}
.soc i{ display:block; width:100%; height:100%; background:currentColor; }
.soc.glitch::before,
.soc.glitch::after{ content:''; text-shadow:none; }
.soc.glitch::before{ background:var(--cyan); }
.soc.glitch::after { background:var(--mag); }
.soc--instagram{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm5 3.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zm5.5-4.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E"); }
.soc--facebook{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.6 22v-8.2h2.8l.4-3.3h-3.2V8.4c0-.95.27-1.6 1.63-1.6h1.72V3.87A23 23 0 0 0 14.45 3.7c-2.48 0-4.18 1.52-4.18 4.3v2.5H7.47v3.3h2.8V22z'/%3E%3C/svg%3E"); }
.soc--youtube{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M22.5 7.2a2.8 2.8 0 0 0-2-2C18.7 4.7 12 4.7 12 4.7s-6.7 0-8.5.5a2.8 2.8 0 0 0-2 2C1 9 1 12 1 12s0 3 .5 4.8a2.8 2.8 0 0 0 2 2c1.8.5 8.5.5 8.5.5s6.7 0 8.5-.5a2.8 2.8 0 0 0 2-2C23 15 23 12 23 12s0-3-.5-4.8zM9.8 15.3V8.7l5.7 3.3z'/%3E%3C/svg%3E"); }

/* A bare dot read as a status light, not as something you could press. This
   is a switch: label plus track plus knob, on every screen size, because the
   way out of the strobing has to be obvious to anyone who needs it. */
#fxtoggle{
  appearance:none; background:transparent; border:1px solid var(--line);
  color:var(--dim); font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  padding:.35rem .5rem; cursor:pointer; display:flex; align-items:center; gap:.45rem;
  flex:0 0 auto; transition:border-color .2s, color .2s;
}
#fxtoggle:hover,#fxtoggle:focus-visible{ color:var(--ink); border-color:#3a3a46; outline:none; }
#fxtoggle:focus-visible{ outline:1px solid var(--cyan); outline-offset:2px; }

.fxtoggle__track{
  position:relative; width:26px; height:14px; border-radius:999px;
  background:rgba(216,255,46,.25); border:1px solid var(--acid);
  transition:background .2s, border-color .2s;
}
.fxtoggle__knob{
  position:absolute; top:1px; left:13px; width:10px; height:10px; border-radius:50%;
  background:var(--acid); box-shadow:0 0 8px var(--acid);
  transition:left .2s cubic-bezier(.2,.8,.2,1), background .2s, box-shadow .2s;
}
/* Styled from the button's own aria-checked rather than a class on <body>:
   the state lives on the control, so the switch cannot get out of step with
   what it reports to screen readers. */
#fxtoggle[aria-checked="false"] .fxtoggle__track{ background:#15151c; border-color:#33333f; }
#fxtoggle[aria-checked="false"] .fxtoggle__knob{ left:1px; background:#5a5a68; box-shadow:none; }

@media (prefers-reduced-motion: reduce){ .fxtoggle__knob{ transition:none; } }

@media (max-width:860px){
  #nav nav{ gap:.85rem; }
  #nav nav a{ font-size:.72rem; letter-spacing:.1em; }
  /* The kill switch is the only way out of the strobing, so it keeps its
     label here too — an unlabelled control is the first thing people skip. */
  #fxtoggle{ padding:.3rem .45rem; gap:.35rem; }
}
@media (max-width:560px){
  /* Hiding the links left phones with no way to reach any section but the
     CTA. Keep them all and let the row scroll sideways instead. */
  #nav{ gap:.75rem; padding-inline:.9rem; }
  #nav nav{
    /* overflow:auto lets a flex item shrink past its content, so claim the
       rest of the row explicitly rather than collapsing to the last link. */
    flex:1 1 auto; min-width:0; margin-left:.6rem;
    gap:.9rem; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; mask-image:linear-gradient(to right,#000 88%,transparent);
  }
  #nav nav::-webkit-scrollbar{ display:none; }
  #nav nav a{ white-space:nowrap; font-size:.68rem; }
  .nav__social{ gap:.7rem; padding-left:0; border-left:0; }
  .soc{ width:16px; height:16px; }
  /* With the icons in the row there is no room left for all four links, and
     the one that falls off the end was the booking button. It goes first. */
  .nav__cta{ order:-1; }
  .nav__mark img{ height:20px; }
  #fxtoggle{ flex:0 0 auto; }
}

/* ─── layout ────────────────────────────────────────────────────────── */

main{ position:relative; z-index:10; }

section{
  position:relative;
  padding:clamp(6rem,14vh,11rem) var(--gut);
  max-width:var(--maxw); margin-inline:auto;
}

/* chapter marker running down the left edge */
section[data-chapter]::before{
  content:attr(data-chapter);
  position:absolute; left:calc(var(--gut) * .28); top:clamp(6rem,14vh,11rem);
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:#4a4a55;
  writing-mode:vertical-rl; text-orientation:mixed;
}
@media (max-width:900px){ section[data-chapter]::before{ display:none; } }

.section__title{
  font-family:var(--display);
  font-size:clamp(2.6rem,9vw,7rem);
  line-height:.92; letter-spacing:-.02em; margin:0 0 1rem;
  text-transform:uppercase;
}
.section__sub{ color:var(--dim); max-width:52ch; margin:0 0 3.5rem; font-size:1.05rem; }
.section__sub strong{ color:var(--ink); font-weight:700; }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ─── hero ──────────────────────────────────────────────────────────── */

#hero{
  min-height:100svh; max-width:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:1.6rem; padding-top:6rem;
}
.hero__logo{ width:min(760px,88vw); }
#logocanvas{ width:100%; height:auto; display:block; }

.hero__tag{
  font-family:var(--ui); font-weight:700;
  font-size:clamp(.8rem,2.1vw,1.25rem);
  letter-spacing:clamp(.2em,1vw,.5em); margin:0; text-indent:.4em;
}
.hero__meta{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--dim);
}
.hero__meta i{ width:4px; height:4px; background:var(--mag); border-radius:50%; box-shadow:0 0 8px var(--mag); }

.scrollcue{ position:absolute; bottom:2.5rem; display:flex; flex-direction:column; gap:5px; }
.scrollcue span{
  width:26px; height:2px; background:var(--dim);
  animation:cue 1.6s ease-in-out infinite;
}
.scrollcue span:nth-child(2){ animation-delay:.15s; opacity:.6 }
.scrollcue span:nth-child(3){ animation-delay:.3s;  opacity:.3 }
@keyframes cue{ 0%,100%{transform:translateY(0);opacity:.25} 50%{transform:translateY(4px);opacity:1} }

/* ─── story ─────────────────────────────────────────────────────────── */

.story__lines{ display:grid; gap:.2em; margin-bottom:3.5rem; }
.story__line{
  font-family:var(--display);
  font-size:clamp(1.7rem,6.2vw,4.6rem);
  line-height:1.02; letter-spacing:-.02em; text-transform:uppercase;
  opacity:0; transform:translateX(-18px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.story__line.in{ opacity:1; transform:none; }
.story__line:nth-child(2){ color:var(--dim); padding-left:clamp(0px,6vw,7rem); }
.story__line:nth-child(3){ padding-left:clamp(0px,12vw,14rem); }
.story__foot{ max-width:46ch; color:var(--dim); font-size:1.1rem; margin-left:auto; }

/* ─── members ───────────────────────────────────────────────────────── */

.members{ display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); border:1px solid var(--line); }

.member{
  position:relative; background:var(--bg-2); overflow:hidden;
  padding:0 0 1.4rem; cursor:crosshair;
  transition:background .3s;
}
.member:hover{ background:#0f0f17; }

.member__frame{
  /* 2:3 matches the artwork exactly, so a full-body portrait is not cropped
     through the knees by object-fit: cover. */
  position:relative; aspect-ratio:2/3; overflow:hidden;
  background:linear-gradient(180deg,#0d0d14,#050508);
}
.member__frame picture{ display:contents; }
.member__frame img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:grayscale(1) contrast(1.25) brightness(.82);
  /* The illustration brings its own backdrop; dissolve its bottom edge into
     the card so the photo does not end on a hard line above the name. */
  -webkit-mask-image:linear-gradient(to bottom, #000 92%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 92%, transparent 100%);
  transition:filter .45s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.member:hover .member__frame img{ filter:grayscale(0) contrast(1.1) brightness(1); transform:scale(1.03); }


/* RGB ghosts of the photo, revealed on hover */
.member__frame::before,
.member__frame::after{
  content:''; position:absolute; inset:0; opacity:0;
  background-image:var(--src); background-size:cover; background-position:top center;
  mix-blend-mode:screen; pointer-events:none; transition:opacity .25s;
  -webkit-mask-image:linear-gradient(to bottom, #000 92%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 92%, transparent 100%);
}
.member__frame::before{ filter:sepia(1) hue-rotate(150deg) saturate(6); }
.member__frame::after { filter:sepia(1) hue-rotate(300deg) saturate(6); }
.member.tear .member__frame::before{ opacity:.55; transform:translateX(-8px) scaleX(1.02); clip-path:inset(30% 0 45% 0); }
.member.tear .member__frame::after { opacity:.55; transform:translateX(8px)  scaleX(1.02); clip-path:inset(62% 0 12% 0); }

/* placeholder silhouette for members with no photo yet */
.member__ghost{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 3px, transparent 3px 7px),
    radial-gradient(60% 50% at 50% 38%, #16161f 0%, #08080c 70%);
}
.member__ghost svg{ width:58%; height:auto; opacity:.13; }
.member__ghost span{
  position:absolute; bottom:1.2rem; font-family:var(--mono);
  font-size:10px; letter-spacing:.28em; color:#4c4c58;
}

.member__idx{
  position:absolute; top:.7rem; left:.85rem; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--cyan);
  text-shadow:0 0 10px rgba(34,230,255,.6);
}
.member__body{ padding:1.2rem 1.2rem 0; }
.member__role{ font-family:var(--mono); font-size:10px; letter-spacing:.28em; color:var(--mag); margin:0 0 .35rem; }
.member__name{ font-family:var(--display); font-size:1.35rem; line-height:1.05; margin:0 0 .5rem; text-transform:uppercase; }
.member__line{ color:var(--ink); font-size:.98rem; margin:0 0 .3rem; }
.member__gear{ color:var(--dim); font-size:.85rem; margin:0; font-family:var(--mono); letter-spacing:.04em; }

/* ─── player ────────────────────────────────────────────────────────── */

.player{ border:1px solid var(--line); background:var(--bg-2); }
.player__viz{ height:clamp(120px,18vh,200px); border-bottom:1px solid var(--line); background:#04040a; }
#viz{ width:100%; height:100%; display:block; }

.tracks{ list-style:none; margin:0; padding:0; }
.tracks__empty{ padding:1.6rem 1.4rem; color:var(--dim); font-family:var(--mono); font-size:12px; letter-spacing:.14em; }

.track{
  display:flex; align-items:center; gap:1rem;
  padding:.7rem 1.4rem; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .2s;
}
.track:hover{ background:#101018; }
.track.is-current{ background:#12121c; }

.track__play{
  appearance:none; background:transparent; border:1px solid var(--line);
  width:34px; height:34px; flex:0 0 34px; cursor:pointer;
  display:grid; place-items:center; color:var(--ink);
  transition:border-color .2s, background .2s, color .2s;
}
.track:hover .track__play{ border-color:var(--ink); }
.track.is-current .track__play{ border-color:var(--cyan); color:var(--cyan); }
.track.is-playing .track__play{ background:var(--cyan); color:#000; }

.track__ico{ width:0; height:0; border-style:solid; border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent currentColor; margin-left:2px; }
.track.is-playing .track__ico{
  width:10px; height:12px; border:none; margin-left:0;
  background:linear-gradient(to right, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px);
}

.track__n{ font-family:var(--mono); font-size:10px; color:#4a4a55; min-width:3ch; }
.track__t{ font-family:var(--display); font-size:clamp(.95rem,2.2vw,1.35rem); text-transform:uppercase; }
.track__a{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--dim);
  letter-spacing:.1em; text-align:right; }
@media (max-width:560px){
  .track{ flex-wrap:wrap; gap:.6rem; }
  .track__a{ width:100%; margin-left:0; text-align:left; padding-left:calc(34px + 1rem); }
}

.player__bar{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.4rem 0; }
.player__t{ font-family:var(--mono); font-size:11px; color:var(--dim); min-width:4ch; }
.seek{ position:relative; flex:1; height:22px; cursor:pointer; display:flex; align-items:center; }
.seek::before{ content:''; position:absolute; left:0; right:0; height:2px; background:var(--line); }
.seek__fill{ position:absolute; left:0; height:2px; width:0; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.seek__head{ position:absolute; left:0; width:2px; height:14px; background:var(--ink); transform:translateX(-1px); }
.seek:focus-visible{ outline:1px solid var(--cyan); outline-offset:4px; }

.player__status{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--dim);
  padding:.9rem 1.4rem 1.2rem; margin:0; text-transform:uppercase; }
.player__status.err{ color:var(--mag); }

/* ─── video ─────────────────────────────────────────────────────────── */

.videos{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.video{ margin:0; }
.video__shell{
  appearance:none; padding:0; border:1px solid var(--line); background:#000;
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  cursor:pointer; overflow:hidden;
}
.video__thumb{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.7);
  transition:filter .4s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.video__shell:hover .video__thumb{ filter:none; transform:scale(1.03); }
.video__play{
  position:absolute; inset:0; margin:auto; width:62px; height:62px;
  border:2px solid var(--ink); border-radius:50%;
  background:rgba(5,5,6,.55); transition:background .2s, border-color .2s;
}
.video__play::after{
  content:''; position:absolute; inset:0; margin:auto;
  width:0; height:0; border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--ink); transform:translateX(3px);
}
.video__shell:hover .video__play{ background:var(--mag); border-color:var(--mag); }
.videos iframe{ width:100%; aspect-ratio:16/9; border:1px solid var(--line); display:block; }
.video__title{
  font-family:var(--ui); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; margin:.8rem 0 0; font-size:.95rem;
}

/* ─── setlist ───────────────────────────────────────────────────────── */

.setlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.setlist li{
  display:flex; align-items:baseline; gap:1.2rem;
  padding:.85rem .4rem; border-bottom:1px solid var(--line);
  transition:background .2s, padding-left .3s;
}
.setlist li:hover{ background:#0d0d14; padding-left:1.2rem; }
.setlist .n{ font-family:var(--mono); font-size:10px; color:#4a4a55; min-width:3ch; }
.setlist .t{ font-family:var(--display); font-size:clamp(1rem,2.6vw,1.6rem); text-transform:uppercase; letter-spacing:-.01em; }
.setlist .a{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.1em; text-align:right; }

/* ─── shows ─────────────────────────────────────────────────────────── */

.shows{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.show{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.5rem;
  background:var(--bg-2); padding:1.4rem 1.3rem; text-decoration:none;
  transition:background .25s;
}
.show:hover{ background:#101018; }
/* Wide enough for "29 JAN 2027 · 20:00". Each card is its own grid, so without
   a fixed width a show without a time pulled its venue column left and the
   names stopped lining up. */
.show__date{ font-family:var(--mono); font-size:11px; letter-spacing:.15em; color:var(--cyan); min-width:17.5em; }
/* Same line as the date, set off by a dot, so "29 JAN 2027 · 20:00" reads
   as one piece of information rather than two stacked fragments. */
.show__date{ white-space:nowrap; }
.show__time{ color:inherit; }
.show__time::before{ content:'·'; margin:0 .7em; color:var(--dim); }
.show__where .v{ font-family:var(--display); font-size:clamp(1.05rem,2.4vw,1.5rem); text-transform:uppercase; display:block; line-height:1.1; }
.show__where .c{ font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.15em; }
.show__where .adr{
  display:block; margin-top:.35rem;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--dim);
  text-decoration:none;
}
.show__where a.adr{ text-decoration:underline; text-decoration-color:#3a3a46; text-underline-offset:3px; }
.show__where a.adr:hover{ color:var(--cyan); text-decoration-color:var(--cyan); }
.show__tag{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; padding:.35rem .7rem; border:1px solid currentColor; white-space:nowrap; }
.show__tag[data-s="confirmed"]{ color:var(--acid); }
.show__tag[data-s="tickets"]{ color:var(--mag); }
.show__tag[data-s="tba"]{ color:#4a4a55; }
@media (max-width:640px){
  /* Date and status share the top row, venue below: a card reads as one
     line of facts plus a name, instead of four stacked fragments. */
  .show{
    grid-template-columns:1fr auto;
    grid-template-areas:"date tag" "where where";
    gap:.7rem 1rem;
  }
  .show__date{ grid-area:date; align-self:center; min-width:0; }
  .show__tag{ grid-area:tag; justify-self:end; align-self:center; }
  .show__where{ grid-area:where; }
}

/* ─── form ──────────────────────────────────────────────────────────── */

.form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem; max-width:820px; }
.field--wide{ grid-column:1/-1; }
.field{ display:grid; gap:.45rem; }
.field label{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--dim); text-transform:uppercase; }
.field input,.field textarea{
  background:#0a0a10; border:1px solid var(--line); color:var(--ink);
  font-family:var(--ui); font-size:1rem; padding:.75rem .85rem; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan), 0 0 24px rgba(34,230,255,.15);
}
.form .btn{ justify-self:start; }
.form__note{ grid-column:1/-1; font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.06em; margin:0; }
.form__note a{ color:var(--cyan); }
.form__note.ok{ color:var(--acid); }
.form__note.err{ color:var(--mag); }

/* ─── footer ────────────────────────────────────────────────────────── */

#foot{
  position:relative; z-index:10;
  border-top:1px solid var(--line);
  padding:3.5rem var(--gut) 4rem;
  display:flex; align-items:center; gap:2rem; flex-wrap:wrap;
  max-width:var(--maxw); margin-inline:auto;
}
.foot__mark{ height:34px; width:auto; opacity:.85; }
.foot__links{ display:flex; gap:1.2rem; }
.foot__links a{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--dim);
  text-decoration:none; transition:color .2s;
}
.foot__links a:hover{ color:var(--cyan); }
.foot__copy{ margin-left:auto; font-family:var(--mono); font-size:10px; color:#3d3d47; letter-spacing:.12em; }

/* ─── reduced motion ────────────────────────────────────────────────── */
/*
   Photosensitivity matters more than the effect. Strobe, grain drift and
   tearing all stop; the static treatment (colour, scanline texture, layout)
   stays so the site still looks like itself.
*/
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  #grain{ animation:none; }
  #flash{ display:none; }
  .glitch::before,.glitch::after{ display:none; }
  .glitch.is-glitching{ animation:none; }
  .scrollcue span{ animation:none; }
  .reveal,.story__line{ opacity:1 !important; transform:none !important; transition:none; }
  .member.tear .member__frame::before,
  .member.tear .member__frame::after{ opacity:0; }
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}