/* ===================================================================
   KUROTEK — website styles
   Brand tokens from the KUROTEK Brand Bible. 60-30-10. Cool, never warm.
=================================================================== */

/* self-hosted JetBrains Mono (no external font CDN — fully bundled) */
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:800; font-display:swap; src:url('assets/fonts/jetbrains-mono-latin-800-normal.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:italic; font-weight:400; font-display:swap; src:url('assets/fonts/jetbrains-mono-latin-400-italic.woff2') format('woff2'); }

:root{
  --near-black:#0A0A0A;
  --carbon:#111111;
  --signal-red:#CC1100;
  --void-red:#1C0404;
  --cold-white:#F0F0F0;
  --mid-grey:#A0A0A0;
  --dark-grey:#505050;
  --cyan:#00C2C7;
  --mono:'JetBrains Mono','Andale Mono','Courier New',monospace;

  --maxw:1120px;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:64px; }

body{
  background:var(--near-black);
  color:var(--cold-white);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

/* tabular figures everywhere — telemetry-grade number alignment */
body{ font-variant-numeric:tabular-nums; }

/* global film grain — unifies the "physical" terminal feel (brutalist signature).
   fixed + pointer-events:none so it never repaints on scroll. */
body::after{
  content:''; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.05;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
/* faint STATIC scanlines across the whole page for CRT cohesion (the moving sweep
   stays hero-only so it reads as a boot moment, not a constant distraction) */
body::before{
  content:''; position:fixed; inset:0; z-index:89; pointer-events:none; opacity:.25;
  background:repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,.12) 3px, transparent 3px);
}

/* keyboard focus + tactile press feedback */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--signal-red); outline-offset:3px;
}
.btn:active, .press-card:active, .facade:active, .vtab:active{ transform:translateY(1px); }

/* red text selection */
::selection{ background:var(--signal-red); color:#0A0A0A; }
::-moz-selection{ background:var(--signal-red); color:#0A0A0A; }

.section{ position:relative; }
.nowrap{ white-space:nowrap; }
em{ font-style:italic; color:var(--cold-white); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* wordmark glyph colours */
.plus{ color:var(--mid-grey); }
.ex{ color:var(--signal-red); }

/* shared label */
.label{
  display:inline-block;
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--signal-red); font-weight:600; margin-bottom:18px;
}

/* shared section heads */
.sec-head{ margin-bottom:36px; }
/* terminal-command section headers: > COMMAND_  (prompt + blinking cursor via pseudo-els
   so the scramble effect, which rewrites textContent, leaves them intact) */
.sec-cmd{
  font-size:clamp(26px,3.5vw,42px); font-weight:800; letter-spacing:-.03em; line-height:.95;
  text-wrap:balance; text-transform:uppercase;
}
.sec-cmd::before{ content:'> '; color:var(--signal-red); font-weight:400; }
.sec-cmd::after{ content:'_'; color:var(--signal-red); font-weight:400; animation:blink 1.1s steps(1) infinite; }

.section{ padding:96px 0; border-top:1px solid rgba(80,80,80,.18); }

/* ===================== SCANLINE / CRT OVERLAY ===================== */
.scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:3; opacity:.55;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, rgba(0,0,0,.28) 2px, rgba(0,0,0,0) 3px);
  mix-blend-mode:multiply;
}
/* a slow scan band sweeping down the hero — alive, on-concept, cheap */
.crt-sweep{
  position:absolute; left:0; right:0; top:0; height:160px; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(240,240,240,.05) 42%, rgba(204,17,0,.07) 54%, transparent 100%);
  animation:sweep 7.5s linear infinite;
}
@keyframes sweep{ 0%{ transform:translateY(-180px); } 100%{ transform:translateY(105vh); } }

