/* ═══════════════════════════════════════════════════════════════
   Витрина «Окна Скандик» - «От миллиметра до горизонта». Чертёж
   наполняется материалом, в кульминации страница проходит сквозь
   раскрытый проём наружу. Палитра снята пипеткой с реальных фото
   производителя и с логотипа SCANDIC - ни одного придуманного цвета.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper:    237 239 239;  /* #edefef калька: холодный нейтральный, без жёлтого подтона -
                               тепло держат только дерево и красный акцент, не сама база */
  --paper-lift: 226 230 230; /* #e2e6e6 */
  --graphit:   43  49  56;  /* #2b3138 линии чертежа, холодный */
  --graphit-lift: 61 68 76;
  --wood:     135  91  64;  /* #875b40 панель рамы, кадр 23634 */
  --wood-dp:  127  85  61;  /* #7f553d импост */
  --warm:     232 208 185;  /* #e8d0b9 пол, тёплый второй план */
  --glow:     196 169 141;  /* #c4a98d свет изнутри */
  --red:      229  35  37;  /* #e52325 фирменный, с логотипа SCANDIC */
  --red-dp:   201  48  46;  /* #c9302e приглушённый для плоскостей */

  --ink: 43 49 56; /* текст/сетка сцены - JS переключает на paper в тёмном акте */
  --rail-ink: 43 49 56; /* цвет рейки-навигатора - JS красит независимо от --ink секций, рейка фиксирована поверх всех актов */
  --built: 0; /* 0 = чертёж пуст, 1 = собран; двигает JS по прогрессу */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-mid: 420ms;
  --gut: clamp(1.2rem, 4vw, 4rem);
  --h1: clamp(2.8rem, 7.5vw, 6.2rem);
  --max: 1440px;
}

* { margin: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  background: rgb(var(--paper));
  color: rgb(var(--graphit));
}
h1, h2, h3 { font-family: 'Commissioner', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
a { color: inherit; }
img { display: block; }
.tabular { font-variant-numeric: tabular-nums; }

.stagebg {
  position: fixed; inset: 0; z-index: -2;
  background: rgb(var(--paper));
  pointer-events: none;
}

/* координатная сетка чертежа - плотность растворяется к финалу через --built,
   цвет линий переключается вместе с актом (JS красит .stagebg и токен --ink
   в одном кадре) - меняем только opacity/color (композитинг), не геометрию */
.stagegrid {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: 1;
  background-image:
    linear-gradient(rgb(var(--ink) / 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ink) / 0.1) 1px, transparent 1px);
  background-size: 48px 48px;
  transition: opacity 500ms linear;
}
body.is-built .stagegrid { opacity: 0.28; }

/* ── акт II «негатив»: разрез/бренды/пять способов/проём сидят на тёмной
   подложке - JS красит .stagebg в --graphit заранее (ScrollTrigger на
   .razrez), эти секции переключают токен --ink на paper для контраста */
.razrez, .brendy, .sposoby, .proyom {
  --ink: 237 239 239;
  color: rgb(var(--ink));
}
.act-mark { color: rgb(var(--ink) / 0.18); }

section { position: relative; padding: clamp(3rem, 7vw, 5.5rem) var(--gut); }
section[id] { scroll-margin-top: 5.5rem; }

.kicker { font-family: 'Commissioner', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; color: rgb(var(--red-dp)); }
.razrez .kicker, .brendy .kicker, .sposoby .kicker { color: rgb(var(--red)); }
.h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.08; margin-top: 0.5rem; }
.lede { max-width: 46ch; margin-top: 0.9rem; color: rgb(var(--ink) / 0.68); }

.act-mark {
  position: absolute; top: clamp(1.2rem, 3vw, 2.2rem); right: var(--gut);
  font-family: 'Commissioner', sans-serif; font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  pointer-events: none;
}
@media (max-width: 640px) { .act-mark { display: none; } }

/* ── метки-мишени: заполняют пустые поля по бокам от узкого центрального
   блока на широком экране (перекрёстие геодезиста/реперная точка на
   плане) - та же чертёжная лексика, что у рейки и разреза, но локально
   у конкретного блока, не только глобально ── */
.regmark {
  position: absolute; top: 50%; width: 26px; height: 26px;
  transform: translateY(-50%);
  opacity: 0.16;
  pointer-events: none;
}
.regmark line, .regmark circle { fill: none; stroke: rgb(var(--ink)); stroke-width: 1; }
.regmark--l { left: clamp(0.5rem, 4vw, 2.4rem); }
.regmark--r { right: clamp(0.5rem, 4vw, 2.4rem); }
@media (max-width: 1180px) { .regmark { display: none; } }

