/* ══════════════════════════════════════════════════════════════════════
   ARCOO — направления Искусство и Антиквариат.

   Одна вёрстка на оба направления: типографика, ритм секций и механика
   прокрутки те же, что в Наследии. Отличается палитра — она объявлена
   переменными --d-* на body и дальше нигде не хардкодится.

   Наследие  — тонированная бумага и золото (описано в токенах).
   Искусство — галерейная белизна, чёрная типографика, киноварь.
   Антиквариат — тёмный зал витрины, бронза, свет на предмете.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Палитры направлений ────────────────────────────────────────────── */
body.dir-art{
  --d-page:#F1F0EC;
  --d-page-alt:#FBFAF8;
  --d-deep:#141412;
  --d-ink:#141412;
  --d-body:#4B4945;
  --d-muted:#8B8880;
  --d-on-deep:#EEECE7;
  --d-on-deep-muted:#9C978C;
  --d-line:rgba(20,20,18,.13);
  --d-line-strong:rgba(20,20,18,.34);
  --d-accent:#1A3A63;              /* фирменный синий — красного в марке нет */
  --d-accent-soft:rgba(26,58,99,.10);
  --d-shadow:0 40px 90px -34px rgba(20,20,18,.45);
  --d-glass:rgba(251,250,248,.78);
}
body.dir-antique{
  --d-page:#16130F;
  --d-page-alt:#1E1A14;
  --d-deep:#0C0A07;
  --d-ink:#F1EADD;
  --d-body:#BEB4A3;
  --d-muted:#8B8272;
  --d-on-deep:#F1EADD;
  --d-on-deep-muted:#9A9083;
  --d-line:rgba(241,234,221,.15);
  --d-line-strong:rgba(241,234,221,.38);
  --d-accent:#C0904E;              /* бронза */
  --d-accent-soft:rgba(192,144,78,.14);
  --d-shadow:0 40px 90px -30px rgba(0,0,0,.75);
  --d-glass:rgba(22,19,15,.72);
}

body.dir{ background:var(--d-page); color:var(--d-body); --d-max:1560px }
.dir .pad{ padding-left:max(var(--page-margin), (100% - var(--d-max)) / 2);
  padding-right:max(var(--page-margin), (100% - var(--d-max)) / 2) }
body.dir a{ color:inherit }
html.dir-html, body.dir{ overflow-x:clip }

/* ── Общий каркас секций ────────────────────────────────────────────── */
.dir .sheet{ position:relative; z-index:6; background:var(--d-page) }
.dir .section{ padding:clamp(72px,11vh,150px)
  max(var(--page-margin), (100% - var(--d-max)) / 2) }
.dir .section.alt{ background:var(--d-page-alt) }
.dir .section.deep{ background:var(--d-deep); color:var(--d-on-deep) }
/* На тёмном линии светлеют — иначе разделители просто пропадают */
body.dir-art .section.deep{ --d-line:rgba(238,236,231,.14);
  --d-line-strong:rgba(238,236,231,.32) }
/* Тёмная секция стыкуется с тёмным футером без светлой полосы между ними */
body.dir .site-footer{ margin-top:0 }

/* Блок связи перед подвалом берёт палитру направления: на бумажном фоне
   платформы светлая типографика Антиквариата пропадала совсем */
body.dir .contact-band{ background:var(--d-page-alt); color:var(--d-body) }
body.dir .contact-band .display{ color:var(--d-ink) }
body.dir .contact-band .eyebrow{ color:var(--d-accent) }
body.dir .contact-band .lead{ color:var(--d-muted) }
body.dir .contact-list span{ color:var(--d-muted) }
body.dir .contact-list b{ color:var(--d-ink) }
body.dir .contact-list a:hover b{ color:var(--d-accent) }
body.dir .contact-form{ background:var(--d-page); border-color:var(--d-line);
  box-shadow:var(--d-shadow) }
body.dir .contact-form .field > label{ color:var(--d-muted) }
body.dir .contact-form .field input,
body.dir .contact-form .field textarea{
  background:transparent; color:var(--d-ink); border-color:var(--d-line) }