/* =============================== NAV =============================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  background:rgba(10,10,10,0); backdrop-filter:blur(0px);
  transition:background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,10,10,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(80,80,80,.3);
}
.nav-mark{ font-size:16px; font-weight:800; letter-spacing:.06em; text-decoration:none; }
.nav-links{ display:flex; gap:26px; align-items:center; }
.nav-links a{
  font-size:12px; letter-spacing:.16em; text-decoration:none; color:var(--mid-grey);
  transition:color .2s var(--ease); position:relative;
}
.nav-links a:hover{ color:var(--cold-white); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--signal-red); transition:width .25s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{ color:var(--cold-white) !important; border:1px solid var(--signal-red); padding:6px 12px; }
.nav-cta:hover{ background:var(--signal-red); }
.nav-cta::after{ display:none; }
.nav-toggle{
  display:none; background:none; border:1px solid var(--dark-grey); color:var(--cold-white);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; padding:6px 10px; cursor:pointer;
}

/* =============================== HERO =============================== */
/* SPLIT HERO (desktop): content column left, portrait photo right.
   A 4:5 portrait can't full-bleed a 16:9 screen without an ugly crop, so it lives
   in its own column where it keeps its shape. Stacks to image-over-content <=860px. */
.hero{
  position:relative; min-height:100vh; min-height:100dvh;
  display:grid; grid-template-columns:1fr 1.1fr; overflow:hidden; background:var(--near-black);
}
.hero-media{ position:relative; grid-column:2; grid-row:1; overflow:hidden; min-height:100dvh; }
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 24%;
  animation:kenburns 18s var(--ease) forwards;
  filter:brightness(1.06) contrast(1.05) saturate(1.04);
}
/* CRT vignette + faint flicker on the photo */
.hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 78% 70% at 50% 38%, rgba(240,240,240,.07) 0%, transparent 42%),
    radial-gradient(ellipse 90% 90% at 50% 42%, transparent 48%, rgba(10,10,10,.6) 100%);
  animation:crtflicker 5.5s steps(1) infinite;
}
/* dissolve the photo's left edge into the content column (gradual, no hard seam) */
.hero-scrim{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg, var(--near-black) 0%, rgba(10,10,10,.92) 9%, rgba(10,10,10,.45) 28%, rgba(10,10,10,0) 56%);
}
.hero-inner{
  grid-column:1; grid-row:1; position:relative; z-index:4;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(40px,6vh,96px) clamp(28px,3vw,56px);
}
/* the content sits as a centred block within the left column, so on wide/ultrawide
   monitors it's balanced in its space rather than pinned to the far-left edge */
.hero-content{ width:100%; max-width:640px; }

.hero-eyebrow{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.eb-txt{ font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--signal-red); white-space:nowrap; }
.boot-bar{ flex:1; max-width:220px; height:6px; border:1px solid rgba(204,17,0,.6); padding:1px; }
.boot-fill{ display:block; height:100%; width:0; background:var(--signal-red); }

.hero-mark{ line-height:0; }
.hero-mark img{ width:min(640px,100%); height:auto; }
.hero-tag{
  font-size:clamp(16px,2.4vw,26px); font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  margin-top:20px;
}
.hero-tag .br{ color:var(--signal-red); }
.hero-desc{ font-size:clamp(13.5px,1.2vw,15.5px); color:var(--mid-grey); max-width:520px; margin-top:20px; line-height:1.7; }

.hero-ctas{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }

.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-decoration:none;
  padding:13px 22px; border:1px solid var(--signal-red); transition:all .2s var(--ease);
}
.btn-primary{ background:var(--signal-red); color:#0A0A0A; font-weight:700; }
.btn-primary:hover{ background:transparent; color:var(--signal-red); }
.btn-ghost{ background:var(--void-red); color:var(--cold-white); }
.btn-ghost:hover{ background:var(--signal-red); color:#0A0A0A; }


/* ========================= IDENTITY STRIP ========================= */
.strip{ background:var(--near-black); padding:48px 24px; }
/* brutalist hairline grid: parent fill bleeds through 1px gaps as razor dividing lines */
.strip-inner{
  position:relative; max-width:var(--maxw); margin:0 auto; counter-reset:stat;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--dark-grey); border:1px solid var(--dark-grey);
}
/* corner registration crosshairs — centred exactly on the panel's diagonal corners */
.strip-inner::before, .strip-inner::after{
  content:'+'; position:absolute; color:var(--signal-red); font-size:24px; line-height:1; font-weight:400;
}
.strip-inner::before{ top:0; left:0; transform:translate(-50%,-50%); }
.strip-inner::after{ bottom:0; right:0; transform:translate(50%,50%); }
.stat{
  position:relative; padding:22px 20px 24px; background:var(--near-black); border-top:2px solid var(--signal-red);
  transition:background .2s var(--ease);
}
.stat::before{
  content:'0'counter(stat); counter-increment:stat;
  position:absolute; top:14px; right:16px; font-size:10px; color:var(--dark-grey); letter-spacing:.1em;
  transition:color .2s var(--ease);
}
.stat:hover{ background:var(--void-red); }
.stat:hover::before{ color:var(--signal-red); }
.stat .k{ display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mid-grey); margin-bottom:10px; }
.stat .v{ font-size:15px; font-weight:700; line-height:1.4; }

