/* Layout: рецензия — обложка-кадр с оценкой-кольцом, под ней «паспорт рецензии» (оценка, кому подойдёт, плюсы и минусы), затем текст в колонке ~680px и итог. */

.progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--accent);z-index:60}
.r-hero{position:relative;min-height:clamp(560px,82vh,860px);display:grid;align-items:end;overflow:hidden;isolation:isolate}
.r-hero>img,.r-hero>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;z-index:-2}
.r-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.35) 55%,transparent),linear-gradient(0deg,var(--bg),rgba(0,0,0,.4) 35%,transparent 65%)}
.r-hero .wrap{width:100%;padding-block:120px 48px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.r-hero .txt{display:grid;gap:16px;justify-items:start;max-width:760px}
.r-hero h1{font:800 clamp(2.3rem,5.4vw,4.4rem)/1.02 var(--font-display);letter-spacing:-.045em;text-wrap:balance}
.r-hero .dek{font-size:clamp(1.05rem,1.5vw,1.25rem);color:rgba(245,245,247,.85);max-width:50ch}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:.9rem;color:rgba(245,245,247,.72)}
.byline .ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3a3a40,#1d1d21);display:inline-grid;place-items:center;font:700 .75rem/1 var(--font-display);color:var(--fg);vertical-align:middle;margin-right:8px}
.byline b{color:var(--fg);font-weight:600}
.big-ring{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--accent) calc(var(--v) * 1%),rgba(255,255,255,.14) 0)}
.big-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.big-ring span{position:relative;display:grid;justify-items:center;gap:4px}
.big-ring b{font:800 3rem/1 var(--font-display);letter-spacing:-.04em}
.big-ring small{font:600 .68rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(245,245,247,.7)}
@media (max-width:700px){.r-hero .wrap{grid-template-columns:minmax(0,1fr)}.big-ring{width:112px;height:112px;order:-1}.big-ring b{font-size:2.2rem}}

.passport{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(20px,3vw,32px)}
.pp{background:var(--card);border-radius:var(--r-lg);padding:20px;display:grid;gap:10px;align-content:start}
.pp h2{font:600 .74rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.pp p{color:var(--fg-2);font-size:.95rem}
.pp ul{display:grid;gap:8px;font-size:.95rem;color:var(--fg-2)}
.pp li{padding-left:22px;position:relative}
.pp.pros li::before{content:"+";position:absolute;left:2px;color:var(--up);font-weight:700}
.pp.cons li::before{content:"−";position:absolute;left:2px;color:var(--down);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 .8rem/1 var(--font-ui);padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
.chip.safe{background:rgba(48,209,88,.14);color:var(--up)}
@media (max-width:1000px){.passport{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.passport{grid-template-columns:minmax(0,1fr)}}

.r-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,680px) minmax(0,1fr);column-gap:40px;padding-top:clamp(36px,5vw,64px)}
.r-body>*{grid-column:2}
.film-aside{grid-column:3;grid-row:1 / span 50;align-self:start;position:sticky;top:96px;width:220px;display:grid;gap:12px}
.film-aside img{border-radius:var(--r-md);aspect-ratio:2/3;object-fit:cover;width:100%}
.film-aside b{font:700 1.05rem/1.2 var(--font-display)}
.film-aside span{font-size:.82rem;color:var(--fg-3)}
@media (max-width:1180px){.film-aside{display:none}.r-body{grid-template-columns:minmax(0,1fr)}.r-body>*{grid-column:1}}
.prose{font-size:1.18rem;line-height:1.72;color:rgba(245,245,247,.88)}
.prose>*+*{margin-top:1.15em}
.prose strong{color:var(--fg);font-weight:600}
.prose h2{font:700 clamp(1.5rem,2.4vw,1.9rem)/1.15 var(--font-display);letter-spacing:-.03em;color:var(--fg);margin-top:2em}
.fig{display:grid;gap:10px;width:min(1100px,calc(100vw - 2 * var(--gutter)));justify-self:center;margin-block:2.2em}
.fig img{width:100%;border-radius:var(--r-md)}
.fig figcaption{font-size:.85rem;color:var(--fg-3)}
.pull{margin-block:2em;padding:6px 0 6px 24px;border-left:3px solid var(--accent)}
.pull p{font:700 clamp(1.4rem,2.4vw,1.9rem)/1.2 var(--font-display);letter-spacing:-.03em;color:var(--fg)}
.spoiler{border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.spoiler summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;font:600 1rem/1.3 var(--font-ui);color:var(--fg)}
.spoiler summary::-webkit-details-marker{display:none}
.spoiler summary span{font:600 .72rem/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:#ff9f0a;background:rgba(255,159,10,.14);padding:6px 9px;border-radius:999px}
.spoiler summary:focus-visible{outline:2px solid var(--fg);outline-offset:-2px}
.spoiler div{padding:0 22px 20px;font-size:1.05rem;color:var(--fg-2)}
.verdict{margin-top:2.6em;padding:28px;border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(255,55,95,.18),rgba(255,55,95,.04));border:1px solid rgba(255,55,95,.25);display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center}
.verdict .score{font:800 4rem/.9 var(--font-display);letter-spacing:-.05em;color:var(--fg)}
.verdict .score small{display:block;font:600 .72rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-top:8px}
.verdict h2{font:700 1.3rem/1.2 var(--font-display);color:var(--fg);margin:0 0 8px}
.verdict p{font-size:1rem;color:var(--fg-2)}
@media (max-width:560px){.verdict{grid-template-columns:minmax(0,1fr)}}
.reader{margin-top:28px;padding:22px;border-radius:var(--r-lg);background:var(--card);display:grid;gap:12px;font-size:1rem}
.reader b{font:700 1.1rem/1.2 var(--font-display);color:var(--fg)}
.reader .line{display:flex;align-items:center;gap:14px}
.reader input{flex:1;accent-color:var(--accent);min-width:0}
.reader output{font:800 1.5rem/1 var(--font-display);min-width:2.6ch;text-align:right}
.author-box{margin-top:28px;display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:center;padding:18px;border-radius:var(--r-lg);border:1px solid var(--line);color:var(--fg-2);font-size:.95rem}
.author-box .ava{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#3a3a40,#1d1d21);display:grid;place-items:center;font:800 .9rem/1 var(--font-display);color:var(--fg)}
.author-box b{display:block;color:var(--fg);font:700 1.05rem/1.2 var(--font-display)}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.more a{display:grid;gap:10px}
.more .img{aspect-ratio:16/10}
.more .k{font:600 .74rem/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.more h3{font:700 1.02rem/1.3 var(--font-display)}
@media (max-width:860px){.more{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* Широкие кадры проходят поверх липкой карточки фильма */
.fig{position:relative;z-index:3}
.film-aside{z-index:1;background:var(--card);padding:14px;border-radius:var(--r-lg)}
.prose .pull,.prose .verdict,.prose .spoiler{position:relative;z-index:2}