/* ═════════════════════════════════════════════════════════════════
   АННА БАТЕНЬКОВА — АКТРИСА · ПОРТФОЛИО
   Индустриальный лофт с теплотой: бетон, латунь, бордо, софиты.
   Чистый CSS3, без фреймворков и внешних зависимостей (кроме шрифтов).
   ═════════════════════════════════════════════════════════════════ */

/* ---------- 1. Токены ---------- */
:root{
  --bg:        #1a1a1a;
  --bg-deep:   #141413;
  --panel:     #2d2d2d;
  --gold:      #c9a96e;
  --gold-dim:  rgba(201,169,110,.35);
  --gold-line: rgba(201,169,110,.18);
  --wine:      #8b2635;
  --text:      #f5f1e8;
  --muted:     rgba(245,241,232,.62);
  --faint:     rgba(245,241,232,.4);

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Montserrat', 'Segoe UI', Arial, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);

  /* зерно плёнки — inline SVG, внешних файлов нет */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- 2. База ---------- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
}

html.no-scroll{ overflow:hidden }

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(201,169,110,.05), transparent 60%),
    var(--bg);
  color:var(--text);
  font:400 16px/1.7 var(--sans);
  overflow-x:hidden;
}

/* киношное зерно поверх всего (кроме модалок) */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:2000;
  pointer-events:none;
  background-image:var(--grain);
  opacity:.05;
}

::selection{ background:var(--wine); color:var(--text) }

img{ max-width:100%; display:block }
a{ color:inherit }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

/* аккуратный скроллбар */
::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:var(--bg-deep) }
::-webkit-scrollbar-thumb{ background:#3a3835; border-radius:5px; border:2px solid var(--bg-deep) }
::-webkit-scrollbar-thumb:hover{ background:var(--gold) }

/* утилиты */
.container{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 56px);
}

/* ---------- 3. Система появления при прокрутке ---------- */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:
    opacity 1.1s var(--ease) var(--d, 0s),
    transform 1.1s var(--ease) var(--d, 0s);
  /* will-change не ставим: на страницах с многими плитками лишние
     композитные слои приводят к чёрным областям в headless-рендере */
}
.reveal.is-visible{ opacity:1; transform:none }

/* ---------- 4. Прелоадер ---------- */
.preloader{
  position:fixed; inset:0;
  z-index:4000;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(201,169,110,.06), transparent 70%),
    var(--bg-deep);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .9s ease, visibility .9s ease;
  /* страховка: если скрипт не загрузился — шторка уйдёт сама */
  animation:preAuto .8s ease 6s forwards;
}
.preloader.done{ opacity:0; visibility:hidden }
@keyframes preAuto{ to{ opacity:0; visibility:hidden } }

.pre-inner{ display:flex; flex-direction:column; align-items:center; gap:24px }
.pre-mono{
  font:600 2.6rem/1 var(--serif);
  letter-spacing:.14em;
  color:var(--gold);
  animation:prePulse 2.2s ease-in-out infinite;
}
@keyframes prePulse{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

.pre-bar{ width:150px; height:1px; background:var(--gold-line); overflow:hidden }
.pre-bar i{
  display:block; width:40%; height:100%;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  animation:preSlide 1.5s var(--ease) infinite;
}
@keyframes preSlide{ from{ transform:translateX(-110%) } to{ transform:translateX(380%) } }

.pre-text{
  font:300 10px/1 var(--sans);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ---------- 5. Навигация ---------- */
.nav{
  position:fixed; inset:0 0 auto 0;
  z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px clamp(20px, 4.5vw, 56px);
  transition:padding .5s var(--ease), background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding-block:11px;
  background:rgba(23,22,21,.84);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--gold-line);
}

.brand{
  font:600 1.3rem/1 var(--serif);
  letter-spacing:.1em;
  color:var(--text);
  text-decoration:none;
  transition:color .4s;
}
.brand span{ color:var(--gold); font-style:italic }
.brand:hover{ color:var(--gold) }

.nav-links{ display:flex; gap:clamp(18px, 3vw, 38px) }
.nav-links a{
  position:relative;
  display:flex; align-items:baseline; gap:8px;
  padding:6px 2px;
  font:500 11.5px/1 var(--sans);
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--muted);
  transition:color .4s;
}
.nav-links a i{
  font:italic 500 12px/1 var(--serif);
  letter-spacing:.02em;
  color:var(--gold);
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav-links a:hover,
.nav-links a.active{ color:var(--text) }
.nav-links a:hover::after,
.nav-links a.active::after{ transform:scaleX(1); transform-origin:left }

/* бургер */
.burger{
  display:none;
  width:46px; height:46px;
  border:1px solid var(--gold-dim);
  border-radius:2px;
  place-content:center; justify-items:center; gap:7px;
  z-index:1200;
  transition:border-color .4s;
}
.burger:hover{ border-color:var(--gold) }
.burger span{
  display:block; width:20px; height:1.5px;
  background:var(--gold);
  transition:transform .45s var(--ease), opacity .3s ease;
}
body.menu-open .burger span:nth-child(1){ transform:translateY(8.5px) rotate(45deg) }
body.menu-open .burger span:nth-child(2){ opacity:0 }
body.menu-open .burger span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg) }

