/* ==========================================================
   Реверс — сайт сериала. «Боевик».
   Графит, жёлтые диагонали, контурные кнопки, пунктирные выноски,
   HUD-подписи, неон и глитч Верхнего мира.
   ========================================================== */
:root{
  --coal:#111215; --coal-2:#191b1f; --coal-3:#23262c;
  --yellow:#f2b632; --yellow-hi:#ffd36b;
  --text:#f2f2f2; --muted:#8d929b; --dim:#5c616a;
  --cyan:#2ee6ff; --magenta:#ff2d6f; --red:#ff3b3b;
  --line:rgba(242,182,50,.55); --hair:rgba(255,255,255,.1);
  --ph-a:#1c1e23; --ph-b:#17191d;
  --display:"Montserrat","Arial Black",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --coal:#111215; } }
:root[data-theme="dark"]{ --coal:#111215; }

html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px); scroll-behavior:smooth; overflow-x:clip}
*,*::before,*::after{box-sizing:inherit}
body{margin:0; background:var(--coal); color:var(--text); font:400 15px/1.7 var(--body); -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--yellow); outline-offset:3px}
.wrap{max-width:1240px; margin:0 auto; padding:0 28px}
h1,h2,h3{font-family:var(--display); font-weight:800; margin:0; line-height:1; text-transform:uppercase}
h2{font-size:clamp(28px,3.6vw,46px); letter-spacing:.01em}
h2 .y,h1 .y{color:var(--yellow); display:block}
h3{font-size:15px; letter-spacing:.06em}
p{margin:0 0 1em; max-width:58ch}
.muted{color:var(--muted)}
.hud{font:500 11px var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}

/* ---------- Заглушки ---------- */
.ph{position:relative; overflow:hidden; display:flex; align-items:flex-end; min-height:120px;
  background:radial-gradient(60% 60% at 60% 30%,rgba(242,182,50,.10),transparent 70%),
             repeating-linear-gradient(135deg,var(--ph-a) 0 16px,var(--ph-b) 16px 32px)}
.ph > span{font:500 11px var(--mono); color:var(--muted); padding:6px 10px; background:rgba(0,0,0,.6); letter-spacing:.04em}
.ph.gray{filter:grayscale(1) brightness(.85)}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex; align-items:center; gap:12px; padding:13px 26px; border:1px solid var(--yellow); color:var(--text); background:transparent;
  font:600 12px var(--body); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer; position:relative; transition:background .2s,color .2s}
.btn::after{content:""; position:absolute; right:-5px; bottom:-5px; width:8px; height:8px; border-right:1px solid var(--yellow); border-bottom:1px solid var(--yellow)}
.btn:hover{background:var(--yellow); color:var(--coal)}
.btn.fill{background:var(--yellow); color:var(--coal)}
.play{display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%; border:2px solid var(--text); text-decoration:none; flex:0 0 auto}
.play i{width:0; height:0; border-left:16px solid var(--yellow); border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:5px}
.play.sm{width:48px; height:48px}
.play.sm i{border-left-width:12px; border-top-width:8px; border-bottom-width:8px}
.lead{display:flex; align-items:center; gap:0}
.lead .dots{width:130px; border-top:1px dashed rgba(255,255,255,.4)}
.node{width:12px; height:12px; border-radius:50%; border:1px solid var(--yellow); position:relative; flex:0 0 auto}
.node::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--yellow)}
.link{color:var(--yellow); text-decoration:none; font:600 12px var(--body); letter-spacing:.14em; text-transform:uppercase}
.link:hover{color:var(--yellow-hi)}

