/* QZLAR — Yomon, v2 (правки Умида 29.10): спокойная вёрстка лукбука оператора — кадры крупно, текст коротко.
   Шрифты: Inter Tight (заголовки и текст), IBM Plex Mono (подписи, оптика). Акцент — холодный; на «тёплых» слайдах — янтарь. */
@font-face{font-family:PM;src:url(../fonts/PM-400-cyrillic.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:PM;src:url(../fonts/PM-400-latin-ext.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:PM;src:url(../fonts/PM-400-latin.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:PM;src:url(../fonts/PM-500-cyrillic.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:PM;src:url(../fonts/PM-500-latin-ext.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:PM;src:url(../fonts/PM-500-latin.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:IT;src:url(../fonts/IT-300800-cyrillic.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:IT;src:url(../fonts/IT-300800-latin-ext.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:IT;src:url(../fonts/IT-300800-latin.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--bg:#060708;--ink:#ecefef;--mute:rgba(236,239,239,.6);--dim:rgba(236,239,239,.38);--line:rgba(236,239,239,.14);
  --cold:#bfe3ee;--warm:#ff9447;--accent:var(--cold);--fs:clamp(15px,1.05vw,20px)}
.warm{--accent:var(--warm)}
html,body{font:400 var(--fs)/1.5 IT,system-ui,sans-serif;letter-spacing:.003em}
img.miss{opacity:0}

/* рамка слайда — тихая, моноширинная */
.chrome{font:400 clamp(10px,.66vw,12px)/1 PM;letter-spacing:.08em;color:var(--dim)}
.chrome .num{color:var(--mute)}
.chrome .num b{color:var(--ink);font-weight:500}
.progress{height:1px;background:var(--ink)}

/* типографика */
.kicker{font:400 clamp(10px,.72vw,13px)/1.2 PM;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.h2{font:600 clamp(30px,4vw,78px)/1 IT;letter-spacing:-.03em;margin-top:.3em}
.lead{font:400 clamp(21px,2.1vw,40px)/1.22 IT;letter-spacing:-.015em;max-width:30ch}
.txt{color:var(--mute);max-width:46ch;margin-top:1.2em}
.txt.lg{font-size:clamp(18px,1.5vw,28px);line-height:1.35;color:var(--ink);max-width:34ch}
.small{font:400 clamp(11px,.75vw,13px)/1.5 PM;color:var(--dim);letter-spacing:.02em}
figure{overflow:hidden;background:#0c0e10}
figure img{width:100%;height:100%;object-fit:cover}
figcaption{font:400 clamp(10px,.68vw,12px)/1.35 PM;color:var(--mute);letter-spacing:.02em;padding-top:.7em}
.head .h2{margin-top:.2em}

/* язык */
.bar{position:fixed;z-index:20;top:calc(var(--pad)*.5 + 20px);right:var(--pad)}
.lang{display:flex}
.lang button,.toggle button{font:400 11px/1 PM;letter-spacing:.1em;color:var(--ink);background:rgba(6,7,8,.5);border:1px solid var(--line);padding:8px 11px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lang button+button,.toggle button+button{border-left:0}
.lang button[aria-pressed=true],.toggle button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
html.print .bar{display:none}

/* 01 обложка */
.cover{align-content:end;gap:calc(var(--pad)*.45)}
.cover .bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cover .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,7,8,.5) 0%,rgba(6,7,8,0) 30%,rgba(6,7,8,.2) 55%,rgba(6,7,8,.9) 100%)}
.cover .title{font:700 clamp(64px,13vw,250px)/.86 IT;letter-spacing:-.05em}
.cover .title .thin{font-weight:300;letter-spacing:-.04em}
.cover .meta{display:flex;gap:clamp(18px,4vw,80px);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
.cover .meta span{display:block;font:400 11px/1.4 PM;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.cover .meta b{display:block;font-weight:500;margin-top:.25em}

/* 02 вступление */
.intro{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--pad);align-items:center}
.intro figure{aspect-ratio:3/2}
.intro .who{margin-top:2em;font:400 12px/1 PM;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.intro .who::before{content:"";display:inline-block;width:36px;height:1px;background:var(--accent);margin-right:12px;vertical-align:3px}

/* кадр на весь экран + текст внизу */
.full{align-content:end}
.full .bg,.final .bg{position:absolute;inset:0;z-index:-2;background:none}
.full::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,7,8,0) 40%,rgba(6,7,8,.88) 100%)}
.full__txt{max-width:min(760px,60vw)}
.full .lead{margin-top:.5em;max-width:34ch}

/* строчка */
.quote{align-content:center;gap:calc(var(--pad)*.5)}
.quote blockquote{border-left:1px solid var(--accent);padding-left:clamp(16px,2vw,40px)}
.q-uz{font:600 clamp(26px,3.6vw,70px)/1.06 IT;letter-spacing:-.03em}
.q-uz em{font-style:normal;color:var(--warm)}
.q-ru{margin-top:.9em;font:300 clamp(17px,1.5vw,28px)/1.35 IT;color:var(--mute)}

/* 3D-макет */
.maq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--pad);align-items:center}
.maq ol{list-style:none;margin-top:1.4em;border-top:1px solid var(--line)}
.maq li{display:grid;grid-template-columns:8.5em 1fr;gap:1em;padding:.75em 0;border-bottom:1px solid var(--line);font-size:.92em}
.maq li b{font:500 .82em/1.7 PM;color:var(--accent);white-space:nowrap}
.maq li span{color:var(--mute)}
.maq .stage{border:1px solid var(--line)}
.maq .tag{font:400 10px/1 PM;letter-spacing:.06em;text-transform:none;padding:5px 7px}
.maq .tag::before{width:5px;height:5px}
.toggle{display:flex;margin-top:1.4em}
.hint{position:absolute;right:12px;bottom:10px;font:400 10px/1 PM;color:var(--dim);letter-spacing:.06em;pointer-events:none}

/* камера */
.hide{grid-template-rows:auto 1fr;gap:calc(var(--pad)*.5)}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,36px);align-content:center}
.cols3 figure{aspect-ratio:3/2;margin-bottom:1em}
.cols3 b{display:flex;gap:.7em;align-items:baseline;font-weight:600;font-size:1.05em}
.cols3 b i{font:400 .8em PM;font-style:normal;color:var(--accent)}
.cols3 p{margin-top:.5em;color:var(--mute);font-size:.92em}

/* свет */
.light{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:var(--pad);align-items:center}
.split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.split figure{aspect-ratio:4/5;position:relative}
.split figcaption{position:absolute;left:12px;bottom:12px;padding:0;color:var(--cold);text-transform:uppercase;letter-spacing:.12em}
.split figure.warm figcaption{color:var(--warm)}

/* галереи кадров */
.shots{grid-template-columns:minmax(0,.26fr) minmax(0,1fr);gap:var(--pad);align-items:center}
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px;width:min(100%,calc((100svh - 330px)*2.3));justify-self:end}
.gal figure{background:none}
.gal img{aspect-ratio:3/2;height:auto;background:#0c0e10}

/* портреты */
.flare{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--pad);align-items:center}
.g4{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,calc((100svh - 260px)*1.5));justify-self:end}
.g4 figure{aspect-ratio:3/2}

/* финал клипа */
.ending{grid-template-rows:auto 1fr auto;gap:calc(var(--pad)*.45)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-self:center}
.trio figure{aspect-ratio:3/2}
.ending .txt{margin-top:0;max-width:70ch}

/* костюмы */
.costume{grid-template-columns:minmax(0,.8fr) minmax(0,.62fr) minmax(0,1.1fr);gap:clamp(14px,2vw,36px);align-items:center}
.costume figure{background:#fff}
.costume .c-a{aspect-ratio:1215/1296}
.costume .c-b{aspect-ratio:1774/888}
.costume img{object-fit:contain}

/* Рик */
.rick{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto;gap:calc(var(--pad)*.5) var(--pad);align-items:center}
.acts{list-style:none;border-top:1px solid var(--line)}
.acts li{display:flex;gap:1.2em;padding:1em 0;border-bottom:1px solid var(--line)}
.acts li>b{font:500 .9em/1.6 PM;color:var(--accent);min-width:1.4em}
.acts h3{font-weight:600;font-size:1.05em}
.acts p{margin-top:.25em;color:var(--mute)}
.rick .task{grid-column:1/3;color:var(--mute);border-left:1px solid var(--accent);padding-left:18px;max-width:80ch}

/* техника */
.kit{grid-template-rows:auto 1fr;gap:calc(var(--pad)*.5)}
.kitgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--pad);align-content:center}
.kitgrid dl{display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line)}
.kitgrid dt,.kitgrid dd{padding:.8em 0;border-bottom:1px solid var(--line)}
.kitgrid dt{font:400 11px/1.9 PM;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding-right:1.6em}
.team{list-style:none;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.team li{padding:.75em .8em .75em 0;border-bottom:1px solid var(--line)}
.team b{display:block;font-weight:600}
.team span{color:var(--mute);font-size:.88em}

/* бюджет */
.nums{grid-template-rows:auto 1fr auto;gap:calc(var(--pad)*.5)}
.budget{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--pad);align-items:center;border-top:1px solid var(--line);padding-top:clamp(16px,2vw,36px)}
.big{font:600 clamp(64px,9vw,180px)/.9 IT;letter-spacing:-.05em}
.big small{font:400 .3em PM;color:var(--accent);margin-left:.25em;letter-spacing:0}
.steps{list-style:none}
.steps li{display:grid;grid-template-columns:3em 1fr;padding:.8em 0;border-bottom:1px solid var(--line)}
.steps b{grid-row:1/3;color:var(--accent);font:400 .8em/1.9 PM}
.steps span{font-weight:600}
.steps em{font-style:normal;color:var(--mute);font-size:.9em}

/* контакт */
.final{background:var(--bg);color:var(--ink);place-content:end start;text-align:left}
.final::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,7,8,.9) 0%,rgba(6,7,8,.55) 55%,rgba(6,7,8,.2) 100%)}
.final .chrome,.final .chrome .num{color:var(--dim)}
.final .chrome .num b{color:var(--ink)}
.final .h2{font-size:clamp(44px,7vw,140px)}
.final .sig{margin-top:.6em;color:var(--mute);font-size:1.05em}
.contact{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.6em}
.btn{font:500 clamp(12px,.85vw,15px)/1 PM;letter-spacing:.06em;padding:16px 22px;background:var(--ink);color:var(--bg);text-decoration:none;border:1px solid var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(236,239,239,.5)}
.btn:hover{background:var(--cold);border-color:var(--cold);color:var(--bg)}

