:root{--bg:hsl(259, 21%, 99%);--surface:hsl(259, 18%, 98%);--fg:hsl(259, 15%, 15%);--muted:hsl(259, 8%, 40%);--accent:hsl(259, 81%, 46%);--accent-fg:#fff;--r:14px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif}
h1,h2{font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;line-height:1.2}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
svg{display:block;width:100%;height:100%}
.vn-top{display:flex;align-items:center;gap:1.25rem;padding:.75rem clamp(1rem,4vw,2.5rem);background:var(--surface);position:sticky;top:0;z-index:2;}
.vn-brand{font-weight:700;font-size:1.2rem;display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.vn-mark{width:1.4rem;height:1.4rem;border-radius:calc(var(--r)/2);background:var(--accent)}
.vn-nav{display:flex;gap:1rem;overflow-x:auto;flex:1;color:var(--muted);font-size:.95rem;scrollbar-width:none}
.vn-nav a{white-space:nowrap}
.vn-cta{display:inline-block;background:var(--accent);color:var(--accent-fg);padding:.5rem 1rem;border-radius:var(--r);font-weight:600;white-space:nowrap}
.vn-cta:hover{color:var(--accent-fg);filter:brightness(1.1)}
.vn-main{max-width:1400px;margin:0 auto;padding:1.5rem clamp(1rem,4vw,2.5rem) 3rem}
.vn-hero{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center;margin-bottom:2.5rem}
.vn-hero-media{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden}
.vn-kicker{color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin:0}
.vn-shelf{margin:2rem 0}
.vn-shelf h2{font-size:1.25rem;display:flex;align-items:center;gap:.6rem}
.vn-items{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,33.3%);gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory}
.vn-card{display:flex;flex-direction:column;gap:.5rem;scroll-snap-align:start}
.vn-thumb{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.vn-dur{position:absolute;right:.4rem;bottom:.4rem;background:rgba(0,0,0,.75);color:#fff;font-size:.75rem;padding:.05rem .35rem;border-radius:3px}
.vn-meta{display:flex;flex-direction:column;min-width:0}
.vn-title{font-weight:600;line-height:1.3}
.vn-sub{color:var(--muted);font-size:.85rem}
.vn-avatar{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;color:#fff;font-size:1rem}
.vn-watch{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2rem}
.vn-player{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
.vn-gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem;text-align:center;background:rgba(0,0,0,.55);color:#fff}
.vn-related .vn-items,.vn-related{display:flex;flex-direction:column;gap:1rem}
.vn-related .vn-card{display:grid;grid-template-columns:150px 1fr;gap:.75rem}
.vn-prose{max-width:720px}
.vn-foot{display:flex;flex-wrap:wrap;gap:1.25rem;padding:2rem clamp(1rem,4vw,2.5rem);color:var(--muted);font-size:.85rem;border-top:1px solid var(--surface)}
@media (max-width:860px){
.vn-hero,.vn-watch{grid-template-columns:1fr}
.vn-cta{padding:.4rem .75rem}
}
@media (max-width:520px){
.vn-top{flex-wrap:wrap}
.vn-nav{order:3;flex-basis:100%}
}