/* ── появления по скроллу: элемент с личной gsap-анимацией НЕ носит .rv ── */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ── сквозной стык: тонкая линия через весь документ. Пробовали расширить
   до линейки с делениями (та же 64px-сетка, что у рейки справа) - мешало
   читать текст там, где контент пересекает середину (раздел «Человек»).
   Тема измерения уже держит рейка mrail справа, тут достаточно тонкой
   нейтральной линии-шва, не второй линейки. ── */
.seam {
  position: fixed; top: 0; bottom: 0; left: 50%;
  width: 2px; z-index: 5;
  pointer-events: none;
  transform: translateX(-50%);
}
/* к финалу шов растёт вместе с --built почти на весь экран и на прозе
   после проёма (герои, срок, расстояние, человек, faq, контакт) просто
   режет текст, не неся смысла чертежа - гасим на подходе к этой части,
   опыт «Человек» и «Расстояние» показал баг дважды. JS гасит opacity
   плавно на входе в .vid, второй раз возвращать не нужно - страница
   после кульминации уже не возвращается к чертёжной графике. */
.seam__line {
  position: absolute; inset: 0;
  background: rgb(var(--rail-ink));
  opacity: 0.16;
  transform-origin: top center;
  transform: scaleY(0);
  transition: background 300ms linear;
}
@media (max-width: 900px) { .seam { display: none; } }

/* ── курсор-штангенциркуль ── */
.caliper {
  position: fixed; top: 0; z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.caliper.is-active { opacity: 1; }
.caliper__line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgb(var(--red)); }
.caliper__mark {
  position: absolute; top: -1.6rem; left: 0.5rem;
  font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: 0.72rem;
  color: rgb(var(--red-dp)); white-space: nowrap;
}
@media (hover: none) { .caliper { display: none; } }

/* ── рейка-навигатор: заполняет пустые поля справа на широком экране,
   держит масштабную метафору всей страницы (миллиметр -> горизонт) на
   каждом кадре, не только в героях и разрезе. Приём взят у соседа по
   клубу (level-rail на павелмусс.рф - там «отметка высоты участка»,
   тут «лист чертежа»), исполнение и палитра свои. ── */
