/* Стендаль — акт 1 (чертёж) → акт 2 (дом). Прототип одной сцены. Префикс sd-.

   ЛИСТ — НАСТОЯЩИЙ ЧЕРТЁЖ, А НЕ ОБВОДКА КАДРА (правка 24.08.2026).
   Трассировка фотографии давала линию, повторяющую шум: у каждого одинакового
   окна свой контур, прямые гуляли. Теперь фасад ПОСТРОЕН по обмеру
   (scripts/facade-elevation.py) и вставлен инлайновым SVG: одинаковые проёмы
   одинаковы, линии прямые, оси штрихпунктирные, размерная цепочка с засечками,
   отметки уровней, штамп, миллиметровка. Разрешения у листа нет вовсе.

   Фотография садится РОВНО в окно листа: координаты чертежа сняты с самого
   кадра, поэтому материал наливается в собственный контур. */

:root {
  --sd-paper:      #F2EFE9;
  --sd-ink:        #1F1B18;  /* 14.90 на бумаге — AA */
  --sd-brick:      #5A241B;  /* 10.75 — AA. Им же вычерчен лист */
  /* ВНИМАНИЕ: коэффициенты посчитаны к БУМАГЕ #F2EFE9. У страницы фон темнее
     (#E9E4DA), и на нём --sd-muted даёт 4.40 — AA НЕ проходит. На земле
     страницы мелкий текст ставить только на --sd-muted-s (6.57). */
  --sd-muted:      #6E675E;  /*  4.86 на бумаге — AA (мельче 14px не ставить) */
  --sd-muted-s:    #544D45;  /*  7.25 — для подписей мельче 14px (метки полей) */

  --sd-rule:       rgba(90, 36, 27, .34);
  --sd-rule-soft:  rgba(90, 36, 27, .18);

  /* ШРИФТЫ — ПО РОЛЯМ, А НЕ ПО ВКУСУ. Владелец 24.08.2026: «шрифт сразу
     видно, что современный компьютерный, а хочется имперским или чертёжным».
     Fira Sans/Fira Mono/Caveat — это интерфейс 2010-х, они и читались так.
       Forum            — римская капитель: величие заголовка и года;
       Old Standard TT  — набор дореволюционной печати, язык 1911 года;
       Jura             — ВСЁ, что напечатано НА чертеже: моноширинный по весу
                          штрих, узкая пропорция, наклон 15° (ГОСТ 2.304, шрифт
                          чертёжный наклонный) задаётся в SVG через skewX;
       Bad Script       — пометки на полях: рука, а не фломастер;
       Marck Script     — подпись архитектора в штампе (перо, не заметка).
     Отобраны отрисовкой кириллических образцов, а не по названиям. */
  --sd-display: "Forum", Georgia, serif;
  --sd-text:    "Old Standard TT", Georgia, serif;
  --sd-draft:   "Jura", "PT Sans Narrow", system-ui, sans-serif;
  --sd-hand:    "Bad Script", cursive;
  --sd-sign:    "Marck Script", cursive;

  --sd-gutter: clamp(18px, 3.4vw, 54px);
  /* Лист тянется по ШИРИНЕ экрана, а не по высоте: при 112svh дом читался
     мелким (владелец 26.08.2026 — «кадр должен быть иммерсивным»). Верх и низ
     листа при этом уходят за край, и обрезается только пустая бумага: фартук
     чертежа для этого подтянут вверх (scripts/facade-elevation.py). */
  /* Потолок 152svh — не на глаз: обрезка с каждой стороны равна (H−V)/2, а
     безопасно обрезается только пустая бумага, 130 px листа снизу (ниже штампа)
     и столько же сверху (выше конька). Отсюда W ≤ 1,54·V. На 160svh штамп на
     экране 1920×1080 обрезался на две строки. */
  --sd-sheet-w: min(94vw, 152svh);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: #E9E4DA; color: var(--sd-ink);
  /* Трекинг у серифа держится в нуле: засечки соседних букв сталкиваются. */
  font-family: var(--sd-text); font-size: 18px; line-height: 1.62;
  letter-spacing: 0;
}

/* ─── сцена и лист ──────────────────────────────────────────────────── */

