/* ============================================================
   DCPCINEMA · правки темы поверх design.css
   design.css остаётся байт-в-байт как в дизайн-концепте,
   чтобы концепт и боевой сайт можно было сверять напрямую.
   ============================================================ */

/* служебной панели концепта на боевом сайте нет */
body{padding-top:0}
.hdr{top:0}
.pbar{display:none}

/* админ-панель WordPress не должна наезжать на шапку */
body.admin-bar .hdr{top:32px}
@media(max-width:782px){body.admin-bar .hdr{top:46px}}

/* редактор WordPress вставляет пустые абзацы — гасим их */
.entry-content > p:empty{display:none}

/* выравнивания из редактора */
.alignleft{float:left;margin:0 24px 16px 0}
.alignright{float:right;margin:0 0 16px 24px}
.aligncenter{display:block;margin-inline:auto}
.wp-caption-text{font-size:13.5px;color:var(--ink-3);margin-top:8px}

/* пагинация архива работ */
.pager{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:clamp(36px,4vw,56px)}
.pager a,.pager span{min-width:48px;min-height:48px;display:grid;place-items:center;padding:0 14px;
  border:1px solid var(--hair-dark);border-radius:2px;text-decoration:none;font-weight:700;
  color:var(--ink-on-dark-2);transition:all 220ms var(--ease-2)}
.pager a:hover{border-color:#fff;color:#fff}
.pager .current{background:#fff;border-color:#fff;color:var(--graphite-2)}

/* страница 404 */
.e404{text-align:center;max-width:56ch;margin-inline:auto}
.e404 .figure{margin-bottom:clamp(20px,3vw,32px)}

/* материал раздела, который ещё не написан: виден, но не кликается */
.arts .arts__soon{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:14px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--hair);opacity:.55;cursor:default}
.arts .arts__soon em{color:var(--ink-3)}

/* Две секции подряд, которые должны читаться одной полосой:
   шов равен обычному отступу между блоками внутри полосы, а не сумме паддингов. */
.band--cont{padding-top:48px}
.band--cont>.marks{display:none}
.band:has(+ .band--cont),.band--quiet:has(+ .band--cont){padding-bottom:0}
.band__head--cont{margin-bottom:clamp(24px,3vw,40px)}

/* Работа без вертикального постера: кадр показываем целиком на графите,
   а не обрезаем в 2:3 — от обрезки у горизонтального кадра остаётся середина. */
.frame__img--still{background:var(--graphite-2);display:grid;place-items:center}
.frame__img--still img{width:100%;height:auto;max-height:100%;object-fit:contain;transform:none}
.frame:hover .frame__img--still img{transform:none}
.frame__none{color:var(--ink-on-dark-3);font-size:13px;line-height:1.5;text-align:center;letter-spacing:.04em;text-transform:uppercase}

/* ---------- фон шапки страницы ----------
   Изображение лежит под затемняющим слоем: заголовок остаётся читаемым
   при любой картинке, а сила проявления выбирается в админке. */
.phead__still{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.phead__still img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;
  /* Маска: графика растворяется от своего центра к краям. Без неё плоские
     фигуры обрываются по кромке кадра и читаются как вклеенная картинка. */
  -webkit-mask-image:radial-gradient(115% 125% at 86% 46%,#000 0%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.22) 66%,transparent 82%);
  mask-image:radial-gradient(115% 125% at 86% 46%,#000 0%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.22) 66%,transparent 82%)}
/* Затемнение мягче, чем для фотографии: у плоской графики нет полутонов,
   под плотной вуалью фигуры просто пропадают. Слева фон гасится под заголовок. */
.phead__still::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,var(--graphite-2) 18%,rgba(34,37,42,.72) 46%,rgba(34,37,42,.12) 100%),
  linear-gradient(to top,var(--graphite-2) 1%,transparent 26%)}
.phead__still--hush img{opacity:.16}
.phead__still--quiet img{opacity:.28}
.phead__still--normal img{opacity:.46}
.phead__still--loud img{opacity:.68}
.phead__lit,.phead .marks{z-index:1}

/* Кадр на первом экране главной — проявлен сильнее: он держит весь экран,
   а заголовок остаётся читаемым за счёт затемняющего слоя поверх. */
.proj__still img{opacity:.52;filter:grayscale(.3) contrast(1.08)}
.proj__still::after{background:
  linear-gradient(100deg,rgba(34,37,42,.95) 8%,rgba(34,37,42,.78) 44%,rgba(34,37,42,.5) 100%),
  linear-gradient(to top,var(--graphite-2) 2%,transparent 36%)}

/* Карта: настоящий виджет Яндекса в той же рамке с кадровыми метками. */
.mapbox--live{position:relative;overflow:hidden;background:var(--graphite-2)}
.mapbox--live iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.mapbox--live>i,.mapbox--live .frame__edge{pointer-events:none;z-index:2}

/* ─── Тело перенесённой статьи ─────────────────────────────────────────────
   Текст со старого сайта идёт сплошным потоком абзацев, списков и картинок.
   Задаём ему тот же ритм, что у остальных страниц, и колонку под чтение. */
.entry-content{font-size:17px;line-height:1.62;color:var(--ink-2)}
.entry-content > *{max-width:74ch}
.entry-content > p{margin:0 0 18px}
.entry-content > p:last-child{margin-bottom:0}
.entry-content h2,.entry-content h3,.entry-content h4{color:var(--ink);letter-spacing:-.02em;max-width:64ch}
.entry-content h2{font-size:clamp(24px,2.6vw,34px);font-weight:800;margin:44px 0 16px;line-height:1.16}
.entry-content h3{font-size:clamp(19px,2vw,23px);font-weight:700;margin:34px 0 12px}
.entry-content h4{font-size:17px;font-weight:700;margin:26px 0 10px}
.entry-content > :first-child{margin-top:0}
.entry-content a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--acc);text-decoration-thickness:1px}
.entry-content a:hover{color:var(--acc)}
.entry-content ul,.entry-content ol{margin:0 0 20px;padding:0 0 0 2px;list-style:none}
.entry-content ol{counter-reset:n}
.entry-content li{position:relative;padding:9px 0 9px 30px;border-bottom:1px solid var(--hair)}
.entry-content li:last-child{border-bottom:0}
.entry-content ul > li::before{content:"";position:absolute;left:0;top:19px;width:14px;height:2px;background:var(--acc)}
.entry-content ol > li{counter-increment:n}
.entry-content ol > li::before{content:counter(n);position:absolute;left:0;top:9px;font-size:12px;font-weight:700;
  color:var(--acc);font-variant-numeric:tabular-nums}
