/* ──────────────────────────────────────────────────────────────────────────
   SPLITTAH v2

   Same palette and faces as v1. What's gone: the numbered section markers,
   the invented BPM/KEY/TIME readout, the ON AIR light, the scanlines, the
   L-bracket corners, the mono stamps on every surface, and the footer that
   announced the page was "HTML · 3 pages".

   What's left is an asymmetric editorial grid — labels in a narrow left
   column against a hairline, content in the wide one — and exactly two loud
   things: the name, and the waveform under it. Everything else stays quiet.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --paper:      #FFFFFF;
  --paper-2:    #F4F5F7;
  --ink:        #15171C;
  --ink-2:      #565C66;
  --ink-3:      #969CA6;
  --black:      #14161B;

  --red:        #E5202A;
  --red-deep:   #A8121A;
  --blue:       #2E6FD0;
  --amber:      #C77C10;

  --hair:       rgba(20,22,28,.13);
  --hair-2:     rgba(20,22,28,.22);
  --hair-dark:  rgba(233,241,236,.16);

  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  --label-w: 128px;
  --gap: clamp(26px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--paper); -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:74px; }

body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{ color:var(--red); text-decoration:none;
   border-bottom:1px solid rgba(229,32,42,.3);
   transition:color .13s ease, border-color .13s ease; }
a:hover{ color:var(--red-deep); border-color:var(--red); }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

::selection{ background:var(--red); color:#fff; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }

.skip{ position:fixed; left:-999px; top:8px; z-index:200;
  background:var(--red); color:#fff; padding:9px 14px;
  font-family:var(--mono); font-size:12px; border:0; }
.skip:focus{ left:8px; }

.dot{ color:var(--ink-3); padding-inline:.35em; }

/* ── ticker ─────────────────────────────────────────────────────────────── */

.ticker{ overflow:hidden; background:var(--red); color:#fff; }
.ticker__track{
  display:flex; width:max-content; padding-block:5px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  animation:slide 40s linear infinite;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── sticky bar ─────────────────────────────────────────────────────────── */

.bar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.bar__row{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:56px; }
.wordmark{
  font-family:var(--display); font-weight:900; font-size:17px;
  letter-spacing:-.03em; color:var(--ink); border:0;
}
.wordmark:hover{ color:var(--red); }
.bar__nav{ display:flex; align-items:center; gap:clamp(12px,2.2vw,24px); }
.bar__nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); border:0;
}
.bar__nav a:hover{ color:var(--red); }
.bar__out{ color:var(--ink-3) !important; }
.bar__out:hover{ color:var(--red) !important; }
@media (max-width:760px){
  .bar__nav a:not(.bar__out){ display:none; }
  .bar__nav a.bar__out{ display:inline; }
}

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

.hero{ padding-top:clamp(40px,8vw,96px); }

.hero__name{
  font-family:var(--display); font-weight:900;
  font-size:clamp(72px,17vw,220px);
  line-height:.82; letter-spacing:-.055em;
  margin:0 0 clamp(18px,3vw,30px);
}

.hero__meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px clamp(16px,3vw,32px);
  padding-bottom:14px; border-bottom:1px solid var(--hair);
  margin-bottom:clamp(18px,3vw,26px);
}
.hero__where{
  margin:0; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.hero__line{
  margin:0; font-family:var(--display); font-weight:800;
  font-size:clamp(17px,2.4vw,24px); letter-spacing:-.02em; color:var(--red);
}
.hero__blurb{
  margin:0 0 clamp(30px,5vw,54px);
  max-width:56ch; font-size:clamp(17px,1.9vw,20px); color:var(--ink-2);
}

/* the one piece of colour on the page — full bleed, edge to edge */
.waveform{ display:block; width:100%; height:clamp(76px,11vw,124px); }
.waveform__head{ fill:var(--red); }

/* ── the grid: label column, content column ─────────────────────────────── */

.row{ border-top:1px solid var(--hair); }
.row:first-of-type{ border-top:0; }

.row__grid{
  display:grid;
  grid-template-columns:var(--label-w) minmax(0,1fr);
  gap:0 var(--gap);
  padding-block:clamp(38px,6vw,84px);
}

.row__label span{
  position:sticky; top:82px; display:block;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}

.row__body{ min-width:0; }
.row__body--narrow{ max-width:640px; }
.row__body--prose{ max-width:64ch; }
.row__body--prose p{ margin:0 0 1.15em; }
.row__body--prose p:last-child{ margin-bottom:0; }

@media (max-width:720px){
  .row__grid{ grid-template-columns:1fr; gap:14px; }
  .row__label span{ position:static; }
}

/* ── mixes ──────────────────────────────────────────────────────────────── */

.mix__title{
  font-family:var(--display); font-weight:900;
  font-size:clamp(30px,5vw,52px); line-height:1; letter-spacing:-.04em;
  margin:0;
}
.mix__title--sm{ font-size:clamp(20px,2.6vw,26px); letter-spacing:-.03em; }
.mix__by{
  margin:8px 0 16px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.mix--lead .mix__by{ margin-bottom:20px; }

.player{ display:block; width:100%; height:166px; border:0; }
.player--tall{ height:clamp(320px,42vw,420px); }

.mix__pair{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,40px);
  margin-top:clamp(34px,5vw,60px);
  padding-top:clamp(30px,4vw,48px);
  border-top:1px solid var(--hair);
}
@media (max-width:720px){
  .mix__pair{ grid-template-columns:1fr; }
}

.more{ margin:clamp(26px,4vw,40px) 0 0; font-size:15px; }
.more a{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

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

.bit{ font-family:var(--body); }

/* ── close: bookings + mailing list, on black ───────────────────────────── */

.close{
  background:var(--black); color:#E9F1EC;
  margin-top:clamp(30px,5vw,60px);
}
.close__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,72px);
  padding-block:clamp(48px,7vw,96px);
}
@media (max-width:800px){
  .close__grid{ grid-template-columns:1fr; gap:44px; }
}

.close__h{
  font-family:var(--display); font-weight:900;
  font-size:clamp(26px,3.6vw,38px); letter-spacing:-.035em;
  margin:0 0 12px;
}
.close__col p{ margin:0 0 20px; color:rgba(233,241,236,.6); max-width:44ch; }

.close__mail{
  display:inline-block;
  font-family:var(--display); font-weight:800;
  font-size:clamp(19px,2.8vw,30px); letter-spacing:-.025em;
  color:#fff; border-bottom:2px solid var(--red);
  word-break:break-word;
}
.close__mail:hover{ color:var(--red); border-color:#fff; }

.close__socials{ margin:26px 0 0 !important; }
.close__socials a{
  color:#E9F1EC; border-bottom-color:rgba(233,241,236,.3);
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.close__socials a:hover{ color:var(--red); border-color:var(--red); }
.close__socials .dot{ color:rgba(233,241,236,.35); }

.close__foot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:18px; border-top:1px solid var(--hair-dark);
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(233,241,236,.35);
}

/* ── reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .ticker__track{ animation:none; }
}