/* layout.css — два регистра ширины и сетка.
   Регистр «контент» (.shell) и регистр «полотно» (.bleed) чередуются —
   это и есть ритм страницы. Третьего регистра нет. */

/* Контейнер: центральная колонка 1280, приём ESTADEL.
   На широком экране по бокам остаётся поле, контент не растекается. */
.shell {
  width: 100%;
  max-width: calc(var(--as-shell) + var(--as-gutter) + var(--as-gutter));
  margin-inline: auto;
  padding-inline: var(--as-gutter);
}

/* Узкий регистр — текстовые секции внутри той же колонки */
.shell--narrow {
  max-width: calc(var(--as-shell-narrow) + var(--as-gutter) + var(--as-gutter));
}

/* Полотно: во всю ширину окна, без полей */
.bleed {
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

/* Полотно, вырывающееся из уже открытого .shell.
   Сдвиг считается от окна, а не от ширины колонки: 50% — половина
   родителя, 50vw — половина окна, разница и есть поле сбоку.
   Формула верна на любой ширине, а не только там, где колонка
   случайно совпала с экраном. */
.bleed--out {
  width: auto;
  margin-inline: calc(50% - 50vw);
}

/* Классическая полоса прокрутки в 100vw не входит, поэтому полотно
   оказывается шире области раскладки ровно на её толщину. Обрезаем:
   прокручивать вбок на этой странице нечего. */
body {
  overflow-x: clip;
}

/* Сетка 12 колонок */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--as-cols), minmax(0, 1fr));
  column-gap: var(--as-col-gap);
  row-gap: var(--as-block-gap);
}

.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* Асимметрия внутри симметрии: колонка, сдвинутая вправо */
.col-offset-1 { grid-column-start: 2; }
.col-offset-2 { grid-column-start: 3; }

/* Регистр цвета секции. Инверсия ролей без второго набора токенов. */
.on-dark {
  background: var(--as-base-900);
  color: var(--as-text-on-dark);
}

.on-dark-alt {
  background: var(--as-base-800);
  color: var(--as-text-on-dark);
}

.on-light {
  background: var(--as-cream-50);
  color: var(--as-text-on-light);
}

/* Вертикальный ритм. Плотный по умолчанию, широкий — только на смене регистра. */
.rhythm {
  padding-block: var(--as-rhythm-tight);
}

.rhythm--wide {
  padding-block: var(--as-rhythm-wide);
}

.rhythm--flush {
  padding-block: 0;
}

/* Текстовая колонка: абзац не шире 620px независимо от ширины сетки */
.measure {
  max-width: var(--as-measure);
}

/* Стопка с одним шагом — заменяет разнобой одиночных margin */
.stack > * + * {
  margin-top: var(--as-s5);
}

.stack--tight > * + * {
  margin-top: var(--as-s3);
}

.stack--loose > * + * {
  margin-top: var(--as-s7);
}