/* Хаб «Архимодный клуб» v3 - «Дом держится на точных стыках».
   Дизайн-система клуба (main.css) не меняется - здесь только сцена узла,
   первый экран и форма. Токены сцены узла: */
:root {
  --node-line: #7a746a;
  --node-line-hi: #c9c2b6;
  --node-hatch: #5c564c;
  --node-warm: #ffd9a0;
  /* обсидиан вместо чистого чёрного + альфа-ступени (урок nabilissa:
     вся нюансировка строится на заранее заведённых ступенях 20/6/1) */
  --ink3: #0d0c0a;
  --ivory-20: rgba(242, 240, 237, 0.2);
  --ivory-06: rgba(242, 240, 237, 0.06);
  --ivory-01: rgba(242, 240, 237, 0.01);
  --brass-20: rgba(158, 124, 52, 0.2);
  --brass-06: rgba(158, 124, 52, 0.06);
}
body.hub3 { background: var(--ink3); }

/* латунный шайн: блик проходит один раз при входе (JS вешает .is-lit) */
.shine {
  font-style: normal;
  --shine-base: #946854;
  background-image: linear-gradient(90deg,
    var(--shine-base) 0,
    var(--shine-base) 35%,
    #eec0ad 50%,
    var(--shine-base) 65%,
    var(--shine-base) 100%);
  background-size: 200% 100%;
  background-position: -30% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.shine.is-lit { animation: shine 1.5s var(--ease) 1 forwards; }
@keyframes shine { to { background-position: 130% 0; } }

/* ── 1. первый экран: чертёж дома, температурная глубина ──── */
.hero3 {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(6rem, 14vh, 9rem) 0 clamp(3rem, 8vh, 6rem);
  overflow: clip;
  background: var(--ink3);
}
/* фотослой: настоящий паркет Derevo, задавлен до обсидиана - читается
   только фактура (приём nabilissa: фон дышит фактурой фото, не CSS) */
.hero3__photo {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background: url('/static/img/okna/wood-dub.webp') center / cover no-repeat;
  filter: brightness(0.11) saturate(0.7);
}
.hero3__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgb(13 12 10 / 0.55) 0%, rgb(13 12 10 / 0.25) 45%, rgb(13 12 10 / 0.92) 100%);
}
/* статичная температурная подложка: тёплое пятно за домом,
   холодное серо-зелёное над заголовком, лёгкая температурная
   градация по диагонали. Заметно боковым зрением, не в лоб. */
.hero3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 52% at 77% 75%,
      rgb(148 104 84 / 0.13) 0%, rgb(148 104 84 / 0.065) 25%,
      rgb(148 104 84 / 0.022) 48%, transparent 72%),
    radial-gradient(ellipse 34% 46% at 17% 15%,
      rgb(47 61 64 / 0.18) 0%, rgb(36 48 51 / 0.09) 38%, transparent 74%),
    linear-gradient(112deg,
      rgb(255 255 255 / 0.018) 0%, transparent 34%,
      rgb(148 104 84 / 0.025) 69%, transparent 100%);
}
/* виньетка: удерживает взгляд внутри кадра */
.hero3::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse 78% 74% at 50% 47%,
    transparent 35%, rgb(0 0 0 / 0.18) 62%,
    rgb(0 0 0 / 0.52) 86%, rgb(0 0 0 / 0.82) 100%);
}
/* дышащие слои: движение только transform, амплитуда до 1% */
.hero3__atmo {
  position: absolute;
  inset: -18%;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.hero3__atmo--warm {
  opacity: 0.42;
  background: radial-gradient(ellipse 34% 42% at 74% 68%,
    rgb(192 138 112 / 0.12) 0%, rgb(148 104 84 / 0.05) 34%, transparent 72%);
  animation: atmoWarm 24s var(--ease) infinite alternate;
}
.hero3__atmo--cold {
  opacity: 0.32;
  background: radial-gradient(ellipse 28% 40% at 20% 18%,
    rgb(73 91 91 / 0.13) 0%, transparent 72%);
  animation: atmoCold 31s var(--ease) infinite alternate;
}
@keyframes atmoWarm {
  from { transform: translate3d(-0.7%, 0.3%, 0) scale(1); }
  to   { transform: translate3d(0.8%, -0.6%, 0) scale(1.025); }
}
@keyframes atmoCold {
  from { transform: translate3d(0.5%, -0.4%, 0) scale(1.015); }
  to   { transform: translate3d(-0.6%, 0.7%, 0) scale(1); }
}

/* верхняя техническая линейка */
.hero3__ruler {
  position: absolute;
  top: 4.6rem;
  left: var(--gut);
  right: var(--gut);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgb(242 240 237 / 0.16);
  padding-top: 0.55rem;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(139 135 129 / 0.62);
}
.hero3__ruler::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--brass);
}

