/* BFREEKY — Y2K / early-web look. Black, hard edges, red accents, chunky type. No gradients. */

:root{
  --bg:#000;
  --ink:#fff;
  --dim:#8d8d8d;
  --dim2:#5a5a5a;
  --line:#262626;
  --line2:#3d3d3d;
  --red:#ff2b2b;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --pad:clamp(16px,4vw,40px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font:400 14px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* tiled grid, faint, with a hard step glitch every few seconds */
body::before{
  content:"";position:fixed;inset:-8% -3%;z-index:-1;pointer-events:none;
  background:url("tile.png") top center/240px auto repeat;
  opacity:.40;
  animation:grid-glitch 13s steps(1,end) infinite;
}
/* red ghost of the same grid, flashes for a few frames now and then */
body::after{
  content:"";position:fixed;inset:-8% -3%;z-index:-1;pointer-events:none;
  background:url("tile-red.png") top center/240px auto repeat;
  opacity:0;
  animation:grid-tear 19s steps(1,end) infinite;
}
@keyframes grid-glitch{
  0%,90%{background-position:0 0;transform:translate(0,0)}
  91%{background-position:-19px 0;transform:translate(3px,0)}
  92%{background-position:11px -3px;transform:translate(-2px,0)}
  93%{background-position:-4px 2px;transform:translate(1px,0)}
  94%{background-position:26px 0;transform:translate(-4px,1px)}
  95%,100%{background-position:0 0;transform:translate(0,0)}
}
@keyframes grid-tear{
  0%,87%{opacity:0;background-position:0 0;transform:translateX(0)}
  88%{opacity:.55;background-position:14px 0;transform:translateX(7px)}
  89%{opacity:.28;background-position:-11px 3px;transform:translateX(-5px)}
  90%{opacity:0;background-position:0 0;transform:translateX(0)}
  91%{opacity:.4;background-position:22px -2px;transform:translateX(4px)}
  92%,100%{opacity:0;background-position:0 0;transform:translateX(0)}
}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
::selection{background:var(--red);color:#000}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ── hero ────────────────────────────────────────────────── */
main{max-width:960px;margin:0 auto;padding:0 var(--pad)}

.hero{display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(34px,7vw,64px) 0 22px;text-align:center}
.logo{position:relative;width:min(100%,560px);line-height:0}
.logo img{width:100%;height:auto;display:block;mix-blend-mode:screen}
.logo__ghost{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;pointer-events:none}
.logo__ghost.g1{filter:brightness(.4) sepia(1) saturate(24) hue-rotate(0deg)}
.logo__ghost.g2{filter:brightness(.4) sepia(1) saturate(24) hue-rotate(180deg)}
.logo:hover .logo__ghost.g1{opacity:.9;animation:gl1 .4s steps(2,end) 1}
.logo:hover .logo__ghost.g2{opacity:.7;animation:gl2 .4s steps(2,end) 1}
@keyframes gl1{0%{transform:translate(0,0)}25%{transform:translate(-6px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,0)}100%{transform:translate(0,0)}}
@keyframes gl2{0%{transform:translate(0,0)}25%{transform:translate(5px,-1px)}50%{transform:translate(-4px,2px)}75%{transform:translate(3px,0)}100%{transform:translate(0,0)}}

.hero__meta{font:400 11px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#6b6b6b}

/* the double rule: white bar, red bar offset under it */
.rule{position:relative;height:2px;background:var(--ink);margin:4px 0 0}
.rule::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:#3d3d3d}

/* ── link nav (the main event) ───────────────────────────── */
.nav{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:34px 0 46px}
.nl{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:30px 10px;border:2px solid var(--line2);margin-left:-2px;
  font:700 clamp(15px,1.9vw,20px)/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  text-align:center;transition:color .05s linear,border-color .05s linear,background-color .05s linear;
}
.nl:first-child{margin-left:0}
.nl .ic{width:1.45em;height:1.45em;flex:none;color:var(--red)}
.nl:hover,.nl:focus-visible{background:var(--ink);color:#000;border-color:var(--ink)}
.nl:hover .ic,.nl:focus-visible .ic{color:#000}
.nl span{border-bottom:2px solid transparent}
.nl:hover span,.nl:focus-visible span{border-bottom-color:#000}

/* ── section heading ─────────────────────────────────────── */
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:14px}
.shead h2{
  font:700 clamp(18px,2.4vw,24px)/1 var(--sans);text-transform:uppercase;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--red);
  text-decoration-thickness:2px;text-underline-offset:6px;
}
.shead__m{font:400 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim2)}
.block{margin-bottom:clamp(28px,5vw,50px)}

/* ── release list ────────────────────────────────────────── */
.split{display:grid;gap:clamp(28px,5vw,50px);grid-template-columns:1fr}
@media (min-width:900px){.split{grid-template-columns:1.25fr .75fr;align-items:start}
  .deck{position:sticky;top:20px}}

.tracks{border-top:2px solid var(--ink)}
.track{
  display:grid;grid-template-columns:30px 40px 1fr 14px;align-items:center;gap:14px;
  padding:11px 10px 11px 8px;border-bottom:1px solid var(--line);
  transition:background-color .05s linear,color .05s linear;
}
.track__i{font:400 11px/1 var(--mono);color:var(--dim2)}
.track__thumb{width:40px;height:40px;background:#111 center/cover no-repeat;border:1px solid var(--line2)}
.track__thumb--ph{background:#0b0b0b url("favicon.png") center/20px 20px no-repeat;opacity:.7}
.track__body{min-width:0;display:flex;flex-direction:column;gap:4px}
.track__title{font:700 15px/1.2 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track__meta{font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track__cue{width:10px;height:10px;background:var(--line2)}
.track:hover,.track:focus-visible{background:#151515}
.track:hover .track__meta,.track:hover .track__i{color:var(--dim)}
.track:hover .track__thumb{border-color:var(--dim)}
.track:hover .track__cue{background:var(--ink)}
.track.is-live{background:#151515}
.track.is-live .track__cue{background:var(--red)}

/* ── player deck (own UI; the SoundCloud widget runs invisibly underneath) ───── */
.deck{border:2px solid var(--ink);background:#060606;box-shadow:6px 6px 0 #2b2b2b}
.deck__screen{display:flex;flex-direction:column;gap:8px;min-height:76px;padding:14px 15px;border-bottom:2px solid var(--ink)}
.deck__row1{display:flex;align-items:baseline;gap:10px;min-width:0}
.deck__idx{flex:none;font:400 10px/1 var(--mono);color:var(--dim2)}
.deck__title{font:700 17px/1.15 var(--sans);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck__row2{font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.deck__seek{position:relative;height:18px;cursor:crosshair;background:#0d0d0d;border-bottom:1px solid var(--line)}
.deck__seek::before{content:"";position:absolute;left:0;right:0;top:6px;height:6px;background:#2b2b2b}
.deck__fill{position:absolute;left:0;top:6px;height:6px;width:0;background:var(--ink)}
.deck__knob{position:absolute;left:0;top:2px;width:3px;height:14px;background:var(--ink)}

.deck__times{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 15px;
  font:400 11px/1 var(--mono);letter-spacing:.1em;color:var(--dim);font-variant-numeric:tabular-nums}
.deck__meter{display:flex;align-items:flex-end;gap:3px;height:15px;opacity:.25;transition:opacity .15s linear}
.deck.is-playing .deck__meter{opacity:1}
.deck__meter i{display:block;width:3px;height:4px;background:var(--ink)}
.deck.is-playing .deck__meter i{animation:lvl .5s ease-in-out infinite alternate}
.deck__meter i:nth-child(2){animation-delay:.06s}
.deck__meter i:nth-child(3){animation-delay:.12s}
.deck__meter i:nth-child(4){animation-delay:.18s}
.deck__meter i:nth-child(5){animation-delay:.24s}
.deck__meter i:nth-child(6){animation-delay:.3s}
@keyframes lvl{from{height:3px}to{height:15px}}

.deck__ctl{display:grid;grid-template-columns:repeat(3,1fr) auto;border-top:1px solid var(--line)}
.btn{
  appearance:none;background:transparent;border:0;border-right:2px solid var(--ink);
  color:var(--ink);font:700 13px/1 var(--sans);letter-spacing:.1em;padding:15px 10px;cursor:pointer;
  transition:background-color .05s linear,color .05s linear;
}
.btn:hover,.btn:focus-visible{background:var(--ink);color:#000}
.btn--play{font-size:15px}
.btn--link{display:flex;align-items:center;justify-content:center;border-right:0;border-left:2px solid var(--ink);
  font:700 10px/1 var(--sans);letter-spacing:.12em;padding:15px 14px}
.deck__sink{position:relative;height:1px;overflow:hidden;opacity:.01}
.deck__sink iframe{display:block;width:320px;height:180px;border:0}
.deck__hint{margin-top:16px;font:400 10px/1.9 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim2)}
.deck__hint--fallback{color:var(--dim)}
.deck__hint a{color:var(--ink);border-bottom:2px solid #4a4a4a}
.deck__hint a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ── footer ──────────────────────────────────────────────── */
.foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:960px;margin:0 auto;
  padding:26px var(--pad) 40px;font:400 10px/1.6 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim2);
}
.foot__r{display:flex;gap:20px}
.foot a{border-bottom:2px solid #4a4a4a}
.foot a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ── small screens ───────────────────────────────────────── */
@media (max-width:720px){
  .nav{grid-template-columns:1fr 1fr}
  .nl{padding:20px 8px;font-size:13px;gap:9px}
  .nl:nth-child(2n+1){margin-left:0}
  .track{grid-template-columns:24px 34px 1fr;gap:11px;padding:10px 4px}
  .track__thumb{width:34px;height:34px}
  .track__cue{display:none}
  .btn--link{padding:15px 10px;font-size:9px}
  .shead{flex-direction:column;gap:6px;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none}
  body::after{display:none}
  .logo:hover .logo__ghost{animation:none;opacity:.5}
  .deck.is-playing .deck__meter i{animation:none;height:9px}
}