/* ---------- Глитч ---------- */
.glitch{position:relative; display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text); position:absolute; inset:0; pointer-events:none}
.glitch::before{color:var(--cyan); transform:translate(-3px,0); clip-path:inset(0 0 55% 0); opacity:.75; mix-blend-mode:screen}
.glitch::after{color:var(--magenta); transform:translate(3px,0); clip-path:inset(52% 0 0 0); opacity:.75; mix-blend-mode:screen}
.glitch.live::before{animation:gl1 4s infinite steps(1)}
.glitch.live::after{animation:gl2 4s infinite steps(1)}
@keyframes gl1{0%,86%,100%{transform:translate(-3px,0); clip-path:inset(0 0 55% 0)}88%{transform:translate(-8px,2px); clip-path:inset(10% 0 70% 0)}92%{transform:translate(5px,-2px); clip-path:inset(40% 0 30% 0)}}
@keyframes gl2{0%,86%,100%{transform:translate(3px,0); clip-path:inset(52% 0 0 0)}89%{transform:translate(9px,1px); clip-path:inset(70% 0 5% 0)}93%{transform:translate(-6px,0); clip-path:inset(20% 0 60% 0)}}

/* ---------- Шапка ---------- */
.top{position:fixed; left:0; right:0; top:0; z-index:30; padding-top:env(safe-area-inset-top,0px); transition:background .3s}
.top.solid{background:rgba(17,18,21,.95); box-shadow:0 1px 0 var(--hair)}
.top .wrap{display:flex; align-items:center; gap:34px; height:76px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; font:800 20px var(--display); letter-spacing:.12em}
.logo svg{width:28px; height:28px; color:var(--yellow)}
.logo small{font:500 10px var(--mono); letter-spacing:.2em; color:var(--yellow); align-self:flex-end; padding-bottom:4px}
.nav{display:flex; gap:28px}
.nav a{text-decoration:none; font:600 12px var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:6px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--yellow)}
.spacer{flex:1}
.burger{display:grid; gap:5px; background:none; border:0; cursor:pointer; padding:8px}
.burger i{display:block; height:2px; background:var(--text)}
.burger i:nth-child(1){width:26px} .burger i:nth-child(2){width:18px; justify-self:end} .burger i:nth-child(3){width:26px; background:var(--yellow)}
.drawer{position:fixed; inset:0; z-index:40; background:rgba(17,18,21,.97); display:none; flex-direction:column; justify-content:center; padding:0 10vw; gap:6px}
.drawer.open{display:flex}
.drawer a{font:800 clamp(28px,5vw,52px)/1.2 var(--display); text-transform:uppercase; text-decoration:none}
.drawer a:hover{color:var(--yellow)}
.drawer .close{position:absolute; top:calc(env(safe-area-inset-top,0px) + 20px); right:24px; background:none; border:1px solid var(--yellow); color:var(--yellow); width:44px; height:44px; cursor:pointer}

[data-soon]{cursor:not-allowed}
.nav [data-soon],.drawer [data-soon],footer [data-soon],.link[data-soon]{opacity:.45}
.toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 26px); z-index:60; transform:translate(-50%,calc(100% + 60px)); visibility:hidden;
  background:var(--coal-2); border:1px solid var(--yellow); padding:12px 20px; font:500 12px var(--mono); letter-spacing:.1em; transition:transform .35s}
.toast.show{transform:translate(-50%,0); visibility:visible}

section{padding:110px 0; position:relative}

/* ==========================================================
   HERO-СЛАЙДЕР
   ========================================================== */
