/* ============================================================
   SIA BEIGI — cinematic · red-lit · playable
   Bricolage Grotesque · Instrument Serif (italic) · DM Mono
   ============================================================ */
:root{
  --bg:   #0a0908;
  --bg-2: #060505;
  --ink:  #f1ece6;
  --mid:  #8b827b;
  --dim:  #3a3431;
  --line: rgba(241,236,230,.13);
  --red:  #ff2d2d;
  --red-d:#c01616;
  --glow: rgba(255,45,45,.5);
  --maxw: 1600px;
  --pad:  clamp(16px, 4vw, 60px);
  --ease: cubic-bezier(.16,1,.3,1);

  --d-font: "Bricolage Grotesque", system-ui, sans-serif;
  --h-font: "Syne", "Bricolage Grotesque", system-ui, sans-serif;
  --s-font: "Instrument Serif", Georgia, serif;
  --m-font: "DM Mono", ui-monospace, monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; background:var(--bg); }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--d-font); font-weight:300; line-height:1.5; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media(pointer:fine){ body{ cursor:none; } }
a{ color:inherit; text-decoration:none; }
sup{ font-size:.5em; vertical-align:super; }

/* ---- atmosphere: red lights + waveform + grain ---- */
#wave{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; opacity:.85; }
.lights{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.lite{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; mix-blend-mode:screen; }
.l1{ width:46vw; height:46vw; left:-10vw; top:-6vw; background:radial-gradient(circle,var(--glow),transparent 68%); animation:drift1 17s var(--ease) infinite alternate; }
.l2{ width:38vw; height:38vw; right:-8vw; top:34vh; background:radial-gradient(circle,rgba(255,45,45,.34),transparent 70%); animation:drift2 21s var(--ease) infinite alternate; }
.l3{ width:30vw; height:30vw; left:36vw; bottom:-12vw; background:radial-gradient(circle,rgba(255,80,40,.26),transparent 72%); animation:drift3 25s var(--ease) infinite alternate; }
@keyframes drift1{ to{ transform:translate(8vw,10vh) scale(1.15) } }
@keyframes drift2{ to{ transform:translate(-7vw,-8vh) scale(1.2) } }
@keyframes drift3{ to{ transform:translate(5vw,-6vh) scale(.85) } }
body.playing .lite{ opacity:.78; animation-duration:7s,9s,11s; }

.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(5) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,3%)} 100%{transform:translate(0,0)} }

.chrome, main, .foot{ position:relative; z-index:3; }

/* ---- custom cursor ---- */
.cursor{ position:fixed; top:0; left:0; z-index:120; pointer-events:none; mix-blend-mode:difference; will-change:transform; }
.cursor span{ position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%; background:#fff;
  transition:width .35s var(--ease), height .35s var(--ease), left .35s var(--ease), top .35s var(--ease); }
.cursor.grow span{ width:62px; height:62px; left:-31px; top:-31px; background:rgba(255,255,255,.16); }
.cursor.grow span::after{ content:""; position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:50%; background:#fff; }
@media(pointer:coarse){ .cursor{ display:none; } body{ cursor:auto; } }

/* ---- chrome ---- */
.chrome{ position:fixed; top:0; left:0; right:0; z-index:80; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:18px var(--pad); font-family:var(--m-font); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(180deg,rgba(10,9,8,.7),transparent); }
.c-mark{ font-weight:500; }
.c-mid{ color:var(--mid); display:none; }
@media(min-width:760px){ .c-mid{ display:block; } }
.c-nav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.c-nav a{ color:var(--mid); transition:color .3s; }
.c-nav a:hover{ color:var(--ink); }

/* ---- hairline rules ---- */
.rule{ display:flex; justify-content:space-between; align-items:center; width:100%; gap:12px;
  padding:12px 0; border-top:1px solid var(--line);
  font-family:var(--m-font); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mid); }