/* =============================== LISTEN =============================== */
.listen-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:48px; }

/* click-to-play façades — uniform on-brand cards; real player loads on click */
.facade{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  height:128px; padding:20px 22px; cursor:pointer; text-align:left;
  background:var(--carbon); border:1px solid var(--dark-grey);
  transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  overflow:hidden;
}
.facade:hover{ transform:translateY(-3px); border-color:var(--signal-red); background:var(--void-red); }
.facade:focus-visible{ outline:2px solid var(--signal-red); outline-offset:2px; }
.facade .fc-corner{ position:absolute; top:18px; right:20px; font-size:10px; letter-spacing:.2em; color:var(--mid-grey); }
.facade .fc-ico{ font-size:26px; color:var(--signal-red); line-height:1; }
.facade .fc-name{ font-size:19px; font-weight:800; letter-spacing:.03em; }
.facade .fc-note{ font-size:11px; color:var(--mid-grey); letter-spacing:.04em; }
.player-loaded{ height:168px; }
.player-loaded iframe{ width:100%; height:100%; border:1px solid var(--dark-grey); display:block; }

.watch{ margin-bottom:48px; }
.video{ position:relative; width:100%; aspect-ratio:16/9; border:1px solid var(--dark-grey); background:#000; }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; }
.video-facade{
  position:absolute; inset:0; height:auto; padding:0; border:0; gap:0;
  align-items:center; justify-content:center;
  background-color:#000; background-repeat:no-repeat; background-size:cover; background-position:center 30%;
}
.video-facade{ transition:none; }
.video-facade::after{ content:''; position:absolute; inset:0; background:rgba(10,10,10,.42); }
.video-facade:hover{ transform:none; }
.video-facade .fc-ico.big{
  position:relative; z-index:1; font-size:30px; color:var(--cold-white);
  width:78px; height:78px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--signal-red); background:rgba(204,17,0,.3); padding-left:5px;
  transition:background .2s var(--ease);
}
.video-facade:hover .fc-ico.big{ background:var(--signal-red); color:#0A0A0A; }

.vtabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.vtab{
  font-family:var(--mono); text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:5px;
  background:var(--carbon); border:1px solid var(--dark-grey); color:var(--cold-white); padding:14px 16px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.vtab b{ font-size:13px; font-weight:700; letter-spacing:.04em; }
.vtab span{ font-size:10px; color:var(--mid-grey); letter-spacing:.04em; }
.vtab:hover{ border-color:var(--signal-red); }
.vtab.active{ border-color:var(--signal-red); border-top:2px solid var(--signal-red); background:var(--void-red); }

.releases .rel{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:14px 0; border-bottom:1px solid rgba(80,80,80,.35); text-decoration:none;
  transition:padding-left .2s var(--ease), background .2s var(--ease);
}
a.rel:hover{ padding-left:10px; background:linear-gradient(90deg, rgba(204,17,0,.08), transparent); }
.rel .t{ font-size:16px; font-weight:700; }
.rel .m{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mid-grey); white-space:nowrap; }
.rel .m .fc{ color:var(--signal-red); }
.also{ font-size:12px; color:var(--mid-grey); margin-top:16px; }
.also a{ color:var(--cold-white); text-decoration:none; border-bottom:1px solid var(--dark-grey); }
.also a:hover{ border-color:var(--signal-red); }

/* =============================== LIVE =============================== */
/* image bleeds full-width from the top (under the nav), blurred at the very top for
   legibility, dissolving to black — EPK page-2 treatment. Content sits on the dark
   lower band so the red labels read cleanly. */
.live{ position:relative; padding:0 0 96px; overflow:hidden; }
.live-img{ position:absolute; top:0; left:0; width:100%; height:600px; object-fit:cover; object-position:50% 50%; z-index:0; }
.live-fade{
  position:absolute; top:0; left:0; width:100%; height:600px; z-index:1;
  background:linear-gradient(180deg,
    rgba(10,10,10,.45) 0%, rgba(10,10,10,.12) 22%, rgba(10,10,10,.5) 52%, rgba(10,10,10,.9) 74%, var(--near-black) 90%);
}
.live-blur{
  position:absolute; top:0; left:0; width:100%; height:120px; z-index:1; pointer-events:none;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 32%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 32%,transparent 100%);
}
.live-content{ position:relative; z-index:2; padding-top:400px; }
.live-content .sec-head{ margin-bottom:30px; }
.live-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
/* the credits' hairline: was scoped to a non-existent .block, so it fell back to the UA
   <hr> (0 margin below → cramped). Balanced spacing above and below now. */
