/* ═══════════════════════════════════════════
   Страницы работ: works.html и artist.html
   Наследуют токены и типографику из style.css
   ═══════════════════════════════════════════ */

.page{
  max-width:1680px;margin-inline:auto;
  padding:clamp(88px,11vh,130px) var(--pad) clamp(120px,16vh,190px);
}

/* ─── верхняя строка: назад / раздел ──────── */

.topbar{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,2.2vw,26px) var(--pad);
  background:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 55%,transparent 100%);
  pointer-events:none;
}
.topbar>*{pointer-events:auto}

.back{
  display:inline-flex;align-items:center;gap:10px;
  transition:color .35s;
}
.back i{font-style:normal;transition:transform .35s var(--ease)}
.back:hover{color:var(--fg)}
.back:hover i{transform:translateX(-4px)}

/* ─── шапка страницы ──────────────────────── */

.phead{margin-bottom:clamp(34px,5vw,62px)}
.phead .sec-label{margin-bottom:clamp(14px,2vw,20px)}

.phead h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.4rem,7vw,5.6rem);
  line-height:.96;letter-spacing:-.02em;
}
.phead h1 em{font-style:italic;color:#cfccc7}
.phead__note{margin-top:clamp(14px,2vw,20px);color:var(--dim);max-width:52ch;font-size:.95rem}

/* ─── шапка артиста: фото сбоку + имя ─────── */

.ahead{
  display:grid;
  grid-template-columns:clamp(180px,22vw,320px) 1fr;
  gap:clamp(22px,4vw,56px);
  align-items:center;
  margin-bottom:clamp(40px,6vw,76px);
}
.ahead__photo{position:relative;aspect-ratio:1;overflow:hidden;background:#0d0d0d}
.ahead__photo img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.82);
}
.ahead__photo::after{content:'';position:absolute;inset:0;border:1px solid var(--line)}

.ahead__info h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,6vw,4.6rem);line-height:.98;letter-spacing:-.02em;
  margin:.18em 0 .3em;
}
.ahead__stat{display:flex;flex-wrap:wrap;gap:8px 22px}
.ahead__stat span{color:var(--dim)}

/* ─── фильтры ─────────────────────────────── */

.filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;
  margin-bottom:clamp(24px,3.4vw,40px);
  padding-bottom:clamp(16px,2vw,22px);
  border-bottom:1px solid var(--line);
}
.filters button{
  font-family:var(--mono);font-size:.66rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);background:none;border:0;cursor:pointer;
  padding:8px 12px;transition:color .3s;
}
.filters button:hover{color:var(--fg)}
.filters button[aria-pressed="true"]{color:var(--fg)}
.filters button[aria-pressed="true"]::before{content:'[ '}
.filters button[aria-pressed="true"]::after{content:' ]'}

/* ─── сетка роликов ───────────────────────── */

.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:clamp(12px,1.5vw,20px);
}

.tile{
  display:block;width:100%;padding:0;border:0;background:none;
  color:inherit;text-align:left;cursor:pointer;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.tile[hidden]{display:none}

/* внутренности плитки — span'ы (кнопка не может содержать div),
   поэтому display задаём явно */
.tile__media{
  display:block;
  position:relative;aspect-ratio:16/9;overflow:hidden;background:#0d0d0d;
}
.tile__media img,
.tile__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .45s var(--ease), filter .6s var(--ease), transform .7s var(--ease);
}
.tile__media img{filter:contrast(1.05) brightness(.72) saturate(.55)}
.tile__media video{opacity:0}
.tile__media::after{
  content:'';position:absolute;inset:0;border:1px solid var(--line);
  transition:border-color .45s;pointer-events:none;
}

/* вертикальные ролики: на превью показываем верх кадра, а не центр */
.tile--v .tile__media img,
.tile--v .tile__media video{object-position:50% 28%}

.tile__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,0,0,.42);border:1px solid rgba(242,240,237,.5);
  opacity:0;transition:opacity .4s var(--ease), background .4s;
  backdrop-filter:blur(2px);
}
.tile__play::before{
  content:'';width:0;height:0;margin-left:3px;
  border-left:11px solid var(--fg);
  border-top:7px solid transparent;border-bottom:7px solid transparent;
}

