/* ============================================================
   ERMAXAGENCY v1 — раздел «Кейсы / Проекты»
   Родная сцена v1: тёмный void, неоновое свечение --pulse/--ion,
   Unbounded в капсе, нумерация /01, радиус 18–20px, --ease.
   Только новые селекторы pj-* — существующие правила не трогаем.
   ============================================================ */

:root{
  --pj-r: 18px;
  --pj-ease: var(--ease, cubic-bezier(.65,.05,0,1));
  --pj-ease-out: cubic-bezier(.35,0,0,1);
}

/* ---------- общая база медиа ---------- */
.pj-shot__img,.pj-tile__img,.pj-card__img,.pj-cover__v{
  display:block;width:100%;height:100%;
  object-fit:cover;background:#04060b;
}

.pj-vh{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   §5 — ТРИ ПЛАШКИ НА ГЛАВНОЙ
   ============================================================ */
.pj-tiles{
  list-style:none;margin:3.4rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;
}
.pj-tile{min-width:0}

.pj-tile__link{
  display:flex;flex-direction:column;height:100%;
  border:1px solid var(--line);border-radius:var(--pj-r);
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  overflow:hidden;color:inherit;
  transition:border-color .4s var(--pj-ease), box-shadow .45s var(--pj-ease), transform .45s var(--pj-ease);
}
.pj-tile__link:focus-visible{outline:2px solid var(--pulse);outline-offset:3px}

.pj-tile__media{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:16/10;background:#04060b;
  border-bottom:1px solid var(--line);
}
.pj-tile__media::after{               /* неоновая «плёнка» поверх видео */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,12,0) 62%,rgba(5,7,12,.5) 100%);
  opacity:.9;transition:opacity .45s var(--pj-ease);
}
.pj-tile__img{transition:transform .6s var(--pj-ease), filter .45s var(--pj-ease);filter:saturate(.92) brightness(.92)}

.pj-tile__num{
  position:absolute;left:1rem;top:.85rem;z-index:2;
  font-family:var(--disp);font-weight:400;font-size:1.15rem;
  color:var(--pulse);opacity:.8;text-shadow:0 0 12px rgba(95,212,255,.55);
  letter-spacing:.04em;
}

.pj-tile__body{
  display:flex;flex-direction:column;gap:.55rem;
  padding:1.25rem 1.35rem 1.4rem;flex:1 1 auto;
}
.pj-tile__title{
  font-family:var(--disp);font-weight:600;font-size:.98rem;line-height:1.32;
  color:var(--ice);
  transition:color .4s var(--pj-ease), text-shadow .4s var(--pj-ease);
}
.pj-tile__sub{font-size:.84rem;color:var(--fog);line-height:1.55}
.pj-tile__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
.pj-tile__tag{
  font-family:var(--disp);font-weight:400;font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(233,239,246,.72);
  border:1px solid var(--line);border-radius:99px;padding:.32rem .72rem;
  transition:border-color .4s var(--pj-ease), color .4s var(--pj-ease);
}
.pj-tile__go{
  margin-top:auto;padding-top:.9rem;
  font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pulse);
  display:inline-flex;align-items:center;gap:.5rem;
  opacity:.55;transition:opacity .4s var(--pj-ease), gap .4s var(--pj-ease);
}

@media (hover:hover) and (pointer:fine){
  .pj-tile__link:hover{
    border-color:rgba(95,212,255,.45);
    box-shadow:0 0 30px rgba(95,212,255,.14),0 34px 80px rgba(0,0,0,.5);
    transform:translateY(-4px);
  }
  .pj-tile__link:hover .pj-tile__media{will-change:transform}
  .pj-tile__link:hover .pj-tile__img{transform:scale(1.04);filter:saturate(1.05) brightness(1)}
  .pj-tile__link:hover .pj-tile__media::after{opacity:.6}
  .pj-tile__link:hover .pj-tile__title{color:var(--pulse);text-shadow:0 0 18px rgba(95,212,255,.45)}
  .pj-tile__link:hover .pj-tile__tag{border-color:rgba(95,212,255,.35);color:var(--ice)}
  .pj-tile__link:hover .pj-tile__go{opacity:1;gap:.85rem}
  .pj-tile__link:active{transform:translateY(-2px) scale(.995)}
}

