/*
Theme Name: N9NE PR
Theme URI: https://joeyvasquez.com
Author: N9NE Artist Management
Description: N9NE PR — brutalist terminal theme for underground techno and tech house. Biography with chapter tabs, discography with in-page playback, events, press kit in ten languages, gallery, livestream schedule, and a password-protected Vault holding private outreach directories. No page builder, no framework, no required plugins.
Version: 6.71.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: electro-zone
Tags: two-columns, custom-colors, custom-header, custom-logo, custom-menu, featured-images, full-width-template
*/

/* ====================================================================
   ELECTRO ZONE — design tokens.
   Change a value here and every page updates.
==================================================================== */
:root{
  --bg:        #0a0a0c;
  --violet:    #a855f7;
  --red:       #ef4444;

  --ink:       #ffffff;
  --ink-85:    rgba(255,255,255,.85);
  --ink-80:    rgba(255,255,255,.80);
  --ink-70:    rgba(255,255,255,.70);
  --ink-60:    rgba(255,255,255,.60);
  --ink-50:    rgba(255,255,255,.50);
  --ink-40:    rgba(255,255,255,.40);
  --ink-30:    rgba(255,255,255,.30);
  --ink-25:    rgba(255,255,255,.25);

  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.05);
  --line-hard: rgba(255,255,255,.15);

  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --nav-h:  52px;
  --tick-h: 26px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  /* Literal first, so a variable failure can never white out the page. */
  background:#0a0a0c;
  background:var(--bg,#0a0a0c);
  color:#ffffff;
  color:var(--ink,#ffffff);
  font-family:'Inter', system-ui, sans-serif;
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; }
p{ margin:0; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }

.sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- shared type ---------- */
.tech{
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height:1.4;
}
.mono{ font-family:var(--mono); }
.vt{ color:var(--violet); }
.dim{ color:var(--ink-30); }
.dim2{ color:var(--ink-40); }
.glow{ text-shadow:0 0 12px rgba(168,85,247,.7); }


/* ====================================================================
   AMBIENT OVERLAY
==================================================================== */
.hud{ position:fixed; inset:0; z-index:30; pointer-events:none; user-select:none; }
.hud__grid{
  position:absolute; inset:0; opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:64px 64px;
}
.hud__scan{
  position:absolute; inset:0; opacity:.35;
  background-image:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
}
.hud__cols,.hud__rows{
  position:absolute; display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:9px; color:var(--ink-25);
}
.hud__cols{ top:6px; left:0; right:0; padding:0 12px; }
.hud__rows{ top:0; bottom:0; left:6px; flex-direction:column; padding:18px 0; }
.hud__sys{
  position:fixed; bottom:8px; right:12px; z-index:31;
  font-family:var(--mono); font-size:9px; color:var(--ink-30);
}
@media (max-width:900px){ .hud__cols,.hud__rows{ display:none; } }


/* ====================================================================
   NAVIGATION — four columns, matching the original exactly
==================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  border-bottom:1px solid var(--line);
  background:rgba(10,10,12,.82);
  backdrop-filter:blur(6px);
}
.nav__grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }

.nav__cell{
  padding:8px 12px;
  border-right:1px solid var(--line);
  min-height:var(--nav-h);
}
.nav__cell:last-child{ border-right:0; }

/* Column headings are labels, not links — they stay white. */
.nav__title{
  display:block;
  font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--ink-70);
  cursor:default;
}

.nav__links{
  margin-top:4px;
  display:flex; flex-wrap:wrap; gap:2px 8px;
  font-family:var(--mono); font-size:9px;
  letter-spacing:.05em;
  color:var(--ink-30);
}
.nav__links a{ transition:color .15s; }
.nav__links a:hover{ color:var(--violet); }
/* Link pointing at the page you're on */
.nav__links a[aria-current="page"]{ color:var(--violet); }

/* Signal block, now at the right end of the ticker row. */
.ticker__sig{
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
  padding-left:14px;
  border-left:1px solid var(--line);
}
@media (max-width:900px){ .ticker__sig .blocks{ display:none; } }
@media (max-width:640px){ .ticker__sig{ display:none; } }
.dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--violet);
  animation:pulse 2s ease-in-out infinite;
}
.dot--red{ background:var(--red); }
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.35; transform:scale(.82); }
}
.blocks{ display:flex; gap:4px; }
.blocks i{ width:8px; height:8px; border:1px solid var(--ink-40); background:rgba(255,255,255,.05); }

/* ---------- compact bar, small screens only ---------- */
.nav__bar{ display:none; }

@media (max-width:1100px){
  :root{ --nav-h:52px; }

  .nav__bar{
    display:flex; align-items:center; justify-content:space-between;
    height:var(--nav-h); padding:0 16px;
  }
  .nav__brand{
    font-family:var(--mono); font-size:11px;
    letter-spacing:.22em; color:var(--ink-85);
  }
  .nav__toggle{
    display:flex; align-items:center; gap:10px;
    padding:8px 12px;
    border:1px solid var(--line-hard);
    background:transparent;
    font-family:var(--mono); font-size:10px;
    letter-spacing:.2em; color:var(--ink-70);
    cursor:pointer;
    transition:border-color .2s, color .2s;
  }
  .nav__toggle:hover,
  .nav__toggle[aria-expanded="true"]{ border-color:var(--violet); color:var(--violet); }
  .nav__burger{ display:flex; flex-direction:column; gap:3px; }
  .nav__burger i{
    display:block; width:15px; height:1px;
    background:currentColor;
    transition:transform .25s, opacity .25s;
  }
  .nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(1){ transform:translateY(4px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(2){ opacity:0; }
  .nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(3){ transform:translateY(-4px) rotate(-45deg); }

  /* The columns become a panel that drops below the bar. */
  .nav__grid{
    display:none;
    grid-template-columns:1fr;
    position:absolute; top:var(--nav-h); left:0; right:0;
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
    background:var(--bg);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .nav__grid.is-open{ display:grid; }

  .nav__cell{
    min-height:0;
    padding:14px 16px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .nav__cell:last-child{ border-bottom:0; }
  .nav__links{ margin-top:8px; }
  .nav__links a{ display:inline-block; margin:0 14px 6px 0; }

  /* Real mobile devices mean small screens, often outdoors or in
     variable daylight — a 70%-opacity, 10px label is genuinely hard to
     read under glare, even though it looks fine on a calibrated desktop
     monitor. Brighter and slightly larger here, on mobile only. */
  .nav__title{
    font-size:11px;
    color:var(--ink-85);
  }
}

@media (min-width:601px) and (max-width:1100px){
  .nav__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nav__cell{ border-right:1px solid var(--line); }
}
@media (max-width:560px){
  .nav__links{ font-size:8px; }
  .blocks{ display:none; }
}


/* ====================================================================
   TICKER
==================================================================== */
.ticker{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:14px;
  height:var(--tick-h); padding:0 12px;
  border-bottom:1px solid var(--line);
  background:rgba(10,10,12,.9);
  backdrop-filter:blur(6px);
  overflow:hidden;
}
.ticker__flag{ display:flex; align-items:center; gap:5px; flex-shrink:0; }
.ticker__win{ flex:1; overflow:hidden; }

.marquee{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee--rev{ animation-direction:reverse; }
.marquee span{ display:inline-flex; align-items:center; white-space:nowrap; }

.marquee--sm{
  font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.3em;
  color:rgba(255,255,255,.45);
}
.marquee--sm span{ margin:0 12px; }
.marquee--sm i{ margin-left:12px; font-style:normal; color:rgba(168,85,247,.6); }

.marquee--lg{
  font-size:clamp(1.15rem,3.5vw,2rem);
  font-weight:700; text-transform:uppercase;
  letter-spacing:-.02em; color:var(--ink-80);
  animation-duration:52s;
}
.marquee--lg span{ margin:0 16px; gap:16px; }
.marquee--lg i{ font-style:normal; color:var(--violet); }

@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.band{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg);
  padding:12px 0;
  position:relative; z-index:10;
}


/* ====================================================================
   PAGE SCAFFOLD
==================================================================== */
main{
  position:relative; z-index:10;
  padding-top:calc(var(--nav-h) + var(--tick-h));
  min-height:100vh;
}
.wrap{ padding:4rem 1rem; }
@media (min-width:768px){ .wrap{ padding:6rem 2rem; } }

.head{ border-bottom:1px solid var(--line); padding-bottom:1.5rem; }
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.2em;
}
.eyebrow i{ display:block; width:32px; height:1px; background:rgba(255,255,255,.2); font-style:normal; }
.title{
  margin-top:1rem;
  font-size:clamp(2.75rem,10vw,4.5rem);
  font-weight:700; text-transform:uppercase;
  line-height:.9; letter-spacing:-.03em;
}
.title span{
  margin-left:1rem; vertical-align:top;
  font-size:.4em; color:var(--ink-40);
}
.meta{
  margin-top:1rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}


/* ====================================================================
   HOME / HERO
==================================================================== */
.hero{
  position:relative;
  min-height:calc(100vh - var(--nav-h) - var(--tick-h));
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
}
/* This photo is landscape and close to the hero's own shape, so a full
   width cover barely needs to crop anything — the whole crowd, the
   photographers and the club sign all stay in frame. */
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{
  object-position:50% 35%; width:100%; height:100%; object-fit:cover; opacity:.9; }
.hero__veil{
  position:absolute; inset:0;
  /* Dark enough at the edges to keep text readable; the middle stays
     clear so the photo actually shows. */
  background:
    linear-gradient(to bottom, rgba(10,10,12,.55) 0%, rgba(10,10,12,.2) 35%, rgba(10,10,12,.55) 70%, var(--bg) 100%),
    linear-gradient(to right, rgba(10,10,12,.35) 0%, transparent 30%, transparent 70%, rgba(10,10,12,.35) 100%);
}
.hero__body{
  position:relative; flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:2rem 1rem; text-align:center;
}
.flicker{ animation:flicker 4s linear infinite; }
@keyframes flicker{
  0%,19%,21%,23%,25%,54%,56%,100%{ opacity:1; }
  20%,22%,24%,55%{ opacity:.4; }
}
.hero__lede{
  margin:1.5rem auto 0;
  max-width:28rem;
  font-size:.875rem; line-height:1.7;
  color:var(--ink-50);
}
.btn{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:2.5rem;
  padding:1rem 2rem;
  border:1px solid var(--ink-40);
  background:transparent;
  font-family:var(--mono); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.3em;
  color:var(--ink); cursor:pointer;
  transition:border-color .25s, background .25s, color .25s, box-shadow .25s;
}
.btn:hover{
  border-color:var(--violet);
  background:rgba(168,85,247,.1);
  color:var(--violet);
  box-shadow:0 0 24px rgba(168,85,247,.35);
}
.btn i{ font-style:normal; transition:transform .25s; }
.btn:hover i{ transform:translateY(4px); }

.strip{
  position:relative;
  margin-top:auto;   /* pins it to the bottom of the hero, headline or not */
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  background:rgba(10,10,12,.8);
  backdrop-filter:blur(6px);
}
.strip__cell{
  padding:12px 16px; border-right:1px solid var(--line);
  min-width:0;   /* lets the column shrink below its content's natural width */
}
.strip__cell:last-child{ border-right:0; }
.strip__val{
  margin-top:4px; font-family:var(--mono); font-size:.75rem; color:var(--ink-80);
  overflow-wrap:break-word; word-break:break-word;   /* even an unbroken word like THE_CALL can wrap on a narrow screen rather than push the layout wider */
}
@media (max-width:720px){
  .strip{ grid-template-columns:repeat(2,1fr); }
  .strip__cell:nth-child(2){ border-right:0; }
  .strip__cell:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}


/* ====================================================================
   DROP
==================================================================== */
.drop{ display:grid; grid-template-columns:1fr; border-bottom:1px solid var(--line); }
@media (min-width:1024px){ .drop{ grid-template-columns:1fr 1fr; } }

.drop__art{
  position:relative; overflow:hidden;
  min-height:7rem;
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
@media (min-width:1024px){ .drop__art{ border-bottom:0; border-right:1px solid var(--line); } }
.drop__art img{
  /* contain, not cover — nothing gets cropped off the artwork. The
     square box that used to force a crop is gone; the dark theme
     background fills any letterboxing so it never looks like a gap. */
  display:block; width:100%; height:100%;
  object-fit:contain; opacity:.95;
  transition:transform .5s, opacity .5s;
}
.drop__art:hover img{ transform:scale(1.05); opacity:1; }
.drop__veil{ position:absolute; inset:0; background:linear-gradient(to top, var(--bg), transparent 60%); }
.drop__tag{ position:absolute; top:16px; left:16px; }
.drop__foot{
  position:absolute; bottom:16px; left:16px; right:16px;
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink-60);
}
.drop__panel{
  display:flex; flex-direction:column; justify-content:center;
  gap:.75rem; padding:1.25rem;
}
@media (min-width:768px){ .drop__panel{ padding:1.75rem; } }

.drop__title{
  font-size:clamp(1.4rem,4vw,2rem);
  font-weight:700; text-transform:uppercase;
  line-height:.95; letter-spacing:-.02em;
}
.badge{
  display:inline-block; margin-left:8px;
  padding:2px 6px; border:1px solid rgba(168,85,247,.5);
  border-radius:2px; font-size:.75rem; color:var(--violet);
  vertical-align:middle;
}
.drop__copy{ max-width:28rem; font-size:.875rem; line-height:1.7; color:var(--ink-50); }

.stats{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  border:1px solid var(--line); background:var(--line); text-align:center;
}
.stats__cell{ background:var(--bg); padding:12px; }
.stats__val{ margin-top:4px; font-family:var(--mono); font-size:1.125rem; color:var(--ink-85); }


/* ====================================================================
   FORMS
==================================================================== */
.form{ display:flex; flex-direction:column; gap:12px; }
.form__row{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:768px){ .form__row{ grid-template-columns:1fr 1fr; } }

.form input,.form textarea{
  width:100%; padding:12px 16px;
  border:1px solid var(--line-hard);
  background:transparent;
  font-family:var(--mono); font-size:.875rem;
  color:var(--ink);
  transition:border-color .2s, background .2s;
}
.form textarea{ resize:vertical; min-height:120px; }
.form input::placeholder,.form textarea::placeholder{ color:var(--ink-30); }
.form input:focus,.form textarea:focus{
  border-color:var(--violet); background:rgba(168,85,247,.04); outline:none;
}
.form input.is-bad,.form textarea.is-bad{
  border-color:var(--red); background:rgba(239,68,68,.05);
}
.err{
  font-family:var(--mono); font-size:9px;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--red); min-height:12px;
}
.submit{
  width:100%; padding:13px;
  border:1px solid var(--ink-40); background:transparent;
  font-family:var(--mono); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.3em;
  color:var(--ink); cursor:pointer;
  transition:border-color .25s, background .25s, color .25s;
}
.submit:hover{ border-color:var(--violet); background:var(--violet); color:var(--bg); }
.note{ font-family:var(--mono); font-size:10px; color:var(--ink-30); }

/* Confirmation panel that replaces the form */
.sent{ display:none; padding:1.6rem; border:1px solid rgba(168,85,247,.5); background:rgba(168,85,247,.07); text-align:center; }
.sent.is-on{ display:block; animation:enter .35s ease both; }
@keyframes enter{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.sent__mark{ font-size:1.6rem; color:var(--violet); }
.sent__t{ margin-top:.6rem; font-family:var(--mono); font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:var(--violet); }
.sent__d{ margin-top:.7rem; font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--ink-50); line-height:1.9; word-break:break-word; }
.sent__again{
  margin-top:1.2rem; padding:9px 18px;
  border:1px solid var(--ink-30); background:transparent;
  font-family:var(--mono); font-size:9px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-60); cursor:pointer;
  transition:border-color .2s, color .2s;
}
.sent__again:hover{ border-color:var(--violet); color:var(--violet); }


/* ====================================================================
   ABOUT
==================================================================== */
.about{ margin-top:2rem; display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:1024px){ .about{ grid-template-columns:1fr 1fr; } }
.about__copy{ font-size:1.125rem; line-height:1.75; color:var(--ink-70); }

.cards{ display:grid; grid-template-columns:1fr; gap:1px; border:1px solid var(--line); background:var(--line); }
@media (min-width:640px){ .cards{ grid-template-columns:1fr 1fr; } }
.card{ background:var(--bg); }
.card__h{ padding:12px; border-bottom:1px solid var(--line); }
.card__row{
  display:flex; justify-content:space-between; gap:1rem;
  padding:10px 12px; border-bottom:1px solid var(--line-soft);
}
.card__row:last-child{ border-bottom:0; }
.card__row span{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:var(--ink-40); }
.card__row b{ font-family:var(--mono); font-size:.75rem; font-weight:400; color:var(--ink-85); text-align:right; }


/* ====================================================================
   TRACKS — five-across card grid
==================================================================== */
.trackgrid{
  margin-top:1.5rem;
  display:grid;
  /* auto-fill sizes columns to however many cards actually exist —
     one entry fills the row at a sensible width instead of sitting in
     a five-column grid with four empty tracks stretching off to the
     right. Cards stop growing past ~340px so a lone card doesn't
     balloon to the full page width either. */
  grid-template-columns:repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
}
@media (min-width:768px){  .trackgrid{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); } }
@media (min-width:1280px){ .trackgrid{ grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); } }

