/* ============================================================
   Страница раздела и страница работы.

   Раздел — та же композиция ритмом, что на главной, только
   без ограничения в девять кадров.
   Работа — крупная карусель: кадры листаются стрелками,
   клавишами, пальцем и колесом мыши вбок.
   ============================================================ */

/* ══ ШАПКА СТРАНИЦЫ ══════════════════════════════════════ */
/* шапка теперь оверлей (position:fixed) и не резервирует
   место в потоке — на этих страницах добавляем его сами */
.page{padding-block:calc(var(--hd) + clamp(20px,3vw,44px)) clamp(20px,2.6vw,40px)}
.page__crumbs{display:flex;align-items:center;gap:10px;
  font-size:.7rem;letter-spacing:var(--tr-mid);text-transform:uppercase;
  color:var(--fg-3);margin-bottom:var(--s5)}
.page__crumbs a:hover{color:var(--fg)}
.page__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);flex-wrap:wrap}
.page h1{font-family:var(--disp);font-size:var(--t-h1);line-height:1.06}
.page__lead{color:var(--fg-2);max-width:52ch;margin-top:var(--s4)}

/* ══ ПРАВОВОЙ ДОКУМЕНТ ═══════════════════════════════════
   Узкая колонка: длинный текст читается только когда строка
   не длиннее примерно семидесяти знаков.                    */
.doc{max-width:74ch;padding-bottom:clamp(40px,6vw,90px)}
.doc h2{font-family:var(--disp);font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  margin:clamp(28px,3vw,44px) 0 12px}
.doc h2:first-child{margin-top:0}
.doc p{color:var(--fg-2);margin-bottom:12px}
.doc ul{margin:0 0 12px;padding-left:1.2em;list-style:disc}
.doc li{color:var(--fg-2);margin-bottom:6px}
.doc b{color:var(--fg);font-weight:500}
.doc a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.doc a:hover{color:#fff}

/* ══ РАБОТА: КАРУСЕЛЬ ════════════════════════════════════
   Высота кадра задана от высоты окна, а не пропорцией: при
   пропорции 16/10 на всю ширину страницы вертикальные снимки
   вылезали за экран и работу приходилось разглядывать
   прокруткой. Теперь кадр гарантированно помещается целиком. */
.gal{position:relative;background:var(--bg-2);border-radius:var(--r);
  overflow:hidden}
.gal__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal__track::-webkit-scrollbar{display:none}
.gal__track figure{flex:0 0 100%;margin:0;scroll-snap-align:center;
  height:clamp(320px,68svh,720px);background:#0A0A0C}
.gal__track img{width:100%;height:100%;object-fit:contain}
@media(max-width:760px){
  .gal__track figure{height:clamp(280px,54svh,520px)}
}

.gal__nav{position:absolute;inset:0;display:flex;justify-content:space-between;
  align-items:center;pointer-events:none;padding:0 clamp(6px,1vw,16px)}
.gal__nav button{pointer-events:auto;border-radius:var(--r);width:clamp(40px,4vw,54px);
  height:clamp(40px,4vw,54px);border:0;cursor:pointer;
  background:rgba(10,10,12,.6);color:#fff;font-size:1.1rem;line-height:1;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color var(--d1),opacity var(--d1)}
.gal__nav button:hover{background:rgba(10,10,12,.9)}
.gal__nav button[disabled]{opacity:.25;cursor:default}
@media(hover:none){.gal__nav{display:none}}

.gal__dots{display:flex;gap:5px;justify-content:center;padding:var(--s4) 0 0}
.gal__dots i{width:22px;height:1px;background:var(--rule);
  transition:background-color var(--d1)}
.gal__dots i.on{background:#fff}

/* ══ РАБОТА: ДВЕ КОЛОНКИ ═════════════════════════════════
   Кадр слева, всё про работу — справа от него. Раньше подпись
   лежала под фотографией, и до неё нужно было доскроллить.    */
.workpage{display:grid;
  grid-template-columns:minmax(0,1fr) clamp(300px,26vw,400px);
  gap:clamp(14px,1.6vw,24px);align-items:start;
  padding-bottom:clamp(28px,4vw,64px)}
@media(max-width:1000px){.workpage{grid-template-columns:1fr}}

.workpage__side{display:flex;flex-direction:column;gap:var(--s3)}
.workpage__side h1{font-family:var(--disp);font-weight:400;
  font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.14;color:var(--fg);
  margin-bottom:var(--s4)}
.work__meta{display:flex;gap:clamp(12px,1.4vw,22px);flex-wrap:wrap;
  font-size:.66rem;letter-spacing:var(--tr-mid);text-transform:uppercase;
  color:var(--fg-3);padding-top:var(--s4);border-top:1px solid var(--rule)}
/* Кнопки столбиком: «Смотреть раздел «Гардеробные»» в узкой
   колонке в строку не помещается.                            */
.work__acts{display:flex;flex-direction:column;gap:10px;margin-top:var(--s5)}
.workpage__side .act{width:100%}

.workpage__moreHead{display:flex;align-items:baseline;
  justify-content:space-between;gap:var(--s4);margin-bottom:var(--s3)}
.workpage__more h2{font-family:var(--disp);font-weight:400;
  font-size:1rem;color:var(--fg)}

/* ══ СОСЕДНИЕ РАБОТЫ ═════════════════════════════════════ */
.more{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.more a{aspect-ratio:4/5}
.workpage__more .more{grid-template-columns:repeat(2,1fr)}
.workpage__more .more a{aspect-ratio:1}
@media(max-width:520px){
  .more{grid-template-columns:repeat(2,1fr)}
  .more a{aspect-ratio:1}
}

/* ══ ДРУГИЕ РАЗДЕЛЫ ══════════════════════════════════════ */
.kinds-row{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,20px)}
.kinds-row a{padding:11px 16px;background:var(--bg-2);font-size:.8rem;
  border-radius:var(--r);
  transition:background-color var(--d1),color var(--d1)}
.kinds-row a:hover{background:var(--bg-3);color:#fff}
.kinds-row a[aria-current]{background:#EFEFEF;color:var(--bg)}


/* ══ КОМПОЗИЦИЯ РАЗДЕЛА ══════════════════════════════════
   Ровная сетка одинаковых карточек — как плитка разделов на
   главной. Был «ритм» из ячеек разной ширины и высоты: в нём
   работы читались как разбросанные, взгляду не за что
   зацепиться. Одинаковый размер выстраивает их в ряды, и
   сравнивать работы между собой становится легко.            */
.mix{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.mix a{aspect-ratio:4/3}
@media(max-width:760px){
  .mix{grid-template-columns:repeat(2,1fr)}
  .mix a{aspect-ratio:1}
}
@media(max-width:420px){
  .mix{grid-template-columns:1fr}
  .mix a{aspect-ratio:4/3}
}
.mix .shot__tag{opacity:1;transform:none}
.mix .shot::after{opacity:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.78) 100%)}
.mix .cnt{display:block;font-family:var(--text);font-weight:400;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:#A9A9A9;margin-top:4px}