.entry-content blockquote{margin:26px 0;padding:2px 0 2px 22px;border-left:2px solid var(--acc);color:var(--ink)}
.entry-content hr{border:0;border-top:1px solid var(--hair);margin:36px 0;max-width:none}
.entry-content strong,.entry-content b{color:var(--ink);font-weight:700}

/* картинки статьи — в той же рамке с кадровыми метками, что и всё на сайте */
.entry-content img{display:block;width:100%;height:auto;margin:0;border:1px solid var(--hair);background:var(--graphite-2)}
.entry-content p > img,.entry-content > img,.entry-content figure{max-width:min(100%,860px);margin:28px 0}
.entry-content figure img{margin:0}
.entry-content figcaption{margin-top:10px;font-size:13.5px;color:var(--ink-3);letter-spacing:.01em}
/* абзац, в котором только картинка, не должен добавлять свой отступ снизу */
.entry-content p:has(> img:only-child){margin:28px 0}
.entry-content table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15.5px}
.entry-content th,.entry-content td{padding:12px 14px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.entry-content th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

@media(max-width:640px){
  .entry-content{font-size:16px}
  .entry-content p > img,.entry-content > img,.entry-content figure{margin:20px 0}
}

/* Поле-ловушка для роботов: убрано из потока, недоступно с клавиатуры и экранным читалкам. */
.dcp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ─── Случаи с подписями (восстановлено из концепции) ─── */
/* --- кому нужны субтитры: регуляторный блок внутри «Требований» --- */
.subneed{margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--hair);padding-top:clamp(32px,4vw,52px)}
.subneed__hd{max-width:64ch;margin-bottom:clamp(28px,3.4vw,44px)}
.subneed__hd h3{font-size:clamp(21px,2.2vw,30px);letter-spacing:-.03em}
.subneed__hd p{margin:10px 0 0;color:var(--ink-2);font-size:16.5px}
.subneed__g{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hair)}
.subneed__g>div{padding:24px 28px 0 0;border-right:1px solid var(--hair)}
.subneed__g>div:last-child{border-right:0}
.subneed__k{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc-2);margin-bottom:12px}
.subneed__g p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.subneed__f{margin:clamp(26px,3vw,38px) 0 0;font-size:14.5px;color:var(--ink-3);max-width:78ch}
.subneed__g{grid-template-columns:1fr}
.subneed__g>div{border-right:0;border-bottom:1px solid var(--hair);padding:22px 0}
.subneed__g>div:last-child{border-bottom:0}
/* две линейки подряд читались как пустая строка регистра */
.entries+.subneed{border-top:0}