body.dir .contact-form .field input:focus,
body.dir .contact-form .field textarea:focus{ border-color:var(--d-accent); box-shadow:none }
body.dir .contact-form .hint{ color:var(--d-muted) }
body.dir .contact-form .btn-primary{ background:var(--d-accent);
  border-color:var(--d-accent); color:#FFF }
body.dir .contact-form .btn-primary:hover{ filter:brightness(1.12); color:#FFF }
.dir .display{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(30px,4.4vw,66px); line-height:1.06;
  letter-spacing:var(--tracking-display); color:var(--d-ink); margin:0;
}
.dir .section.deep .display{ color:var(--d-on-deep) }
.dir .lead{ font-size:clamp(16px,1.35vw,21px); line-height:1.65;
  color:var(--d-muted); max-width:58ch; margin:0 }
.dir .section.deep .lead{ color:var(--d-on-deep-muted) }
.dir .eyebrow{
  font-family:var(--font-text); font-size:11px; font-weight:600;
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--d-accent); margin:0;
}
.dir h3{ color:var(--d-ink) }
.dir .section.deep h3{ color:var(--d-on-deep) }

/* Кнопки направления: те же пропорции, что у платформы, но своя палитра */
.dir .d-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 var(--space-6); text-decoration:none;
  font-family:var(--font-text); font-size:11.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--d-line-strong); color:var(--d-ink);
  background:transparent; transition:background .3s ease, color .3s ease,
             border-color .3s ease;
}
.dir .d-btn:hover{ background:var(--d-ink); color:var(--d-page); border-color:var(--d-ink) }
.dir .d-btn.solid{ background:var(--d-accent); border-color:var(--d-accent); color:#FFF }
.dir .d-btn.solid:hover{ filter:brightness(1.12) }
.dir .section.deep .d-btn{ color:var(--d-on-deep); border-color:var(--d-line-strong) }
.dir .section.deep .d-btn:hover{ background:var(--d-on-deep); color:var(--d-deep) }

/* ── Марка и меню ───────────────────────────────────────────────────── */
/* Размеры знака задаёт .mark-lock в app.css — здесь только положение,
   иначе жёсткая ширина круглой печати растягивала бы надпись */
.d-seal{ position:fixed; top:clamp(16px,3vw,43px); left:clamp(16px,3vw,43px);
         z-index:60; text-decoration:none; border:0; }
.d-seal{ transition:opacity .5s ease, transform .8s cubic-bezier(.16,1,.3,1) }
.d-seal.gone{ opacity:0; transform:scale(.9); pointer-events:none }
.d-seal .ring{ transform-box:fill-box; transform-origin:center;
  animation:dSpin 16s linear infinite }
@keyframes dSpin{ to{ transform:rotate(360deg) } }

.d-nav{
  position:fixed; top:clamp(16px,3vw,43px); right:clamp(16px,3vw,43px); z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  padding:16px 20px 18px; color:var(--d-ink);
}
.d-nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--d-glass); backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 10px 40px rgba(0,0,0,.14);
  opacity:0; transform:scale(.97);
  transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
}
.d-nav:hover::before, .d-nav:focus-within::before{ opacity:1; transform:none }
/* Над тёмным блоком меню перекрашивается — иначе чёрным по тёмному */
.d-nav{ transition:color .45s ease }
.d-nav.on-dark{ color:var(--d-on-deep) }
/* На телефоне меню с подложкой закрывало бы содержание — после
   первого экрана оно уходит, переходы остаются в самих секциях */
.d-nav.gone{ opacity:0; pointer-events:none }
.d-nav a{ font-family:var(--font-text); font-size:11.5px; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  border:0; line-height:1.7; transition:opacity .25s ease }
.d-nav a:hover{ opacity:.55 }
/* Список пунктов: на широком экране открыт всегда, на телефоне — по кнопке */
.d-nav .nav-list{ display:flex; flex-direction:column; align-items:flex-end; gap:6px }
.d-nav .nav-toggle{ display:none }
.d-nav .primary{
  font-family:var(--font-display); font-size:clamp(18px,1.8vw,25px); font-weight:600;
  letter-spacing:.04em; border-bottom:1px solid currentColor; padding-bottom:4px;
  margin-bottom:9px; text-transform:uppercase; line-height:1.15; text-align:right;
}

/* ── Заглушка направления ─────────────────────────────────────────────
   Направление объявлено, но не наполнено. Показываем марку и обещание —
   без выдуманных работ и цен.                                         */
.soon{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:clamp(90px,14vh,160px) var(--page-margin) clamp(60px,10vh,120px);
  background:var(--d-page) }