.hero{position:relative; height:100vh; height:100svh; min-height:640px; overflow:hidden; isolation:isolate}
.slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s, visibility .6s}
.slide.on{opacity:1; visibility:visible}
.slide > .ph{position:absolute; inset:0; z-index:-2}
.slide > .ph > span{position:absolute; right:110px; top:96px}
.slide::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,var(--coal) 0%,rgba(17,18,21,.55) 45%,transparent 75%),linear-gradient(to top,var(--coal),transparent 35%)}
.s1 > .ph{background:radial-gradient(45% 60% at 68% 45%,rgba(242,182,50,.35),transparent 70%),radial-gradient(30% 40% at 85% 80%,rgba(255,90,40,.3),transparent),repeating-linear-gradient(135deg,var(--ph-a) 0 16px,var(--ph-b) 16px 32px)}
.s2 > .ph{background:radial-gradient(45% 60% at 70% 45%,rgba(46,230,255,.3),transparent 70%),repeating-linear-gradient(135deg,var(--ph-a) 0 16px,var(--ph-b) 16px 32px)}
.s3 > .ph{background:radial-gradient(45% 60% at 70% 45%,rgba(255,45,111,.35),transparent 70%),radial-gradient(30% 40% at 85% 20%,rgba(46,230,255,.25),transparent),repeating-linear-gradient(135deg,var(--ph-a) 0 16px,var(--ph-b) 16px 32px)}
.slide .wrap{height:100%; display:flex; flex-direction:column; justify-content:center; padding-top:40px}
.slide .hud{margin-bottom:22px}
.slide h1{font-size:clamp(40px,10.5vw,148px); letter-spacing:-.01em}
.s1 h1{color:var(--yellow)} .s2 h1{color:var(--cyan)} .s3 h1{color:var(--magenta)}
.slide .kick{font:500 13px var(--mono); letter-spacing:.42em; text-transform:uppercase; margin:16px 0 22px; color:var(--text)}
.slide p{color:var(--muted); font-size:16px; max-width:46ch}
.slide .acts{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:26px}
.diag{position:absolute; z-index:-1; left:-8%; top:-10%; width:34%; height:140%; background:linear-gradient(180deg,var(--yellow),rgba(242,182,50,.0) 85%);
  transform:skewX(-32deg); opacity:.85; pointer-events:none}
.s2 .diag{background:linear-gradient(180deg,var(--cyan),transparent 85%); opacity:.35}
.s3 .diag{background:linear-gradient(180deg,var(--magenta),transparent 85%); opacity:.4}
.frame-hud{position:absolute; inset:96px 28px 28px; pointer-events:none; z-index:2;
  background:
   linear-gradient(var(--text),var(--text)) 0 0/18px 1px no-repeat, linear-gradient(var(--text),var(--text)) 0 0/1px 18px no-repeat,
   linear-gradient(var(--text),var(--text)) 100% 100%/18px 1px no-repeat, linear-gradient(var(--text),var(--text)) 100% 100%/1px 18px no-repeat; opacity:.5}
