/* Портфолио шире базовых 1340px — чтобы на большом мониторе вставало 4–5 колонок */
.page-portfolio .container{max-width:1600px}

/* ----------------- Плашка-заглушка вместо фото ----------------- */

.ph{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:10px;
  background:#F4F4F4;color:var(--black);
  object-fit:contain;                                 /* показываем изображение целиком, без обрезки */
  font-family:'Golos Text',sans-serif;font-weight:700;
  font-size:clamp(var(--fs-5),calc(0.82px + 1.5272vw),var(--fs-8));letter-spacing:.02em;
  text-align:center;line-height:1.2281;
}

/* Реальное фото портфолио: заполняет плитку/кнопку целиком (cover), без полей.
   Только <img class="ph"> — заглушка-<div> сохраняет padding/фон как фолбэк на загрузку.
   Лайтбокс (.lb__img в style.css) НЕ трогаем — там object-fit:contain, фото целиком. */
.pf-tile__media img.ph,
.pf-work img.ph{
  object-fit:cover;object-position:center;padding:0;
}

/* «(aspect · размеры)» в подписи заглушки: та же строка, чуть мельче основной подписи.
   На узких плашках (3-4) кегль ещё меньше — иначе не влезает. Цвет/шрифт не меняем. */
.ph__fmt{font-size:.86em}
.ratio-3-4 .ph__fmt{font-size:.76em}

/* =============== СИСТЕМА ФОРМАТОВ (Блок 1) =================== */

.ratio-3-4 { aspect-ratio:3/4 }     /* 0.75  · 2250×3000 — листинг OZON / WB / Amazon */
.ratio-1-1 { aspect-ratio:1/1 }     /* 1.0   · 2500×2500 — листинг Amazon (квадрат), рич моб OZON */
.ratio-4-3 { aspect-ratio:4/3 }     /* 1.333 · 1200×900 — A+ моб Amazon */
.ratio-8-5 { aspect-ratio:8/5 }     /* 1.6   · 1440×900 рич ПК WB + 1940×1200 A+ стандарт (1.617 — разница 1%, объединены намеренно) */
.ratio-2-1 { aspect-ratio:2/1 }     /* 2.0   · 2048×1024 — рич ПК OZON */
.ratio-22-9{ aspect-ratio:22/9 }    /* 2.444 · 2929×1200 — A+ премиум Amazon */

/* =========================== ШАПКА =========================== */
/* Упрощённая, ЧЁРНАЯ, sticky (мостик с hero главной). Переопределяет
   бело-липкую page-light-шапку и белую .is-scrolled из style.css. */
body.page-portfolio .site-header,
body.page-portfolio .site-header.is-scrolled{
  position:sticky;top:0;
  background:var(--black);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;
  
  --hdr-fg:#fff;
}
body.page-portfolio .site-header .logo__sub{color:rgba(255,255,255,.6)!important}

.pf-header .pat-deco::before{--pat-ink:var(--pat-ink-dark)}

.pf-header__inner{
  height:auto;min-height:64px;
  flex-wrap:wrap;align-items:center;gap:10px 16px;padding-block:11px;
}
.pf-header .logo{flex:none}

/* фильтры-табы */
.pf-filters{
  order:3;flex-basis:100%;                            /* мобайл: вторая строка */
  display:flex;align-items:center;gap:4px;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:0;padding:2px 0;
}
.pf-filters::-webkit-scrollbar{display:none}
.pf-filter{
  position:relative;flex:none;
  font-family:'Golos Text',sans-serif;font-weight:700;
  font-size:var(--fs-6);letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:transparent;border:none;
  padding:9px 12px;border-radius:0;
  white-space:nowrap;transition:color .2s var(--ease),background-color .2s var(--ease);
}
.pf-filter::after{
  content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;
  background:var(--accent);border-radius:0;transform:scaleX(0);transform-origin:center;
  transition:transform .25s var(--ease);
}
.pf-filter:hover{color:var(--accent)}
.pf-filter.is-active{color:var(--accent)}
.pf-filter.is-active::after{transform:scaleX(1)}