.soon-inner{ text-align:center; max-width:760px; display:flex; flex-direction:column;
  align-items:center; gap:clamp(14px,2.2vh,26px) }
.soon-mark{ width:clamp(76px,7vw,116px); color:var(--d-accent) }
.soon-mark svg{ width:100%; height:auto; display:block }
.soon-eyebrow{ font-family:var(--font-display); font-size:clamp(12px,1.1vw,15px);
  letter-spacing:.34em; text-transform:uppercase; color:var(--d-muted) }
.soon-title{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(30px,4.6vw,64px); line-height:1.08; color:var(--d-ink);
  text-wrap:balance }
.soon-note{ margin:0; font-size:clamp(15px,1.3vw,19px); line-height:1.6;
  color:var(--d-muted); max-width:52ch }
.soon-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-4);
  margin-top:clamp(10px,2vh,22px) }

/* ── Первый экран: разлёт работ ─────────────────────────────────────── */
.scatter{ position:relative; height:190vh; background:var(--d-page) }
.scatter-sticky{ position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center }

/* Слой с работами. --m — поправка на узкий экран, --k — разгон прокруткой */
.scatter-stage{ position:absolute; inset:0; --m:1; --k:1 }
.fly{
  position:absolute; left:50%; top:50%; margin:0;
  width:clamp(230px,30vw,460px); aspect-ratio:16/9;
  background:var(--d-page-alt);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.42), 0 2px 10px rgba(0,0,0,.06);
  transform:translate(-50%,-50%) rotate(calc(var(--r) * .25)) scale(.30);
  opacity:0;
  transition:transform 1.75s cubic-bezier(.16,1,.3,1) var(--delay,0s),
             opacity .9s ease var(--delay,0s);
  will-change:transform;
}
.fly img{ width:100%; height:100%; object-fit:cover; display:block }
/* Толщина подрамника: работа стоит в пространстве, а не наклеена на фон */
.fly::after{ content:""; position:absolute; inset:0;
  box-shadow:inset -2px -3px 0 rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.13);
  pointer-events:none }
.scatter.open .fly{
  opacity:1;
  transform:translate(
      calc(-50% + var(--x) * var(--m) * var(--k)),
      calc(-50% + var(--y) * var(--m) * var(--k)))
    rotate(var(--r)) scale(calc(var(--s) * var(--m)));
}

.scatter-core{ position:relative; z-index:5; text-align:center; pointer-events:none;
  opacity:0; transform:translateY(18px);
  transition:opacity 1s ease .5s, transform 1.2s cubic-bezier(.16,1,.3,1) .5s }
.scatter.open .scatter-core{ opacity:1; transform:none }
.scatter-core .mark{ display:block; font-family:var(--font-display);
  font-size:clamp(12px,1.1vw,15px); letter-spacing:.5em; text-transform:uppercase;
  color:var(--d-muted); margin-bottom:clamp(8px,1.4vh,18px); padding-left:.5em }
.scatter-core h1{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(46px,9vw,148px); line-height:.92; letter-spacing:-.02em;
  color:var(--d-ink) }
.scatter-core p{ margin:clamp(14px,2.4vh,30px) 0 0; font-family:var(--font-text);
  font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--d-muted) }
.scatter-core .tagline{ font-family:var(--font-display); font-size:clamp(16px,1.5vw,22px);
  letter-spacing:0; text-transform:none; font-weight:400; color:var(--d-body);
  margin-top:clamp(10px,1.6vh,20px) }

.scatter-load{ position:absolute; left:50%; bottom:clamp(60px,12vh,120px);
  transform:translateX(-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-4);
  font-family:var(--font-text); font-size:11px; font-weight:600;
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--d-muted); transition:opacity .5s ease }
.scatter-load.gone{ opacity:0; pointer-events:none }
.scatter-load .bar{ display:block; width:180px; height:2px; background:var(--d-line) }
.scatter-load .bar i{ display:block; height:100%; width:0; background:var(--d-accent);
  transition:width .25s ease }
.scatter-load .pct{ font-family:var(--font-mono); font-variant-numeric:tabular-nums }

.d-rail{ position:fixed; left:clamp(18px,2.4vw,40px); bottom:clamp(24px,5vh,56px);
  z-index:60; display:flex; flex-direction:column; align-items:center;
  gap:var(--space-3); color:var(--d-ink); transition:opacity .45s ease }
