/* Второй экран рецепта — тёмное интро (.recipe-intro__dark).
   Требования: документация/типографика-рецепта.md
   Макет 1920: кадр 1920×936, орнамент сверху 95px, фон #252523.
   Заголовок 60px от орнамента, абзац 60px от заголовка.
   Колонки 600px: left 80 / 529 / 960, ступенька 80px.
   Облако 1021×506, top 48, left 1135.
   Птицы 572×458, top 171, left 24, opacity 0.2. */

.recipe-page {
  position: relative;
  --type-scale: 1;
  --intro-side: max(0px, calc((100vw - 1920px) / 2));
  --intro-angel-width: calc(581.72px * var(--type-scale));
  --intro-angel-height: calc(1272px * var(--type-scale));
  --intro-angel-in-dark: calc(648px * var(--type-scale));
  --intro-angel-left: calc(-77px * var(--type-scale));
  --intro-pattern-height: 60px;
  --intro-dark-min-height: calc(936px * var(--type-scale));
  --intro-text-size: max(16px, calc(24px * var(--type-scale)));
  --intro-text-width: calc(600px * var(--type-scale));
  --intro-text-min-height: calc(136px * var(--type-scale));
  --intro-text-top: calc(150px * var(--type-scale));
  --intro-text-left: calc(80px * var(--type-scale));
  --intro-text-left-2: calc(529px * var(--type-scale));
  --intro-text-left-3: calc(960px * var(--type-scale));
  --intro-col-drop: calc(80px * var(--type-scale));
  --intro-title-top: calc(60px * var(--type-scale));
  --intro-title-to-text: calc(60px * var(--type-scale));
  --intro-controls-gap: calc(60px * var(--type-scale));
  --intro-clouds-width: calc(1021px * var(--type-scale));
  --intro-clouds-height: calc(506px * var(--type-scale));
  --intro-clouds-overlap: calc(47px * var(--type-scale));
  --intro-clouds-top: calc(-1 * var(--intro-clouds-overlap));
  --intro-clouds-left: calc(1135px * var(--type-scale));
  --intro-birds-width: calc(572px * var(--type-scale));
  --intro-birds-height: calc(458px * var(--type-scale));
  --intro-birds-top: calc(171px * var(--type-scale));
  --intro-birds-left: calc(24px * var(--type-scale));
  --intro-noise-color: #3f3f3b;
  --intro-noise-opacity: var(--noise-opacity, 1);
  --intro-noise-scale: 1.2;
  --intro-ingredients-top: calc(160px * var(--type-scale));
  --intro-no-title-gap: 50px;
  --intro-servings-size: max(16px, calc(24px * var(--type-scale)));
  --intro-book-width: 1410px;
  --intro-book-height: 1061px;
  --intro-paper-width: calc(1090px * var(--type-scale));
  --intro-paper-height: calc(520px * var(--type-scale));
  --intro-paper-left: calc(830px * var(--type-scale));
}

.recipe-page .recipe-hero + .recipe-pattern-screen {
  height: var(--intro-pattern-height);
  background-repeat: repeat-x;
  background-position: top center;
  background-size: auto var(--intro-pattern-height);
}

.recipe-page .recipe-intro {
  overflow: visible;
}

@media (min-width: 901px) {
  .recipe-page .recipe-intro__dark > .recipe-intro__angel {
    position: absolute;
    top: auto;
    right: auto;
    bottom: calc(var(--intro-angel-in-dark) - var(--intro-angel-height));
    left: calc(var(--intro-side) + var(--intro-angel-left));
    z-index: 1;
    width: var(--intro-angel-width);
    height: var(--intro-angel-height);
    object-fit: fill;
    object-position: left bottom;
    opacity: 1;
    pointer-events: none;
    transform: none;
  }
}

.recipe-page .recipe-intro__dark {
  isolation: isolate;
  overflow: visible;
  background-color: #252523;
}

@media (min-width: 769px) {
  .recipe-page .recipe-intro__ingredients {
    box-sizing: content-box;
    padding-top: var(--intro-ingredients-top);
    padding-bottom: 0;
    min-height: 0;
  }

  .recipe-page .recipe-intro__heading {
    padding-top: 0;
  }

  .recipe-page .recipe-intro__heading p {
    font-family: var(--font-main);
    font-weight: 400;
    font-style: normal;
    font-size: var(--intro-servings-size);
    line-height: 1.4;
    letter-spacing: -0.01em;
  }

  .recipe-page .recipe-intro__book-wrap {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: 50%;
    width: var(--intro-book-width);
    height: var(--intro-book-height);
    margin-top: 0;
    margin-bottom: calc(var(--intro-book-height) * (var(--type-scale) - 1));
    transform: translateX(-50%) scale(var(--type-scale));
    transform-origin: top center;
  }

  .recipe-page .recipe-intro__book {
    width: 100%;
    height: 100%;
  }

  .recipe-page .recipe-intro__paper-bottom {
    top: auto;
    right: auto;
    bottom: 0;
    left: calc(var(--intro-side) + var(--intro-paper-left));
    width: var(--intro-paper-width);
    height: var(--intro-paper-height);
    object-fit: fill;
  }
}