/* --- группа с выпадашкой подкатегорий (десктоп) --- */
.pf-fgroup{position:relative;flex:none}
.pf-fgroup__btn{display:inline-flex;align-items:center;gap:6px}
.pf-fgroup__btn::before{                              /* стрелка-указатель на выпадашку */
  content:"";order:2;width:0;height:0;flex:none;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;
  opacity:.7;transition:transform .2s var(--ease);
}
.pf-fgroup:hover .pf-fgroup__btn::before{transform:rotate(180deg)}
.pf-fmenu{
  position:absolute;top:calc(100% + 4px);left:0;z-index:120;min-width:230px;
  background:var(--black);border:1px solid rgba(255,255,255,.12);
  border-radius:0;box-shadow:none;padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),visibility .2s var(--ease),transform .2s var(--ease);
}
.pf-fgroup:hover .pf-fmenu,.pf-fgroup:focus-within .pf-fmenu{opacity:1;visibility:visible;transform:none}
.pf-fmenu__item{
  display:block;width:100%;text-align:left;white-space:nowrap;cursor:pointer;
  background:transparent;border:none;border-radius:0;padding:9px 12px;
  font-family:'Golos Text',sans-serif;font-weight:700;font-size:var(--fs-8);color:#fff;
  transition:background-color .2s,color .2s;
}
.pf-fmenu__item:hover{background:rgba(217,119,87,.18);color:var(--accent)}
.pf-fmenu__item.is-active{background:var(--accent);color:var(--black)}

/* --- вторая лента: подкатегории выбранной группы (мобайл) --- */
.pf-subfilters{
  order:4;flex-basis:100%;display:flex;align-items:center;gap:4px;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:0;padding:0 0 2px;
}
.pf-subfilters::-webkit-scrollbar{display:none}
.pf-subfilters[hidden]{display:none}
.pf-subfilter{
  flex:none;cursor:pointer;white-space:nowrap;
  background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:0;
  padding:6px 12px;font-family:'Golos Text',sans-serif;font-weight:700;font-size:var(--fs-6);color:rgba(255,255,255,.85);
  transition:background-color .2s,color .2s,border-color .2s;
}
.pf-subfilter:hover{color:var(--accent);border-color:rgba(217,119,87,.6)}
.pf-subfilter.is-active{background:var(--accent);border-color:var(--accent);color:var(--black)}

/* ≥1300px — одна строка и выпадашки; ниже — двухрядные ленты (вторая появляется при выборе группы).
   Порог 1300, а не 1000: замер max-content показал, что шапка в одну строку требует 1234px на
   portfolio.html и 1296px на странице кейса (со стрелкой без текста). На 1000–1299 контент
   физически не помещался и правая группа с CTA уезжала за экран. */
@media (max-width:1299.98px){
  .pf-fmenu{display:none}
  .pf-fgroup__btn::before{display:none}
  .pf-filters{padding:0}
  .pf-filter{padding:7px 10px;font-size:var(--fs-6)}
}
@media (min-width:1300px){
  .pf-subfilters{display:none}
}

/* правая группа шапки: соц-иконки + CTA «Сделать заказ» */
.pf-header__right{display:flex;align-items:center;gap:8px 12px;margin-left:auto}
/* margin-left:auto оставлен и на .pf-socials — чтобы project-02.html (без обёртки
   .pf-header__right) сохранил выравнивание вправо. Внутри обёртки он безвреден. */
.pf-socials{display:flex;align-items:center;gap:8px;margin-left:auto}
.pf-socials .soc{width:38px;height:38px;border-radius:0}
.pf-socials .soc svg{width:19px;height:19px}

.pf-order{flex:none;white-space:nowrap}
/* на узких экранах прячем соц-иконки, но кнопка «Сделать заказ» остаётся в шапке */
@media (max-width:699px){.pf-header .pf-socials{display:none}}
/* компактная мобильная шапка (3.7): логотип + [Обсудить проект + бургер] в один ряд, фильтры — ниже. Шапка не выше прежней */
@media (max-width:600px){
  .pf-header__inner{gap:8px 10px}
  .pf-header__right{gap:8px}
  .pf-header .pf-order{padding:8px 13px;font-size:var(--fs-7);min-height:38px}
  .pf-header .burger{width:40px;height:40px;padding:9px}
  .pf-header .logo__sub{display:none}
}
@media (max-width:400px){.pf-header .logo__text{display:none}}   

/* кнопка «назад к портфолио» (страница проекта) — компактная, в правой группе шапки */
.pf-back{
  flex:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-weight:700;font-size:var(--fs-8);color:#fff;
  padding:8px 14px;border-radius:0;
  border:1px solid rgba(255,255,255,.28);transition:border-color .2s,color .2s,background-color .2s;
}
.pf-back:hover{color:var(--accent);border-color:rgba(217,119,87,.6)}
.pf-back svg{width:16px;height:16px;flex:none}
/* до 1399px: текст прячем, остаётся компактная стрелка между логотипом и меню.
   С текстом шапке кейса нужно 1393px в одну строку, без него 1296px. */