/* Three-across variant, used by the Remixes page. */
@media (min-width:768px){
  .trackgrid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .trackgrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1280px){
  .trackgrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.track{ position:relative; border-bottom:1px solid var(--line); border-left:1px solid var(--line); }

.track__hit{
  display:block; width:100%;
  padding:0; border:0; background:none;
  text-align:left; cursor:pointer;
}
.track__art{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; }
.track__art img{
  width:100%; height:100%; object-fit:cover; opacity:.7;
  transition:opacity .5s;
}
.track:hover .track__art img{ opacity:1; }
.track__scrim{ position:absolute; inset:0; background:rgba(10,10,12,.3); transition:background .3s; }
.track:hover .track__scrim{ background:rgba(10,10,12,.1); }
.track__no{ position:absolute; top:12px; left:12px; color:var(--ink-70); }
.track__state{ position:absolute; top:12px; right:12px; color:var(--ink-50); }
.track__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  border:1px solid var(--ink-40); border-radius:50%;
  font-size:1.125rem; color:var(--ink-80);
  background:rgba(10,10,12,.55);
  opacity:.55; transition:opacity .3s;
}
.track:hover .track__play{ opacity:1; }

/* The featured panel's art box is much bigger than a grid card — the
   same 48px circle read as small and easy to miss ("iffy") against it.
   Bigger, clearer border, and no longer needing hover just to notice
   it's there at all. */
.trackfeat__hit .track__play,
.trackfeat__art .track__play{
  width:72px; height:72px;
  font-size:1.6rem;
  border-width:2px;
  opacity:.8;
}
.trackfeat__art:hover .track__play,
.featmix:hover .track__play{ opacity:1; }

.track__wave{ padding:12px 12px 0; }
/* Swapped between PREVIEW and LIVE by the script. */
.track__wavelabel{ color:var(--violet); }
.wave{ margin-top:8px; display:flex; align-items:flex-end; gap:2px; height:32px; }
/* Featured panel only: bars stretch to fill the full width of the box
   rather than sitting as a fixed-width row with space left over. */
.featmix__wave .wave{ width:100%; }
.featmix__wave .wave i{ flex:1 1 0; width:auto; min-width:2px; }
.wave i{
  display:block; width:4px;
  background:var(--ink-25);
  transform-origin:bottom;
  transition:background .25s;
}
.track:hover .wave i{ background:rgba(168,85,247,.45); }

