/* ═══ АКТ 3 — «Что с ним стало» ═══════════════════════════════════════════
   Единственный документальный слой сайта: не рендеры, а фотографии, снятые
   чужими людьми в 2012, 2016 и 1913 годах. Отсюда язык — не рекламный разворот,
   а лист обследования: паспарту, экспликация с номерами, размерная цепочка.

   РИФМА С ПЕРВЫМ АКТОМ — ОБРАТНАЯ, А НЕ ПОВТОРНАЯ. Там чертёж наливался
   материалом и становился домом. Здесь по дому проводят выноски — материал
   снова становится чертежом, потому что перед реставрацией здание обмеряют.
   Приём налива сюда не перенесён намеренно: второй раз он читается как шаблон.

   КОНТРАСТ ПОСЧИТАН, А НЕ ПРИКИНУТ (check-rendered-contrast.py + прямой расчёт
   по WCAG). Здесь ДВА фона, и это важно:
     фон секции  #E9E4DA   ink 13.49 · brick 9.73 · muted-s 6.57 · muted 4.40
     бумага      #F2EFE9   ink 14.90 · brick 10.75 · muted-s 7.25 · muted 4.86
   --sd-muted на фоне секции даёт 4.40 и AA НЕ проходит — поэтому весь мелкий
   текст на фоне секции идёт --sd-muted-s, а --sd-muted здесь не используется
   вовсе. Молча взять токен, посчитанный для бумаги, и положить его на более
   тёмный фон — ровно тот способ ошибиться, ради которого правило написано. */

.sd-a3 {
  position: relative;
  background: #E9E4DA;
  padding: clamp(64px, 11vh, 132px) var(--sd-gutter) clamp(56px, 9vh, 112px);
}
.sd-a3__in { max-width: 1400px; margin: 0 auto; }

/* ─── шапка ───────────────────────────────────────────────────────────── */

.sd-a3__head { max-width: 760px; }
.sd-a3__k {
  margin: 0 0 14px; font-family: var(--sd-draft); font-weight: 600;
  font-size: clamp(11px, .78vw, 13px); letter-spacing: .2em;
  text-transform: uppercase; color: var(--sd-brick);   /* 9.73 на фоне секции */
}
.sd-a3__h {
  margin: 0; font-family: var(--sd-display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 52px); line-height: 1.1;
  letter-spacing: .012em; color: var(--sd-ink);        /* 13.49 */
}
.sd-a3__h span { display: block; }
.sd-a3__lead {
  margin: 22px 0 0; max-width: 63ch;
  font-size: clamp(15px, 1.06vw, 18px); line-height: 1.62; color: #2A2521; /* 11.97 */
}

/* ─── размерная цепочка: та же мебель, что на листе 1911 года ─────────────
   Метки стоят ПРОПОРЦИОНАЛЬНО годам (1911…сейчас = 115 лет), а не через
   равные промежутки. Поэтому видно главное: почти вся длина цепочки — пустой
   промежуток между 1913 и 2012, из которого у нас нет ни одного кадра.
   Наверху линии стоят только КРАЯ отрезка (1911 и «сейчас»), внизу — годы
   съёмок. Это не симметрия ради симметрии: подпись «проект бюро „Меганом“»
   у правого края тянется назад на полтораста пикселей и первым же снимком
   наехала на «2012», стоявший сверху.
   На телефоне цепочка снята: 1911 и 1913 отстоят на 1,74 % — при ширине
   366 px это 6 px, подписи налезают друг на друга и врут. Годы при этом никуда
   не деваются — они стоят в подписи каждой плиты. */

.sd-a3-rail { position: relative; height: 92px; margin: clamp(38px, 5vh, 62px) 0 clamp(30px, 4vh, 50px); }
.sd-a3-rail__line { position: absolute; left: 0; right: 0; top: 46px; height: 1px; }
.sd-a3-rail__line i { display: block; height: 1px; background: var(--sd-rule); transform-origin: 0 50%; }
.sd-a3-rail__t { position: absolute; left: var(--p); top: 0; width: 0; height: 92px; }
/* засечка по ГОСТ 2.307 — короткий штрих под 45°, а не стрелка */
.sd-a3-rail__t::before {
  content: ""; position: absolute; left: 0; top: 46px; width: 13px; height: 1px;
  background: var(--sd-brick); transform: translate(-50%, -50%) rotate(-45deg);
}
.sd-a3-rail__in { position: absolute; left: 0; bottom: 52px; transform: translateX(-50%); white-space: nowrap; text-align: center; }
.sd-a3-rail__t--down .sd-a3-rail__in { bottom: auto; top: 52px; }
.sd-a3-rail__t--first .sd-a3-rail__in { transform: none; text-align: left; }
.sd-a3-rail__t--last .sd-a3-rail__in { transform: translateX(-100%); text-align: right; }
/* Провал в середине цепочки — не декор, а содержание: подписать его надо
   словами, иначе читается как «дизайнер оставил пусто». Центр промежутка
   между 1913 (1,74 %) и 2012 (87,83 %) — 44,8 %. */
.sd-a3-rail__gap {
  position: absolute; left: 44.8%; bottom: 52px; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--sd-draft); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sd-muted-s);                                          /* 6.57 на фоне секции */
}
.sd-a3-rail__in b {
  display: block; font-family: var(--sd-draft); font-weight: 600;
  font-size: 14px; letter-spacing: .14em; color: var(--sd-brick);   /* 9.73 */
}
.sd-a3-rail__in em {
  display: block; margin-top: 4px; font-family: var(--sd-draft); font-style: normal;
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sd-muted-s);                                          /* 6.57 */
}

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

