/* Акт 4c — стена в материале. Выход из экрана плитки.

   ЗЕМЛЯ ТА ЖЕ, ЧТО У 4a, И АРИФМЕТИКА ТА ЖЕ. Секция лежит на #E9E4DA, а
   токены scene.css посчитаны к бумаге #F2EFE9. Пересчёт (sRGB, WCAG 2.1):

       на #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 (6.57). Новых цветов не заведено ни одного.

   Скрытых состояний в этом файле нет: без JS секция видна целиком, кадры
   стоят в масштабе 1. Прячет и двигает только js/act4c.js. */

.sd-a4c {
  position: relative;
  background: #E9E4DA;
  /* Нижнее поле подрезано 26.08.2026 вместе с удалением вечернего кадра:
     он повторял геро, а без него между актами оставалась полоса пустоты в
     четверть экрана. */
  padding: clamp(64px, 11vh, 132px) var(--sd-gutter) clamp(44px, 7vh, 86px);
}
.sd-a4c__wrap { max-width: 1180px; margin: 0 auto; }

.sd-a4c__head { max-width: 660px; margin: 0 0 clamp(34px, 5vh, 62px); }
.sd-a4c__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-a4c__h {
  margin: 0; font-family: var(--sd-display); font-weight: 400;
  font-size: clamp(29px, 3.3vw, 45px); line-height: 1.16;
  letter-spacing: .012em; color: var(--sd-ink);         /* 13.49 */
}
.sd-a4c__h span { display: block; }
.sd-a4c__t {
  margin: 18px 0 0; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.6;
  color: #2A2521;                                       /* 11.97 */
}

/* ─── кадры ─────────────────────────────────────────────────────────── */

.sd-a4c__fig { margin: 0; }
/* Рамка режет только то, что вылезло за неё при масштабе >1. Масштаб идёт
   ТОЛЬКО вверх от единицы, поэтому щели по краям невозможны в принципе —
   в отличие от параллакса сдвигом, где кадр надо заранее переразмерить. */
.sd-a4c__frame { overflow: hidden; background: #DCD6CB; }
.sd-a4c__frame img { display: block; width: 100%; height: auto; }

.sd-a4c__cap {
  margin: 14px 0 0; font-family: var(--sd-draft); font-size: 12.5px;
  line-height: 1.5; letter-spacing: .05em;
  color: var(--sd-muted-s);                             /* 6.57 на земле */
}
/* Пометка «проектная визуализация» — не оговорка, а условие честности приёма:
   дом не построен. Снимать её нельзя.
   Своей строкой, а НЕ через inline-разделитель: при переносе разделитель
   оказывался в начале строки висящей линейкой без текста слева. Метка-засечка
   рисуется псевдоэлементом и переносится вместе с меткой. */
.sd-a4c__src {
  display: block; margin-top: 6px;
  letter-spacing: .16em; text-transform: uppercase; font-size: 11px;
}
.sd-a4c__src::before {
  content: ""; display: inline-block; width: 16px; height: 1px;
  margin: 0 9px 3px 0; background: var(--sd-rule); vertical-align: middle;
}

.sd-a4c__fig--band { max-width: 1140px; margin: 0 auto; }
.sd-a4c__fig--wide { margin-top: clamp(34px, 5vh, 62px); }

/* ─── пара: кадр слева, врезка справа ───────────────────────────────── */

/* Кадр слева, врезка справа. Правая колонка стоит ПО СЕРЕДИНЕ кадра, а не
   тянется на его высоту: карточка на 250 px рядом с кадром на 600 растянутой
   колонкой оставляла 330 px пустоты посередине, и это читалось как незакрытая
   вёрстка, а не как воздух. По центру воздух распределён поровну сверху и
   снизу — приём, а не дыра. */
.sd-a4c__pair {
  display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 54px); align-items: start;
  margin-top: clamp(34px, 5vh, 62px);
}
.sd-a4c__side { align-self: center; }
.sd-a4c__ask { padding-top: clamp(24px, 3vh, 38px); }
.sd-a4c__side { align-self: start; }
.sd-a4c__note {
  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, .13);
}
.sd-a4c__nt {
  margin: 0; font-size: clamp(14px, .95vw, 16px); line-height: 1.55;
  color: #3A342E;                                       /* 10.70 на бумаге */
}
.sd-a4c__meta {
  display: grid; grid-template-columns: auto 1fr; gap: 5px 14px;
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--sd-rule-soft);
  font-family: var(--sd-draft); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
}
.sd-a4c__meta dt { margin: 0; color: var(--sd-muted-s); }
.sd-a4c__meta dd { margin: 0; color: var(--sd-ink); }

/* ─── призыв уходит якорем: второй формы на странице нет ────────────── */

.sd-a4c__tt {
  margin: 0 0 16px; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.5;
  color: #2A2521;                                       /* 11.97 */
}
/* Кнопка нарочно контурная: настоящая отправка на странице одна, и заливкой
   кирпича помечена именно она. Этот — переход к ней. */
.sd-a4c__cta {
  display: inline-block; padding: 13px 26px;
  border: 1px solid var(--sd-brick); background: transparent;
  color: var(--sd-brick);                               /* 9.73 на земле */
  font-family: var(--sd-draft); font-weight: 600; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.sd-a4c__cta:hover, .sd-a4c__cta:focus-visible {
  background: var(--sd-brick); color: #F6F2EA;          /* 11.04 */
}

@media (max-width: 860px) {
  .sd-a4c { padding: 52px 12px 56px; }
  .sd-a4c__head { margin-bottom: 26px; }
  .sd-a4c__pair { grid-template-columns: 1fr; }
  .sd-a4c__ask { padding-top: 26px; }
}