*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:74px}
body{margin:0;background:#000;color:#fff;font-family:Arial,"Malgun Gothic",sans-serif;line-height:1.5;word-break:keep-all}
a{color:inherit}
.wrap{width:min(1400px,92%);margin:0 auto;padding:30px 0 70px}
#bar{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.92);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.15);display:flex;align-items:center;gap:14px;padding:10px max(4%,14px)}
.brand{font-weight:800;text-decoration:none;white-space:nowrap;font-size:15px}.brand small{color:#8f8f8f;font-weight:400;margin-left:6px}
#genres{display:flex;gap:8px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
#genres button{flex:none;font:inherit;font-size:12.5px;font-weight:700;color:#e6e6e6;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 14px;cursor:pointer;white-space:nowrap;transition:.15s}
#genres button:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}
#genres button.on{background:#fff;color:#000;border-color:#fff}#genres b{color:#8f8f8f;font-weight:400;margin-left:4px}#genres button.on b{color:#555}
#lang{margin-left:auto;flex:none;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:8px 16px;text-decoration:none;font-size:12.5px;font-weight:700;white-space:nowrap;transition:.15s}#lang:hover{background:rgba(255,255,255,.12)}
.crumb{font-size:13px;color:#9a9a9a;margin:0 0 22px}.crumb a{color:#fff;text-decoration:none}.crumb a:hover{text-decoration:underline}
.num{font-size:34px;font-style:italic;margin:0 0 8px}
h1{font-size:clamp(30px,5vw,60px);font-weight:800;letter-spacing:-1px;line-height:1.05;margin:0 0 14px}
.sub,.lead{color:#c8c8c8;font-size:17px;margin:0;max-width:70ch}
.sec{font-size:14px;color:#cfcfcf;text-transform:uppercase;letter-spacing:1px;margin:46px 0 16px;border-top:1px solid rgba(255,255,255,.15);padding-top:24px;font-weight:700}
.sec small{color:#8f8f8f;font-weight:400;text-transform:none;letter-spacing:0;margin-left:8px}
h2{font-size:14px;color:#cfcfcf;text-transform:uppercase;letter-spacing:1px;margin:44px 0 14px;border-top:1px solid rgba(255,255,255,.15);padding-top:22px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.card{display:flex;flex-direction:column;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;transition:.15s}
.card:hover{border-color:rgba(255,255,255,.30);background:rgba(255,255,255,.07)}
.card .shot{display:block;aspect-ratio:1024/500;background:#111}.card .shot img{width:100%;height:100%;object-fit:cover;display:block}
.ct{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 0}.ct h3{margin:0;font-size:16px;line-height:1.3}.ct h3 a{text-decoration:none}
.card p{margin:6px 16px 0;color:#a9a9a9;font-size:13px;line-height:1.5;flex:1}.more{margin:12px 16px 16px;color:#e6e6e6;font-size:12.5px;font-weight:700;text-decoration:none}.more:hover{text-decoration:underline}
.play img{height:44px;width:auto;display:block}.play.sm img{height:34px}.play.lg img{height:68px}.play{flex:none;transition:.15s}.play:hover{opacity:.85}
.hd{margin:6px 0 24px}.hdt{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.hdt h1{margin:0}.hdt.split{justify-content:space-between;margin-bottom:14px}
.tagline{color:#c8c8c8;margin:12px 0 0;font-size:17px;max-width:820px}
.tag{display:inline-block;font-size:11px;color:#8f8f8f;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:2px 10px;vertical-align:middle;margin-right:6px}
.feat{width:100%;max-width:1024px;height:auto;border-radius:16px;border:1px solid rgba(255,255,255,.12);display:block;background:#111}
.yt{max-width:1024px;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.12)}
.yt button{all:unset;cursor:pointer;display:block;width:100%;height:100%;position:relative}.yt img,.yt iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.yt .pl{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.4)}
.shots{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}
.shots img{height:min(560px,70vh);width:auto;border-radius:14px;border:1px solid rgba(255,255,255,.12);flex:none;scroll-snap-align:start;background:#111;cursor:zoom-in}
.about p{max-width:820px;margin:.8em 0;color:#d6d6d6;font-size:15px}
.rel{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.rel a{display:block;color:#e6e6e6;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:700;text-decoration:none}.rel a:hover{background:rgba(255,255,255,.14)}
.meta{margin-top:26px;font-size:12.5px}.meta a{color:#9a9a9a}.sr{position:absolute;left:-9999px}
.badges{margin-top:34px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;opacity:.85}
footer{margin-top:44px;color:#7a7a7a;font-size:12.5px;border-top:1px solid rgba(255,255,255,.15);padding-top:20px;text-align:center}
footer .bd{margin-top:12px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}footer a{color:#9a9a9a}
#zoom{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:30;cursor:zoom-out}#zoom img{max-width:96vw;max-height:96vh;border-radius:8px}
@media (max-width:640px){.grid{grid-template-columns:1fr}.brand small{display:none}.shots img{height:52vh}.num{font-size:26px}}