.oa-top{ color:var(--mid); transition:color .4s; }
.oa-top.live{ color:var(--red); }
.blink{ color:var(--ink); animation:bl 2.4s steps(1) infinite; }
@keyframes bl{ 0%,60%{opacity:1} 61%,100%{opacity:.25} }

/* ---- HERO (video header) ---- */
.hero{ position:relative; min-height:100svh; overflow:hidden; }
.hero-video{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#000; }
.hero-tint{ position:absolute; inset:0; background:
  radial-gradient(130% 110% at 50% 30%, transparent 26%, rgba(6,5,5,.74) 100%),
  linear-gradient(180deg, rgba(6,5,5,.6), transparent 26%, rgba(6,5,5,.78)); }
.hero-red{ position:absolute; inset:0; mix-blend-mode:screen; opacity:.5;
  background:radial-gradient(80% 60% at 16% 90%, rgba(255,45,45,.5), transparent 60%), radial-gradient(70% 60% at 90% 10%, rgba(255,60,30,.4), transparent 60%);
  animation:pulseRed 5s ease-in-out infinite; }
.hero-lens{ position:absolute; inset:0; background:var(--red); opacity:.1; mix-blend-mode:multiply; } /* ~10% red lens */
.hero-inner{ position:relative; z-index:2; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between;
  padding:84px var(--pad) 20px; }
.hero-mid{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:clamp(20px,4vh,50px) 0; }
.film-tag{ font-family:var(--m-font); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:8px; margin-bottom:clamp(10px,2vh,22px); }
.mega{ font-family:var(--h-font); font-weight:800; line-height:.82; letter-spacing:-.04em; text-transform:uppercase;
  margin:0; user-select:none; transform-origin:left center; will-change:transform; }
.mega .line{ display:block; overflow:hidden; }
.mega b{ display:block; font-weight:800; font-size:clamp(2.8rem,11vw,9rem); color:#fff;
  text-shadow:0 6px 50px rgba(0,0,0,.55), 0 0 80px rgba(255,45,45,.18); }
.mega .ltr{ display:inline-block; will-change:transform;
  transform:translate(var(--lx,0),var(--ly,0)) rotate(var(--lr,0)); transition:transform .55s var(--ease); }
.hero-watch{ font-family:var(--m-font); font-size:11px; letter-spacing:.14em; color:var(--ink); border-bottom:1px solid var(--red); padding-bottom:3px; transition:opacity .3s; }
.hero-watch:hover{ opacity:.6; }
.hero-cta{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin:clamp(20px,4vh,40px) 0 0; }
.play-hero{ display:inline-flex; align-items:center; gap:14px; padding:14px 26px 14px 20px; cursor:none;
  background:var(--red); border:0; border-radius:100px; color:#fff; font-family:var(--m-font); font-size:12px; letter-spacing:.18em;
  box-shadow:0 8px 40px -8px var(--glow); transition:transform .4s var(--ease), box-shadow .4s, background .3s; }
.play-hero:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 14px 60px -8px var(--glow); }
.play-hero .ph-ic{ width:0;height:0;border-style:solid;border-width:6px 0 6px 11px;border-color:transparent transparent transparent #fff; }
.play-hero.on .ph-ic{ border-width:6px 3px;border-color:transparent #fff;width:5px;height:13px;box-sizing:border-box; }
.hero-now{ font-family:var(--s-font); font-style:italic; font-size:clamp(1.05rem,2.2vw,1.5rem); color:var(--mid); }
.hero-now.live{ color:var(--ink); }

/* ---- BIG VIDEO ---- */
.film{ position:relative; height:clamp(72vh,86vh,1000px); overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.film-frame{ position:absolute; inset:0; overflow:hidden; }
#ytv{ position:absolute; top:50%; left:50%; width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; transform:translate(-50%,-50%); pointer-events:none; }
.film-tint{ position:absolute; inset:0; background:radial-gradient(120% 100% at 50% 40%, transparent 30%, rgba(6,5,5,.7) 100%), linear-gradient(180deg, rgba(6,5,5,.45), transparent 30%, rgba(6,5,5,.55)); }
.film-red{ position:absolute; inset:0; mix-blend-mode:screen; opacity:.5;
  background:radial-gradient(80% 60% at 18% 88%, rgba(255,45,45,.5), transparent 60%), radial-gradient(70% 60% at 88% 12%, rgba(255,60,30,.4), transparent 60%);
  animation:pulseRed 5s ease-in-out infinite; }
@keyframes pulseRed{ 0%,100%{opacity:.36} 50%{opacity:.62} }
.film-ui{ position:absolute; left:0; bottom:0; padding:clamp(24px,5vw,64px) var(--pad); z-index:2; }
.film-tag{ font-family:var(--m-font); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.rec{ color:var(--red); animation:bl 1.4s steps(1) infinite; }
.film-h{ font-family:var(--d-font); font-weight:800; text-transform:uppercase; font-size:clamp(2.6rem,9vw,8rem); line-height:.9; letter-spacing:-.03em; margin:.16em 0; }
.film-h em{ font-family:var(--s-font); font-style:italic; font-weight:400; text-transform:none; color:var(--red); }
.film-link{ font-family:var(--m-font); font-size:12px; letter-spacing:.14em; color:var(--ink); border-bottom:1px solid var(--red); padding-bottom:3px; transition:opacity .3s; }
.film-link:hover{ opacity:.6; }

/* ---- MARQUEE ---- */
.ticker-wrap{ border-bottom:1px solid var(--line); padding:4px 0; overflow:hidden; }
.ticker{ overflow:hidden; white-space:nowrap; padding:12px 0; }
.ticker.thin{ padding:8px 0; border-top:1px solid var(--line); }
.ticker-row{ display:inline-flex; align-items:center; will-change:transform; }
.ticker[data-dir] .ticker-row > span{ font-family:var(--d-font); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.8rem,6.5vw,5rem); letter-spacing:-.02em; padding:0 .25em; color:var(--ink); }
.ticker i{ font-style:normal; color:var(--red-d); font-size:clamp(1rem,2.6vw,1.8rem); }
.ticker.thin .ticker-row span{ font-family:var(--m-font); font-weight:300; font-size:clamp(.78rem,1.5vw,1rem); letter-spacing:.12em; color:var(--mid); }
.ticker.thin i{ color:var(--dim); padding:0 .5em; font-size:.85rem; }

/* ---- blocks ---- */
.block{ max-width:var(--maxw); margin:0 auto; padding:clamp(80px,13vh,190px) var(--pad); }
.b-head{ margin-bottom:clamp(28px,5vw,56px); }
.idx{ display:block; font-family:var(--m-font); font-size:11px; letter-spacing:.22em; color:var(--red); margin-bottom:16px; }
.b-title{ font-family:var(--d-font); font-weight:800; text-transform:uppercase; font-size:clamp(2.6rem,11vw,10rem); line-height:.84; letter-spacing:-.035em; }
.b-title span{ display:inline-block; will-change:transform; }

/* ============ THE BOOTH — player ============ */
.np{ border:1px solid var(--line); border-radius:16px; padding:clamp(20px,3vw,40px); margin-bottom:clamp(34px,5vw,60px);
  background:linear-gradient(180deg, rgba(255,45,45,.04), rgba(255,255,255,.012)); backdrop-filter:blur(6px); position:relative; overflow:hidden; }
.np::before{ content:""; position:absolute; left:0; top:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--red),transparent); opacity:.5; }
.np-main{ display:flex; gap:clamp(18px,3vw,34px); align-items:stretch; }
.np-art{ position:relative; flex:0 0 auto; width:clamp(110px,18vw,200px); aspect-ratio:1; }
.np-cover{ width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; box-shadow:0 12px 50px -14px rgba(0,0,0,.7), 0 0 0 1px var(--line); position:relative; z-index:2; }
.np-spin{ position:absolute; right:-12px; bottom:-12px; width:46%; height:46%; border-radius:50%; z-index:1;
  background:repeating-radial-gradient(circle at 50% 50%, #111 0 2px, #1c1614 2px 4px); border:1px solid #2a201d;
  box-shadow:0 8px 30px -8px rgba(0,0,0,.8); opacity:0; transform:translateX(-30%); transition:opacity .5s, transform .6s var(--ease); }
.np-spin::after{ content:""; position:absolute; inset:0; margin:auto; width:22%; height:22%; border-radius:50%; background:var(--red); }
body.playing .np-spin{ opacity:.95; transform:none; animation:vinyl 3.2s linear infinite; }
@keyframes vinyl{ to{ transform:rotate(360deg) } }
.np-content{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
@media(max-width:560px){ .np-main{ flex-direction:column; } .np-art{ width:clamp(120px,40vw,180px); } }
.np-top{ display:flex; justify-content:space-between; font-family:var(--m-font); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mid); }
.np-status{ color:var(--mid); transition:color .3s; }
.np-status.live{ color:var(--red); }
.np-title{ font-family:var(--d-font); font-weight:700; text-transform:uppercase; font-size:clamp(1.8rem,6vw,4.6rem); line-height:1; letter-spacing:-.02em; margin:14px 0 22px; }
.np-wave{ display:block; width:100%; height:84px; cursor:none; }
.np-bar{ display:flex; align-items:center; gap:16px; margin-top:18px; }
.np-btn{ background:none; border:0; color:var(--ink); font-size:18px; cursor:none; opacity:.8; transition:opacity .3s, transform .2s; line-height:1; }
.np-btn:hover{ opacity:1; transform:scale(1.12); }
.np-play{ width:54px; height:54px; border-radius:50%; background:var(--red); display:grid; place-items:center; box-shadow:0 6px 30px -6px var(--glow); opacity:1; }
.np-play:hover{ transform:scale(1.06); }
.np-ic{ width:0;height:0;border-style:solid;border-width:7px 0 7px 13px;border-color:transparent transparent transparent #fff; margin-left:2px; }
.np-play.on .np-ic{ border-width:7px 4px;border-color:transparent #fff;width:6px;height:15px;box-sizing:border-box;margin:0; }
.np-time{ margin-left:auto; font-family:var(--m-font); font-size:12px; color:var(--mid); letter-spacing:.06em; }

/* tracklist */
.tracks{ list-style:none; border-top:1px solid var(--line); }
.trk{ display:grid; grid-template-columns:52px 54px 1fr auto auto; align-items:center; gap:18px;
  padding:clamp(11px,1.6vw,18px) 8px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; cursor:none;
  transition:padding-left .5s var(--ease), color .3s; }
.trk-cover{ width:54px; height:54px; object-fit:cover; border-radius:6px; display:block;
  filter:grayscale(.65) contrast(1.03) brightness(.92); transition:filter .4s, transform .4s var(--ease); }
.trk:hover .trk-cover, .trk.active .trk-cover{ filter:none; transform:scale(1.04); }
.trk.active .trk-cover{ box-shadow:0 0 0 1px var(--red), 0 6px 24px -8px var(--glow); }
.trk::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--red); transform:scaleY(0); transition:transform .4s var(--ease); }
.trk:hover{ padding-left:22px; }
.trk:hover::before{ transform:scaleY(1); }
.trk.active{ padding-left:22px; }
.trk.active::before{ transform:scaleY(1); }
.trk-n{ font-family:var(--m-font); font-size:12px; letter-spacing:.06em; color:var(--mid); }
.trk.active .trk-n{ color:var(--red); }
.trk-t{ font-family:var(--d-font); font-weight:700; text-transform:uppercase; font-size:clamp(1.3rem,4vw,3rem); line-height:1; letter-spacing:-.015em; }
.trk.active .trk-t{ color:var(--red); }
.trk-type{ font-family:var(--m-font); font-size:10px; letter-spacing:.12em; color:var(--mid); text-transform:uppercase; border:1px solid var(--line); border-radius:4px; padding:3px 8px; }
.trk-y{ font-family:var(--m-font); font-size:13px; color:var(--mid); }
/* equaliser shown on active row */
.eq{ display:none; gap:2px; align-items:flex-end; height:18px; }
.trk.active .eq{ display:inline-flex; }
.trk.active .trk-y{ display:none; }
.eq i{ width:3px; background:var(--red); height:6px; animation:eq .7s ease-in-out infinite; }
.eq i:nth-child(2){ animation-delay:.18s } .eq i:nth-child(3){ animation-delay:.34s } .eq i:nth-child(4){ animation-delay:.5s }
.trk.paused .eq i{ animation-play-state:paused; }
@keyframes eq{ 0%,100%{height:4px} 50%{height:18px} }
@media(max-width:680px){ .trk{ grid-template-columns:30px 44px 1fr auto; gap:12px; } .trk-type{ display:none; }
  .trk-cover{ width:44px; height:44px; } }

/* cover-art gallery */
.covers{ display:grid; grid-template-columns:repeat(8,1fr); gap:clamp(8px,1.2vw,16px); margin-top:clamp(34px,5vw,60px); }
@media(max-width:900px){ .covers{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:480px){ .covers{ grid-template-columns:repeat(2,1fr); } }
.cover{ position:relative; padding:0; border:0; background:none; cursor:none; aspect-ratio:1; overflow:hidden; border-radius:8px; }
.cover img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.7) brightness(.8); transition:filter .45s var(--ease), transform .6s var(--ease); }
.cover::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line); border-radius:8px; transition:box-shadow .3s; }
.cover:hover img{ filter:none; transform:scale(1.07); }
.cover.active img{ filter:none; }
.cover.active::after{ box-shadow:inset 0 0 0 2px var(--red); }
.cover-cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 8px 7px; font-family:var(--m-font); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#fff; text-align:left;
  background:linear-gradient(transparent, rgba(0,0,0,.85)); opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; }