.pj-tiles__more{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;
  margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.pj-tiles__note{font-size:.9rem;color:var(--fog);margin:0;margin-right:auto}

@media (max-width:1023px){
  .pj-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .pj-tiles{grid-template-columns:1fr;gap:1.3rem}
  /* ПРАВКА ВЛАДЕЛЬЦА 12.08.2026: на телефоне «Смотреть кейс →» / «View case →»
     прижимается к правому краю карточки (в одну колонку карточка широкая, и
     ссылка у левого края теряется под тегами). */
  .pj-tile__go{align-self:flex-end}
}

/* ============================================================
   §6 — СТРАНИЦА «ВСЕ ПРОЕКТЫ»
   ============================================================ */
.pj-page{position:relative;z-index:1;padding:8.5rem 0 5rem}
.pj-container{width:min(1240px,92vw);margin:0 auto}

.pj-hero{margin-bottom:2.6rem}
.pj-hero__eyebrow{
  font-size:.74rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  color:var(--pulse);margin-bottom:1.4rem;display:flex;align-items:center;gap:1rem;
}
.pj-hero__eyebrow::before{content:'';width:34px;height:1px;background:var(--pulse);box-shadow:0 0 8px rgba(95,212,255,.7)}
.pj-hero__title{
  /* размер как у заголовков остальных внутренних страниц v1:
     статьи clamp(1.7rem,4.4vw,3rem), калькулятор clamp(1.9rem,5vw,3.2rem).
     Гигантский дисплейный кегль убран по правке владельца 01.08. */
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.08;letter-spacing:-.005em;
  color:var(--ice);margin:0;
}
.pj-hero__title .pj-ch{display:inline-block;transform:translateY(105%);opacity:0}
.pj-hero__title.is-in .pj-ch{
  transform:translateY(0);opacity:1;
  transition:transform .8s var(--pj-ease-out), opacity .6s linear;
}
.pj-hero__title .pj-ch:last-child{color:var(--pulse);text-shadow:var(--glow)}
.pj-hero__meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.6rem;
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);
}
.pj-hero__count{
  font-family:var(--disp);font-weight:600;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pulse);margin:0;
}
.pj-hero__lead{font-size:clamp(.92rem,1.5vw,1.02rem);color:var(--fog);max-width:40em;margin:0}

.pj-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;
}
.pj-card{min-width:0}
.pj-card__link{
  position:relative;display:flex;flex-direction:column;height:100%;
  border:1px solid var(--line);border-radius:var(--pj-r);
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  overflow:hidden;color:inherit;
  transition:border-color .4s var(--pj-ease), box-shadow .45s var(--pj-ease), transform .45s var(--pj-ease);
}
.pj-card__link:focus-visible{outline:2px solid var(--pulse);outline-offset:3px}
.pj-card__media{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:16/10;background:#04060b;border-bottom:1px solid var(--line);
}
.pj-card__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,12,0) 62%,rgba(5,7,12,.5) 100%);
  transition:opacity .45s var(--pj-ease);
}
.pj-card__img{transition:transform .6s var(--pj-ease), filter .45s var(--pj-ease);filter:saturate(.92) brightness(.92)}
.pj-card__meta{
  position:absolute;left:0;right:0;top:0;z-index:2;
  display:flex;justify-content:space-between;align-items:center;
  padding:.85rem 1.1rem;font-family:var(--disp);font-weight:400;font-size:.8rem;
  letter-spacing:.08em;
}
.pj-card__idx{color:var(--pulse);text-shadow:0 0 12px rgba(95,212,255,.55)}
.pj-card__year{color:rgba(233,239,246,.6)}
.pj-card__body{display:flex;flex-direction:column;gap:.6rem;padding:1.25rem 1.35rem 1.45rem;flex:1 1 auto}
.pj-card__title{
  font-family:var(--disp);font-weight:600;font-size:1rem;line-height:1.32;margin:0;color:var(--ice);
}
.pj-card__title span{
  transition:color .4s var(--pj-ease), text-shadow .4s var(--pj-ease);
}
.pj-card__sum{font-size:.87rem;line-height:1.6;color:rgba(233,239,246,.68);margin:0}
.pj-card__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.85rem}
.pj-card__tag{
  font-family:var(--disp);font-weight:400;font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(233,239,246,.7);border:1px solid var(--line);border-radius:99px;padding:.32rem .72rem;
  transition:border-color .4s var(--pj-ease), color .4s var(--pj-ease);
}