@media (max-width:1399.98px){
  .pf-back{padding:8px 10px;gap:0}
  .pf-back__txt{display:none}
}
/* <600px: логотип + стрелка + «Обсудить проект» + бургер в одну строку не влезают
   (376px против 362px доступных) — что-то всегда переносится и шапка растёт.
   Поэтому стрелку прячем: путь назад остаётся пунктом «Портфолио» в бургер-меню. */
@media (max-width:600px){
  .pf-back{display:none}
}

/* ≥ 1300px — всё в одну строку, фильтры по центру (порог по факту помещаемости, см. выше) */
@media (min-width:1300px){
  .pf-header__inner{flex-wrap:nowrap;min-height:74px}
  .pf-filters{order:0;flex-basis:auto;flex:1 1 auto;justify-content:center;overflow:visible}
  .pf-filter{font-size:var(--fs-7);padding:9px 15px}
}

/* ========================= ТЕЛО СЕТКИ ======================== */
.pf-main{background:var(--paper)}                     
/* заголовок страницы удалён — сразу фильтры и плитки. Верхний отступ маленький,
   чтобы на 13" в экран влезал первый ряд плиток + подглядывал второй */
.pf-section{padding-top:clamp(14px,2vw,26px);padding-bottom:clamp(36px,5vw,72px)}

.pf-head{max-width:760px;margin-bottom:clamp(24px,3.4vw,40px)}
/* единственное место с Play на странице сетки — работы должны быть героем */
.pf-title{
  font-family:'Play',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(var(--fs-19),calc(0.02px + 5.9177vw),var(--fs-26));line-height:0.9844;color:var(--ink);
}
.pf-subtitle{margin-top:16px;color:var(--muted);font-size:clamp(var(--fs-9),calc(0.97px + 1.4791vw),var(--fs-11));line-height:1.4531}

/* Сетка = ВЕРТИКАЛЬНЫЙ СТЕК РЯДОВ (Блок 3). Ряд строит JS: в одном ряду только
   один формат. Никакого masonry-тетриса — каждый ряд горизонтальная полоса.
   Число колонок в ряду задаёт JS через --cols; неполный ряд получает --cols по
   числу своих плиток и растягивается на всю ширину (дыр справа нет).
   gap единый с .pf-works на странице проекта. */
.pf-grid{display:flex;flex-direction:column;gap:clamp(6px,0.8vw,10px)}
.pf-row{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:clamp(6px,0.8vw,10px)}

