@font-face{font-family:'BC';src:url('/assets/fonts/barlowcond700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'NS';src:url('/assets/fonts/notosans400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'NS';src:url('/assets/fonts/notosans600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'NS';src:url('/assets/fonts/notosans700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--bg:#0a0b0d;--panel:#14161a;--panel2:#191c21;--line:#262a31;--tx:#eceef1;--mu:#9aa1ab;--ac:#ff4d00;--ac2:#ff7a3d}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.65 'NS',system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'BC',Impact,sans-serif;font-weight:700;text-transform:uppercase;line-height:.97;letter-spacing:.01em;margin:0}
h1{font-size:clamp(34px,4vw,56px)}
h2{font-size:clamp(26px,2.7vw,40px);margin:0 0 16px}
h3{font-size:21px;letter-spacing:.02em;margin:0 0 8px}
p{margin:0 0 15px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:var(--ac);color:#000;padding:9px 13px;z-index:99}

/* header */
header.top{position:sticky;top:0;z-index:50;background:rgba(10,11,13,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(9px)}
.bar{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img.mark{width:34px;height:34px}
.brand b{font-family:'BC';font-size:23px;letter-spacing:.02em;line-height:1}
.brand i{font-style:normal;font:600 10px/1 'NS';letter-spacing:.14em;color:var(--ac);border:1px solid #4a2a1c;background:#1b110c;padding:4px 5px;border-radius:3px}
nav.main{display:flex;align-items:center;gap:19px;min-width:0;margin-left:8px}
nav.main a{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#b8bec7;padding:6px 0;border-bottom:2px solid transparent}
nav.main a:hover{color:#fff}
nav.main a.on{color:#fff;border-color:var(--ac)}
.bar .go{margin-left:auto;flex:0 0 auto;background:var(--ac);color:#0a0b0d;font-weight:700;font-size:14px;padding:11px 17px;border-radius:4px;line-height:1}
.bar .go:hover{background:var(--ac2)}
.chips{border-top:1px solid #1c1f25;background:#0d0f12}
.chips .in{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:9px 0}
.chips .in::-webkit-scrollbar{display:none}
.chips span{flex:0 0 auto;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#a9b0ba;border:1px solid #2a2e36;border-radius:3px;padding:4px 9px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,1.37fr);gap:42px;align-items:center;padding:46px 24px 36px;max-width:1200px;margin:0 auto}
.kick{display:inline-flex;align-items:center;gap:9px;font:600 11.5px/1 'NS';letter-spacing:.16em;text-transform:uppercase;color:var(--ac);margin-bottom:16px}
.kick:before{content:"";width:28px;height:2px;background:var(--ac)}
h1 em{font-style:normal;color:var(--ac)}
.hero .lead{font-size:18px;color:#d9dde2;margin-top:18px}
.hero .small{font-size:14.5px;color:var(--mu)}
.micro{display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0 20px;padding:0;list-style:none}
.micro li{font-size:12.5px;color:#c2c8d0}
.micro b{color:#fff;font-weight:700}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.b1,.b2{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14.5px;padding:13px 20px;border-radius:4px;line-height:1}
.b1{background:var(--ac);color:#0a0b0d}
.b1:hover{background:var(--ac2)}
.b2{border:1px solid #3a3f47;color:#dfe3e8}
.b2:hover{border-color:var(--ac);color:#fff}
figure.shot{margin:0;position:relative}
figure.shot .frame{position:relative;border:1px solid #2c3138;border-radius:6px;overflow:hidden;background:#101215;box-shadow:0 24px 60px rgba(0,0,0,.45)}
figure.shot img{width:100%;height:auto}
figure.shot .site{position:absolute;left:12px;top:12px;background:rgba(10,11,13,.86);border:1px solid #3a3f48;color:#fff;font:600 10.5px/1 'NS';letter-spacing:.12em;padding:6px 8px;border-radius:3px}
figure.shot .ov{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap}
figure.shot .ov span{background:rgba(8,9,11,.9);border:1px solid #3c4149;color:#f2f4f6;font:600 11px/1 'NS';padding:6px 8px;border-radius:3px}
figure.shot .ov span.hd{background:var(--ac);border-color:var(--ac);color:#0a0b0d}
figure.shot figcaption{font-size:12.5px;color:#8d949d;margin-top:9px;line-height:1.5}

/* partners */
.partners{background:#0f1114;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0 18px;margin:6px 0 0}
.partners .hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:13px}
.partners h2{font-size:20px;margin:0}
.partners .hd span{font-size:12px;color:var(--mu)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.pgrid a{height:84px;background:#15181d;border:1px solid #232830;border-radius:5px;display:flex;align-items:center;justify-content:center;padding:8px 12px;transition:border-color .15s,background .15s}
.pgrid a:hover{border-color:#464d57;background:#191d23}
.pgrid a.light{background:#f4f5f7;border-color:#f4f5f7}
.pgrid img{height:60px;width:auto;max-width:100%;object-fit:contain}
.partners .fine{font-size:11.5px;color:#7f868f;margin:11px 0 0}

/* sections */
section.blk{padding:54px 0 8px}
section.blk.tight{padding-top:34px}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.shead p{margin:0;max-width:52ch;font-size:14px;color:var(--mu)}
.eyebrow{font:600 11px/1 'NS';letter-spacing:.18em;text-transform:uppercase;color:var(--ac);display:block;margin-bottom:9px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel)}
.stats div{padding:22px 20px 20px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-family:'BC';font-size:clamp(30px,3vw,44px);line-height:1;color:#fff;letter-spacing:.01em}
.stats strong{display:block;font-size:13px;margin:7px 0 4px;color:#dfe3e7;font-weight:600}
.stats small{display:block;font-size:11.5px;color:var(--mu);line-height:1.45}
.src{font-size:11.5px;color:#757d86;margin:10px 0 0}

/* video cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{background:var(--panel);border:1px solid #20242b;border-radius:6px;overflow:hidden}
.card .th{position:relative;aspect-ratio:16/9;background:#0d0f12}
.card .th img{width:100%;height:100%;object-fit:cover}
.card .res{position:absolute;left:8px;top:8px;background:rgba(8,9,11,.9);border:1px solid #454b54;font:600 10px/1 'NS';padding:4px 5px;border-radius:2px}
.card .dur{position:absolute;right:8px;bottom:8px;background:rgba(8,9,11,.92);font:600 10.5px/1 'NS';padding:5px 6px;border-radius:2px}
.card .bd{padding:12px 13px 14px}
.card h3{font-family:'NS';font-weight:600;font-size:14px;line-height:1.4;text-transform:none;letter-spacing:0;margin:0 0 7px;height:39px;overflow:hidden}
.card .meta{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--mu)}
.card .meta b{color:#c9cfd7;font-weight:600}

/* numbered blocks */
.num{display:grid;gap:0;border-top:1px solid var(--line)}
.num article{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.num .n{font-family:'BC';font-size:58px;line-height:.8;color:#2c3138;letter-spacing:.02em}
.num h3{font-size:22px}
.num p{font-size:14.6px;color:#c3c9d1;margin:0 0 9px;max-width:78ch}
.num p:last-child{margin:0}

/* panels */
.two{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px}
.panel.hi{border-color:#4a2a1c;box-shadow:inset 0 2px 0 var(--ac)}
.panel h3{font-size:19px}
.panel p{font-size:14px;color:#bfc5cd;margin:0 0 10px}
.panel p:last-child{margin:0}
.panel .tag{display:inline-block;font:600 10px/1 'NS';letter-spacing:.13em;text-transform:uppercase;color:var(--ac);border:1px solid #4a2a1c;padding:4px 6px;border-radius:3px;margin-bottom:11px}

/* chip wall */
.wall{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 18px}
.wall span{border:1px solid #31363e;background:var(--panel);border-radius:3px;padding:9px 13px;font-size:13.5px;color:#d5dae1}
.wall span:nth-child(4n+1){border-color:#4a2a1c;color:#ff8b58}

/* faq teaser */
.faq2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;border-top:1px solid var(--line)}
.faq2 div{padding:18px 0;border-bottom:1px solid var(--line)}
.faq2 h3{font-family:'NS';text-transform:none;font-size:15.5px;font-weight:600;letter-spacing:0;margin:0 0 5px}
.faq2 p{margin:0;font-size:14px;color:#b9c0c8}

/* subpage */
.phead{padding:44px 0 26px;border-bottom:1px solid var(--line)}
.crumb{display:flex;gap:8px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#7f868f;margin-bottom:14px}
.crumb a{color:#a6adb6}
.crumb i{font-style:normal;color:#4a505a}
.phead p.lede{font-size:17px;color:#c9cfd7;max-width:78ch;margin:14px 0 0}
.note{border-left:2px solid var(--ac);padding:2px 0 2px 14px;color:#aeb5be;font-size:13.5px;margin:18px 0 0}

/* works list */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:64px minmax(0,1fr) 190px;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.row .idx{font-family:'BC';font-size:34px;line-height:1;color:#3a4049}
.row h3{font-family:'NS';text-transform:none;font-size:16.5px;font-weight:600;letter-spacing:0;line-height:1.4;margin:0 0 6px}
.row p{margin:0;font-size:14px;color:#b6bdc5}
.row .side{font-size:12px;color:var(--mu);text-align:right}
.row .side b{display:block;color:#e6e9ed;font-size:13px;font-weight:600;margin-bottom:3px}

/* genres */
.gen{border-top:1px solid var(--line)}
.gen article{display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;padding:26px 0;border-bottom:1px solid var(--line)}
.gen h3{font-size:26px;margin:0}
.gen .k{font:600 11px/1 'NS';letter-spacing:.15em;text-transform:uppercase;color:var(--ac);margin-bottom:8px}
.gen p{font-size:14.6px;color:#c1c7cf;margin:0 0 9px}
.gen p.use{color:#98a0a9;font-size:13.5px;margin:0}
.gen p.use b{color:#d6dbe2;font-weight:600}

/* guide */
.chap{border-top:1px solid var(--line);padding:26px 0 10px}
.chap .cn{font:600 11px/1 'NS';letter-spacing:.16em;color:var(--ac);margin-bottom:9px}
.chap h2{font-size:30px}
.chap p{max-width:82ch;font-size:15.4px;color:#c3c9d1}
.chap p strong{color:#fff}

/* faq page */
.qa{border-top:1px solid var(--line)}
.qa article{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:26px}
.qa h3{font-family:'NS';text-transform:none;font-size:16px;font-weight:600;letter-spacing:0;line-height:1.45;margin:0}
.qa p{margin:0;font-size:14.6px;color:#b9c0c8}

/* about */
.about{border-top:1px solid var(--line)}
.about section{padding:24px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px}
.about h2{font-size:24px;margin:0}
.about p{font-size:14.8px;color:#c0c6ce;max-width:80ch}

/* 404 */
.err{min-height:62vh;display:flex;align-items:center;padding:60px 0}
.err .big{font-family:'BC';font-size:clamp(90px,16vw,190px);line-height:.8;color:#1d2127;letter-spacing:.02em}
.err h1{font-size:clamp(30px,4vw,52px);margin:10px 0 12px}
.err p{color:var(--mu);max-width:60ch}

/* footer */
footer.site{margin-top:62px;border-top:1px solid var(--line);background:#0c0e11;padding:34px 0 26px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.fbrand{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.fbrand img{width:28px;height:28px}
.fbrand b{font-family:'BC';font-size:19px;letter-spacing:.02em}
.fbrand i{font-style:normal;font:600 9.5px/1 'NS';letter-spacing:.12em;color:var(--ac);border:1px solid #4a2a1c;padding:3px 4px;border-radius:2px}
footer.site p{font-size:12.5px;color:#828a93;margin:0 0 8px}
footer.site h4{font:600 10.5px/1 'NS';letter-spacing:.14em;text-transform:uppercase;color:#aeb5be;margin:2px 0 10px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:0 0 7px}
footer.site li a{font-size:13px;color:#98a0a9}
footer.site li a:hover{color:#fff}
.copy{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:26px;padding-top:16px}
.copy p{margin:0;font-size:11.5px;color:#6f777f;max-width:88ch}
.age{display:inline-flex;align-items:center;justify-content:center;border:1px solid #4a2a1c;color:var(--ac);font:700 11px/1 'NS';padding:6px 7px;border-radius:3px}

@media (max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr);gap:26px;padding:30px 24px 26px}
  .hero .shot{order:2}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(1),.stats div:nth-child(2){border-bottom:1px solid var(--line)}
  .two{grid-template-columns:minmax(0,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .row .side{grid-column:2;text-align:left;display:flex;gap:12px}
  .row .side b{display:inline;margin:0}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .bar{flex-wrap:wrap;min-height:0;padding:10px 0 0;gap:10px}
  .brand img.mark{width:30px;height:30px}
  .brand b{font-size:19px}
  .bar .go{margin-left:auto;padding:9px 12px;font-size:12.5px}
  nav.main{order:3;width:100%;gap:0;margin:0;overflow-x:auto;scrollbar-width:none;border-top:1px solid #1c1f25;padding:2px 0 0}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{flex:0 0 auto;padding:10px 11px 9px;font-size:11px;letter-spacing:.06em}
  .chips .in{padding:8px 0}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .pgrid a{height:66px;padding:5px 8px}
  .pgrid img{height:44px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .num article{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:19px 0}
  .num .n{font-size:38px}
  .faq2{grid-template-columns:minmax(0,1fr)}
  .qa article{grid-template-columns:minmax(0,1fr);gap:7px}
  .about section{grid-template-columns:minmax(0,1fr);gap:8px}
  .gen article{grid-template-columns:minmax(0,1fr);gap:9px}
  .shead{display:block}
  .shead p{margin-top:8px}
  h1{font-size:clamp(29px,8.6vw,40px)}
  .hero .lead{font-size:16.5px}
  section.blk{padding:38px 0 6px}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  footer.site{margin-top:44px}
  .phead{padding:28px 0 20px}
  .phead p.lede{font-size:15.5px}
}