:root{
  --bg:#0b0b0d; --panel:#141417; --line:#26262b; --text:#e8e6e3; --muted:#8d8b88; --accent:#c8321e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit}
.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:rgba(11,11,13,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.nav nav a{margin-left:20px;text-decoration:none;color:var(--muted)}
.nav nav a:hover{color:var(--text)}
section{max-width:1100px;margin:0 auto;padding:56px 24px}
.hero{position:relative;isolation:isolate;overflow:hidden;max-width:none;min-height:min(80vh,680px);display:flex;flex-direction:column;justify-content:center;padding:120px max(24px,calc((100vw - 1100px)/2 + 24px))}
.hero::before{content:"";position:absolute;z-index:-1;top:-140px;bottom:0;right:100px;width:min(100%,72vw);transform:translate3d(0,var(--py,0),0);will-change:transform;background:url("images/BigHeader.jpg") 57% 100%/auto calc(100% - 140px) no-repeat}
.hero::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,13,0) 70%,var(--bg) 100%),linear-gradient(90deg,var(--bg) 0,var(--bg) calc(28vw - 100px),rgba(11,11,13,0) calc(49.6vw - 100px),rgba(11,11,13,0) calc(64vw - 100px),var(--bg) calc(92.8vw - 100px),var(--bg) 100%)}
.hero>*{max-width:600px}
.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.2em;font-size:.8rem;margin:0 0 16px}
h1{font-size:clamp(2.2rem,6vw,4.5rem);line-height:1.1;margin:0 0 24px}
h2{font-size:1.8rem;margin:0 0 8px}
h2::before{content:"";display:block;width:36px;height:3px;background:var(--accent);margin-bottom:14px}
.lead{color:#c9c6c2;font-size:1.15rem}
.sub{color:var(--muted);margin:0 0 32px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-block;padding:11px 22px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;border:1px solid var(--accent);border-radius:4px;transition:.15s}
.btn:hover{filter:brightness(1.15)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--accent)}
.hero .btn{position:relative;isolation:isolate;backface-visibility:hidden;transform:translateZ(0);overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 45%,rgba(0,0,0,.25) 100%),rgba(12,12,16,.45);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:11px 26px;color:#fff;box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -1px 1px rgba(255,255,255,.08),inset 0 0 14px rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.45);transition:transform .2s,box-shadow .2s,background-color .2s,border-color .2s}
.hero .btn::before{content:"";position:absolute;z-index:-1;left:8%;right:8%;top:1px;height:45%;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none}
.hero .btn:hover{transform:translateY(-2px) scale(1.03);border-color:rgba(255,255,255,.35);background-color:rgba(12,12,16,.35);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 0 18px rgba(255,255,255,.1),0 12px 30px rgba(0,0,0,.55)}
.hero .btn:active{transform:scale(.98)}
.hero .btn:not(.ghost){background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 45%,rgba(0,0,0,.2) 100%),rgba(200,50,30,.55);border-color:rgba(255,140,120,.4);box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -1px 1px rgba(255,255,255,.1),inset 0 0 14px rgba(255,150,130,.12),0 8px 24px rgba(200,50,30,.35)}
.hero .btn:not(.ghost):hover{background-color:rgba(200,50,30,.45);border-color:rgba(255,160,140,.6);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 0 18px rgba(255,150,130,.2),0 12px 32px rgba(200,50,30,.5)}
.glitch{position:relative;display:inline-block;color:var(--accent);animation:gshake 4s infinite steps(1)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.glitch::before{color:#0ff;text-shadow:-2px 0 #0ff;animation:gslice1 3.2s infinite steps(1)}
.glitch::after{color:#f0f;text-shadow:2px 0 #f0f;animation:gslice2 2.7s infinite steps(1)}
@keyframes gslice1{
  0%,78%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}
  79%{clip-path:inset(10% 0 62% 0);transform:translate(-5px,0)}
  81%{clip-path:inset(54% 0 18% 0);transform:translate(4px,0)}
  83%{clip-path:inset(30% 0 40% 0);transform:translate(-7px,0)}
  85%{clip-path:inset(78% 0 4% 0);transform:translate(3px,0)}
  87%{clip-path:inset(0 0 100% 0)}
  93%{clip-path:inset(40% 0 45% 0);transform:translate(-4px,0)}
  94%{clip-path:inset(0 0 100% 0)}
}
@keyframes gslice2{
  0%,70%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}
  71%{clip-path:inset(60% 0 12% 0);transform:translate(6px,0)}
  73%{clip-path:inset(8% 0 70% 0);transform:translate(-3px,0)}
  75%{clip-path:inset(35% 0 38% 0);transform:translate(7px,0)}
  77%{clip-path:inset(0 0 100% 0)}
  90%{clip-path:inset(20% 0 55% 0);transform:translate(5px,0)}
  91.5%{clip-path:inset(0 0 100% 0)}
}
@keyframes gshake{
  0%,78%,82%,86%,100%{transform:none;filter:none}
  79%{transform:skewX(-8deg) translateX(-3px);filter:brightness(1.4)}
  80%{transform:skewX(5deg) translateX(3px)}
  83%{transform:translateX(-2px);filter:brightness(1.2) saturate(1.5)}
  93%{transform:skewX(6deg) translateX(2px);filter:brightness(1.3)}
  94%{transform:none;filter:none}
}
.glitch:hover::before,.glitch:hover::after{animation-duration:.6s}
.carousel{position:relative}
.grid{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 16px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.grid>.card{flex:0 0 min(300px,80%);scroll-snap-align:start}
.arrow{position:absolute;top:calc(50% - 30px);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(11,11,13,.9);color:var(--text);font-size:1.3rem;cursor:pointer;transition:.15s}
.arrow:hover:not(:disabled){border-color:var(--accent);background:var(--accent)}
.arrow:disabled{opacity:0;pointer-events:none}
.arrow.prev{left:-14px}.arrow.next{right:-14px}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;text-decoration:none;transition:.2s}
@media(hover:hover){a.card:hover{transform:translateY(-4px);border-color:var(--accent)}}
.thumb{position:relative;overflow:hidden;aspect-ratio:16/10;display:grid;place-items:center;font-size:2.4rem;font-weight:800;letter-spacing:.05em;color:rgba(255,255,255,.85);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.preview{position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none;background:#000}
.preview img,.preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.preview img{opacity:0;transition:opacity .35s}
.preview img.show{opacity:1}
.preview video{opacity:0;transition:opacity .3s}
.preview video.live{opacity:1}
.preview.on{opacity:1}
.body{padding:16px}
.body h3{margin:0 0 6px;font-size:1.1rem}
.body p{margin:0 0 12px;color:var(--muted);font-size:.92rem}
.tag{display:inline-block;padding:2px 10px;border:1px solid var(--line);border-radius:99px;font-size:.75rem;color:var(--muted);margin-right:6px}
dialog#modal{width:min(1000px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);overflow:auto;display:none;grid-template-columns:1.6fr 1fr;box-shadow:0 30px 80px rgba(0,0,0,.7)}
dialog#modal[open]{display:grid;animation:grow .28s cubic-bezier(.2,.8,.2,1);transform-origin:var(--ox,50%) var(--oy,50%)}
dialog#modal.closing{animation:shrink .18s ease-in forwards}
dialog#modal::backdrop{background:rgba(5,5,7,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@keyframes grow{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes shrink{to{opacity:0;transform:scale(.6)}}
.media{padding:16px;min-width:0}
.stage{aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;display:grid;place-items:center}
.stage img,.stage video{width:100%;height:100%;object-fit:contain;display:block}
.strip{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.strip button{flex:0 0 88px;aspect-ratio:16/9;border:2px solid transparent;border-radius:6px;background:#000 center/cover;cursor:pointer;opacity:.6;position:relative;padding:0;transition:.15s}
.strip button:hover{opacity:1}
.strip button.active{opacity:1;border-color:var(--accent)}
.strip button.is-video::after{content:"\25B6";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1rem;text-shadow:0 1px 6px #000;background:rgba(0,0,0,.35);border-radius:4px}
.info{padding:24px 24px 24px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.info h3{margin:0;font-size:1.5rem;line-height:1.2;padding-right:32px}
.info .desc{margin:0;color:var(--muted)}
.info .links{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}
.info .links .btn{padding:9px 16px;font-size:.9rem}
.info .links .btn:hover{background:var(--accent);border-color:var(--accent)}
.info .links::before{content:"Available on";flex:0 0 100%;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}
dialog#modal.no-media{grid-template-columns:1fr}
dialog#modal.no-media .media{display:none}
dialog#modal.no-media .info{padding:24px}
.x{position:absolute;top:10px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(11,11,13,.8);color:var(--text);font-size:1.4rem;line-height:1;cursor:pointer}
.x:hover,.x:focus-visible{border-color:var(--accent);outline:none}
.about{display:grid;grid-template-columns:1.4fr 1fr;gap:40px}
.facts{list-style:none;margin:0;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:6px;align-self:start}
.facts li{padding:10px 0;border-bottom:1px solid var(--line)}
.facts li:last-child{border:0}
.facts span{display:block;color:var(--accent);font-size:.75rem;text-transform:uppercase;letter-spacing:.15em}
footer{text-align:center;padding:40px 24px;color:var(--muted);border-top:1px solid var(--line);font-size:.9rem}
@media(max-width:720px){.hero{padding-top:100px}.hero::after{background:linear-gradient(180deg,rgba(11,11,13,0) 70%,var(--bg) 100%)}.hero::before{width:100%;right:0;background:linear-gradient(180deg,rgba(11,11,13,.75),rgba(11,11,13,.85)) 0 100%/100% calc(100% - 140px) no-repeat,url("images/BigHeader.jpg") 57% 100%/auto calc(100% - 140px) no-repeat}.arrow{display:none}.about{grid-template-columns:1fr}.nav nav a{margin-left:14px}}
@media(max-width:720px){
  dialog#modal[open]{grid-template-columns:1fr}
  .info{padding:4px 16px 20px}
  .media{padding:12px 12px 0}
  .strip button{flex-basis:72px}
  .nav{padding:12px 14px;gap:10px}
  .logo,.nav nav a{white-space:nowrap}
  .nav nav{display:flex;gap:10px}
  .logo{font-size:.78rem;letter-spacing:.04em}
  .nav nav a{margin-left:0;font-size:.76rem}
  section{padding:40px 16px}
  .hero{min-height:0;padding:96px 16px 64px}
  h1{font-size:clamp(1.9rem,9vw,2.6rem)}
  .lead{font-size:1rem}
  .cta .btn{flex:1 1 140px;text-align:center}
  .grid>.card{flex-basis:min(280px,78%)}
  .about{gap:24px}
  .body p{font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){.glitch::before,.glitch::after{display:none}*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}