/* ------------------------------------------------------------------
   Вариант Б: к настоящим окнам Мюслей добавлены чертежи — те самые,
   что люди видят в окне обновления и на экране «Что нового».

   Правило размещения одно, и оно же проверка при добавлении нового
   рисунка: ЧЕРТЁЖ показывает устройство, невидимое и то, чего ещё
   нет; ОКНО показывает то, что человек увидит на экране. Поэтому
   чертежа нет там, где есть честный снимок, и снимка нет там, где
   функции ещё не существует.
   ------------------------------------------------------------------ */

.vb-figure {
  margin: clamp(28px, 3.4vw, 52px) 0 clamp(44px, 5vw, 78px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.vb-figure .vb-plate {
  width: 100%;
  /* потолок считаем от холста этого чертежа, а не от 1120: у узких
     раскладок холст свой, и общее число обрезало бы их по чужому */
  max-width: calc(var(--w) * 1px * var(--s));
  margin-inline: auto;
  box-shadow: 0 18px 44px rgb(0 0 0 / 18%);
}

.vb-figure figcaption {
  max-width: 64ch;
  font-family: 'Literata', Georgia, serif;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.72;
  color: #8f897d;
  text-wrap: pretty;
}

/* Двухтоновый абзац: первое предложение полным контрастом, продолжение
   приглушённым. Иерархия без второго кегля — приём из разбора. */
.vb-figure figcaption b {
  font-weight: 400;
  color: #ece7dc;
}

/* Подписи заданы цветом напрямую, а не через токены раздела: оба
   чертежа лежат на графите, но в разных разделах — в «Что ещё умеют»
   переменные --g-* не действуют, и подпись там пропадала. */
.vb-figure--on-paper figcaption { color: #55524b; }
.vb-figure--on-paper figcaption b { color: #1d1b17; }
.vb-figure--on-paper .vb-plate { box-shadow: 0 16px 38px rgb(35 27 20 / 12%); }

/* Полоса «СКОРО»: у неё вместо экрана чертёж, потому что экрана ещё нет */
.vb-plate--soon {
  width: 100%;
  max-width: calc(var(--w) * 1px * var(--s));
  margin-inline: auto;
  margin-top: clamp(24px, 3vw, 44px);
  box-shadow: 0 18px 44px rgb(0 0 0 / 18%);
}

/* Полоса 03 после замены поддельного чата чертежом стала обычной парой
   «текст + окно» и встала как полоса 01 — окно справа, с уходом за край.
   Порядок полос: справа · слева · справа · чертёж на всю ширину. */