.mrail {
  position: fixed; right: clamp(1rem, 3vw, 2.4rem); top: 50%; transform: translateY(-50%);
  height: 38vh; z-index: 15;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.mrail__track {
  flex: 1; width: 7px; position: relative;
  background: repeating-linear-gradient(180deg, rgb(var(--rail-ink) / 0.35) 0 1px, transparent 1px calc(38vh / 9));
  border-left: 1px solid rgb(var(--rail-ink) / 0.16);
  border-right: 1px solid rgb(var(--rail-ink) / 0.16);
  transition: background 300ms linear, border-color 300ms linear;
}
.mrail__marker { position: absolute; left: -5px; right: -5px; height: 2px; top: 0; background: rgb(var(--red)); }
.mrail__label {
  font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgb(var(--rail-ink) / 0.42);
  writing-mode: vertical-rl;
  transition: color 300ms linear;
}
@media (max-width: 1180px), (hover: none) { .mrail { display: none; } }

/* ── 1. лист / герой ── */
.hero { min-height: 92svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 6rem; padding-bottom: 4rem; }
.hero__stamp {
  font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(43,49,56,0.5);
  border: 1px solid rgba(43,49,56,0.22); border-radius: 100px;
  padding: 0.5rem 1.2rem;
  white-space: nowrap;
  margin-bottom: 0.6rem;
}
@media (max-width: 640px) { .hero__stamp { font-size: 0.65rem; padding: 0.4rem 0.8rem; white-space: normal; max-width: 90%; text-align: center; } }
.hero__inner { max-width: 52rem; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }

/* лист спецификации - три вида (окно, раздвижная, входная) + штамп,
   предвестник кульминации: тот же жест открывания, что и в проёме,
   только линией. Сам вычерчивает себя при загрузке (JS ставит
   stroke-dasharray/-dashoffset и снимает класс) - только типы, без
   выдуманных размеров: спецификация честная по содержанию, не по цифрам */
.hero__blueprint {
  width: min(94vw, 720px); height: auto;
  margin-bottom: 0.4rem;
  overflow: visible;
}
.hero__blueprint rect, .hero__blueprint line, .hero__blueprint path {
  fill: none; stroke: rgb(var(--graphit)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.hero__blueprint-dash { opacity: 0.45; }
.hero__blueprint-fill { fill: rgb(var(--red)); stroke: none; opacity: 0; transition: opacity 400ms var(--ease); }
.hero__blueprint-fill2 { fill: rgb(var(--graphit) / 0.09); stroke: none; opacity: 0; transition: opacity 500ms var(--ease); }
.hero__blueprint.is-drawn .hero__blueprint-fill2 { opacity: 1; }
.hero__sheet-label, .hero__sheet-stamp1, .hero__sheet-stamp2 {
  font-family: 'Commissioner', sans-serif; text-anchor: middle;
  fill: rgb(var(--graphit)); opacity: 0; transition: opacity 500ms var(--ease);
}
.hero__blueprint.is-drawn .hero__sheet-label,
.hero__blueprint.is-drawn .hero__sheet-stamp1,
.hero__blueprint.is-drawn .hero__sheet-stamp2 { opacity: 1; }
.hero__sheet-label { font-size: 12px; font-weight: 600; opacity: 0; }
.hero__blueprint.is-drawn .hero__sheet-label { opacity: 0.6; }
.hero__sheet-stamp1 { font-size: 15px; font-weight: 700; }
.hero__sheet-stamp2 { font-size: 10px; font-weight: 500; opacity: 0; fill: rgba(43,49,56,0.6); }
.hero__blueprint.is-drawn .hero__sheet-stamp2 { opacity: 1; }
@media (max-width: 640px) { .hero__blueprint { width: 96vw; } .hero__sheet-label { font-size: 15px; } .hero__sheet-stamp1 { font-size: 18px; } .hero__sheet-stamp2 { font-size: 13px; } }
.hero__blueprint.is-drawn .hero__blueprint-fill { opacity: 1; }

.hero__kicker { font-family: 'Commissioner', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; color: rgb(var(--red-dp)); }
.hero__title { font-size: var(--h1); line-height: 0.98; text-transform: none; }
.hero__lead { max-width: 42ch; color: rgba(43,49,56,0.68); font-size: 1.08rem; }
.hero__scroll { font-size: 0.88rem; color: rgba(43,49,56,0.45); margin-top: 0.6rem; letter-spacing: 0.02em; }
.hero__scroll-mark { font-family: 'Commissioner', sans-serif; font-weight: 700; color: rgb(var(--red)); margin-right: 0.3em; }

/* ── ось разреза A-A: растёт первым скроллом от листа вниз, пересекает
   нижний край экрана - лист физически не помещается целиком, скролл
   читается как продолжение документа, не как механика сайта ── */
.hero__axis { position: absolute; left: 50%; bottom: -64px; width: 2px; height: 90px; transform: translateX(-50%); pointer-events: none; z-index: 1; }
.hero__axis-line { display: block; width: 100%; height: 100%; background: rgb(var(--red)); transform-origin: top center; transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) { .hero__axis-line { transform: scaleY(1); } }
@media (max-width: 640px) { .hero__axis { display: none; } }

/* стрелка раздвижной краснеет вместе со сдвигом полотна - визуальный
   отклик на действие пользователя, не самостоятельная анимация */
.hero__blueprint-dash.is-active { stroke: rgb(var(--red)); opacity: 0.85; }

/* ── 2. принцип ── */
.princip { display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; text-align: center; max-width: var(--max); margin: 0 auto; }
.princip__strip { display: flex; gap: clamp(0.8rem, 2vw, 1.6rem); flex-wrap: wrap; justify-content: center; }
/* 14.08: настоящие макро-фото среза вместо плоских цветных плашек -
   решение Сергея после разбора страницы. object-fit:cover + затемнение
   снизу под подпись, снимок кадрируется, не растягивается */
.princip__sample { position: relative; overflow: hidden; width: min(180px, 40vw); height: 130px; border-radius: 2px; display: flex; align-items: flex-end; padding: 0.7rem; box-shadow: 0 20px 40px -20px rgba(43,49,56,0.35); }
.princip__sample img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.princip__sample::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 60%); }
.princip__wood-label { position: relative; z-index: 1; font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: 0.78rem; color: rgba(255,255,255,0.92); text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.princip__claim { font-family: 'Commissioner', sans-serif; font-weight: 700; font-size: clamp(2rem, 5vw, 3.2rem); color: rgb(var(--graphit)); }
.princip__text { max-width: 52ch; color: rgba(43,49,56,0.68); }

/* ── 3. разрез: крупная своя схема окна (не растянутое фото - гейт резкости
   запрещает увеличивать 350×235 сверх 175px) закрывается по скроллу, счётчик
   94% - главный визуальный вес блока, честное фото производителя ушло в
   маленькую подпись сбоку (правка по замечанию Роберта 14.08) ── */
.razrez__head { max-width: var(--max); margin: 0 auto 2.2rem; }
.razrez__head .lede { max-width: 62ch; }
.razrez__main {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(240px, 380px) 1fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.razrez__window { width: 100%; height: auto; overflow: visible; }
.rw-frame { fill: none; stroke: rgb(var(--ink)); stroke-width: 2; opacity: 0.55; }
.rw-leaf rect { fill: rgb(var(--ink) / 0.05); stroke: rgb(var(--ink)); stroke-width: 1.6; }
.rw-mullion { stroke: rgb(var(--ink)); stroke-width: 1.6; opacity: 0.7; }
.rw-leaf--l { transform: translateX(-34px); will-change: transform; }
.rw-leaf--r { transform: translateX(34px); will-change: transform; }
.rw-handle { fill: rgb(var(--red)); opacity: 0.9; }
.razrez__counter { position: relative; z-index: 6; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; }
.razrez__counter-num { font-family: 'Commissioner', sans-serif; font-weight: 700; font-size: clamp(4.5rem, 11vw, 9.5rem); color: rgb(var(--red)); line-height: 0.92; }
.razrez__counter-label { font-size: 1rem; color: rgb(var(--ink) / 0.68); max-width: 30ch; }
@media (max-width: 760px) { .razrez__main { grid-template-columns: 1fr; text-align: center; } .razrez__counter { align-items: center; } .razrez__counter-label { max-width: none; } }
.razrez__photo { margin: 2.4rem auto 0; max-width: var(--max); display: flex; align-items: center; gap: 1rem; justify-content: center; }
.razrez__photo img { width: 175px; height: auto; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.35); }
.razrez__photo figcaption { font-size: 0.8rem; color: rgb(var(--ink) / 0.5); max-width: 22ch; }
@media (max-width: 640px) { .razrez__photo { flex-direction: column; } }
.razrez__note { text-align: center; margin-top: 1.6rem; font-size: 0.85rem; color: rgb(var(--ink) / 0.5); max-width: var(--max); margin-left: auto; margin-right: auto; }

/* ── 4. три производителя ── */
/* размерные оси в пустых боковых полях - служебная маркировка листа
   (ось 01/02), без выдуманных чисел, тот же язык засечек, что у
   горизонтальной линейки перед FAQ */
.brendy__axis { position: absolute; top: 18%; bottom: 18%; width: 7px; background-image: repeating-linear-gradient(180deg, rgb(var(--ink) / 0.22) 0 1px, transparent 1px 10px); background-repeat: repeat-y; opacity: 0.7; }
.brendy__axis--l { left: clamp(0.8rem, 3vw, 2.2rem); }
.brendy__axis--r { right: clamp(0.8rem, 3vw, 2.2rem); }
.brendy__axis-label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.5rem; white-space: nowrap; font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--ink) / 0.4); }
@media (max-width: 1180px) { .brendy__axis { display: none; } }

