/* СЕКЦИЯ СВОБОДНОГО ТЕКСТА - колонка чтения вокруг тела, напечатанного общим печатником
   блоков.

   ТИПОГРАФИКИ БЛОКОВ ЗДЕСЬ НЕТ НИ ОДНОЙ СТРОКИ, И ЭТО РЕШЕНИЕ. Абзацы, заголовки, списки и
   врезки одевает `blog.css` - тот же печатник печатает тело статьи, и вторая копия правил
   разошлась бы с первой при первой же правке. Поэтому там селекторы названы парой
   (`.ls-post__b, .ls-rtx__b`), а здесь объявлено только своё: ширина колонки, отступы секции,
   заголовок и приглашение пустой секции.

   ЧИСЛА ВЗЯТЫ У СОСЕДЕЙ, А НЕ ПРИДУМАНЫ: мера и поле - как у вставки кода (единственной
   соседки без пакета дизайна), колонка чтения - как у статьи. Свой набор чисел означал бы
   третью шкалу на одной странице.

   ПОРОГ УЗКОЙ ШИРИНЫ СПРАШИВАЕТ БУМАГУ (`@container ls`), а не окно: медиазапросов к окну в
   вёрстке сайта нет и быть не должно - иначе секция в узкой рамке редактора считала бы себя
   широкой.
*/

.ls-richtext{
  /* Текучая единица - та же, что у вставки кода: одна шкала на обе секции без пакета. */
  --ls-rtx-u: clamp(4px, 3.2176px + 0.2174cqi, 6px);
  /* Колонка ЧТЕНИЯ уже полосы секции: строка длиннее 75 знаков читается заметно хуже, и
     это то же число, которым живёт статья блога. */
  --ls-rtx-max: 720px;
  --ls-rtx-gut: 24px;

  padding-block: calc(20 * var(--ls-rtx-u));
}

.ls-rtx__in{
  margin-inline: auto;
  max-inline-size: var(--ls-rtx-max);
  inline-size: 100%;
  padding-inline: var(--ls-rtx-gut);
}

/* Заголовок секции - гарнитура заголовков дела, как у всех соседей. Пустой он не
   печатается вовсе (решает рендерер), поэтому отступ можно объявлять безусловно. */
.ls-rtx__h{
  margin: 0 0 calc(6 * var(--ls-rtx-u));
  font-family: var(--ls-head-face), Georgia, serif;
  font-size: clamp(24px, 3.2cqi, 34px);
  line-height: 1.2;
  color: var(--ls-ink);
}

/* Приглашение видит ТОЛЬКО хозяин сайта: у посетителя пустая секция печатает пустое тело. */
.ls-rtx__blank{
  margin: 0;
  color: var(--ls-muted);
  font-size: 15px;
}

@container ls (max-width: 700px){
  .ls-richtext{padding-block: calc(16 * var(--ls-rtx-u))}
  .ls-rtx__in{padding-inline: 16px}
}