.recipe-page .recipe-intro__dark::after {
  z-index: 0;
  background-image: var(--noise-image-dark);
  background-repeat: repeat;
  background-size: var(--noise-size-dark);
  opacity: var(--intro-noise-opacity);
}

.recipe-page .recipe-intro__text,
.recipe-page .recipe-intro__text p,
.recipe-page .g6-stair__col,
.recipe-page .g6-stair__col p,
.recipe-page .g6-stair__col li {
  font-family: var(--font-main);
  font-weight: 400;
  font-style: normal;
  font-size: var(--intro-text-size);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.recipe-page .g6-stair__title:empty {
  display: none;
}

.recipe-page .g6-stair.is-untitled {
  padding-top: var(--intro-no-title-gap);
}

.recipe-page .g6-stair:not(.is-untitled) {
  padding-top: 0;
}

.recipe-page .g6-stair__col ul {
  margin: 10px 0 0;
  padding-left: 1.15em;
}

.recipe-page .g6-stair__col li + li {
  margin-top: 6px;
}

@media (min-width: 769px) {
  .recipe-page .g6-stair {
    overflow: visible;
  }

  .recipe-page .recipe-intro__dark {
    --g6-intro-pad: var(--intro-text-left);
    --g6-intro-col: var(--intro-text-width);
    --g6-intro-step: 0px;
    --g6-intro-drop: var(--intro-col-drop);
    min-height: var(--intro-dark-min-height);
  }

  .recipe-page .recipe-intro__text,
  .recipe-page .g6-stair__col {
    width: var(--intro-text-width);
    min-height: var(--intro-text-min-height);
  }

  .recipe-page .recipe-intro__text--first {
    top: var(--intro-text-top);
    left: calc(var(--intro-side, 0px) + var(--intro-text-left));
    width: var(--intro-text-width);
    min-height: var(--intro-text-min-height);
  }

  .recipe-page .g6-stair__col.is-slot-1 {
    top: 0;
    left: calc(var(--intro-side, 0px) + var(--intro-text-left));
    width: var(--intro-text-width);
    min-height: var(--intro-text-min-height);
  }

  .recipe-page .recipe-intro__text--second {
    top: calc(var(--intro-text-top) + var(--intro-col-drop));
    left: calc(var(--intro-side, 0px) + var(--intro-text-left-2));
    width: var(--intro-text-width);
    min-height: var(--intro-text-min-height);
  }

  .recipe-page .g6-stair__col.is-slot-2 {
    top: var(--intro-col-drop);
    left: calc(var(--intro-side, 0px) + var(--intro-text-left-2));
    width: var(--intro-text-width);
    min-height: var(--intro-text-min-height);
  }

  .recipe-page .recipe-intro__text--third {
    top: calc(var(--intro-text-top) + var(--intro-col-drop) * 2);
    left: calc(var(--intro-side, 0px) + var(--intro-text-left-3));
    width: var(--intro-text-width);
    min-height: var(--intro-text-min-height);
  }

  .recipe-page .g6-stair__col.is-slot-3,
  .recipe-page .g6-stair__col.is-off-right {
    top: calc(var(--intro-col-drop) * 2);
    left: calc(var(--intro-side, 0px) + var(--intro-text-left-3));
    width: var(--intro-text-width);
    min-height: var(--intro-text-min-height);
  }

  .recipe-page .g6-stair__col.is-off-right {
    left: calc(var(--intro-side, 0px) + var(--intro-text-left-3) + var(--intro-text-width));
  }

  .recipe-page .g6-stair__col.is-off-left {
    top: 0;
    left: calc(var(--intro-side, 0px) + var(--intro-text-left) - var(--intro-text-width));
    width: var(--intro-text-width);
  }

  .recipe-page .g6-stair__title {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0 0 0 calc(var(--intro-side, 0px) + var(--intro-text-left));
    padding: var(--intro-title-top) 0 0;
  }

  .recipe-page .g6-stair__controls {
    margin-top: var(--intro-controls-gap);
    padding-top: 0;
  }

  .recipe-page .recipe-intro__clouds,
  .recipe-page .g6-stair > .recipe-intro__clouds {
    position: absolute;
    top: var(--intro-clouds-top);
    right: auto;
    bottom: auto;
    left: calc(var(--intro-side, 0px) + var(--intro-clouds-left));
    z-index: 1;
    width: var(--intro-clouds-width);
    height: var(--intro-clouds-height);
    max-width: none;
    margin: 0;
    object-fit: fill;
    opacity: 1;
    transform: translateX(var(--clouds-scroll-shift, 0px));
    pointer-events: none;
  }

  .recipe-page .recipe-intro__birds,
  .recipe-page .g6-stair > .recipe-intro__birds {
    position: absolute;
    top: var(--intro-birds-top);
    right: auto;
    bottom: auto;
    left: calc(var(--intro-side, 0px) + var(--intro-birds-left));
    z-index: 1;
    width: var(--intro-birds-width);
    height: var(--intro-birds-height);
    max-width: none;
    margin: 0;
    object-fit: fill;
    opacity: 0.2;
    transform: translateX(var(--birds-scroll-shift, 0px))
      translateY(var(--birds-scroll-lift, 0px))
      rotate(var(--birds-scroll-rotate, 0deg));
    pointer-events: none;
  }
}

@media (max-width: 1600px) {
  .recipe-page {
    --type-scale: calc(1600 / 1920);
  }
}

@media (max-width: 1200px) {
  .recipe-page {
    --type-scale: calc(1200 / 1920);
  }
}

@media (max-width: 992px) {
  .recipe-page {
    --type-scale: calc(992 / 1920);
  }
}

@media (max-width: 900px) {
  .recipe-page .recipe-intro__dark > .recipe-intro__angel {
    display: none;
  }

  .recipe-page .g6-stair__title {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 20px 0;
    padding: 0;
  }

  .recipe-page .g6-stair__controls {
    margin-top: 36px;
    padding: 8px 0 12px;
  }
}

@media (max-width: 768px) {
  .recipe-page {
    --type-scale: calc(768 / 1920);
    --intro-ingredients-top: 0px;
    --intro-dark-min-height: 0;
    --intro-text-width: 100%;
    --intro-text-min-height: 0;
    --intro-text-top: auto;
    --intro-text-left: 0;
    --intro-text-left-2: 0;
    --intro-text-left-3: 0;
    --intro-col-drop: 0;
    --intro-title-top: auto;
    --intro-title-to-text: 8px;
    --intro-controls-gap: 36px;
    --intro-clouds-width: auto;
    --intro-clouds-height: auto;
    --intro-clouds-overlap: 0px;
    --intro-clouds-top: auto;
    --intro-clouds-left: auto;
    --intro-birds-width: auto;
    --intro-birds-height: auto;
    --intro-birds-top: auto;
    --intro-birds-left: auto;
  }

  .recipe-page .recipe-intro__text,
  .recipe-page .recipe-intro__text p,
  .recipe-page .g6-stair__col,
  .recipe-page .g6-stair__col p {
    width: 100%;
    min-height: 0;
  }

  .recipe-page .g6-stair__title {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 16px 0;
    padding: 0;
  }
}

@media (max-width: 420px) {
  .recipe-page {
    --type-scale: calc(420 / 1920);
    --intro-clouds-width: calc(401 * 100vw / 420);
    --intro-clouds-height: calc(199 * 100vw / 420);
    --intro-clouds-left: calc(161 * 100vw / 420);
    --intro-birds-width: calc(220 * 100vw / 420);
    --intro-birds-height: calc(176 * 100vw / 420);
    --intro-birds-left: calc(24 * 100vw / 420);
    overflow-x: hidden;
  }

  .recipe-page .recipe-intro,
  .recipe-page .recipe-intro__dark {
    overflow-x: hidden;
    min-height: 0;
  }

  .recipe-page .recipe-intro__dark {
    padding-bottom: 0;
  }

  .recipe-page .g6-stair {
    overflow-x: hidden;
    cursor: auto;
    user-select: auto;
    padding-bottom: var(--intro-clouds-height);
  }

  .recipe-page .recipe-intro__clouds,
  .recipe-page .g6-stair > .recipe-intro__clouds {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: var(--intro-clouds-left);
    z-index: 1;
    width: var(--intro-clouds-width);
    height: var(--intro-clouds-height);
    max-width: none;
    margin: 0;
    object-fit: fill;
    opacity: 1;
    transform: none;
    pointer-events: none;
  }

  .recipe-page .recipe-intro__birds,
  .recipe-page .g6-stair > .recipe-intro__birds {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: var(--intro-birds-left);
    z-index: 1;
    width: var(--intro-birds-width);
    height: var(--intro-birds-height);
    max-width: none;
    margin: 0;
    object-fit: fill;
    opacity: 0.2;
    transform: none;
    pointer-events: none;
  }

  .recipe-page .g6-stair__viewport {
    display: block;
    overflow: visible;
    min-height: 0;
  }

  .recipe-page .g6-stair__title {
    width: calc(100% - 40px);
    margin: 0 20px 0;
  }

  .recipe-page .g6-stair__mobile-title {
    display: none;
  }

  .recipe-page .recipe-intro__text,
  .recipe-page .recipe-intro__text--first,
  .recipe-page .recipe-intro__text--second,
  .recipe-page .recipe-intro__text--third,
  .recipe-page .g6-stair__col,
  .recipe-page .g6-stair__col.is-slot-1,
  .recipe-page .g6-stair__col.is-slot-2,
  .recipe-page .g6-stair__col.is-slot-3,
  .recipe-page .g6-stair__col.is-chapter-on {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    width: calc(100% - 40px);
    max-width: none;
    min-height: 0;
    margin: 0 20px 16px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
  }

  .recipe-page .g6-stair__col.is-off-left,
  .recipe-page .g6-stair__col.is-off-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: none;
  }

  .recipe-page .g6-stair__col h3 {
    margin: 0 0 8px;
  }

  .recipe-page .g6-stair__controls {
    position: relative;
    z-index: 3;
    display: flex;
    margin-top: 8px;
    padding: 8px 0 12px;
  }
}