/*
Theme Name: Seedream Ru
Theme URI: https://seedreamai.info
Author: Seedream Ru
Description: Брендовая тема seedreamai.info. Язык дизайна — «монтажный лист».
Version: 1.2.0
Text Domain: seedream-info
*/

/* ═══════════════ токены ═══════════════
   Палитра снята кодом из бандла офсайта main.9dc4f7fd.css (28.08.2026):
   #fcfcfd 15 вхождений, #212121 41, #62636c 37, #f4f7fb 6, #d8d9e0 7,
   #2194ea 9, #2efdff 7. Индиговый #3c56f4 сознательно НЕ взят — он уже
   стоит у двух соседей по тому же офсайту.
   Геометрия тоже офсайтная: контейнер .mw-container = 90vw / 1520px,
   радиус кнопки 80px с inset-рамкой, радиус блока 8px,
   сглаживание cubic-bezier(.34,.69,.1,1) — 68 вхождений, самое частое.
*/
:root{
  --paper:#FCFCFD;
  --surface:#F4F7FB;
  --card:#FFFFFF;
  --line:#D8D9E0;
  --line-soft:#E8EAF0;
  --ink:#212121;
  --muted:#62636C;
  --accent:#2194EA;
  --accent-deep:#1272C4;
  --accent-pale:#E7F2FC;
  --neon:#2EFDFF;

  --wrap:1520px;
  --r:8px;
  --r-btn:80px;
  --ease:cubic-bezier(.34,.69,.1,1);
  --t:.22s;

  --f-display:"Brygada 1918",Georgia,"Times New Roman",serif;
  --f-text:"Sansation","Segoe UI",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* полосатая заливка-заглушка. Один источник на .frame--empty и .shot::after */
  --stripe:repeating-linear-gradient(135deg,var(--surface) 0 12px,#EDF1F7 12px 24px);
  /* пастельные подложки отдельных карточек — из тех же токенов палитры */
  --tint-sky:linear-gradient(152deg,#E7F2FC 0%,#FCFCFD 76%);
  --tint-aqua:linear-gradient(152deg,#E3F8FA 0%,#FCFCFD 76%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-text);font-size:17px;line-height:1.62;
  overflow-x:clip;
}
img,video,svg{max-width:100%;display:block}
a{color:var(--accent-deep);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;margin:0;letter-spacing:-.03em;line-height:1.06}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.15em}
li{margin:.3em 0}
strong{font-weight:700}

.wrap{width:90vw;max-width:var(--wrap);margin-inline:auto}
.wrap--text{max-width:820px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r)}
.skip:focus{left:16px;top:16px}

/* ═══════════════ кнопки — форма офсайта ═══════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-text);font-size:16px;font-weight:700;line-height:1;
  min-height:46px;padding:0 26px;border:0;border-radius:var(--r-btn);
  cursor:pointer;text-align:center;transition:background var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.btn:hover{text-decoration:none}
.btn--fill{background:var(--accent);color:#fff}
.btn--fill:hover{background:var(--accent-deep)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(33,33,33,.2)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px rgba(33,33,33,.55)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#000}
.btn--xs{min-height:36px;padding:0 16px;font-size:14px;white-space:nowrap}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ═══════════════ шапка — прозрачная, по ширине контента ═══════════════
   Боковых полей у самой шапки нет: границы задаёт .wrap — тот же контейнер,
   что у секций ниже (90vw / 1520px). Свой padding-inline уводил содержимое
   шапки внутрь на 110px и не давал навигации уместиться в строку.
*/
.site-header{
  position:absolute;inset:0 0 auto;z-index:40;
  padding:40px 0 0;
  display:flex;align-items:center;gap:20px;
}
/* внутренний контейнер прозрачной шапки: ширину держит .wrap, не width:100% */
.hdr-in{display:flex;align-items:center;gap:20px}
.site-header--solid{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--line-soft);padding-block:18px}
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;font-family:var(--f-display);font-size:21px;font-weight:700;letter-spacing:-.03em}
.brand:hover{text-decoration:none}
.brand__mark{width:30px;height:30px;flex:0 0 auto}
.brand__ru{color:var(--muted);font-weight:400}
/* строка меню не переносится: две строки распирали шапку с 68px до 103px */
.nav{display:flex;gap:22px;margin-left:auto;align-items:center;flex-wrap:nowrap}
.nav a{color:var(--ink);font-size:15px;opacity:.78;white-space:nowrap}
.nav a:hover,.nav a.is-on{opacity:1;text-decoration:none}
.nav a.is-on{color:var(--accent-deep)}
.header-cta{margin-left:18px}
.burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:transparent;border:0;border-radius:var(--r);cursor:pointer;margin-left:auto}
.burger span{display:block;width:16px;height:2px;border-radius:2px;background:var(--ink);transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.mnav{display:none;position:absolute;inset:100% 16px auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;box-shadow:0 18px 50px rgba(33,33,33,.13)}
.mnav.is-open{display:block}
.mnav a{display:block;padding:11px 12px;color:var(--ink);border-radius:6px;font-size:16px}
.mnav a:hover{background:var(--surface);text-decoration:none}
.mnav a.is-on{color:var(--accent-deep)}

/* ═══════════════ первый экран: кадр + гигантская литера ═══════════════ */
.hero{position:relative;overflow-x:clip;padding:0 0 40px}
.hero__stage{position:relative;min-height:min(74vh,660px);display:flex;align-items:flex-end;padding:132px 0 48px;overflow:clip;border-radius:0 0 var(--r) var(--r)}
.hero__bg{position:absolute;inset:0;z-index:0;background:linear-gradient(140deg,#EAF2FA 0%,#F7F9FC 46%,#E4EEF7 100%)}
.hero__bg .frame,.hero__bg .frame__media{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.hero__bg .frame::before{content:none}
.hero__bg .frame__media{object-fit:cover}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(252,252,253,.14) 0%,rgba(252,252,253,.34) 42%,rgba(252,252,253,.74) 100%)}
/* гигантская литера — несущий приём первого экрана */
.hero__glyph{
  position:absolute;z-index:1;right:2vw;bottom:-6vw;pointer-events:none;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(20rem,42vw,52rem);line-height:.72;letter-spacing:-.06em;
  color:var(--accent);opacity:.10;
}
/* ширину задаёт .wrap (90vw / 1520px) — своё width:100% тут перебивало бы её */
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr)}
.hero__col{max-width:min(960px,100%);margin-left:auto;text-align:right;min-width:0}
.hero h1{font-size:clamp(2.2rem,1.2rem+3.1vw,4rem);letter-spacing:-.05em;margin-bottom:18px;overflow-wrap:break-word}
.hero h1 em{font-style:normal;color:var(--accent-deep)}
.hero__lead{font-size:clamp(1.02rem,.96rem+.4vw,1.3rem);color:var(--muted);margin:0 0 26px;margin-left:auto;max-width:560px}
.hero__actions{justify-content:flex-end}
.hero__note{margin:16px 0 0;font-size:14px;color:var(--muted)}