.brendy__head { max-width: var(--max); margin: 0 auto 2.4rem; }
.brendy__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 4vw, 3rem); max-width: var(--max); margin: 0 auto; }
/* карточка бренда - всегда светлый лист кальки, даже в тёмном акте II -
   поэтому текст внутри держит графит, а не унаследованный светлый --ink */
.brendy__item { display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1.6rem, 3vw, 2.2rem); background: rgb(var(--paper-lift)); border-radius: 2px; --ink: 43 49 56; color: rgb(var(--ink)); }
.brendy__logo { height: auto; width: 128px; object-fit: contain; object-position: left; }
.brendy__country { font-family: 'Commissioner', sans-serif; font-weight: 700; font-size: 1.1rem; margin-top: 0.4rem; color: rgb(var(--ink)); }
.brendy__meta { font-size: 0.9rem; color: rgb(var(--ink) / 0.62); }
@media (max-width: 760px) { .brendy__list { grid-template-columns: 1fr; } }
.brendy__value { max-width: 62ch; margin: 2.4rem auto 0; text-align: center; font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.35; }

/* ── 5. пять способов пройти ── */
.sposoby__head { max-width: var(--max); margin: 0 auto 2.4rem; }
.sposoby__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); max-width: var(--max); margin: 0 auto; }
.sposoby__item { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.sposoby__scheme { width: 100%; max-width: 120px; height: auto; color: rgb(var(--ink)); opacity: 0.75; }
.sposoby__name { font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: 0.98rem; }
.sposoby__dim { font-size: 0.82rem; color: rgb(var(--ink) / 0.5); }
.sposoby__photo-wrap { position: relative; }
.sposoby__photo { max-width: var(--max); margin: clamp(2.4rem, 5vw, 4rem) auto 0; text-align: center; }
.sposoby__photo img { width: 100%; max-width: 876px; height: auto; margin: 0 auto; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.4); }
.sposoby__photo figcaption { font-size: 0.8rem; color: rgb(var(--ink) / 0.45); margin-top: 0.6rem; }

/* выноски в пустых боковых полях фото - честная подпись по содержанию
   кадра, короткая линия-штрих + текст, тише контента */
.sposoby__lead { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 0.6rem; font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ink) / 0.4); pointer-events: none; }
.sposoby__lead::before { content: ''; display: block; height: 1px; width: clamp(20px, 3vw, 48px); background: rgb(var(--ink) / 0.25); }
.sposoby__lead--l { left: clamp(0.8rem, 3vw, 2.2rem); }
.sposoby__lead--r { right: clamp(0.8rem, 3vw, 2.2rem); flex-direction: row-reverse; }
@media (max-width: 1180px) { .sposoby__lead { display: none; } }