.cred .label{ margin-bottom:14px; }
.cred .hr-thin{ height:1px; background:var(--dark-grey); border:0; margin:0 0 16px; }
.credit{ font-size:18px; font-weight:700; line-height:1.5; }
.credit-sm{ font-size:15px; }
/* red separator drawn as a CSS circle, not the · glyph — renders identically regardless of
   font metrics/fallback (the raw glyph sat misaligned on some setups). The · text is hidden. */
.credit .dot{
  display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--signal-red);
  vertical-align:middle; margin:0 9px; position:relative; top:-2px; font-size:0; line-height:0;
}
.sub{ font-size:11px; color:var(--mid-grey); margin-top:8px; letter-spacing:.04em; }
.fest{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid rgba(80,80,80,.35); text-decoration:none; }
.fest .fn{ font-size:14px; font-weight:700; line-height:1.3; }
.fest .fy{ font-size:11px; color:var(--mid-grey); white-space:nowrap; }
a.fest:hover .fn{ color:var(--signal-red); }

/* credentials (the proof) — a compact pair above the shows list */
.cred-strip{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:52px; max-width:820px; }

/* chronological shows list */
.shows .label{ display:block; margin-bottom:20px; }
.show{
  display:grid; grid-template-columns:120px 1fr auto; gap:24px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid rgba(80,80,80,.35); text-decoration:none;
  transition:padding-left .2s var(--ease), background .2s var(--ease);
}
.show{ cursor:default; }
.show:hover{ padding-left:10px; background:linear-gradient(90deg, rgba(204,17,0,.10), transparent); }
.show:hover .sh-date{ color:var(--signal-red); }
.show:hover .sh-event{ color:var(--signal-red); }
.sh-date{ font-size:12px; letter-spacing:.05em; color:var(--mid-grey); white-space:nowrap; }
.sh-event{ font-size:16px; font-weight:700; line-height:1.4; transition:color .2s var(--ease); }
/* reads as a "label: value" pair, not a size glitch — closer in size, baseline-aligned, with a colon */
.sh-tag{ font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--mid-grey); margin-right:8px; vertical-align:baseline; }
.sh-tag::after{ content:':'; }
.sh-event .sh-sub{ font-size:12px; font-weight:400; color:var(--mid-grey); }
.sh-venue{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mid-grey); text-align:right; white-space:nowrap; }
.show.upcoming .sh-date{ color:var(--signal-red); font-weight:700; }
.show.upcoming .sh-date::before{ content:'▸ '; }