.vtext{position:absolute; right:40px; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; font:500 11px var(--mono); letter-spacing:.6em; color:var(--muted); z-index:3}
.hud-bl{position:absolute; left:28px; bottom:44px; z-index:3; display:flex; align-items:flex-end; gap:34px; padding-left:28px}
.tagbox{display:inline-flex; font:600 10px var(--mono); letter-spacing:.16em}
.tagbox b{background:#5f8f86; color:#0c1514; padding:4px 10px; font-weight:600}
.tagbox span{border:1px solid #5f8f86; color:#8fbfb5; padding:3px 10px}
.hud-bl .when{font:700 18px/1.25 var(--display); text-transform:uppercase}
.hud-bl .mini{font:500 10px/1.5 var(--mono); color:var(--muted); letter-spacing:.1em; text-transform:uppercase}
.pager{position:absolute; right:110px; bottom:48px; z-index:3; display:flex; align-items:center; gap:18px; font:700 15px var(--display)}
.pager .bars{display:flex; gap:6px}
.pager .bars i{width:22px; height:2px; background:rgba(255,255,255,.25)}
.pager .bars i.on{background:var(--cyan); width:34px}
.pager button{background:none; border:0; color:var(--text); cursor:pointer; font:700 20px var(--display); padding:4px 8px}
.classes{position:absolute; right:150px; top:24%; z-index:3; list-style:none; margin:0; padding:0}
.classes li{position:relative; font:600 11px var(--body); letter-spacing:.12em; text-transform:uppercase; padding:9px 0 9px 26px}
.classes li::before{content:""; position:absolute; left:0; top:13px; width:8px; height:8px; border-radius:50%; background:var(--text)}
.classes li:nth-child(1){margin-left:120px} .classes li:nth-child(2){margin-left:96px} .classes li:nth-child(3){margin-left:72px}
.classes li:nth-child(4){margin-left:48px} .classes li:nth-child(5){margin-left:24px} .classes li:nth-child(6){margin-left:0; color:var(--yellow)}
.classes li:nth-child(6)::before{background:var(--yellow); box-shadow:0 0 10px var(--yellow)}
.classes::before{display:none; content:""; position:absolute; left:4px; top:17px; width:1px; height:200px; background:rgba(255,255,255,.3); transform-origin:top; transform:rotate(-31deg) translateX(0)}

/* ==========================================================
   О СЕРИАЛЕ (блок с видео)
   ========================================================== */
.about{overflow:hidden}
.about .stripe{position:absolute; z-index:-1; left:24%; top:0; width:220px; height:72%; background:linear-gradient(180deg,var(--yellow),rgba(242,182,50,.0)); transform:skewX(-38deg); opacity:.75}
.about-top{display:grid; grid-template-columns:320px 1fr; gap:40px; align-items:start}
.cutout{position:relative; aspect-ratio:3/5; z-index:2; clip-path:polygon(30% 0,70% 0,82% 14%,78% 32%,100% 46%,92% 100%,8% 100%,0 46%,22% 32%,18% 14%)}
.about-text{text-align:right; display:flex; flex-direction:column; align-items:flex-end}
.about-text p{color:var(--muted); font-size:13px}
.about-text .acts{display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:flex-end; margin-top:10px}
.about-media{display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-top:-200px; padding-left:200px; position:relative; z-index:1}
.about-media .ph{min-height:300px}
.about-media .big{display:grid; place-items:center}
.about-media .big .play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
.ph > .newtag{position:absolute; right:14px; bottom:14px; background:var(--yellow); color:var(--coal); font:800 10px var(--display); letter-spacing:.1em; padding:5px 10px}

/* ==========================================================
   ДВА МИРА: даты и центральная фигура
   ========================================================== */
.split-head{display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:start; text-align:center}
.split-head .sep{width:1px; height:56px; border-left:1px dashed rgba(255,255,255,.3); margin-top:6px}
.split-head h3{font-size:clamp(22px,2.6vw,34px); letter-spacing:.01em}
.split-head h3 span{color:var(--yellow)}
.split-head small{display:block; font:500 12px var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:6px}
.split-head .big{font:300 clamp(28px,3.6vw,44px) var(--display); color:var(--yellow); margin-top:24px; text-transform:uppercase; letter-spacing:.04em}
.worlds{display:grid; grid-template-columns:1fr 260px 1fr; align-items:end; margin-top:30px}
.wbox{background:#0d0e10; padding:36px 32px; min-height:300px}
.wbox h3{margin-bottom:6px}
.wbox h3::after{content:""; display:block; width:28px; margin-top:10px; border-top:1px dashed var(--yellow)}
.wbox p{color:var(--muted); font-size:13px; margin-top:16px}
.wbox.up h3{color:var(--magenta)}
.figure{position:relative; height:440px}
.figure::before{content:""; position:absolute; left:0; right:0; bottom:0; height:62%; background:var(--yellow)}
.figure .cutout{position:absolute; left:6%; right:6%; bottom:0; aspect-ratio:auto; height:100%}

/* ==========================================================
   СЕРИИ: колонки со шкалами (как «оружие»)
   ========================================================== */
.cols-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:50px}
.cols-head .ctrl{display:flex; gap:14px}
.eps{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 5*16px)/6); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:none}
.eps::-webkit-scrollbar{display:none}
.epc{scroll-snap-align:start; text-decoration:none; display:flex; flex-direction:column}
.epc:nth-child(even){margin-top:-40px}
.epc .ph{height:400px; min-height:0}
.epc .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(17,18,21,.9),transparent 50%)}
.ph > .num{background:none; padding:0; letter-spacing:0; position:absolute; left:14px; bottom:12px; z-index:2; font:800 52px/1 var(--display); color:rgba(255,255,255,.9)}
.epc:hover .ph{filter:none}
.epc .meta{padding:16px 2px 0; border-left:1px dashed rgba(255,255,255,.2); padding-left:12px; margin-top:12px}
.epc h3{font-size:14px; margin-bottom:12px; min-height:2.2em}
.statrow{display:flex; align-items:baseline; gap:8px; font:500 11px var(--mono); color:var(--muted); letter-spacing:.04em; padding:3px 0}
.statrow i{flex:1; border-bottom:1px dotted rgba(255,255,255,.2)}
.statrow b{font-weight:600; color:var(--dim)}
.statrow b.ok{color:var(--yellow)}