.sd-a3-plate {
  margin: 0; background: var(--sd-paper);
  border: 1px solid var(--sd-rule-soft);
  padding: clamp(10px, .9vw, 16px);
  box-shadow: 0 14px 34px rgba(60, 40, 30, .10);
}
.sd-a3-frame {
  position: relative; aspect-ratio: var(--ar);
  background: #DCD6CA; border: 1px solid var(--sd-rule-soft); overflow: hidden;
}
.sd-a3-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sd-a3-cap { margin: 0; padding: clamp(12px, 1vw, 17px) 2px 2px; }
.sd-a3-cap__t {
  margin: 0; font-family: var(--sd-draft); font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sd-muted-s);                                          /* 7.25 на бумаге */
}
.sd-a3-cap__t b { font-weight: 600; letter-spacing: .16em; color: var(--sd-brick); }  /* 10.75 */
.sd-a3-note { margin: 12px 0 0; font-size: clamp(14px, .95vw, 16px); line-height: 1.56; color: #3A342E; }  /* 10.70 */
.sd-a3-credit {
  margin: 12px 0 0; font-family: var(--sd-draft); font-size: 11px;
  line-height: 1.55; letter-spacing: .05em; color: var(--sd-muted-s);  /* 7.25 */
}

/* ─── выноски на главной плите ────────────────────────────────────────────
   Номер стоит там, где его видно (небо, кровля), а на предмет указывает
   выноска — как в чертеже. Иначе подпись ложится на красный кирпич или на
   ёлку и не читается. Геометрия выносок посчитана из координат самих
   предметов на кадре (--cx/--cy — номер, --len/--ang — выноска до предмета),
   а не подобрана на глаз. Пропорция кадра 2077:831 зашита в расчёт. */

.sd-a3-marks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.sd-a3-mark { position: absolute; inset: 0; }
.sd-a3-mark__lead {
  position: absolute; left: var(--cx); top: var(--cy);
  width: var(--len); height: 1px; transform-origin: 0 50%; transform: rotate(var(--ang));
}
.sd-a3-mark__lead i { display: block; width: 100%; height: 1px; background: rgba(90, 36, 27, .78); transform-origin: 0 50%; }
.sd-a3-mark__lead b {
  position: absolute; left: 100%; top: 50%; width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px; border: 1px solid var(--sd-brick); border-radius: 50%;
}
.sd-a3-mark__n {
  position: absolute; left: var(--cx); top: var(--cy);
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: var(--sd-paper); border: 1px solid var(--sd-brick);
  color: var(--sd-brick);                                            /* 10.75 на бумаге */
  font-family: var(--sd-draft); font-weight: 600; font-size: 12.5px;
  line-height: 24px; text-align: center; letter-spacing: 0;
}

/* ─── экспликация ─────────────────────────────────────────────────────────
   Настоящий список, а не подписи, продублированные картинкой: на телефоне
   выноски сняты, а номера на кадре остаются — и читаются отсюда. */

.sd-a3-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 10px 28px; margin: 15px 0 0; padding: 15px 0 0;
  border-top: 1px solid var(--sd-rule-soft); list-style: none;
}
.sd-a3-legend__i {
  position: relative; padding-left: 31px; font-family: var(--sd-draft);
  font-size: 13px; line-height: 1.46; letter-spacing: .02em; color: #3A342E;  /* 10.70 */
}
.sd-a3-legend__n {
  position: absolute; left: 0; top: 0; width: 20px; height: 20px;
  border-radius: 50%; border: 1px solid var(--sd-rule);
  font-weight: 600; font-size: 11px; line-height: 18px; text-align: center;
  color: var(--sd-brick);                                            /* 10.75 */
}

/* ─── ряд из двух плит ────────────────────────────────────────────────────
   Пропорции подобраны так, чтобы плиты 1.3735 и 1.3123 встали в одну высоту:
   при 1.05fr / 1fr это 480 и 479 px на ширине 1332. Обрезать кадры ради
   ровного края нельзя — это документы, поэтому равняем колонками. */

.sd-a3-row {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(18px, 2.4vw, 44px); align-items: start;
  margin: clamp(26px, 3.6vh, 48px) 0 0;
}

/* ─── вывод ───────────────────────────────────────────────────────────── */

.sd-a3-card {
  position: static; left: auto; right: auto; bottom: auto;
  width: auto; max-width: 780px; margin: clamp(38px, 5.4vh, 70px) 0 0;
  padding: clamp(24px, 2.1vw, 34px) clamp(24px, 2.2vw, 38px) clamp(26px, 2.2vw, 36px);
  box-shadow: 0 14px 34px rgba(60, 40, 30, .10);
}
.sd-a3-card .sd-card__h { font-size: clamp(25px, 2.3vw, 36px); }
.sd-a3-card .sd-card__rule { margin: 18px 0 0; }
.sd-a3-card .sd-card__rule + .sd-card__sub { margin-top: 16px; }
.sd-a3-cta { margin: 22px 0 0; }
.sd-a3-link {
  display: inline-block; font-family: var(--sd-draft); font-weight: 600;
  font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sd-brick);                                            /* 10.75 на бумаге */
  text-decoration: none; padding-bottom: 4px;
  border-bottom: 1px solid var(--sd-rule); transition: border-color .18s ease;
}
.sd-a3-link::after { content: " →"; }
.sd-a3-link:hover, .sd-a3-link:focus-visible { border-bottom-color: var(--sd-brick); }

/* ─── телефон ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .sd-a3-rail { display: none; }
  .sd-a3-row { grid-template-columns: 1fr; }
  .sd-a3-mark__lead { display: none; }
  .sd-a3-mark__n { width: 21px; height: 21px; margin: -10.5px 0 0 -10.5px; font-size: 11px; line-height: 19px; }
  .sd-a3-legend { grid-template-columns: 1fr; }
  .sd-a3-card { max-width: none; }
}