/* ===== Круг 3: поверхности Codex + знак CHECK — общие для _exp-*.html =====
   Перенесено из _codex-home.html / _codex-sign.html. scheme-* остаётся
   (даёт --fg, --rule, --fg-muted), surface-* задаёт сам фон и поведение
   секции. Палитра и шрифт не расширяются. */

.surface-paper     { background: var(--color-white); color: var(--color-black); }
.surface-sand      { background: var(--color-sand); color: var(--color-black); }
.surface-graphite  { background: var(--color-graphite); color: var(--color-white); }
.surface-editorial { background: var(--color-white); color: var(--color-black); border-top: 1px solid var(--color-hairline); }
.surface-media     { background: var(--color-sand); color: var(--color-black); overflow: hidden; padding-top: clamp(4rem, 6vw, 7rem); }

/* --- Фото-полоса в край, заходит на предыдущую секцию ---
   --overlap — насколько кадр наезжает вверх. Кадр задаётся --band-photo,
   кадрирование — --band-size / --band-position. */
.surface-photo-band { --overlap: clamp(5rem, 9vw, 10rem); position: relative; isolation: isolate; padding-top: 0; }
.surface-photo-band::before {
  content: ''; display: block; position: relative; z-index: 2;
  height: clamp(18rem, 43vw, 38rem);
  transform: translateY(calc(-1 * var(--overlap))); margin-bottom: calc(-1 * var(--overlap));
  background: var(--color-graphite) var(--band-photo) var(--band-position, center) / var(--band-size, cover) no-repeat;
}
.surface-photo-band > .inner { padding-top: clamp(4rem, 7vw, 8rem); }

/* Пара кадров 50/50 вплотную, тоже с заходом на предыдущую секцию */
.surface-diptych {
  --overlap: clamp(5rem, 9vw, 10rem); position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; height: clamp(21rem, 40vw, 38rem);
  transform: translateY(calc(-1 * var(--overlap))); margin: 0 0 calc(-1 * var(--overlap)); overflow: hidden;
}
.surface-diptych img { width: 100%; height: 100%; display: block; object-fit: cover; }
.surface-photo-band > .surface-diptych + .inner { padding-top: clamp(2rem, 4vw, 4rem); }

/* Одиночный кадр между секциями, наезжает на верхнюю */
.surface-overlap { --overlap: clamp(4rem, 7vw, 8rem); position: relative; z-index: 2; margin-top: calc(-1 * var(--overlap)); }

@media (max-width: 700px) {
  .surface-photo-band::before { height: 40vh; }
  .surface-diptych { height: 34vh; min-height: 17rem; }
}

/* --- Знак CHECK: один компонент, один вес ---
   Набор из _codex-sign.html: Akt 300, трекинг −0.034em, интерлиньяж 0.9.
   Меняется только слово; CHECK стоит на месте. */
.check-sign { display: inline-flex; align-items: baseline; gap: .22em; margin: 0; font-size: var(--sign-size, 5rem);
  line-height: .9; letter-spacing: -.034em; font-weight: 300; white-space: nowrap; }
.check-sign > span { font-weight: inherit; }
.check-sign--stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }

/* Знак как архитектура: гигантский CHECK уходит за левый край, слово справа */
.check-monument { display: block; margin: 0; font-size: clamp(11rem, 31vw, 35rem); line-height: .72; letter-spacing: -.068em; font-weight: 300; }
.check-monument > span { display: block; font-weight: inherit; }
.check-monument__base { margin-left: -.07em; white-space: nowrap; }
.check-monument__word { width: max-content; min-width: 2.6ch; margin-left: clamp(24%, 49vw, 55%); line-height: .82; }
.check-kicker { padding-inline: var(--spacing-gutter); margin: 0 auto clamp(5rem, 9vw, 10rem); max-width: var(--container);
  font-size: var(--text-small); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* Рубрики под знаком: кнопки, выбранная меняет слово */
.check-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(4rem, 7vw, 8rem) 0 0; padding: 0 var(--spacing-gutter);
  list-style: none; border-block: 1px solid rgba(0,0,0,.3); }
.check-topics li + li { border-left: 1px solid rgba(0,0,0,.3); }
.check-topics button { display: block; width: 100%; min-height: 11rem; padding: 24px; border: 0; border-radius: 0; background: transparent;
  color: inherit; text-align: left; font: inherit; cursor: pointer; transition: background var(--duration-fast) var(--ease); }
.check-topics button:hover, .check-topics button:focus-visible, .check-topics button[aria-pressed="true"] { background: rgba(255,255,255,.28); }
.check-topics button:focus-visible { outline: 2px solid var(--color-black); outline-offset: -2px; }
.check-topics strong { display: block; font-size: clamp(1.2rem, 2vw, 2rem); font-weight: 300; letter-spacing: -.034em; }
.check-topics small { display: block; margin-top: 1.5rem; max-width: 28ch; font-size: .875rem; line-height: 1.35; }

@media (max-width: 700px) {
  .check-kicker { margin-bottom: 5rem; }
  .check-monument { font-size: 40vw; }
  .check-monument__base { margin-left: -.09em; }
  .check-monument__word { margin-left: 49%; }
  .check-topics { display: block; }
  .check-topics li + li { border-left: 0; border-top: 1px solid rgba(0,0,0,.3); }
  .check-topics button { min-height: 6rem; padding: 16px 12px; margin-inline: -12px; width: calc(100% + 24px); }
  .check-topics small { margin-top: .5rem; }
}

/* --- Интро кириллицей на песке, тем же лёгким весом --- */
.intro { background: var(--color-sand); color: var(--color-graphite); }
.intro p { width: min(100%, 1440px); font-size: clamp(4rem, 17vw, 19rem); line-height: .82; letter-spacing: -.065em;
  text-transform: none; text-indent: 0; font-weight: 200; text-align: left; }
.intro p span { display: block; }
.intro p span + span { text-align: right; }
@media (max-width: 700px) { .intro p { font-size: clamp(3.5rem, 17vw, 6.6rem); } }