/* Акт 6 — «Где это». Хамовники: схема района, ведомость замера, соседство.

   ЦВЕТА НОВЫЕ НЕ ЗАВОДЯТСЯ. Всё, что несёт текст, взято из токенов сцены и
   стоит на бумаге: --sd-ink 14.90, --sd-brick 10.75, --sd-muted 4.86 (не
   мельче 14px), --sd-muted-s 7.25 (для подписей мельче 14px). Единственное
   место, где фон не бумага, — подписи поверх схемы: там под текстом лежит
   почти непрозрачная бумажная плашка (.92), поэтому фон подписи не зависит
   от того, что под ней на карте. Проверено по пикселям снимка, см. отчёт.

   СКРЫТЫХ СОСТОЯНИЙ ЗДЕСЬ НЕТ: ни одного opacity: 0, ни одного transform,
   уводящего блок из кадра. Прячет только js/act6.js — без него секция видна
   целиком.

   КАДРЫ. Схема — реальный тайл OSM, стилизованный, без текста внутри
   картинки. Трио окружения — Wikimedia Commons по конкретным адресам,
   приводка только тональная. Сборка: scripts/stendal-a6-images.py
   (кроп 4:5, ширины 640/1000; схема 640/1024 — апскейла нет, источник 1024). */

.sd-a6 {
  position: relative;
  background: var(--sd-paper);
  padding: clamp(64px, 11vh, 132px) var(--sd-gutter) clamp(72px, 12vh, 140px);
}

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

.sd-a6__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-a6__head { max-width: 760px; }
.sd-a6__h {
  margin: 0; font-family: var(--sd-display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 47px); line-height: 1.14;
  letter-spacing: .012em; color: var(--sd-ink);
}
.sd-a6__h span { display: block; }
.sd-a6__h3 {
  margin: 0 0 22px; font-family: var(--sd-display); font-weight: 400;
  font-size: clamp(22px, 1.9vw, 29px); line-height: 1.2;
  letter-spacing: .012em; color: var(--sd-ink);
}
.sd-a6__lead {
  margin: 20px 0 0; max-width: 62ch;
  font-size: clamp(15px, 1.05vw, 18px); line-height: 1.62; color: #2A2521;
}

/* ─── схема + ведомость ──────────────────────────────────────────────── */

.sd-a6__plan {
  display: grid; gap: clamp(30px, 3.6vw, 64px);
  align-items: start; margin: clamp(38px, 5vh, 70px) 0 0;
}
@media (min-width: 861px) {
  /* Колонки НЕ равные: схема квадратная и потому высокая, а текст рядом
     кончается раньше. Ровные половины оставляли под ведомостью 300 px пустоты
     — видно на снимке как провал перед «Что вокруг». */
  .sd-a6__plan { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}

.sd-a6__map { margin: 0; }
.sd-a6__frame {
  position: relative; aspect-ratio: 1 / 1;
  border: 1px solid var(--sd-rule); background: #E6E0D4;
}
.sd-a6__tile { display: block; width: 100%; height: 100%; object-fit: cover; }

/* лучи замера: прямая от дома до станции — то самое расстояние «по прямой»,
   которое стоит в ведомости. Пунктир и вычерчивание ставит JS. */
.sd-a6__rays { position: absolute; inset: 0; width: 100%; height: 100%; }
.sd-a6__rays line {
  fill: none; stroke: var(--sd-brick); stroke-width: .24; stroke-linecap: butt;
}

/* Точка стоит РОВНО на координате: сам .sd-a6__pin нулевого размера, а метка
   отодвигается от него абсолютом. Если центрировать по метке (как проще), пин
   уезжает на полширины подписи — на схеме это десятки метров. */
.sd-a6__pin, .sd-a6__here { position: absolute; width: 0; height: 0; }
.sd-a6__pin i, .sd-a6__here i {
  position: absolute; left: 0; top: 0; border-radius: 50%;
}
.sd-a6__pin i {
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  background: var(--sd-brick); box-shadow: 0 0 0 2px rgba(242, 239, 233, .85);
}
.sd-a6__pin--street i {
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  background: var(--sd-muted-s);
}
.sd-a6__pin b {
  position: absolute; left: 10px; top: 0; transform: translateY(-50%);
  white-space: nowrap; font-family: var(--sd-draft); font-weight: 600;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sd-ink); background: rgba(242, 239, 233, .92);
  padding: 2px 5px;
}
.sd-a6__pin--l b { left: auto; right: 10px; }
.sd-a6__pin--street b {
  font-weight: 500; color: var(--sd-muted-s); background: rgba(242, 239, 233, .84);
}
.sd-a6__pin em { font-style: normal; font-weight: 500; color: var(--sd-brick); }