/* =============================== ABOUT =============================== */
.about-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; }
.about-copy .lead{ font-size:19px; font-weight:700; line-height:1.5; margin:20px 0 16px; }
.about-copy p{ color:#cfcfcf; margin-bottom:14px; }
.about-copy .dim{ color:var(--mid-grey); font-size:14px; }
.about-img{ width:100%; height:100%; object-fit:cover; border:1px solid var(--dark-grey); max-height:440px; }

/* =============================== PRESS =============================== */
.press-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.press-card{
  display:flex; flex-direction:column; gap:8px; padding:24px; text-decoration:none;
  background:var(--carbon); border:1px solid var(--dark-grey); transition:all .2s var(--ease);
}
.press-card:hover{ border-color:var(--signal-red); background:var(--void-red); transform:translateY(-3px); }
.pc-ico{ color:var(--signal-red); font-size:22px; line-height:1; }
.pc-t{ font-size:15px; font-weight:700; }
.pc-m{ font-size:11px; color:var(--mid-grey); letter-spacing:.04em; }

/* =============================== FOOTER =============================== */
/* bookings — the conversion moment, its own section (not a footer line) */
.book-sub{ font-size:14.5px; color:var(--mid-grey); max-width:520px; line-height:1.65; margin-bottom:32px; }
.book-sub .find{ color:var(--cold-white); }

/* booking form — terminal fields, hairline borders, red on focus */
.book-form{ max-width:680px; }
.bf-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.bf-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bf-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.bf-label{ font-size:11px; letter-spacing:.06em; color:var(--mid-grey); text-transform:uppercase; }
.bf-opt{ color:var(--dark-grey); text-transform:none; letter-spacing:0; }
.bf-field input,
.bf-field textarea{
  font-family:var(--mono); font-size:15px; color:var(--cold-white);
  background:var(--carbon); border:1px solid var(--dark-grey); padding:13px 14px;
  width:100%; transition:border-color .15s var(--ease), background .15s var(--ease); resize:vertical;
}
.bf-field input::placeholder,
.bf-field textarea::placeholder{ color:var(--dark-grey); }
.bf-field input:focus,
.bf-field textarea:focus{ outline:none; border-color:var(--signal-red); background:var(--void-red); }
.bf-foot{ display:flex; align-items:center; flex-wrap:wrap; gap:18px 24px; margin-top:8px; }
.bf-submit{
  font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.08em; cursor:pointer;
  color:var(--cold-white); background:transparent; border:1px solid var(--signal-red);
  padding:14px 30px; text-transform:uppercase; transition:all .18s var(--ease);
}
.bf-submit:hover:not(:disabled){ background:var(--signal-red); }
.bf-submit:disabled{ opacity:.5; cursor:not-allowed; }
.bf-status{ font-size:13px; color:var(--mid-grey); margin:0; }
.bf-status.ok{ color:var(--cyan); }
.bf-status.err{ color:var(--signal-red); }

.book-direct{ font-size:13px; color:var(--mid-grey); margin-top:28px; }
.book-email{ color:var(--signal-red); text-decoration:none; font-weight:600; word-break:break-word; }
.book-email:hover{ text-decoration:underline; }

.footer{ background:#060606; border-top:2px solid var(--signal-red); padding:64px 0 40px; }
/* horizontal strip — tidier than a vertical list now that bookings moved out */
.foot-social{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 30px; }
.foot-social .label{ width:100%; margin-bottom:16px; }
.foot-social a{
  display:inline-flex; align-items:baseline; gap:7px; font-size:14px; text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:3px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.foot-social a:hover{ color:var(--signal-red); border-color:var(--signal-red); }
.foot-social .h{ color:var(--mid-grey); font-size:11px; }
.foot-social a:hover .h{ color:var(--signal-red); }
.foot-sign{ display:flex; justify-content:space-between; align-items:flex-end; padding-top:28px; border-top:1px solid rgba(80,80,80,.3); }
.foot-sign .stmt{ font-size:clamp(16px,2.6vw,24px); font-weight:800; letter-spacing:.08em; }
.foot-sign .sig{ font-size:24px; font-weight:800; color:var(--mid-grey); }

/* animated glassy wordmark — sole footer sign-off, on solid black (alpha shows cleanly on desktop).
   On mobile the footer goes TRUE black (#000) so iOS Safari's opaque WebM frame (it ignores
   alpha → black box) blends into the background while the loop keeps playing. */
.foot-logo{ margin-top:48px; padding-top:48px; border-top:1px solid rgba(80,80,80,.3); display:flex; justify-content:center; }
.foot-logo-loop{ display:block; width:min(820px,94%); aspect-ratio:6 / 1; object-fit:cover; object-position:center; }
.foot-logo-loop img{ width:100%; height:auto; }

/* =============================== REVEAL =============================== */
[data-reveal]{ opacity:0; transform:translateY(24px); filter:blur(8px); }
[data-reveal].in{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}

/* =============================== ANIMATIONS =============================== */
@keyframes kenburns{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
@keyframes crtflicker{ 0%,97%{ opacity:1; } 98%{ opacity:.86; } 99%{ opacity:.95; } 100%{ opacity:1; } }

/* =============================== RESPONSIVE =============================== */
@media (max-width:860px){
  .nav-links{
    position:fixed; top:57px; right:0; left:0; flex-direction:column; gap:0; align-items:stretch;
    background:rgba(10,10,10,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--dark-grey);
    max-height:0; overflow:hidden; transition:max-height .3s var(--ease);
  }
  .nav-links.open{ max-height:340px; }
  .nav-links a{ padding:16px 24px; border-bottom:1px solid rgba(80,80,80,.2); font-size:13px; }
  .nav-cta{ border:none !important; border-bottom:1px solid rgba(80,80,80,.2) !important; }
  .nav-toggle{ display:block; }
  /* always-on nav background on mobile so the menu button reads cleanly over the busy hero */
  .nav{ background:rgba(10,10,10,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(80,80,80,.3); }

  .strip-inner{ grid-template-columns:1fr 1fr; }
  .listen-grid{ grid-template-columns:1fr; }
  .vtabs{ grid-template-columns:1fr; }
  .cred-strip{ grid-template-columns:1fr; gap:28px; }
  .show{ grid-template-columns:1fr; gap:5px; padding:14px 0; }
  .sh-venue{ text-align:left; }
  .live-grid{ grid-template-columns:1fr; gap:28px; }
  .about-grid{ grid-template-columns:1fr; gap:28px; }
  .about-img{ max-height:360px; order:-1; }
  .press-grid{ grid-template-columns:1fr 1fr; }
  .foot-top{ grid-template-columns:1fr; gap:40px; }
  .bf-row{ grid-template-columns:1fr; gap:0; }
  /* iOS WebM-alpha fix: true-black footer so the opaque video frame blends in, loop still plays */
  .footer{ background:#000; }
  .section{ padding:72px 0; }
}
/* STACKED HERO (tablet + mobile): the 4:5 photo becomes an image band on top,
   content sits below it. Matches the nav/section collapse at 860px. */
@media (max-width:860px){
  /* margin-top drops the band below the fixed nav so the duo's heads clear the menu bar */
  .hero{ display:block; min-height:0; margin-top:50px; }
  .hero-media{ width:100%; aspect-ratio:4/5; min-height:0; }
  .hero-img{ object-position:50% 18%; animation:none; }
  /* fade the band to black at its base; content overlaps up into the fade */
  .hero-scrim{ background:linear-gradient(0deg, var(--near-black) 0%, rgba(10,10,10,.9) 7%, rgba(10,10,10,.25) 22%, transparent 40%); }
  .hero-inner{ display:block; margin-top:-56px; padding:0 22px 44px; }
  .hero-mark img{ width:100%; }
  .mark-loop{ width:min(440px,96vw); }
  .live-img,.live-fade{ height:420px; }
  .live-content{ padding-top:270px; }
}
@media (max-width:480px){
  .press-grid{ grid-template-columns:1fr; }
  .hero-inner{ margin-top:-46px; }
}

/* =============================== REDUCED MOTION =============================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero-img{ animation:none; }
  .hero-vignette{ animation:none; }
  .crt-sweep{ display:none; }
  .sec-cmd::after{ animation:none; }
  [data-reveal]{ opacity:1; transform:none; filter:none; }
  *{ transition:none !important; }
}