
/* =========================================================================
   ТЕМА «КИНЕТИКА» — основной стиль
   1. Переменные и база
   2. Шапка, герой, ленты
   3. Витрина работ (список + липкий кадр)
   4. О художнике, подвал
   5. Лайтбокс и курсор-превью
   6. Внутренние страницы, записи, блоки редактора
   ========================================================================= */
:root{
  --bone:#eceae4; --bone-2:#f7f6f2; --black:#0c0c0d; --grey:#6e6b64; --grey-2:#a8a49b;
  --acc:#e2452b; --acc-2:#1f4fd8;
  --line:rgba(12,12,13,.14); --line-2:rgba(12,12,13,.07);
  --disp:'Unbounded','Inter',sans-serif;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --ital:'Cormorant Garamond','PT Serif',Georgia,serif;
  --pad:clamp(18px,4.4vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--black);font-family:var(--sans);font-weight:300;
  font-size:clamp(15px,1.02vw,16.5px);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
figure,figcaption,dl,dd,blockquote{margin:0}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400}
.eyebrow{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey)}
.wrap{max-width:1440px;margin:0 auto}
::selection{background:var(--acc);color:#fff}

body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- ШАПКА ------------------------------------------------------ */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:16px var(--pad);transition:background .5s var(--ease),border-color .5s}
.top.stuck{background:rgba(236,234,228,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)}
.top__name{font-family:var(--disp);font-size:14px;letter-spacing:-.01em;font-weight:400}
.top__name i{font-style:normal;color:var(--acc)}
.nav{display:flex;gap:clamp(12px,2vw,28px);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--acc);transition:width .4s var(--ease)}
.nav a:hover::after{width:100%}
@media (max-width:700px){.nav a:nth-child(n+3){display:none}}
@media (max-width:600px){
  .top__name{white-space:nowrap}
  .top__name .sfx{display:none}
  .nav{gap:14px;font-size:10px;letter-spacing:.12em}
  .nav a:nth-child(n+2){display:none}
}

/* ---------- ГЕРОЙ ------------------------------------------------------ */
.hero{padding:clamp(96px,14vw,190px) var(--pad) 0;position:relative}
.hero h1{font-family:var(--disp);font-size:clamp(40px,10.5vw,158px);line-height:.92;letter-spacing:-.045em;font-weight:400}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l>span{display:block;transform:translateY(105%);transition:transform 1.25s var(--ease)}
.hero.go h1 .l>span{transform:none}
.hero h1 .l:nth-child(2)>span{transition-delay:.1s}
.hero h1 em{font-family:var(--ital);font-style:italic;font-weight:300;color:var(--acc);letter-spacing:-.01em}
.hero__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:26px;
  margin-top:clamp(26px,4vw,52px);padding-bottom:clamp(26px,4vw,50px);border-bottom:1px solid var(--line)}
.hero__row p{margin:0;max-width:46ch;color:var(--grey);opacity:0;transform:translateY(20px);
  transition:opacity 1s .5s var(--ease),transform 1s .5s var(--ease)}
.hero.go .hero__row p{opacity:1;transform:none}
.hero__num{font-family:var(--disp);font-size:clamp(38px,6vw,86px);line-height:.9;letter-spacing:-.04em}
.hero__num small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--grey);margin-top:10px}