.tile__dur{
  position:absolute;right:8px;bottom:8px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  padding:3px 6px;background:rgba(0,0,0,.6);color:var(--fg);
}
.tile__badge{
  position:absolute;left:8px;top:8px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 7px;background:rgba(0,0,0,.6);color:var(--fg);
}

.tile__meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:11px}
.tile__name{font-size:.94rem;font-weight:500;letter-spacing:-.01em}
.tile__who{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

@media (hover:hover) and (pointer:fine){
  .tile:hover .tile__media img{filter:contrast(1) brightness(1) saturate(1);transform:scale(1.04)}
  .tile:hover .tile__media::after{border-color:rgba(242,240,237,.45)}
  .tile:hover .tile__play{opacity:1}
  .tile.is-preview .tile__media video{opacity:1}
  .tile.is-preview .tile__media img{opacity:0}
  .tile.is-preview .tile__play{opacity:0}
}
.tile:focus-visible{outline:1px solid var(--fg);outline-offset:5px}

/* ─── лайтбокс ────────────────────────────── */

.lb{
  position:fixed;inset:0;z-index:100;
  display:none;place-items:center;
  padding:clamp(12px,3vw,48px);
  background:rgba(0,0,0,.93);
  opacity:0;transition:opacity .35s var(--ease);
}
.lb.open{display:grid}
.lb.shown{opacity:1}

.lb__stage{
  position:relative;
  max-width:min(1200px,100%);max-height:100%;
  display:flex;flex-direction:column;gap:12px;align-items:center;
}
.lb__video{
  max-width:100%;max-height:calc(100vh - 170px);max-height:calc(100svh - 170px);
  background:#000;outline:1px solid var(--line);
}
.lb__bar{
  display:flex;align-items:baseline;justify-content:center;gap:8px 18px;
  flex-wrap:wrap;text-align:center;
}
.lb__title{font-size:1rem;font-weight:500}

.lb__x,.lb__nav{
  position:fixed;z-index:2;
  width:44px;height:44px;display:grid;place-items:center;
  background:rgba(0,0,0,.5);border:1px solid var(--line);
  color:var(--fg);cursor:pointer;font-size:1.1rem;line-height:1;
  transition:border-color .3s,background .3s;
}
.lb__x:hover,.lb__nav:hover{border-color:rgba(242,240,237,.55);background:rgba(0,0,0,.8)}
.lb__x{top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px)}
.lb__nav--prev{left:clamp(8px,1.6vw,22px);top:50%;translate:0 -50%}
.lb__nav--next{right:clamp(8px,1.6vw,22px);top:50%;translate:0 -50%}
.lb__nav[disabled]{opacity:.25;cursor:default}

/* ─── пустая выборка / нет работ ──────────── */

.empty{
  padding:clamp(40px,8vh,90px) 0;color:var(--dim);
  border-top:1px solid var(--line);
}
.empty a{border-bottom:1px solid var(--line);color:var(--fg)}

/* ─── подвал-ссылка ───────────────────────── */

.pfoot{
  margin-top:clamp(56px,9vh,110px);padding-top:clamp(22px,3vw,34px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
}

/* ─── кнопка «все работы» на главной ─────── */

.works__top{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:clamp(30px,4vw,52px);
}
.works__top .sec-label{margin-bottom:0}

.allworks{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 20px;border:1px solid var(--line);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .4s,background .4s;
}
.allworks:hover{border-color:rgba(242,240,237,.5);background:rgba(242,240,237,.05)}
.allworks i{font-style:normal;color:var(--dim)}

/* счётчик работ на карточке артиста (главная).
   В style.css он появлялся только на ховере — теперь в нём есть
   полезный текст, поэтому виден всегда, приглушённо. */
.card__go{opacity:.5;transform:none;white-space:nowrap}

/* ─── адаптив ─────────────────────────────── */

@media (max-width:860px){
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .ahead{grid-template-columns:1fr;gap:20px;align-items:start}
  .ahead__photo{width:min(58vw,240px)}
  .tiles{grid-template-columns:1fr}
  .lb__nav{top:auto;bottom:clamp(12px,3vw,24px);translate:none}
  .lb__video{max-height:calc(100svh - 210px)}
}

@media (prefers-reduced-motion:reduce){
  .tile,.tile__media img,.tile__media video,.lb{transition:none}
}