/* плитка: появление (fade + сдвиг снизу), задержку stagger ставит JS */
.pf-tile{
  display:block;position:relative;
  opacity:0;transform:translateY(12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.pf-tile.is-in{opacity:1;transform:none}
/* переключение фильтра: старые плитки гаснут и ужимаются (200ms), затем сетка перестраивается */
.pf-grid.is-swap .pf-tile{opacity:0;transform:scale(.95);transition-duration:.2s;transition-delay:0s!important}

/* пропорция — из класса .ratio-* (система форматов), здесь не задаётся */
.pf-tile__media{
  position:relative;overflow:hidden;
  border-radius:0;background:#F4F4F4;
}
.pf-tile .ph{transition:transform .35s var(--ease),filter .35s var(--ease)}

/* оверлей: название + категория. На тач-устройствах виден всегда (подпись снизу),
   на десктопе с hover — проявляется по наведению. */
.pf-tile__overlay{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:3px;padding:clamp(12px,1.4vw,18px);
  background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,.05) 58%,transparent);
  opacity:1;transition:opacity .3s var(--ease);
}
.pf-tile__title{color:#fff;font-weight:700;font-size:clamp(var(--fs-9),calc(-2.81px + 1.6481vw),var(--fs-11));line-height:1.0723}
.pf-tile__cat{color:rgba(255,255,255,.82);font-weight:700;font-size:var(--fs-5);letter-spacing:.12em;text-transform:uppercase}

/* десктоп с hover: чистая сетка, подпись/рамка/зум — по наведению */
@media (hover:hover) and (pointer:fine){
  .pf-tile__overlay{opacity:0}
  .pf-tile:hover .pf-tile__overlay,
  .pf-tile:focus-visible .pf-tile__overlay{opacity:1}
  .pf-tile:hover .ph{transform:scale(1.04);filter:brightness(.86)}   /* содержимое зумит, плитка НЕ двигается */
  
  .pf-tile:hover .pf-tile__media{box-shadow:none}  /* рамка без сдвига сетки */
}

.pf-tile:focus-visible{outline:none}
.pf-tile:focus-visible .pf-tile__media{outline:2px solid var(--ink);outline-offset:-2px}
.pf-tile:focus-visible .pf-tile__overlay{opacity:1}

/* сентинел бесконечной подгрузки + «конец» */
.pf-sentinel{width:100%;height:1px}
.pf-loader{display:flex;justify-content:center;padding:34px 0 6px}
.pf-loader__dot{width:10px;height:10px;margin:0 4px;border-radius:0;background:var(--accent);opacity:.35;animation:pfPulse 1s var(--ease) infinite}
.pf-loader__dot:nth-child(2){animation-delay:.15s}
.pf-loader__dot:nth-child(3){animation-delay:.3s}
@keyframes pfPulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.pf-end{margin-top:30px;text-align:center;color:var(--muted-2);font-weight:700;font-size:var(--fs-8)}
.pf-empty{margin-top:30px;text-align:center;color:var(--muted);font-size:var(--fs-10)}
/* действия под сеткой (Блок 4) + финальная строка (3.4/3.5).
   Мобайл: столбик, «Сделать заказ» сверху (column-reverse), обе на всю ширину.
   Десктоп: в ряд по центру. «Показать ещё» — вторичная (ghost), «Сделать заказ» — первичная (чёрная, крупнее). */
.pf-actions{display:flex;flex-direction:column-reverse;align-items:stretch;gap:12px;margin-top:clamp(22px,3vw,40px)}
.pf-actions .btn{width:100%}
.pf-actions__order{padding:23px 54px}                  /* чуть крупнее основной кнопки */
@media (min-width:620px){
  .pf-actions{flex-direction:row;justify-content:center;align-items:center;gap:clamp(16px,2vw,24px)}
  .pf-actions .btn{width:auto}
}
.pf-final{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(26px,3.4vw,46px);padding-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--line)}
.pf-final .cta-note{font-size:clamp(var(--fs-12),calc(-2.72px + 3.027vw),var(--fs-17));font-weight:700;color:var(--ink)}
.pf-final[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .pf-tile{transition:none}
  .pf-loader__dot{animation:none}
  .ph,.pf-tile__overlay{transition:none}
}

/* ==================== СТРАНИЦА ПРОЕКТА ======================= */
.pf-project{display:grid;gap:clamp(28px,4vw,52px);margin-top:clamp(8px,2vw,20px)}
@media (min-width:900px){
  /* текстовая колонка шире (5.1): при длинном описании текст помещается */
  .pf-project{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:clamp(24px,2.6vw,40px)}
}

@media (min-width:1000px){
  .pf-proj__info{
    position:sticky;top:153px;align-self:start;                /* 129px двухрядная шапка + 24px */
    max-height:calc(100vh - 177px);overflow-y:auto;            /* текст выше вьюпорта скроллится внутри */
  }
}
@media (min-width:1300px){
  /* шапка стала однорядной — подтягиваем колонку выше. Только min-width, без max-width:
     иначе на дробной ширине вьюпорта (DPR 1.5) между диапазонами появляется дыра. */
  .pf-proj__info{top:99px;max-height:calc(100vh - 123px)}
}