/* микро-сетка: только в зоне чертежа, растворяется по краям */
.hero3__grid {
  position: absolute;
  inset: 42% 0 0 38%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(rgb(242 240 237 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(242 240 237 / 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 45%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at 60% 45%, #000 0%, transparent 72%);
}

.hero3__draw {
  position: absolute;
  right: clamp(0.5rem, 3vw, 4rem);
  bottom: 0;
  width: min(52vw, 760px);
  pointer-events: none;
}
.hero3__draw svg { width: 100%; height: auto; display: block; }
.hero3__titr {
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  bottom: 0.8rem;
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  color: rgb(139 135 129 / 0.62);
}

/* три уровня линий чертежа + цветовые классы */
.house { shape-rendering: geometricPrecision; }
.house__major { stroke: #f2f0ed; stroke-width: 1.2; stroke-opacity: 0.78; }
.house__frames { stroke: #f2f0ed; stroke-width: 1; stroke-opacity: 0.7; }
.house__secondary { stroke: #8b8781; stroke-width: 0.72; stroke-opacity: 0.58; }
.house__detail { stroke: #8b8781; stroke-width: 0.45; stroke-opacity: 0.42; }
.house__garden { stroke: #8b8781; stroke-width: 0.8; stroke-opacity: 0.45; }
.house__dimension { stroke: #946854; stroke-width: 0.65; stroke-opacity: 0.72; }
.house__hatch { stroke: #c08a70; stroke-width: 0.5; stroke-opacity: 0.18; }
/* несущий силуэт латунью поверх тусклой подложки (двухслойная схема) */
.house__brassline { stroke: url(#brassFade); stroke-width: 1.4; stroke-opacity: 0.5; }
/* бегущий блик: короткий светящийся отрезок обходит контур */
.house__trace {
  stroke: #eec0ad;
  stroke-width: 1.6;
  stroke-opacity: 0.85;
  stroke-dasharray: 90 1210;
  animation: trace 7s linear infinite;
}
@keyframes trace { to { stroke-dashoffset: -1300; } }
/* цветовые слои появляются после контуров (правит JS по скроллу) */
.house__color { opacity: 0; transition: opacity var(--t-reveal) var(--ease); }
.hero3.is-colored .house__color { opacity: 1; }

.hero3__inner { position: relative; z-index: 1; max-width: 40em; min-width: 0; }
.hero3__index {
  font-size: var(--small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.hero3__index i { font-style: normal; color: var(--brass-lift); }
.hero3 h1 {
  margin-top: 0.9rem;
  width: 100%;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-shadow: 0 -1px 0 rgb(242 240 237 / 0.06);
}
.hero3 h1 span { display: block; overflow: hidden; }
.hero3 h1 span > b {
  display: block;
  font-weight: inherit;
  transform: translateY(110%);
}
.hero3__l2 { color: var(--fg-mute); }
/* стартовые состояния хореографии входа (JS поднимает) */
.hero3__index, .hero3 .lede, .hero3__foot, .hero3__ruler, .hero3__titr { opacity: 0; }
.no-js .hero3__index, .no-js .hero3 .lede, .no-js .hero3__foot,
.no-js .hero3__ruler, .no-js .hero3__titr { opacity: 1; }
.no-js .hero3 h1 span > b { transform: none; }
.hero3 .lede { margin-top: 1.8rem; max-width: 24em; }
.hero3__foot { margin-top: clamp(2rem, 5vh, 3.4rem); }
.hero3__cta {
  border-color: rgb(242 240 237 / 0.42);
  border-radius: 1px;
}
.hero3__cta:hover {
  background: transparent;
  border-color: var(--brass-lift);
  color: var(--brass-lift);
}

/* линия скролла: тонкая, прогресс латунью */
.hero3__scrollline {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  z-index: 2;
  width: 1px;
  height: 64px;
  background: rgb(242 240 237 / 0.22);
}
.hero3__scrollline b {
  display: block;
  width: 100%;
  height: 0%;
  background: var(--brass-lift);
}

@media (max-width: 900px) {
  .hero3__draw { position: static; width: 100%; margin-top: 2.5rem; }
  .hero3 { flex-direction: column; align-items: flex-start; padding-top: 7rem; }
  .hero3__inner { max-width: none; width: 100%; }
  .hero3__grid { inset: 52% -20% 0 0; }
  .hero3__scrollline, .hero3__titr { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero3__atmo { animation: none; }
  .house__color { opacity: 1; }
  .house__trace { animation: none; opacity: 0; }
  /* без анимаций страница обязана быть видимой сразу */
  .hero3 h1 span > b { transform: none; }
  .hero3__index, .hero3 .lede, .hero3__foot,
  .hero3__ruler, .hero3__titr { opacity: 1; }
  .hd { stroke-dashoffset: 0 !important; }
  .manifest__text .w { opacity: 1; }
  .shine { animation: shine 0.01ms 1 forwards; }
}

/* ── форма заявки (конвенция клуба, тот же приёмник) ──────── */
.zayavka { margin-top: clamp(2.5rem, 6vh, 4rem); max-width: 42em; display: grid; gap: 1.1rem; }
.zayavka__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.1rem; }
.zayavka label { display: grid; gap: 0.5rem; font-size: var(--small); color: var(--fg-mute); letter-spacing: 0.02em; }
.zayavka input[type="text"], .zayavka input[type="tel"], .zayavka select, .zayavka textarea {
  background: var(--bg-lift);
  border: 1px solid var(--rule);
  color: var(--fg);
  font-family: 'Manrope', sans-serif;
  font-size: 0.9375rem;
  padding: 0.8rem 0.9rem;
  border-radius: 0;
  transition: border-color var(--t-mid) var(--ease);
}
.zayavka input:focus, .zayavka select:focus, .zayavka textarea:focus { outline: none; border-color: var(--brass); }
.zayavka__wide { grid-column: 1 / -1; }
.zayavka__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.zayavka__consent { display: flex; flex-direction: row; align-items: flex-start; gap: 0.6rem; font-size: var(--small); color: var(--fg-mute); }
.zayavka__consent input { margin-top: 0.2rem; }
.zayavka__submit { justify-self: start; margin-top: 0.4rem; }
.zayavka__err { color: #c96a4a; font-size: var(--small); min-height: 1.2em; }
.zayavka__ok { display: none; color: var(--brass-lift); font-size: 0.9375rem; max-width: 34em; }
.zayavka__ok.on { display: block; }
.zayavka.is-sent .zayavka__grid, .zayavka.is-sent .zayavka__wide, .zayavka.is-sent .zayavka__consent, .zayavka.is-sent .zayavka__submit { display: none; }

/* ── манифест: пословное проявление по скроллу ────────────── */
.manifest { border-top: 1px solid var(--ivory-06); }
.manifest__wrap {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.manifest__side {
  display: grid;
  gap: 2.2rem;
  padding-top: 0.9rem;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  line-height: 1.6;
}
.manifest__text {
  font-family: 'Unbounded', sans-serif;
  font-weight: 200;
  font-size: clamp(1.5rem, 2.6vw + 0.6rem, 3.1rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: 22em;
}
.manifest__text .w { opacity: 0.14; transition: opacity 0.25s linear; will-change: opacity; }
@media (max-width: 760px) {
  .manifest__wrap { grid-template-columns: 1fr; }
  .manifest__side { grid-auto-flow: column; padding-top: 0; }
}

/* временные заглушки секций, ещё не собранных этим шагом */
.uzel-stub, .styki-stub, .lyudi-stub, .doverie-stub { min-height: 1px; }

@media (prefers-reduced-motion: reduce) {
  .hero3__draw .hd { stroke-dashoffset: 0 !important; }
}

/* ── Глава II. Люди: портреты из темноты, финал - все вместе ── */
.lyudi { position: relative; }
.lyudi__pin { min-height: 100svh; display: flex; align-items: center; justify-content: center; }
.lyudi__stage {
  position: relative;
  width: min(90vw, 1100px);
  height: min(78svh, 700px);
}
.lyudi__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985) translateY(8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.lyudi__slide.on { opacity: 1; pointer-events: auto; transform: none; }
.lyudi__slide img { transition: filter 0.22s var(--ease); filter: grayscale(1) contrast(1.12) brightness(0.68); }
/* фоновый значок клуба в «Люди» - тихий перелив, смягчает жёсткий край портретов */
.lyudi__brandmark {
  position: absolute;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(16vw, 200px);
  height: min(16vw, 200px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.1;
  background: linear-gradient(100deg, #9c6a3f 38%, #d9a06c 50%, #9c6a3f 62%);
  background-size: 220% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1320 1320'%3E%3Cg stroke='%23000' stroke-width='72' stroke-linecap='butt' fill='none'%3E%3Cline x1='70' y1='1274' x2='558' y2='210'/%3E%3Cline x1='1116' y1='1274' x2='653' y2='210'/%3E%3Cline x1='225' y1='1274' x2='741' y2='121'/%3E%3Cline x1='1252' y1='1274' x2='741' y2='121'/%3E%3Cline x1='437' y1='800' x2='1042' y2='800'/%3E%3C/g%3E%3Cpolygon points='593,55 630,125 593,195 556,125' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1320 1320'%3E%3Cg stroke='%23000' stroke-width='72' stroke-linecap='butt' fill='none'%3E%3Cline x1='70' y1='1274' x2='558' y2='210'/%3E%3Cline x1='1116' y1='1274' x2='653' y2='210'/%3E%3Cline x1='225' y1='1274' x2='741' y2='121'/%3E%3Cline x1='1252' y1='1274' x2='741' y2='121'/%3E%3Cline x1='437' y1='800' x2='1042' y2='800'/%3E%3C/g%3E%3Cpolygon points='593,55 630,125 593,195 556,125' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  animation: lyudiShimmer 6s linear infinite;
}
@keyframes lyudiShimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .lyudi__brandmark { animation: none; } }
@media (max-width: 760px) { .lyudi__brandmark { display: none; } }
/* на слайде «Вместе» под общей фотографией значок не нужен - фото и так почти во всю ширину сцены */
.lyudi__stage:has(.lyudi__slide--all.on) .lyudi__brandmark { opacity: 0; }
.lyudi__slide { z-index: 1; }
.lyudi__slide figcaption { margin-left: clamp(0.5rem, 2vw, 2rem); }

/* 🔴 первый кадр виден до того, как сцена дойдёт до верха и включится
   pin - иначе между героем и главой зритель видит пустой экран */
.lyudi__slide:first-of-type { opacity: 1; transform: none; }
.lyudi__slide .lyudi__bgword {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.lyudi__slide figcaption b { font-size: clamp(1.4rem, 2.2vw + 0.6rem, 2.3rem); }
.lyudi__slide--all figcaption b { font-size: clamp(1.2rem, 1.6vw + 0.6rem, 1.9rem); }
.lyudi__slide.on .lyudi__bgword { opacity: 1; }
.lyudi__slide img {
  width: min(34vw, 360px);
  height: auto;
  /* портрет из темноты: края растворяются в фоне */
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 42%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 82% at 50% 42%, #000 55%, transparent 100%);
  filter: grayscale(1) brightness(0.85) contrast(1.06);
}
.lyudi__slide--all img {
  width: min(80vw, 900px);
  -webkit-mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, #000 62%, transparent 100%);
}
.lyudi__slide figcaption { display: grid; gap: 0.4rem; max-width: 16em; }
.lyudi__slide figcaption b {
  font-family: 'Unbounded', sans-serif;
  font-weight: 300;
  font-size: clamp(1.2rem, 1.6vw + 0.6rem, 1.9rem);
  letter-spacing: -0.01em;
}
.lyudi__slide figcaption span {
  font-size: var(--small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-lift);
}
.lyudi__slide figcaption a { font-size: var(--small); color: var(--fg-mute); justify-self: start; }
.lyudi__slide--all { flex-direction: column; text-align: center; }
.lyudi__count {
  position: absolute;
  right: 0;
  bottom: -1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
}
.lyudi__count i { font-style: normal; color: var(--brass-lift); }
@media (max-width: 760px) {
  .lyudi__slide { flex-direction: column; text-align: center; gap: 1.2rem; }
  .lyudi__slide img { width: min(64vw, 300px); }
  .lyudi__slide figcaption a { justify-self: center; }
}

/* ── Глава III. Ремёсла: гигантские слова-переходы ── */
.remesla { padding: clamp(5rem, 14vh, 11rem) 0; border-top: 1px solid var(--ivory-06); position: relative; }
.remesla__label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.remesla__list { display: grid; }
.remesla__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  padding: clamp(0.6rem, 1.6vh, 1.2rem) 0;
  border-bottom: 1px solid var(--ivory-06);
}
.remesla__item i {
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--brass);
  transition: color var(--t-mid) var(--ease);
}
.remesla__item b {
  font-family: 'Unbounded', sans-serif;
  font-weight: 200;
  font-size: clamp(2.2rem, 6.5vw, 5.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgb(242 240 237 / 0.34);
  transition: color var(--t-slow) var(--ease), -webkit-text-stroke-color var(--t-slow) var(--ease);
}
.remesla__item:hover b { color: var(--fg); -webkit-text-stroke-color: transparent; }
.remesla__item:hover i { color: var(--brass-lift); }
.remesla__peek {
  position: absolute;
  z-index: 3;
  width: min(26vw, 340px);
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transform: rotate(1deg);
  transition: opacity var(--t-mid) var(--ease);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.7);
}
.remesla__peek.on { opacity: 1; }
@media (max-width: 900px) { .remesla__peek { display: none; } }

/* ── Глава IV. Стыки ── */
.styki { padding: clamp(5rem, 14vh, 11rem) 0; border-top: 1px solid var(--ivory-06); }
.styki__grid {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  border-top: 1px solid var(--ivory-06);
  border-left: 1px solid var(--ivory-06);
}
.styk {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-right: 1px solid var(--ivory-06);
  border-bottom: 1px solid var(--ivory-06);
  transition: background-color var(--t-mid) var(--ease);
}
.styk:hover { background: rgb(242 240 237 / 0.02); }
.styk__num {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--brass);
  margin-bottom: 0.9rem;
}
.styk__num i { font-style: normal; color: var(--fg-dim); }
.styk h3 { margin-bottom: 0.6rem; }
.styk p { font-size: 0.9375rem; color: var(--fg-mute); }

/* ── навигация глав внизу (приём образца) ── */
.chapters {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0.9rem var(--gut) 1rem;
  background: linear-gradient(180deg, transparent 0%, rgb(13 12 10 / 0.85) 45%);
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease);
}
/* у подвала полоса глав уходит: иначе она ложилась поверх ссылок подвала */
.chapters.is-off { opacity: 0; }
.chapters.is-off a { pointer-events: none; }
.chapters a {
  pointer-events: auto;
  flex: 1 1 0;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color var(--t-mid) var(--ease);
}
.chapters a.active { color: var(--fg); }
.chapters .bar {
  display: block;
  margin-top: 0.5rem;
  height: 1px;
  background: var(--ivory-06);
  position: relative;
  overflow: hidden;
}
.chapters .bar b {
  position: absolute;
  inset: 0;
  background: var(--brass-lift);
  transform: scaleX(0);
  transform-origin: left center;
}
@media (max-width: 760px) { .chapters { display: none; } }

/* ── фоновые слова-гиганты ── */
.bgword {
  position: absolute;
  z-index: 0;
  font-family: 'Unbounded', sans-serif;
  font-weight: 200;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgb(242 240 237 / 0.05);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.bgword--manifest {
  left: 50%;
  bottom: -0.12em;
  transform: translateX(-50%);
  font-size: clamp(5rem, 14vw, 13rem);
  letter-spacing: 0.02em;
}
.manifest { position: relative; overflow: clip; }
.manifest__wrap { position: relative; z-index: 1; }

/* вертикальные фамилии за портретами */
.lyudi__bgword {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: 'Unbounded', sans-serif;
  font-weight: 200;
  font-size: clamp(4rem, 11vh, 9rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgb(242 240 237 / 0.16);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  transition: -webkit-text-stroke-color 900ms ease;
}
.lyudi__slide.on .lyudi__bgword { -webkit-text-stroke-color: rgb(200 148 118 / 0.22); }
.lyudi__bgword--h {
  writing-mode: horizontal-tb;
  right: auto;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-size: clamp(5rem, 16vw, 15rem);
  -webkit-text-stroke-color: rgb(242 240 237 / 0.05);
}
@media (max-width: 760px) { .lyudi__bgword { display: none; } }

/* ── Главы III-VIII. Мастера: портрет → слово-материал ── */
.master {
  position: relative;
  min-height: 100svh;
  padding: clamp(4rem, 10vh, 7rem) 0 0;
  border-top: 1px solid var(--ivory-06);
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.master__bgword { right: 2%; top: 38%; }
.master__wrap {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.master__portrait img {
  width: 100%;
  max-width: 360px;
  height: auto;
  filter: grayscale(1) brightness(0.85) contrast(1.06);
  -webkit-mask-image: radial-gradient(ellipse 80% 84% at 50% 42%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 84% at 50% 42%, #000 55%, transparent 100%);
}
.master__kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.master__kicker i { font-style: normal; color: var(--brass-lift); }
.master__name {
  margin-top: 0.7rem;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
}
.master__co {
  margin-top: 0.4rem;
  font-size: var(--small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-lift);
}
.master__quote {
  margin-top: 1.2rem;
  color: var(--fg-mute);
  max-width: 26em;
  font-size: 1.0625rem;
}
.master__info .cta { margin-top: 1.6rem; }

/* гигантское слово, залитое настоящей текстурой материала */
.master__word {
  display: block;
  margin-top: clamp(2rem, 6vh, 4rem);
  padding: 0 var(--gut);
  font-family: 'Unbounded', sans-serif;
  font-weight: 300;
  font-size: clamp(3.2rem, 12.5vw, 11rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  background-size: cover;
  background-position: center 60%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: brightness(1.06) saturate(0.9);
  opacity: 0.92;
  transition: filter var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease);
}
.master__word:hover { filter: brightness(1.3) saturate(1); opacity: 1; }
@media (max-width: 760px) {
  .master__wrap { grid-template-columns: 1fr; text-align: center; }
  .master__portrait { margin: 0 auto; }
  .master__info .cta { margin-left: auto; margin-right: auto; }
  .master__word { white-space: normal; text-align: center; }
}

/* ── Кульминация: чертёж → фотография. Дом ожил ── */
.finale { position: relative; border-top: 1px solid var(--ivory-06); }
.finale__pin {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: clamp(4rem, 10vh, 6rem) var(--gut);
}
.finale__frame {
  position: relative;
  width: min(92vw, 1080px);
  border: 1px solid var(--ivory-06);
  overflow: hidden;
}
.finale__photo {
  display: block;
  width: 100%;
  height: auto;
  /* фото скрыто маской, проявляется от тёплого окна по прогрессу (JS двигает --reveal) */
  --reveal: 0%;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 58% 62%, #000 var(--reveal), transparent calc(var(--reveal) + 26%));
  mask-image: radial-gradient(ellipse 60% 70% at 58% 62%, #000 var(--reveal), transparent calc(var(--reveal) + 26%));
}
/* чертёжный слой поверх: тот же дом линиями, растворяется последним */
.finale__draw {
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
  pointer-events: none;
}
.finale__line {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
  font-family: 'Unbounded', sans-serif;
  font-weight: 200;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  color: var(--fg-mute);
  text-align: center;
}
.finale__line span { opacity: 0.25; transition: opacity 0.6s var(--ease); }
.finale__line span.on { opacity: 1; color: var(--fg); }
.finale__names {
  display: flex;
  gap: clamp(1rem, 3vw, 2.6rem);
  flex-wrap: wrap;
  justify-content: center;
  font-size: var(--small);
  letter-spacing: 0.06em;
  color: var(--fg-mute);
}
.finale__names a:hover { color: var(--brass-lift); }
@media (prefers-reduced-motion: reduce) {
  .finale__photo { --reveal: 100%; -webkit-mask-image: none; mask-image: none; }
  .finale__line span { opacity: 1; }
}

/* ── лёгкие чертёжные детали фона героя, параллакс от скролла ── */
.hero3__deco { position: absolute; pointer-events: none; z-index: 0; will-change: transform; }
/* большой знак клуба на первом экране - при скролле уменьшается и тает,
   компактная версия уже стоит в шапке (heroMark лишь эффектное вступление).
   Маска + залитый градиентом фон - тот же надёжный приём, что у lyudi__brandmark
   (инлайновый SVG с анимированным градиентом на горизонтальных линиях не отрисовывался -
   objectBoundingBox-градиент ломается на линии с нулевой высотой bbox). */
.hero3__mark {
  position: absolute;
  left: calc(var(--gut) + 6vw);
  top: 39%;
  transform: translateY(-50%) scale(1);
  transform-origin: left center;
  width: clamp(120px, 14vw, 190px);
  height: clamp(120px, 14vw, 190px);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, #9c6a3f 38%, #d9a06c 50%, #9c6a3f 62%);
  background-size: 220% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1320 1320'%3E%3Cg stroke='%23000' stroke-width='72' stroke-linecap='butt' fill='none'%3E%3Cline x1='70' y1='1274' x2='558' y2='210'/%3E%3Cline x1='1116' y1='1274' x2='653' y2='210'/%3E%3Cline x1='225' y1='1274' x2='741' y2='121'/%3E%3Cline x1='1252' y1='1274' x2='741' y2='121'/%3E%3Cline x1='437' y1='800' x2='1042' y2='800'/%3E%3C/g%3E%3Cpolygon points='593,55 630,125 593,195 556,125' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1320 1320'%3E%3Cg stroke='%23000' stroke-width='72' stroke-linecap='butt' fill='none'%3E%3Cline x1='70' y1='1274' x2='558' y2='210'/%3E%3Cline x1='1116' y1='1274' x2='653' y2='210'/%3E%3Cline x1='225' y1='1274' x2='741' y2='121'/%3E%3Cline x1='1252' y1='1274' x2='741' y2='121'/%3E%3Cline x1='437' y1='800' x2='1042' y2='800'/%3E%3C/g%3E%3Cpolygon points='593,55 630,125 593,195 556,125' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  animation: heroMarkIn 1s var(--ease) 300ms forwards, heroMarkShimmer 5s linear infinite 1.3s;
}
@keyframes heroMarkIn { to { opacity: 0.4; } }
@keyframes heroMarkShimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .hero3__mark { animation: none; opacity: 0.4; } }
@media (max-width: 760px) {
  .hero3__mark { left: 1.2rem; top: 24%; width: clamp(70px, 22vw, 120px); height: clamp(70px, 22vw, 120px); }
}

.hero3__deco--rail {
  left: calc(var(--gut) * 0.45);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 2.1rem;
  padding-left: 0.8rem;
  border-left: 1px solid var(--ivory-06);
}
.hero3__deco--rail i {
  position: relative;
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: rgb(139 135 129 / 0.5);
  transition: color 0.4s var(--ease);
}
.hero3__deco--rail i::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 50%;
  width: 5px;
  height: 1px;
  background: rgb(242 240 237 / 0.22);
}
.hero3__deco--rail i.lit { color: var(--brass-lift); }
.hero3__deco--rail i.lit::before { background: var(--brass-lift); }
.hero3__deco--node {
  right: clamp(1rem, 6vw, 6rem);
  top: 12%;
  width: min(15vw, 200px);
  opacity: 0.8;
}
.hero3__deco--node svg { width: 100%; height: auto; display: block; }
.hero3__deco-mark {
  position: absolute;
  width: 9px; height: 9px;
  background: var(--fg);
  opacity: 0.16;
  -webkit-mask: radial-gradient(circle 4px at 50% 50%, transparent 99%, #000 100%);
  mask: radial-gradient(circle 4px at 50% 50%, transparent 99%, #000 100%);
}
.hero3__deco-mark:nth-child(2) { right: -14%; top: 30%; }
.hero3__deco-mark:nth-child(3) { left: -10%; bottom: -20%; }
.hero3__deco--repers { inset: 0; }
.hero3__deco--repers b {
  position: absolute;
  font-weight: 300;
  font-size: 0.8rem;
  color: rgb(242 240 237 / 0.14);
}
@media (max-width: 900px) { .hero3__deco { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero3__deco { transform: none !important; } }

/* ── сквозная медная ось: швы между главами ── */
.seam {
  position: relative;
  height: clamp(90px, 16vh, 160px);
  display: flex;
  justify-content: center;
}
.seam::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--ivory-06);
}
.seam b {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, #c08a70, #946854);
  transform: scaleY(0);
  transform-origin: top center;
}
.seam b::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #c08a70;
  transform: translate(-50%, 50%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.seam.done b::after { opacity: 0.8; }
.seam span {
  position: absolute;
  top: 50%;
  left: calc(50% + clamp(2rem, 8vw, 8rem));
  transform: translateY(-50%) translateX(-10px);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  opacity: 0;
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  white-space: nowrap;
}
.seam.done span { opacity: 0.85; transform: translateY(-50%) translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .seam b { transform: none; }
  .seam b::after, .seam span { opacity: 0.7; }
}

/* ── кульминация: попутная жизнь кадра ── */
.finale__frame { border: none; }
.finale__photo {
  transform: scale(1.06);
  filter: saturate(0.35) brightness(0.9);
  transition: none;
}
.finale__over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.finale__perimeter {
  stroke-dasharray: 4112;
  stroke-dashoffset: 4112;
}
.finale__corners path {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}
.finale__winglow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 9% 16% at 27.5% 62%, rgb(238 192 173 / 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 9% 16% at 50% 62%, rgb(238 192 173 / 0.42) 0%, transparent 70%),
    radial-gradient(ellipse 9% 16% at 72% 60%, rgb(238 192 173 / 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 6% 9% at 50% 30%, rgb(238 192 173 / 0.35) 0%, transparent 70%);
  mix-blend-mode: screen;
}
.finale__label {
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  color: rgb(238 203 176 / 0.6);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.finale__label.on { opacity: 1; }
.finale__names a { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s var(--ease); }
.finale__names a.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .finale__photo { transform: none; filter: none; }
  .finale__perimeter, .finale__corners path { stroke-dashoffset: 0; }
  .finale__names a { opacity: 1; transform: none; }
  .finale__winglow { opacity: 1; }
  .finale__label { opacity: 1; }
}

/* ── искры: медные пылинки, всплывают и гаснут; кресты мягко вспыхивают ── */
.hero3__sparks { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero3__sparks i {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #eec0ad;
  opacity: 0;
  animation: sparkFloat 12s linear infinite;
}
.hero3__sparks i:nth-child(2n) { width: 1.5px; height: 1.5px; animation-duration: 15s; }
.hero3__sparks i:nth-child(3n) { animation-duration: 10s; }
@keyframes sparkFloat {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 0.34; }
  55%  { opacity: 0.12; }
  100% { transform: translateY(-64px); opacity: 0; }
}
.hero3__deco--repers b { animation: reperTwinkle 11s var(--ease) infinite; }
.hero3__deco--repers b:nth-child(2) { animation-delay: 3.4s; }
.hero3__deco--repers b:nth-child(3) { animation-delay: 6.1s; }
.hero3__deco--repers b:nth-child(4) { animation-delay: 8.7s; }
@keyframes reperTwinkle {
  0%, 88%, 100% { color: rgb(242 240 237 / 0.14); }
  92% { color: rgb(238 192 173 / 0.55); }
  96% { color: rgb(242 240 237 / 0.14); }
}
@media (prefers-reduced-motion: reduce) {
  .hero3__sparks i, .hero3__deco--repers b { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ПРИОРИТЕТ 1 - мягкий световой край портретов и группового кадра
   (спарринг GPT-5.6: не blur на фото, а широкая feather-зона маски
   + отдельный медный bloom-ореол за изображением, mix-blend только
   на ореоле, не на самом фото) ═══════════════════════════════════ */
/* 🔴 .lyudi__slide НЕ трогать position - он абсолютный (inset:0) внутри
   .lyudi__stage; relative здесь вываливал все семь слайдов в поток и они
   наезжали на главы мастеров */
.lyudi__slide, .lyudi__slide--all {
  isolation: isolate;
  overflow: visible;
}
.master__portrait {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
/* 🔴 медный ореол (::before у .master__portrait/.lyudi__slide) убран целиком -
   на нём был виден чёткий край (арка/прямоугольник), а не мягкое свечение.
   Портрет уходит в фон только маской на самой фотографии - как в референсе. */
.lyudi__slide img, .master__portrait img {
  -webkit-mask-image: radial-gradient(ellipse 76% 84% at 50% 42%,
    #000 0%, #000 18%, rgb(0 0 0 / 0.88) 34%, rgb(0 0 0 / 0.56) 52%,
    rgb(0 0 0 / 0.24) 70%, rgb(0 0 0 / 0.04) 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 84% at 50% 42%,
    #000 0%, #000 18%, rgb(0 0 0 / 0.88) 34%, rgb(0 0 0 / 0.56) 52%,
    rgb(0 0 0 / 0.24) 70%, rgb(0 0 0 / 0.04) 88%, transparent 100%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: grayscale(1) contrast(1.05) saturate(0.9) brightness(0.85);
}
.lyudi__slide--all img {
  -webkit-mask-image: radial-gradient(ellipse 66% 60% at 50% 46%,
    #000 0%, #000 36%, rgb(0 0 0 / 0.95) 54%, rgb(0 0 0 / 0.68) 70%,
    rgb(0 0 0 / 0.28) 86%, transparent 100%);
  mask-image: radial-gradient(ellipse 66% 60% at 50% 46%,
    #000 0%, #000 36%, rgb(0 0 0 / 0.95) 54%, rgb(0 0 0 / 0.68) 70%,
    rgb(0 0 0 / 0.28) 86%, transparent 100%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: grayscale(1) contrast(1.04) saturate(0.9);
}
.lyudi__slide::after, .master__portrait::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 4% 9%;
  background: radial-gradient(ellipse at 50% 43%, rgb(238 192 173 / 0.08), transparent 60%);
  filter: blur(20px);
  opacity: 0.6;
  mix-blend-mode: screen;
}

/* ═══════════════════════════════════════════════════════════════
   ПРИОРИТЕТ 2 - тональная плотность: общее зерно на всю страницу,
   лёгкая разница фона между соседними секциями (2-5% по светлоте)
   ═══════════════════════════════════════════════════════════════ */
.site-noise {
  position: fixed;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: soft-light;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)" opacity=".4"/></svg>');
}
.manifest, .remesla, .styki, .master:nth-of-type(even), .finale {
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgb(148 104 84 / 0.04), transparent 55%),
    var(--ink3);
}

/* ═══════════════════════════════════════════════════════════════
   ПРИОРИТЕТ 3 - реакция на скорость скролла (--scroll-velocity,
   один общий параметр вместо десятка независимых анимаций)
   ═══════════════════════════════════════════════════════════════ */
.hero3__deco--rail i {
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}
.hero3__deco--rail i.lit {
  transform: translateX(calc(4px + var(--scroll-velocity, 0) * 3px));
}
.seam b::after {
  transform: translate(-50%, 50%) scale(calc(1 + min(var(--scroll-velocity, 0), 0.8) * 0.22));
  box-shadow: 0 0 calc(8px + var(--scroll-velocity, 0) * 12px) rgb(192 138 112 / 0.32);
  transition: transform 160ms ease-out, box-shadow 220ms ease-out, opacity 0.4s var(--ease);
}

/* ── уголки-реперы: тот же язык, что в кульминации, на пустые зоны ── */
.corner-frame {
  position: absolute;
  inset: clamp(1.5rem, 4vh, 3rem) var(--gut);
  z-index: 0;
  pointer-events: none;
}
.corner-frame i {
  position: absolute;
  width: 22px; height: 22px;
  border: 1.5px solid rgb(192 138 112 / 0.32);
}
.corner-frame i:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; }
.corner-frame i:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; }
.corner-frame i:nth-child(3) { bottom: 0; right: 0; border-left: none; border-top: none; }
.corner-frame i:nth-child(4) { bottom: 0; left: 0; border-right: none; border-top: none; }
.manifest { position: relative; }
.manifest .corner-frame, .styki .corner-frame { inset: clamp(1.5rem, 4vh, 3rem) clamp(1rem, 3vw, 2.5rem); }

/* ── глава «Вместе»: кино-воспоминание без имён (имена - только в
   личных главах мастеров, иначе участники читаются дважды) ── */
.lyudi__kicker {
  position: absolute;
  top: -3.2rem;
  left: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.lyudi.is-live .lyudi__kicker { opacity: 0.7; }
/* портреты монтажа без подписи - крупнее и по центру кадра */
.lyudi__slide:not(.lyudi__slide--all) img { width: min(38vw, 420px); }
.lyudi__slide--all figcaption { text-align: center; max-width: 34em; }
.lyudi__slide--all figcaption b {
  font-family: 'Unbounded', sans-serif;
  font-weight: 200;
  font-size: clamp(1.3rem, 2vw + 0.6rem, 2.1rem);
}
/* фоновые фамилии - только в личных главах; в монтаже лица без имён */
.lyudi__slide:not(.lyudi__slide--all) .lyudi__bgword { display: none; }

/* ── мобильная: убрать горизонтальное переполнение (гейт 390px) ── */
@media (max-width: 760px) {
  .master { overflow: hidden; }
  .master__word { font-size: clamp(2.2rem, 11vw, 4rem); padding: 0 1rem; }
  .bgword--manifest { font-size: clamp(3rem, 13vw, 6rem); }
  .hero3__draw svg { max-width: 100%; }
}
/* 🔴 overflow-x на body не спасает - documentElement всё равно считает
   ширину по абсолютным слоям; отсекать надо на корне */
html:has(body.hub3) { overflow-x: clip; }
body.hub3 { overflow-x: clip; }
.master, .manifest, .lyudi, .finale, .styki { overflow-x: clip; }

/* ── «Как это работает»: продукт клуба - передача заказа ── */
.kak { padding: clamp(4rem, 11vh, 8rem) 0; border-top: 1px solid var(--ivory-06); position: relative; overflow-x: clip; }
.kak__kicker { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: clamp(2rem, 5vh, 3rem); }
.kak__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(1.6rem, 4vw, 3.4rem); }
.kak__step i { font-style: normal; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--brass-lift); }
.kak__step b {
  display: block;
  margin: 0.7rem 0 0.6rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 200;
  font-size: clamp(1.1rem, 1.4vw + 0.5rem, 1.5rem);
  line-height: 1.2;
}
.kak__step p { font-size: 0.9375rem; color: var(--fg-mute); }
.kak__note { margin-top: clamp(2rem, 5vh, 3rem); font-size: 0.9375rem; color: var(--fg-mute); }
.kak__note a { color: var(--brass-lift); }

/* пометки происхождения изображений (канон честности) */
.master__texnote {
  padding: 0.6rem var(--gut) 0;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: rgb(139 135 129 / 0.5);
}
.finale__disclaimer {
  position: absolute;
  left: 1rem;
  bottom: 0.7rem;
  max-width: 30em;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: rgb(139 135 129 / 0.62);
}
.finale__cta { margin-top: 0.4rem; }
.zayavka__how { margin-top: 1rem; font-size: 0.9375rem; color: var(--fg-mute); max-width: 42em; }

/* ── фоновое слово героя: заметно, но остаётся фоном ── */
.bgword--hero {
  left: var(--gut);
  top: 27%;
  bottom: auto;
  right: auto;
  transform: none;
  display: grid;
  justify-items: start;
  gap: 0.02em;
  text-align: left;
  white-space: normal;
  font-size: clamp(3rem, 11vw, 12rem);
  line-height: 0.86;
  letter-spacing: 0.03em;
  -webkit-text-stroke: 1px rgb(242 240 237 / 0.05);
  z-index: -1;
}
.bgword--hero b { display: block; font-weight: inherit; }
@media (max-width: 760px) { .bgword--hero { font-size: clamp(1.6rem, 9vw, 3.2rem); top: 19%; left: 1rem; } }

/* ── контакт: форма слева, чертёжная колонка направлений справа ── */
.kontakt__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.kontakt__side { position: relative; padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 2.4vw, 2.2rem); overflow: clip; }
.kontakt__side .corner-frame { inset: 0; }
.bgword--kontakt {
  right: -2%;
  bottom: -6%;
  font-size: clamp(4rem, 12vw, 11rem);
  -webkit-text-stroke: 1px rgb(192 138 112 / 0.07);
}
.kontakt__label {
  position: relative;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 1.4rem;
}
.kontakt__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; }
.kontakt__list li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 0.8rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--ivory-06);
  align-items: baseline;
}
.kontakt__list li:last-child { border-bottom: 1px solid var(--ivory-06); }
.kontakt__list i { font-style: normal; font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--brass); }
.kontakt__list a { font-size: 1.0625rem; color: var(--fg); }
.kontakt__list a:hover { color: var(--brass-lift); }
.kontakt__list span { grid-column: 2; font-size: 0.75rem; color: var(--fg-dim); margin-top: 0.2rem; }
.kontakt__geo {
  position: relative;
  margin-top: 1.4rem;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(139 135 129 / 0.55);
}
@media (max-width: 860px) { .kontakt__grid { grid-template-columns: 1fr; } }


/* ── блик по фоновым буквам: полоса света идёт внутри контуров ──
   буквы залиты прозрачным, поэтому градиент, обрезанный по глифу,
   читается как засветка части букв, а не как подложка под ними */
.bgword--hero b,
.bgword--manifest {
  --bgshine: -40;
  background-image: linear-gradient(100deg,
    transparent 38%,
    rgb(242 240 237 / 0.18) 46%,
    rgb(242 240 237 / 0.42) 50%,
    rgb(242 240 237 / 0.18) 54%,
    transparent 62%);
  background-repeat: no-repeat;
  background-size: 320% 100%;
  background-position: calc(var(--bgshine) * 1%) 0;
  -webkit-background-clip: text;
  background-clip: text;
}
@media (prefers-reduced-motion: reduce) {
  .bgword--hero b, .bgword--manifest { background-image: none; }
}


/* ── ключевые слова ремесла ──
   крупно, в одной строке с большим словом этапа, сменяют друг друга по
   мере прокрутки секции: в кадре всегда одно слово, следующее приходит
   снизу и уводит предыдущее вверх */
.master__keys {
  position: absolute;
  right: clamp(1.2rem, 4vw, 4rem);
  bottom: clamp(3.2rem, 11vh, 8rem);
  z-index: 2;
  list-style: none;
  margin: 0; padding: 0;
  width: min(46vw, 620px);
  height: clamp(3rem, 8vw, 6.6rem);
  pointer-events: none;
}
.master__keys li {
  position: absolute;
  right: 0; bottom: 0;
  margin: 0;
  font-family: 'Unbounded', sans-serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 5.2vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ivory);
  opacity: 0;
  transform: translateY(0.9em) scale(0.97);
  filter: blur(6px);
  transition: opacity 460ms var(--ease), transform 720ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)), filter 460ms var(--ease);
}
.master__keys li.is-on { opacity: 0.46; transform: none; filter: none; }
.master__keys li.is-past { opacity: 0; transform: translateY(-0.9em) scale(0.97); filter: blur(6px); }
/* тонкая линия под активным словом - дорисовывается слева направо */
.master__keys li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.22em; height: 1px;
  background: currentColor; opacity: 0.5;
  transform: scaleX(0); transform-origin: left;
  transition: transform 760ms var(--ease) 120ms;
}
.master__keys li.is-on::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .master__keys li { transition: none; }
  .master__keys li:first-child { opacity: 0.42; transform: none; }
}
@media (max-width: 760px) {
  .master__keys { position: static; width: auto; height: auto; padding: 0 var(--gut); margin-top: 1.2rem; text-align: left; }
  .master__keys li { position: static; opacity: 0.42; transform: none; display: inline; font-size: 1rem; margin-right: 0.8rem; }
  .master__keys li.is-past { opacity: 0.42; transform: none; }
}


/* ── МОТИВ-РЕМЕСЛА за портретом участника ──
   ::before уже занят тёплой подсветкой, поэтому графика идёт на ::after.
   У каждого своя: кладка, оконный переплёт, дуги правила, дорожки платы,
   годовые кольца, горизонтали рельефа. 6-8 процентов непрозрачности -
   фон живёт, но с лицом не спорит */
.lyudi__slide::after {
  content: "";
  position: absolute;
  /* сбрасываем размытие и наложение, заданные выше общим правилом:
     размытый слой во весь экран роняет кадры на телефоне */
  filter: none;
  mix-blend-mode: normal;
  left: 50%; top: 45%;
  width: min(58vw, 600px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.93);
  background: no-repeat center / contain;
  opacity: 0;
  transition: opacity 1000ms var(--ease), transform 1400ms var(--ease);
  pointer-events: none;
  z-index: -1;
}
.lyudi__slide.on::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lyudi__slide:first-of-type::after { opacity: 1; }
.lyudi__slide[data-i="0"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg stroke='%23f2f0ed' stroke-opacity='0.13' fill='none' stroke-width='1'%3E%3Cpath d='M0 60h400M0 110h400M0 160h400M0 210h400M0 260h400M0 310h400M0 360h400'/%3E%3Cpath d='M60 60v50M160 60v50M260 60v50M360 60v50M10 110v50M110 110v50M210 110v50M310 110v50M60 160v50M160 160v50M260 160v50M360 160v50M10 210v50M110 210v50M210 210v50M310 210v50M60 260v50M160 260v50M260 260v50M360 260v50M10 310v50M110 310v50M210 310v50M310 310v50'/%3E%3C/g%3E%3C/svg%3E"); }
.lyudi__slide[data-i="1"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg stroke='%23f2f0ed' stroke-opacity='0.14' fill='none' stroke-width='1.2'%3E%3Crect x='70' y='40' width='260' height='320'/%3E%3Cpath d='M200 40v320M70 150h260M70 250h260'/%3E%3Crect x='86' y='56' width='98' height='78'/%3E%3Crect x='216' y='56' width='98' height='78'/%3E%3C/g%3E%3C/svg%3E"); }
.lyudi__slide[data-i="2"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg stroke='%23f2f0ed' stroke-opacity='0.13' fill='none' stroke-width='1'%3E%3Cpath d='M20 340a180 180 0 0 1 360 0M40 340a160 160 0 0 1 320 0M60 340a140 140 0 0 1 280 0M80 340a120 120 0 0 1 240 0M100 340a100 100 0 0 1 200 0M120 340a80 80 0 0 1 160 0'/%3E%3C/g%3E%3C/svg%3E"); }
.lyudi__slide[data-i="3"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg stroke='%23f2f0ed' stroke-opacity='0.14' fill='none' stroke-width='1'%3E%3Cpath d='M40 90h120l30 30h90M40 170h80l40 40h140M40 250h150l30-30h140M60 330h110l40-40h130'/%3E%3C/g%3E%3Cg fill='%23f2f0ed' fill-opacity='0.16'%3E%3Ccircle cx='280' cy='120' r='3'/%3E%3Ccircle cx='300' cy='210' r='3'/%3E%3Ccircle cx='220' cy='220' r='3'/%3E%3Ccircle cx='210' cy='290' r='3'/%3E%3C/g%3E%3C/svg%3E"); }
.lyudi__slide[data-i="4"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg stroke='%23f2f0ed' stroke-opacity='0.13' fill='none' stroke-width='1'%3E%3Cellipse cx='200' cy='200' rx='26' ry='22'/%3E%3Cellipse cx='198' cy='200' rx='52' ry='45'/%3E%3Cellipse cx='202' cy='201' rx='80' ry='68'/%3E%3Cellipse cx='199' cy='199' rx='108' ry='94'/%3E%3Cellipse cx='201' cy='200' rx='138' ry='120'/%3E%3Cellipse cx='200' cy='201' rx='168' ry='146'/%3E%3C/g%3E%3C/svg%3E"); }
.lyudi__slide[data-i="5"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg stroke='%23f2f0ed' stroke-opacity='0.13' fill='none' stroke-width='1'%3E%3Cpath d='M0 150q100 -22 200 0t200 0M0 186q100 -24 200 0t200 0M0 222q100 -26 200 0t200 0M0 258q100 -28 200 0t200 0M0 294q100 -30 200 0t200 0M0 330q100 -32 200 0t200 0M0 366q100 -34 200 0t200 0'/%3E%3C/g%3E%3C/svg%3E"); }
.lyudi__slide--all::after { background-image: none; }
@media (prefers-reduced-motion: reduce) { .lyudi__slide::after { transition: none; } }
@media (max-width: 760px) { .lyudi__slide::after { width: 84vw; } }

/* Смена лиц на телефоне: уходящий портрет держался полупрозрачным ещё 220 мс
   и лежал поверх подписи следующего. Убираем перекрытие. */
@media (max-width: 760px) {
  .lyudi__slide { transition: opacity 0.12s var(--ease), transform 0.12s var(--ease); }
  .lyudi__slide:not(.on) { visibility: hidden; transition: opacity 0.12s var(--ease), visibility 0s 0.12s; }
  .lyudi__slide.on { visibility: visible; transition: opacity 0.12s var(--ease), visibility 0s; }
}

/* ── мобильная доводка: ничего мельче 11px ── */
@media (max-width: 760px) {
  .hero3__ruler-left, .hero3__ruler-right { font-size: 11px; }
  .master__texnote { font-size: 11px; line-height: 1.45; }
  .finale__label { font-size: 11px; letter-spacing: 0.1em; }
  .master__keys { position: static; width: auto; height: auto; margin-top: 1rem; padding: 0 var(--gut); text-align: left; }
  .master__keys li { position: static; opacity: 0.42; transform: none; filter: none; display: inline-block; font-size: 0.95rem; margin: 0 0.7rem 0.3rem 0; }
  .master__keys li::after { display: none; }
  .master__keys li.is-past { opacity: 0.42; }
}
@media (max-width: 760px) {
  .finale__disclaimer, .kontakt__geo { font-size: 11px; line-height: 1.5; }
}

/* ── мобильная доводка: пальцевые цели ──
   замер показал ссылки высотой 17-27px, точки схем 11x11 - в такое трудно
   попасть пальцем. Норма 44px, добираем отступами, чтобы не менять вид */
@media (max-width: 760px) {
  .clubbar a, .foot a, .foot__nav a, .contact a, .kontakt a,
  .chelovek__links a, .club-home, .sem__link a, .lead a {
    display: inline-block;
    padding-block: 0.55rem;
    min-height: 44px;
  }
  .club-tag {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .club-tag__mark { width: 1.05em; height: 1.05em; }
  /* поля у края: текст не должен касаться границы экрана */
  h1, h2, h3, p, li { padding-inline: 0; }
  section > h2, section > p, .poryadok__title, .poryadok__cap { padding-inline: 0.2rem; }
}

@media (max-width: 760px) {
  .master__texnote { padding-inline: var(--gut); }
}
@media (max-width: 760px) {
  /* меню и строка фамилий: высота под палец */
  .top nav a, .kontakt__list a, .ul { display: inline-block; padding-block: 0.5rem; min-height: 44px; }
}

/* ── мобильные провалы ──
   секции держали min-height:100svh и распирали содержимое по краям
   (justify-content: space-between). На телефоне контента мало, и между
   верхом и низом зияла пустота в пол-экрана */
@media (max-width: 760px) {
  .master { min-height: auto; padding-block: 3rem 2rem; justify-content: flex-start; gap: 1.6rem; }
  .master__word { margin-top: 1.6rem; }
  .lyudi__pin { min-height: auto; padding-block: 3rem; }
  .lyudi__stage { min-height: 62svh; }
  .finale, .kontakt { min-height: auto; padding-block: 3rem; }
  .seam { margin-block: 1rem; }
}

/* ── мобильное меню: цвета хаба ── */
.mobmenu, .mobmenu__btn {
  --mm-bg: #14120f;
  --mm-fg: var(--fg);
  --mm-dim: var(--fg-mute);
  --mm-accent: var(--brass-lift);
  --mm-rule: rgb(242 240 237 / 0.12);
  --mm-scrim: rgb(0 0 0 / 0.6);
}

/* ── флажок согласия: правило .zayavka label (display:grid) перебивало
   .zayavka__consent, и квадратик уезжал на отдельную строку над текстом ── */
.zayavka label.zayavka__consent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
}
.zayavka label.zayavka__consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  accent-color: var(--brass);
}

/* ── остаток пальцевых целей: замер показал 24-41px ── */
@media (max-width: 760px) {
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .master__word { min-height: 44px; display: flex; align-items: center; }
  .finale__names a, .foot__grid nav a { min-width: 44px; text-align: center; }
  .zayavka label.zayavka__consent { min-height: 44px; padding-block: 0.3rem; }
}

/* ── ссылка внутри фразы остаётся строчной ──
   правило пальцевых целей делало .ul инлайн-блоком высотой 44px, и ссылка
   посреди предложения выламывалась из строки ── */
@media (max-width: 760px) {
  p .ul, span .ul, cite .ul, label .ul { display: inline; min-height: 0; padding-block: 0; }
}

/* ── зерно на телефоне без режима смешения ──
   soft-light заставляет пересчитывать смешение всего экрана на каждом кадре:
   замер на 4x замедлении дал 23 кадра/с против 32 без него. Само зерно
   остаётся, меняется только способ наложения ── */
@media (max-width: 760px) {
  .site-noise { mix-blend-mode: normal; opacity: 0.035; }
}


/* ── слово сути этапа в ленте портретов ──
   раньше лента и блок мастера показывали человека дважды один в один.
   Теперь лента - обложка главы: короткое слово-девиз проступает крупно,
   мотив ремесла на ::after заметнее, чем был. Блок мастера ниже раскрывает
   уже подробностями, а не повторяет */
.lyudi__word {
  position: absolute; left: 78%; top: 50%; bottom: auto;
  transform: translateY(-50%);
  font-weight: 300; text-transform: uppercase; letter-spacing: 0.24em;
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  color: var(--ivory); opacity: 0;
  transition: opacity 900ms var(--ease) 200ms;
  pointer-events: none; z-index: 1;
}
.lyudi__slide.on .lyudi__word { opacity: 0.65; }
.lyudi__slide::after { opacity: 0.2 !important; }
.lyudi__slide.on::after { opacity: 0.32 !important; }
/* на телефоне слово этапа стояло у правого края и ложилось прямо на лицо -
   уводим его под портрет */
@media (max-width: 760px) {
  /* мобильное правило ширины перебивалось более точным селектором ниже -
     на телефоне портрет выходил 152 px при экране 400 */
  .lyudi__slide:not(.lyudi__slide--all) img {
    width: min(58vw, 300px);
    /* крупнее портрет - заметнее прямой край фотографии, маску уводим раньше */
    -webkit-mask-image: radial-gradient(ellipse 68% 76% at 50% 42%,
      #000 0%, #000 10%, rgb(0 0 0 / 0.85) 28%, rgb(0 0 0 / 0.48) 48%,
      rgb(0 0 0 / 0.16) 70%, transparent 94%);
    mask-image: radial-gradient(ellipse 68% 76% at 50% 42%,
      #000 0%, #000 10%, rgb(0 0 0 / 0.85) 28%, rgb(0 0 0 / 0.48) 48%,
      rgb(0 0 0 / 0.16) 70%, transparent 94%);
  }
  .lyudi__word {
    font-size: clamp(0.95rem, 4vw, 1.25rem);
    left: 50%; right: auto; top: auto; bottom: 6%;
    transform: translateX(-50%);
    letter-spacing: 0.18em; white-space: nowrap;
  }
  .lyudi__slide.on .lyudi__word { opacity: 0.8; }
}

/* ── заголовки на телефоне: последнее слово не остаётся одно в строке ── */
@media (max-width: 760px) {
  h2, h3 { text-wrap: balance; }
}

/* ── поля формы на телефоне: 16px ──
   Safari на iOS сам увеличивает страницу, когда фокус попадает в поле
   с кеглем меньше 16px, и вернуть масштаб пальцами уже сложно ── */
@media (max-width: 760px) {
  .zayavka input[type="text"], .zayavka input[type="tel"], .zayavka select, .zayavka textarea { font-size: 16px; }
}

/* Буквы-надписи: на телефоне полоса 800px вместо 1600px (29.08.2026) */
@media (max-width:760px){
  .master__word[href="/stroitelstvo/"]{background-image:url('/static/img/hub/beton-kladka-strip-mob.webp') !important;}
  .master__word[href="/okna/"]{background-image:url('/static/img/okna/vid-iznutri-strip-mob.webp') !important;}
  .master__word[href="/otdelka/"]{background-image:url('/static/img/hub/shtukaturka-rama-strip-mob.webp') !important;}
  .master__word[href="/umnyi-dom/"]{background-image:url('/static/img/hub/panel-vykluchatel-strip-mob.webp') !important;}
  .master__word[href="/derevo/"]{background-image:url('/static/img/derevo/hero-parket-strip-mob.webp') !important;}
  .master__word[href="/landshaft/"]{background-image:url('/static/img/principnovo/service-real-stroitelstvo-hero-strip-mob.webp') !important;}
}