/* ==========================================================
   ОТРЯД
   ========================================================== */
.squad{display:grid; grid-template-columns:repeat(9,1fr); gap:10px}
.mem{text-decoration:none; display:flex; flex-direction:column}
.mem .ph{aspect-ratio:1/2.2; min-height:0; clip-path:polygon(0 8%,100% 0,100% 100%,0 100%)}
.mem b{display:block; font:800 13px var(--display); text-transform:uppercase; margin-top:12px}
.mem small{font:500 10px var(--mono); color:var(--yellow); letter-spacing:.1em; text-transform:uppercase}
.mem:hover .ph{filter:none}

/* ==========================================================
   ЭФИР ВЕРХНЕГО МИРА
   ========================================================== */
.air{background:#0b0c1a; overflow:hidden; isolation:isolate}
.air::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(40% 60% at 80% 40%,rgba(255,45,111,.25),transparent 70%),radial-gradient(40% 60% at 10% 90%,rgba(46,230,255,.15),transparent 70%),
             repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.air-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:50px; align-items:center}
.air h2{font-size:clamp(48px,7vw,96px); color:var(--magenta)}
.warn{display:inline-flex; align-items:center; gap:10px; font:600 11px var(--mono); letter-spacing:.14em; color:var(--red); text-transform:uppercase; margin:18px 0 22px}
.warn i{width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:14px solid var(--red)}
.hexes{display:flex; gap:14px; margin:6px 0 24px}
.hex{width:58px; height:64px; display:grid; place-items:center; color:var(--cyan); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background:rgba(46,230,255,.12); text-decoration:none}
.hex:first-child{background:var(--magenta); color:#fff}
.hex svg{width:24px; height:24px}
.screen{position:relative}
.screen .ph{min-height:400px; background:radial-gradient(50% 60% at 60% 40%,rgba(255,45,111,.3),transparent),repeating-linear-gradient(135deg,#1a1730 0 16px,#16142a 16px 32px)}
.onair{position:absolute; left:16px; top:16px; z-index:2; background:var(--magenta); color:#fff; font:700 11px var(--mono); letter-spacing:.14em; padding:5px 12px}
.ticker{overflow:hidden; white-space:nowrap; background:var(--magenta); color:#fff; font:600 12px var(--mono); padding:8px 0; letter-spacing:.06em}
.ticker span{display:inline-block; padding-left:100%; animation:tick 30s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}

/* ==========================================================
   ПАРТНЁРАМ, НА ХАБ, ПОДВАЛ
   ========================================================== */
.partners{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.pb{background:var(--coal-2); padding:38px; position:relative}
.pb::before{content:""; position:absolute; left:0; top:0; width:60px; height:3px; background:var(--yellow)}
.pb h3{font-size:20px; margin-bottom:14px}
.pb label{display:block; font:500 11px var(--mono); letter-spacing:.14em; color:var(--muted); text-transform:uppercase; margin:16px 0 8px}
.pb input{width:100%; background:transparent; border:1px solid rgba(255,255,255,.2); color:var(--text); padding:13px 14px; font:500 15px var(--body); margin-bottom:18px}
.pb ul{margin:0 0 20px; padding-left:18px; color:var(--muted)}
.tohub{position:relative; overflow:hidden; background:var(--yellow); color:var(--coal); padding:70px 0; isolation:isolate}
.tohub::before{content:""; position:absolute; z-index:-1; right:-5%; top:-40%; width:40%; height:180%; background:var(--coal); transform:skewX(-32deg)}
.tohub .wrap{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap}
.tohub h2{font-size:clamp(26px,3.4vw,44px)}
.tohub .btn{border-color:var(--yellow); color:var(--yellow)}
.tohub .btn:hover{background:var(--yellow); color:var(--coal)}
footer{padding:56px 0 70px; color:var(--muted); font-size:13px; border-top:1px solid var(--hair)}
footer .cols{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:30px}
footer h4{font:800 12px var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--text); margin:0 0 14px}
footer a{display:block; text-decoration:none; padding:3px 0} footer a:hover{color:var(--yellow)}
footer .bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:40px; font:500 11px var(--mono); letter-spacing:.12em; color:var(--dim)}

/* ==========================================================
   ВНУТРЕННИЕ СТРАНИЦЫ
   ========================================================== */
.phead{position:relative; padding:170px 0 80px; overflow:hidden; isolation:isolate}
.phead > .ph{position:absolute; inset:0; z-index:-2; opacity:.5}
.phead::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,var(--coal),transparent),linear-gradient(transparent 40%,var(--coal))}
.phead .diag{left:auto; right:-6%; width:22%; opacity:.6}
.phead h1{font-size:clamp(52px,9vw,128px)}
.phead p{color:var(--muted); font-size:16px; margin-top:22px}
.crumbs{display:flex; gap:12px; font:500 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:22px}
.crumbs a{text-decoration:none; color:var(--muted)} .crumbs a:hover{color:var(--yellow)}
.tabs{display:flex; gap:12px; margin-bottom:60px; flex-wrap:wrap}
.tabs a{padding:11px 22px; border:1px solid rgba(255,255,255,.2); text-decoration:none; font:600 12px var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.tabs a[aria-current="page"]{border-color:var(--yellow); color:var(--coal); background:var(--yellow)}
.eps.grid{grid-auto-flow:row; grid-template-columns:repeat(4,1fr); grid-auto-columns:auto; overflow:visible; row-gap:70px}
.eps.grid .epc:nth-child(even){margin-top:0}
.eps.grid .epc:nth-child(4n+2),.eps.grid .epc:nth-child(4n+4){margin-top:40px}

/* серия */
.ephero{position:relative; min-height:92vh; display:flex; align-items:flex-end; padding:150px 0 70px; overflow:hidden; isolation:isolate}
.ephero > .ph{position:absolute; inset:0; z-index:-2; background:radial-gradient(45% 60% at 70% 40%,rgba(242,182,50,.3),transparent 70%),repeating-linear-gradient(135deg,var(--ph-a) 0 16px,var(--ph-b) 16px 32px)}
.ephero > .ph > span{position:absolute; right:28px; top:96px}
.ephero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,var(--coal),transparent 70%),linear-gradient(to top,var(--coal),transparent 45%)}
.ephero > .wrap{width:100%}
.ephero h1{font-size:clamp(60px,11vw,160px)}
.ephero h1 small{display:block; font:800 clamp(22px,3vw,40px) var(--display); color:var(--text); margin-top:14px}
.ephero .acts{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:34px}
.ep-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:60px; align-items:start}
.statpanel{background:var(--coal-2); padding:34px; position:relative}
.statpanel::before{content:""; position:absolute; left:0; top:0; width:60px; height:3px; background:var(--yellow)}
.statpanel .statrow{font-size:12px; padding:6px 0}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips a{border:1px solid rgba(255,255,255,.2); padding:8px 14px; text-decoration:none; font:600 12px var(--body); letter-spacing:.1em; text-transform:uppercase}
.chips a:hover{border-color:var(--yellow); color:var(--yellow)}
.frames{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.frames .ph{aspect-ratio:16/9; min-height:0}
.frames .ph:nth-child(1){grid-column:span 2; grid-row:span 2; aspect-ratio:auto}
.insert{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; background:#0b0c1a; padding:34px; position:relative}
.insert::before{content:""; position:absolute; left:0; top:0; width:60px; height:3px; background:var(--magenta)}
.insert .ph{min-height:260px; background:radial-gradient(50% 60% at 60% 40%,rgba(255,45,111,.3),transparent),repeating-linear-gradient(135deg,#1a1730 0 16px,#16142a 16px 32px)}
.insert h3{font-size:30px; color:var(--magenta); margin:10px 0 14px}
.next{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ---------- Прерывание эфира ---------- */
.cut-air{position:fixed; left:0; right:0; bottom:env(safe-area-inset-bottom,0px); z-index:44; background:var(--magenta); color:#fff;
  display:flex; align-items:center; gap:16px; padding:12px 22px; transform:translateY(110%); visibility:hidden; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cut-air.show{transform:none; visibility:visible}
.cut-air b{font:800 13px var(--display); text-transform:uppercase; letter-spacing:.08em}
.cut-air span{font:500 12px var(--mono)}
.cut-air button{background:rgba(255,255,255,.2); color:#fff; border:0; padding:6px 12px; font:600 11px var(--mono); cursor:pointer}
.cut-air button:first-of-type{margin-left:auto}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto} .glitch.live::before,.glitch.live::after{animation:none}
  .ticker span{animation:none; padding-left:0} .slide,.cut-air{transition:none}
}

/* ==========================================================
   АДАПТИВ
   ========================================================== */
@media (max-width:1100px){
  .nav{display:none}
  .classes{display:none}
  .eps{grid-auto-columns:calc((100% - 2*16px)/3)}
  .eps.grid{grid-template-columns:repeat(2,1fr)}
  .eps.grid .epc:nth-child(n){margin-top:0}
  .eps.grid .epc:nth-child(even){margin-top:40px}
  .squad{grid-template-columns:repeat(5,1fr)}
  .about-top{grid-template-columns:200px 1fr}
  .about-media{margin-top:-80px; padding-left:120px}
  .air-grid,.ep-grid,.insert{grid-template-columns:minmax(0,1fr)}
  .worlds{grid-template-columns:1fr 1fr} .figure{display:none}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .wrap{padding:0 18px} section{padding:76px 0}
  .top .link{display:none}
  .vtext,.frame-hud{display:none}
  .slide > .ph > span{right:18px}
  .hud-bl{left:0; bottom:110px; gap:18px}
  .hud-bl .mini{display:none}
  .pager{left:18px; right:auto; bottom:40px}
  .eps{grid-auto-columns:72%}
  .eps .epc:nth-child(even){margin-top:0}
  .eps.grid{grid-template-columns:1fr} .eps.grid .epc:nth-child(even){margin-top:0}
  .squad{grid-template-columns:repeat(3,1fr)}
  .about-top{grid-template-columns:1fr} .cutout.side{display:none}
  .about-text{text-align:left; align-items:flex-start} .about-text .acts{justify-content:flex-start}
  .about-media{grid-template-columns:1fr; margin-top:30px; padding-left:0}
  .about{overflow:hidden}
.about .stripe{left:40%}
  .split-head{grid-template-columns:1fr; gap:24px} .split-head .sep{display:none}
  .worlds{grid-template-columns:1fr; gap:14px}
  .partners{grid-template-columns:1fr}
  .frames{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:1fr}
  .cut-air span{display:none}
}