.d-rail.gone{ opacity:0; pointer-events:none }
.d-rail .word{ writing-mode:vertical-rl; font-family:var(--font-text); font-size:10px;
  font-weight:600; letter-spacing:.34em; text-transform:uppercase; opacity:.7 }
.d-rail .line{ width:1px; height:60px; background:currentColor; opacity:.3;
  position:relative; overflow:hidden }
.d-rail .line::after{ content:""; position:absolute; left:0; width:1px; height:20px;
  background:var(--d-accent); animation:dDrop 2.1s cubic-bezier(.65,0,.35,1) infinite }
@keyframes dDrop{ 0%{ top:-20px } 62%,100%{ top:60px } }

/* ── Вводный блок и три шага ────────────────────────────────────────── */
.dir .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-7);
  margin-top:clamp(48px,7vh,96px); border-top:1px solid var(--d-line);
  padding-top:var(--space-6) }
.dir .step .num{ font-family:var(--font-mono); font-size:var(--text-sm);
  color:var(--d-accent); letter-spacing:.08em }
.dir .step h3{ font-family:var(--font-display); font-weight:400;
  font-size:clamp(20px,1.8vw,28px); margin:var(--space-4) 0 var(--space-3) }
.dir .step p{ font-size:var(--text-sm); line-height:1.65; color:var(--d-muted); margin:0 }

/* ── Авторы ─────────────────────────────────────────────────────────── */
.people-head{ display:grid; gap:var(--space-5); max-width:70ch }
.people-row{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,34px); margin-top:clamp(44px,6vh,84px) }
.person{ text-decoration:none; border:0; display:flex; flex-direction:column;
  gap:var(--space-3); color:inherit }
.person .portrait{ position:relative; display:block; aspect-ratio:3/4; overflow:hidden;
  background:var(--d-page-alt) }
.person .portrait img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.04);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s ease }
.person:hover .portrait img{ transform:scale(1.06); filter:grayscale(0) contrast(1) }
/* Цитата поднимается изнутри портрета — карточка не прыгает по высоте */
.person .says{ position:absolute; left:0; right:0; bottom:0; padding:var(--space-5);
  font-family:var(--font-display); font-size:clamp(14px,1.1vw,18px); line-height:1.35;
  color:#F4F2EE; background:linear-gradient(transparent, rgba(10,10,9,.86) 42%);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1) }
.person:hover .says, .person:focus-visible .says{ opacity:1; transform:none }
.person .who{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.person b{ font-family:var(--font-display); font-weight:400;
  font-size:clamp(18px,1.5vw,24px); color:var(--d-ink) }
.person .born{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--d-muted) }
.person .craft{ font-size:var(--text-sm); color:var(--d-muted) }
.person .go{ margin-top:auto; font-family:var(--font-text); font-size:10.5px;
  font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--d-accent); opacity:0; transform:translateY(-4px);
  transition:opacity .35s ease, transform .35s ease }
.person:hover .go, .person:focus-visible .go{ opacity:1; transform:none }

/* Для антиквариата вместо авторов — три истории происхождения */
.origins{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,40px);
  margin-top:clamp(44px,6vh,84px) }
.origin{ border-top:1px solid var(--d-line-strong); padding-top:var(--space-5) }
.origin .when{ font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--d-accent); letter-spacing:.08em }
.origin h3{ font-family:var(--font-display); font-weight:400;
  font-size:clamp(20px,1.7vw,26px); margin:var(--space-3) 0 var(--space-4) }
.origin p{ margin:0; font-size:var(--text-sm); line-height:1.7; color:var(--d-muted) }

/* ── Витрина: вертикальная прокрутка двигает работы вбок ────────────── */
.stage{ position:relative }
.stage-screen{ position:sticky; top:0; height:100vh; overflow:hidden;
  background:var(--d-page-alt); display:flex; flex-direction:column;
  /* Витрина шире текстовых секций: работа должна занимать экран */
  --d-max:1860px }
body.dir-antique .stage-screen{ background:var(--d-deep) }
.stage-track{ display:flex; flex:1; min-height:0;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1) }
.work{ flex:0 0 100%; display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  align-items:center; gap:clamp(24px,4vw,80px);
  padding:clamp(56px,9vh,110px) max(var(--page-margin), (100% - var(--d-max)) / 2)
          clamp(40px,7vh,80px) }