@media (hover:hover) and (pointer:fine){
  .pj-card__link:hover{
    border-color:rgba(95,212,255,.45);
    box-shadow:0 0 30px rgba(95,212,255,.14),0 34px 80px rgba(0,0,0,.5);
    transform:translateY(-4px);
  }
  .pj-card__link:hover .pj-card__img{transform:scale(1.04);filter:saturate(1.05) brightness(1)}
  .pj-card__link:hover .pj-card__media::after{opacity:.55}
  .pj-card__link:hover .pj-card__title span{color:var(--pulse);text-shadow:0 0 18px rgba(95,212,255,.45)}
  .pj-card__link:hover .pj-card__tag{border-color:rgba(95,212,255,.35);color:var(--ice)}
}

@media (max-width:1279px){ .pj-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){ .pj-grid{grid-template-columns:1fr;gap:1.3rem} }

/* ============================================================
   §7 — СТРАНИЦА ПРОЕКТА
   ============================================================ */
.pj-one{position:relative;z-index:1;padding:8.5rem 0 5rem}

.pj-back{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--disp);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ice);border:1px solid var(--line);border-radius:99px;padding:.7rem 1.35rem;
  background:rgba(11,15,23,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .35s var(--pj-ease), box-shadow .35s var(--pj-ease), color .35s var(--pj-ease), background .35s var(--pj-ease);
}
.pj-back:hover{border-color:rgba(95,212,255,.5);box-shadow:var(--glow);color:var(--pulse)}
.pj-back:focus-visible{outline:2px solid var(--pulse);outline-offset:3px}
.pj-back--top{margin-bottom:2.2rem}

.pj-one__head{border-bottom:1px solid var(--line);padding-bottom:2.2rem;margin-bottom:2.6rem}
.pj-one__eyebrow{
  font-size:.72rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--pulse);
  margin-bottom:1.2rem;display:flex;align-items:center;gap:1rem;
}
.pj-one__eyebrow::before{content:'';width:34px;height:1px;background:var(--pulse);box-shadow:0 0 8px rgba(95,212,255,.7)}
.pj-one__title{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.12;letter-spacing:-.005em;color:var(--ice);margin:0;
}
.pj-one__sub{margin-top:.9rem;font-size:clamp(.92rem,1.5vw,1.05rem);color:var(--fog)}

.pj-one__cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:2.6rem 3.4rem;align-items:start}
.pj-one__text p{font-size:clamp(.95rem,1.5vw,1.03rem);line-height:1.75;color:rgba(233,239,246,.8);margin-bottom:1.15rem}
.pj-one__text p:last-child{margin-bottom:0}

.pj-one__aside{
  border:1px solid var(--line);border-radius:var(--pj-r);
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  padding:1.5rem 1.5rem 1.7rem;position:sticky;top:calc(var(--pj-header-h,92px) + 14px);
}
.pj-one__aside-title{
  font-family:var(--disp);font-weight:600;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pulse);margin:0 0 1.1rem;
}
.pj-svc{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.pj-svc li{
  font-size:.78rem;color:rgba(233,239,246,.82);
  border:1px solid var(--line);border-radius:99px;padding:.4rem .85rem;
}
.pj-visit{
  display:inline-flex;align-items:center;gap:.6rem;width:100%;justify-content:center;
  font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.04em;
  color:var(--void);background:linear-gradient(120deg,var(--pulse),#9BE8FF);
  border-radius:99px;padding:.95rem 1.6rem;box-shadow:var(--glow);
  transition:box-shadow .3s var(--pj-ease), filter .3s var(--pj-ease);
}
.pj-visit:hover{box-shadow:0 0 34px rgba(95,212,255,.55);filter:brightness(1.06)}
.pj-visit:focus-visible{outline:2px solid var(--pulse);outline-offset:3px}
.pj-visit__ext{font-size:.9em;opacity:.85}

@media (max-width:900px){
  .pj-one__cols{grid-template-columns:1fr;gap:2rem}
  .pj-one__aside{position:static}
}

.pj-cover{
  margin:0 0 2.6rem;position:relative;overflow:hidden;
  aspect-ratio:3/2;max-height:min(62vh,620px);
  border:1px solid var(--line);border-radius:var(--pj-r);
  background:#04060b;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.pj-cover::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,12,0) 70%,rgba(5,7,12,.45) 100%);
}

/* ---------- §8 ГОРИЗОНТАЛЬНАЯ ГАЛЕРЕЯ ---------- */
.pj-gal{margin-top:4.2rem;padding-top:2.6rem;border-top:1px solid var(--line)}
.pj-gal__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.4rem;margin-bottom:1.4rem}
.pj-gal__h{
  font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pulse);margin:0;
}
.pj-gal__hint{font-size:.78rem;color:var(--fog);letter-spacing:.08em;text-transform:uppercase;margin:0}