/* ---------- БЕГУЩАЯ ЛЕНТА РАБОТ ---------------------------------------- */
.strip{padding:clamp(26px,4vw,54px) 0;overflow:hidden;position:relative}
.strip__row{display:flex;gap:clamp(12px,1.6vw,26px);width:max-content;will-change:transform}
.strip figure{margin:0;flex:0 0 auto;width:clamp(140px,15vw,230px)}
.strip figure>div{overflow:hidden;background:#111;box-shadow:0 20px 40px -30px rgba(12,12,13,.7)}
.strip figure>div>*{width:100%;height:auto;transition:transform 1s var(--ease)}
.strip figure:hover>div>*{transform:scale(1.06)}
.strip figcaption{font-size:10.5px;letter-spacing:.1em;color:var(--grey);margin-top:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- СЕКЦИИ ------------------------------------------------------ */
section{position:relative}
.pad{padding:clamp(60px,9vw,140px) var(--pad)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(16px,4vw,54px);
  border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:clamp(28px,4vw,54px)}
.sec-head h2{font-family:var(--disp);font-size:clamp(26px,4.4vw,58px);line-height:1;letter-spacing:-.04em;flex:1 1 300px}
.sec-head h2 em{font-family:var(--ital);font-style:italic;color:var(--acc)}
.sec-head p{margin:0;max-width:36ch;color:var(--grey)}
[data-rv]{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ---------- ВИТРИНА: список + липкий кадр ------------------------------ */
.expo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,80px);align-items:start}
.stage{position:sticky;top:96px;height:min(78svh,760px);display:grid;place-items:center}
.stage__frame{position:relative;width:100%;height:100%;display:grid;place-items:center}
.stage__layer{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  transition:opacity .75s var(--ease),transform .95s var(--ease);transform:scale(1.04)}
.stage__layer.on{opacity:1;transform:none}
.stage__layer>*{max-height:100%;width:auto;max-width:100%;height:auto;
  box-shadow:0 50px 90px -55px rgba(12,12,13,.85);background:#111}
.stage__meta{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:space-between;
  gap:14px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}

.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.chip{cursor:pointer;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:9px 17px;
  border:1px solid var(--line);border-radius:999px;background:none;color:var(--grey);font-family:inherit;
  transition:.35s var(--ease)}
.chip:hover{border-color:var(--black);color:var(--black)}
.chip[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:var(--bone)}

.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;
  padding:clamp(14px,1.6vw,22px) 0;border-bottom:1px solid var(--line-2);cursor:pointer;
  transition:padding-left .5s var(--ease),opacity .5s var(--ease),color .4s}
.row.hide{display:none}
.row:hover{padding-left:12px}
.row.active{color:var(--black)}
.row.active .row__t{color:var(--acc)}
.row__n{font-size:10.5px;letter-spacing:.1em;color:var(--grey-2)}
.row__t{font-family:var(--disp);font-size:clamp(15px,1.55vw,22px);letter-spacing:-.02em;line-height:1.25;transition:color .4s}
.row__s{font-size:11px;color:var(--grey);margin-top:3px}
.row__y{font-size:11px;color:var(--grey-2);text-align:right}
.row__thumb{display:none}
.row.active::after{content:"";position:absolute}
.rows{position:relative}
.row{position:relative}
.row::before{content:"";position:absolute;left:-14px;top:50%;width:6px;height:6px;border-radius:50%;
  background:var(--acc);transform:translate(-6px,-50%) scale(0);transition:transform .45s var(--ease)}
.row.active::before{transform:translate(0,-50%) scale(1)}

@media (max-width:960px){
  .expo{grid-template-columns:1fr}
  .stage{display:none}
  .row{grid-template-columns:40px 1fr auto;grid-template-areas:"n t y" "th th th";padding-bottom:22px}
  .row__n{grid-area:n} .row__y{grid-area:y}
  .row__thumb{display:block;grid-area:th;margin-top:12px;overflow:hidden;background:#111}
  .row__thumb>*{width:100%;height:auto}
}

/* ---------- КРУПНАЯ ЦИТАТА / КИНЕТИКА ---------------------------------- */
.kin{padding:clamp(70px,12vw,180px) 0;overflow:hidden;border-block:1px solid var(--line);background:var(--bone-2)}
.kin__row{display:flex;width:max-content;will-change:transform}
.kin__row span{font-family:var(--disp);font-size:clamp(40px,9vw,140px);line-height:1;letter-spacing:-.05em;
  padding:0 clamp(18px,2.6vw,44px);white-space:nowrap}
.kin__row span:nth-child(even){font-family:var(--ital);font-style:italic;font-weight:300;color:var(--acc)}

/* ---------- О ХУДОЖНИКЕ ------------------------------------------------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(26px,6vw,80px);align-items:start}
@media (max-width:900px){.about{grid-template-columns:1fr}}
.about__media{overflow:hidden;aspect-ratio:4/5;background:#111}
.about__media>*{width:100%;height:100%;object-fit:cover}
.about__text p{margin:0 0 1.25em;color:var(--grey);max-width:58ch}
.about__text p:first-child{font-family:var(--disp);font-size:clamp(19px,2.2vw,30px);line-height:1.35;
  letter-spacing:-.03em;color:var(--black)}
.about__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:36px;
  padding-top:24px;border-top:1px solid var(--line)}
.about__list dt{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey-2)}
.about__list dd{margin:6px 0 0;font-family:var(--disp);font-size:15px;letter-spacing:-.02em}

/* ---------- КУРСОР-ПРЕВЬЮ ----------------------------------------------- */
#peek{position:fixed;top:0;left:0;z-index:55;width:190px;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.9);transition:opacity .35s var(--ease),transform .45s var(--ease)}
#peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#peek>*{width:100%;height:auto;box-shadow:0 30px 60px -35px rgba(12,12,13,.8)}
@media (hover:none),(max-width:960px){#peek{display:none}}

/* ---------- ЛАЙТБОКС ----------------------------------------------------- */
#lb{position:fixed;inset:0;z-index:80;background:rgba(236,234,228,.97);backdrop-filter:blur(14px);
  display:grid;grid-template-rows:1fr auto;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
#lb.open{opacity:1;visibility:visible}
#lb .stagebox{display:grid;place-items:center;padding:clamp(56px,7vw,80px) var(--pad) 8px;min-height:0}
#lb .stagebox>*{max-height:min(72svh,880px);width:auto;max-width:100%;height:auto;
  box-shadow:0 50px 100px -55px rgba(12,12,13,.8);transform:scale(.96);opacity:0;transition:.55s var(--ease)}
#lb.open .stagebox>*{transform:none;opacity:1}
#lb .meta{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:baseline;
  padding:18px var(--pad) 30px;border-top:1px solid var(--line)}
#lb .meta h3{font-family:var(--disp);font-size:clamp(18px,2.2vw,30px);letter-spacing:-.03em}
#lb .meta .sub{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey);margin-bottom:6px}
#lb .nav2{display:flex;gap:10px}
#lb button{border:1px solid var(--line);background:none;color:var(--black);border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:10px 18px;transition:.35s var(--ease)}
#lb button:hover{background:var(--black);color:var(--bone);border-color:var(--black)}
#lb .x{position:absolute;top:18px;right:var(--pad);width:44px;height:44px;padding:0;font-size:16px;border-radius:50%}
#lb .x:hover{transform:rotate(90deg)}

/* ---------- ПОДВАЛ -------------------------------------------------------- */
.foot{padding:clamp(60px,9vw,130px) var(--pad) 40px;border-top:1px solid var(--line)}
.foot__mail{display:inline-block;font-family:var(--disp);font-size:clamp(26px,6.6vw,92px);line-height:1;letter-spacing:-.05em}
.foot__mail:hover{color:var(--acc)}
.foot__grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;margin-top:clamp(34px,6vw,74px);
  padding-top:20px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--grey)}