/* мобильное меню */
.mobile-menu{
  position:fixed; inset:0;
  z-index:1100;
  background:
    radial-gradient(80% 60% at 50% 20%, rgba(201,169,110,.05), transparent 70%),
    rgba(24,23,22,.985);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9vh;
  opacity:0; visibility:hidden;
  transition:opacity .55s var(--ease), visibility .55s;
}
body.menu-open .mobile-menu{ opacity:1; visibility:visible }

.mm-nav{ display:flex; flex-direction:column; align-items:center; gap:clamp(18px, 3.5vh, 30px) }
.mm-link{
  display:flex; align-items:baseline; gap:18px;
  font:600 clamp(1.9rem, 7.5vw, 2.8rem)/1.1 var(--serif);
  color:var(--text);
  text-decoration:none;
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), color .4s;
}
.mm-link span{ font:italic 500 .95rem var(--serif); color:var(--gold) }
.mm-link:hover{ color:var(--gold) }
body.menu-open .mm-link{ opacity:1; transform:none }
body.menu-open .mm-link:nth-child(1){ transition-delay:.08s }
body.menu-open .mm-link:nth-child(2){ transition-delay:.16s }
body.menu-open .mm-link:nth-child(3){ transition-delay:.24s }
body.menu-open .mm-link:nth-child(4){ transition-delay:.32s }

.mm-tag{
  font:300 10.5px/1.8 var(--sans);
  letter-spacing:.4em; text-transform:uppercase;
  color:var(--faint);
  opacity:0; transition:opacity .8s ease .4s;
}
body.menu-open .mm-tag{ opacity:1 }

/* ---------- 6. HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--bg-deep);
}
.hero-media{ position:absolute; inset:0 }
.hero-media img{
  position:absolute;
  top:-17%; left:0;
  width:100%; height:134%;
  object-fit:cover;
  object-position:center 30%;
  will-change:transform;
}

/* виньетка + градиент под текст */
.hero-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(20,20,19,.6) 0%,
      rgba(20,20,19,.12) 30%,
      rgba(20,20,19,.18) 58%,
      rgba(20,20,19,.94) 100%),
    radial-gradient(130% 90% at 50% 30%, transparent 42%, rgba(20,20,19,.6) 100%);
}

/* театральные софиты */
.spotlights{
  position:absolute; inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(42% 60% at 22% -8%, rgba(201,169,110,.17), transparent 65%),
    radial-gradient(36% 52% at 72% -6%, rgba(245,241,232,.08), transparent 65%),
    radial-gradient(60% 80% at 50% 112%, rgba(139,38,53,.12), transparent 62%);
}
.spotlights::before{
  content:"";
  position:absolute; inset:0;
  background:
    conic-gradient(from 168deg at 22% -10%, transparent 0deg, rgba(201,169,110,.07) 7deg, transparent 15deg),
    conic-gradient(from 193deg at 72% -10%, transparent 0deg, rgba(245,241,232,.05) 7deg, transparent 15deg);
}

.hero-content{
  position:relative; z-index:3;
  width:100%; max-width:1180px;
  margin-inline:auto;
  padding:0 clamp(20px, 5vw, 56px) clamp(110px, 15vh, 160px);
}