.pj-gal__viewport{
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(95,212,255,.4) transparent;
  padding-block:.5rem;
  cursor:grab;
  /* лента идёт «во всю ширину» — вырываем её из контейнера */
  margin-inline:calc(50% - 50vw);
}
.pj-gal__viewport::-webkit-scrollbar{height:6px}
.pj-gal__viewport::-webkit-scrollbar-thumb{background:rgba(95,212,255,.35);border-radius:99px}
.pj-gal__viewport::-webkit-scrollbar-track{background:transparent}
.pj-gal__viewport:focus-visible{outline:2px solid var(--pulse);outline-offset:4px}
.pj-gal__viewport.is-drag{cursor:grabbing}
.pj-gal__viewport.is-fit{cursor:auto}

.pj-gal__track{
  display:flex;
  gap:clamp(12px,2vw,32px);
  width:max-content;
  padding-left:max(clamp(16px,5vw,96px), env(safe-area-inset-left), calc((100vw - 1600px)/2));
  padding-right:max(clamp(16px,5vw,96px), env(safe-area-inset-right), calc((100vw - 1600px)/2));
}

/* Ширина кадра живёт в --shot-w — её меняют медиазапросы §11.1 ниже. */
.pj-shot{
  --shot-w:clamp(260px,72vw,900px);
  flex:0 0 auto;margin:0;
  width:var(--shot-w);
  position:relative;
}
/* content-visibility стоит на самом кадре, а не на <figure>: у кадра ширину
   задаёт родитель, а высоту — aspect-ratio, поэтому заглушка физически не
   может разойтись с реальной высотой. На <figure> расходилась: подпись там в
   потоке, а зашитые под десктоп 640px держали всю ленту — на 390px под каждым
   кадром зияло ~400px пустоты, на 768px ~290px. Размер заглушки всё равно
   выводим из --shot-w, чтобы он был верным на каждом брейкпоинте. */
.pj-shot__media{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:16/10;background:#04060b;
  border:1px solid var(--line);border-radius:var(--pj-r);
  box-shadow:0 26px 70px rgba(0,0,0,.5);
  transition:border-color .45s var(--pj-ease), box-shadow .45s var(--pj-ease);
  content-visibility:auto;
  contain-intrinsic-size:auto var(--shot-w) auto calc(var(--shot-w) / 1.6);
}
.pj-shot:hover .pj-shot__media{border-color:rgba(95,212,255,.35);box-shadow:0 0 28px rgba(95,212,255,.12),0 30px 80px rgba(0,0,0,.55)}
.pj-shot__n{
  position:absolute;left:.9rem;top:.75rem;z-index:2;
  font-family:var(--disp);font-weight:400;font-size:.82rem;letter-spacing:.06em;
  color:var(--pulse);opacity:.85;text-shadow:0 0 12px rgba(95,212,255,.55);
}
.pj-shot__cap{
  margin-top:.75rem;font-size:.8rem;line-height:1.5;color:var(--fog);
  max-width:52ch;
}