.socials{display:flex;gap:20px;letter-spacing:.14em;text-transform:uppercase}
.socials a:hover{color:var(--acc)}

@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* =========================================================================
   6. ВНУТРЕННИЕ СТРАНИЦЫ, ЗАПИСИ, БЛОКИ РЕДАКТОРА
   ========================================================================= */

/* доступность: пропустить к содержимому */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--black);color:var(--bone);
  padding:12px 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.skip-link:focus{left:0}
:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}

/* пустая витрина (работ ещё нет) */
.empty{border:1px dashed var(--line);padding:clamp(28px,5vw,60px);text-align:center}
.empty h3{font-family:var(--disp);font-size:clamp(18px,2.4vw,28px);letter-spacing:-.03em;margin-bottom:10px}
.empty p{margin:0 0 20px;color:var(--grey)}
.btn{display:inline-block;border:1px solid var(--black);border-radius:999px;padding:12px 24px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;transition:.35s var(--ease)}
.btn:hover{background:var(--black);color:var(--bone)}

/* ---------- общий каркас внутренних страниц ---------------------------- */
.page-head{padding:clamp(110px,15vw,180px) var(--pad) clamp(28px,4vw,54px)}
.page-head .crumbs{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-2);
  margin-bottom:18px;display:flex;flex-wrap:wrap;gap:8px}
.page-head .crumbs a:hover{color:var(--acc)}
.page-head h1{font-family:var(--disp);font-size:clamp(30px,6vw,86px);line-height:.98;letter-spacing:-.045em}
.page-head h1 em{font-family:var(--ital);font-style:italic;color:var(--acc)}
.page-head .lead{margin:clamp(16px,2.4vw,28px) 0 0;max-width:56ch;color:var(--grey)}

