/* ============================================================
   styles.css – вёрстка (читает токены из theme.css)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh}
/* height:auto обязателен: атрибуты width/height у <img> резервируют место (это хорошо –
   страница не прыгает при загрузке), но без него ведут себя как ЖЁСТКАЯ высота, и когда
   max-width сжимает ширину, кадр растягивается. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
main{flex:1}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1;margin:0;letter-spacing:-.02em}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--on-red);background:var(--red);padding:8px 12px 6px;border-radius:6px}
.eyebrow.plain{background:transparent;color:var(--red);padding:0}
.muted{color:var(--muted)}

/* Появления (минимум движения) – прячем только при активном JS */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---------- Шапка ---------- */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative}
.brand{display:flex;align-items:center;gap:11px}
.brand b{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:0;color:var(--ink)}
.brand b .r{color:var(--red)}
/* Промежутки заданы в vw, а .wrap упирается в --maxw: на широких экранах строка меню теряла место
   (поля и зазоры росли, полезная ширина – нет) и пункты уезжали под «Ещё». Ограничиваем рост. */
.nav-cluster{display:flex;align-items:center;gap:clamp(10px,1.2vw,14px)}
.nav-primary{display:flex;align-items:center;flex-wrap:nowrap;--navgap:clamp(12px,1.4vw,16px);gap:var(--navgap)}
/* красная точка-разделитель посередине промежутка – как в бегущей строке.
   Позиционируем абсолютно: так разделители не влияют на ширины, которые меряет fitNav. */
.nav-primary a+a::before{content:"\00B7";position:absolute;left:calc(-1*var(--navgap)/2);top:50%;transform:translate(-50%,-50%);
  color:var(--red);font:700 14px/1 var(--font-display);pointer-events:none}   /* свои метрики: иначе перед CJK-пунктом точка наследует его шрифт и выглядит крупнее */
.nav-primary a{position:relative;font-size:14px;font-weight:600;color:var(--muted);transition:color .2s;white-space:nowrap}
/* иероглифы: системный CJK-шрифт без полужирного → браузер синтезирует жирный. Берём обычное начертание */
.nav-primary a.cjk,.nav-full a.cjk{font-weight:500;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
/* выравнивание по вертикали нужно только в строке меню; в выпадающем списке пункт остаётся
   обычным блоком – иначе inline-flex ломает выравнивание пунктов по правому краю */
/* Кегль чуть МЕНЬШЕ кириллицы: иероглиф заполняет свой квадрат целиком (у букв есть выносные
   элементы и внутренние отступы), поэтому при равном размере он выглядит крупнее соседей.
   Отрицательные поля гасят «воздух» по краям CJK-квадрата – иначе точки-разделители
   кажутся отодвинутыми от иероглифов сильнее, чем от букв. */
.nav-primary a.cjk{font-size:13.5px;line-height:1;margin:0 -.05em;display:inline-flex;align-items:center;align-self:stretch}
/* Текущая страница и наведение – красным, а не тёмным: так заметнее и одинаково
   в светлой и тёмной теме (--red объявлен в обеих). Насыщенность букв не меняем. */
.nav-primary a:hover,.nav-primary a[aria-current=page]{color:var(--red)}
.menu-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line-2);border-radius:9px;
  /* насыщенность 600 – та же, что у пунктов меню рядом: при 700 «Ещё» выделялось
     сильнее самих разделов, хотя это вспомогательная кнопка */
  padding:8px 14px;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;line-height:1;transition:border-color .2s,color .2s;white-space:nowrap}
.menu-btn[hidden]{display:none}
.menu-btn:hover{border-color:var(--red);color:var(--red)}
.menu-btn .bars{display:none;font-size:16px}
.cta{display:inline-flex;align-items:center;line-height:1;color:var(--on-red);background:var(--red);padding:0 16px;height:32px;border-radius:8px;font-size:14px;font-weight:600;white-space:nowrap}
.cta:hover{background:var(--red-deep);color:var(--on-red)}
.nav-full{position:absolute;top:66px;right:var(--pad);min-width:250px;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.16);padding:10px;display:flex;flex-direction:column;gap:2px;
  opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease);z-index:60}
.nav-full.open{opacity:1;transform:none;pointer-events:auto}
/* Тот же вид, что у пунктов основного меню: приглушённый цвет вместо чернильного.
   Это продолжение одного и того же списка разделов, просто не поместившегося в строку,
   и выделяться сильнее видимых пунктов он не должен. */
.nav-full a{padding:11px 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
.nav-full a:hover{background:var(--surface-2);color:var(--red)}
.nav-full a[aria-current=page]{color:var(--red)}

/* ---------- Кнопки ---------- */
/* line-height задан явно: у <button> он по умолчанию normal, у <a> наследуется
   от body (1.6), и соседние кнопки одного ряда выходили разной высоты */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:700;font-size:15px;line-height:1.25;
  /* На телефоне кнопка компактнее (44px против 49 на большом экране) – ниже
     не опускаемся: 44px это комфортная цель для пальца. Ширина ужимается заметнее
     высоты, поэтому в ряд помещается больше кнопок. */
  padding:clamp(12px,1.3vw,13px) clamp(17px,2.2vw,24px);border-radius:10px;border:2px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:all .2s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-red{background:var(--red);border-color:var(--red);color:var(--on-red)}
.btn-red:hover{background:var(--red-deep);border-color:var(--red-deep);color:var(--on-red)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--gap-sm)}

/* ---------- Герой ---------- */
.hero{padding:clamp(40px,7vw,90px) 0 clamp(30px,5vw,60px);--hero-gap:var(--gap-text)}
.hero .heroC{position:relative}
.hero h1{font-size:clamp(38px,9vw,130px);font-weight:800;letter-spacing:.01em;line-height:1;overflow-wrap:break-word;text-transform:uppercase;margin-left:-.057em}   /* оптическая компенсация левого выноса глифов В/Г (≈3px при кегле 53), чтобы визуальный левый край совпал с текстом и кнопками */
.hero h1 .r{color:var(--red)}
/* Отступ под именем растёт вместе с кеглем заголовка (тот меняется с 34 до 130).
   Фиксированные 22px на телефоне смотрелись провалом: имя мелкое, а зазор
   как на большом экране – и вдвое больше, чем до описания под ним. */