.sposoby__floor { position: relative; max-width: var(--max); margin: clamp(1.6rem, 4vw, 3rem) auto 0; height: 44px; display: none; }
.sposoby__floor::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgb(var(--ink) / 0.14); }
.sposoby__figure { position: absolute; left: 0; bottom: 0; width: 20px; height: auto; fill: rgb(var(--ink) / 0.4); will-change: transform; }
@media (min-width: 900px) { .sposoby__floor { display: block; } }

/* ── 6. кульминация: проход сквозь проём ── */
.proyom { padding-top: 0; padding-bottom: 0; overflow: clip; }
.proyom__pin { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem var(--gut); }
.proyom__frame { position: relative; width: min(100%, var(--max)); aspect-ratio: 2808 / 1025; }
/* открытие ведёт JS покадрово (scrub) - transform/opacity ставятся инлайн
   на каждый кадр скролла, CSS-переход тут не нужен и мешал бы (двойное
   сглаживание: прокрутка уже сама интерполирует) */
.proyom__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); will-change: opacity, transform; }
.proyom__leaf {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: rgb(var(--paper));
  border: 1px solid rgba(43,49,56,0.3);
  transform-origin: center;
  will-change: transform;
}
.proyom__leaf--l { left: 0; }
.proyom__leaf--r { right: 0; }
.proyom__dims { position: absolute; inset: 0; pointer-events: none; will-change: opacity; }
.proyom__dim { position: absolute; font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: 0.8rem; color: rgb(var(--red)); }
.proyom__dim--w { top: -1.6rem; left: 50%; transform: translateX(-50%); }
.proyom__dim--h { top: 50%; right: -3.4rem; transform: translateY(-50%) rotate(90deg); }
@media (max-width: 640px) { .proyom__dim--h { right: -2.2rem; } }
.proyom__figure { position: absolute; bottom: 0; left: 8%; width: 26px; height: auto; fill: rgb(var(--ink) / 0.4); will-change: opacity; }
/* подпись живёт на фоне, который за кульминацию уезжает из графита в
   тёплый сад, а секционный --ink остаётся светлым - светлый текст на
   светло-тёплом просто пропадал. Свой токен, JS красит его тем же t,
   что и фон (как --rail-ink у рейки) */
.proyom__cap { margin-top: 1.6rem; font-size: 0.86rem; color: rgb(var(--cap-ink, var(--ink)) / 0.72); text-align: center; max-width: 50ch; transition: color 200ms linear; }

/* гигантский счётчик размера - плакатный жест кульминации, крутится
   0 → 3000/2800 в фазе 0-0.35 прогресса сцены, затем уступает фото */
.proyom__giant {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Commissioner', sans-serif; font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 7rem);
  color: rgb(var(--red));
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

/* ── 7. то, что за окном ── */
.vid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: var(--max); margin: 0 auto; }
.vid__media img { width: 100%; height: auto; box-shadow: 0 30px 70px -30px rgba(43,49,56,0.35); }
.vid__quote { font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.4; margin-top: 0.8rem; }
.vid__source { margin-top: 1rem; font-size: 0.86rem; color: rgba(43,49,56,0.55); }
.vid__link { display: inline-block; margin-top: 1rem; font-size: 0.88rem; color: rgb(var(--red-dp)); text-decoration: none; border-bottom: 1px solid rgba(201,48,46,0.4); }
.vid__link:hover { border-bottom-color: rgb(var(--red-dp)); }
@media (max-width: 760px) { .vid { grid-template-columns: 1fr; } }

/* ── 8. срок: короткая пауза между актами (акт III -> I начинает
   возврат в кальку тут же, см. окна.js). Раньше строка сидела у
   верхнего края секции, а не по центру (102px сверху против 74px
   снизу на 1440) - читалось как случайная пустота внизу, а не как
   пауза для дыхания ── */
.srok { background: rgb(var(--graphit)); color: rgb(var(--paper)); display: flex; align-items: center; min-height: 22vh; }
.srok__inner { width: 100%; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.srok__num { font-family: 'Commissioner', sans-serif; font-weight: 700; font-size: clamp(3rem, 8vw, 5.5rem); color: rgb(var(--red)); flex-shrink: 0; }
.srok__text { max-width: 56ch; font-size: 1.05rem; color: rgba(242,241,236,0.82); }
@media (max-width: 640px) { .srok__inner { flex-direction: column; align-items: flex-start; gap: 1rem; } }

/* ── 9. расстояние ── */
.rasstoyanie { text-align: center; max-width: var(--max); margin: 0 auto; }
.rasstoyanie__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.8rem; margin-top: 2rem; font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: clamp(1.1rem, 2.6vw, 1.6rem); }
.rasstoyanie__arrow { color: rgb(var(--red-dp)); font-size: 1.2rem; }
.rasstoyanie__note { margin-top: 1.6rem; font-size: 0.9rem; color: rgba(43,49,56,0.55); }