.hero-overline{
  font:500 11px/1 var(--sans);
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:clamp(16px, 2.5vh, 26px);
}
.hero-name{
  font:500 clamp(2.9rem, 9.5vw, 7.2rem)/.98 var(--serif);
  letter-spacing:.01em;
  text-shadow:0 6px 50px rgba(0,0,0,.55);
}
.hero-name em{
  display:block;
  font-style:italic; font-weight:400;
  color:var(--gold);
}
.hero-tagline{
  margin-top:clamp(18px, 3vh, 30px);
  font:300 clamp(.85rem, 2vw, 1.15rem)/1.5 var(--sans);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
}
.hero-rule{
  display:block;
  width:96px; height:1px;
  margin-top:clamp(22px, 3.5vh, 34px);
  background:linear-gradient(90deg, var(--gold), transparent);
}

/* появление hero-текста после прелоадера */
.fx{ opacity:0 }
html.is-loaded .fx{ animation:heroIn 1.5s var(--ease) forwards }
html.is-loaded .hero-overline.fx{ animation-delay:.3s }
html.is-loaded .hero-name.fx{ animation-delay:.5s }
html.is-loaded .hero-tagline.fx{ animation-delay:.8s }
html.is-loaded .hero-rule.fx{ animation-delay:1s }
html.is-loaded .scroll-hint.fx{ animation-delay:1.5s }
@keyframes heroIn{
  from{ opacity:0; transform:translateY(42px); filter:blur(10px) }
  to{ opacity:1; transform:none; filter:blur(0) }
}

/* индикатор прокрутки */
.scroll-hint{
  position:absolute;
  left:50%; bottom:26px;
  transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-decoration:none;
}
.scroll-hint-text{
  font:300 9.5px/1 var(--sans);
  letter-spacing:.4em; text-transform:uppercase;
  color:var(--faint);
}
.scroll-hint-line{
  position:relative;
  width:1px; height:64px;
  background:linear-gradient(to bottom, transparent, var(--gold-dim) 30%, var(--gold));
  overflow:visible;
}
.scroll-hint-line::after{
  content:"";
  position:absolute; left:-1.5px; top:0;
  width:4px; height:4px; border-radius:50%;
  background:var(--gold);
  animation:hintDrop 2.8s var(--ease) infinite;
}
@keyframes hintDrop{
  0%{ transform:translateY(0); opacity:0 }
  18%{ opacity:1 }
  82%{ opacity:1 }
  100%{ transform:translateY(62px); opacity:0 }
}

/* ---------- 7. Секции: общее ---------- */
.section{
  position:relative;
  padding:clamp(90px, 11vw, 150px) 0;
}

/* бетонные панели: едва заметная сетка опалубки */
.section-alt{
  background:
    linear-gradient(180deg, var(--bg) 0%, #201f1e 10%, #201f1e 90%, var(--bg) 100%);
  border-top:1px solid rgba(201,169,110,.1);
  border-bottom:1px solid rgba(201,169,110,.1);
}
.section-alt::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.55;
  background-image:
    repeating-linear-gradient(0deg,  rgba(245,241,232,.04) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(245,241,232,.025) 0 1px, transparent 1px 150px);
}

.section-head{
  position:relative;
  display:flex; align-items:flex-end; gap:clamp(16px, 3vw, 28px);
  margin-bottom:clamp(44px, 6vw, 76px);
}
.ghost-num{
  font:italic 600 clamp(4.2rem, 9vw, 7.5rem)/.78 var(--serif);
  color:transparent;
  -webkit-text-stroke:1px rgba(201,169,110,.4);
  user-select:none;
}
.section-kicker{
  display:block;
  font:500 10.5px/1 var(--sans);
  letter-spacing:.44em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}
.section-title h2{
  font:600 clamp(2.1rem, 4.5vw, 3.3rem)/1.05 var(--serif);
  letter-spacing:.01em;
}
.head-rule{
  flex:1;
  height:1px;
  margin-bottom:14px;
  background:linear-gradient(90deg, var(--gold-dim), transparent);
}
.section-eng{
  font:italic 400 clamp(.95rem, 1.6vw, 1.25rem)/1 var(--serif);
  color:var(--faint);
  white-space:nowrap;
  margin-bottom:10px;
}

/* ---------- 8. О ней ---------- */
.about-grid{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(40px, 6vw, 84px);
  align-items:start;
}