.hero .role{margin-top:clamp(16px,2.2vw,22px);margin-bottom:0;font-weight:700;font-size:clamp(15px,2vw,20px);letter-spacing:.02em}
.hero .role .dot{color:var(--red)}
/* Ниже строки ролей шаг один: до описания и от описания до кнопок – поровну.
   Раньше они складывались из разных значений (16 и 30) и ещё схлопывались
   с браузерными отступами абзацев, поэтому и выходил разнобой. */
/* Минус 5px – компенсация «воздуха» строк: у ролей и описания интерлиньяж больше
   кегля, и сверху-снизу каждой строки остаётся по ~5px пустоты, а у имени
   (интерлиньяж равен кеглю) её нет. Без поправки зазор между ролями и описанием
   выглядит на 4-5px больше соседних, хотя по коробкам все равны. */
.hero .lede{margin:calc(var(--hero-gap) - 5px) 0 0;max-width:none;color:var(--muted);font-size:clamp(16px,1.9vw,19px)}
/* Отступ над кнопками – общий (--gap-sm), он совпадает с шагом строк текста,
   поэтому внутри первого экрана «роли → описание» и «описание → кнопки»
   выглядят одинаково, и то же расстояние получается в блоке «О себе». */
.hero .btn-row{clear:both}
.hero .hero-logo{line-height:0}
.hero .hero-logo img{width:100%;height:auto;display:block}
/* Печать нарисована фирменной киноварью (#cf3a26), а красный тёмной темы светлее
   (#ec583f) – иначе мелкий текст на тёмном фоне не дотягивает до порога контраста
   (3,77:1 против нужных 4,5:1). Чтобы печать не спорила с остальным красным,
   в тёмной теме подкрашиваем её под цвет темы: подобрано численно, расхождение
   с --red – один пункт по каждому каналу. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]) .hero .hero-logo img{filter:brightness(1.5) saturate(.88) hue-rotate(2deg)}
}
:root[data-theme=dark] .hero .hero-logo img{filter:brightness(1.5) saturate(.88) hue-rotate(2deg)}
@media(min-width:821px){
  .hero .heroC{padding-right:clamp(240px,26%,320px);min-height:clamp(340px,30vw,410px)}
  /* печать центрирована по ВИДИМОМУ тексту имени (центр двух строк = кегль×0.97 от верха коробки)
     и чуть больше него (высота = кегль×2 ≈ блок из двух строк ×1.16) → симметрично выпирает сверху/снизу */
  .hero .hero-logo{position:absolute;top:calc(clamp(38px,9vw,130px) * 0.97);transform:translateY(-50%);right:0;height:calc(clamp(38px,9vw,130px) * 2);width:auto}
  .hero .hero-logo img{width:auto;height:100%}
}
@media(max-width:820px){
  .hero .hero-logo{float:right;width:calc(clamp(30px,9vw,140px) * 2);margin:calc(clamp(30px,9vw,140px) * -0.03) 0 8px 14px}   /* та же пропорция, что на ПК: кегль×2, центрировано по имени (отриц. отступ поднимает float к центру) */
  .hero h1{font-size:clamp(30px,9vw,140px)}   /* шаг ниже имени задаёт --hero-gap, отдельное значение здесь не нужно */
}

/* ---------- Секции ---------- */
.section{padding:clamp(34px,4.5vw,58px) 0}   /* вертикальные отступы секций уменьшены (было 8vw/96 → между блоками ~192px); теперь ~95–116px */
.section.red{background:var(--red);color:var(--on-red)}
.section.tint{background:var(--surface-2)}
/* Заголовок не сжимаем ради ссылки – иначе длинное название («Выставка
   «Свидание с городом»») ломается на строки в самом неудачном месте. Ссылка
   при нехватке ширины уходит под него, но вплотную: раньше её отделял тот же
   зазор, что и по горизонтали (20px), и получался разрыв внутри блока. */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:6px 20px;margin-bottom:var(--gap-md);flex-wrap:wrap}
.sec-head .lnk{flex:0 0 auto}
.sec-head:has(+.wk-blk-desc){margin-bottom:clamp(8px,1vw,14px)}   /* если сразу под подзаголовком идёт описание блока – прижимаем его ближе (иначе зазор ~40px) */
.sec-head h2{font-size:clamp(30px,5.5vw,64px);font-weight:800}
.sec-head .lnk{font-weight:700;font-size:15px;color:var(--red)}
.section.red .sec-head .lnk{color:var(--on-red)}
/* блок CMS на красной подложке: карточки остаются светлыми (внутри – обычный тёмный текст),
   а текст и кнопки прямо на красном – светлыми */
.section.red .work,.section.red .fpost,.section.red .shop-item{color:var(--ink)}
.section.red .wk-blk-desc,.section.red .wk-row .wk-cap b{color:var(--on-red)}

/* Заголовок и описание блока. Раньше эти правила вставлял js/pages.js – на страницах,
   где его нет (главы книги), формат был недоступен. */
.wk-sec-h{font-size:clamp(20px,2.6vw,30px);font-weight:700;line-height:1.15;margin:0 0 12px}
.wk-blk-desc{color:var(--muted);max-width:72ch;margin:-4px 0 20px;line-height:1.6}
.wk-sec-h + .wk-blk-desc{margin-top:-6px}

/* ---------- Главы книги: шапка в формате блока, а не крупной шапки страницы ----------
   Заголовок «Глава III» и подпись под ним – те же кегли и отступы, что у подзаголовка
   и описания блока внутри страниц. Крупная шапка (92px и отбивка 100/40) на этих
   страницах отрывала заголовок от видео, ради которого страницу и открывают. */
body[data-ch] .page-head{padding:clamp(30px,5vw,58px) 0 0}
/* Заголовок главы – в формате ЗАГОЛОВКА БЛОКА (как «Выставка «Свидание с городом»»),
   а подпись под ним – в формате описания блока. Заголовки внутри страницы
   («Над книгой работали», «Все видеоиллюстрации») остаются уровнем ниже. */