/* ── телефон и узкие окна: кадры целиком (3:2, без обрезки), текст под ними ── */
@media (max-aspect-ratio:1/1){
  .slide{padding:calc(var(--pad)*2.6) var(--pad) calc(var(--pad)*2.4)}
  .bar{top:auto;bottom:14px;right:14px}
  .chrome .sign{display:none}
  .cover{padding-bottom:calc(var(--pad)*3.4)}
  .cover .title{font-size:24vw}
  .cover .meta{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;font-size:14px}
  .cover .meta div:last-child{grid-column:1/3}

  .intro,.maq,.light,.flare,.costume,.rick,.kitgrid,.budget,.shots{grid-template-columns:minmax(0,1fr);align-content:center}
  .intro{gap:calc(var(--pad)*1.1)}
  .lead{font-size:clamp(20px,5.6vw,26px)}
  .txt{font-size:15px;margin-top:1em}

  /* кадр на весь экран → кадр целиком сверху, текст ниже */
  .full{align-content:center;gap:calc(var(--pad)*1.1)}
  .full::after{display:none}
  .full .bg{position:static;aspect-ratio:3/2;margin:0 calc(var(--pad)*-1)}
  .full__txt{max-width:none}

  .maq .stage{height:38svh}
  .maq li{grid-template-columns:7em 1fr;font-size:.85em;padding:.55em 0}
  .maq li:nth-child(4){display:none}
  .maq ol{margin-top:.9em}

  .hide{grid-template-rows:auto auto;align-content:center}
  .cols3{grid-template-columns:minmax(0,1fr);gap:16px}
  .cols3>div{display:grid;grid-template-columns:40% 1fr;gap:4px 14px;align-items:start}
  .cols3 figure{grid-row:1/3;margin:0}
  .cols3 b{font-size:.95em}
  .cols3 p{margin-top:0;font-size:.8em;line-height:1.4}

  .light{gap:calc(var(--pad)*.9)}
  .split{grid-template-columns:minmax(0,1fr);gap:8px}
  .split figure{aspect-ratio:3/2}

  .shots{gap:calc(var(--pad)*.8)}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 8px;width:100%}
  .gal figcaption{font-size:9.5px;padding-top:.5em}

  .g4{width:100%;gap:6px}
  .trio{grid-template-columns:1fr 1fr;gap:6px}
  .trio figure:first-child{grid-column:1/3}
  .ending{grid-template-rows:auto auto auto;align-content:center}

  .costume{gap:12px}
  .costume .c-a{aspect-ratio:auto;height:30svh}
  .costume .c-b{width:100%}

  .rick .task{grid-column:auto;font-size:.85em}
  .rick .txt.lg{font-size:17px}
  .acts li{padding:.6em 0;font-size:.9em}
  .team{font-size:.85em}
  .kitgrid dl{font-size:.85em}
  .kitgrid{gap:calc(var(--pad)*1.2)}
  .big{font-size:21vw}

  .final .bg img{object-position:58% 50%}
  .final::after{background:linear-gradient(180deg,rgba(6,7,8,.2) 0%,rgba(6,7,8,.6) 45%,rgba(6,7,8,.92) 100%)}
  .final .h2{font-size:12vw}
}
@media (max-aspect-ratio:1/1) and (max-height:760px){
  .cols3 p{display:none}.cols3>div{grid-template-columns:34% 1fr;align-items:center}
  .gal figcaption{display:none}.gal{gap:8px}
  .rick .task{display:none}
  .intro .txt{font-size:14px}
  .maq li:nth-child(3){display:none}
}