.work-photo{ position:relative; perspective:1400px }
.work-photo .canvasbox{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d; transition:transform .5s cubic-bezier(.16,1,.3,1);
  box-shadow:var(--d-shadow);
}
.work-photo img{ width:100%; height:100%; object-fit:cover; display:block }
/* Торец подрамника и блик — из-за них работа выглядит вещью, а не картинкой */
.work-photo .canvasbox::after{ content:""; position:absolute; inset:0;
  box-shadow:inset -2px -3px 0 rgba(0,0,0,.20), inset 0 0 0 1px rgba(0,0,0,.07);
  pointer-events:none }
.work-photo .canvasbox::before{ content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(115deg, rgba(255,255,255,.22) 0 18%, transparent 46%);
  opacity:.5; pointer-events:none }

.work-side{ display:flex; flex-direction:column; gap:var(--space-4);
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1) }
.work.on .work-side{ opacity:1; transform:none }
.work-side .by{ font-family:var(--font-text); font-size:11px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--d-accent) }
.work-side h3{ font-family:var(--font-display); font-weight:400;
  font-size:clamp(26px,3vw,50px); line-height:1.04; margin:0; color:var(--d-ink) }
.work-side .facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4) var(--space-5); padding:var(--space-5) 0;
  border-top:1px solid var(--d-line); border-bottom:1px solid var(--d-line) }
.work-side .facts span{ display:block; font:var(--type-label);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--d-muted) }
.work-side .facts b{ display:block; margin-top:6px; font-family:var(--font-mono);
  font-size:var(--text-md); font-weight:500; color:var(--d-ink) }
.work-side .facts b.text{ font-family:var(--font-text); font-size:var(--text-sm) }

/* Слова автора об этой работе — главный текст витрины */
.saying{ margin:0; display:flex; flex-direction:column; gap:var(--space-4) }
.saying p{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(17px,1.5vw,25px); line-height:1.42; color:var(--d-ink);
  border-left:2px solid var(--d-accent); padding-left:var(--space-5) }
.saying figcaption{ display:flex; align-items:center; gap:var(--space-3);
  font-size:var(--text-sm); color:var(--d-muted) }
.saying .ava{ width:38px; height:38px; flex:0 0 38px; overflow:hidden; border-radius:50%;
  background:var(--d-page); display:grid; place-items:center;
  font-family:var(--font-display); color:var(--d-muted) }
.saying .ava img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) }
.work-side .verdict{ font-size:var(--text-sm); line-height:1.6; color:var(--d-muted);
  display:flex; gap:10px }
.work-side .verdict::before{ content:"✓"; color:var(--d-accent) }

.stage-nav{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-5); padding:0 var(--page-margin) clamp(22px,4vh,44px);
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--d-muted) }
.stage-nav .dots{ display:flex; gap:8px }
.stage-nav .dot{ width:26px; height:2px; background:var(--d-line-strong); opacity:.4;
  transition:opacity .3s ease, background .3s ease }
.stage-nav .dot.on{ opacity:1; background:var(--d-accent) }

/* ── Каталог: подвесная система галереи вместо лозы Наследия ────────── */
.hall{ position:relative; overflow:clip }
.hang{ position:absolute; left:0; right:0; top:0; height:clamp(150px,26vh,300px);
  pointer-events:none; z-index:1 }
/* Свет из-под потолка: широкое мягкое пятно поперёк зала */
.hang .wash{ position:absolute; left:-10%; right:-10%; top:-40%; height:180%;
  background:radial-gradient(58% 70% at 50% 0%,
    rgba(255,255,255,.85) 0%, rgba(255,255,255,.34) 38%, transparent 72%);
  opacity:.9 }
body.dir-antique .hang .wash{
  background:radial-gradient(58% 70% at 50% 0%,
    rgba(192,144,78,.22) 0%, rgba(192,144,78,.08) 40%, transparent 74%) }
/* Рейка и тросы — то, на чём в галерее физически висят работы */
.hang .beam{ position:absolute; left:0; right:0; top:var(--beam,34px); height:2px;
  background:var(--d-line-strong); opacity:.5 }
.hang .wire{ position:absolute; top:calc(var(--beam,34px) + 1px); width:1px;
  background:var(--d-line-strong); opacity:.42;
  transform-origin:top center; transform:scaleY(var(--grow,1)) }
.hang .wire::after{ content:""; position:absolute; left:-2px; bottom:-3px;
  width:5px; height:5px; border-radius:50%; background:var(--d-accent); opacity:.75 }