body[data-ch] .page-head h1{font-size:clamp(30px,5.5vw,64px);font-weight:800;line-height:1.05;margin-top:var(--eyebrow-gap)}
body[data-ch] .page-head .lede{margin-top:10px;max-width:72ch;font-size:clamp(15px,1.7vw,17px);line-height:1.6}
body[data-ch] .page-head + .section{padding-top:var(--gap-sm)}
.section.red .wk-row .wk-cap span{color:color-mix(in srgb,var(--on-red) 78%,transparent)}
.section.red .wk-row .btn,.section.red .wk-banner .btn{border-color:var(--on-red);color:var(--on-red)}
.section.red .wk-row .btn-red,.section.red .wk-banner .btn-red{background:var(--on-red);border-color:var(--on-red);color:var(--red)}
.sec-head .lnk:hover{text-decoration:underline}

/* ---------- О себе ---------- */
.about p{font-size:clamp(18px,2.2vw,24px);max-width:60ch;line-height:1.5;font-weight:500}
/* Тот же отступ под плашкой, что в шапке страницы и в подвале. Нижний отступ
   абзаца обнуляем: иначе он складывается с отступом кнопки под ним, и зазор
   выходит больше, чем над текстом. */
.about .eyebrow + p{margin-top:var(--eyebrow-gap)}
.about p{margin-bottom:0}
.about .about-lead{font-weight:700}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--gap-xs)}
.facts span{border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--muted)}
.about-split{display:grid;grid-template-columns:clamp(300px,30vw,400px) 1fr;gap:clamp(20px,4vw,48px);align-items:start}
.about-split .pic{aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.about-split .pic img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){.about-split{grid-template-columns:1fr}.about-split .pic{max-width:100%}}   /* портрет во всю ширину колонки на телефоне */
.about-list{margin:18px 0 6px;padding-left:22px;display:grid;gap:9px;list-style:disc}
.about-list li{font-size:clamp(15px,1.8vw,17px);line-height:1.5}
.about-list li::marker{color:var(--red)}
.edu-wrap{margin-top:var(--gap-lg)}
.edu-title{font-size:clamp(24px,4vw,40px);font-weight:800;margin-bottom:6px}
.edu{display:grid;max-width:780px}
.edu-item{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:18px 0;border-top:1px solid var(--line);align-items:baseline}
.edu-item:last-child{border-bottom:1px solid var(--line)}
.edu-year{font-family:var(--font-display);font-weight:700;color:var(--red);font-size:15px;letter-spacing:.02em}
.edu-item h3{font-size:clamp(17px,2vw,21px);font-weight:700;line-height:1.25}
.edu-item p{color:var(--muted);margin-top:5px;font-size:15px;line-height:1.45}
@media(max-width:560px){.edu-item{grid-template-columns:1fr;gap:4px}}

/* ---------- Разделы (плитки) ---------- */
.dirs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
/* Высота – из соотношения сторон, а не из ширины окна: раньше стояло
   min-height:clamp(200px,24vw,264px), и на телефоне плитка выходила площе
   (1,68 против 1,39), то есть изображение обрезалось иначе, чем на большом экране. */