.cover:hover .cover-cap, .cover.active .cover-cap{ opacity:1; transform:none; }

.booth-foot{ margin-top:clamp(34px,5vw,56px); font-family:var(--m-font); font-size:12px; letter-spacing:.04em; color:var(--mid); }
.booth-foot a{ color:var(--ink); border-bottom:1px solid var(--red); }

/* ============ THE LIST — guest list ============ */
.list .block-sub{ font-family:var(--m-font); font-size:13px; color:var(--mid); max-width:50ch; margin-top:14px; line-height:1.7; }
.gl, .gl-done{ max-width:740px; border:1px solid var(--line); border-radius:18px; position:relative; overflow:hidden;
  padding:clamp(22px,3.4vw,42px); background:linear-gradient(180deg, rgba(255,45,45,.05), rgba(255,255,255,.015)); backdrop-filter:blur(6px); }
.gl::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--red),transparent); opacity:.55; }
.gl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,20px); }
.gl-wide{ grid-column:1 / -1; }
@media(max-width:560px){ .gl-grid{ grid-template-columns:1fr; } }
.gl-field{ display:flex; flex-direction:column; gap:9px; }
.gl-field span{ font-family:var(--m-font); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mid); }
.gl-field input{ width:100%; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:11px; color:var(--ink);
  padding:15px 16px; font-family:var(--d-font); font-weight:400; font-size:1.05rem; outline:none; cursor:none;
  transition:border-color .3s, background .3s, box-shadow .3s; }