.sd-scene { position: relative; width: 100%; height: 100svh; overflow: hidden; background: #E9E4DA; }

/* Лист центрируется отрицательными полями, а НЕ transform: transform
   принадлежит GSAP, и translate тут затёрся бы масштабом. */
.sd-sheet {
  position: absolute; left: 50%; top: 50%;
  width: var(--sd-sheet-w);
  aspect-ratio: 2100 / 1620;
  margin-left: calc(var(--sd-sheet-w) / -2);
  margin-top: calc(var(--sd-sheet-w) / 2.5926 * -1);
  will-change: transform;
  box-shadow: 0 24px 60px rgba(60, 40, 30, .13);
}
.sd-sheet svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Окно листа: доля кадра в координатах чертежа 2100x1620 */
.sd-house {
  position: absolute;
  left: 9.5238%; top: 9.2593%; width: 77.619%; height: 69.7531%;
  object-fit: cover; display: block;
  /* Материал наливается В КОНТУР ДОМА, а не в прямоугольное окно: силуэт
     задан теми же числами, что и чертёж, поэтому кромка совпадает с линией. */
  clip-path: polygon(3.20% 11.44%, 44.92% 11.44%, 44.92% 9.01%, 49.69% 9.01%, 57.42% 4.06%, 65.04% 9.01%, 67.97% 9.01%, 67.97% 11.44%, 96.68% 11.44%, 96.68% 97.46%, 3.20% 97.46%);
  /* Материал проявляется СНИЗУ ВВЕРХ. Без JS --sd-fill остаётся 100%. */
  -webkit-mask-image: linear-gradient(to top, #000 var(--sd-fill, 100%), rgba(0,0,0,0) calc(var(--sd-fill, 100%) + 7%));
  mask-image: linear-gradient(to top, #000 var(--sd-fill, 100%), rgba(0,0,0,0) calc(var(--sd-fill, 100%) + 7%));
}

.sd-waterline {
  position: absolute; left: 9.5238%; top: 9.2593%; width: 77.619%; height: 69.7531%;
  pointer-events: none; opacity: 0;
  border-bottom: 1px solid rgba(90, 36, 27, .5);
  background: linear-gradient(to top, rgba(90,36,27,.09) 0, rgba(90,36,27,0) 12%);
}

/* ─── стили чертежа (классы задаёт scripts/facade-elevation.py) ─────── */

.frame { fill: none; stroke: rgba(90, 36, 27, .5); stroke-width: 2; }
.sd-draw .thick { fill: none; stroke: var(--sd-brick); stroke-width: 3.4; stroke-linecap: square; }
.sd-draw .thin  { fill: none; stroke: var(--sd-brick); stroke-width: 1.5; }
.sd-draw .sash  { fill: none; stroke: rgba(90, 36, 27, .62); stroke-width: 1; }
.sd-draw .hatch { fill: none; stroke: rgba(90, 36, 27, .5);  stroke-width: 1; }
.sd-draw .axis  { fill: none; stroke: rgba(90, 36, 27, .5);  stroke-width: 1.2; stroke-dasharray: 30 9 5 9; }
.sd-draw .axis-mark { fill: var(--sd-paper); stroke: var(--sd-brick); stroke-width: 1.6; }
.sd-draw .dim   { fill: none; stroke: var(--sd-brick); stroke-width: 1.3; }
/* Напечатанное на чертеже — шрифтом чертёжным. Наклон даёт SVG (skewX),
   а не искусственный italic: у Jura курсива нет вовсе, и браузер подделал бы
   его тем же скосом, только без контроля над углом. */
.draft, .draft-mark {
  font-family: var(--sd-draft); font-weight: 500; font-size: 30px;
  fill: var(--sd-brick); letter-spacing: .1em; text-transform: uppercase;
}
.draft-mark { font-size: 30px; letter-spacing: .04em; }
.hand-note { font-family: var(--sd-hand); font-size: 40px; fill: rgba(90, 36, 27, .88); }
.stamp-k {
  font-family: var(--sd-draft); font-size: 19px; fill: var(--sd-muted);
  letter-spacing: .16em; text-transform: uppercase;
}
.stamp-v {
  font-family: var(--sd-draft); font-weight: 500; font-size: 27px;
  fill: var(--sd-ink); letter-spacing: .05em;
}
.stamp-sign { font-family: var(--sd-sign); font-size: 40px; fill: var(--sd-ink); }

/* ─── карточка: копия живёт на бумаге, а не на фотографии ───────────── */

.sd-card {
  position: absolute; z-index: 6;
  left: var(--sd-gutter); bottom: var(--sd-gutter);
  width: min(520px, 40vw);
  padding: clamp(20px, 1.8vw, 30px) clamp(22px, 2vw, 34px) clamp(22px, 2vw, 32px);
  background: var(--sd-paper); border: 1px solid var(--sd-rule);
  box-shadow: 0 18px 44px rgba(60, 40, 30, .14);
}
.sd-card__kicker {
  margin: 0 0 12px; font-family: var(--sd-draft); font-weight: 600;
  font-size: clamp(11px, .78vw, 13px); letter-spacing: .2em;
  text-transform: uppercase; color: var(--sd-brick);
}
.sd-card__h {
  margin: 0; font-family: var(--sd-display); font-weight: 400;
  font-size: clamp(27px, 2.7vw, 41px); line-height: 1.14;
  letter-spacing: .012em; color: var(--sd-ink);
}
.sd-card__h span { display: block; }
.sd-card__sub { margin: 14px 0 0; font-size: clamp(14px, .95vw, 16px); line-height: 1.55; color: #3A342E; }
.sd-card__rule { margin: 16px 0 0; height: 1px; background: var(--sd-rule-soft); }
.sd-card__meta {
  display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 14px 0 0;
  font-family: var(--sd-draft); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.sd-card__meta dt { color: var(--sd-muted); margin: 0; }
.sd-card__meta dd { color: var(--sd-ink); margin: 0; }

.sd-cue {
  position: absolute; z-index: 7; left: 50%; bottom: calc(var(--sd-gutter) - 4px);
  transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  font-family: var(--sd-draft); font-size: 11.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sd-muted);
}
.sd-cue i { display: block; width: 42px; height: 1px; background: currentColor; opacity: .55; }

/* ─── дальше по странице ────────────────────────────────────────────── */

.sd-after { padding: clamp(70px, 12vh, 150px) var(--sd-gutter) clamp(90px, 16vh, 190px); max-width: 780px; }
.sd-after__k {
  margin: 0 0 16px; font-family: var(--sd-draft); font-weight: 600; font-size: 13px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sd-brick);
}
.sd-after h2 {
  margin: 0 0 22px; font-family: var(--sd-display); font-weight: 400;
  font-size: clamp(29px, 3.3vw, 45px); line-height: 1.16; letter-spacing: .012em;
}
.sd-after p { margin: 0 0 16px; color: #2A2521; }
.sd-after p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  :root { --sd-sheet-w: 100vw; }
  .sd-sheet { box-shadow: none; }
  .sd-card { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .sd-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) { .sd-waterline { display: none; } }

/* ─── акт 4 (задел): плитка «Меганома» ──────────────────────────────────
   Тот же приём, что в акте 1, но языком сегодняшнего дня: сначала лист —
   раскладка плитки линиями, потом материал наливается в те же грани.
   Ориентация плиток идёт волной (см. scripts/tile-field.py), поэтому свет
   ложится на скосы полосами — стена «дышит», как настоящая. */

.sd-tilescene { position: relative; height: 100svh; overflow: hidden; background: var(--sd-paper); }

.sd-tilewall { position: absolute; inset: 0; }
.sd-tilewall svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* линии — чертёж; гаснут по мере того, как приходит материал */
.sd-tiles__line path { fill: none; stroke: rgba(90, 36, 27, .34); stroke-width: 1.1; }

/* заливки — материал; проявляются маской снизу вверх, как в первом акте */
.sd-tiles__fill {
  -webkit-mask-image: linear-gradient(to top, #000 var(--sd-tile-fill, 100%), rgba(0,0,0,0) calc(var(--sd-tile-fill, 100%) + 8%));
  mask-image: linear-gradient(to top, #000 var(--sd-tile-fill, 100%), rgba(0,0,0,0) calc(var(--sd-tile-fill, 100%) + 8%));
}
.sd-tiles__fill path { stroke: none; }
/* ОДНА КЕРАМИКА, РАЗНЫЙ СВЕТ. Плоская половина плитки лежит в плоскости стены
   и отражает одинаково при любом повороте — у неё один тон на всё поле.
   Скошенная половина берёт тон от того, куда смотрит: свет сверху слева.
   Все четыре значения — один цвет (H 40°, S 18%), меняется только светлота;
   рисунок держится рельефом, а не цветом. */
.t-flat { fill: #EAE5DC; }
.t-lit  { fill: #FAF7F2; }
.t-mid  { fill: #DFD9CE; }
.t-dim  { fill: #CBC4B6; }

/* блик: свет идёт поперёк рельефа — именно он читается как волна */
.sd-sheen {
  position: absolute; top: -20%; bottom: -20%; width: 46%;
  left: -50%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  mix-blend-mode: soft-light;
}

/* ─── второй экран: он обязан конвертировать ────────────────────────────
   До 25.08.2026 экран плитки только показывал стену: вся надежда была на то,
   что долистают до конца страницы. Теперь слева — что это за дом и форма.
   Материал панели тот же, что у карточки первого акта: бумага поверх стены,
   поэтому контраст текста задаётся токенами, а не удачей фона. */

.sd-offer {
  position: absolute; z-index: 6;
  left: var(--sd-gutter); top: clamp(28px, 7vh, 84px);
  width: min(452px, 38vw);
  padding: clamp(22px, 1.9vw, 32px) clamp(24px, 2.1vw, 36px) clamp(24px, 2.1vw, 34px);
  background: var(--sd-paper); border: 1px solid var(--sd-rule);
  box-shadow: 0 18px 44px rgba(60, 40, 30, .14);
}
.sd-offer__k {
  margin: 0 0 12px; font-family: var(--sd-draft); font-weight: 600;
  font-size: clamp(11px, .78vw, 13px); letter-spacing: .2em;
  text-transform: uppercase; color: var(--sd-brick);
}
.sd-offer__h {
  margin: 0; font-family: var(--sd-display); font-weight: 400;
  font-size: clamp(26px, 2.5vw, 38px); line-height: 1.14;
  letter-spacing: .012em; color: var(--sd-ink);
}
.sd-offer__h span { display: block; }
.sd-offer__t {
  margin: 14px 0 0; font-size: clamp(14px, .95vw, 16px); line-height: 1.55;
  color: #3A342E;
}

.sd-form { margin: 22px 0 0; border-top: 1px solid var(--sd-rule-soft); padding-top: 18px; }
.sd-form__lead {
  margin: 0 0 14px; font-size: clamp(14px, .95vw, 16px); line-height: 1.5; color: #3A342E;
}

/* Поля — линейкой, а не коробкой: коробка с закруглением читается как форма
   из конструктора, линейка — как бланк. */
.sd-field { margin: 0 0 14px; }
.sd-field label {
  display: block; margin: 0 0 4px; font-family: var(--sd-draft);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sd-muted-s);
}
.sd-field input {
  width: 100%; padding: 7px 2px 8px; border: 0; border-bottom: 1px solid var(--sd-rule);
  background: transparent; color: var(--sd-ink);
  font-family: var(--sd-text); font-size: 17px; line-height: 1.3;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.sd-field input::placeholder { color: #A79E92; }
.sd-field input:focus { outline: none; border-bottom-color: var(--sd-brick); }
.sd-field--bad input { border-bottom-color: #A03626; }

.sd-btn {
  display: inline-block; margin: 6px 0 0; padding: 13px 26px;
  border: 1px solid var(--sd-brick); background: var(--sd-brick); color: #F6F2EA;
  font-family: var(--sd-draft); font-weight: 600; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
  border-radius: 0; transition: background .18s ease, color .18s ease;
}
.sd-btn:hover { background: transparent; color: var(--sd-brick); }
.sd-btn[disabled] { opacity: .55; cursor: default; }

/* Кнопка-призрак: тот же язык, что у главной кнопки, но не спорит с ней за
   внимание — она стоит в конце длинной страницы, а не в форме. */
.sd-btn--ghost { background: transparent; color: var(--sd-brick); }
.sd-btn--ghost:hover { background: var(--sd-brick); color: #F6F2EA; }
.sd-after__cta { margin: 26px 0 0; }

.sd-form__note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--sd-muted-s); }
.sd-form__msg { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: #8E2F20; }
.sd-form__done {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--sd-rule-soft);
  font-size: clamp(15px, 1vw, 17px); line-height: 1.5; color: var(--sd-ink);
}

.sd-card--tiles { left: auto; right: var(--sd-gutter); bottom: var(--sd-gutter); }

@media (max-width: 860px) {
  /* На телефоне экран плитки перестаёт быть «одним кадром»: панель и карточка
     встают в поток, стена остаётся фоном. Иначе форма уезжает под карточку. */
  .sd-tilescene { height: auto; min-height: 100svh; padding: 76px 12px 16px; }
  /* Размер плитки на телефоне НЕ регулируется шириной svg: при slice масштаб
     берёт максимум из отношений по ширине и высоте, а высоту здесь задаёт
     экран — 44 px поля превращаются в 40 css-px и без всяких правок (замерено).
     Мельче плитку даст только более частое поле (--cols/--rows), то есть
     второй файл под портрет. Пока не нужно. */
  .sd-offer, .sd-card--tiles {
    position: static; width: auto; left: auto; right: auto; top: auto; bottom: auto;
  }
  .sd-offer { margin: 0 0 12px; }
}

/* ─── подвал ────────────────────────────────────────────────────────────
   Фон страницы #E9E4DA темнее бумаги, поэтому мелкий текст здесь стоит
   только на --sd-muted-s (6.57 к земле страницы). --sd-muted на этом фоне
   даёт 4.40 и AA не проходит — см. предупреждение у токенов. */
.sd-foot {
  border-top: 1px solid var(--sd-rule-soft);
  padding: clamp(38px, 6vh, 66px) var(--sd-gutter) clamp(30px, 5vh, 52px);
  background: #E9E4DA;
}
.sd-foot__in {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 64px);
  justify-content: space-between; align-items: flex-start;
}
.sd-foot__name {
  margin: 0 0 10px; font-family: var(--sd-display);
  font-size: clamp(20px, 1.8vw, 27px); letter-spacing: .012em; color: var(--sd-ink);
}
.sd-foot__addr, .sd-foot__links p {
  margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: var(--sd-muted-s);
}
.sd-foot__links { text-align: right; }
.sd-foot a { color: var(--sd-brick); text-decoration: underline; text-underline-offset: 2px; }
.sd-foot__legal {
  margin: clamp(26px, 4vh, 42px) 0 0;
  padding-top: 18px; border-top: 1px solid var(--sd-rule-soft);
  font-family: var(--sd-draft); font-size: 13px; line-height: 1.6;
  color: var(--sd-muted-s);
}
@media (max-width: 700px) {
  .sd-foot__in { flex-direction: column; gap: 22px; }
  .sd-foot__links { text-align: left; }
}

/* ─── служебная страница (политика) ─────────────────────────────────── */
.sd-page-legal { background: #E9E4DA; }
.sd-legal {
  max-width: 74ch; margin: 0 auto;
  padding: clamp(34px, 7vh, 76px) var(--sd-gutter) clamp(40px, 8vh, 84px);
}
.sd-legal__back {
  margin: 0 0 clamp(24px, 4vh, 44px);
  font-family: var(--sd-draft); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase;
}
.sd-legal__back a { color: var(--sd-brick); text-decoration: none; }
.sd-legal__back a:hover { text-decoration: underline; }
.sd-legal h1 {
  margin: 0 0 clamp(18px, 3vh, 30px); font-family: var(--sd-display);
  font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12;
  letter-spacing: .012em; color: var(--sd-ink);
}
.sd-legal h2 {
  margin: clamp(28px, 4vh, 40px) 0 .5em; font-family: var(--sd-display);
  font-weight: 400; font-size: clamp(19px, 1.8vw, 24px); color: var(--sd-ink);
}
.sd-legal p { margin: 0 0 1em; color: #3A342E; }   /* 9.69 к #E9E4DA — AA */
.sd-legal a { color: var(--sd-brick); text-decoration: underline; text-underline-offset: 2px; }
.sd-legal__note {
  margin-top: clamp(28px, 4vh, 40px); padding-top: 16px;
  border-top: 1px solid var(--sd-rule-soft); color: var(--sd-muted-s);
}

/* Ссылка на политику в сноске формы. Без своего правила браузер красит её
   дефолтным синим — единственное чужое пятно на всей странице. */
.sd-form__note a {
  color: var(--sd-brick);            /* 10.75 на бумаге — AA */
  text-decoration: underline; text-underline-offset: 2px;
}