.about-photo{ position:relative; margin:0 }
.about-photo::after{ /* латунная рамка со сдвигом */
  content:"";
  position:absolute;
  inset:20px -20px -20px 20px;
  border:1px solid rgba(201,169,110,.32);
  z-index:-1;
}
.about-photo img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  filter:saturate(.94) contrast(1.03);
  transition:filter .8s ease;
}
.about-photo:hover img{ filter:saturate(1.05) contrast(1.05) brightness(1.04) }
.about-photo::before{ /* внутренняя рамка при наведении */
  content:"";
  position:absolute; inset:0;
  border:1px solid transparent;
  z-index:2;
  pointer-events:none;
  transition:inset .6s var(--ease), border-color .6s ease;
}
.about-photo:hover::before{ inset:14px; border-color:rgba(201,169,110,.6) }
.about-photo figcaption{
  margin-top:16px;
  font:italic 400 .95rem/1.4 var(--serif);
  color:var(--faint);
}

.about-text .lead{
  font:500 clamp(1.2rem, 2vw, 1.45rem)/1.55 var(--serif);
  color:var(--text);
  margin-bottom:26px;
}
/* бордовая буквица — как в журнальной вёрстке */
.about-text .lead::first-letter{
  font:600 3.1em/.82 var(--serif);
  color:var(--wine);
  float:left;
  padding:6px 14px 0 0;
}
.about-text p:not(.lead){
  font:300 15px/1.9 var(--sans);
  color:var(--muted);
  margin-bottom:18px;
  max-width:60ch;
}

.about-facts{
  list-style:none;
  margin-top:clamp(30px, 4vw, 46px);
}
.about-facts li{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:15px 2px;
  border-top:1px solid rgba(201,169,110,.22);
}
.about-facts li:last-child{ border-bottom:1px solid rgba(201,169,110,.22) }
.about-facts b{
  font:italic 500 1.05rem/1 var(--serif);
  color:var(--gold);
  white-space:nowrap;
}
.about-facts span{
  font:300 13px/1.5 var(--sans);
  color:var(--faint);
  text-align:right;
}

/* ---------- 9. Галерея ---------- */
.gallery-note{
  max-width:560px;
  margin-bottom:clamp(36px, 5vw, 56px);
  font:300 14px/1.9 var(--sans);
  color:var(--faint);
}

.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

.tile{
  position:relative;
  overflow:hidden;
  aspect-ratio:3/4;
  background:#232220;
  border:1px solid rgba(201,169,110,.1);
  cursor:zoom-in;
}
.tile:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
.tile img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease), filter 1s ease;
}
.tile:hover img,
.tile:focus-visible img{
  transform:scale(1.07);
  filter:brightness(.72) saturate(1.05);
}

.tile-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:18px;
  opacity:0;
  background:linear-gradient(to top, rgba(18,17,16,.88) 0%, rgba(18,17,16,.05) 46%);
  transition:opacity .6s ease;
}
.tile:hover .tile-overlay,
.tile:focus-visible .tile-overlay{ opacity:1 }

.tile-num{
  align-self:flex-end;
  font:italic 500 .95rem/1 var(--serif);
  color:var(--gold);
  transform:translateY(-8px);
  transition:transform .6s var(--ease);
}
.tile-cap{
  font:italic 500 1.05rem/1.4 var(--serif);
  color:var(--text);
  transform:translateY(12px);
  transition:transform .6s var(--ease);
}
.tile:hover .tile-num,
.tile:focus-visible .tile-num{ transform:none }
.tile:hover .tile-cap,
.tile:focus-visible .tile-cap{ transform:none }

/* ---------- 10. Манифест ---------- */
.manifest{
  position:relative;
  overflow:hidden;
  padding:clamp(130px, 20vh, 220px) 0;
  background:#151413;
  border-top:1px solid rgba(201,169,110,.1);
  border-bottom:1px solid rgba(201,169,110,.1);
}
.manifest-bg{ position:absolute; inset:-40px }
.manifest-bg img{
  width:100%; height:100%;
  object-fit:cover;
  filter:blur(14px) brightness(.48) saturate(.7);
  animation:drift 30s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:scale(1.16) translateY(0) }
  to{ transform:scale(1.26) translateY(-2.5%) }
}
.manifest-shade{
  position:absolute; inset:0;
  background:
    radial-gradient(95% 75% at 50% 50%, transparent 28%, rgba(21,20,19,.82) 100%),
    linear-gradient(rgba(21,20,19,.3), rgba(21,20,19,.3));
}