.gl-field input::placeholder{ color:var(--mid); opacity:.55; }
.gl-field input:focus{ border-color:var(--red); background:rgba(255,45,45,.06); box-shadow:0 0 0 3px rgba(255,45,45,.12); }
.gl-field input.bad{ border-color:var(--red); box-shadow:0 0 0 3px rgba(255,45,45,.2); }
.gl-btn{ margin-top:clamp(16px,2.5vw,22px); width:100%; display:flex; align-items:center; justify-content:center; gap:12px;
  background:var(--red); border:0; border-radius:12px; color:#fff; cursor:none;
  font-family:var(--m-font); font-size:12px; letter-spacing:.18em; padding:18px;
  box-shadow:0 12px 44px -12px var(--glow); transition:transform .35s var(--ease), box-shadow .35s, opacity .3s; }
.gl-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 58px -12px var(--glow); }
.gl-btn[disabled]{ opacity:.55; }
.gl-arrow{ font-size:15px; transition:transform .35s var(--ease); }
.gl-btn:hover .gl-arrow{ transform:translateX(6px); }
.gl-msg{ margin-top:14px; font-family:var(--m-font); font-size:12px; letter-spacing:.04em; color:var(--red); min-height:1em; text-align:center; }
.gl-fine{ margin-top:9px; text-align:center; font-family:var(--m-font); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
/* confirmed state */
.gl-done{ border-color:rgba(255,45,45,.4); text-align:center; background:linear-gradient(180deg, rgba(255,45,45,.08), rgba(255,255,255,.012)); }
.gl-done-mark{ display:inline-block; color:var(--red); font-size:28px; animation:vinyl 6s linear infinite; }
.gl-done-h{ font-family:var(--d-font); font-weight:800; text-transform:uppercase; font-size:clamp(1.9rem,5.5vw,3.6rem); line-height:.95; letter-spacing:-.03em; margin:14px 0 12px; }
.gl-done-p{ color:#cbb; font-family:var(--s-font); font-style:italic; font-size:clamp(1.1rem,2.4vw,1.5rem); max-width:42ch; margin:0 auto; }
.gl-reset{ margin-top:22px; background:none; border:0; color:var(--mid); cursor:none; font-family:var(--m-font); font-size:11px; letter-spacing:.1em; border-bottom:1px solid var(--line); padding-bottom:3px; transition:color .3s, border-color .3s; }
.gl-reset:hover{ color:var(--ink); border-color:var(--red); }

/* ---- shows ---- */
.show-list{ list-style:none; border-top:1px solid var(--line); }
.show{ display:grid; grid-template-columns:minmax(120px,1fr) 2fr 1fr auto; align-items:center; gap:24px;
  padding:clamp(18px,2.4vw,32px) 8px; border-bottom:1px solid var(--line); transition:padding-left .5s var(--ease); }
.show:hover{ padding-left:18px; }
.sh-d{ font-family:var(--m-font); font-size:clamp(1rem,2.2vw,1.5rem); letter-spacing:.02em; }
.sh-v{ font-family:var(--d-font); font-weight:700; text-transform:uppercase; font-size:clamp(1.3rem,3.4vw,2.6rem); line-height:1; letter-spacing:-.02em; }
.sh-c{ font-family:var(--m-font); font-size:11px; letter-spacing:.14em; color:var(--mid); text-transform:uppercase; }
.sh-a{ font-family:var(--m-font); font-size:12px; letter-spacing:.1em; color:var(--red); white-space:nowrap; transition:opacity .3s; }
.sh-a:hover{ opacity:.6; }
@media(max-width:760px){ .show{ grid-template-columns:1fr auto; grid-template-areas:"date a" "venue venue" "city city"; gap:8px 14px; }
  .sh-d{ grid-area:date } .sh-v{ grid-area:venue } .sh-c{ grid-area:city } .sh-a{ grid-area:a; justify-self:end; } }

/* ---- about ---- */
.ab-grid{ display:grid; gap:clamp(40px,6vw,84px); }
.ab-big{ font-family:var(--d-font); font-weight:700; font-size:clamp(1.7rem,5vw,3.8rem); line-height:1.04; letter-spacing:-.02em; max-width:19ch; will-change:transform; }
.ab-big span{ display:inline-block; }
.ab-cols{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(30px,5vw,68px); }
@media(max-width:760px){ .ab-cols{ grid-template-columns:1fr; } }
.ab-cols p{ color:var(--mid); font-size:clamp(1rem,1.6vw,1.2rem); max-width:52ch; }
.ab-cols b{ color:var(--ink); font-weight:500; }
.ab-facts{ border-top:1px solid var(--line); align-self:start; }
.ab-facts div{ display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.ab-facts dt{ font-family:var(--m-font); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mid); }
.ab-facts dd{ font-size:14px; text-align:right; }

/* ---- book ---- */
.book .idx{ margin-bottom:26px; }
.email{ display:inline-block; font-family:var(--d-font); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.4rem,4.5vw,3.4rem); line-height:1; letter-spacing:-.02em; word-break:break-word; }
.email span{ display:inline-block; transition:color .3s; }
.email:hover span{ color:var(--red); }
.socials{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:clamp(34px,6vw,66px); }
.socials a{ font-family:var(--m-font); font-size:11px; letter-spacing:.12em; border:1px solid var(--line); border-radius:100px; padding:11px 20px; color:var(--mid); transition:color .3s, border-color .3s; }
.socials a:hover{ color:var(--ink); border-color:var(--red); }

/* ---- footer ---- */
.foot{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  max-width:var(--maxw); margin:0 auto; padding:26px var(--pad) 110px; border-top:1px solid var(--line);
  font-family:var(--m-font); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mid); }