/* левая колонка — описание кейса */
.pf-proj__eyebrow{font-weight:700;font-size:var(--fs-6);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.pf-proj__title{font-family:'Play',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(var(--fs-17),calc(-0.43px + 4.6347vw),var(--fs-23));line-height:0.9938;margin-top:14px;color:var(--ink)}
.pf-proj__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pf-chip{display:inline-flex;align-items:center;padding:7px 15px;border-radius:0;background:var(--paper-2);border:1px solid var(--line);font-weight:700;font-size:var(--fs-6);letter-spacing:.04em;color:var(--muted)}
.pf-chip--mp{background:var(--accent);border-color:var(--accent);color:var(--black)}

.pf-proj__story{margin-top:clamp(24px,3vw,34px);display:grid;gap:20px}
.pf-story__label{justify-self:start;font-weight:700;font-size:var(--fs-4);letter-spacing:.1em;text-transform:uppercase;color:var(--black);background:var(--accent);border-radius:0;padding:6px 16px;margin-bottom:9px}
.pf-story__row p{margin:0;color:var(--muted);font-size:var(--fs-10);line-height:1.5}

.pf-metrics{display:flex;flex-wrap:wrap;gap:20px 34px;margin-top:clamp(26px,3vw,36px)}
.pf-metric{display:flex;flex-direction:column;gap:4px}
.pf-metric b{font-family:'Play',sans-serif;font-weight:700;font-size:clamp(var(--fs-19),calc(5.85px + 4.0585vw),var(--fs-23));color:var(--accent);line-height:0.9375}
/* > span — только подпись под цифрой (прямой потомок). Без «>» это правило ловило бы
   и служебные span внутри <b>, ужимая само число до .98rem. Вид подписи не меняется. */
.pf-metric>span{font-size:var(--fs-9);color:var(--muted-2);font-weight:700}

/* .metric-unit — общее правило в style.css (подключён на всех страницах), здесь не дублируется */


.pf-works{display:flex;flex-direction:column;gap:clamp(6px,0.8vw,10px)}
/* rich и A+ — работы в ОДНУ центрированную колонку (вертикальное полотно-лендинг).
   JS (portfolio.js) кладёт по 1 работе в ряд для data-cat rich/aplus; здесь — ширина и центрирование.
   ~76% ширины колонки работ: крупнее, но не во всю ширину. object-fit/лайтбокс/overlay не трогаем.
   Мобайл (<768) не трогаем — там и так одна колонка во всю ширину. */
@media (min-width:768px){
  .pf-works[data-cat="rich"] .pf-row,
  .pf-works[data-cat="aplus"] .pf-row{ align-self:center; width:76%; }
}


.pf-works[data-layout="mixed"]{--wgap:clamp(6px,0.8vw,10px)}
.pf-works[data-layout="mixed"] .pf-row{
  display:flex;flex-wrap:nowrap;align-items:stretch;
  justify-content:center;                 /* неполный ряд — по центру */
  gap:var(--wgap);
}
.pf-works[data-layout="mixed"] .pf-work{
  flex:0 0 calc((100% - (var(--cols,1) - 1) * var(--wgap)) / var(--cols,1));
  aspect-ratio:auto;                      
  display:flex;align-items:center;justify-content:center;
}
.pf-works[data-layout="mixed"] .pf-work img.ph{
  position:static;inset:auto;
  display:block;width:auto;height:auto;   /* натуральный размер — апскейла нет */
  max-width:100%;max-height:70vh;
  object-fit:contain;object-position:center;
}
/* «Показать все N страниц» у кейсов длиннее 12 работ: до клика видны первые 12,
   остальные лежат в DOM, но скрыты — ленивые картинки под display:none не грузятся.
   Лайтбокс при этом листает ВСЕ работы: он собирает .pf-work при загрузке страницы. */
.pf-works.is-collapsed .pf-row.is-more,
.pf-works.is-collapsed .pf-work.is-more{display:none}
.pf-works__more{align-self:center;margin-top:clamp(10px,1.4vw,18px)}

.pf-work{
  position:relative;overflow:hidden;cursor:pointer;      /* пропорция — из класса .ratio-* */
  border:none;padding:0;border-radius:0;background:#F4F4F4;
  transition:transform .25s var(--ease);
}
.pf-work .ph{transition:transform .35s var(--ease),filter .35s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .pf-work:hover .ph,.pf-work:focus-visible .ph{transform:scale(1.05);filter:brightness(.9)}
  
  .pf-work:hover{box-shadow:none}
}

.pf-work:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;box-shadow:none}
.pf-work__zoom{position:absolute;right:10px;bottom:10px;z-index:1;width:34px;height:34px;border-radius:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .25s var(--ease)}
.pf-work__zoom svg{width:17px;height:17px}
@media (hover:hover) and (pointer:fine){.pf-work:hover .pf-work__zoom,.pf-work:focus-visible .pf-work__zoom{opacity:1}}
@media (hover:none){.pf-work__zoom{opacity:1;background:rgba(0,0,0,.4)}}

