:root{
  --bg:#0a0a0b; --panel:#131315; --line:#232327; --txt:#f2f1ee; --mut:#8c8b88;
  --acc:#9ad0f5;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:Inter,system-ui,sans-serif;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

.top{transition:background .25s;position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:20px clamp(20px,5vw,64px);background:linear-gradient(#0a0a0bee,#0a0a0b00)}
.top.scrolled{background:#000}
.brand{font:700 15px "Space Grotesk",sans-serif;letter-spacing:.18em}
.brand span{font-weight:300;color:var(--mut);font-size:.8em;letter-spacing:.1em}
.top nav{display:flex;gap:28px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.top nav a:hover{color:var(--txt)}

.hero{position:relative;isolation:isolate;overflow:hidden;min-height:88vh;display:flex;flex-direction:column;justify-content:center;
  padding:140px clamp(20px,5vw,64px) 80px}
.hero::before{content:"";position:absolute;inset:-12% 0 -4%;z-index:-2;background:url(assets/hero.jpg) 70% center/cover no-repeat;
  transform:translate3d(0,var(--py,0px),0) scale(1.06);will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(55% 60% at 78% 38%,#9ad0f524 0%,transparent 70%),
  radial-gradient(120% 90% at 50% 45%,transparent 45%,#0a0a0bcc 100%),
  linear-gradient(90deg,#0a0a0bf2 0%,#0a0a0bb8 38%,#0a0a0b40 75%,#0a0a0b66 100%),
  linear-gradient(180deg,#0a0a0b99 0%,#0a0a0b00 25%,#0a0a0b00 65%,#0a0a0b 100%)}
@media(max-width:700px){.hero::before{background-position:78% center}}
.eyebrow{font-size:13.8px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-top:26px}
h1{font:700 clamp(32px,5.4vw,76px)/1.02 "Space Grotesk",sans-serif;letter-spacing:-.03em}
.cta{margin-top:40px;align-self:flex-start;border:1px solid var(--txt);padding:13px 26px;border-radius:99px;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;transition:.2s}
.cta:hover{background:var(--txt);color:var(--bg)}

main,.about{padding:40px clamp(20px,5vw,64px)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:32px}
h2{font:500 13px "Space Grotesk",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
#count{font-size:12px;color:var(--mut)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:36px 28px}
.card{display:flex;flex-direction:column;gap:14px}
.cover{position:relative;aspect-ratio:1;overflow:hidden;background:var(--panel);border-radius:4px}
.cover .open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.cover img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s,transform .5s,filter .35s}
.cover:hover img,.cover:focus-within img,.card.open .cover img{opacity:.22;transform:none;filter:blur(1px)}
.tracks{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;
  opacity:0;visibility:hidden;transition:opacity .3s;pointer-events:none}
.cover:hover .tracks,.cover:focus-within .tracks,.card.open .tracks{opacity:1;visibility:visible;pointer-events:auto}
.tracks ul{list-style:none;width:100%;max-height:100%;overflow:auto}
.tracks li+li .trk{border-top:1px solid #ffffff24}
.trk{display:flex;align-items:center;gap:14px;width:100%;padding:13px 6px;border:0;border-radius:0;
  background:none;color:var(--txt);font:400 14px/1.3 Inter,sans-serif;text-align:left;cursor:pointer;transition:color .2s}
.trk .ico{flex:0 0 14px;display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .2s}
.trk:hover .ico,.trk:focus-visible .ico{opacity:1}
.trk:focus-visible{outline:1px solid var(--acc);outline-offset:2px}
.trk.on .ico{opacity:1;color:var(--acc)}
.trk.on .nm{color:var(--acc)}
.meta h3{font:500 17px/1.25 "Space Grotesk",sans-serif}
.meta p{font-size:13px;color:var(--mut);margin-top:2px}
.buy{align-self:flex-start;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--acc);padding-bottom:2px;color:var(--txt);transition:.2s}
.buy:hover{color:var(--acc)}

.about{max-width:820px;margin-top:40px}
.about p{font-size:clamp(15px,1.5vw,18px);line-height:1.6;margin-top:18px}

footer{padding:60px clamp(20px,5vw,64px) 120px;border-top:1px solid var(--line);margin-top:60px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px;color:var(--mut);font-size:13px}
.links{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.links a{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--mut);transition:color .2s}
.links .ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;transition:border-color .2s}
.links .lb{font-size:12px;letter-spacing:.08em}
.links a:hover,.links a:focus-visible{color:var(--txt)}
.links a:hover .ic,.links a:focus-visible .ic{border-color:var(--mut)}

.player{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;width:min(640px,calc(100% - 24px));
  display:flex;align-items:center;gap:14px;padding:10px 14px;background:#131315f2;backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:14px}
.player img{width:44px;height:44px;border-radius:6px;object-fit:cover}
.pinfo{display:flex;flex-direction:column;min-width:0;flex:0 1 180px}
.pinfo strong{font:500 14px "Space Grotesk",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinfo span{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player button{background:none;border:0;color:var(--txt);cursor:pointer;font-size:16px;padding:6px}
#pToggle{width:38px;height:38px;border-radius:50%;background:var(--txt);color:var(--bg);padding:0;display:flex;align-items:center;justify-content:center}
#pSeek{flex:1;accent-color:var(--acc);min-width:60px}
@media(max-width:560px){.top nav{gap:16px}.pinfo{flex-basis:90px}}

.top nav a.cur{color:var(--txt)}
.lives{padding:130px clamp(20px,5vw,64px) 40px;min-height:70vh}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:44px 28px}
.live h3{font:500 17px/1.25 "Space Grotesk",sans-serif;margin-top:14px}
.live p{font-size:13px;color:var(--mut);margin-top:2px}
.frame{position:relative;aspect-ratio:16/9;background:var(--panel);border-radius:4px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.soon{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
[hidden]{display:none!important}

.cover.noimg::before{content:attr(data-title);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;
  font:500 15px/1.3 "Space Grotesk",sans-serif;color:var(--mut)}
.trk.stat{cursor:default;padding:11px 6px;font-size:13px;color:var(--txt)}
.tracks li.pl{display:flex;justify-content:center;padding-top:14px}
.playbc{display:inline-flex;align-items:center;gap:10px;background:none;color:var(--txt);border:1px solid var(--txt);border-radius:99px;padding:9px 20px;
  font:400 12px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.2s}
.playbc:hover,.playbc:focus-visible{background:var(--txt);color:var(--bg)}
.bcslot:empty{display:none}
.bcslot iframe{display:block;width:100%;height:42px;border:0;border-radius:4px;background:var(--panel)}
.card{gap:12px}
.cover.noimg:hover::before,.cover.noimg:focus-within::before,.card.open .cover.noimg::before{opacity:0}

.card.flash .cover{outline:1px solid var(--acc);outline-offset:5px}
.cover{outline:1px solid transparent;transition:outline-color .4s}

.flow{position:relative;padding:40px 0 8px;overflow:hidden}
.flow-stage{position:relative;height:clamp(220px,34vw,380px);perspective:1100px;touch-action:pan-y}
.fl-item{position:absolute;left:50%;top:50%;width:clamp(150px,24vw,300px);aspect-ratio:1;border-radius:4px;overflow:hidden;background:var(--panel);
  transition:transform .7s cubic-bezier(.22,.8,.25,1),opacity .5s;box-shadow:0 24px 60px #000a;outline:1px solid transparent}
.fl-item.on{outline-color:var(--acc);cursor:pointer}
.fl-item img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.fl-item:focus-visible{outline:1px solid var(--acc);outline-offset:3px}
.fl-item.noimg::before{content:attr(data-title);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;font:500 14px/1.3 "Space Grotesk",sans-serif;color:var(--mut)}
.fl-btn{position:absolute;top:calc(40px + clamp(220px,34vw,380px)/2);transform:translateY(-50%);z-index:200;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:#0a0a0bcc;color:var(--txt);font:300 24px/1 Inter,sans-serif;cursor:pointer;transition:border-color .2s,color .2s}
.fl-btn:hover,.fl-btn:focus-visible{border-color:var(--mut)}
.fl-btn.prev{left:clamp(12px,3vw,40px)}.fl-btn.next{right:clamp(12px,3vw,40px)}
.fl-cap{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:22px;text-align:center;min-height:48px}
.fl-cap strong{font:500 17px/1.25 "Space Grotesk",sans-serif}
.fl-cap span{font-size:13px;color:var(--mut)}

body::after{content:"";position:fixed;inset:0;z-index:15;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.flow{background:radial-gradient(60% 70% at 50% 45%,#9ad0f50f,transparent 70%)}
.fl-amb{position:absolute;inset:0 0 70px;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent)}
.fl-amb i{position:absolute;inset:-20%;background-size:cover;background-position:center;filter:blur(70px) saturate(1.5);opacity:0;transition:opacity 1.2s}
.fl-amb i.on{opacity:.38}
.flow-stage,.fl-cap{position:relative;z-index:1}
.fl-item{box-shadow:0 30px 70px -10px #000c}
.fl-item.on{box-shadow:0 0 90px #9ad0f540,0 30px 70px -10px #000}
.flow-stage::after{content:"";position:absolute;left:50%;bottom:-6px;width:min(70%,640px);height:36px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,#000c,transparent 70%);z-index:-1}
.cover{box-shadow:0 22px 44px -22px #000;transition:outline-color .4s,box-shadow .4s}
.card:hover .cover{box-shadow:0 30px 56px -20px #000,0 0 0 1px #ffffff14}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s cubic-bezier(.22,.8,.25,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero::before{transform:scale(1.06)}}

.grid .card,.lgrid .live{width:85%}