:root {
  --margin-header: 160rlh;
  --margin-meaning: 70rlh;
  --margin-grid: 25rlh;

  /* Не уменьшаются на мобиле */
  --margin-text: 25rlh;
  --margin-line-height: 15rlh;
  --margin-grid-half: 12.5rlh;
}

@media screen and (max-width: 800px) {
  :root {
    --margin-header: 100rlh;
    --margin-meaning: 50rlh;
    --margin-grid: 15rlh;
  }
}

/* ОСНОВНЫЕ */

/* Контейнер с отступом страницы */
:is(article, footer, aside, section, menu).hug,
:is(article, footer, aside, section, menu) .hug {
  padding-left: var(--margin-grid);
  padding-right: var(--margin-grid);
}

/* Ограничиваем ширину артикла на больших экранах */
@media screen and (min-width: 1720px) {
  :is(article, footer, aside, section, menu).hug,
  :is(article, footer, aside, section, menu) .hug {
    max-width: 1600px;
  }
}

/* Блок во всю ширину */
:is(article, footer, aside, section) .full {
  margin-left: calc(-1 * var(--margin-grid));
  margin-right: calc(-1 * var(--margin-grid));
  width: 100vw;
  max-width: initial!important;
}

/* Непрозрачный для перекрашивания */
:is(article, footer, aside, section) .full:not(.grid, .box) {
  background-color: var(--background-color);
}

:is(article, footer, aside, section) .full > img,
:is(article, footer, aside, section) .full > picture,
:is(article, footer, aside, section) .full > video {
  /* Чтобы не торчали волосы по краям из-за скейла */
  /*width: 100.1%; Если возвращать, то добавить overflow: hidden таким .image, иначе горизонтальный скролл на мобиле в хроме */
  width: 100%;
}

/* Блок во всю высоту */
:is(article, footer, aside, section) .fullHeight {
  height: 100vh;
}
:is(article, footer, aside, section) .fullHeight.cover {
  height: calc( 100vh + 35rlh );
}
:is(article, footer, aside, section) .fullHeight > video[pin],
:is(article, footer, aside, section) .fullHeight:has(> video[pin]) > .video-poster-overlay {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

/* Текст в 7 колонок на десктопе */
:is(article, footer, aside, section) .text {
  max-width: calc((100vw - 13 * 24rlh) / 12 * 7 + 24rlh * 6);
}

@media screen and (max-width: 800px) {
  :is(article, footer, aside, section) .text {
    max-width: initial;
  }
}

/* Текст на поле справа */
.note {
  display: flex;
  justify-content: space-between;
}

.note>*:nth-child(2) {
  margin-top: initial;
  max-width: calc((100vw - 13 * 24rlh) / 12 * 3 + 24rlh * 2);
}

@media screen and (max-width: 800px) {
  .note {
    flex-direction: column;
  }

  .note>*:nth-child(2) {
    margin-top: var(--margin-text);
    max-width: initial;
  }
}

/* ВЕРТИКАЛЬНЫЕ */

/* Базовый у всего, кроме первого уровня сложных элементов и контента обложек */
/* :where повсюду чтобы не повышать специфичность селектора */
/* */
/* Все объекты в article, footer, aside, section */
/* Кроме тех, что на 1 уровне внутри cols, box, note... */
/* А также любых тех, что внутри super > container */
/* А также любых тех, что внутри animation */
:is(article, footer, aside, section) *:not(:where(video, picture, .cols, .box, .note, .grid, .outs, .masonry, .slider-wrap, .slider, .slider-dots, menu, .image) > *):not(:where(.super) > :where(.container) *) + *:not(:where(.animation *)) {
  margin-top: var(--margin-text);
}


/* Базовый вокруг заголовка чуть больше, чтобы не влезать в интерлиньяж */
/*
:is(article, footer, aside, section) .header + *:not(:where(.animation *)),
:is(article, footer, aside, section) .text + .header:not(:where(.animation *)) {
  margin-top: calc(var(--margin-text) + 5rlh);
}
*/

/* Первый объект в статье */
:is(article, footer, aside, section) > :nth-child(1 of :not(.cover)) {
  margin-top: var(--margin-header);
}

/* Обложка под шапкой */
:is(article, footer, aside, section) .cover:not(:where(.animation *)) {
  margin-top: var(--margin-grid);
}
:is(article, footer, aside, section) .cover.full:not(:where(.animation *)) {
  /* 25 паддинг меню + 10 строка меню (нижний паддинг вычитается контейнером меню */
  margin-top: -35rlh; 
}

/* Подпись под обложкой */
.caption:not(:where(.animation *)) {
  margin-top: var(--margin-line-height);
}

/* У полноэкранных гридов оставляем отступы внутри */
/* Растягиваем блок с полями, чтобы ссылка стояла справа на больших мониторах */
:is(article, footer, aside, section) .grid.full,
:is(article, footer, aside, section) .note {
  margin-left: initial;
  margin-right: initial;
  width: calc(100vw - 2 * var(--margin-grid));
}


/* ВЁРСТКА */

/* Явно приклеить блок */
.glue {
  margin-top: var(--margin-text) !important;
}

/* Не так сильно, когда заголовки друг за другом */
.header.glue {
  margin-top: calc(var(--margin-header) / 2) !important;
}

/* Сильнее, когда колонки друг за другом */
.cols.glue {
  margin-top: var(--margin-grid) !important;
}

/* Superglue приклеивает на межстрочный просвет */
.superglue {
  margin-top: var(--margin-line-height) !important;
}

.header.superglue,
.header + *.superglue {
  margin-top: 30rlh !important;
}

/* Явно отклеить блок */
.unglue {
  margin-top: var(--margin-meaning) !important;
}

.header.unglue {
  margin-top: var(--margin-header);
}

/* Растянуть иллюстрацию вправо */
.glueRight picture,
.glueRight video {
  width: 100%;
}


/* БЛОК С ФОНОМ */

.full .hug {
  padding-top: var(--margin-text);
  padding-bottom: var(--margin-text);
}

/* Если первы или последний элемент — фулскриновый, убираем нижний отступ в фулскриновом блоке */
.full .hug .full:first-child {
  margin-top: calc(-1 * var(--margin-text));
}

.full .hug .full:last-child {
  margin-bottom: calc(-1 * var(--margin-text));
}