.sd-a6__here i {
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  background: var(--sd-brick); border: 2.5px solid var(--sd-paper);
  box-shadow: 0 0 0 1px var(--sd-rule);
}
.sd-a6__here b {
  position: absolute; left: 0; bottom: 13px; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--sd-draft); font-weight: 600;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sd-paper); background: var(--sd-brick); padding: 3px 8px;
}

/* число «по прямой» лежит на самом луче — это подпись размера, а не ярлык */
.sd-a6__len {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--sd-draft); font-weight: 500; font-size: 11px;
  letter-spacing: .08em; color: var(--sd-brick);
  background: rgba(242, 239, 233, .92); padding: 1px 4px; white-space: nowrap;
}

.sd-a6__north {
  position: absolute; right: 12px; top: 12px;
  display: flex; align-items: center; gap: 5px;
  font-family: var(--sd-draft); font-weight: 600; font-size: 11px;
  letter-spacing: .16em; color: var(--sd-ink);
  background: rgba(242, 239, 233, .92); padding: 3px 7px;
}
.sd-a6__north i {
  display: block; width: 0; height: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-bottom: 11px solid var(--sd-brick);
}

/* Масштабная линейка: 200 м = 7,262 % ширины кадра (z15/1024 px, широта
   55,742° → 2,689 м/px). Внутренняя ширина держится процентом, поля добавлены
   поверх через calc — box-sizing: border-box иначе съел бы их из масштаба. */
.sd-a6__scale {
  position: absolute; left: 3.2%; bottom: 3.4%;
  width: calc(7.262% + 12px); padding: 4px 6px 3px;
  text-align: center; background: rgba(242, 239, 233, .92);
  font-family: var(--sd-draft); font-weight: 500; font-size: 10.5px;
  letter-spacing: .08em; color: var(--sd-muted-s); line-height: 1.1;
}
.sd-a6__scale i {
  display: block; height: 7px; margin: 0 0 3px;
  border: 1.5px solid var(--sd-brick); border-top: 0;
}

.sd-a6__strip {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px;
  margin: 10px 0 0; font-family: var(--sd-draft); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sd-muted-s);
}

/* ─── ведомость замера ───────────────────────────────────────────────── */

.sd-a6__table { margin: 0; border-top: 1px solid var(--sd-rule); }
.sd-a6__tr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 4px 18px; align-items: baseline;
  padding: 15px 0 14px; border-bottom: 1px solid var(--sd-rule-soft);
}
.sd-a6__tr--head {
  padding: 9px 0 8px; border-bottom: 1px solid var(--sd-rule);
  font-family: var(--sd-draft); font-weight: 600; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sd-muted-s);
}
.sd-a6__tr span {
  font-family: var(--sd-draft); font-size: 14px; letter-spacing: .06em;
  color: var(--sd-ink); text-align: right;
}
/* Специфичность здесь несущая: селектор колонок выше — `.sd-a6__tr span`
   (0,1,1), и голый `.sd-a6__st` (0,1,0) ему проигрывает. Первая сборка из-за
   этого гнала название станции в правый край и чертёжным шрифтом. */
.sd-a6__tr--head span:first-child { text-align: left; }
.sd-a6__tr .sd-a6__st {
  text-align: left; font-family: var(--sd-text);
  font-size: clamp(17px, 1.3vw, 20px); letter-spacing: 0; color: var(--sd-ink);
}
.sd-a6__tr .sd-a6__min { color: var(--sd-brick); font-weight: 600; }
.sd-a6__tr em { display: none; }

/* ─── легенда схемы ──────────────────────────────────────────────────── */

.sd-a6__legend {
  display: grid; grid-template-columns: 16px auto; gap: 9px 12px;
  align-items: center; margin: 22px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--sd-rule-soft);
}
.sd-a6__legend dt { margin: 0; display: flex; align-items: center; justify-content: center; }
.sd-a6__legend dd {
  margin: 0; font-family: var(--sd-draft); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sd-muted-s);
}
.sd-a6__lg { display: block; }
.sd-a6__lg--metro { width: 7px; height: 7px; border-radius: 50%; background: var(--sd-brick); }
.sd-a6__lg--street { width: 5px; height: 5px; border-radius: 50%; background: var(--sd-muted-s); }
.sd-a6__lg--ray { width: 16px; height: 0; border-top: 1.5px solid var(--sd-brick); }
.sd-a6__lg--here {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--sd-brick); border: 2.5px solid var(--sd-paper);
  box-shadow: 0 0 0 1px var(--sd-rule);
}

.sd-a6__note {
  margin: 20px 0 0; max-width: 54ch;
  font-size: 14.5px; line-height: 1.58; color: var(--sd-muted-s);
}