.track__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:8px 12px 12px;
}
.track__names{ min-width:0; }
.track__names h3{
  font-size:.875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.track__names p{
  font-family:var(--mono); font-size:10px; color:var(--ink-40);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.track__tag{ flex-shrink:0; font-family:var(--mono); font-size:.75rem; }

/* ---------- playing state ---------- */
.track.is-live .track__art img{ opacity:1; }
.track.is-live .track__scrim{ background:rgba(10,10,12,.15); }
.track.is-live .track__no{ color:var(--violet); }
.track.is-live .track__state{ color:var(--violet); }
.track.is-live .track__play{
  opacity:1;
  border-color:var(--violet); color:var(--violet);
  background:rgba(168,85,247,.12);
  box-shadow:0 0 20px rgba(168,85,247,.35);
}
.track.is-live .wave i{
  background:var(--violet);
  box-shadow:0 0 6px rgba(168,85,247,.65);
  animation:bounce 1.1s ease-in-out infinite;
}
@keyframes bounce{
  0%,100%{ transform:scaleY(1); }
  50%    { transform:scaleY(.35); }
}

/* Hidden frame that carries the sound when a track uses a video URL. */
.hiddenplayer{
  position:fixed; bottom:0; left:0;
  width:1px; height:1px; opacity:.01;
  border:0; pointer-events:none; z-index:-1;
}


/* ====================================================================
   LIVE
==================================================================== */
.live{
  margin-top:2rem;
  display:grid; grid-template-columns:1fr; gap:1px;
  border:1px solid var(--line); background:var(--line);
}
@media (min-width:1024px){ .live{ grid-template-columns:2fr 1fr; } }
/* The .live grid paints its own background in the divider colour and
   uses a 1px gap, so the "hairlines" between panels are really the
   container showing through. That means any panel shorter than the
   tallest one in its row exposes a solid grey block underneath it —
   which is exactly what align-items:start was causing here: each
   column sized to its own content instead of filling the row.
   Stretch is the fix. aspect-ratio is cleared on the feed at this
   breakpoint too, because a fixed 16/9 ratio would re-impose a height
   shorter than the row and reopen the same gap. */
@media (min-width:1024px){
  .live--3col{
    grid-template-columns:0.6fr 1.5fr 0.9fr;
    align-items:stretch;
    /* One floor for the whole row, rather than three per-panel
       min-heights that can disagree with each other. */
    grid-auto-rows:minmax(340px, auto);
  }
  .live--3col .feed{ aspect-ratio:auto; height:auto; min-height:0; }
  .live--3col .radiobox{ min-height:0; }
  .live--3col .event{ min-height:0; display:flex; flex-direction:column; }
  /* Pushes the buttons to the bottom edge so the extra height from
     stretching lands as spacing, not as a gap under the content. */
  .live--3col .event__go{ margin-top:auto; padding-top:1rem; }
}

.radiobox{
  position:relative;
  background:var(--bg);
  min-height:280px;
  overflow:hidden;
}
.radiobox__bg{ position:absolute; inset:0; }
.radiobox__bg img{ width:100%; height:100%; object-fit:cover; opacity:.55; object-position:50% 20%; }
.radiobox__veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,10,12,.75) 0%, rgba(10,10,12,.45) 40%, rgba(10,10,12,.85) 100%);
}
.radiobox__in{
  position:relative; z-index:1;
  height:100%; min-height:200px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:1.5rem; text-align:center;
}
.radiobox__play{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(168,85,247,.15);
  border:1px solid var(--violet);
  color:var(--violet);
  font-size:22px;
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.radiobox__play:hover{ background:rgba(168,85,247,.3); transform:scale(1.05); }
/* Full width, with the bars sharing the space rather than sitting as a
   fixed-width row that stops short — the same approach already used by
   .featmix__wave. The bar count comes from data-bars on the element so
   the player can be denser than a track row without affecting one. */
.radiobox__wave{ width:100%; height:28px; opacity:.25; }
.radiobox__wave i{ flex:1 1 0; width:auto; min-width:2px; }
.radiobox__wave i{ background:var(--violet); box-shadow:0 0 6px rgba(168,85,247,.5); transition:transform .3s; }
.radiobox.is-live .radiobox__wave{ opacity:.7; }
.radiobox.is-live .radiobox__wave i{ animation:bounce 1.1s ease-in-out infinite; }

.radiobox__track{
	margin-top:8px; min-height:1.1em; max-width:90%; text-align:center;
	font-size:11px; letter-spacing:.04em;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.radiobox[data-radio-state="loading"] .radiobox__play{ opacity:.6; }
.radiobox[data-radio-state="error"]   .radiobox__play{ color:#f87171; }

.radiobox--popout{ width:100%; height:100%; min-height:0; }
.radiobox--popout .radiobox__in{ min-height:0; }

/* The portrait is the same file the Live page uses, but the Live panel
   is wide and the pop-out window is small and near-square. At that size
   the shot's own night-time darkness, plus 55% opacity, plus a veil that
   is 75-85% black, leaves almost nothing readable. Lift the image and
   ease the veil here only — the Live page is unchanged. The vertical
   object-position brings his face into the middle of the narrow crop
   instead of leaving it high in the frame. */
.radiobox--popout .radiobox__bg::before{
  content:""; position:absolute; inset:0;
  background-size:cover; background-position:50% 38%; background-repeat:no-repeat;
  opacity:.82;
}
.radiobox--popout .radiobox__veil{
  background:linear-gradient(to bottom, rgba(10,10,12,.45) 0%, rgba(10,10,12,.18) 42%, rgba(10,10,12,.72) 100%);
}
.radiobox__popout{
  margin-top:2px;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none;
  appearance:none; -webkit-appearance:none;
  color:var(--ink-50);
  font-size:15px;
  cursor:pointer;
  transition:color .2s;
}
.radiobox__popout:hover{ color:var(--violet); }
#radioAudio{ display:none; }

.feed{ position:relative; background:var(--bg); aspect-ratio:16/9; min-height:280px; }
.feed__grid{
  position:absolute; inset:0; opacity:.4;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:40px 40px;
}
.feed__in{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:1rem; gap:4px;
}
.feed__st{
  margin-top:1.5rem; padding:12px 24px;
  border:1px solid var(--ink-30);
  font-family:var(--mono); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.3em; color:var(--ink-70);
}

.event{ background:var(--bg); padding:1.25rem; min-height:280px; box-sizing:border-box; }
.event__top{ display:flex; justify-content:space-between; gap:1rem; }
.event__t{ margin-top:12px; font-size:1.25rem; font-weight:700; text-transform:uppercase; line-height:1.2; }
.event__c{ margin-top:1rem; font-size:.75rem; color:var(--ink-50); line-height:1.6; }
.event__go{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:8px; }
.ghost{
  flex:1; padding:8px; text-align:center;
  border:1px solid rgba(255,255,255,.2);
  font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.15em; color:var(--ink-70);
  transition:border-color .2s, background .2s;
}
.ghost:hover{ border-color:var(--ink-50); }
.ghost--vt{ border-color:rgba(168,85,247,.5); color:var(--violet); }
.ghost--vt:hover{ background:rgba(168,85,247,.1); }

.arch{ margin-top:2rem; }
.arch__h{ display:flex; justify-content:space-between; padding-bottom:8px; border-bottom:1px solid var(--line); }
.arch__row{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:8px;
  padding:12px 0; border-bottom:1px solid var(--line-soft);
  transition:background .2s;
}
.arch__row:hover{ background:rgba(255,255,255,.02); }
.arch__no{ font-family:var(--mono); font-size:.75rem; color:var(--ink-30); }
.arch__n{ font-size:.875rem; color:var(--ink-80); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arch__v{ display:none; font-family:var(--mono); font-size:10px; color:var(--ink-40); }
.arch__t{ font-family:var(--mono); font-size:10px; color:var(--violet); text-align:right; }
@media (min-width:768px){
  .arch__row{ grid-template-columns:auto 2fr 2fr auto; }
  .arch__v{ display:block; }
}


/* ====================================================================
   GALLERY
==================================================================== */
.shots{
  margin-top:1.5rem;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  border:1px solid var(--line); background:var(--line);
}
@media (min-width:768px){  .shots{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1200px){ .shots{ grid-template-columns:repeat(6,minmax(0,1fr)); } }

.shot{ position:relative; margin:0; aspect-ratio:3/4; overflow:hidden; background:var(--bg); }
.shot__hit{
  display:block; width:100%; height:100%;
  padding:0; border:0; background:none; cursor:pointer;
}
.shot img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1);
  transition:filter .7s, transform .7s;
}
body.jv-bw-hover .shot img{ filter:grayscale(1); }
.shot:hover img{ filter:grayscale(0); transform:scale(1.05); }
.shot__veil{ position:absolute; inset:0; background:linear-gradient(to top, var(--bg), transparent 60%); pointer-events:none; }
.shot__no{ position:absolute; top:8px; left:8px; font-size:8px; color:var(--ink-70); pointer-events:none; }
.shot figcaption{
  position:absolute; bottom:10px; left:10px; right:10px;
  font-size:.8rem; font-weight:700; text-transform:uppercase;
  letter-spacing:-.01em;
  opacity:.7; transition:opacity .3s;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  pointer-events:none;
}
.shot:hover figcaption{ opacity:1; }
.shot__ring{ position:absolute; inset:0; border:2px solid var(--violet); opacity:0; transition:opacity .3s; pointer-events:none; }
.shot:hover .shot__ring{ opacity:1; }


/* ====================================================================
   STATEMENT — SECTION_05
==================================================================== */
.statement{
  position:relative; overflow:hidden;
  padding:6rem 1.5rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media (min-width:768px){ .statement{ padding:10rem 1.5rem; } }
.statement__grid{
  position:absolute; inset:0; opacity:.3;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:64px 64px;
}
.statement__in{ position:relative; max-width:56rem; margin:0 auto; text-align:center; }
.statement__copy{
  margin-top:1.5rem;
  font-size:clamp(1.35rem,4vw,2.25rem);
  font-weight:500; line-height:1.45;
  color:var(--ink-80);
}


/* ====================================================================
   CONTACT
==================================================================== */
.contact{
  margin-top:2rem;
  display:grid; grid-template-columns:1fr; gap:1px;
  border:1px solid var(--line); background:var(--line);
}
@media (min-width:1024px){ .contact{ grid-template-columns:1fr 1fr; } }
.panel{ background:var(--bg); padding:1.5rem; }
@media (min-width:768px){ .panel{ padding:2.5rem; } }
.panel__h{ font-size:1.5rem; font-weight:700; text-transform:uppercase; }
.panel__s{ margin-top:8px; font-size:.875rem; color:var(--ink-50); }

.chans{
  margin-top:1.5rem;
  display:grid; grid-template-columns:1fr; gap:1px;
  border:1px solid var(--line); background:var(--line);
}
@media (min-width:640px){ .chans{ grid-template-columns:1fr 1fr; } }
.chan{ background:var(--bg); padding:1.25rem; transition:background .2s; }
.chan:hover{ background:rgba(168,85,247,.1); }
.chan__k{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-40); transition:color .2s; }
.chan__v{ margin-top:8px; font-size:1.125rem; font-weight:700; text-transform:uppercase; color:var(--ink-80); transition:color .2s; }
.chan:hover .chan__k,.chan:hover .chan__v{ color:var(--violet); }

.status{ margin-top:2rem; padding:1.25rem; border:1px solid var(--line); }
.status__row{ display:flex; justify-content:space-between; margin-top:8px; font-family:var(--mono); font-size:.75rem; }
.status__row span{ color:var(--ink-50); }
.status__row b{ font-weight:400; color:var(--ink-70); display:flex; align-items:center; gap:6px; }
.status__row b .dot{ width:5px; height:5px; }


/* ====================================================================
   FOOTER
==================================================================== */
.foot{
  padding:2.5rem 1rem 3rem;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:1.5rem;
}
.social{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.social a{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border:1px solid var(--line-hard); border-radius:50%;
  color:var(--ink-60);
  transition:border-color .25s, background .25s, color .25s;
}
.social a:hover{ border-color:var(--violet); background:rgba(168,85,247,.1); color:var(--violet); }
.social svg{ width:16px; height:16px; }
.foot__legal{
  font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--ink-30); text-align:center; line-height:2;
}


/* ====================================================================
   REDUCED MOTION
==================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .marquee{ transform:translateX(0); }
}


/* ====================================================================
   WORDPRESS ADDITIONS
==================================================================== */

body.admin-bar .nav{ top:32px; }
body.admin-bar .ticker{ top:calc(var(--nav-h) + 32px); }
@media (max-width:782px){
  body.admin-bar .nav{ top:46px; }
  body.admin-bar .ticker{ top:calc(var(--nav-h) + 46px); }
}

.skip-link:focus{
  position:fixed; top:8px; left:8px; z-index:100;
  width:auto; height:auto; clip:auto; margin:0;
  padding:12px 20px;
  background:var(--violet); color:var(--bg);
  font-family:var(--mono); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.2em;
}

.notice-sent,.notice-fail{
  margin-top:1.5rem; padding:12px 16px;
  border:1px solid;
  font-family:var(--mono); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.15em;
}
.notice-sent{ border-color:rgba(168,85,247,.5); color:var(--violet); background:rgba(168,85,247,.08); }
.notice-fail{ border-color:rgba(239,68,68,.5); color:var(--red); background:rgba(239,68,68,.08); }

.empty-note{
  margin-top:2rem; padding:2rem;
  border:1px dashed var(--line-hard);
  font-family:var(--mono); font-size:.75rem;
  color:var(--ink-50); text-align:center;
}
.empty-note strong{ color:var(--violet); font-weight:400; }

/* Menu items arrive as <li>; these match the plain links exactly. */
.nav__links ul{ display:flex; flex-wrap:wrap; gap:2px 8px; margin:0; padding:0; list-style:none; }
.nav__links li{ list-style:none; margin:0; padding:0; display:inline-flex; }
.nav__links li a{ color:var(--ink-30); transition:color .15s; }
.nav__links li a:hover,
.nav__links li.current-menu-item a{ color:var(--violet); }

/* Standard pages, posts, 404. */
.prose{ margin-top:2rem; max-width:44rem; }
.prose p{ margin-bottom:1rem; color:var(--ink-70); line-height:1.8; }
.prose a{ color:var(--violet); }
.prose h2,.prose h3{ margin:2rem 0 .75rem; text-transform:uppercase; }
.prose ul,.prose ol{ margin:0 0 1rem 1.25rem; color:var(--ink-70); line-height:1.8; }
.entry{ padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid var(--line); }
.entry h3{ font-size:1.5rem; font-weight:700; text-transform:uppercase; margin-bottom:.75rem; }

/* Plugin-generated forms inherit the site's field styling. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea,
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field textarea{
  width:100%; padding:12px 16px;
  border:1px solid var(--line-hard);
  background:transparent;
  font-family:var(--mono); font-size:.875rem;
  color:var(--ink);
}
.wpcf7-form input[type="submit"],
.wpforms-submit{
  width:100%; padding:13px;
  border:1px solid var(--ink-40); background:transparent;
  font-family:var(--mono); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.3em;
  color:var(--ink); cursor:pointer;
  transition:border-color .25s, background .25s, color .25s;
}
.wpcf7-form input[type="submit"]:hover,
.wpforms-submit:hover{ border-color:var(--violet); background:var(--violet); color:var(--bg); }

.alignleft{ float:left; margin:0 1.5rem 1rem 0; }
.alignright{ float:right; margin:0 0 1rem 1.5rem; }
.aligncenter{ display:block; margin:0 auto 1rem; }
.wp-caption-text{ font-family:var(--mono); font-size:10px; color:var(--ink-40); margin-top:.5rem; }


/* ====================================================================
   RELEASES

   The discography grid. Cards are 20% smaller than Tracks: six across
   on wide desktop instead of five, with type scaled to match.
==================================================================== */
.relgrid{
  margin-top:1.5rem;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
}
@media (min-width:700px){  .relgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .relgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Each release is its own bordered card now, so it can expand in place. */
.rel{
  border:1px solid var(--line);
  background:var(--bg);
  display:flex; flex-direction:column;
  transition:border-color .25s, transform .25s;
}
.rel:hover{ border-color:var(--ink-30); transform:translateY(-2px); }
.rel.is-open{ border-color:var(--violet); }

/* Cover art is square — record artwork, not a 4:3 still. */
.rel__art{ aspect-ratio:1/1; }

/* Smaller cards need smaller labels. */
.rel .track__no,
.rel .track__state{ font-size:8px; top:8px; }
.rel .track__no{ left:8px; }
.rel .track__state{ right:8px; }
.rel .track__play{ width:38px; height:38px; font-size:.95rem; }

.rel__wave{ padding:10px 10px 0; }
.rel__wave .track__wavelabel{ font-size:8px; letter-spacing:.14em; }
.rel .wave{ height:22px; gap:1px; }
.rel .wave i{ width:3px; }

.rel__foot{ padding:8px 10px 12px; min-width:0; }
.rel__title{
  font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rel.is-live .rel__title{ color:var(--violet); }
.rel__artist{
  margin-top:3px;
  font-family:var(--mono); font-size:9px;
  color:var(--ink-50);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rel__genre{
  margin-top:5px;
  font-family:var(--mono); font-size:8px;
  text-transform:uppercase; letter-spacing:.14em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rel__sub{
  margin-top:2px;
  font-family:var(--mono); font-size:8px;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-30);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}


/* ====================================================================
   BIOGRAPHY
   Long-form reading. Wider measure, numbered chapters, pull quote.
==================================================================== */
.bio__standfirst{
  margin-top:2rem;
  max-width:46rem;
  font-size:clamp(1.05rem,2.4vw,1.35rem);
  line-height:1.65;
  color:var(--ink-85);
}

/* Shop only — this line reads better running wider across the page
   rather than wrapping into three lines. Every other page sharing
   .bio__standfirst (Biography, Booking, Contact, EPK, Flyer History)
   keeps its original width untouched. */
body.page-template-template-shop-php .bio__standfirst{
  max-width:64rem;
}

/* ---------- career numbers ---------- */
.statbar{
  margin-top:2.5rem;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  border:1px solid var(--line); background:var(--line);
}
@media (min-width:768px){ .statbar{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.statbar__cell{ background:var(--bg); padding:1.5rem 1rem; text-align:center; }
.statbar__n{
  font-size:clamp(1.8rem,5vw,2.6rem);
  font-weight:700; letter-spacing:-.03em;
  color:var(--violet);
  text-shadow:0 0 20px rgba(168,85,247,.35);
}
.statbar__cell .tech{ margin-top:.4rem; }

/* ---------- chapters ---------- */
.bio{ margin-top:3.5rem; }
.bio__chapter{
  display:grid; grid-template-columns:1fr; gap:.75rem;
  padding:2.5rem 0;
  border-top:1px solid var(--line);
}
@media (min-width:900px){
  .bio__chapter{ grid-template-columns:4rem 1fr; gap:2rem; }
}
.bio__no{ padding-top:.4rem; }
.bio__body{ max-width:46rem; }
.bio__h{
  font-size:clamp(1.25rem,3vw,1.75rem);
  font-weight:700; text-transform:uppercase;
  letter-spacing:-.01em; line-height:1.15;
  margin-bottom:1rem;
}
.bio__body p{
  margin-bottom:1.1rem;
  font-size:1rem; line-height:1.85;
  color:var(--ink-70);
}
.bio__body p:last-child{ margin-bottom:0; }

/* ---------- pull quote ---------- */
.bio__quote{
  margin:1rem 0 0;
  padding:2.5rem;
  border:1px solid rgba(168,85,247,.35);
  background:rgba(168,85,247,.05);
}
.bio__quote p{
  font-size:clamp(1.1rem,3vw,1.5rem);
  line-height:1.6; font-style:italic;
  color:var(--ink-85);
  max-width:44rem;
}
.bio__quote cite{ display:block; margin-top:1.25rem; font-style:normal; }

/* ---------- aliases + labels ---------- */
.tags{
  margin-top:3rem;
  display:grid; grid-template-columns:1fr; gap:2rem;
}
@media (min-width:768px){ .tags{ grid-template-columns:1fr 1fr; } }
.tags__group{ min-width:0; }
.tags__list{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  padding:8px 16px;
  border:1px solid rgba(168,85,247,.3);
  background:rgba(168,85,247,.07);
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.08em;
  color:var(--ink-85);
}

/* ---------- direct contact ---------- */
.bio__contact{
  margin-top:3rem; padding:2rem;
  border:1px solid var(--line);
}
.bio__contact-rows{
  margin:1.25rem 0 1.75rem;
  display:grid; grid-template-columns:1fr; gap:1px;
  border:1px solid var(--line); background:var(--line);
}
@media (min-width:600px){ .bio__contact-rows{ grid-template-columns:1fr 1fr; } }
.bio__contact-row{
  background:var(--bg); padding:1rem 1.25rem;
  display:block; transition:background .2s;
}
a.bio__contact-row:hover{ background:rgba(168,85,247,.08); }
.bio__contact-row b{
  display:block; margin-top:.35rem;
  font-family:var(--mono); font-size:.85rem; font-weight:400;
  color:var(--ink-85);
}
a.bio__contact-row:hover b{ color:var(--violet); }


/* ====================================================================
   RELEASE CARD EXTRAS
   Play trigger, share row and detail link share the cover, revealed
   on hover so the artwork stays clean until you reach for it.
==================================================================== */
.rel__hit{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  padding:0; border:0; background:none;
  cursor:pointer;
}
.rel .track__play{ position:static; transform:none; }

.rel__tools{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:6px; padding:8px;
  background:linear-gradient(to top, rgba(10,10,12,.92), transparent);
  opacity:0; transform:translateY(6px);
  transition:opacity .3s, transform .3s;
  pointer-events:none;   /* invisible ≠ unclickable by default — this
                             was silently stealing clicks meant for the
                             play button underneath it */
}
.rel:hover .rel__tools,
.rel:focus-within .rel__tools{ opacity:1; transform:none; pointer-events:auto; }

.share{ display:flex; gap:5px; }
.share__btn{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px;
  border:1px solid var(--line-hard);
  background:rgba(10,10,12,.7);
  color:var(--ink-60);
  transition:border-color .2s, color .2s, background .2s;
}
.share__btn:hover{
  border-color:var(--violet); color:var(--violet);
  background:rgba(168,85,247,.15);
}
.share__btn svg{ width:12px; height:12px; }

.rel__detail{
  font-family:var(--mono); font-size:8px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-60);
  white-space:nowrap;
  transition:color .2s;
}
.rel__detail:hover{ color:var(--violet); }

.rel__title a{ transition:color .2s; }
.rel__title a:hover{ color:var(--violet); }


/* ====================================================================
   SINGLE RELEASE
==================================================================== */
.trackfeat{
  margin-top:2.5rem;
  display:grid; grid-template-columns:1fr; gap:2rem;
  border:0;
}
@media (min-width:900px){ .trackfeat{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3rem; } }

.trackfeat__art{
  position:relative; aspect-ratio:1/1;
  border:1px solid var(--line); overflow:hidden;
}
.trackfeat__hit{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  padding:0; border:0; background:none; cursor:pointer;
}
.trackfeat__art .track__play{
  position:static; transform:none;
  width:64px; height:64px; font-size:1.4rem;
  opacity:0; transition:opacity .3s;
}
.trackfeat__art:hover .track__play,
.trackfeat.is-live .track__play{ opacity:1; }
.trackfeat__art .track__state{ top:14px; right:14px; }

.trackfeat__panel{ display:flex; flex-direction:column; gap:1.5rem; }
.trackfeat__rows{
  display:grid; grid-template-columns:1fr; gap:1px;
  border:1px solid var(--line); background:var(--line);
}
.trackfeat__row{ background:var(--bg); padding:.9rem 1.1rem; }
.trackfeat__row b{
  display:block; margin-top:.3rem;
  font-family:var(--mono); font-size:.85rem; font-weight:400;
  color:var(--ink-85);
}
.trackfeat__wave{ padding:0; }
.trackfeat__notes p{ color:var(--ink-70); line-height:1.8; margin-bottom:1rem; }
.trackfeat__actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.trackfeat__stores{ margin-top:1.25rem; }
.trackfeat__stores .rel__stores{ margin-top:.5rem; }
.trackfeat__actions .btn{ margin-top:0; }
.trackfeat__actions .ghost{ flex:0 0 auto; padding:1rem 1.5rem; }
.trackfeat__share{ display:flex; align-items:center; gap:12px; }
.trackfeat__share .share__btn{ width:34px; height:34px; }
.trackfeat__share .share__btn svg{ width:15px; height:15px; }
.trackfeat__back{ margin-top:.5rem; }


/* ====================================================================
   OFFLINE PANELS
   Community and Chat, until there's something behind them.
==================================================================== */
.offline{
  margin-top:2.5rem; padding:4rem 2rem;
  border:1px dashed var(--line-hard);
  text-align:center;
}
.offline__mark{ font-size:.8rem; }
.offline__t{
  margin-top:1.25rem;
  font-size:clamp(1.2rem,3vw,1.6rem);
  font-weight:700; text-transform:uppercase;
  letter-spacing:-.01em;
}
.offline__d{
  margin-top:.75rem;
  color:var(--ink-50); line-height:1.8;
  max-width:32rem; margin-left:auto; margin-right:auto;
}
.offline .btn{ margin-top:2rem; }


/* ====================================================================
   THE VAULT
   Private outreach tools. Denser than the public pages — these are
   working lists, so readability beats flourish.
==================================================================== */

/* The column heading is violet, marking it as the restricted one. */
.nav__cell--vault .nav__title{ color:var(--violet); }

/* ---------- password gate ---------- */
.vaultgate{
  min-height:70vh;
  display:flex; align-items:center; justify-content:center;
  padding:4rem 1rem;
}
.vaultgate__inner{
  width:100%; max-width:30rem;
  padding:3rem 2rem;
  border:1px solid rgba(168,85,247,.35);
  background:rgba(168,85,247,.04);
  text-align:center;
}
.vaultgate__h{
  margin-top:1.25rem;
  font-size:clamp(2.5rem,9vw,3.5rem);
  font-weight:700; text-transform:uppercase;
  letter-spacing:-.03em; line-height:.9;
}
.vaultgate__h span{
  margin-left:.75rem; vertical-align:top;
  font-size:.35em; color:var(--ink-40);
}
.vaultgate__d{
  margin-top:1rem;
  font-size:.9rem; color:var(--ink-50); line-height:1.7;
}
.vaultgate__form{ margin-top:2rem; display:flex; flex-direction:column; gap:12px; }
.vaultgate__form input{
  width:100%; padding:14px 16px;
  border:1px solid var(--line-hard);
  background:transparent;
  font-family:var(--mono); font-size:.9rem;
  letter-spacing:.2em; text-align:center;
  color:var(--ink);
}
.vaultgate__form input:focus{
  border-color:var(--violet);
  background:rgba(168,85,247,.06);
  outline:none;
}
.vaultgate__note{
  margin-top:1.5rem;
  font-family:var(--mono); font-size:9px;
  letter-spacing:.12em; color:var(--ink-30);
}

/* ---------- vault landing ---------- */
.vgrid{
  margin-top:2.5rem;
  display:grid; grid-template-columns:1fr; gap:1px;
  border:1px solid var(--line); background:var(--line);
}
@media (min-width:700px){ .vgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.vcard{
  background:var(--bg); padding:2rem;
  display:flex; flex-direction:column; gap:.75rem;
  transition:background .25s;
}
.vcard:hover{ background:rgba(168,85,247,.07); }
.vcard__top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.vcard__n{
  font-size:2rem; font-weight:700;
  letter-spacing:-.03em; color:var(--ink-30);
  transition:color .25s;
}
.vcard:hover .vcard__n{ color:var(--violet); }
.vcard__d{ font-size:.85rem; color:var(--ink-50); line-height:1.7; }
.vcard__go{ margin-top:auto; color:var(--ink-40); transition:color .25s; }
.vcard:hover .vcard__go{ color:var(--violet); }

.vnote{
  margin-top:2.5rem; padding:1.5rem;
  border:1px dashed var(--line-hard);
}
.vnote p{
  margin-top:.75rem;
  font-size:.85rem; color:var(--ink-50); line-height:1.75;
  max-width:44rem;
}

/* ---------- filters ---------- */
.vfilters{
  margin-top:1.5rem;
  display:flex; flex-wrap:wrap; gap:6px;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line);
}
.vfilter{
  padding:7px 14px;
  border:1px solid var(--line-hard);
  background:transparent;
  font-family:var(--mono); font-size:9px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-50); cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.vfilter:hover{ border-color:var(--ink-40); color:var(--ink-80); }
.vfilter.is-on{
  border-color:var(--violet); color:var(--violet);
  background:rgba(168,85,247,.12);
}

/* ---------- directory entries ---------- */
.vlist{
  margin-top:1.5rem;
  display:grid; grid-template-columns:1fr; gap:1px;
  border:1px solid var(--line); background:var(--line);
}
@media (min-width:800px){  .vlist{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1300px){ .vlist{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.ventry{ background:var(--bg); padding:1.5rem; }
.ventry[hidden]{ display:none; }
.rel[hidden]{ display:none; }
.ventry__head{ display:flex; flex-direction:column; gap:.6rem; }
.ventry__name{
  font-size:1.05rem; font-weight:700;
  text-transform:uppercase; letter-spacing:-.01em;
}
.ventry__tags{ display:flex; flex-wrap:wrap; gap:5px; }
.vtag{
  padding:3px 8px;
  border:1px solid var(--line-hard);
  font-family:var(--mono); font-size:8px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-50);
}
.vtag--vt{ border-color:rgba(168,85,247,.35); color:var(--violet); }
.ventry__blurb{
  margin-top:.75rem;
  font-size:.8rem; color:var(--ink-50); line-height:1.65;
}
.ventry__rows{ margin-top:1rem; display:grid; gap:1px; background:var(--line-soft); }
.vrow{
  background:var(--bg); padding:.6rem 0;
  display:grid; grid-template-columns:6.5rem 1fr; gap:.75rem;
  align-items:baseline;
}
.vrow a,.vrow b{
  font-family:var(--mono); font-size:.72rem; font-weight:400;
  color:var(--ink-85); word-break:break-word;
}
.vrow a{ transition:color .2s; }
.vrow a:hover{ color:var(--violet); text-decoration:underline; }

/* ---------- pitch templates ---------- */
.pitches{ margin-top:2rem; display:grid; gap:1.5rem; }
.pitch{ border:1px solid var(--line); }
.pitch__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--line);
}
.pitch__copy{
  padding:6px 14px;
  border:1px solid var(--line-hard);
  background:transparent;
  font-family:var(--mono); font-size:9px;
  letter-spacing:.18em; color:var(--ink-60);
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.pitch__copy:hover{ border-color:var(--violet); color:var(--violet); }
.pitch__copy.is-done{
  border-color:var(--violet); color:var(--bg);
  background:var(--violet);
}
.pitch__subject{ padding:1rem 1.25rem; border-bottom:1px solid var(--line-soft); }
.pitch__subject b{
  display:block; margin-top:.35rem;
  font-family:var(--mono); font-size:.8rem; font-weight:400;
  color:var(--ink-85);
}
.pitch__body{
  margin:0; padding:1.25rem;
  font-family:var(--mono); font-size:.78rem;
  line-height:1.8; color:var(--ink-70);
  white-space:pre-wrap; word-break:break-word;
  max-height:22rem; overflow-y:auto;
}


/* ====================================================================
   PRESS KIT
==================================================================== */
.pk{ margin-top:3rem; }
.pk__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}

/* ---------- languages ---------- */
.pklangs{
  margin-top:1.5rem;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  border:1px solid var(--line); background:var(--line);
}
@media (min-width:700px){  .pklangs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .pklangs{ grid-template-columns:repeat(5,minmax(0,1fr)); } }

.pklang{
  background:var(--bg); padding:1.25rem 1rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-align:center;
  transition:background .25s;
}
.pklang:hover{ background:rgba(168,85,247,.1); }
.pklang__flag{ font-size:1.6rem; line-height:1; }
.pklang__name{
  font-size:.85rem; font-weight:600;
  color:var(--ink-85);
}
.pklang__go{ color:var(--ink-40); transition:color .25s; }
.pklang:hover .pklang__go{ color:var(--violet); }

/* ---------- kits ---------- */
.pkassets{
  margin-top:1.5rem;
  display:grid; grid-template-columns:1fr; gap:1px;
  border:1px solid var(--line); background:var(--line);
}
@media (min-width:700px){  .pkassets{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .pkassets{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.pkasset{
  background:var(--bg); padding:1.5rem;
  display:flex; flex-direction:column; gap:.75rem;
  transition:background .25s;
}
.pkasset:hover{ background:rgba(168,85,247,.08); }
.pkasset__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.pkasset__type{
  padding:2px 7px;
  border:1px solid var(--line-hard);
  color:var(--ink-50);
}
.pkasset__d{ font-size:.82rem; color:var(--ink-50); line-height:1.65; }
.pkasset__go{ margin-top:auto; color:var(--ink-40); transition:color .25s; }
.pkasset:hover .pkasset__go{ color:var(--violet); }

/* ---------- short bio ---------- */
.pkbio{
  margin-top:1.5rem; padding:1.75rem;
  border:1px solid var(--line);
  font-size:.95rem; line-height:1.85;
  color:var(--ink-70);
  max-width:52rem;
}

/* ---------- links + contact ---------- */
.pkfoot{
  margin-top:3rem;
  display:grid; grid-template-columns:1fr; gap:1px;
  border:1px solid var(--line); background:var(--line);
}
@media (min-width:800px){ .pkfoot{ grid-template-columns:1fr 1fr; } }
.pkfoot__col{ background:var(--bg); padding:2rem; }
.pkfoot__d{ margin-top:.75rem; font-size:.85rem; color:var(--ink-50); line-height:1.7; }
.pklinks{ margin-top:1.25rem; display:grid; gap:1px; background:var(--line-soft); }
.pklinks a{
  background:var(--bg); padding:.8rem 0;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:.78rem;
  color:var(--ink-70);
  transition:color .2s;
}
.pklinks a i{ font-style:normal; color:var(--ink-30); transition:color .2s, transform .2s; }
.pklinks a:hover{ color:var(--violet); }
.pklinks a:hover i{ color:var(--violet); transform:translateX(3px); }
.pkfoot__col .btn{ margin-top:1.5rem; }


/* ====================================================================
   BIOGRAPHY TABS
==================================================================== */
.btabs{
  margin-top:2.5rem;
  display:flex; flex-wrap:wrap; gap:1px;
  border:1px solid var(--line); background:var(--line);
}
.btab{
  flex:1 1 auto;
  padding:1rem 1.5rem;
  border:0; background:var(--bg);
  font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-50); cursor:pointer;
  transition:color .2s, background .2s;
}
.btab:hover{ color:var(--ink-85); background:rgba(255,255,255,.03); }
.btab.is-on{
  color:var(--violet);
  background:rgba(168,85,247,.1);
  box-shadow:inset 0 -2px 0 var(--violet);
}
.bpanel[hidden]{ display:none; }
.bpanel{ animation:enter .3s ease both; }


/* ====================================================================
   EVENTS
==================================================================== */
.updating{
  margin-top:2.5rem; padding:1.75rem;
  display:grid; grid-template-columns:auto 1fr; gap:1rem 1.25rem;
  align-items:start;
  border:1px solid rgba(168,85,247,.35);
  background:rgba(168,85,247,.05);
}
@media (min-width:900px){
  .updating{ grid-template-columns:auto 1fr auto; align-items:center; }
}
.updating > .dot{ margin-top:.4rem; }
.updating p{
  margin-top:.6rem;
  font-size:.9rem; color:var(--ink-60); line-height:1.75;
  max-width:44rem;
}
.updating .ghost{ flex:0 0 auto; padding:12px 20px; grid-column:1 / -1; }
@media (min-width:900px){ .updating .ghost{ grid-column:auto; } }

.evrow{
  display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem;
  align-items:baseline;
  padding:1rem 0;
  border-bottom:1px solid var(--line-soft);
  transition:background .2s;
}
.evrow:hover{ background:rgba(255,255,255,.02); }
@media (min-width:900px){
  .evrow{ grid-template-columns:5rem 2fr 2fr auto; }
}
.evrow__date{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.1em; color:var(--violet);
}
.evrow__name{
  font-size:.9rem; font-weight:600;
  color:var(--ink-85);
}
.evrow__venue{
  grid-column:1 / -1;
  font-family:var(--mono); font-size:10px;
  color:var(--ink-40); line-height:1.6;
}
@media (min-width:900px){ .evrow__venue{ grid-column:auto; } }
.evrow__tags{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:5px; }
@media (min-width:900px){ .evrow__tags{ grid-column:auto; justify-content:flex-end; } }

/* Five equal menu columns. */
.nav__cell--vault .nav__title{ color:var(--violet); }


/* ====================================================================
   STORY BLOCKS
   Long-form biography sections, rendered from structured data so the
   original heading levels and lists survive.
==================================================================== */
.story{ margin-top:2.5rem; max-width:48rem; }
.story__h2{
  margin-top:3rem; padding-top:2rem;
  border-top:1px solid var(--line);
  font-size:clamp(1.3rem,3.2vw,1.85rem);
  font-weight:700; text-transform:uppercase;
  letter-spacing:-.015em; line-height:1.15;
}
.story > .story__h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.story__h3{
  margin-top:2rem;
  font-size:clamp(1.05rem,2.4vw,1.25rem);
  font-weight:700; color:var(--violet);
  line-height:1.3;
}
.story__h4{
  margin-top:1.5rem;
  font-family:var(--mono); font-size:.8rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-85);
}
.story__p{
  margin-top:1rem;
  font-size:1rem; line-height:1.85;
  color:var(--ink-70);
}
.story__list{ margin:1rem 0 0 1.25rem; }
.story__list li{
  margin-bottom:.6rem; padding-left:.5rem;
  list-style:square;
  font-size:.95rem; line-height:1.75;
  color:var(--ink-70);
}
.story__list li::marker{ color:var(--violet); }

/* ====================================================================
   UPCOMING SHOWS
==================================================================== */
.upcoming{
  margin-top:1.75rem;
  display:grid; gap:1px;
  border:1px solid var(--line); background:var(--line);
}
.ushow{
  background:var(--bg); padding:1.5rem;
  display:grid; grid-template-columns:auto 1fr; gap:1rem 1.5rem;
  align-items:center;
  transition:background .25s;
}
.ushow:hover{ background:rgba(168,85,247,.05); }
@media (min-width:800px){
  .ushow{ grid-template-columns:5rem 1fr auto; }
}
.ushow__date{
  display:flex; flex-direction:column; align-items:center;
  padding:.75rem;
  border:1px solid var(--line-hard);
  min-width:4.5rem;
}
.ushow__m{ font-size:9px; }
.ushow__d{
  font-size:1.9rem; font-weight:700;
  line-height:1; margin:.2rem 0;
}
.ushow__y{ font-size:8px; }
.ushow__t{
  margin-top:.6rem;
  font-size:1.1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:-.01em;
}
.ushow__v{ margin-top:.35rem; font-size:.85rem; color:var(--ink-60); }
.ushow__c{ margin-top:.25rem; }
.ushow__go{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; gap:8px;
}
@media (min-width:800px){ .ushow__go{ grid-column:auto; flex-direction:column; } }
.ushow__go .ghost{ padding:10px 18px; text-align:center; }


/* ====================================================================
   CONTACT — ENQUIRY ROUTES + BOOKING FORM
==================================================================== */
.routes{
  margin-top:2.5rem;
  display:grid; grid-template-columns:1fr; gap:1px;
  border:1px solid var(--line); background:var(--line);
}
@media (min-width:600px){  .routes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .routes{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.route{
  background:var(--bg); padding:1.5rem;
  display:flex; flex-direction:column; gap:.5rem;
  transition:background .25s;
}
.route:hover{ background:rgba(168,85,247,.08); }
.route__t{
  font-size:1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:-.01em;
}
.route__d{ font-size:.82rem; color:var(--ink-50); line-height:1.6; }
.route__e{
  margin-top:auto; padding-top:.75rem;
  font-size:9px; color:var(--ink-40);
  word-break:break-all;
  transition:color .25s;
}
.route:hover .route__e{ color:var(--violet); }

/* ---------- booking form ---------- */
.bform{ margin-top:1.75rem; }
.bform__row{ margin-bottom:1.1rem; }
.bform__row label{
  display:block; margin-bottom:.4rem;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-60);
}
.bform__row label i{ color:var(--red); font-style:normal; }
.bform input,
.bform select,
.bform textarea{
  width:100%; padding:12px 14px;
  border:1px solid var(--line-hard);
  background:transparent;
  font-family:var(--mono); font-size:.82rem;
  color:var(--ink);
}
.bform input::placeholder,
.bform textarea::placeholder{ color:var(--ink-30); }
.bform input:focus,
.bform select:focus,
.bform textarea:focus{
  border-color:var(--violet);
  background:rgba(168,85,247,.05);
  outline:none;
}
.bform select{ appearance:none; cursor:pointer; }
.bform select option{ background:var(--bg); color:var(--ink); }
.bform__grid{ display:grid; grid-template-columns:1fr; gap:0 1rem; }
@media (min-width:600px){
  .bform__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .bform__grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.bform .submit{ margin-top:.5rem; }

.panel__h{
  margin-top:.75rem;
  font-size:clamp(1.3rem,3vw,1.75rem);
  font-weight:700; text-transform:uppercase;
  letter-spacing:-.02em;
}
.notice-sent{
  margin-top:1.5rem; padding:1rem 1.25rem;
  border:1px solid rgba(168,85,247,.4);
  background:rgba(168,85,247,.08);
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.12em; color:var(--violet);
}


/* ====================================================================
   DISCOGRAPHY — FEATURED RELEASE
==================================================================== */
.feat{
  margin-top:2.5rem;
  display:grid; grid-template-columns:1fr; gap:0;
  border:1px solid var(--line);
  overflow:hidden;
}
@media (min-width:900px){ .feat{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

.feat__art{ position:relative; aspect-ratio:21/9; overflow:hidden; }
.feat__art img{ width:100%; height:100%; object-fit:cover; }

.feat__panel{ padding:1.5rem; display:flex; flex-direction:column; }
.feat__t{
  margin-top:.5rem;
  font-size:clamp(1.6rem,4vw,2.3rem);
  font-weight:700; text-transform:none;
  letter-spacing:-.03em; line-height:1;
}
.feat__meta{ margin-top:.4rem; font-size:.85rem; color:var(--ink-70); }
.feat__meta--dim{ margin-top:.15rem; font-size:.75rem; color:var(--ink-40); }

/* ---------- tracklist ---------- */
.feat__tracks{
  margin-top:1.5rem;
  list-style:none;
  max-height:5rem; overflow-y:auto;
  border:1px solid var(--line);
  scrollbar-width:thin;
}
.feat__tracks::-webkit-scrollbar{ width:8px; }
.feat__tracks::-webkit-scrollbar-thumb{ background:var(--line-hard); }
.feat__track{
  display:grid; grid-template-columns:2rem 1fr auto;
  align-items:center; gap:.75rem;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--line-soft);
  transition:background .2s;
}
.feat__track:last-child{ border-bottom:0; }
.feat__track:hover{ background:rgba(168,85,247,.08); }
.feat__no{ font-family:var(--mono); font-size:.7rem; color:var(--ink-40); }
.feat__name{ font-size:.85rem; color:var(--ink-85); }
.feat__play{ color:var(--ink-30); transition:color .2s; }
.feat__track:hover .feat__play{ color:var(--violet); }

.feat__go{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:8px; }
.feat__go .ghost{ padding:9px 18px; }

/* ---------- store buttons ---------- */
.feat__stores{ margin-top:.6rem; display:flex; flex-wrap:wrap; gap:6px; }
.store{
  padding:5px 12px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.1em;
  border:1px solid var(--line-hard);
  color:var(--ink-70);
  transition:border-color .2s, color .2s, background .2s;
}
.store:hover{ border-color:var(--violet); color:var(--violet); background:rgba(168,85,247,.1); }

.feat__share{
  margin-top:auto; padding-top:1.5rem;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.feat__share .share__btn{ width:30px; height:30px; }


/* ====================================================================
   RELEASE CARD — TAGS AND EXPANDING DETAILS
==================================================================== */
.rel__tools{ background:linear-gradient(to top, rgba(10,10,12,.92), transparent); }
.rel__type{
  padding:2px 8px;
  border:1px solid var(--line-hard);
  background:rgba(10,10,12,.7);
  font-size:8px; color:var(--ink-60);
}

.rel__foot{ display:flex; flex-direction:column; flex:1; }
.rel__tags{ margin-top:.7rem; display:flex; flex-wrap:wrap; gap:5px; }
.pill{
  padding:3px 9px;
  border:1px solid var(--line-hard);
  border-radius:999px;
  font-family:var(--mono); font-size:8px;
  letter-spacing:.1em;
  color:var(--ink-60);
  white-space:nowrap;
}
.rel:hover .pill{ border-color:rgba(168,85,247,.35); color:var(--ink-85); }

.rel__toggle{
  margin-top:.9rem;
  padding:.6rem 0 0;
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%;
  border:0; border-top:1px solid var(--line);
  background:none; cursor:pointer;
  font-family:var(--mono); font-size:9px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-50);
  transition:color .2s;
}
.rel__toggle:hover{ color:var(--violet); }
.rel__chev{ transition:transform .25s; display:inline-block; }
.rel__toggle-t{ display:inline-block; }
.rel.is-open .rel__chev{ transform:rotate(180deg); }
.rel.is-open .rel__toggle{ color:var(--violet); }

.rel__details[hidden]{ display:none; }
.rel__details{ padding-top:1rem; animation:enter .25s ease both; }
.rel__facts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rel__fact{
  padding:.6rem .75rem;
  border:1px solid var(--line);
}
.rel__fact b{
  display:block; margin-top:.25rem;
  font-family:var(--mono); font-size:.72rem; font-weight:400;
  color:var(--ink-85);
}
.rel__listen{ margin-top:1rem; }
.rel__stores{ margin-top:.6rem; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.rel__store{
  padding:8px 10px;
  border:1px solid var(--line-hard);
  font-family:var(--mono); font-size:9px;
  letter-spacing:.06em;
  color:var(--ink-70);
  text-align:center;
  transition:border-color .2s, color .2s, background .2s;
}
.rel__store:hover{ border-color:var(--violet); color:var(--violet); background:rgba(168,85,247,.1); }
.rel__page{
  display:block; margin-top:.75rem; padding:10px;
  border:1px solid var(--line-hard);
  font-family:var(--mono); font-size:9px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-70); text-align:center;
  transition:border-color .2s, color .2s, background .2s;
}
.rel__page:hover{ border-color:var(--violet); color:var(--violet); background:rgba(168,85,247,.1); }


/* ====================================================================
   DJ MIXES
==================================================================== */
.mixes{
  margin-top:1.75rem;
  display:grid; grid-template-columns:1fr; gap:1rem;
}
@media (min-width:600px){  .mixes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .mixes{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.mix{
  padding:1.5rem;
  border:1px solid var(--line);
  transition:border-color .25s, background .25s, transform .25s;
}
.mix:hover{
  border-color:var(--violet);
  background:rgba(168,85,247,.06);
  transform:translateY(-2px);
}
.mix__t{
  font-size:1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:-.01em;
}
.mix__m{ margin-top:.5rem; }


/* ====================================================================
   BERLIN LEGACY
   Hero split, panel cards, venue grid and timeline.
==================================================================== */
.bhero{
  margin-top:2.5rem;
  display:grid; grid-template-columns:1fr; gap:2rem;
  align-items:center;
}
@media (min-width:900px){ .bhero{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3rem; } }
.bhero__t{
  margin-top:1rem;
  font-size:clamp(1.9rem,5vw,2.9rem);
  font-weight:700; letter-spacing:-.03em; line-height:1.1;
}
.bhero__p{
  margin-top:1.1rem;
  font-size:.95rem; line-height:1.85;
  color:var(--ink-70);
}
.bhero__body{ min-width:0; }
.bhero__img{ border:1px solid var(--line); overflow:hidden; }
.bhero__img img{ width:100%; height:100%; object-fit:cover; display:block; }

.pill--vt{
  border-color:rgba(168,85,247,.4);
  background:rgba(168,85,247,.1);
  color:var(--violet);
  font-size:9px; padding:5px 12px;
}

/* ---------- panel cards ---------- */
.bcard{
  margin-top:2.5rem; padding:2rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.bcard__h{ display:flex; align-items:center; gap:12px; }
.bcard__icon{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex-shrink:0;
  border:1px solid rgba(168,85,247,.35);
  background:rgba(168,85,247,.1);
  color:var(--violet); font-size:.9rem;
}
.bcard__h h3{
  font-size:clamp(1.1rem,2.6vw,1.4rem);
  font-weight:700; letter-spacing:-.01em;
}
.bcard__p{
  margin-top:1rem;
  font-size:.9rem; line-height:1.85;
  color:var(--ink-70);
}

.bsec{
  margin-top:3rem;
  font-size:clamp(1.15rem,2.8vw,1.5rem);
  font-weight:700; letter-spacing:-.015em;
}

/* ---------- venues & residencies ---------- */
.venues{
  margin-top:1.5rem;
  display:grid; grid-template-columns:1fr; gap:1rem;
}
@media (min-width:640px){  .venues{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .venues{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.venue{
  padding:1.5rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  transition:border-color .25s, background .25s, transform .25s;
}
.venue:hover{
  border-color:var(--violet);
  background:rgba(168,85,247,.06);
  transform:translateY(-2px);
}
.venue__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.venue__icon{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border:1px solid var(--line-hard);
  background:rgba(255,255,255,.03);
  color:var(--ink-60); font-size:.85rem;
  transition:color .25s, border-color .25s;
}
.venue:hover .venue__icon{ color:var(--violet); border-color:rgba(168,85,247,.4); }
.venue__yr{
  padding:3px 9px;
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.12);
  font-family:var(--mono); font-size:8px;
  letter-spacing:.1em; color:var(--red);
  white-space:nowrap;
}
.venue__n{
  margin-top:1rem;
  font-size:1rem; font-weight:700;
  letter-spacing:-.01em;
}
.venue__r{ margin-top:.4rem; font-size:.8rem; color:var(--violet); }
.venue__tag{
  margin-top:.25rem;
  font-family:var(--mono); font-size:9px;
  letter-spacing:.1em; color:var(--ink-40);
}
.venue__d{
  margin-top:.8rem; padding-top:.8rem;
  border-top:1px solid var(--line);
  font-size:.8rem; line-height:1.7; color:var(--ink-60);
}

/* ---------- timeline ---------- */
.tline{ margin-top:1.5rem; }
.tline__row{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; gap:1rem;
  padding-bottom:1.25rem;
}
.tline__icon{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex-shrink:0;
  border:1px solid var(--line-hard);
  background:var(--bg);
  color:var(--ink-50); font-size:.8rem;
}
/* line linking the markers */
.tline__row:not(:last-child)::before{
  content:""; position:absolute;
  left:17px; top:34px; bottom:0;
  width:1px; background:var(--line-hard);
}
.tline__card{
  padding:1.25rem 1.5rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  transition:border-color .25s, background .25s;
}
.tline__row:hover .tline__card{
  border-color:rgba(168,85,247,.4);
  background:rgba(168,85,247,.05);
}
.tline__row:hover .tline__icon{ color:var(--violet); border-color:rgba(168,85,247,.4); }
.tline__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tline__yr{
  font-size:1.15rem; font-weight:700;
  letter-spacing:-.01em;
}
.tline__t{
  margin-top:.6rem;
  font-size:.95rem; font-weight:700;
  letter-spacing:-.005em;
}
.tline__d{
  margin-top:.4rem;
  font-size:.82rem; line-height:1.7;
  color:var(--ink-60);
}

/* ---------- legacy panel ---------- */
.blegacy{
  margin-top:2.5rem; padding:2.5rem 2rem;
  border:1px solid rgba(239,68,68,.25);
  background:linear-gradient(135deg, rgba(239,68,68,.08), rgba(10,10,12,0) 60%);
  text-align:center;
}
.blegacy__mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border:1px solid var(--ink-40);
  color:var(--ink-70); font-size:1rem;
}
.blegacy h3{
  margin-top:1rem;
  font-size:clamp(1.15rem,2.8vw,1.5rem);
  font-weight:700; letter-spacing:-.015em;
}
.blegacy p{
  margin:1rem auto 0;
  max-width:40rem;
  font-size:.88rem; line-height:1.85;
  color:var(--ink-60);
}

/* ---------- memories ---------- */
.bmem{
  margin-top:1.5rem;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem;
}
@media (min-width:900px){ .bmem{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.bmem__i{
  position:relative; aspect-ratio:1/1;
  border:1px solid var(--line);
  overflow:hidden;
}
.bmem__i img{
  width:100%; height:100%; object-fit:cover;
  transition:filter .4s, transform .4s;
}
body.jv-bw-hover .bmem__i img{ filter:grayscale(1); }
.bmem__i:hover img{ filter:none; transform:scale(1.05); }
.bmem__i figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 10px;
  background:linear-gradient(to top, rgba(10,10,12,.9), transparent);
  font-size:9px; color:var(--ink-70);
  opacity:0; transition:opacity .3s;
}
.bmem__i:hover figcaption{ opacity:1; }

/* Press kit header: opening line beside the downloadable press shot. */
.pkhead{
  margin-top:2rem;
  display:grid; grid-template-columns:1fr; gap:2rem;
  align-items:start;
}
@media (min-width:800px){ .pkhead{ grid-template-columns:1fr auto; } }
.pkhead .bio__standfirst{ margin-top:0; }
.pkshot{ width:100%; max-width:16rem; }
.pkshot img{
  width:100%; display:block;
  border:1px solid var(--line);
}
.pkshot figcaption{ margin-top:.6rem; font-size:8px; }


/* ====================================================================
   RAVE HISTORY — FLYER ARCHIVE
==================================================================== */
.flyers{
  margin-top:1.5rem;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem;
}
@media (min-width:700px){  .flyers{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .flyers{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.flyer{ margin:0; }
.flyer__hit{
  position:relative; display:block;
  width:100%; padding:0;
  border:1px solid var(--line);
  background:var(--bg);
  cursor:pointer; overflow:hidden;
  transition:border-color .25s, transform .25s;
}
.flyer__hit:hover{ border-color:var(--violet); transform:translateY(-2px); }
.flyer__hit img{
  width:100%; display:block;
  aspect-ratio:3/4; object-fit:cover;
  filter:grayscale(.55) contrast(1.05);
  transition:filter .4s, transform .5s;
}
.flyer__hit:hover img{ filter:none; transform:scale(1.04); }
.flyer__veil{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,12,.75), transparent 45%);
  pointer-events:none;
}
.flyer__no{
  position:absolute; left:8px; bottom:8px;
  font-size:8px; color:var(--ink-60);
  transition:color .25s;
}
.flyer__hit:hover .flyer__no{ color:var(--violet); }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:3rem 1rem;
  background:rgba(10,10,12,.96);
  backdrop-filter:blur(4px);
}
.lightbox[hidden]{ display:none; }
.lightbox__fig{ margin:0; max-width:min(92vw,900px); max-height:86vh; }
.lightbox__fig img{
  max-width:100%; max-height:78vh;
  display:block; margin:0 auto;
  border:1px solid var(--line);
}
.lightbox__fig figcaption{ margin-top:1rem; text-align:center; }
.lightbox__close{
  position:absolute; top:1.25rem; right:1.25rem;
  width:42px; height:42px;
  border:1px solid var(--line-hard);
  background:transparent;
  color:var(--ink-70); font-size:1rem;
  cursor:pointer;
  transition:border-color .2s, color .2s;
}
.lightbox__close:hover{ border-color:var(--violet); color:var(--violet); }

.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px;
  border:1px solid var(--line-hard);
  background:rgba(10,10,12,.6);
  color:var(--ink-70); font-size:1.6rem; line-height:1;
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.lightbox__nav:hover{ border-color:var(--violet); color:var(--violet); background:rgba(168,85,247,.12); }
.lightbox__nav--prev{ left:1rem; }
.lightbox__nav--next{ right:1rem; }
@media (max-width:640px){
  .lightbox__nav{ width:44px; height:44px; font-size:1.3rem; }
  .lightbox__nav--prev{ left:.5rem; }
  .lightbox__nav--next{ right:.5rem; }
}


/* ====================================================================
   MOBILE FIXES — DISCOGRAPHY
   Long release titles were pushing outside their cards.
==================================================================== */
.rel, .rel__foot, .rel__details, .track__wave{ min-width:0; }
.rel__title,
.rel__artist,
.rel__genre,
.rel__sub{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}
/* Titles wrap to two lines rather than being cut off. */
.rel__title{
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.rel__artist,
.rel__genre,
.rel__sub{ white-space:normal; }
.rel__sub{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

@media (max-width:600px){
  .relgrid{ grid-template-columns:1fr; gap:1rem; }
  .rel__title{ font-size:.9rem; -webkit-line-clamp:none; }
  .rel__artist{ font-size:10px; }
  .rel__genre,.rel__sub{ font-size:9px; letter-spacing:.08em; }
  .rel__tags{ gap:4px; }
  .pill{ font-size:9px; padding:3px 8px; }
  .rel__facts,.rel__stores{ grid-template-columns:1fr; }
  .rel__fact b{ font-size:.78rem; }
}

/* Featured panel on small screens */
@media (max-width:600px){
  .feat__panel{ padding:1.5rem 1.25rem; }
  .feat__t{ font-size:2rem; overflow-wrap:anywhere; }
  .feat__track{ grid-template-columns:1.5rem 1fr auto auto; gap:.5rem; padding:.6rem .75rem; }
  .feat__name{ font-size:.8rem; overflow-wrap:anywhere; }
  .feat__go .ghost,.feat__stores .store{ flex:1 1 auto; text-align:center; }
}

/* Height is now set once, above, at 6rem — this stray override used
   to sit outside its intended mobile-only media query, applying
   globally and undoing any attempt to shrink the box at any size. */
.feat__bpm{ font-size:9px; }
.feat__play{
  padding:0; border:0; background:none;
  color:var(--ink-30); font-size:.95rem;
  cursor:pointer;
  transition:color .2s;
}
.feat__play:hover{ color:var(--violet); }
.feat__track.is-live .feat__name,
.feat__track.is-live .feat__play{ color:var(--violet); }
.feat__cat{ margin-top:.35rem; font-size:9px; }

/* Vault and directory text on small screens */
@media (max-width:600px){
  .vrow{ grid-template-columns:1fr; gap:.2rem; }
  .ventry__name{ font-size:.95rem; overflow-wrap:anywhere; }
  .routes{ grid-template-columns:1fr; }
}


/* ====================================================================
   DJ MIXES — FEATURED / PINNED PANEL
   Reuses the .trackfeat layout (art left, panel right) already built for
   single release pages.
==================================================================== */
.featmix{ margin-top:2.5rem; }
.featmix__t{
  margin-top:1rem;
  font-size:clamp(1.6rem,4.5vw,2.4rem);
  font-weight:700; text-transform:uppercase;
  letter-spacing:-.02em; line-height:1.1;
}
.featmix__row{
  margin-top:.75rem;
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
}

/* Same pattern on the grid cards — credit and tag on one line, matching
   the featured panel above instead of stacking underneath it. */
.rel__row{
  margin-top:.35rem;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
}
.rel__row .rel__artist{ margin-top:0; }
.featmix__credit{
  font-family:var(--mono); font-size:.8rem;
  color:var(--ink-50);
}
.featmix__tag{
  display:inline-block;
  padding:4px 10px;
  border:1px solid rgba(168,85,247,.3);
  font-size:9px; white-space:nowrap;
}


/* ====================================================================
   FEATURED-BOX IMAGE SIZING
   Each top box's art column made 20% narrower, so the info panel gets
   correspondingly more room. Scoped so it never touches the single
   release page, which shares the same base .trackfeat layout.
==================================================================== */
@media (min-width:900px){
  .featmix{ grid-template-columns:0.8fr 1fr; }
}
@media (min-width:900px){
  .feat{ grid-template-columns:0.8fr 1fr; }
}
@media (min-width:1024px){
  .drop--remix{ grid-template-columns:0.5fr 1fr; }
}

/* The image column has been shrunk down several times — the text side
   was still sized for the original, much wider box, which is what was
   reading as mismatched. Scaled the whole right side down to match a
   genuinely compact panel, rather than a big layout squeezed smaller. */
.drop--remix .drop__panel{
  gap:1rem; padding:1.25rem;
}
@media (min-width:768px){ .drop--remix .drop__panel{ padding:1.75rem; } }
.drop--remix .drop__title{
  font-size:clamp(1.3rem,3.6vw,1.9rem);
}
.drop--remix .drop__copy{ font-size:.8rem; max-width:24rem; }
.drop--remix .stats__val{ font-size:.95rem; }
.drop--remix .drop__art{ min-height:10rem; }


/* ====================================================================
   FEATURED MIX — note + share row
==================================================================== */
.featmix__note{
  margin-top:1.25rem; padding:1.25rem 1.5rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  font-size:.85rem; line-height:1.8; color:var(--ink-60);
}
.featmix__share{
  margin-top:1.5rem;
  display:flex; align-items:center; gap:12px;
}
.featmix__share .share__btn{ width:32px; height:32px; }
.featmix__share .share__btn svg{ width:14px; height:14px; }


/* ====================================================================
   CARD SHARE DROPDOWN
   Native <details>, no JS needed.
==================================================================== */
.card-share{
  margin-top:.6rem; padding-top:.6rem;
  border-top:1px solid var(--line-soft);
}
.card-share summary{
  cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:4px;
  font-size:9px; letter-spacing:.14em;
  color:var(--ink-40);
  transition:color .2s;
}
.card-share summary::-webkit-details-marker{ display:none; }
.card-share:hover summary,
.card-share[open] summary{ color:var(--violet); }
.card-share .share{ margin-top:.6rem; }


/* ====================================================================
   SITE-WIDE IMAGE TREATMENT — everywhere except the home page
   Default black & white, full colour on hover. OFF by default — only
   applies when .jv-bw-hover is on the body, which is controlled by a
   real on/off switch in Customize → Site-wide, not hardcoded here.
==================================================================== */
body.jv-bw-hover:not(.home):not(.front-page) img{
  filter:grayscale(1);
  transition:filter .4s ease;
}

/* Reveal colour when hovering the image itself, or the card/link/button
   that wraps it — covers every pattern used across the theme (track
   cards, release cards, flyer grid, feature art, single release pages,
   Vault cards, etc.) without needing a rule per component. */
body.jv-bw-hover:not(.home):not(.front-page) img:hover,
body.jv-bw-hover:not(.home):not(.front-page) a:hover img,
body.jv-bw-hover:not(.home):not(.front-page) button:hover img,
body.jv-bw-hover:not(.home):not(.front-page) article:hover img,
body.jv-bw-hover:not(.home):not(.front-page) figure:hover img,
body.jv-bw-hover:not(.home):not(.front-page) .track:hover img,
body.jv-bw-hover:not(.home):not(.front-page) .shopitem:hover img,
body.jv-bw-hover:not(.home):not(.front-page) .drop:hover img{
  filter:grayscale(0);
}


/* ====================================================================
   LIKE / SHARE COUNTS
   A small icon-plus-number pair, shown wherever a number's been set
   for that release, mix or promo. Either half hides on its own if
   blank; the whole thing hides if nothing's set at all.
==================================================================== */
.likeshare{
  display:flex; align-items:center; gap:14px;
  margin-top:.6rem;
}
.likeshare__item{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:.72rem;
  color:var(--ink-50);
}
.likeshare__item svg{ width:14px; height:14px; flex-shrink:0; }

/* The like button — a real, clickable control, not just a display */
button.likeshare__item--like{
  border:0; background:none; padding:0; margin:0;
  cursor:pointer;
  transition:color .2s, transform .15s;
}
button.likeshare__item--like:hover{ color:var(--red); }
button.likeshare__item--like:active{ transform:scale(.92); }
button.likeshare__item--like:disabled{ cursor:default; }
button.likeshare__item--like.is-liked{ color:var(--red); }
button.likeshare__item--like.is-liked svg{ fill:currentColor; }

.likeshare__n{ display:inline-block; }

/* Slightly larger in the big featured panels than on grid cards. */
.featmix__row .likeshare,
.feat__panel .likeshare,
.trackfeat__panel .likeshare,
.drop__panel .likeshare{
  margin-top:1rem;
}
.featmix__row .likeshare__item,
.feat__panel .likeshare__item,
.trackfeat__panel .likeshare__item,
.drop__panel .likeshare__item{
  font-size:.8rem;
}
.featmix__row .likeshare__item svg,
.feat__panel .likeshare__item svg,
.trackfeat__panel .likeshare__item svg,
.drop__panel .likeshare__item svg{
  width:16px; height:16px;
}


/* ====================================================================
   SCROLLBAR
   A dark, unobtrusive scrollbar matching the site's own palette,
   instead of the browser's bright default.
==================================================================== */
html{
  scrollbar-width:thin;                       /* Firefox */
  scrollbar-color:#333338 var(--bg);           /* Firefox: thumb, track */
}

::-webkit-scrollbar{ width:10px; height:10px; }        /* Chrome, Edge, Safari */
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{
  background:#333338;
  border:2px solid var(--bg);
  border-radius:6px;
}
::-webkit-scrollbar-thumb:hover{ background:#46464c; }
::-webkit-scrollbar-corner{ background:var(--bg); }


/* ====================================================================
   SHOP — collection cards
==================================================================== */
.shopgrid{
  margin-top:2rem;
  display:grid; grid-template-columns:1fr; gap:1.25rem;
}
@media (min-width:420px){  .shopgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:620px){  .shopgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:820px){  .shopgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.shopcard{
  border:1px solid var(--line);
  background:var(--bg);
  display:flex; flex-direction:column;
  transition:border-color .25s, transform .25s;
}
.shopcard:hover{ border-color:var(--ink-30); transform:translateY(-2px); }

.shopcard__art{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; overflow:hidden;
  background:var(--line-soft);
  padding:0;
  box-sizing:border-box;
}
.shopcard__art img{
  width:100%; height:100%; object-fit:contain;   /* accurate preview of the collection, not an awkward crop */
  transition:transform .4s;
}
.shopcard:hover .shopcard__art img{ transform:scale(1.03); }
.shopcard__veil{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,12,.85), transparent 55%);
  pointer-events:none;
}
.shopcard__count{
  position:absolute; top:10px; left:10px;
  padding:3px 9px;
  border:1px solid var(--line-hard);
  background:rgba(10,10,12,.7);
  font-size:9px; color:var(--ink-70);
  pointer-events:none;
}
.shopcard__price{
  position:absolute; top:10px; right:10px;
  padding:4px 10px;
  border:1px solid rgba(168,85,247,.4);
  background:rgba(10,10,12,.8);
  font-size:10px; letter-spacing:.06em;
  pointer-events:none;
}

.shopcard__foot{ padding:1.25rem; display:flex; flex-direction:column; flex:1; }
.shopcard__t{
  font-size:1.1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:-.01em;
}
@media (min-width:820px){
  .shopcard__foot{ padding:1rem; }
  .shopcard__t{ font-size:1rem; }
  .shopcard__go{ font-size:8px; padding:8px 12px; white-space:normal; }
}
.shopcard__d{
  margin-top:.5rem;
  font-size:.82rem; line-height:1.7; color:var(--ink-60);
  flex:1;
}
.shopcard__size{ margin-top:.75rem; font-size:9px; }
.shopcard__go{
  margin-top:1rem; align-self:flex-start;
  padding:9px 16px; font-size:9px;
}


/* ====================================================================
   SHOP — individual product cards, real WooCommerce items
==================================================================== */
.shopgrid--items{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:640px){  .shopgrid--items{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .shopgrid--items{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.shopitem[hidden]{ display:none; }
.shopitem{
  border:1px solid var(--line);
  background:var(--bg);
  display:flex; flex-direction:column;
  transition:border-color .25s, transform .25s;
}
.shopitem:hover{ border-color:var(--ink-30); transform:translateY(-2px); }

.shopitem__art{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1; overflow:hidden;
  background:var(--line-soft);
  padding:0;
  box-sizing:border-box;
}
.shopitem__art img{
  width:100%; height:100%; object-fit:contain;   /* never crop — real product photos, shown accurately */
  transition:transform .4s;
}
.shopitem:hover .shopitem__art img{ transform:scale(1.03); }
.shopitem__veil{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,12,.55), transparent 55%);
  pointer-events:none;
}
.shopitem__noimg{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px;
}
.shopitem__stock{
  position:absolute; top:10px; right:10px;
  padding:3px 9px;
  border:1px solid rgba(239,68,68,.4);
  background:rgba(10,10,12,.8);
  color:var(--red); font-size:9px;
  pointer-events:none;
}

.shopitem__foot{ padding:1rem; display:flex; flex-direction:column; flex:1; }
.shopitem__t{
  font-size:.9rem; font-weight:700;
  text-transform:uppercase; letter-spacing:-.005em;
  line-height:1.3;
}
.shopitem__t a{ color:inherit; }
.shopitem__t a:hover{ color:var(--violet); }
.shopitem__price{
  margin-top:.5rem;
  font-family:var(--mono); font-size:.85rem;
  color:var(--violet);
}
.shopitem__price del{ color:var(--ink-30); margin-right:6px; }
.shopitem__go{ margin-top:.75rem; }

.shopitem__swatches{ margin-top:.6rem; display:flex; gap:6px; flex-wrap:wrap; }
.swatch{
  width:14px; height:14px; border-radius:50%;
  background:var(--swatch);
  border:1px solid rgba(255,255,255,.25);
  display:inline-block;
}

/* WooCommerce's own add-to-cart button, restyled to match the theme's
   ghost-button look rather than its plugin default styling. */
.shopitem__go a.button,
.shopitem__go .added_to_cart{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding:13px; text-align:center;
  background:var(--violet) !important;
  border:1px solid var(--violet) !important;
  color:#fff !important;
  font-family:var(--sans) !important; font-weight:700 !important; font-size:12px !important;
  letter-spacing:.04em !important; text-transform:uppercase !important;
  box-shadow:0 4px 14px rgba(168,85,247,.25);
  transition:background .2s, box-shadow .2s, transform .15s;
}
.shopitem__go a.button:hover{
  background:#9333ea !important;
  border-color:#9333ea !important;
  box-shadow:0 6px 20px rgba(168,85,247,.4);
}
.shopitem__go a.button:active{ transform:scale(.98); }


/* ====================================================================
   MISSING COVER ART — a clean placeholder rather than a broken image
   icon, shown while art still needs re-uploading after a fresh install
   wiped the old Media Library.
==================================================================== */
.rel__noart{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1rem;
  background:var(--line-soft);
  font-size:9px; letter-spacing:.1em;
}


/* ====================================================================
   EPK — FLIP-THROUGH BOOK VIEWER
==================================================================== */
.pkbook-cta{
  margin-top:1.5rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
}

.epkbook{
  position:fixed; inset:0; z-index:220;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.25rem;
  padding:2rem 1rem;
  background:rgba(6,6,8,.97);
  backdrop-filter:blur(6px);
}
.epkbook[hidden]{ display:none; }

.epkbook__stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:1rem;
  width:100%; max-width:640px;
  perspective:2200px;
}

.epkbook__page{
  position:relative;
  width:100%; aspect-ratio:3/4;
  max-height:74vh;
  background:#111;
  border:1px solid var(--line-hard);
  box-shadow:0 30px 60px rgba(0,0,0,.6);
  transform-style:preserve-3d;
  transform-origin:left center;
  transition:transform .38s cubic-bezier(.4,0,.2,1), opacity .38s;
}
.epkbook__page.is-turning-next{ transform:rotateY(-95deg); opacity:.25; }
.epkbook__page.is-turning-prev{ transform:rotateY(95deg); opacity:.25; }
.epkbook__page img{
  width:100%; height:100%; object-fit:contain;
  backface-visibility:hidden;
  filter:none !important;   /* the site-wide grayscale effect doesn't belong on the actual book pages */
}

.epkbook__nav{
  flex-shrink:0;
  width:44px; height:44px;
  border:1px solid var(--line-hard);
  background:rgba(10,10,12,.6);
  color:var(--ink-70); font-size:1.4rem; line-height:1;
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.epkbook__nav:hover{ border-color:var(--violet); color:var(--violet); background:rgba(168,85,247,.12); }

.epkbook__close{
  position:absolute; top:1.25rem; right:1.25rem;
  width:42px; height:42px;
  border:1px solid var(--line-hard);
  background:transparent;
  color:var(--ink-70); font-size:1rem;
  cursor:pointer;
  transition:border-color .2s, color .2s;
}
.epkbook__close:hover{ border-color:var(--violet); color:var(--violet); }

.epkbook__bar{
  display:flex; align-items:center; gap:1.5rem;
  font-size:11px;
}

@media (max-width:640px){
  .epkbook__stage{ gap:.5rem; }
  .epkbook__nav{ width:36px; height:36px; font-size:1.1rem; }
  .epkbook__page{ max-height:64vh; }
}


/* ====================================================================
   SHOP PREVIEW — sizes, buy button, payment trust badges
==================================================================== */
.shopitem__sizes{ margin-top:.6rem; display:flex; gap:5px; flex-wrap:wrap; }
.sizepill{
  padding:2px 7px;
  border:1px solid var(--line-hard);
  font-family:var(--mono); font-size:9px; color:var(--ink-60);
}

.shopitem__buy{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:1rem;
  padding:13px; text-align:center;
  background:var(--violet);
  border:1px solid var(--violet);
  color:#fff;
  font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 4px 14px rgba(168,85,247,.25);
  transition:background .2s, box-shadow .2s, transform .15s;
}
.shopitem__buy i{ font-style:normal; transition:transform .2s; }
.shopitem__buy:hover{
  background:#9333ea;
  box-shadow:0 6px 20px rgba(168,85,247,.4);
}
.shopitem__buy:hover i{ transform:translateX(3px); }
.shopitem__buy:active{ transform:scale(.98); }

.paybadges{
  margin-top:3rem; padding-top:2rem;
  border-top:1px solid var(--line);
  text-align:center;
}
.paybadges__row{
  margin-top:1rem;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.paybadge{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px;
  border:1px solid var(--line-hard);
  background:#fff;
  font-family:var(--sans); font-size:12px; font-weight:700;
  color:#1a1a1a;
  filter:none !important;   /* badges always show their real brand colour */
}
.paybadge svg{ width:20px; height:20px; flex-shrink:0; }

.paybadge--paypal{ background:#fff; color:#003087; }
.paybadge--paypal svg{ fill:#003087; }
.paybadge--paypal b{ color:#009cde; }

.paybadge--klarna{ background:#ffb3c7; color:#17120f; }
.paybadge--klarna svg{ fill:#0a0a0c; }

.paybadge--clearpay{ background:#b2fce4; color:#0a0a0c; }
.paybadge--clearpay svg{ fill:#0a0a0c; }

.paybadge--visa{ background:#1a1f71; color:#fff; }
.paybadge--visa svg{ fill:#f7b600; }

.paybadge--mastercard{ background:#000; color:#fff; }
.paybadge--mastercard svg circle:first-child{ fill:#eb001b; }
.paybadge--mastercard svg circle:last-child{ fill:#f79e1b; opacity:.85; }

.paybadge--applepay{ background:#000; color:#fff; }
.paybadge--applepay svg{ fill:#fff; }


/* ====================================================================
   SHOP CATEGORY PAGES — one product type per page, consistent sizing
==================================================================== */
.shopgrid--cat{
  margin-top:2rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:640px){  .shopgrid--cat{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .shopgrid--cat{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.shopitem2{
  border:1px solid var(--line);
  background:var(--bg);
  display:flex; flex-direction:column;
  transition:border-color .25s, transform .25s;
}
.shopitem2:hover{ border-color:var(--ink-30); transform:translateY(-2px); }

.shopitem2__art{
  position:relative;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  background:var(--line-soft);
  overflow:hidden;
  padding:0;
  box-sizing:border-box;
}
.shopitem2__art img{
  width:100%; height:100%;
  object-fit:contain;   /* never crop — every product keeps its real shape */
}

.shopitem2__foot{ padding:1rem; display:flex; flex-direction:column; flex:1; }
.shopitem2__t{
  font-size:.9rem; font-weight:700;
  text-transform:uppercase; letter-spacing:-.005em;
}
.shopitem2__price{
  margin-top:.4rem;
  font-family:var(--mono); font-size:.85rem; color:var(--violet);
}
.shopitem2__colours{ margin-top:.6rem; display:flex; gap:6px; }
.colourdot{
  width:18px; height:18px; border-radius:50%;
  border:1px solid var(--line-hard);
  cursor:pointer;
}
.colourdot--black{ background:#161616; }
.colourdot--grey{  background:#8a8a8a; }
.colourdot--white{ background:#f4f4f4; }
.colourdot--blue{   background:#2563eb; }
.colourdot--green{  background:#16a34a; }
.colourdot--purple{ background:#9333ea; }
.colourdot--red{    background:#dc2626; }
.colourdot--pink{   background:#ec4899; }
.colourdot--dblue{  background:#1e3a8a; }
.colourdot--whiteundercover{ background:#f4f4f4; border:1px dashed var(--ink-60); }
.colourdot.is-active{ outline:2px solid var(--violet); outline-offset:2px; }


/* ====================================================================
   WOOCOMMERCE — cart, checkout, product page, styled to match the site
   rather than left as WooCommerce's own default look.
==================================================================== */
.woocommerce{ color:var(--ink-85); font-family:var(--sans); }
.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border-color:var(--line) !important;
  background:var(--bg) !important;
  color:var(--ink-85) !important;
}
.woocommerce .quantity input.qty,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce textarea,
.woocommerce select{
  background:var(--bg) !important;
  border:1px solid var(--line-hard) !important;
  color:var(--ink-85) !important;
  font-family:var(--sans) !important;
}
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button{
  background:transparent !important;
  border:1px solid var(--violet) !important;
  color:var(--violet) !important;
  border-radius:0 !important;
  font-family:var(--mono) !important;
  font-size:11px !important; letter-spacing:.08em !important;
  text-transform:uppercase !important;
  padding:10px 18px !important;
  transition:background .2s, color .2s !important;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover{
  background:var(--violet) !important;
  color:#fff !important;
}
.woocommerce-cart-form,
.woocommerce-checkout,
.woocommerce ul.products,
.cart_totals{ color:var(--ink-85) !important; }
.woocommerce-Price-amount{ color:var(--violet) !important; font-family:var(--mono) !important; }
.woocommerce-message,
.woocommerce-info{
  background:var(--line-soft) !important;
  border-top-color:var(--violet) !important;
  color:var(--ink-85) !important;
}


/* ====================================================================
   SHOP — always full colour, never the site-wide black & white effect.
   People need to see what they're actually buying accurately.
==================================================================== */
body.page-template-template-shop-php img,
body.page-template-template-shop-category-php img,
body.single-product img,
body.post-type-archive-product img,
body.woocommerce img{
  filter:none !important;
}


/* ====================================================================
   WOOCOMMERCE — single product page, properly styled rather than left
   at WooCommerce's bare default. This is the actual purchase moment.
==================================================================== */
.single-product #primary,
.single-product .wrap{ max-width:1100px; margin:0 auto; padding:2rem 1.25rem 4rem; }

.woocommerce div.product{
  display:grid; grid-template-columns:1fr; gap:2.5rem;
  margin-top:1.5rem;
}
@media (min-width:900px){
  .woocommerce div.product{ grid-template-columns:1fr 1fr; }
}

.woocommerce div.product .woocommerce-product-gallery{
  background:var(--line-soft);
  border:1px solid var(--line);
  padding:2rem;
}
.woocommerce div.product .woocommerce-product-gallery img{
  width:100%; height:auto; object-fit:contain;
}
.woocommerce div.product .flex-control-thumbs{
  display:flex; gap:8px; margin-top:1rem; list-style:none; padding:0;
}
.woocommerce div.product .flex-control-thumbs li{ width:64px; }
.woocommerce div.product .flex-control-thumbs img{
  border:1px solid var(--line-hard); cursor:pointer; opacity:.6; transition:opacity .2s;
}
.woocommerce div.product .flex-control-thumbs img.flex-active{ opacity:1; border-color:var(--violet); }

.woocommerce div.product .summary{ display:flex; flex-direction:column; }
.woocommerce div.product .product_title{
  font-family:var(--sans); font-size:clamp(1.6rem,4vw,2.2rem);
  font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
  color:var(--ink); margin-bottom:.75rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--mono) !important; font-size:1.5rem !important;
  color:var(--violet) !important; margin-bottom:1.25rem;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--ink-60); font-size:.9rem; line-height:1.8; margin-bottom:1.5rem;
}

.woocommerce div.product form.cart{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  padding-top:1.25rem; border-top:1px solid var(--line);
}
.woocommerce div.product table.variations{ width:100%; margin-bottom:1rem; }
.woocommerce div.product table.variations td,
.woocommerce div.product table.variations th{
  border:0 !important; padding:.4rem 0 !important; background:none !important;
}
.woocommerce div.product table.variations select{
  width:100%; padding:10px; margin-top:4px;
}
.woocommerce div.product .quantity input.qty{
  width:60px; padding:12px 10px; text-align:center;
}
.woocommerce div.product .single_add_to_cart_button{
  flex:1; min-width:180px;
  padding:14px 20px !important;
}

.woocommerce-tabs{ margin-top:3rem; border-top:1px solid var(--line); padding-top:2rem; }
.woocommerce-tabs ul.tabs{
  display:flex; gap:1.5rem; list-style:none; padding:0; margin-bottom:1.5rem;
  border-bottom:1px solid var(--line);
}
.woocommerce-tabs ul.tabs li{ padding-bottom:.75rem; }
.woocommerce-tabs ul.tabs li a{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-50);
}
.woocommerce-tabs ul.tabs li.active a{ color:var(--violet); }
.woocommerce-tabs .panel{ color:var(--ink-60); line-height:1.8; }

.woocommerce div.product .stock{
  font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  color:var(--ink-50); margin-top:.5rem;
}
.woocommerce div.product .stock.in-stock{ color:#3f9a5c; }
.woocommerce div.product .stock.out-of-stock{ color:var(--red); }


/* ====================================================================
   SINGLE PRODUCT PAGE — click through, zoom the photo, pick options
==================================================================== */
.product-crumb{ margin:1.5rem 0; display:flex; gap:8px; flex-wrap:wrap; }
.product-crumb a{ color:var(--ink-50); }
.product-crumb a:hover{ color:var(--violet); }
.product-crumb span{ color:var(--ink-30); }

/* ====================================================================
   SINGLE PRODUCT PAGE — a simple flex layout, photo and details side
   by side, that reliably fills the full page width.
==================================================================== */
.pbox{
  margin-top:2rem;
  display:flex; flex-wrap:wrap;
  width:100%;
  border:1px solid var(--line);
  box-sizing:border-box;
}
.pbox__photo{
  width:100%;
  min-width:0;
  aspect-ratio:1/1;
  position:relative; overflow:hidden;
  background:var(--line-soft);
  cursor:zoom-in;
  box-sizing:border-box;
}
.pbox__photo img{
  width:100%; height:100%; object-fit:contain;
  transition:transform .3s;
}
.pbox__photo.is-zoomed{ cursor:zoom-out; }
.pbox__photo.is-zoomed img{ transform:scale(1.9); }
.pbox__hint{
  position:absolute; bottom:14px; right:14px;
  padding:4px 10px; background:rgba(10,10,12,.7); border:1px solid var(--line-hard);
  pointer-events:none;
  font-size:9px; letter-spacing:.1em;
}
.pbox__text{ width:100%; min-width:0; padding:2rem; box-sizing:border-box; }

@media (min-width:900px){
  .pbox__photo{ width:50%; flex:1 1 50%; aspect-ratio:auto; }
  .pbox__text{ width:50%; flex:1 1 50%; }
}

.pbox__title{
  font-size:clamp(1.6rem,4vw,2.2rem); font-weight:700;
  text-transform:uppercase; letter-spacing:-.01em;
}
.pbox__price{
  margin-top:.5rem;
  font-family:var(--mono); font-size:1.4rem; color:var(--violet);
}
.pbox__desc{
  margin-top:1.25rem; color:var(--ink-60); font-size:.9rem; line-height:1.8;
}
.pbox__group{ margin-top:1.5rem; }
.product-swatches{ margin-top:.6rem; display:flex; gap:8px; }

.product-thumbs{ margin-top:1rem; display:flex; gap:8px; flex-wrap:wrap; }
.product-thumbs:empty{ display:none; }
.product-thumbs__item{
  width:60px; height:60px; padding:0;
  border:1px solid var(--line); background:var(--line-soft);
  overflow:hidden; cursor:pointer;
}
.product-thumbs__item img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-thumbs__item.is-active{ border-color:var(--violet); border-width:2px; }
.product-swatches .colourdot{ width:28px; height:28px; }
.product-swatches .colourdot.is-active{ outline:2px solid var(--violet); outline-offset:3px; }

.product-sizes{ margin-top:.6rem; display:flex; gap:8px; flex-wrap:wrap; }
.sizebtn{
  padding:9px 16px;
  border:1px solid var(--line-hard);
  background:none;
  font-family:var(--mono); font-size:11px; color:var(--ink-60);
  cursor:pointer;
  transition:border-color .2s, color .2s;
}
.sizebtn:hover{ border-color:var(--ink-40); color:var(--ink-85); }
.sizebtn.is-active{ border-color:var(--violet); color:var(--violet); background:rgba(168,85,247,.1); }

.pbox__text .paybadges{ margin-top:2rem; padding-top:1.5rem; text-align:left; }
.pbox__text .paybadges__row{
  justify-content:flex-start;
  flex-wrap:wrap;
  overflow-x:visible;
}
.pbox__text .paybadge{
  padding:6px 9px; font-size:10px; gap:5px; flex-shrink:0;
}
.pbox__text .paybadge svg{ width:15px; height:15px; }
.product-paypal{ max-width:320px; }


/* ====================================================================
   SHOP CATEGORY PAGE — sort + product grid
==================================================================== */

.shopsort{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-bottom:1.25rem;
}
.shopsort__select{
  padding:9px 14px;
  background:var(--bg); border:1px solid var(--line-hard);
  color:var(--ink-70); font-family:var(--sans); font-size:.85rem;
}

.shopitem__badge{
  position:absolute; top:10px; left:10px;
  padding:4px 10px;
  font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--violet);
  pointer-events:none;
}
.shopitem__badge--sale{ background:var(--red); }
.shopitem__badge--sold-out{ background:#444; }


/* ====================================================================
   RELATED PRODUCTS — bottom of a single product page
==================================================================== */
.product-related{
  margin-top:3rem; padding-top:2.5rem;
  border-top:1px solid var(--line);
}

/* ====================================================================
   SINGLE PRODUCT PAGE ONLY — everything below is scoped specifically
   to body.single-jv_product, so nothing here can ever leak onto DJ
   Mixes, Promos, or any other page on the site again.
==================================================================== */
html{
  margin:0 !important;
  padding:0 !important;
}
body.single-jv_product{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
body.single-jv_product main#content{
  width:100% !important;
  max-width:none !important;
  display:block !important;
  grid-column:1 / -1 !important;
}
body.single-jv_product section.wrap{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:1rem !important;
  padding-right:1rem !important;
  padding-top:4rem !important;
  padding-bottom:4rem !important;
  box-sizing:border-box !important;
  display:block !important;
}
@media (min-width:768px){
  body.single-jv_product section.wrap{
    padding-left:2rem !important;
    padding-right:2rem !important;
    padding-top:6rem !important;
  }
}
.pbox{
  width:100% !important;
  max-width:none !important;
}

/* ====================================================================
   JUST VICIOUS — header banner plus a text box beneath it.
==================================================================== */
.jvhead{ width:100%; line-height:0; }
.jvhead img{ width:100%; height:auto; display:block; }

.jvtext{
  max-width:48rem; margin:2.5rem auto 0;
  color:var(--ink-85); font-size:1rem; line-height:1.8;
}
.jvtext p{ margin-top:1rem; }
.jvtext p:first-child{ margin-top:0; }