.manifest-inner{ position:relative; z-index:2; text-align:center }

/* Шапка «03 · Манифест» — та же анатомия, что у других актов, но по центру кадра */
.manifest .section-head{
  justify-content:center;
  text-align:center;
  margin-bottom:clamp(44px, 7vh, 68px);
}
.manifest .section-title h2{ text-shadow:0 4px 40px rgba(0,0,0,.5) }
.manifest .head-rule{
  flex:0 0 clamp(40px, 8vw, 110px);
  background:linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

.manifest blockquote{ position:relative; max-width:880px; margin-inline:auto; padding-top:34px }

.quote-mark{
  position:absolute; top:-26px; left:50%;
  transform:translateX(-50%);
  font:700 clamp(5rem, 12vw, 8rem)/1 var(--serif);
  color:rgba(139,38,53,.55);
  user-select:none;
}
.manifest blockquote p{
  font:500 clamp(1.9rem, 5.2vw, 3.8rem)/1.18 var(--serif);
  letter-spacing:.01em;
  text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.manifest blockquote em{
  font-style:italic;
  color:var(--gold);
}
.manifest cite{
  display:block;
  margin-top:clamp(24px, 4vh, 38px);
  font:300 11.5px/1.8 var(--sans);
  font-style:normal;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ---------- 11. Контакты ---------- */
.contacts-inner{ text-align:center }
.contacts-inner .section-head{ text-align:left }

.contacts-title{
  font:500 clamp(2rem, 4.6vw, 3.4rem)/1.15 var(--serif);
  margin-bottom:22px;
}
.contacts-title em{ font-style:italic; color:var(--gold) }
.contacts-text{
  max-width:560px;
  margin:0 auto;
  font:300 15px/1.9 var(--sans);
  color:var(--muted);
}

.btn{
  display:inline-block;
  margin-top:clamp(30px, 4vw, 42px);
  padding:17px 46px;
  border:1px solid var(--gold);
  border-radius:2px;
  font:500 11.5px/1 var(--sans);
  letter-spacing:.34em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--gold);
  position:relative;
  transition:color .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease);
}
.btn:hover{
  background:var(--gold);
  color:#171614;
  box-shadow:0 14px 46px -14px rgba(201,169,110,.5);
}

/* автограф */
.signature{
  margin:clamp(54px, 8vw, 84px) auto 0;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.signature-svg{
  width:min(320px, 72vw);
  color:var(--gold);
  overflow:visible;
}
.signature-svg path{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 3s ease .5s;
}
.signature-svg .sig-line2{ transition-duration:2s; transition-delay:2.6s }
.signature.is-visible .signature-svg path{ stroke-dashoffset:0 }
.signature-name{
  font:italic 600 clamp(1.5rem, 3.4vw, 2.1rem)/1.2 var(--serif);
  color:var(--text);
  opacity:.9;
}

/* ---------- 12. Футер ---------- */
.footer{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:24px clamp(20px, 5vw, 56px);
  background:#161514;
  border-top:1px solid rgba(201,169,110,.18);
  font:300 12px/1.5 var(--sans);
  letter-spacing:.14em;
  color:var(--faint);
}
.footer-note{
  font-style:italic; font-family:var(--serif); letter-spacing:.06em; color:var(--gold-dim);
  display:inline-flex; align-items:center; gap:7px;
}
.footer-heart{
  width:13px; height:13px; flex:none;
  color:var(--wine);
  filter:drop-shadow(0 0 6px rgba(139,38,53,.55));
  animation:heart-beat 2.6s ease-in-out infinite;
}
@keyframes heart-beat{
  0%,100%{ transform:scale(1) }
  8%     { transform:scale(1.3) }
  16%    { transform:scale(1) }
  24%    { transform:scale(1.18) }
  32%    { transform:scale(1) }
}
@media (prefers-reduced-motion: reduce){
  .footer-heart{ animation:none }
}
.to-top{
  text-decoration:none;
  color:var(--muted);
  letter-spacing:.24em;
  text-transform:uppercase;
  font-size:11px;
  transition:color .4s;
  padding:8px 2px;
}
.to-top:hover{ color:var(--gold) }

/* ---------- 13. Лайтбокс ---------- */
.lightbox{
  position:fixed; inset:0;
  z-index:3000;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 4vw, 64px);
  background:rgba(15,14,13,.93);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  opacity:0;
  transition:opacity .45s ease;
}
.lightbox.is-open{ opacity:1 }
.lightbox[hidden]{ display:none }

.lb-figure{
  margin:0;
  max-width:min(1040px, 94vw);
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.lb-figure img{
  max-width:100%;
  max-height:76vh;
  object-fit:contain;
  border:1px solid rgba(201,169,110,.28);
  box-shadow:0 34px 90px -22px rgba(0,0,0,.85);
  opacity:0;
  transform:scale(.965);
  transition:opacity .55s ease, transform .55s var(--ease);
}
.lb-figure img.is-shown{ opacity:1; transform:none }

.lb-caption{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center;
}
.lb-cap{
  font:italic 500 1.05rem/1.4 var(--serif);
  color:var(--text);
}
.lb-count{
  font:300 10.5px/1 var(--sans);
  letter-spacing:.34em;
  color:var(--faint);
}

.lb-btn{
  position:absolute;
  width:52px; height:52px;
  display:grid; place-items:center;
  border:1px solid var(--gold-dim);
  border-radius:50%;
  color:var(--gold);
  background:rgba(24,23,22,.55);
  transition:background-color .4s ease, color .4s ease, border-color .4s ease, transform .4s var(--ease);
}
.lb-btn svg{ width:22px; height:22px }
.lb-btn:hover{ background:var(--gold); color:#171614; border-color:var(--gold) }
.lb-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

.lb-close{ top:22px; right:22px }
.lb-prev{ left:22px; top:50%; transform:translateY(-50%) }
.lb-next{ right:22px; top:50%; transform:translateY(-50%) }
.lb-prev:hover{ transform:translateY(-50%) translateX(-3px) }
.lb-next:hover{ transform:translateY(-50%) translateX(3px) }

/* ---------- 14. Адаптив ---------- */
@media (max-width:1180px){
  .grid{ grid-template-columns:repeat(3, 1fr) }
}

@media (max-width:1024px){
  .about-grid{ gap:clamp(32px, 5vw, 56px) }
}

@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr }
  .about-photo{
    max-width:440px;
    margin-inline:auto;
  }
  .about-text .lead{ max-width:none }
}

@media (max-width:860px){
  .nav-links{ display:none }
  .burger{ display:grid }
  .grid{ grid-template-columns:repeat(2, 1fr); gap:12px }
  .lb-prev{ left:14px }
  .lb-next{ right:14px }
}

@media (max-width:640px){
  .section{ padding:clamp(72px, 12vw, 100px) 0 }
  .section-eng{ display:none }
  .ghost-num{ font-size:clamp(3.4rem, 14vw, 4.6rem) }
  .head-rule{ min-width:40px }
  .hero-content{ padding-bottom:130px }
  .hero-tagline{ letter-spacing:.22em }
  .about-facts li{ flex-direction:column; gap:4px }
  .about-facts span{ text-align:left }
  .lb-figure{ max-height:78vh }
  .lb-figure img{ max-height:62vh }
  .lb-btn{ width:46px; height:46px }
  .lb-close{ top:14px; right:14px }
  .lb-prev{ top:auto; bottom:18px; transform:none }
  .lb-next{ top:auto; bottom:18px; transform:none }
  .lb-prev:hover{ transform:translateX(-3px) }
  .lb-next:hover{ transform:translateX(3px) }
  .footer{
    flex-direction:column;
    text-align:center;
    gap:8px;
    padding-block:22px;
  }
}

@media (max-width:400px){
  .grid{ gap:8px }
  .tile-overlay{ padding:12px }
  .tile-cap{ font-size:.9rem }
}

/* ---------- 15. Уважение к reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .fx{ opacity:1 !important; animation:none !important }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important }
  .manifest-bg img{ animation:none !important }
  .scroll-hint-line::after{ animation:none !important }
  .preloader{ animation:none; transition-duration:.3s }
  .signature-svg path{ transition:none; stroke-dashoffset:0 }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important }
}