/* ─── что вокруг ─────────────────────────────────────────────────────── */

.sd-a6__around { margin: clamp(52px, 8vh, 104px) 0 0; }
.sd-a6__trio {
  display: grid; gap: clamp(20px, 2.4vw, 38px); margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 861px) { .sd-a6__trio { grid-template-columns: repeat(3, 1fr); } }
.sd-a6__trio figure { margin: 0; }
.sd-a6__trio img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--sd-rule-soft);
}
.sd-a6__trio figcaption {
  margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: #3A342E;
}
.sd-a6__place {
  display: block; margin: 0 0 6px; font-family: var(--sd-draft);
  font-weight: 600; font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sd-brick);
}
.sd-a6__credit {
  margin: clamp(22px, 3vh, 34px) 0 0; padding-top: 14px;
  border-top: 1px solid var(--sd-rule-soft);
  font-family: var(--sd-draft); font-size: 11.5px; line-height: 1.6;
  letter-spacing: .06em; color: var(--sd-muted-s);
}

/* ─── призыв: ссылка на форму выше, второй формы на странице нет ─────── */

.sd-a6__cta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 22px; margin: clamp(44px, 7vh, 88px) 0 0;
  padding-top: clamp(26px, 4vh, 44px); border-top: 1px solid var(--sd-rule);
}
.sd-a6__cta .sd-btn { margin: 0; text-decoration: none; }
.sd-a6__cta span { font-size: 15px; line-height: 1.5; color: var(--sd-muted-s); }

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

@media (max-width: 860px) {
  /* Схема на 390 px — это 2,7 км в 356 px. Уличные подписи и числа на лучах
     туда не влезают без наложений (замерено: «1006 м» уходило прямо под
     плашку дома, «754 м» упиралось в «Кропоткинскую»). Станции и сами лучи —
     суть блока, они остаются, а метры стоят в ведомости строкой ниже.
     Легенда чистится ТЕМ ЖЕ правилом: строка про ориентиры без ориентиров на
     схеме — обещание того, чего на экране нет. */
  .sd-a6__pin--street, .sd-a6__len, .sd-a6__lg-street { display: none; }
  .sd-a6__pin b { font-size: 10px; letter-spacing: .06em; padding: 1px 4px; }
  .sd-a6__here b { font-size: 10px; letter-spacing: .08em; padding: 2px 6px; }
  .sd-a6__north { right: 8px; top: 8px; font-size: 10px; padding: 2px 5px; }
  .sd-a6__scale { font-size: 9.5px; }

  /* Ведомость складывается в карточки: четыре колонки на 390 px превращают
     «≈1018 м» в перенос посреди числа. */
  .sd-a6__tr--head { display: none; }
  .sd-a6__table { border-top: 1px solid var(--sd-rule); }
  .sd-a6__tr { grid-template-columns: 1fr; gap: 0; padding: 16px 0 15px; }
  .sd-a6__st { margin: 0 0 9px; }
  .sd-a6__tr span:not(.sd-a6__st) {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 3px 0; text-align: right;
  }
  .sd-a6__tr em {
    display: block; font-style: normal; font-family: var(--sd-draft);
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--sd-muted-s);
  }
}

/* Паспорт места в правой половине шапки. Сетка шапки на десктопе двухколонная:
   проза слева, паспорт справа — иначе правая половина первого экрана пуста. */
.sd-a6__card {
  display: grid; grid-template-columns: 118px 1fr; gap: 9px 20px;
  margin: 0; align-self: end; width: 100%; max-width: 460px;
  padding: 18px 22px 20px; background: var(--sd-paper);
  border: 1px solid var(--sd-rule);
}
.sd-a6__card dt {
  margin: 0; font-family: var(--sd-draft); font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sd-muted-s);
}
.sd-a6__card dd { margin: 0; font-size: 15px; line-height: 1.35; color: var(--sd-ink); }
@media (min-width: 861px) {
  /* Шапка акта у себя ограничена 760 px (колонка прозы). Для паспорта нужна
     вся ширина контента, иначе он делит эти 760 пополам и переносит каждую
     строку — замерено: 268 px на значения. */
  .sd-a6__head { max-width: none; display: grid; grid-template-columns: minmax(0, 760px) 1fr;
                 column-gap: clamp(28px, 4vw, 72px); align-items: start; }
  .sd-a6__k, .sd-a6__h, .sd-a6__lead { grid-column: 1; }
  .sd-a6__card { grid-column: 2; grid-row: 2 / span 2; justify-self: end; }
}
@media (max-width: 860px) { .sd-a6__card { margin-top: 20px; } }