/* ── 10. человек ── */
.chelovek { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; max-width: var(--max); margin: 0 auto; }
.chelovek__portrait img { width: 240px; height: auto; box-shadow: 0 20px 50px -20px rgba(43,49,56,0.4); }
.chelovek__name { font-family: 'Commissioner', sans-serif; font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.chelovek__role { font-size: 0.86rem; color: rgb(var(--red-dp)); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.3rem; }
.chelovek__text { margin-top: 1rem; max-width: 56ch; color: rgba(43,49,56,0.68); }
.chelovek__lectures { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.92rem; color: rgba(43,49,56,0.75); padding-left: 1.1rem; border-left: 2px solid rgba(201,48,46,0.4); }
.chelovek__link { display: inline-block; margin-top: 1.1rem; font-size: 0.88rem; color: rgb(var(--red-dp)); text-decoration: none; border-bottom: 1px solid rgba(201,48,46,0.4); }
@media (max-width: 700px) { .chelovek { grid-template-columns: 1fr; text-align: center; } .chelovek__portrait { margin: 0 auto; } .chelovek__lectures { text-align: left; } }

/* ── 11. клуб ── */
.chain { overflow: clip; }
.club-mark { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; overflow: hidden; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; }
/* кегль подобран так, чтобы слово читалось целиком: ~10 букв Commissioner 700
   занимают ≈6.2em ширины, 15.5vw держит слово чуть шире экрана - края букв
   слегка выходят за рамки, но слово опознаётся (правка Сергея 14.08) */
.club-mark span { font-family: 'Commissioner', sans-serif; font-weight: 700; font-size: clamp(2rem, 11.8vw, 13rem); line-height: 0.8; color: rgb(var(--graphit)); opacity: 0.065; white-space: nowrap; text-transform: uppercase; }
.chain > .rv, .chain__list, .chain__cta { position: relative; z-index: 1; }
.chain > .rv { max-width: var(--max); margin-left: auto; margin-right: auto; }
.faq > .rv { max-width: var(--max); margin-left: auto; margin-right: auto; }
.contact > .kicker, .contact > .h2 { max-width: var(--max); margin-left: auto; margin-right: auto; }
.chain__list { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; max-width: var(--max); margin-left: auto; margin-right: auto; }
/* этап без своей витрины («Дерево») стоит в цепочке обычным span - номер
   пропускать нельзя: на странице про точность до миллиметра дыра в
   нумерации читается как опечатка, а не как «раздела пока нет» */
.chain__list a, .chain__list > span { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.1rem; border: 1px solid rgba(43,49,56,0.18); border-radius: 100px; text-decoration: none; font-size: 0.9rem; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.chain__list > span { opacity: 0.45; }
.chain__list a:hover { border-color: rgb(var(--red-dp)); background: rgba(201,48,46,0.06); }
.chain__list a.is-here { background: rgb(var(--graphit)); color: rgb(var(--paper)); border-color: rgb(var(--graphit)); }
.chain__step { font-family: 'Commissioner', sans-serif; font-weight: 600; color: rgb(var(--red-dp)); }
.chain__list a.is-here .chain__step { color: rgb(var(--paper)); }
.chain__cta { max-width: var(--max); margin: 1.6rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(43,49,56,0.14); font-size: 0.92rem; color: rgba(43,49,56,0.62); }
.chain__cta a { color: rgb(var(--red-dp)); }

/* ── 12. faq ── */
.faq__body { display: grid; grid-template-columns: minmax(0, 62ch) 300px; gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: 2rem; max-width: var(--max); margin-left: auto; margin-right: auto; }
.faq__cta { position: sticky; top: 6.5rem; background: rgb(var(--graphit)); color: rgb(var(--paper)); padding: clamp(1.6rem, 3vw, 2.2rem); border-left: 3px solid rgb(var(--red)); }
.faq__cta .kicker { color: rgb(var(--red)); margin-bottom: 0.7rem; }
.faq__cta h3 { font-size: 1.25rem; margin-bottom: 0.8rem; }
.faq__cta p { font-size: 0.9rem; color: rgba(242,241,236,0.65); margin-bottom: 1.2rem; }
.faq__cta a.tel { display: block; font-family: 'Commissioner', sans-serif; font-weight: 700; font-size: 1.15rem; text-decoration: none; margin-bottom: 0.6rem; }
.faq__cta a.tel:hover { color: rgb(var(--red)); }
.faq__cta .addr { font-size: 0.85rem; color: rgba(242,241,236,0.55); }
@media (max-width: 760px) { .faq__body { grid-template-columns: 1fr; } .faq__cta { position: static; } }
.faq__list { max-width: 62ch; margin-top: 0; display: flex; flex-direction: column; }
.faq__item { position: relative; padding: 1.5rem 0 1.5rem 1.6rem; }
.faq__item::before { content: ""; position: absolute; left: 0; top: 1.85rem; width: 0.9rem; height: 3px; border-radius: 2px; background: rgb(var(--red)); }
.faq__item:not(:last-child)::after { content: ""; position: absolute; left: 1.6rem; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(201,48,46,0.3), rgba(201,48,46,0.05) 70%); }
.faq__q { font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: 1.05rem; margin-bottom: 0.5rem; }
.faq__a { color: rgba(43,49,56,0.68); font-size: 0.95rem; max-width: 56ch; }

/* ── 13. контакты ── */
.contact { background: rgb(var(--graphit)); color: rgb(var(--paper)); }
.contact h2 { color: rgb(var(--paper)); }
.contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem; margin-top: 2rem; max-width: var(--max); margin-left: auto; margin-right: auto; }
.contact__label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(242,241,236,0.5); margin-bottom: 0.4rem; }
.contact__val { font-family: 'Commissioner', sans-serif; font-weight: 600; }
.contact__val a { text-decoration: none; border-bottom: 1px solid rgba(242,241,236,0.35); }
.contact__val a:hover { border-color: rgb(var(--paper)); }