/* ═══════════════ разделитель секций (референс 5) ═══════════════ */
.rule{display:flex;align-items:center;gap:16px;padding:44px 0 22px;min-width:0}
.rule__idx{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--muted);flex:0 0 auto}
.rule__line{flex:1 1 auto;height:1px;background:var(--line);min-width:12px}
.rule__mark{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--muted);flex:0 1 auto;min-width:0;text-transform:lowercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* числа живут в линейке разделителя, а не в плашках */
.rule__num{font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,1.2rem+1.4vw,2.6rem);letter-spacing:-.04em;color:var(--ink);flex:0 1 auto;min-width:0;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rule__num i{font-style:normal;font-family:var(--f-text);font-weight:400;font-size:13px;color:var(--muted);margin-left:7px}
.lbl-short{display:none}

/* ═══════════════ секции ═══════════════ */
.sec{padding:14px 0 54px;overflow-x:clip}
.sec__h{font-size:clamp(1.7rem,1.25rem+1.8vw,3rem);margin:0 0 14px;max-width:20ch}
.sec__h em{font-style:normal;color:var(--muted)}
.sec__sub{color:var(--muted);max-width:70ch;margin:0 0 26px}

/* ═══════════════ накладывающиеся блоки — несущий приём ═══════════════ */
.lap{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
@media(min-width:961px){
  .lap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0}
  /* правый блок заезжает на левый — поэтому левому даётся поле под заезд,
     иначе накладка съедает строки текста, а не пустое место */
  .lap__a{grid-column:1;grid-row:1;z-index:1;padding-right:11%}
  .lap__b{grid-column:2;grid-row:1;z-index:2;margin-left:-9%;margin-top:78px}
  /* зеркальный вариант должен зеркалить и треки. Пока колонки оставались
     7fr 5fr, минус-поле блока .lap__b считалось от ШИРОКОЙ колонки (9% от 7fr),
     а поле-резерв под заезд у .lap__a — от УЗКОЙ (11% от 5fr). Резерв выходил
     меньше наезда, и тёмная плашка (z-index:2) залезала на текст соседа. */
  .lap--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .lap--flip .lap__a{grid-column:2;grid-row:1;padding-right:0;padding-left:11%}
  .lap--flip .lap__b{grid-column:1;grid-row:1;margin-left:0;margin-right:-9%;margin-top:64px}
  .lap--deep .lap__b{margin-top:130px}
}
.pane{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 30px}
.pane--tint{background:var(--surface);border-color:var(--line-soft)}
.pane--ink{background:var(--ink);border-color:var(--ink);color:#fff}
.pane--ink .pane__t,.pane--ink h3{color:#fff}
.pane--ink p,.pane--ink li{color:rgba(255,255,255,.76)}
.pane__t{font-family:var(--f-display);font-size:1.32rem;font-weight:600;letter-spacing:-.03em;margin:0 0 10px}
.pane p:last-child,.pane ul:last-child{margin-bottom:0}

/* ═══════════════ кадры и мозаика внахлёст ═══════════════ */
.frame{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--surface);isolation:isolate}
.frame__media{width:100%;height:100%;object-fit:cover;display:block}
.frame--16x9::before{content:"";display:block;padding-top:56.25%}
.frame--4x5::before{content:"";display:block;padding-top:125%}
.frame--9x16::before{content:"";display:block;padding-top:177.8%}
.frame--1x1::before{content:"";display:block;padding-top:100%}
.frame--3x2::before{content:"";display:block;padding-top:66.7%}
.frame--21x9::before{content:"";display:block;padding-top:42.9%}
.frame--16x9 .frame__media,.frame--4x5 .frame__media,.frame--9x16 .frame__media,
.frame--1x1 .frame__media,.frame--3x2 .frame__media,.frame--21x9 .frame__media{position:absolute;inset:0}
.frame--empty{background:var(--stripe)}
.frame__stub{position:absolute;inset:0}

/* ═══════════════ кадр по пропорциям самого файла ═══════════════
   Слоты (frame--16x9 и прочие) резали кадр под свою пропорцию: у владельца
   в теме лежат файлы от 0.565 (узкая вертикаль) до 2.347 (панорама), и один
   и тот же shot-poster вызывался пятью разными слотами. Теперь высоту задаёт
   --ar с реальными пикселями файла, а object-fit:contain гарантирует, что
   даже при упоре в max-height кадр не режется, а разве что получит поля.
*/
.frame--auto{aspect-ratio:var(--ar,16/9);max-height:min(72vh,760px);background:var(--surface)}
.frame--auto::before{content:none}
.frame--auto .frame__media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* <picture> не должен создавать собственный бокс между .frame и .frame__media */
.frame picture{display:contents}
/* первый экран — исключение: там кадр это фон, он обязан закрывать площадь */
.hero__bg .frame--auto{aspect-ratio:auto;max-height:none;background:none}
.hero__bg .frame--auto .frame__media{object-fit:cover}

/* ховер: из-под кадра выезжает подложка, сам кадр стоит.
   Подложка привязана к КАДРУ, а не к боксу .shot. Раньше она была inset:0 по
   боксу, и после перехода кадров на .frame--auto это стреляло: ограничение
   max-height переносится пропорцией в max-width, кадр становится уже своей
   колонки (на /redaktirovanie/ вертикальный 1024×1536 занимает 432px из 567px),
   бокс оставался во всю ширину — и полоса торчала справа на 135px.
   Прижать бокс к ширине кадра нельзя: .frame--auto .frame__media позиционирован
   абсолютно, вклад в ширину нулевой, и .shot схлопывается вместе с кадром до
   сотни пикселей — проверено. Привязка к кадру даёт ровно 45px справа при любой
   ширине колонки и любой пропорции файла.
   overflow:visible нужен, чтобы подложка вышла за кадр; скругление при этом
   переезжает на саму картинку.
   align-self:start — чтобы бокс не растягивался по высоте ряда сетки и подпись
   оставалась сразу под кадром. */
.shot{position:relative;display:block;isolation:isolate;align-self:start}
.shot .frame{overflow:visible}
/* фон на самой картинке обязателен: подложка лежит внутри кадра и рисуется
   ПОВЕРХ его фона (у .frame стоит isolation:isolate), поэтому пока картинка
   не загрузилась, без этого сквозь неё видны полосы во весь кадр. */
.shot .frame__media{border-radius:var(--r);background:var(--surface)}
.shot .frame::after{
  content:"";position:absolute;inset:0 -45px 0 0;border-radius:var(--r);background:var(--stripe);
  z-index:-1;transform:translate(0,0);transition:transform var(--t) var(--ease);
}
.shot:hover .frame::after,.shot:focus-visible .frame::after{transform:translate(9px,9px)}
/* подпись кадра выровнена по правому краю кадра */
.shot__cap{display:block;margin-top:9px;font-size:13px;color:var(--muted);font-family:var(--f-mono);letter-spacing:.02em;text-align:right}

/* асимметричная мозаика из кадров разных пропорций (референс 7) */
.mosaic{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:761px){
  .mosaic{grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-items:start}
  .mosaic > *:nth-child(1){grid-column:1/span 5}
  .mosaic > *:nth-child(2){grid-column:6/span 4;margin-top:56px}
  .mosaic > *:nth-child(3){grid-column:10/span 3;margin-top:-18px}
  .mosaic > *:nth-child(4){grid-column:2/span 3;margin-top:-34px}
  .mosaic > *:nth-child(5){grid-column:5/span 5;margin-top:22px}
  .mosaic > *:nth-child(6){grid-column:10/span 3;margin-top:-52px}
}

/* ═══════════════ сетки карточек ═══════════════ */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media(min-width:661px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:861px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:661px) and (max-width:860px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:961px){.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:661px) and (max-width:960px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;min-width:0;display:flex;flex-direction:column;gap:9px}
.card__t{font-family:var(--f-display);font-size:1.2rem;font-weight:600;letter-spacing:-.03em;min-width:0}
.card__n{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.card p{margin:0;color:var(--muted);min-width:0}
.card--lead{background:var(--accent-pale);border-color:#CFE5F7}
/* пастель на отдельных карточках: каждая третья, два оттенка по очереди.
   Оттенки светлее #E3F8FA, текст --muted держит на них 5.4:1 — контраст цел. */
.grid > .card:nth-child(6n+1):not(.card--lead){background:var(--tint-sky);border-color:#D3E6F7}
.grid > .card:nth-child(6n+4):not(.card--lead){background:var(--tint-aqua);border-color:#CDE8EB}

/* ═══════════════ таблицы ═══════════════ */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:15px;background:var(--card)}
th,td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-family:var(--f-text);font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--muted);background:var(--surface);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
@media(max-width:640px){
  .tbl-scroll{border:0;overflow:visible}
  table,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tr{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;padding:6px 4px}
  td{border-bottom:1px solid var(--line-soft);padding:10px 14px}
  tr td:last-child{border-bottom:0}
  td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
}

/* ═══════════════ звёзды ═══════════════ */
.stars{position:relative;display:inline-block;line-height:0;color:#D7DBE2}
.stars svg{display:inline-block;fill:currentColor;vertical-align:middle}
.stars__bg{display:inline-block;white-space:nowrap}
.stars__fg{position:absolute;top:0;left:0;bottom:0;overflow:hidden;white-space:nowrap;color:#F3A712}
.rate{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rate__num{font-family:var(--f-display);font-weight:700;font-size:2.9rem;letter-spacing:-.045em;line-height:1}
.crit{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.crit__row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.crit__row:last-child{border-bottom:0}
@media(min-width:761px){.crit__row{grid-template-columns:minmax(0,220px) minmax(0,110px) minmax(0,1fr);align-items:center;gap:18px}}
.crit__n{font-weight:700;min-width:0}
.crit__s{font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:-.03em}
.crit__d{color:var(--muted);font-size:15px;min-width:0}

.voice{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;min-width:0;display:flex;flex-direction:column;gap:9px}
.voice__top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.voice__who{font-family:var(--f-display);font-weight:600;font-size:1.08rem;letter-spacing:-.02em}
.voice__when{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.voice p{margin:0;min-width:0}

/* ═══════════════ аккордеон ═══════════════ */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.acc__item{border-bottom:1px solid var(--line-soft)}
.acc__item:last-child{border-bottom:0}
.acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:transparent;border:0;padding:18px 22px;cursor:pointer;text-align:left;
  font-family:var(--f-display);font-size:1.1rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.acc__btn:hover{background:var(--surface)}
.acc__sign{flex:0 0 auto;width:22px;height:22px;position:relative}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;left:50%;top:50%;background:var(--accent);border-radius:2px;transform:translate(-50%,-50%);transition:transform var(--t) var(--ease)}
.acc__sign::before{width:13px;height:2px}
.acc__sign::after{width:2px;height:13px}
.acc__item.is-open .acc__sign::after{transform:translate(-50%,-50%) scaleY(0)}
.acc__wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t) var(--ease)}
.acc__item.is-open .acc__wrap{grid-template-rows:1fr}
.acc__in{overflow:hidden;min-height:0}
.acc__in p{margin:0;padding:0 22px 20px;color:var(--muted)}

/* ═══════════════ перелинковка ═══════════════ */
.next{padding:22px 0 60px}
.next__h{font-size:1.5rem;margin:0 0 16px}
.next__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media(min-width:661px){.next__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:961px){.next__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.next__card{display:flex;flex-direction:column;gap:5px;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);min-width:0;transition:box-shadow var(--t) var(--ease)}
.next__card:hover{text-decoration:none;box-shadow:inset 0 0 0 1px var(--accent)}
.next__t{font-family:var(--f-display);font-weight:600;font-size:1.08rem;letter-spacing:-.025em}
.next__d{font-size:14px;color:var(--muted)}

/* ═══════════════ внутренние страницы ═══════════════ */
/* .page — это класс BODY (его ставит WordPress), а не обёртки контента.
   Отступ 150px нужен только главной: там хедер position:absolute и лежит
   поверх первого экрана. На внутренних хедер sticky и стоит в потоке, так что
   те же 150px превращаются в пустую полосу над ним.
   Прежнее правило .site-header--solid + .page срабатывать не могло: хедер —
   ребёнок body, а не его сосед. Условие солидного хедера в header.php — это
   «не главная», поэтому body:not(.home) ему точно соответствует. */
.page{padding:80px 0 0}
body:not(.home){padding-top:36px}
.crumbs{display:flex;gap:9px;font-size:13px;color:var(--muted);margin-bottom:16px;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.page__h1{font-size:clamp(2.1rem,1.4rem+2.9vw,4.2rem);letter-spacing:-.05em;margin:0 0 16px;max-width:22ch}
.page__lead{font-size:clamp(1.02rem,.97rem+.34vw,1.24rem);color:var(--muted);max-width:66ch;margin:0 0 8px}
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.5rem,1.2rem+1.2vw,2.3rem);margin:38px 0 12px}
.prose h3{font-size:1.28rem;margin:26px 0 9px}
.prose ul li::marker{color:var(--accent)}

/* ═══════════════ CTA-лента ═══════════════ */
.band{background:var(--ink);color:#fff;border-radius:var(--r);padding:44px 40px;margin:36px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center;overflow:clip}
@media(min-width:861px){.band{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:36px}}
.band h2{color:#fff;font-size:clamp(1.5rem,1.2rem+1.3vw,2.4rem);margin:0 0 8px}
.band p{color:rgba(255,255,255,.72);margin:0;max-width:60ch}

/* ═══════════════ подвал (референс 5, без гигантской надписи) ═══════════════ */
.site-footer{margin-top:56px;border-top:1px solid var(--line);padding-bottom:34px}
.foot-rule{display:flex;align-items:center;gap:16px;padding:16px 0 30px;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.foot-rule span:nth-child(2){flex:1 1 auto;height:1px;background:var(--line)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media(min-width:761px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1041px){.foot-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr)}}
.foot-col{min-width:0}
.foot-col h3{font-family:var(--f-text);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:0 0 8px}
.foot-col a{color:var(--ink);font-size:15px}
.foot-reach{font-family:var(--f-display);font-size:clamp(1.5rem,1.2rem+1.2vw,2.2rem);letter-spacing:-.04em;margin:0 0 14px}
.foot-note{margin-top:30px;padding-top:18px;border-top:1px solid var(--line-soft);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;font-size:13px;color:var(--muted)}
.foot-note p{margin:0;max-width:78ch}

/* ═══════════════ появление блоков ═══════════════
   Скрытое состояние вешается ТОЛЬКО под .js: без скрипта текст виден сразу.
*/
.js .lift{opacity:0;transform:translateY(22px)}
.js .lift.is-in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .lift--d1.is-in{transition-delay:.06s}
.js .lift--d2.is-in{transition-delay:.12s}
.js .lift--d3.is-in{transition-delay:.18s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .lift{opacity:1;transform:none}
  .shot:hover::after{transform:none}
}

/* ═══════════════ адаптив ═══════════════ */
@media(max-width:1200px){.site-header{padding:32px 0 0}}
/* 961-1200: девять пунктов меню в одну строку помещаются только ужатыми */
@media(min-width:961px) and (max-width:1200px){
  .nav{gap:13px}
  .nav a{font-size:14px}
  .header-cta{margin-left:10px}
  .lbl-full{display:none}
  .lbl-short{display:inline}
}
@media(max-width:960px){
  .site-header{padding:20px 0 0}
  .site-header--solid{padding-block:14px}
  .nav{display:none}
  .burger{display:flex}
  .header-cta{margin-left:0;order:2}
  .burger{order:3;margin-left:8px}
  .hero__stage{min-height:auto;padding:118px 0 34px}
  .hero__col{text-align:left;margin-left:0}
  .hero__lead{margin-left:0}
  .hero__actions{justify-content:flex-start}
  .hero__glyph{font-size:clamp(14rem,54vw,26rem);bottom:-10vw;right:-4vw;opacity:.08}
  .page{padding-top:50px}
  body:not(.home){padding-top:20px}
  .band{padding:32px 24px}
}
@media(max-width:960px){
  .header-cta{margin-left:auto}
  .site-header{gap:12px}
  .hdr-in{gap:12px}
}
@media(max-width:640px){
  /* маркер и вторая линейка разделителя не помещаются на телефоне */
  .rule__mark{display:none}
  .rule__num + .rule__line{display:none}
}
@media(max-width:560px){
  body{font-size:16px}
  .pane{padding:22px 20px}
  .card{padding:20px}
  .rule{padding:32px 0 18px;gap:12px}
  .rule__num{font-size:1.5rem}
  .foot-note{flex-direction:column;gap:10px}
}
@media(max-width:444px){
	.brand__ru{display:none}}

@media(max-width:430px){
  .brand__ru{display:none}
  .brand{font-size:17px;gap:8px}
  .brand__mark{width:26px;height:26px}
  .btn{padding:0 18px;font-size:15px}
  .header-cta .btn{padding:0 14px;font-size:14px;min-height:40px}
  .lbl-full{display:none}
  .lbl-short{display:inline}
  .site-header{gap:8px}
  .hdr-in{gap:8px}
  .burger{width:38px;height:38px;margin-left:2px}
}

/* ═══════════════ полноэкранный просмотр кадров ═══════════════
   Замок прокрутки: позицию возвращает скрипт, поэтому прыжка нет,
   а padding-right компенсирует исчезнувшую полосу прокрутки. */
.js-zoom{cursor:zoom-in}
.is-lbx-open body{position:fixed;left:0;right:0;overflow:hidden}

.lbx{
  position:fixed;inset:0;z-index:400;
  display:grid;place-items:center;
  padding:clamp(12px,3vw,46px);
  /* снизу воздух под счётчик кадров, иначе подпись садится на него */
  padding-bottom:clamp(44px,4.5vw,74px);
  background:rgba(10,12,18,.94);
  overscroll-behavior:contain;
  animation:lbx-in .18s var(--ease) both;
}
.lbx[hidden]{display:none}
.lbx [hidden]{display:none!important}

.lbx__stage{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:14px;width:100%;height:100%;min-width:0;min-height:0}
.lbx__img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;align-self:center;
  border-radius:var(--r);cursor:zoom-out;
  animation:lbx-pic .2s var(--ease) both;
}
.lbx__cap{margin:0;max-width:860px;text-align:center;color:rgba(255,255,255,.82);font-family:var(--f-mono);font-size:13px;letter-spacing:.02em;line-height:1.45}

.lbx__x,.lbx__nav{
  position:absolute;display:grid;place-items:center;
  width:46px;height:46px;padding:0;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:rgba(18,22,32,.72);color:#fff;
  font-family:var(--f-text);font-size:26px;line-height:1;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.lbx__x:hover,.lbx__nav:hover{background:rgba(33,148,234,.85)}
.lbx__x:focus-visible,.lbx__nav:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.lbx__x{top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);font-size:30px}
.lbx__nav{top:50%;transform:translateY(-50%)}
.lbx__prev{left:clamp(6px,1.4vw,20px)}
.lbx__next{right:clamp(6px,1.4vw,20px)}
.lbx__num{position:absolute;left:0;right:0;bottom:clamp(6px,1.4vw,16px);margin:0;text-align:center;color:rgba(255,255,255,.6);font-family:var(--f-mono);font-size:12px;letter-spacing:.08em}

@media(max-width:560px){
  .lbx{padding:12px 12px 58px}
  .lbx__x,.lbx__nav{width:40px;height:40px;font-size:22px}
  .lbx__nav{top:auto;bottom:8px;transform:none}
  .lbx__prev{left:calc(50% - 80px)}
  .lbx__next{right:calc(50% - 80px)}
  .lbx__num{bottom:22px}
}

@keyframes lbx-in{from{opacity:0}to{opacity:1}}
@keyframes lbx-pic{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .lbx,.lbx__img{animation:none}
}