.hall-head{ position:relative; z-index:2; display:flex; align-items:flex-end;
  justify-content:space-between; gap:var(--space-6); flex-wrap:wrap;
  padding-top:clamp(60px,10vh,130px) }
.hall-head .lead{ margin-top:var(--space-4) }

.works-grid{ position:relative; z-index:2; display:grid;
  grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.2vw,40px);
  margin-top:clamp(44px,6vh,84px) }
.work-card{ text-decoration:none; border:0; display:flex; flex-direction:column;
  gap:var(--space-3); color:inherit }
.work-card .ph{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  background:var(--d-page-alt);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.5);
  transition:transform .7s cubic-bezier(.16,1,.3,1), box-shadow .5s ease }
.work-card:hover .ph{ transform:translateY(-6px); box-shadow:0 32px 60px -28px rgba(0,0,0,.62) }
.work-card .ph img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1) }
.work-card:hover .ph img{ transform:scale(1.05) }
.work-card .ph::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset -1px -2px 0 rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.06) }
.work-card .who{ font-family:var(--font-text); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--d-accent) }
.work-card b{ font-family:var(--font-display); font-weight:400; font-size:var(--text-lg);
  line-height:1.2; color:var(--d-ink) }
.work-card .meta{ font-size:var(--text-xs); color:var(--d-muted); line-height:1.5 }
.work-card .price{ font-family:var(--font-mono); font-size:var(--text-sm); color:var(--d-ink);
  margin-top:auto; padding-top:var(--space-2) }
.work-card-ad{ grid-column:4; grid-row:1 / span 2; align-self:stretch }
.work-card-ad .ph{ aspect-ratio:auto; flex:1; min-height:260px }
.work-card-ad .ad-mark{ position:absolute; left:0; top:0; padding:6px 12px; z-index:2;
  font:var(--type-label); letter-spacing:var(--tracking-caps); text-transform:uppercase;
  background:var(--d-page); color:var(--d-muted) }

/* ── Цифры ──────────────────────────────────────────────────────────── */
.dir .figures{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6);
  margin-top:clamp(48px,7vh,96px); border-top:1px solid var(--d-line-strong);
  padding-top:var(--space-6) }
.dir .figure b{ display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(38px,4.4vw,68px); line-height:1; color:var(--d-accent) }
.dir .figure span{ display:block; margin-top:var(--space-3); font-size:var(--text-sm);
  line-height:1.55; color:var(--d-on-deep-muted) }

/* ── Страница автора ────────────────────────────────────────────────── */
.artist-top{ display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,4vw,80px); align-items:start;
  padding:clamp(96px,16vh,190px) max(var(--page-margin), (100% - var(--d-max)) / 2)
          clamp(56px,8vh,110px) }
.artist-top .shot{ position:relative; aspect-ratio:3/4; overflow:hidden;
  background:var(--d-page-alt); box-shadow:var(--d-shadow) }
.artist-top .shot img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) }
.artist-top .about{ display:flex; flex-direction:column; gap:var(--space-5) }
.artist-top h1{ font-family:var(--font-display); font-weight:400;
  font-size:clamp(38px,5.6vw,86px); line-height:.98; margin:0; color:var(--d-ink) }
.artist-top .sub{ font-size:var(--text-md); color:var(--d-muted) }
.artist-top .bio{ font-size:var(--text-md); line-height:1.75; color:var(--d-body);
  max-width:60ch }
.artist-top .big-quote{ font-family:var(--font-display); font-weight:400;
  font-size:clamp(20px,2.1vw,34px); line-height:1.32; color:var(--d-ink);
  border-left:2px solid var(--d-accent); padding-left:var(--space-5); margin:0 }
.artist-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);
  border-top:1px solid var(--d-line); padding-top:var(--space-5) }
.artist-stats span{ display:block; font:var(--type-label);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--d-muted) }
.artist-stats b{ display:block; margin-top:6px; font-family:var(--font-mono);
  font-size:var(--text-md); font-weight:500; color:var(--d-ink) }
.back-line{ position:absolute; }

/* ── Появление секций ───────────────────────────────────────────────── */
html.js-reveal .dir-reveal{ opacity:0; transform:translateY(26px) }
.dir-reveal{ transition:opacity .9s ease, transform 1.1s cubic-bezier(.16,1,.3,1) }
html.js-reveal .dir-reveal.in{ opacity:1; transform:none }