/* ── бланк заявки ──
   последний лист чертежа: поля - строки штампа с подписью слева и линией
   снизу, не карточки с тенями. Ни одной новой краски: тот же графит,
   калька и красный акцент, что и на всей странице. */
.zayavka { max-width: var(--max); margin: 2.8rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(242,241,236,0.16); }
.zayavka__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.zayavka__title { font-family: 'Commissioner', sans-serif; font-weight: 700; font-size: 1.15rem; }
.zayavka__num { font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242,241,236,0.4); }
.zayavka__rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.zayavka__row { display: flex; flex-direction: column; gap: 0.35rem; }
.zayavka__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(242,241,236,0.5); }
.zayavka__input {
  font: inherit; font-size: 0.95rem; color: rgb(var(--paper));
  background: transparent; border: none; border-bottom: 1px solid rgba(242,241,236,0.28);
  padding: 0.45rem 0; border-radius: 0;
  transition: border-color var(--t-fast) var(--ease);
}
.zayavka__input::placeholder { color: rgba(242,241,236,0.28); }
.zayavka__input:focus { outline: none; border-bottom-color: rgb(var(--red)); }
.zayavka__input:focus-visible { outline: none; }
.zayavka__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zayavka__consent { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1.6rem; font-size: 0.82rem; color: rgba(242,241,236,0.6); max-width: 62ch; cursor: pointer; }
.zayavka__consent input { margin-top: 0.15rem; accent-color: rgb(var(--red)); flex-shrink: 0; }
.zayavka__consent a { color: rgb(var(--paper)); text-decoration: none; border-bottom: 1px solid rgba(242,241,236,0.35); }
.zayavka__submit {
  margin-top: 1.4rem; font: inherit;
  font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: 0.95rem;
  color: rgb(var(--paper)); background: rgb(var(--red));
  border: none; border-radius: 2px; padding: 0.85rem 1.8rem; cursor: pointer;
  transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.zayavka__submit:hover { background: rgb(var(--red-dp)); }
.zayavka__submit:disabled { opacity: 0.5; cursor: default; }
.zayavka__err { margin-top: 0.9rem; font-size: 0.85rem; color: rgb(var(--red)); min-height: 1.2em; }
.zayavka__ok { display: none; max-width: var(--max); margin: 2.8rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(242,241,236,0.16); font-family: 'Commissioner', sans-serif; font-weight: 600; font-size: 1.05rem; }
.zayavka__ok.on { display: block; }
@media (max-width: 760px) { .zayavka__rows { grid-template-columns: 1fr; } .zayavka__submit { width: 100%; } }

/* ── шапка, клубная планка, футер (общий паттерн клуба) ── */
.clubbar { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: space-between; padding: 0.6rem var(--gut); font-size: 0.78rem; background: rgb(var(--graphit)); color: rgba(242,241,236,0.7); }
.clubbar a { color: rgb(var(--paper)); text-decoration: none; border-bottom: 1px solid rgba(242,241,236,0.3); }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gut); background: rgba(242,241,236,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(43,49,56,0.1); }
.top__logo { display: flex; align-items: baseline; gap: 0.6rem; font-family: 'Commissioner', sans-serif; font-weight: 700; font-size: 1.2rem; text-decoration: none; letter-spacing: 0.02em; }
.top__logo i { color: rgb(var(--red)); font-style: normal; }
.top__club { font-family: 'Onest', sans-serif; font-weight: 400; font-size: 0.7rem; letter-spacing: 0.03em; color: rgba(43,49,56,0.35); text-transform: lowercase; }
.top__nav { display: flex; gap: clamp(1rem, 2.4vw, 2rem); }
.top__nav a { font-size: 0.88rem; text-decoration: none; color: rgba(43,49,56,0.65); }
.top__nav a:hover { color: rgb(var(--red-dp)); }
@media (max-width: 640px) { .top__nav { display: none; } }
footer { padding: 2rem var(--gut); display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; justify-content: space-between; font-size: 0.82rem; color: rgba(43,49,56,0.45); background: rgb(var(--paper-lift)); }
footer a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(43,49,56,0.2); }
footer a:hover { border-color: rgba(43,49,56,0.5); }