.pj-gal__ctrl{
  display:flex;align-items:center;gap:1rem;margin-top:1.6rem;
}
.pj-gal__btn{
  width:44px;height:44px;flex-shrink:0;border-radius:50%;
  border:1px solid var(--line);background:rgba(11,15,23,.7);color:var(--ice);
  font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:border-color .35s var(--pj-ease), box-shadow .35s var(--pj-ease), color .35s var(--pj-ease), opacity .35s;
}
.pj-gal__btn:hover:not(:disabled){border-color:rgba(95,212,255,.5);box-shadow:var(--glow);color:var(--pulse)}
.pj-gal__btn:disabled{opacity:.3;cursor:default}
.pj-gal__btn:focus-visible{outline:2px solid var(--pulse);outline-offset:3px}
.pj-gal__bar{flex:1 1 auto;height:2px;background:var(--line);border-radius:99px;overflow:hidden}
.pj-gal__bar span{
  display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--pulse),var(--ion));box-shadow:0 0 12px rgba(95,212,255,.6);
}
.pj-gal__viewport.is-fit + .pj-gal__ctrl{display:none}

/* Тач: нативный свайп + мягкий снап. Колесо здесь не при чём. */
@media (hover:none),(pointer:coarse){
  .pj-gal__viewport{scroll-snap-type:x proximity;cursor:auto}
  .pj-shot{scroll-snap-align:center}
  .pj-gal__ctrl{display:none}
}
/* Указатель: снап выключен — он дерётся с покадровой записью scrollLeft */
@media (hover:hover) and (pointer:fine){
  .pj-gal__viewport{scroll-snap-type:none}
}

.pj-one__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:3.4rem;padding-top:2rem;border-top:1px solid var(--line);
}
.pj-next{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--disp);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pulse);
  transition:gap .35s var(--pj-ease), text-shadow .35s var(--pj-ease);
}
.pj-next:hover{gap:.95rem;text-shadow:var(--glow)}
.pj-next:focus-visible{outline:2px solid var(--pulse);outline-offset:3px;border-radius:4px}

/* адаптив ширины кадра — §11.1. Меняем только --shot-w: и width, и
   contain-intrinsic-size выводятся из неё (см. .pj-shot выше). */
@media (max-width:413px){ .pj-shot{--shot-w:78vw} }
@media (min-width:414px) and (max-width:767px){ .pj-shot{--shot-w:76vw} }
@media (min-width:768px) and (max-width:833px){ .pj-shot{--shot-w:62vw} }
@media (min-width:834px) and (max-width:1023px){ .pj-shot{--shot-w:58vw} }
@media (min-width:1024px) and (max-width:1279px){ .pj-shot{--shot-w:min(52vw,720px)} }
@media (min-width:1280px) and (max-width:1439px){ .pj-shot{--shot-w:min(56vw,800px)} }
@media (min-width:1440px){ .pj-shot{--shot-w:min(56vw,900px)} }

/* ---------- reveal подстраниц (без GSAP: свой IntersectionObserver) ---------- */
.pj-armed [data-pj-reveal]{opacity:0;transform:translateY(28px)}
.pj-armed [data-pj-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--pj-ease-out), transform .8s var(--pj-ease-out);
}

@media (prefers-reduced-motion:reduce){
  .pj-gal__viewport{scroll-behavior:auto;scroll-snap-type:x mandatory}
  .pj-shot{scroll-snap-align:start}
  .pj-armed [data-pj-reveal],
  .pj-armed [data-pj-reveal].is-in{opacity:1;transform:none;transition:none}
  .pj-hero__title .pj-ch{transform:none;opacity:1;transition:none}
  .pj-tile__link,.pj-card__link,.pj-tile__img,.pj-card__img{transition:border-color .3s,color .3s,opacity .3s}
  .pj-tile__link:hover,.pj-card__link:hover{transform:none}
  .pj-tile__link:hover .pj-tile__img,.pj-card__link:hover .pj-card__img{transform:none}
}

/* ============================================================
   §12 — КЕЙС-НИША: два дизайн-решения на один бриф (2026-08-12)
   Раздел перестроен: 3 кейса-ниши вместо 6 кейсов-сайтов.
   Ниже только новые селекторы — существующие правила не трогаем.
   ============================================================ */