/* ── Планшет и телефон ──────────────────────────────────────────────── */
/* На узком окне плашка направлений по центру дотягивается до меню
   справа — меню уходит под неё */
@media (max-width:1150px){
  .d-nav{ top:92px }
}
@media (max-width:1100px){
  .people-row{ grid-template-columns:repeat(2,1fr) }
  .works-grid{ grid-template-columns:repeat(2,1fr) }
  .work-card-ad{ grid-column:auto; grid-row:auto }
  .work-card-ad .ph{ min-height:0; aspect-ratio:16/9 }
  .dir .steps, .origins{ grid-template-columns:1fr; gap:var(--space-6) }
  .dir .figures{ grid-template-columns:repeat(2,1fr) }
  .work{ grid-template-columns:1fr; align-content:center; gap:var(--space-5) }
  .artist-top{ grid-template-columns:1fr }
  .artist-stats{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:767px){
  .scatter{ height:150vh }
  /* На узком экране пропорции разлёта другие: работы уходят в верхнюю
     и нижнюю полосы, середину освобождаем под название */
  .scatter-stage{ --m:1 }
  .fly{ width:44vw }
  .fly:nth-child(1){ --x:-25vw !important; --y:-26vh !important; --s:.92 !important }
  .fly:nth-child(2){ --x: 26vw !important; --y:-29vh !important; --s:.80 !important }
  .fly:nth-child(3){ --x:-27vw !important; --y: 33vh !important; --s:.74 !important }
  .fly:nth-child(4){ --x: 28vw !important; --y: 36vh !important; --s:.86 !important }
  /* Пятая работа на телефоне уезжала под меню — на узком экране
     достаточно пяти: две сверху, три снизу */
  .fly:nth-child(5){ display:none }
  .fly:nth-child(6){ --x:  2vw !important; --y: 42vh !important; --s:.62 !important }
  .scatter-core p{ letter-spacing:.18em }
  .fly:nth-child(n+7){ display:none }
  /* Работы разлетаются под самое меню — подложка нужна постоянно */
  .d-nav::before{ opacity:1; transform:none }
  .d-nav{ padding:10px 14px 11px; gap:3px }
  .d-nav .primary{ font-size:16px; margin-bottom:6px }
  .d-nav a{ font-size:11px; letter-spacing:.16em }

  /* Пункты под кнопкой: списком они наезжали на знак марки слева */
  .d-nav .nav-toggle{
    display:inline-flex; align-items:center; gap:9px; padding:0;
    background:none; border:0; color:inherit; cursor:pointer;
    font-family:var(--font-text); font-size:11px; font-weight:800;
    letter-spacing:.18em; text-transform:uppercase }
  .d-nav .nav-toggle .bars{ width:20px; height:12px; position:relative;
    border-top:2px solid currentColor; border-bottom:2px solid currentColor }
  .d-nav .nav-toggle .bars::after{ content:""; position:absolute; left:0; right:0; top:5px;
    height:2px; background:currentColor }
  .d-nav .nav-list{ display:none; margin-top:12px }
  .d-nav.open .nav-list{ display:flex }

  /* Название направления на низком экране не помещалось в первый экран */
  .scatter-core h1{ font-size:clamp(26px,8.6vw,40px) }
  .scatter-core .tagline{ font-size:15px }
  .scatter-core p{ font-size:10.5px; margin-top:clamp(10px,1.8vh,20px) }
  .d-rail{ display:none }
  .people-row{ grid-template-columns:1fr }
  .person .says{ opacity:1; transform:none }
  .work-side .facts{ grid-template-columns:1fr 1fr }
  /* На телефоне лента работ листается пальцем, а не прокруткой страницы */
  .stage{ height:auto !important }
  .stage-screen{ position:static; height:auto }
  .stage-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    transform:none !important; -webkit-overflow-scrolling:touch;
    scrollbar-width:none }
  .stage-track::-webkit-scrollbar{ display:none }
  .work{ flex:0 0 88%; scroll-snap-align:center; padding:var(--space-6) var(--space-5) }
  .work .work-side{ opacity:1; transform:none }
  .stage-nav{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .fly, .scatter-core, .work-side, .dir-reveal, .work-card .ph, .person .portrait img{
    transition:none !important }
    .scatter{ height:100vh }
}