.foot-credit a{ color:var(--ink); border-bottom:1px solid var(--red); padding-bottom:1px; transition:color .3s; }
.foot-credit a:hover{ color:var(--red); }

/* ============ persistent dock ============ */
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; align-items:center; gap:16px;
  padding:12px var(--pad); border-top:1px solid var(--line); background:rgba(8,6,6,.82); backdrop-filter:blur(14px);
  transform:translateY(110%); transition:transform .6s var(--ease); }
.dock.show{ transform:none; }
.dock-play{ width:42px; height:42px; flex:0 0 auto; border-radius:50%; background:var(--red); border:0; display:grid; place-items:center; cursor:none; box-shadow:0 4px 20px -4px var(--glow); }
.dock-ic{ width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff; margin-left:2px; }
.dock-play.on .dock-ic{ border-width:6px 3px;border-color:transparent #fff;width:5px;height:12px;box-sizing:border-box;margin:0; }
.dock-cover{ width:34px; height:34px; flex:0 0 auto; object-fit:cover; border-radius:5px; box-shadow:0 0 0 1px var(--line); }
.dock-info{ flex:0 0 auto; min-width:0; max-width:30vw; }
.dock-status{ font-family:var(--m-font); font-size:9px; letter-spacing:.16em; color:var(--red); text-transform:uppercase; }
.dock-title{ display:block; font-family:var(--d-font); font-weight:700; text-transform:uppercase; font-size:clamp(.9rem,2vw,1.2rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em; }
.dock-wave{ flex:1 1 auto; height:32px; min-width:0; }
.dock-time{ flex:0 0 auto; font-family:var(--m-font); font-size:11px; color:var(--mid); }
@media(max-width:680px){ .dock-wave{ display:none; } .dock-info{ max-width:none; flex:1; } }

/* ---- reveal ---- */
[data-reveal]{ opacity:0; transform:translateY(36px); transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
.mega .line b{ transform:translateY(110%); transition:transform 1.1s var(--ease); display:block; }
.mega .line.in b{ transform:translateY(0); }
.mega .line:nth-child(2) b{ transition-delay:.12s; }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  [data-reveal]{ opacity:1; transform:none; } .mega .line b{ transform:none; }
  body{ cursor:auto; } .cursor{ display:none; }
}