/* видео-кадр в галерее — ведёт себя как .pj-shot__img */
.pj-shot__vid{display:block;width:100%;height:100%;object-fit:cover;background:#04060b}

/* плашка-разделитель между описанием ниши и галереей.
   ПРАВКА ВЛАДЕЛЬЦА 12.08.2026: «в одну строку на всех устройствах».
   Полный текст (RU «Один бриф — два дизайн-решения. Оба сайта живые, оба
   можно открыть.») физически не влезает в строку уже около 620px — ниже
   этой ширины второе предложение (.pj-duo__tail) снимается, остаётся
   смысловое ядро. Кегль флюидный, чтобы строка не срывалась ни на 360px,
   ни на промежуточных ширинах; overflow — страховка от горизонтального
   выезда страницы, в норме не срабатывает. */
.pj-duo{
  display:block;margin:2.8rem 0 0;
  padding:1.15rem clamp(.95rem,3vw,1.5rem);
  border:1px solid rgba(95,212,255,.3);border-radius:var(--pj-r);
  background:linear-gradient(120deg,rgba(95,212,255,.09),rgba(11,15,23,.55));
  font-size:clamp(.8rem,2.12vw,.95rem);line-height:1.6;color:rgba(233,239,246,.82);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pj-duo b{color:var(--ice);font-weight:600}
@media (max-width:619px){
  .pj-duo{font-size:clamp(.82rem,3.85vw,.95rem)}
  .pj-duo__tail{display:none}
}

/* карточки-подзаголовки вариантов (.pj-shot--label / .pj-var) УДАЛЕНЫ из
   галерей по директиве владельца 12.08.2026: «эти кнопки лишние, оставь
   только кнопки на сайты сверху». В ленте остались только медиа-кадры, а
   принадлежность кадра варианту ушла в подпись (.pj-shot__cap, префикс
   «<название варианта> · …»). Стили карточки сняты вместе с разметкой,
   чтобы не копить мёртвые правила. */

/* пара равновесных кнопок на оба живых сайта ниши: стоит сразу под
   плашкой .pj-duo, перед галереей (правка владельца 12.08) —
   плашка → кнопки → «Экраны кейса» единым ритмом */
.pj-duo-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.1rem}
.pj-duo-cta .pj-visit{width:auto;flex:1 1 280px;text-align:center}

/* чип «Один бриф — два дизайн-решения» на карточке листинга */
.pj-card__duo{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--disp);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pulse);border:1px solid rgba(95,212,255,.35);border-radius:99px;padding:.34rem .75rem;
}

/* ПРАВКА ВЛАДЕЛЬЦА 12.08.2026: на телефоне подпись второй кнопки
   («Membership clinic — view the site →», RU «Клиника по подписке —
   смотреть сайт →») срывалась на две строки. Кнопки остаются столбиком во
   всю ширину, но кегль и внутренние отступы флюидные, а перенос запрещён —
   самая длинная подпись (RU, 36 знаков дисплейным Unbounded) укладывается
   в одну строку от 360px. Порог поднят с 767 до 1023px: на 768–1023 кнопки
   вставали парой по ~345–380px, и русские подписи снова ломались на две
   строки — до 1024px держим их столбиком во всю ширину. */
@media (max-width:1023px){
  .pj-duo-cta{gap:.75rem}
  .pj-duo-cta .pj-visit{
    flex:1 1 100%;white-space:nowrap;
    font-size:clamp(.55rem,2.5vw,.78rem);
    padding:.95rem clamp(.7rem,2.4vw,1.6rem);
    gap:.45rem;
  }
}
@media (prefers-reduced-motion:reduce){
  .pj-visit:hover{filter:none}
}

/* ПРАВКА ВЛАДЕЛЬЦА 13.08.2026 (фото 1): подвал кейса на телефоне.
   БЫЛО: .pj-one__foot — flex с wrap; на 390 «← Назад к кейсам» (кнопка-пилюля
   с полями 1.35rem) и «Следующий кейс →» вместе не влезали в 342 px и
   вставали друг под другом двумя строками. СТАЛО: перенос запрещён, кегль и
   поля пилюли текучие — обе кнопки стоят В ОДНУ СТРОКУ: «назад» слева,
   «следующий» прижат вправо (justify-content:space-between уже стоит). */
@media (max-width:560px){
  .pj-one__foot{flex-wrap:nowrap;gap:.5rem}
  .pj-one__foot .pj-back{
    flex:0 1 auto;min-width:0;white-space:nowrap;
    font-size:clamp(.56rem,2.5vw,.74rem);padding:.62rem clamp(.6rem,2.6vw,1.35rem);gap:.4rem;
  }
  .pj-one__foot .pj-next{
    flex:0 0 auto;white-space:nowrap;
    font-size:clamp(.56rem,2.5vw,.74rem);gap:.4rem;
  }
}