/* низ страницы проекта — CTA */
.pf-proj__cta{margin-top:clamp(40px,5vw,68px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.pf-proj__cta .cta-note{font-size:clamp(var(--fs-10),calc(5.55px + 1.3035vw),var(--fs-12));font-weight:700;color:var(--ink)}

/* ============== ВИДЕО-КЕЙС (страница с роликом) ==============
   Видео лежит на YouTube (доступ по ссылке), на сайт не заливается.
   До клика в DOM только обложка webp — ни плеера, ни скриптов YouTube:
   iframe подставляет js/portfolio.js (модуль videoEmbed) по клику. */

.pf-video__wrap{display:flex;justify-content:center;align-items:flex-start}
/* на мобиле колонки складываются: там ролику нужен отступ от текста сверху */
@media (max-width:899px){
  .pf-video__wrap{margin-top:clamp(18px,3vw,26px)}
}

.pf-video{
  position:relative;display:block;width:100%;
  border-radius:0;overflow:hidden;
  background:#000000;border:1px solid var(--line);
  padding:0;cursor:pointer;
}
.pf-video--16-9{aspect-ratio:16/9}

.pf-video--9-16{
  aspect-ratio:9/16;width:min(100%,320px);height:auto;margin-inline:auto;
}
@media (min-width:900px){
  
  .pf-video--9-16{height:min(76vh,700px);width:auto;max-width:100%}
}
.pf-video__cover{width:100%;height:100%;object-fit:cover;display:block}


.pf-video__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:clamp(10px,1.3vw,15px) clamp(18px,2.3vw,28px);
  border-radius:0;
  background:var(--em-fill);color:var(--em-ink);border:0;cursor:pointer;
  font-family:'Golos Text',sans-serif;font-weight:700;
  font-size:clamp(var(--fs-6),calc(-0.88px + 1.4844vw),var(--fs-9));letter-spacing:.01em;line-height:0.9375;
  white-space:nowrap;
  box-shadow:none;
  transition:transform .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease);
}
/* viewBox плотно облегает треугольник, поэтому оптический центр глифа совпадает
   с его боксом и костыль вида margin-left не нужен: флекс ставит ровно. */
.pf-video__play svg{
  width:.78em;height:.94em;flex:none;fill:var(--black);display:block;
}
@media (hover:hover) and (pointer:fine){
  
  .pf-video:hover .pf-video__play{
    transform:translate(-50%,-50%) translateY(-2px);
    background:var(--accent-plate);color:var(--ink);
    box-shadow:none;
  }
}
.pf-video:focus-visible{outline:3px solid var(--em-fill);outline-offset:3px}
/* вертикальный кадр узкий: та же плашка съедала бы больше половины ширины,
   поэтому здесь она компактнее (пропорции и центрирование не меняются) */
.pf-video--9-16 .pf-video__play{
  font-size:clamp(var(--fs-5),calc(-5.14px + 1.5272vw),var(--fs-8));
  padding:clamp(9px,1vw,12px) clamp(14px,1.7vw,20px);
}
/* на телефонах обложка сама по себе узкая — ужимаем плашку, чтобы она
   оставалась кнопкой, а не перекрывала половину кадра */
@media (max-width:560px){
  .pf-video__play,
  .pf-video--9-16 .pf-video__play{
    font-size:var(--fs-5);padding:9px 15px;gap:.5em;
  }
}
.pf-video__frame{position:absolute;inset:0;width:100%;height:100%;border:0}
/* после клика обложка и кнопка убираются — остаётся только плеер */
.pf-video.is-playing .pf-video__cover,
.pf-video.is-playing .pf-video__play{display:none}

/* Лайтбокс — общий (.lb в style.css). Старый .pf-lb* удалён как мёртвый код. */

/* ===================== Футер портфолио ====================== */
.page-portfolio .site-footer{position:relative;overflow:hidden}
.page-portfolio .site-footer>.container{position:relative;z-index:1}
.site-footer .pat-deco::before{--pat-ink:var(--pat-ink-dark)}

/* ПЛАШКА: дожим краски и заливки от поверхности. Основание — tokens.mjs, plateCss(). */
a.btn--primary,button.btn--primary,span.btn--primary,a.pf-video__play,button.pf-video__play,span.pf-video__play{background:var(--em-fill);color:var(--em-ink);border-color:var(--em-fill)}

/* ЗАГЛУШКА РОЛИКА: кнопка и подпись скрыты, пока нет идентификатора.
   Основание — src/yt.mjs. Обложка остаётся: кадр из ролика
   показывает работу и без проигрывания. */
.pf-video[data-yt-ph]{cursor:default}
.pf-video[data-yt-ph] .pf-video__play{display:none}