.dir{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:var(--card-ratio);min-height:200px;padding:var(--card-pad-y) var(--card-pad-x);border-radius:var(--radius);
  border:1px solid var(--line);color:#fff;transition:transform .25s var(--ease),border-color .25s}
.dir .dir-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;background:var(--surface-2);transition:transform .5s var(--ease)}
.dir::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,13,8,.12) 0%,rgba(18,13,8,.1) 42%,rgba(18,13,8,.86) 100%)}
.dir:hover{transform:translateY(-4px);border-color:var(--red)}
.dir:hover .dir-bg{transform:scale(1.06)}
.dir .n{position:absolute;top:16px;left:16px;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;color:#fff;background:rgba(18,13,8,.42);padding:4px 10px;border-radius:999px}
.dir h3{font-size:clamp(22px,2.6vw,30px);font-weight:700;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.6)}
.dir .go{margin-top:12px;font-size:13px;font-weight:700;color:rgba(255,255,255,.92);display:inline-flex;gap:7px;align-items:center;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.dir:hover .go{color:#fff}
/* Ступени общие для всех рядов главной (см. также .grid-works, .shop-grid и
   карусель отзывов в reviews.js): до 1150 – два, до 820 – один. */
@media(max-width:1150px){.dirs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.dirs{grid-template-columns:1fr}}

/* ---------- Крупная сетка работ ---------- */
.grid-works{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.work{border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.work:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.1)}
.work .ph{aspect-ratio:var(--card-ratio);overflow:hidden;background:var(--surface-2)}
.work .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.work:hover .ph img{transform:scale(1.05)}
.work .m{padding:14px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.work .m b{font-weight:700;font-size:16px}
.work .m span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
@media(max-width:1150px){.grid-works{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.grid-works{grid-template-columns:1fr}}   /* те же ступени, что у плиток и отзывов */

/* ---------- Работы CMS (страницы-разделы): 5 форматов + альбом ---------- */
.wk-cover{display:block;width:100%;padding:0;border:0;background:var(--surface-2);overflow:hidden;position:relative;cursor:zoom-in;border-radius:12px}
.wk-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.wk-cover:hover img{transform:scale(1.04)}
.wk-sq{aspect-ratio:var(--card-ratio)}          /* сетка 3×2 – тот же кадр, что у плиток и магазина */
.wk-portrait{aspect-ratio:var(--card-ratio-v)}  /* сетка 2×3 – вертикальные работы и обложки */
.wk-rect{aspect-ratio:4/3}.wk-wide{aspect-ratio:16/7}
.wk-alb{position:absolute;top:10px;right:10px;background:rgba(18,13,8,.62);color:#fff;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;pointer-events:none}
.wk-card .wk-cover{border-radius:0}
.wk-cap{padding:12px 16px 2px}
/* карточка без кнопок: подпись – последний элемент → её низ прижимается к тексту; даём нижний отступ */
.wk-cap:last-child{padding-bottom:16px}
.wk-cap b{display:block;font-size:16px;font-weight:700;line-height:1.3}
.wk-cap span{display:block;font-size:13px;color:var(--muted);margin-top:4px;line-height:1.45}
.wk-card .btn-row{padding:10px 16px 16px;margin:0}
.wk-over .btn{border-color:rgba(255,255,255,.75);color:#fff}
.wk-over .btn:hover{background:rgba(255,255,255,.14);color:#fff}
.wk-list{display:flex;flex-direction:column;gap:clamp(16px,3vw,28px)}
.wk-row{display:grid;grid-template-columns:minmax(0,21%) 1fr;gap:clamp(16px,3vw,32px);align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(14px,2vw,20px)}
.wk-row.wk-right{grid-template-columns:1fr minmax(0,21%)}
.wk-row.wk-right .wk-cover{order:2}
/* «фото слева/справа»: не обрезаем по высоте – ширину держит колонка, высота натуральная;
   фото центрируем по вертикали (при большом описании – посередине области) */
.wk-row .wk-cover{aspect-ratio:auto;align-self:center}
.wk-row .wk-cover img{height:auto;object-fit:contain}
/* текст сверху, кнопки всегда внизу правой колонки (не под фото) */
.wk-row .wk-body{display:flex;flex-direction:column}
.wk-row .wk-body .wk-actions{margin-top:auto}
.wk-t{font-size:clamp(20px,2.6vw,28px);font-weight:700;margin:0 0 8px}
.wk-d{color:var(--muted);line-height:1.6}
.wk-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.wk-banner{position:relative;border-radius:var(--radius);overflow:hidden}
.wk-banner .wk-cover{border-radius:0}
.wk-banner .wk-wide{aspect-ratio:16/6}
.wk-over{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,3vw,28px);background:linear-gradient(180deg,rgba(18,13,8,0),rgba(18,13,8,.82));color:#fff;pointer-events:none}
.wk-over .wk-t{color:#fff;margin:0 0 12px}
.wk-over .wk-actions{pointer-events:auto;margin-top:0}
.wk-carousel{display:grid;grid-template-columns:minmax(0,55%) 1fr;gap:clamp(16px,3vw,32px);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(14px,2vw,20px)}
.pc{position:relative}
.pc-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:12px}
.pc-track::-webkit-scrollbar{display:none}
.pc-slide{flex:0 0 100%;scroll-snap-align:center}
.pc-slide img{display:block;width:100%;aspect-ratio:var(--album-ratio);object-fit:cover}
.pc-arw{position:absolute;top:calc(50% - 11px);transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(18,13,8,.5);color:#fff;border:0;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.pc-prev{left:8px}.pc-next{right:8px}
.pc-dots{display:flex;justify-content:center;gap:7px;margin-top:9px}
.pc-dot{width:8px;height:8px;padding:0;border-radius:50%;background:var(--line-2);border:0;cursor:pointer}
.pc-dot.on{background:var(--red)}
@media(max-width:640px){.wk-row,.wk-row.wk-right,.wk-carousel{grid-template-columns:1fr}.wk-row.wk-right .wk-cover{order:0}
  /* в одну колонку «кнопки вниз» не нужно – auto схлопнулся бы к тексту, возвращаем обычный отступ */
  .wk-row .wk-body .wk-actions{margin-top:16px}

  /* Крупный баннер на узком экране: 16:6 даёт полосу ~140px высотой, и надпись
     с кнопками в неё не помещается – они наезжали на картинку. Поэтому подпись
     и кнопки уходят ПОД фото. Само фото НЕ кадрируем: показываем целиком в его
     собственных пропорциях – обрезка по бокам режет афишу. */
  .wk-banner{overflow:visible}
  .wk-banner .wk-cover,.wk-banner .wk-wide{border-radius:var(--radius)}
  .wk-banner .wk-wide{aspect-ratio:auto}
  .wk-banner .wk-cover img{height:auto;object-fit:contain}
  .wk-over{position:static;padding:14px 0 0;background:none;color:var(--ink)}
  .wk-over .wk-t{color:var(--ink);margin:0 0 10px}
  .wk-over .wk-actions{margin-top:12px}
  .wk-over .btn{border-color:var(--ink);color:var(--ink)}
  .wk-over .btn:hover{background:var(--ink);color:var(--paper)}
  .wk-over .btn-red{background:var(--red);border-color:var(--red);color:var(--on-red)}
  /* на красной подложке текст и кнопки остаются светлыми */
  .section.red .wk-over,.section.red .wk-over .wk-t{color:var(--on-red)}
  .section.red .wk-over .btn{border-color:var(--on-red);color:var(--on-red)}}

/* ---------- Магазин-тизер ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
.shop-item{border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.shop-item .ph{aspect-ratio:var(--card-ratio);background:var(--surface-2)}
.shop-item .ph img{width:100%;height:100%;object-fit:cover}
.shop-item .m{padding:12px 14px;color:var(--ink)}
.shop-item .m b{display:block;font-weight:700;font-size:15px}
.shop-item .m .p{color:var(--red);font-weight:700;font-size:14px;margin-top:2px}
@media(max-width:1150px){.shop-grid{grid-template-columns:repeat(2,1fr)}}   /* у магазина в ряду четыре, ступени те же */
@media(max-width:820px){.shop-grid{grid-template-columns:1fr}}
/* карусель товаров внутри красной секции: стрелки и точки на тёмном фоне */
.section.red .rev-arrow{border-color:var(--on-red);color:var(--on-red);background:transparent}
.section.red .rev-arrow:hover{border-color:var(--on-red);color:var(--on-red);opacity:.75}
.section.red .rev-dot::after{background:rgba(255,255,255,.45)}
.section.red .rev-dot.on::after{background:var(--on-red)}

/* ---------- Лента соцсетей (единая: ВК + Telegram, карточки) ---------- */
.feed-merged{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.feed-single{max-width:640px;display:flex;flex-direction:column;gap:18px}
.feed-embed{min-width:0}
.feed-loading{color:var(--muted);font-size:14px}
.fpost{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad-y) var(--card-pad-x);color:var(--ink);transition:border-color .2s}
.fpost:hover{border-color:var(--red)}
.fhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.fsrc{font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 9px;border-radius:999px;color:#fff}
.fsrc.vk{background:#2787f5}
.fsrc.tg{background:#29a9eb}
.fsrc.own{background:var(--red)}
.fpin{font-size:11px;font-weight:700;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:1px 8px}
.fdate{font-size:12px;color:var(--muted);margin-left:auto}
/* На узком экране дата цифрами: словами она съедает 93px из 297 доступных,
   и бейдж раздела («Дизайн и иллюстрации», «Свидание с городом») не помещается. */
.fdate .d-short{display:none}
@media(max-width:520px){
  .fdate .d-long{display:none}
  .fdate .d-short{display:inline}
}
.feed-more-wrap{text-align:center;margin-top:22px}
.ftext{display:block;font-size:15px;line-height:1.6;color:var(--ink);white-space:normal;overflow-wrap:anywhere}
/* абзацы публикации: без собственного отступа у крайних, между собой – один шаг */
.ftext p{margin:0 0 10px}
.ftext p:last-child{margin-bottom:0}
.fmedia{display:block;margin-top:14px}
.fmedia.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Кадр – это <button>, поэтому гасим браузерные поля и рамку: без сброса
   изображение вставало с отступом 8px по бокам и 3px сверху (собственные
   padding и border кнопки), и кадр выглядел смещённым. */
.fm{position:relative;display:block;border-radius:10px;overflow:hidden;background:var(--surface-2);
  padding:0;border:0;appearance:none;-webkit-appearance:none;box-sizing:border-box;font:inherit;color:inherit}
.fm img,.fm video{display:block;width:100%;height:auto;border-radius:10px}
.fmedia.grid .fm{aspect-ratio:var(--feed-ratio)}
.fmedia.grid .fm img,.fmedia.grid .fm video{height:100%;object-fit:cover}
/* Сетка режима «авто» построена на шести колонках: так «по два» (span 3),
   «по три» (span 2) и пара сверху (span 3 у первых двух) живут в одной системе.
   Классы выдают autoGrid в blog.js и rb_auto_grid в render-blog.php. */
.fmedia.g2,.fmedia.g3{grid-template-columns:repeat(6,1fr)}
.fmedia.g2 .fm{grid-column:span 3}                                    /* два в ряд */
.fmedia.g3 .fm{grid-column:span 2}                                    /* три в ряд */
/* Крупный кадр сверху – во всю ширину и целиком, пока укладывается в пределы
   (--lead-max-h / --lead-min-h). Слишком высокий или слишком широкий снимок
   обрезается до предела, а не ужимается: иначе он не доходил до краёв и оставлял
   поля по бокам, которые читались как рамка.
   Пределы заданы в долях ширины (cqw), поэтому одинаково работают и на телефоне. */
.fmedia.lead,.fmedia.n3{container-type:inline-size}
.fmedia.lead .fm:first-child,
.fmedia.n3 .fm:first-child{grid-column:1 / -1;aspect-ratio:auto;background:transparent}
.fmedia.lead .fm:first-child img,.fmedia.lead .fm:first-child video,
.fmedia.n3 .fm:first-child img,.fmedia.n3 .fm:first-child video{
  width:100%;height:auto;object-fit:cover;max-height:var(--lead-max-h);min-height:var(--lead-min-h)}
.fmedia.pair .fm:nth-child(-n+2){grid-column:span 3}                  /* первый ряд – два кадра, дальше по три */
.fmedia.lay-column{display:flex;flex-direction:column;gap:8px}
.fmedia.lay-masonry{column-count:2;column-gap:8px}
.fmedia.lay-masonry .fm{width:100%;margin:0 0 8px;break-inside:avoid;aspect-ratio:auto}
.fmedia.lay-masonry .fm img,.fmedia.lay-masonry .fm video{height:auto!important;max-height:none!important;object-fit:contain!important}
.fmedia.lay-carousel{position:relative}
.fmedia.lay-carousel .car-track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fmedia.lay-carousel .car-track::-webkit-scrollbar{display:none}
.fmedia.lay-carousel .fm{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:var(--feed-ratio);border-radius:14px}
.fmedia.lay-carousel .fm img,.fmedia.lay-carousel .fm video{height:100%!important;max-height:none!important;object-fit:cover!important}
.car-arrow{position:absolute;top:calc(50% - 8px);transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(20,16,12,.5);color:#fff;border:0;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.car-arrow:hover{background:rgba(20,16,12,.72)}
.car-prev{left:8px}.car-next{right:8px}
.car-dots{display:flex;justify-content:center;gap:7px;margin-top:9px}
.car-dot{width:8px;height:8px;padding:0;border-radius:50%;background:var(--line-2);border:0;cursor:pointer}
.car-dot.on{background:var(--red)}
/* Одиночное медиа в режиме «авто» – по тем же правилам, что и крупный кадр:
   во всю ширину, целиком в пределах --lead-max-h / --lead-min-h, крайности обрезаются.
   Раньше снимок стоял по своим размерам с ограничением 70vh, и вертикальный
   ужимался, не доходя до краёв. */
.fmedia:not(.grid):not(.lay-column):not(.lay-masonry):not(.lay-carousel){container-type:inline-size}
.fmedia:not(.grid):not(.lay-column):not(.lay-masonry):not(.lay-carousel) .fm{display:block;width:100%}
.fmedia:not(.grid):not(.lay-column):not(.lay-masonry):not(.lay-carousel) .fm img,.fmedia:not(.grid):not(.lay-column):not(.lay-masonry):not(.lay-carousel) .fm video{
  width:100%;height:auto;object-fit:cover;max-height:var(--lead-max-h);min-height:var(--lead-min-h)}
.fm .fplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:38px;color:#fff;background:rgba(20,16,12,.28);pointer-events:none}
.fvid{background:#000;max-height:70vh}
.fpost-link{display:inline-block;margin-top:12px;color:var(--red);font-weight:600;font-size:14px}
.feed-more{text-align:center;margin-top:18px;color:var(--muted);font-size:14px}
.feed-more a{color:var(--red);font-weight:600}
.feed-fallback{padding:var(--card-pad-y) var(--card-pad-x);display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.feed-fallback p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}

/* ---------- Бегущая лента направлений («О себе») ---------- */
.marquee{margin:0 0 clamp(34px,5vw,56px);overflow:hidden;border-block:1px solid var(--line);padding:16px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:mq 55s linear infinite}
.mq-i{font-family:var(--font-display);font-weight:500;font-size:clamp(16px,2.2vw,24px);color:var(--ink);letter-spacing:-.01em}
.mq-sep{color:var(--red);font-weight:700;padding:0 clamp(14px,2vw,26px);font-style:normal}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .marquee{-webkit-mask:none;mask:none}
  .marquee-track{animation:none;white-space:normal;flex-wrap:wrap;gap:2px}
}

/* ---------- Футер: подпись под заголовком ---------- */
.site-footer .foot-lede{color:rgba(246,242,232,.72);margin:16px 0 0;max-width:none;font-size:15px}

/* ---------- Отзывы ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,20px)}
/* Избранные на Главной – столбцом по центру, той же ширины, что список на странице
   отзывов. Три колонки не годились: отзывы разной длины, рядом с развёрнутым короткий
   оставлял полосу пустоты. Сетку .reviews не трогаем – она общая. */
.reviews[data-reviews="featured"]{display:block}
.rev-home{margin:0 auto;max-width:820px}
.rev-home .about{margin-top:4px;font-size:13px;color:var(--muted);font-weight:600}
/* margin:0 обязателен: карточка – это <blockquote>, а у него браузерный отступ
   по умолчанию 1em/40px. Из-за него карточки были на 80px уже своей колонки,
   и по краям области оставались пустые поля. */
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad-y) var(--card-pad-x);margin:0}
.review p{margin:0;font-size:17px;line-height:1.5;font-weight:500}
.review .who{margin-top:14px;font-size:13px;color:var(--muted);font-weight:600}
.section.red .review{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
@media(max-width:820px){.reviews{grid-template-columns:1fr}}

/* ---------- Футер / контакты ---------- */
.site-footer{background:#1c1814;color:#f6f2e8;padding:clamp(34px,4.5vw,58px) 0 40px;margin-top:auto}   /* верхний отступ как у .section (было 8vw/90) */
.site-footer a{color:#f6f2e8}
.site-footer .top{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:start}
.site-footer h2{font-size:clamp(30px,5vw,58px);font-weight:800;color:#f6f2e8;margin-top:var(--eyebrow-gap)}
/* Контакты начинаются на уровне заголовка «Давайте», а не бейджа «Свяжитесь»:
   26px – высота бейджа, 16px – верхний отступ h2, 2px – зазор строки под ним. */
.site-footer .contacts{display:flex;flex-direction:column;gap:10px;font-weight:600;margin-top:44px}
.site-footer .contacts a:hover{color:var(--red)}
.site-footer .socs{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.site-footer .socs a{border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 16px;font-size:14px}
.site-footer .socs a:hover{background:var(--red);border-color:var(--red);color:var(--on-red)}
.site-footer .bottom{margin-top:var(--gap-md);padding-top:20px;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(246,242,232,.6)}
@media(max-width:640px){.site-footer .top{grid-template-columns:1fr}
  .site-footer .contacts{margin-top:0}}   /* одна колонка – выравнивать не с чем */

/* ---------- Плашка cookie ---------- */
.cookie-bar{position:fixed;right:18px;bottom:18px;z-index:80;width:max-content;max-width:400px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:#1c1814;color:#f6f2e8;padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:14px;font-size:13.5px;line-height:1.5;box-shadow:0 14px 44px rgba(0,0,0,.4)}
.cookie-bar a{color:#fff;text-decoration:underline;white-space:nowrap}
.cookie-bar .cookie-ok{flex:none;align-self:stretch;justify-content:center;padding:8px 22px;font-size:14px}
@media(max-width:600px){.cookie-bar{left:0;right:0;bottom:0;width:auto;max-width:none;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:11px;padding:10px 14px;border:0;border-top:1px solid rgba(255,255,255,.14);border-radius:0;font-size:12px;box-shadow:0 -8px 24px rgba(0,0,0,.22)}.cookie-bar .cookie-txt{flex:1}.cookie-bar .cookie-ok{align-self:auto;width:auto;padding:7px 22px;white-space:nowrap}}

/* ---------- Заголовок внутренней страницы ---------- */
.page-head{padding:clamp(46px,8vw,100px) 0 clamp(20px,3vw,40px)}
/* секция сразу после шапки страницы: убираем двойной отступ (низ шапки + верх секции),
   иначе разрыв «заголовок→контент» раздувается до ~136px на ПК */
.page-head + .section{padding-top:clamp(8px,1.4vw,18px)}
.page-head h1{font-size:clamp(40px,8vw,92px);font-weight:800;margin-top:var(--eyebrow-gap)}
.page-head .lede{margin-top:var(--gap-text);margin-bottom:0;max-width:60ch;color:var(--muted);font-size:clamp(16px,2vw,20px)}   /* сброс дефолтного нижнего отступа <p>, иначе зазор под описанием на 16px больше, чем под заголовком */

/* ---------- Внутренние страницы ---------- */
.rich{max-width:70ch}
.rich p{color:var(--ink);font-size:clamp(16px,1.9vw,19px);margin:0 0 16px}
.rich a:not(.btn){color:var(--red);font-weight:600}

/* ---------- Юридический текст (политика) ---------- */
.legal{max-width:80ch;color:var(--ink)}
.legal .doc-lead{color:var(--muted);font-size:15px;margin:0 0 22px}
.legal h2{font-size:clamp(18px,2.3vw,23px);font-weight:800;letter-spacing:-.01em;margin:clamp(22px,3vw,32px) 0 10px;padding-top:8px;border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:6px}
.legal p{margin:0 0 11px;font-size:15px;line-height:1.62;color:var(--ink)}
.legal .sub{margin:0 0 8px 22px;position:relative}
.legal .sub::before{content:"–";position:absolute;left:-20px;color:var(--muted)}
.legal a{color:var(--red);font-weight:600;word-break:break-word}
.book{display:grid;grid-template-columns:260px 1fr;gap:clamp(20px,4vw,48px);align-items:start;padding:clamp(24px,4vw,44px) 0;border-top:1px solid var(--line)}
.book .cover{aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.book .cover img{width:100%;height:100%;object-fit:cover}
.book h3{font-size:clamp(24px,3.4vw,38px);font-weight:800}
.book p{color:var(--muted);margin:10px 0 0;max-width:58ch}
@media(max-width:700px){.book{grid-template-columns:1fr}.book .cover{max-width:200px}}
.lit{display:grid;gap:14px}
.lit .piece{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad-y) var(--card-pad-x);transition:border-color .2s}
.lit .piece:hover{border-color:var(--red)}
.lit .piece h3{font-size:20px;font-weight:700}
.lit .piece .meta{color:var(--muted);margin-top:6px;font-size:14px}
.contact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.contact-cards a{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad-y) var(--card-pad-x);display:flex;flex-direction:column;gap:4px;transition:border-color .2s,transform .2s}
.contact-cards a:hover{border-color:var(--red);transform:translateY(-3px)}
.contact-cards .k{font-weight:800;font-size:18px;color:var(--ink)}
.contact-cards .v{color:var(--muted);font-size:14px;word-break:break-word}
.contact-cards .go{color:var(--red);font-weight:600;font-size:14px;margin-top:4px}
@media(max-width:560px){.contact-cards{grid-template-columns:1fr}}
.course{background:var(--surface-2);border-radius:var(--radius);padding:clamp(24px,4vw,44px);margin-top:8px}
.course h3{font-size:clamp(22px,3vw,30px);font-weight:800}
.course ul{margin:14px 0 0;padding-left:20px;color:var(--muted)}
.course li{margin:7px 0}

/* ---------- Книга онлайн: видео / ЭкоГайд / выпуски / авторы ---------- */
/* Первый блок главы (видео или кнопка «Скачать PDF») собственного отступа не имеет –
   расстояние от шапки задаёт секция. Иначе главы с видео и ЭкоГайд начинались
   на разной высоте: 66 против 78. */
#eco > *:first-child{margin-top:0}
.videowrap{margin:0;display:flex;justify-content:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:8px}
.videowrap video{max-width:100%;max-height:80vh;width:auto;height:auto;display:block;border-radius:calc(var(--radius) - 6px);background:#000}
.ecoguide{margin-top:var(--gap-sm);display:flex;flex-direction:column;gap:14px;max-width:920px}
.ecoguide .pg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
/* Отступ до карточек задаёт заголовок над ними (.sec-head), своего не нужно –
   он был 14 и не ужимался на телефоне. То же у списка выпусков ниже. */
.credits{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);margin-top:0}
.credits .c{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad-y) var(--card-pad-x)}
.credits .role{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.credits .nm{font-weight:800;margin-top:4px}
.credits a{color:var(--red);font-weight:600;font-size:14px}
/* Ссылки в строку, точка-разделитель по центру строки. Раньше это был просто
   символ в тексте – он вставал по своей базовой линии и казался смещённым. */
.credits .lnks{display:flex;flex-wrap:wrap;align-items:center;margin-top:4px}   /* тот же шаг, что между ролью и именем */
.credits .lnks .sep{color:var(--line-2);margin:0 8px;line-height:1;user-select:none}
@media(max-width:700px){.credits{grid-template-columns:1fr}}
/* Зазор здесь свой, меньше общего: плитки выпусков низкие (54px на телефоне),
   и зазор сеток работ (12–20) занимал пятую часть их высоты – список рассыпался. */
.chlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(8px,1vw,12px);margin-top:0}
/* Интерлиньяж плотнее общего (1.65): в плитке всего две строки, и «воздух»
   строк раздвигал их на 16px при заданных 3 – плитка выглядела рыхлой. */
.chlist a{display:block;padding:12px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-weight:700;line-height:1.25;color:var(--ink);transition:border-color .2s,transform .2s}
.chlist a:hover{border-color:var(--red);transform:translateY(-2px)}
.chlist a.cur{border-color:var(--red);background:var(--surface-2)}
.chlist a small{display:block;font-weight:500;font-size:12px;line-height:1.35;color:var(--muted);margin-top:4px}

/* ---------- Отзывы ---------- */
.page-head .sign{margin-top:14px;margin-bottom:0;color:var(--muted);font-style:italic}
/* Альбом на странице отзывов работы. Раньше эти правила вставлял js/reviews.js;
   теперь альбом приходит с сервера готовым и должен выглядеть верно без скриптов. */
.rev-album{margin-top:var(--gap-xs);max-width:640px}
.rpc{position:relative;border-radius:14px;overflow:hidden;background:var(--surface-2,#efe9db)}
.rpc-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.rpc-track::-webkit-scrollbar{display:none}
.rpc-slide{flex:0 0 100%;scroll-snap-align:center}
.rpc-slide img{display:block;width:100%;height:auto;max-height:62vh;object-fit:cover;cursor:zoom-in}
.rpc-arw{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:rgba(0,0,0,.42);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.rpc-prev{left:10px}.rpc-next{right:10px}
.rpc-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:2}
.rpc-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.55)}
.rpc-dot.on{background:#fff}

.rev-list{display:grid;gap:16px;margin-top:6px;max-width:820px}
.rev{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad-y) var(--card-pad-x)}
.rev .head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.rev .nm{font-weight:800}
.rev .dt{color:var(--muted);font-size:13px;white-space:nowrap}
.rev p{margin:10px 0 0;color:var(--ink);white-space:pre-line;line-height:1.6}
/* Фотографии к отзыву: ряд небольших кадров, каждый открывает просмотрщик.
   Кадры показываются маленькими средствами разметки – отдельных уменьшенных копий
   у файлов нет (общее решение по картинкам сайта). */
.rev-ph{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rev-ph-one{width:84px;height:84px;padding:0;border:0;background:none;cursor:zoom-in;display:block}
.rev-ph-one img{width:100%;height:100%;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
.rev-ph-one:hover img{border-color:var(--red)}
.rev-more-row{justify-content:center;margin-top:16px}
/* Разметка в текстах отзывов и во вступлении страницы (та же, что в блоге):
   переносы уже расставлены разметкой, поэтому pre-line здесь выключаем. */
.rev p,.page-head .lede p{white-space:normal}
.rev .fq,.page-head .lede .fq{margin:10px 0;padding:2px 0 2px 14px;border-left:3px solid var(--red);color:var(--ink);font-style:italic}
/* Списки в текстах. Классов исторически два: wk-ul – в описаниях работ и во всём,
   что собирает render-lib.php (в том числе вступление страницы отзывов), rv-ul –
   в запасном пути js/reviews.js. Оформление одно на оба: раньше wk-ul не был описан
   вовсе, и список во вступлении отзывов терял отступы, стоило странице собраться
   сервером. */
.rev .rv-ul,.page-head .lede .rv-ul,.rev .wk-ul,.page-head .lede .wk-ul,.wk-d .wk-ul{margin:8px 0;padding-left:20px;list-style:disc}
.rev .rv-ul li,.page-head .lede .rv-ul li,.rev .wk-ul li,.page-head .lede .wk-ul li,.wk-d .wk-ul li{margin:3px 0}
.rev .rv-sub,.page-head .lede .rv-sub{margin:14px 0 4px;font-size:1.05em;font-weight:700}
.page-head .lede p{margin:0 0 8px}

/* ---------- Форма отзыва ---------- */
/* Ширина как у списка отзывов (.rev-list): форма стоит прямо над ним,
   и разная ширина двух соседних блоков читалась как небрежность. */
.revform{max-width:820px;margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
/* Единый ритм формы: между смысловыми блоками – --form-gap, между подписью
   и её полем – вдвое меньше. Раньше здесь соседствовали 30, 16, 14, 13 и 6,
   и форма выглядела собранной наспех. */
.revform{--form-gap:18px}
.revform label{display:block;font-weight:700;font-size:14px;margin:var(--form-gap) 0 calc(var(--form-gap) / 3)}
.revform label:first-of-type{margin-top:0}
.revform .req{color:var(--red)}
.revform input,.revform textarea{width:100%;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.revform input:focus,.revform textarea:focus{outline:none;border-color:var(--red)}
.revform textarea{min-height:130px;resize:vertical}
.revform .hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.revform .consent{display:flex;gap:10px;align-items:flex-start;margin-top:var(--form-gap);font-size:14px;color:var(--muted);font-weight:500;cursor:pointer}
.revform .consent input{width:auto;flex:none;margin:3px 0 0;padding:0;border:0;background:none;border-radius:0;accent-color:var(--red)}
.revform .consent a{color:var(--red);font-weight:600}
.revform .note{color:var(--muted);font-size:13px;margin:0 0 var(--form-gap)}          /* верхняя надпись */
.revform .note:last-child{margin:var(--form-gap) 0 0}                                 /* нижняя подпись */
.revform .btn-row{margin-top:var(--form-gap)}                                         /* было 30px из общего правила */
/* Фотографии к отзыву: кнопка выбора и ряд выбранных до отправки.
   Кнопка — обычный <label> поверх скрытого поля файла (у самого поля вид задаёт браузер,
   и в оформление сайта он не вписывается). Оформление берётся классом .btn, чтобы она
   была той же формы и размера, что и остальные кнопки; здесь только снимаем правила
   .revform label, которые иначе растянули бы её на всю ширину. */
/* display:flex, а не inline-flex: строчный элемент сидит на базовой линии, и под ним
   остаётся хвост межстрочного интервала — из-за него расстояние до строки согласия
   выходило больше, чем между остальными полями формы. Ширина — по содержимому,
   иначе flex в блочном потоке растянул бы кнопку на всю ширину. */
.revform label.rv-file{display:flex;width:max-content;max-width:100%;margin:0;cursor:pointer}
/* Ряд выбранных снимков стоит между меткой и кнопкой и держит тот же шаг, что поля формы:
   сверху – расстояние «метка → поле», снизу – такое же до кнопки. Пока ничего не выбрано,
   ряда нет вовсе, и кнопка идёт сразу за меткой, как обычное поле. */
.revform .rv-pics{display:flex;flex-wrap:wrap;gap:10px}
.revform .rv-pics:not(:empty){margin-bottom:calc(var(--form-gap) / 3)}
.revform .rv-pics:empty{display:none}
.rv-pic{position:relative;display:block;width:84px;height:84px}
.rv-pic img{width:100%;height:100%;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
/* Плашка приложенного файла в форме контактов: файлы там любые, не только картинки,
   поэтому показываем имя и вес, а не кадр. Крестик – тот же, что у фотографий. */
.cf-item{position:relative;display:inline-flex;flex-direction:column;gap:2px;max-width:220px;
  padding:10px 26px 10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.cf-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-size{font-size:12px;color:var(--muted)}

.rv-pic-x{position:absolute;top:-6px;right:-6px;width:24px;height:24px;line-height:1;padding:0;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:13px;cursor:pointer}
.rv-pic-x:hover{border-color:var(--red);color:var(--red)}

.formmsg{margin-top:var(--form-gap);font-weight:600;font-size:14px;min-height:1.2em}
.formmsg:empty{display:none}   /* пока ответа нет – не занимает места под кнопкой */
.formmsg.ok{color:var(--red-deep)}
.formmsg.err{color:var(--red)}

/* ---------- Лайтбокс ---------- */
.lb{position:fixed;inset:0;z-index:90;display:none;background:rgba(15,12,9,.92);align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:8px}
.lb button{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.12);border:0;color:#fff;width:46px;height:46px;border-radius:50%;font-size:22px;cursor:pointer}

/* ---------- Адаптив меню: авто-подгон строкой (fitNav в site.js) ---------- */
/* Телефон: кнопка = ☰, «Контакты» уходит в выпадающий список (на всю ширину) */
@media(max-width:600px){
  .menu-btn .mtxt{display:none}
  .menu-btn .bars{display:inline}
  .menu-btn{width:32px;height:32px;padding:0;border-radius:8px;justify-content:center;order:9}  /* ☰ – квадрат 32×32 вровень с кнопкой темы, в правый край */
  .site-header .wrap{gap:10px}
  .nav-cluster{gap:8px}
  .cta{padding:0 13px}
  .nav-full{position:fixed;top:68px;left:0;right:0;min-width:0;border-radius:0;border-left:0;border-right:0;padding:10px var(--pad) 18px}
  .nav-full a{padding:13px 6px;border-bottom:1px solid var(--line);font-size:16px;text-align:right}
  .nav-full a:last-child{border-bottom:0}
}