/* ── линейка-разделитель: измерительная шкала вместо голой границы ── */
.ruler {
  height: 22px;
  margin: 0 var(--gut);
  background-image: repeating-linear-gradient(90deg, rgb(var(--ink) / 0.28) 0 1px, transparent 1px 8px);
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: auto 12px;
  opacity: 0.7;
}

/* ── выход на главную клуба из блока цепочки ── */
.club-home {
  position: relative; z-index: 1;
  display: inline-block; margin-top: 1.6rem;
  font-size: 0.9375rem; color: rgb(var(--red));
  border-bottom: 1px solid rgb(var(--red) / 0.4); padding-bottom: 2px;
  transition: color 300ms ease, border-color 300ms ease;
}
.club-home:hover { color: rgb(var(--graphit)); border-color: rgb(var(--graphit)); }
.club-home span { display: inline-block; transition: transform 200ms ease; }
.club-home:hover span { transform: translateX(4px); }


/* ── метка клуба в правом краю шапки: один вид на всех витринах ── */
.top__nav, .top nav { margin-left: auto; }

/* club-mark: страховка от переполнения - фоновое слово шире экрана и на
   узких вьюпортах растягивало страницу вбок */
.club { position: relative; overflow: clip; }

/* ── общий знак клуба в шапке витрины ──
   один и тот же на всех шести: контур дома в языке хаба плюс подпись.
   Цвет берём у шапки через currentColor, поэтому знак одинаково живёт и
   на тёмных витринах, и на светлой «Скандик». Переход - в том же окне:
   клуб это один проект */
.club-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-left: clamp(0.8rem, 1.6vw, 1.4rem);
  align-self: center;
  text-decoration: none;
  color: inherit;
  opacity: 0.55;
  white-space: nowrap;
  transition: opacity 220ms ease;
}
.club-tag:hover { opacity: 1; }
.club-tag__mark {
  width: 1.35em; height: 1.12em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.club-tag span {
  display: inline-flex; gap: 0.34em; align-items: baseline;
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: lowercase;
}
.club-tag span i { font-style: normal; opacity: 0.72; }
@media (max-width: 700px) { .club-tag span { display: none; } .club-tag__mark { width: 1.05em; height: 1.05em; } }

/* ── карточка участника целиком кликабельна ──
   ссылка стоит на display:contents, чтобы не ломать сетку карточки, но
   такой элемент не создаёт своего блока: не было ни курсора-руки, ни
   подсветки, карточка выглядела мёртвой. Растягиваем область клика
   псевдоэлементом на всю карточку и даём внятный отклик */
.chain__i { position: relative; }
.chain__link { display: contents; color: inherit; text-decoration: none; }
.chain__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 240ms ease, background-color 240ms ease;
}
.chain__i:hover .chain__link::after {
  border-color: currentColor;
  background: rgb(255 255 255 / 0.03);
}
.chain__link:focus-visible::after { border-color: currentColor; outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 760px) { .hero__stamp { font-size: 11px; } }

/* ── мобильная доводка: пальцевые цели ──
   замер показал ссылки высотой 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, .lede 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) {
  /* поля формы и согласие: высота под палец */
  .zayavka__input, input[type=text], input[type=tel], input[type=email], textarea { min-height: 44px; padding-block: 0.7rem; }
  .zayavka__consent, label:has(input[type=checkbox]) { min-height: 44px; display: flex; align-items: center; gap: 0.6rem; }
  input[type=checkbox] { width: 22px; height: 22px; flex: none; }
}

/* ── мобильное меню: цвета светлой витрины «Скандик» ── */
.mobmenu, .mobmenu__btn {
  --mm-bg: rgb(var(--paper));
  --mm-fg: rgb(var(--graphit));
  --mm-dim: rgb(var(--graphit) / 0.62);
  --mm-accent: rgb(var(--red));
  --mm-rule: rgb(var(--graphit) / 0.16);
  --mm-scrim: rgb(var(--graphit) / 0.42);
}

/* ── пальцевые цели: логотип, ссылки семинаров, телефон, футер ── */
@media (max-width: 760px) {
  .top__logo { min-height: 44px; align-items: center; }
  .vid__link, .chelovek__link, .tel, footer a {
    display: inline-block; padding-block: 0.6rem; min-height: 44px;
  }
  /* флажок держим у первой строки: по центру многострочной метки он висел сам по себе */
  .zayavka__consent { align-items: flex-start; padding-block: 0.3rem; }
  .zayavka__consent input { width: 20px; height: 20px; margin-top: 0.15rem; }
}

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

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