/* ---------- страница одной работы -------------------------------------- */
.artwork{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(26px,5vw,72px);align-items:start;padding:0 var(--pad) clamp(60px,9vw,130px)}
@media (max-width:900px){.artwork{grid-template-columns:1fr}}
.artwork__main img{width:100%;height:auto;background:#111}
.artwork__side{position:sticky;top:96px}
@media (max-width:900px){.artwork__side{position:static}}
.artwork__facts{border-top:1px solid var(--line)}
.artwork__facts div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line-2)}
.artwork__facts dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-2)}
.artwork__facts dd{font-family:var(--disp);font-size:14px;letter-spacing:-.02em}
.artwork__concept{margin-top:clamp(24px,3vw,40px)}
.artwork__concept h2{font-family:var(--disp);font-size:14px;letter-spacing:.02em;margin-bottom:12px}
.artwork__concept p{color:var(--grey);margin:0 0 1em}
.artwork__gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:clamp(10px,1.4vw,20px);margin-top:clamp(16px,2.4vw,30px)}
.artwork__gallery a{overflow:hidden;background:#111;display:block}
.artwork__gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  transition:transform 1s var(--ease)}
.artwork__gallery a:hover img{transform:scale(1.05)}
.artwork__nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
  padding:26px var(--pad) clamp(60px,9vw,120px);border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.artwork__nav a:hover{color:var(--acc)}

/* ---------- архив работ / раздел --------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:clamp(18px,2.6vw,42px);padding:0 var(--pad) clamp(60px,9vw,130px)}
.card2{display:block}
.card2__media{overflow:hidden;background:#111;aspect-ratio:4/5}
.card2__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card2:hover .card2__media img{transform:scale(1.05)}
.card2__t{font-family:var(--disp);font-size:clamp(15px,1.5vw,20px);letter-spacing:-.02em;margin-top:14px}
.card2:hover .card2__t{color:var(--acc)}
.card2__s{font-size:11px;color:var(--grey);margin-top:4px}
.sections-nav{display:flex;flex-wrap:wrap;gap:7px;padding:0 var(--pad) clamp(24px,3vw,40px)}

/* ---------- обычная страница / запись ---------------------------------- */
.entry{padding:0 var(--pad) clamp(60px,9vw,130px)}
.entry__body{max-width:74ch;margin-inline:auto}
.entry__body>*{margin-block:0 1.2em}
.entry__body h2{font-family:var(--disp);font-size:clamp(22px,3vw,38px);letter-spacing:-.035em;margin-top:1.6em}
.entry__body h3{font-family:var(--disp);font-size:clamp(18px,2.2vw,26px);letter-spacing:-.03em;margin-top:1.4em}
.entry__body a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.entry__body a:hover{color:var(--acc)}
.entry__body blockquote{font-family:var(--ital);font-style:italic;font-size:clamp(20px,2.6vw,30px);
  line-height:1.35;border-left:2px solid var(--acc);padding-left:22px;margin-block:1.6em}
.entry__body figure{margin-block:1.6em}
.entry__body figcaption{font-size:11.5px;color:var(--grey);margin-top:8px}
.entry__body img{height:auto}
.entry__body ul,.entry__body ol{padding-left:1.2em}
.entry__body li{margin-bottom:.4em}
.entry__body code,.entry__body pre{background:var(--bone-2);border:1px solid var(--line-2)}
.entry__body pre{padding:16px;overflow:auto}
.alignwide{width:min(1100px,100%);margin-inline:auto}
.alignfull{width:100vw;margin-left:calc(50% - 50vw);max-width:none}
.aligncenter{margin-inline:auto}
.wp-caption-text{font-size:11.5px;color:var(--grey)}

/* пагинация */
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 var(--pad) clamp(50px,8vw,110px)}
.pager .page-numbers{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:11.5px;
  transition:.3s var(--ease)}
.pager .current,.pager .page-numbers:hover{background:var(--black);color:var(--bone);border-color:var(--black)}

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

/* ссылка-кнопка в лайтбоксе и chip-ссылки в архивах */
#lb .nav2 a.more{border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;transition:.35s var(--ease)}
#lb .nav2 a.more:hover{background:var(--black);color:var(--bone);border-color:var(--black)}
a.chip{display:inline-block;text-decoration:none}
a.chip[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:var(--bone)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;border:0;padding:0;margin:-1px}
.searchform{display:flex;gap:10px;flex-wrap:wrap}
.searchform input[type=search]{flex:1 1 220px;border:1px solid var(--line);background:none;border-radius:999px;
  padding:11px 18px;font:inherit;font-size:14px;color:inherit}