/* Атрибут hidden должен действительно прятать элемент.
   Компоненты вроде .frame задают свой display и перебивают правило браузера —
   из-за этого не работали фильтры работ и скрытие поля срочности в калькуляторе. */
[hidden]{display:none !important}

/* ─── Липкая шапка ──────────────────────────────────────────────────────────
   На первом экране шапка лежит поверх тёмного кадра и прокручивается вместе
   с ним. Отступив от верха, она прилипает: появляется графитовый фон, чтобы
   белые буквы читались над светлым содержимым, и высота слегка поджимается —
   меньше отъедает экран при чтении. */
.hdr{transition:top .28s cubic-bezier(.22,1,.36,1),background-color .28s ease,
     box-shadow .28s ease,backdrop-filter .28s ease}
.hdr__in{transition:padding .28s cubic-bezier(.22,1,.36,1)}
.hdr .brand img{transition:height .28s cubic-bezier(.22,1,.36,1),width .28s cubic-bezier(.22,1,.36,1)}

.hdr--stick{
  position:fixed;top:0;
  background:color-mix(in srgb,var(--graphite-2) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 var(--hair-dark),0 10px 30px -22px rgba(0,0,0,.9);
}
/* поджатие: меньше воздуха и мельче логотип */
.hdr--stick .hdr__in{padding-top:9px;padding-bottom:9px;border-bottom-color:transparent}
.hdr--stick .brand img{height:24px;width:auto}

/* появление сверху, чтобы не мигало при первом прилипании */
.hdr--stick{animation:dcp-hdr-in .28s cubic-bezier(.22,1,.36,1) both}
@keyframes dcp-hdr-in{from{transform:translateY(-100%)}to{transform:none}}

@media(max-width:1080px){
  .hdr--stick .hdr__in{padding-top:8px;padding-bottom:8px}
  .hdr--stick .brand img{height:22px}
}
@media(prefers-reduced-motion:reduce){
  .hdr,.hdr__in,.hdr .brand img{transition:none}
  .hdr--stick{animation:none}
}

/* Кнопки под результатом калькулятора: расчёт сделан — есть куда нажать. */
.calc__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,28px)}
.calc__act .btn{flex:1 1 auto;justify-content:center;min-width:180px}
@media(max-width:520px){.calc__act .btn{flex:1 1 100%}}

/* Кнопки внутри тёмной панели расчёта: секция вокруг светлая, и кнопки
   брали её стиль — тёмное на тёмном. Возвращаем светлый вариант. */
.sheet .calc__out .btn,.band--quiet .calc__out .btn{
  background:var(--acc);border-color:var(--acc);color:var(--graphite-2)}
.sheet .calc__out .btn:hover,.band--quiet .calc__out .btn:hover{
  background:#fff;border-color:#fff;color:var(--graphite-2)}
.sheet .calc__out .btn--line,.band--quiet .calc__out .btn--line{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.sheet .calc__out .btn--line:hover,.band--quiet .calc__out .btn--line:hover{
  border-color:#fff;background:rgba(255,255,255,.08);color:#fff}

/* Недоступный вариант фильтра: в этой выборке таких работ нет. */
.chip--off{opacity:.32;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
.chip--off:hover{border-color:var(--hair);background:transparent}
.fnone{margin:clamp(28px,4vw,44px) 0 0;color:var(--ink-3);font-size:16px}