/* Cinefon. The system is Netflix's open (logged-out) catalogue, measured 01.10.2026
   (cinefon/NETFLIX-РАЗБОР.md): two columns (billboard 24/32/48, rows 24/32/80/152/200),
   5:7 posters 132/150/184/240 with a 12px gap, native scroll-snap rows with a 10% edge mask,
   pill arrows 24x80, scale(1.05) hover, concave billboard bottom, page tinted by a blurred frame.
   Ours: logo gold takes the role of Netflix red, Albert Sans for Netflix Sans, no sign-up anywhere. */
:root{
  --bg:#0f0f0f; --t1:#fff; --t2:rgba(255,255,255,.7); --t3:rgba(255,255,255,.4);
  --surf:rgba(255,255,255,.1); --surf-line:rgba(255,255,255,.04); --glass:rgba(22,22,22,.7); --glass-line:rgba(128,128,128,.7);
  --gold:#f5c518; --gold-h:#d9ac06; --gold-ink:#141000; --skel:#232323;
  --bb-pad:48px; --row-pad:152px; --poster:184px; --gap:12px; --row-max:1520px; --bb-max:1824px;
  --h1:48px; --h1w:900; --h2:32px; --h2w:700;
  --e-in:cubic-bezier(.32,.94,.6,1); --e-out:cubic-bezier(.4,0,.68,.06); --e-btn:cubic-bezier(.5,0,.1,1);
  --font:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
@media (max-width:1279px){:root{--bb-pad:32px;--row-pad:80px;--poster:150px;--h1:40px;--h1w:700;--h2:24px}}
@media (max-width:959px){:root{--row-pad:32px;--poster:132px;--h1:32px;--h2:20px;--h2w:500}}
@media (max-width:599px){:root{--bb-pad:24px;--row-pad:24px;--h1:28px;--h1w:700}}
@media (min-width:1920px){:root{--row-pad:200px;--poster:240px;--h1:56px}}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--t1);font:400 16px/1.25 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--t1);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr:focus{clip:auto;width:auto;height:auto;z-index:99;top:8px;left:8px;padding:8px 12px;background:#fff;color:#000}

/* page glow: the billboard frame, blurred, under everything */
.glow{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.glow img{width:100%;height:100%;object-fit:cover;filter:blur(32px);opacity:.15;transform:scale(1.1)}

/* ---------- header: 72 / 56, not sticky ---------- */
.hdr{position:relative;z-index:20;height:72px;display:flex;align-items:center;gap:28px;padding:0 var(--bb-pad);max-width:calc(var(--bb-max) + 2 * var(--bb-pad));margin:0 auto;
  background:linear-gradient(to top,transparent,#000)}
.hdr__logo{flex:none;display:block;height:45px}
.hdr__logo img{height:100%;width:auto}
.hdr__nav{display:flex;gap:4px}
.hdr__nav a{padding:6px 12px;border-radius:100px;font-size:14px;font-weight:500;color:var(--t2);transition:color .25s var(--e-in),background-color .25s var(--e-in)}
.hdr__nav a:hover{color:#fff}
.hdr__nav a[aria-current]{color:#fff;background:var(--surf)}
.hdr__right{margin-left:auto;display:flex;align-items:center;gap:12px}
.search{display:flex;align-items:center;height:32px;border-radius:100px;border:1px solid transparent;transition:border-color .25s var(--e-in),background-color .25s var(--e-in)}
.search.is-open,.search:focus-within{border-color:var(--glass-line);background:var(--glass)}
.search button{width:32px;height:32px;display:grid;place-items:center;border-radius:100px}
.search button svg{width:20px;height:20px}
.search input{width:0;border:0;background:none;color:#fff;font:500 14px var(--font);outline:0;transition:width .25s var(--e-in),padding .25s var(--e-in)}
.search.is-open input,.search:focus-within input{width:min(220px,46vw);padding-right:14px}
.search input::-webkit-search-cancel-button{display:none}
.hdr__menu{display:none;height:32px;padding:0 14px;border-radius:100px;background:#fff;color:#000;font-size:14px;font-weight:500}
@media (max-width:959px){
  .hdr{height:56px;background:rgba(0,0,0,.8);gap:12px}
  .hdr__logo{height:32px}
  .hdr__nav{display:none}
  .hdr__menu{display:inline-flex;align-items:center}
  .hdr__nav.is-open{display:flex;flex-direction:column;position:absolute;top:56px;left:0;right:0;padding:8px var(--bb-pad) 16px;background:rgba(0,0,0,.92);backdrop-filter:blur(12px)}
  .hdr__nav.is-open a{padding:12px 4px;border-radius:0;font-size:16px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:8px 32px;border-radius:100px;font-size:18px;font-weight:500;line-height:1.2;white-space:nowrap;
  transition:background-color .25s var(--e-out),border-color .25s var(--e-out),color .25s var(--e-out)}
.btn:hover{transition-timing-function:var(--e-in)}
.btn:active{transition:none}
.btn svg{width:22px;height:22px;flex:none}
.btn--play{background:var(--gold);color:var(--gold-ink);min-width:200px}
.btn--play:hover{background:var(--gold-h)}
.btn--glass{background:var(--glass);border:1px solid var(--glass-line);color:#fff}
.btn--glass:hover{background:rgba(64,64,64,.7)}
.btn--sm{height:32px;padding:4px 16px;font-size:14px;min-width:0}
.rb{width:40px;height:40px;border-radius:20px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-line);color:#fff;transition:background-color .25s var(--e-out)}
.rb:hover{background:rgba(64,64,64,.8);transition-timing-function:var(--e-in)}
.rb svg{width:24px;height:24px}
@media (max-width:959px){.btn{height:40px;padding:6px 32px;font-size:16px}.btn--play{min-width:180px}}

/* ---------- billboard ---------- */
.bb{position:relative;max-width:var(--bb-max);margin:0 auto;padding:0 var(--bb-pad)}
.bb__box{position:relative;height:clamp(420px,44.6vw,860px);border-radius:20px 20px 16px 16px;overflow:hidden;background:rgba(255,255,255,.15);
  -webkit-mask-image:radial-gradient(103% 12% at 50% 102%,transparent 50%,#fff 51%);mask-image:radial-gradient(103% 12% at 50% 102%,transparent 50%,#fff 51%)}
.bb__media{position:absolute;inset:1px;border-radius:19px 19px 15px 15px;overflow:hidden;background:#000}
.bb__media>img,.bb__media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bb__media>video{opacity:0;transition:opacity 1.2s ease}
.bb__media>video.is-on{opacity:1}
.bb__shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 24%,rgba(0,0,0,.12) 52%,transparent 70%),
  linear-gradient(180deg,transparent 40%,rgba(0,0,0,.08) 52%,rgba(0,0,0,.2) 62%,rgba(0,0,0,.34) 72%,rgba(0,0,0,.47) 82%,rgba(0,0,0,.57) 92%,rgba(0,0,0,.62) 100%)}
.bb__info{position:absolute;left:64px;bottom:12%;width:min(640px,48%);z-index:2}
.bb__kicker{font-size:13px;line-height:24px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.bb__title{font-size:var(--h1);font-weight:var(--h1w);line-height:1;letter-spacing:-.01em}
.bb__title--film{font-size:clamp(36px,4.6vw,76px);font-weight:900;line-height:.92;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.bb__lead{margin-top:12px;font-size:18px;line-height:1.3;color:#fff;max-width:640px}
.bb__meta{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;line-height:21px;font-weight:500;color:var(--t2)}
.bb__meta span+span:before{content:"•";padding-right:8px;color:var(--t3)}
.bb__ctas{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px}
.bb__note{margin-top:12px;font-size:16px;color:#fff}
.bb__ctrl{position:absolute;right:56px;bottom:13%;z-index:2;display:flex;gap:12px}
/* poster collage for catalogue billboards: tilted wall of posters, like the open Netflix genre pages */
.wall{position:absolute;inset:-30% -12% -20% 18%;display:grid;grid-template-columns:repeat(7,1fr);gap:18px;transform:rotate(-24deg) skewX(4deg)}
.wall span{aspect-ratio:5/7;border-radius:14px;overflow:hidden;background:var(--skel);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.wall span:nth-child(7n+2),.wall span:nth-child(7n+4),.wall span:nth-child(7n+6){translate:0 38%}
.wall img{width:100%;height:100%;object-fit:cover}
@media (max-width:959px){.bb__info{left:32px;width:60%}.bb__ctrl{right:32px}}
@media (max-width:599px){
  .bb__box{height:auto;aspect-ratio:342/523}
  .bb__info{left:0;right:0;bottom:9%;width:auto;padding:0 20px;text-align:center}
  .bb__title{font-size:var(--h1)}.bb__title--film{font-size:clamp(30px,10vw,44px)}
  .bb__lead{font-size:14px;margin-top:10px}
  .bb__meta,.bb__ctas{justify-content:center}
  .bb__ctas{margin-top:16px}
  .bb__ctrl{right:auto;left:16px;top:16px;bottom:auto}
  .wall{inset:-12% -40% 18% -40%;grid-template-columns:repeat(5,1fr)}
  .bb__shade{background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.85) 100%)}
}

/* ---------- rows ---------- */
.rows{max-width:calc(var(--row-max) + 2 * var(--row-pad));margin:0 auto;padding:40px var(--row-pad) 24px}
.row{position:relative;margin-bottom:52px}
.row__h{font-size:var(--h2);font-weight:var(--h2w);line-height:1.25;margin-bottom:12px;display:flex;align-items:baseline;gap:14px}
.row__h a{transition:color .25s var(--e-out)}
.row__h a:hover{color:var(--t2);transition-timing-function:var(--e-in)}
.row__all{font-size:14px;font-weight:500;color:var(--t2)}
.row__all:hover{color:#fff;text-decoration:underline}
.strip{position:relative}
.strip__list{display:flex;gap:var(--gap);overflow-x:scroll;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;list-style:none;
  padding:10px 0 4px;margin:-10px 0 -4px;
  -webkit-mask-image:linear-gradient(to left,transparent,#000 10%);mask-image:linear-gradient(to left,transparent,#000 10%)}
.strip__list::-webkit-scrollbar{display:none}
.strip.is-mid .strip__list{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.strip.is-end .strip__list{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%);mask-image:linear-gradient(90deg,transparent,#000 10%)}
.strip.is-fit .strip__list{-webkit-mask-image:none;mask-image:none}
.strip__list>li{flex:none;scroll-snap-align:start}
.arrow{position:absolute;top:calc(var(--poster) * 1.4 / 2 - 40px + 10px);z-index:3;width:24px;height:80px;border-radius:256px;display:grid;place-items:center;
  background:rgba(128,128,128,.4);color:#fff;transition:background-color .2s ease-in-out,opacity .4s ease-in-out}
.arrow:hover{background:rgba(128,128,128,.2)}
.arrow svg{width:18px;height:18px}
.arrow--next{right:-36px}.arrow--prev{left:-36px}
.arrow[hidden]{display:grid;opacity:0;pointer-events:none}
@media (max-width:959px){.arrow--next{right:-28px}.arrow--prev{left:-28px}}
@media (max-width:599px){.arrow--next{right:-20px}.arrow--prev{left:-20px}}
.poster{display:block;width:var(--poster);text-align:center}
.poster__img{position:relative;display:block;aspect-ratio:5/7;border-radius:12px;overflow:hidden;background:var(--skel);animation:skel 4s linear infinite;
  transition:transform .2s ease-in-out}
.poster__img img{width:100%;height:100%;object-fit:cover}
.poster:hover .poster__img,.poster:focus-visible .poster__img{transform:scale(1.05)}
.poster__img.is-loaded{animation:none}
.poster__cap{display:block;margin-top:8px;font-size:14px;line-height:21px;color:#fff;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.poster__tag{position:absolute;top:8px;left:8px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.72);font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff}
.poster__new{position:absolute;left:50%;bottom:8px;translate:-50% 0;padding:3px 10px;border-radius:100px;background:var(--gold);color:var(--gold-ink);font-size:11px;font-weight:700;white-space:nowrap}
.poster__dur{position:absolute;right:8px;bottom:8px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.9);font-size:13px;font-weight:500;color:var(--t2)}
@keyframes skel{0%,100%{background-color:#232323}50%{background-color:#414141}}
/* Top 10 */
.row--top .row__h{font-size:24px;font-weight:500}
.top{display:block;position:relative;width:224px;height:252px}
.top__n{position:absolute;left:0;bottom:-6px;font-size:100px;line-height:100px;font-weight:700;color:#414141;-webkit-text-stroke:4px #fff;paint-order:stroke fill;
  text-shadow:0 0 24px rgba(0,0,0,.5);letter-spacing:-.04em;user-select:none}
.top__img{position:absolute;right:0;top:0;width:180px;height:252px;border-radius:8px;overflow:hidden;background:var(--skel);transition:transform .2s ease-in-out}
.top__img img{width:100%;height:100%;object-fit:cover}
.top:hover .top__img{transform:scale(1.05)}
@media (max-width:959px){.top{width:170px;height:190px}.top__img{width:136px;height:190px}.top__n{font-size:80px;line-height:80px}}

/* ---------- title page ---------- */
.anchors{position:sticky;top:20px;z-index:15;width:max-content;max-width:calc(100vw - 48px);margin:0 auto 16px;display:flex;overflow-x:auto;scrollbar-width:none;
  border-radius:100px;background:rgba(0,0,0,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:8px 8px 16px rgba(0,0,0,.5)}
.anchors a{padding:11.2px 20px;font-size:14px;font-weight:500;color:var(--t2);white-space:nowrap;transition:color .25s var(--e-out)}
.anchors a:hover,.anchors a.on{color:#fff}
.col{max-width:calc(1136px + 2 * var(--row-pad));margin:0 auto;padding:0 var(--row-pad)}
.sec{margin-top:40px;scroll-margin-top:84px}
.sec>h2{font-size:var(--h2);font-weight:var(--h2w);margin-bottom:16px}
.metacard{border-radius:16px;background:var(--surf);border:2px solid var(--surf-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:26px 34px}
.metacard h1{font-size:24px;font-weight:500;line-height:1.25}
.metacard .bb__meta{margin-top:6px;color:#fff}
.metacard__cols{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,.9fr);gap:24px}
.metacard__cols>i{background:rgba(255,255,255,.15)}
.metacard p{font-size:16px;line-height:1.5}
.kv{font-size:14px;line-height:21px;color:var(--t2)}
.kv b{color:#fff;font-weight:500}
.kv+.kv{margin-top:8px}
.details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.panel{border-radius:16px;background:var(--surf);border:2px solid var(--surf-line);padding:32px 24px}
.panel .kv{font-weight:500}
.panel .kv+.kv{margin-top:14px}
.panel a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.credit{margin-top:12px;font-size:14px;line-height:21px;color:var(--t2)}
.row--like .poster__img{border-radius:16px}
@media (max-width:959px){
  .metacard{padding:20px}
  .metacard h1{font-size:20px}
  .metacard__cols{grid-template-columns:1fr;gap:14px}.metacard__cols>i{display:none}
  .details{grid-template-columns:1fr}
}

/* ---------- player modal (title page) ---------- */
.pm{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(0,0,0,.7);opacity:0;visibility:hidden;transition:opacity .25s var(--e-in) 67ms,visibility 0s .32s}
.pm.is-open{opacity:1;visibility:visible;transition:opacity .25s var(--e-in) 67ms}
.pm__box{position:relative;width:min(1024px,94vw);aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#161616;border:2px solid rgba(128,128,128,.4);box-shadow:0 4px 8px rgba(0,0,0,.8);
  opacity:0;transform:scale(.9) translateY(24px);transition:opacity .1s linear .1s,transform .533s var(--e-in) 4ms}
.pm.is-open .pm__box{opacity:1;transform:none}

/* ---------- galleries ---------- */
.gal{max-width:calc(var(--row-max) + 2 * var(--row-pad));margin:0 auto;padding:24px var(--row-pad) 48px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 32px}
.chips a{height:32px;display:inline-flex;align-items:center;padding:4px 16px;border-radius:100px;background:var(--glass);border:1px solid var(--glass-line);font-size:14px;font-weight:500;
  transition:background-color .25s var(--e-out),color .25s var(--e-out)}
.chips a:hover{background:rgba(64,64,64,.8);transition-timing-function:var(--e-in)}
.chips a[aria-current]{background:#fff;color:#000;border-color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--poster),1fr));gap:28px var(--gap)}
.grid .poster{width:auto}
.empty{color:var(--t2);font-size:18px;padding:24px 0}
.gal h1{font-size:var(--h1);font-weight:var(--h1w);line-height:1}

/* ---------- prose ---------- */
.prose{max-width:760px;margin:0 auto;padding:40px 24px 64px;font-size:16px;line-height:1.6;color:var(--t2)}
.prose h1{color:#fff;font-size:var(--h1);font-weight:var(--h1w);line-height:1.05;margin-bottom:20px}
.prose h2{color:#fff;font-size:24px;font-weight:500;margin:32px 0 8px}
.prose p+p{margin-top:12px}
.prose a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.lic-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:14px;line-height:21px}
.lic-table td,.lic-table th{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left;vertical-align:top}
.lic-table th{color:#fff;font-weight:500}

/* ---------- footer ---------- */
.ftr{max-width:calc(1136px + 2 * var(--row-pad));margin:24px auto 0;padding:40px var(--row-pad) 64px;font-size:14px;line-height:21px;color:var(--t2)}
.ftr__q{font-size:16px;color:var(--t2)}
.ftr__q a{text-decoration:underline}
.ftr__links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;margin:24px 0}
.ftr__links a{text-decoration:underline;text-underline-offset:2px}
.ftr__links a:hover{color:#fff}
@media (max-width:599px){.ftr__links{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}
.btn__more{max-width:22ch;overflow:hidden;text-overflow:ellipsis}
.metacard .bb__meta{justify-content:flex-start}
@media (max-width:599px){.btn__more{display:none}}
/* divider between the three kinds of cinema */
.sect{max-width:var(--row-max);margin:8px auto 20px;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.12)}
.sect h2{font-size:var(--h1);font-weight:var(--h1w);line-height:1;letter-spacing:-.01em}
.sect h2 a{transition:color .25s var(--e-out)}
.sect h2 a:hover{color:var(--gold)}
.sect p{margin-top:6px;font-size:16px;color:var(--t2)}
.gal__h2{margin:34px 0 14px;font-size:var(--h2);font-weight:var(--h2w);display:flex;align-items:baseline;gap:10px}
.gal__h2 i{font-style:normal;font-size:14px;font-weight:500;color:var(--t3)}
/* the poster card carries its own title, so rows need no caption line under it */
.grid{gap:var(--gap)}
.poster__cap{display:none}
/* the card prints its own title at the foot, so the "new" flag moves out of the way, top right */
.poster__new{left:auto;right:8px;bottom:auto;top:8px;translate:none;font-size:10px;padding:3px 8px}
.row__all i{font-style:normal;color:var(--t3)}
/* language */
.poster__langs{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:100px;background:rgba(0,0,0,.72);font-size:11px;font-weight:600;color:#fff}
.lang-pill{display:inline-block;margin:4px 4px 0 0;padding:3px 10px;border-radius:100px;border:1px solid var(--glass-line);font-size:13px;color:#fff;transition:background-color .25s var(--e-out)}
.lang-pill:hover{background:rgba(64,64,64,.8)}
.lang-pill.on{background:#fff;color:#000;border-color:#fff}