/* Lumbrick. Страница как серия уличных афиш: цветовые блоки, крупный шрифт, лента на стыках. */

:root {
  --mag: #D6006E;
  --ink: #111014;
  --white: #FFFFFF;
  --pale: #FCE7F2;

  --display: "Big Shoulders Display", Impact, "Haettenschweiler", "Arial Narrow", sans-serif;
  --text: "Mulish", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --gut: clamp(16px, 3.2vw, 56px);
  --head: 60px;
  --pad-top: clamp(28px, 3.6vw, 56px);
  --pad-end: clamp(56px, 8vw, 128px);

  --shout: clamp(3rem, 14vw, 18rem);
  --big: clamp(2.75rem, 11vw, 13rem);
  --mid: clamp(2.25rem, 6.4vw, 7.5rem);
  --sub: clamp(1.75rem, 3.4vw, 3.75rem);
  --body: clamp(1.0625rem, 0.98rem + 0.4vw, 1.375rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; min-width: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--head);
  background: var(--ink);
}

body {
  margin: 0;
  font: 400 var(--body)/1.42 var(--text);
  color: var(--ink);
  background: var(--white);
  overflow-wrap: break-word;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; border-radius: 0; }

:focus-visible { outline: 4px solid var(--fg, var(--ink)); outline-offset: 3px; }

.on-mag   { background: var(--mag);   color: var(--white); --fg: var(--white); --bg: var(--mag);   --hit: var(--white); }
.on-ink   { background: var(--ink);   color: var(--white); --fg: var(--white); --bg: var(--ink);   --hit: var(--mag); }
.on-white { background: var(--white); color: var(--ink);   --fg: var(--ink);   --bg: var(--white); --hit: var(--mag); }
.on-pale  { background: var(--pale);  color: var(--ink);   --fg: var(--ink);   --bg: var(--pale);  --hit: var(--mag); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 14px 18px;
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
}
.skip:focus { left: 0; }

/* ---------- Общая типографика афиш ---------- */

.bill {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: var(--pad-top) var(--gut) var(--pad-end);
}

.slug {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25em 1.5em;
  margin-bottom: clamp(20px, 3vw, 48px);
  font: 800 .8125rem/1.3 var(--text);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.shout {
  font: 900 var(--shout)/.86 var(--display);
  letter-spacing: .002em;
  text-transform: uppercase;
}

.ln { display: block; }
.ln--end { text-align: right; --from: 1; }
.ln--push { padding-left: 1em; }

.say-strong { font-weight: 800; line-height: 1.25; }

/* Массивные кнопки */
.slab {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .9em;
  min-height: clamp(68px, 6vw, 92px);
  padding: .4em .8em;
  border: 0;
  font: 900 clamp(1.625rem, 2.5vw, 2.75rem)/1 var(--display);
  letter-spacing: .015em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s linear, color .15s linear;
}
.slab::after {
  content: "";
  flex: none;
  width: 1em;
  height: .8em;
  background: currentColor;
  clip-path: polygon(0 30%, 58% 30%, 58% 0, 100% 50%, 58% 100%, 58% 70%, 0 70%);
  transition: transform .2s var(--ease);
}
.slab:hover::after { transform: translateX(.22em); }
.slab:active { transform: translateY(2px); }
.slab[disabled] { cursor: progress; }
.slab--ink   { background: var(--ink);   color: var(--white); }
.slab--ink:hover   { background: var(--white); color: var(--ink); }
.slab--white { background: var(--white); color: var(--ink); }
.slab--white:hover { background: var(--ink);   color: var(--white); }
.slab--mag   { background: var(--mag);   color: var(--white); }
.slab--mag:hover   { background: var(--ink);   color: var(--white); }

/* Короткая ссылка-удар */
.jab {
  display: inline-block;
  padding: .12em .2em;
  margin-left: -.2em;
  font: 800 clamp(1.375rem, 1.9vw, 2rem)/1.1 var(--display);
  letter-spacing: .015em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: .13em;
  text-underline-offset: .16em;
}
.jab:hover { background: var(--fg); color: var(--bg); text-decoration: none; }

/* ---------- Шапка ---------- */

.mast {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: var(--head);
}
.mast-mark {
  display: flex;
  align-items: center;
  padding: 0 var(--gut);
  background: var(--mag);
  color: var(--white);
  font: 900 clamp(1.75rem, 2.3vw, 2.25rem)/1 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
}
.mast-mark:focus-visible, .mast-nav a:focus-visible, .burger:focus-visible { outline-offset: -6px; }

.mast-nav { display: flex; align-items: stretch; }
.mast-nav a {
  display: flex;
  align-items: center;
  padding: 0 clamp(10px, 1.15vw, 20px);
  font: 800 .8125rem/1 var(--text);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s linear, color .12s linear;
}
.mast-nav a:hover { background: var(--white); color: var(--ink); }
.mast-nav .mast-go {
  margin-left: clamp(4px, 1vw, 16px);
  padding: 0 clamp(16px, 2.2vw, 36px);
  background: var(--mag);
  color: var(--white);
  font: 900 clamp(1.375rem, 1.7vw, 1.625rem)/1 var(--display);
  letter-spacing: .03em;
}
.mast-nav .mast-go:hover { background: var(--white); color: var(--ink); }

.burger {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: var(--head);
  padding: 0;
  border: 0;
  background: var(--white);
  cursor: pointer;
  --fg: var(--ink);
}
.burger i {
  display: block;
  width: 30px;
  height: 5px;
  background: var(--ink);
  transition: transform .2s var(--ease), opacity .1s linear;
}
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

@media (max-width: 1023px) {
  .mast { flex-wrap: wrap; }
  .mast-nav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    padding: 10px var(--gut);
  }
  .mast-nav a { padding: 10px 12px 10px 0; }
  .mast-nav .mast-go { margin-left: 0; padding: 10px 14px; }

  html:not(.js) .mast { position: static; }

  .js .mast { flex-wrap: nowrap; }
  .js .burger { display: flex; }
  .js .mast-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: calc(100vh - var(--head));
    max-height: calc(100dvh - var(--head));
    overflow-y: auto;
    padding: 8px var(--gut) 24px;
    background: var(--ink);
  }
  .js .mast-nav.is-open { display: flex; }
  .js .mast-nav a {
    padding: .14em 0;
    font: 900 clamp(2.75rem, 13vw, 5rem)/1 var(--display);
    letter-spacing: .005em;
  }
  .js .mast-nav a:hover { background: none; color: var(--mag); }
  .js .mast-nav .mast-go {
    margin: .3em 0 0;
    padding: .2em .35em;
    background: var(--mag);
    color: var(--white);
  }
  .js .mast-nav .mast-go:hover { background: var(--white); color: var(--ink); }
}

/* ---------- Лента на стыке афиш ---------- */

.tape {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(10px, 1.9vw, 34px);
  background: linear-gradient(var(--a) 50%, var(--b) 50%);
}
.tape-band {
  width: 104%;
  margin-left: -2%;
  overflow: hidden;
  transform: rotate(-1.15deg);
}
.tape-band--back { transform: rotate(1.15deg); }
.tape--ink .tape-band   { background: var(--ink);   color: var(--white); }
.tape--mag .tape-band   { background: var(--mag);   color: var(--white); }
.tape--white .tape-band { background: var(--white); color: var(--ink); }

.tape-run { display: flex; width: max-content; }
.tape-set {
  display: flex;
  flex: none;
  padding-block: .2em;
  font: 800 clamp(1.375rem, 2.7vw, 3rem)/1.1 var(--display);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tape-set span { display: flex; align-items: center; }
.tape-set span::after {
  content: "";
  flex: none;
  width: .42em;
  height: .42em;
  margin: 0 .7em;
  background: currentColor;
}

@keyframes tape-go { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- 01 Открывающая афиша ---------- */

.opener { padding-bottom: 0; }
.opener-h {
  font-size: var(--shout);
  font-size: clamp(3rem, min(14vw, 25svh), 18rem);
}
.opener-side { margin-top: clamp(24px, 4vw, 40px); max-width: 38rem; }
.opener-side p + p { margin-top: .5em; }
.opener-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(18px, 2vw, 28px);
}

@media (min-width: 1200px) {
  .opener-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
  }
  .opener-h { display: contents; }
  .opener-h .ln:nth-child(1) { grid-column: 1 / 8; grid-row: 1; }
  .opener-h .ln:nth-child(2) { grid-column: 1 / 8; grid-row: 2; }
  .opener-h .ln:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .opener-side { grid-column: 8 / -1; grid-row: 1 / 3; margin-top: 0; }
  .opener-acts .slab { flex: 1 1 auto; min-height: clamp(60px, 5vw, 76px); font-size: clamp(1.5rem, 2.1vw, 2.25rem); }
}

.tally {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(28px, 3.2vw, 44px) calc(var(--gut) * -1) 0;
}
.tally > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: .35em;
  padding: clamp(14px, 1.8vw, 26px) var(--gut);
}
.tally-a { grid-column: 1 / -1; }
.tally dt {
  font: 800 .8125rem/1.25 var(--text);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tally dd {
  font: 900 clamp(4rem, 9.5vw, 11rem)/.84 var(--display);
}
.tally small {
  display: block;
  font: 800 .8125rem/1.25 var(--text);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .35em;
}
.tally-a dd { font-size: clamp(5rem, 9.5vw, 11rem); }

@media (min-width: 720px) {
  .tally { grid-template-columns: 5fr 4fr 3fr; }
  .tally-a { grid-column: auto; }
  .tally small { display: inline; margin: 0 .2em 0 0; vertical-align: top; }
}

/* ---------- 02 Форматы: стена из блоков ---------- */

.formats { padding-bottom: 0; }
.formats-note { margin-top: clamp(18px, 3vw, 32px); max-width: 30rem; }
.formats-note p + p { margin-top: .5em; }

@media (min-width: 900px) {
  .formats-top {
    display: grid;
    grid-template-columns: 8fr 4fr;
    align-items: end;
    column-gap: 24px;
  }
  .formats-note { justify-self: end; margin-top: 0; }
}

.wall {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: clamp(32px, 5vw, 72px) calc(var(--gut) * -1) 0;
}
.plate {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 40px) var(--gut);
}
.plate img { width: min(64vw, 280px); }
.plate--b img, .plate--c img, .plate--d img { width: min(76vw, 340px); }
.plate--e img { width: 100%; }

.plate figcaption { display: flex; flex-direction: column; gap: .2em; max-width: 26rem; }
.plate b {
  font: 900 clamp(3.25rem, 5.4vw, 6.5rem)/.9 var(--display);
}
.plate strong {
  font: 800 clamp(1.75rem, 2.5vw, 3rem)/1 var(--display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.plate span { margin-top: .2em; font-weight: 600; line-height: 1.3; }

@media (min-width: 640px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate { padding-inline: clamp(18px, 2.4vw, 40px); }
  .plate img, .plate--b img, .plate--c img, .plate--d img { width: 86%; max-width: 340px; }
  .plate--a img, .plate--f img { max-width: 250px; }
  .plate--e img { width: 100%; max-width: none; }
  .plate { justify-content: space-between; }
}

@media (min-width: 1100px) {
  .wall { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .plate--a, .plate--f { grid-column: span 4; }
  .plate--b, .plate--e { grid-column: span 5; }
  .plate--c, .plate--d { grid-column: span 3; }

  .plate--a, .plate--b, .plate--f { flex-direction: row; align-items: flex-end; justify-content: flex-start; }
  .plate--a img, .plate--f img { width: 58%; max-width: 320px; flex: none; }
  .plate--b img { width: 56%; max-width: 400px; flex: none; }
  .plate--c img, .plate--d img { width: 100%; max-width: 420px; }
  .plate--e img { width: 100%; }
}

/* ---------- 03 Фабрика ---------- */

.factory-say { margin-top: clamp(20px, 3vw, 40px); max-width: 34rem; }
.factory-say p + p { margin-top: .5em; }
.factory-facts { margin-top: clamp(32px, 5vw, 56px); }
.fig-giant {
  font: 900 clamp(7rem, 15vw, 20rem)/.82 var(--display);
  color: var(--hit);
}
.fig-mid {
  margin-top: .5em;
  font: 900 var(--big)/.86 var(--display);
  color: var(--white);
  text-transform: uppercase;
}
.fig-note { max-width: 24rem; margin-top: .55em; }
.fig-note strong { font-weight: 800; }

@media (min-width: 1100px) {
  .factory-top {
    display: grid;
    grid-template-columns: 8fr 4fr;
    column-gap: 24px;
    align-items: start;
  }
  .factory-facts { margin-top: 0; }
  .fig-mid { font-size: clamp(3rem, 6.5vw, 8rem); }
}

.press { margin-top: clamp(48px, 7vw, 112px); }
.press li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .32em;
  align-items: baseline;
  margin-left: calc(var(--i) * 2.6vw);
  font: 900 var(--big)/.92 var(--display);
}
.press li + li { margin-top: clamp(10px, 1.6vw, 26px); }
.press-n { color: var(--hit); }
.press h3 {
  font: inherit;
  text-transform: uppercase;
}
.press p {
  grid-column: 2;
  max-width: 24rem;
  margin-top: .3rem;
  font: 400 var(--body)/1.35 var(--text);
}

@media (min-width: 1100px) {
  .press li {
    grid-template-columns: auto auto minmax(0, 24rem);
    justify-content: start;
    margin-left: calc(var(--i) * 7.5vw);
  }
  .press p { grid-column: 3; margin-top: 0; padding-left: .8rem; align-self: end; padding-bottom: .5rem; }
}

/* ---------- 04 Планировщик партии ---------- */

.run { --tw: clamp(30px, 3.2vw, 46px); --th: clamp(84px, 9vw, 136px); }
.run-h {
  font: 900 var(--big)/.88 var(--display);
  text-transform: uppercase;
}
.run-read { margin-top: clamp(12px, 2vw, 28px); }
.run-count {
  display: flex;
  align-items: flex-end;
  gap: .1em;
  font: 900 clamp(11rem, 52vw, 26rem)/.78 var(--display);
}
.run-count output {
  display: inline-block;
  min-width: 1em;
  transform-origin: 0 100%;
  font-variant-numeric: tabular-nums;
}
.run-count span {
  padding-bottom: .05em;
  font-size: .32em;
  line-height: .9;
  text-transform: uppercase;
}
.run-side { margin-top: clamp(20px, 3vw, 32px); }
.run-x {
  font: 800 clamp(1.5rem, 2.6vw, 3rem)/1.05 var(--display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.run-price {
  margin-top: .12em;
  font: 900 clamp(4.25rem, 12vw, 15rem)/.9 var(--display);
}
.run-price small {
  display: block;
  font-size: .3em;
  line-height: 1;
  text-transform: uppercase;
}
.run-note { max-width: 27rem; margin-top: .7em; font-weight: 600; }

@media (min-width: 900px) {
  .run-read {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 72px);
    align-items: end;
  }
  .run-count { font-size: clamp(16rem, min(36vw, 64svh), 44rem); }
  .run-side { margin-top: 0; }
  .run-price { font-size: clamp(3.5rem, 9.5vw, 12rem); }
  .run-go { display: flex; width: fit-content; margin-left: auto; }
}

.dial { margin-top: clamp(28px, 4vw, 56px); }
.dial-label {
  display: block;
  margin-bottom: .7em;
  font: 800 .9375rem/1.3 var(--text);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dial-track { position: relative; height: var(--th); }
.dial-track::before,
.dial-track::after {
  content: "";
  position: absolute;
  inset: 0 calc(var(--tw) / 2);
  background-image: linear-gradient(90deg, var(--bar) 62%, transparent 62%);
  background-size: calc(100% / 30) 100%;
}
.dial-track::before { --bar: var(--ink); }
.dial-track::after {
  --bar: var(--white);
  clip-path: inset(0 calc((1 - var(--r)) * 100%) 0 0);
}
@media (min-width: 900px) {
  .dial-track::before, .dial-track::after { background-size: calc(100% / 60) 100%; }
}

.dial-track input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
}
.dial-track input::-webkit-slider-runnable-track { height: var(--th); background: transparent; }
.dial-track input::-moz-range-track { height: var(--th); background: transparent; }
.dial-track input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--tw);
  height: var(--th);
  border: 6px solid var(--ink);
  border-radius: 0;
  background: var(--white);
}
.dial-track input::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--tw);
  height: var(--th);
  border: 6px solid var(--ink);
  border-radius: 0;
  background: var(--white);
}
.dial-track input:focus-visible { outline: 4px solid var(--white); outline-offset: 4px; }

.dial-marks {
  position: relative;
  height: 1.5em;
  margin: .3em calc(var(--tw) / 2) 0;
  font: 800 clamp(1.25rem, 2.2vw, 2.25rem)/1 var(--display);
}
.dial-marks span {
  position: absolute;
  left: calc(var(--k) / 6 * 100%);
  transform: translateX(-50%);
}

.run-go { margin-top: clamp(20px, 3vw, 36px); }

/* ---------- 05 Плейбуки ---------- */

.books { padding-bottom: 0; }
.books-head .say-strong { max-width: 30rem; margin-top: clamp(18px, 2.4vw, 32px); }
.book-list { margin: clamp(28px, 4.5vw, 64px) calc(var(--gut) * -1) 0; }
.book {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 16px;
  padding: clamp(24px, 3.4vw, 52px) var(--gut);
}
.book-num {
  font: 900 var(--shout)/.86 var(--display);
  color: var(--hit);
  text-transform: uppercase;
}
.book-say h3 {
  font: 900 var(--sub)/1 var(--display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.book-say p { max-width: 26rem; margin: .4em 0 .55em; }

@media (min-width: 900px) {
  .book {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
    align-items: end;
  }
  .book-num { grid-column: 1 / 9; grid-row: 1; }
  .book-say { grid-column: 9 / -1; grid-row: 1; }
  .book--flip .book-num { grid-column: 5 / -1; }
  .book--flip .book-say { grid-column: 1 / 5; }
}

/* ---------- 06 Услуги ---------- */

.job-who { max-width: 30rem; margin-top: clamp(18px, 2.4vw, 32px); }
.job-row { margin-top: clamp(40px, 6.5vw, 104px); }
.job-word {
  font: 900 var(--big)/.88 var(--display);
  color: var(--hit);
  text-transform: uppercase;
}
.job-say { margin-top: clamp(12px, 1.6vw, 24px); max-width: 32rem; }
.job-say p + p { margin-top: .4em; }
.job-say .jab { margin-top: .7em; }
.job-kit { margin-top: clamp(20px, 2.6vw, 40px); }
.job-kit > div + div { margin-top: 1em; }
.job-kit dt {
  font: 900 var(--mid)/.95 var(--display);
  text-transform: uppercase;
}
.job-kit dd { max-width: 22rem; margin-top: .2em; }

@media (min-width: 900px) {
  .job-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
    align-items: end;
  }
  .job-word { grid-column: 1 / 8; }
  .job-say { grid-column: 8 / -1; margin-top: 0; }
  .job-row--flip .job-word { grid-column: 6 / -1; grid-row: 1; }
  .job-row--flip .job-say { grid-column: 1 / 6; grid-row: 1; }
  .job-kit {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 3fr 4fr 5fr;
    column-gap: clamp(20px, 3vw, 48px);
  }
  .job-kit > div + div { margin-top: 0; }
}

/* ---------- 07 Цепочка ---------- */

.chain { padding-bottom: 0; }
.links { margin: clamp(32px, 5vw, 72px) calc(var(--gut) * -1) 0; }
.links li {
  position: relative;
  padding: clamp(20px, 2.2vw, 36px) var(--gut) clamp(34px, 3vw, 44px);
}
.links li::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: var(--gut);
  top: 100%;
  width: 56px;
  height: 22px;
  margin-top: -1px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.links li:last-child::after { display: none; }
.links h3 {
  font: 900 var(--mid)/.92 var(--display);
  text-transform: uppercase;
}
.links h3.keep { text-transform: none; }
.links p { margin-top: .4em; max-width: 26rem; font-weight: 600; line-height: 1.3; }

@media (min-width: 1100px) {
  .links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .links li { padding: clamp(24px, 2.6vw, 44px) clamp(30px, 3vw, 52px) clamp(32px, 3.4vw, 56px) clamp(38px, 3.6vw, 62px); }
  .links li:first-child { padding-left: var(--gut); }
  .links h3 { font-size: clamp(2.5rem, 4.2vw, 5rem); }
  .links li::after {
    left: 100%;
    top: 0;
    bottom: 0;
    width: clamp(20px, 2vw, 32px);
    height: auto;
    margin: 0 0 0 -1px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
}

/* ---------- 08 Четыре хода ---------- */

.loop-h {
  max-width: 14em;
  font: 900 var(--sub)/1 var(--display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.moves { margin-top: clamp(14px, 2.4vw, 36px); }
.move + .move { margin-top: clamp(40px, 5.5vw, 88px); }
.move-word {
  font: 900 var(--shout)/.86 var(--display);
  text-transform: uppercase;
}
.move-say { margin-top: clamp(12px, 1.6vw, 24px); max-width: 34rem; }
.move-say p + p { margin-top: .3em; }

.ticks { margin-top: .7em; }
.ticks li {
  position: relative;
  padding: .24em 0 .24em 1.3em;
  font-weight: 600;
  line-height: 1.3;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .56em;
  width: .6em;
  height: .6em;
  background: currentColor;
}

@media (min-width: 900px) {
  .move {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
    align-items: end;
  }
  .move-word { grid-column: 1 / 9; grid-row: 1; }
  .move-say { grid-column: 9 / -1; grid-row: 1; margin-top: 0; }
  .move--flip .move-word { grid-column: 5 / -1; }
  .move--flip .move-say { grid-column: 1 / 5; }
}

/* ---------- 09 Также в программе ---------- */

.lineup { margin-top: clamp(28px, 4.5vw, 64px); }
.lineup li { padding-block: clamp(10px, 1.1vw, 18px); }
.lineup h3 {
  font: 900 clamp(3rem, 9.4vw, 11rem)/.9 var(--display);
  text-transform: uppercase;
}
.lineup-long h3 {
  font-size: clamp(2.375rem, 6vw, 7rem);
  color: var(--hit);
}
.lineup p { max-width: 28rem; margin-top: .3em; line-height: 1.3; }

@media (min-width: 900px) {
  .lineup li {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
    align-items: end;
  }
  .lineup h3 { grid-column: 1 / 9; }
  .lineup p { grid-column: 9 / -1; margin: 0 0 .5em; }
}

/* ---------- 10 Правила ---------- */

.rules-who { max-width: 28rem; margin-top: clamp(18px, 2.4vw, 32px); }
@media (min-width: 900px) {
  .rules-who { margin-left: auto; }
}

.rule-list { margin-top: clamp(40px, 6vw, 96px); }
.rule {
  display: grid;
  grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr);
  column-gap: clamp(12px, 1.6vw, 28px);
  align-items: start;
}
.rule + .rule { margin-top: clamp(32px, 4.5vw, 64px); }
.rule-n {
  font: 900 clamp(7rem, 17vw, 21rem)/.76 var(--display);
  color: var(--hit);
}
.rule h3 {
  font: 900 var(--mid)/.92 var(--display);
  text-transform: uppercase;
}
.rule p { max-width: 26rem; margin-top: .45em; }

@media (min-width: 900px) {
  .rule-list {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: clamp(40px, 5vw, 80px);
  }
  .rule + .rule { margin-top: 0; }
  .rule:nth-child(1) { grid-column: 1 / 7; }
  .rule:nth-child(2) { grid-column: 7 / -1; margin-top: clamp(48px, 8vw, 128px); }
  .rule:nth-child(3) { grid-column: 2 / 8; }
  .rule:nth-child(4) { grid-column: 8 / -1; margin-top: clamp(48px, 8vw, 128px); }
}

/* ---------- 11 Каналы и измерение ---------- */

.stack { padding-bottom: 0; }
.stack-seven {
  font: 900 clamp(16rem, 76vw, 30rem)/.76 var(--display);
}
.stack-words {
  margin-top: .22em;
  font: 900 var(--big)/.88 var(--display);
  text-transform: uppercase;
}
.stack-side { margin-top: clamp(24px, 3vw, 44px); }
.stack-side > .say-strong { max-width: 30rem; }
.stack-list { margin-top: clamp(20px, 2.4vw, 36px); }
.stack-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .9em;
  padding-block: .18em;
}
.stack-list b {
  font: 900 clamp(2.5rem, 4.8vw, 5.5rem)/.98 var(--display);
  text-transform: uppercase;
}
.stack-list span { font-weight: 600; line-height: 1.25; }

@media (min-width: 1100px) {
  .stack-grid {
    display: grid;
    grid-template-columns: 6fr 6fr;
    column-gap: 24px;
    align-items: start;
  }
  .stack-seven { font-size: clamp(22rem, 40vw, 52rem); }
  .stack-words { font-size: clamp(3rem, 7vw, 9rem); }
  .stack-side { margin-top: 0; }
}

.stack-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2em 1em;
  margin: clamp(32px, 4.5vw, 64px) calc(var(--gut) * -1) 0;
  padding: clamp(14px, 1.8vw, 26px) var(--gut);
}
.stack-strip h3 {
  font: 800 .8125rem/1.25 var(--text);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.stack-strip-names {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .5em;
  font: 900 var(--mid)/1 var(--display);
}

/* ---------- 12 Вопросы ---------- */

.ask-list { margin-top: clamp(24px, 3.6vw, 56px); }
.ask-list details { border-top: 8px solid var(--mag); }
.ask-list details:last-child { border-bottom: 8px solid var(--mag); }
.ask-list summary {
  position: relative;
  display: block;
  padding: .36em 1.25em .36em 0;
  font: 900 clamp(2rem, 4.6vw, 5rem)/.98 var(--display);
  letter-spacing: .005em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: color .12s linear;
}
.ask-list summary::-webkit-details-marker { display: none; }
.ask-list summary:hover { color: var(--mag); }
.ask-list summary:focus-visible { outline-offset: -4px; }
.ask-list summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: .62em;
  height: .62em;
  margin-top: -.31em;
  background:
    linear-gradient(currentColor, currentColor) center / 100% .18em no-repeat,
    linear-gradient(currentColor, currentColor) center / .18em 100% no-repeat;
  transition: transform .22s var(--ease);
}
.ask-list details[open] summary::after { transform: rotate(45deg); }
.ask-a { padding: 0 0 clamp(20px, 2.4vw, 36px); }
.ask-a p { max-width: 42rem; }

@media (min-width: 900px) {
  .ask-a { padding-left: 33.33%; }
}

/* ---------- 13 Форма ---------- */

.talk { display: grid; grid-template-columns: minmax(0, 1fr); }
.talk-call, .talk-form { padding: var(--pad-top) var(--gut) clamp(40px, 6vw, 96px); }
.talk-call { overflow: hidden; overflow: clip; }
.talk-call > p + p { margin-top: .5em; }
.talk-h {
  font: 900 var(--shout)/.86 var(--display);
  text-transform: uppercase;
  margin-bottom: clamp(18px, 2.6vw, 36px);
}
.talk-facts { margin-top: clamp(18px, 2.4vw, 32px); }
.talk-facts li {
  font: 800 clamp(1.625rem, 2.4vw, 2.625rem)/1.12 var(--display);
  letter-spacing: .01em;
  text-transform: uppercase;
}

@media (min-width: 1100px) {
  .talk { grid-template-columns: 5fr 7fr; }
  .talk-h { font-size: clamp(4.5rem, 8.6vw, 12rem); }
  .talk-form { padding-top: clamp(40px, 5vw, 80px); }
}

#lead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2vw, 28px);
}
.hp { position: absolute; left: -9999px; }
.field label {
  display: block;
  margin-bottom: .4em;
  font: 800 .875rem/1.25 var(--text);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.field input, .field textarea {
  display: block;
  width: 100%;
  min-height: 62px;
  padding: .7em .8em;
  border: 0;
  border-bottom: 6px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font: 600 1.125rem/1.35 var(--text);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--mag); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.send-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(16px, 2vw, 28px);
}
.send-note { flex: 1 1 15rem; max-width: 24rem; font-weight: 600; line-height: 1.3; }

.form-status {
  padding: .7em .9em;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  line-height: 1.3;
}
.form-status:empty { display: none; }

@media (min-width: 720px) {
  #lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide, .send-row, .form-status { grid-column: 1 / -1; }
}

.sent:focus { outline: none; }
.sent-big {
  font: 900 clamp(3.5rem, 10vw, 11rem)/.88 var(--display);
  color: var(--mag);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.sent p + p { max-width: 26rem; margin-top: .8em; font-weight: 800; }

/* ---------- Подвал ---------- */

.foot {
  overflow: hidden;
  overflow: clip;
  padding: clamp(24px, 3vw, 44px) var(--gut) clamp(24px, 3vw, 40px);
}
.foot-mark {
  font: 900 clamp(4rem, 23.5vw, 36rem)/.8 var(--display);
  color: var(--mag);
  text-transform: uppercase;
  white-space: nowrap;
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px 32px;
  margin-top: clamp(20px, 2.6vw, 36px);
}
.foot-line {
  font: 900 var(--sub)/1 var(--display);
  text-transform: uppercase;
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-nav a {
  padding: .3em 0;
  font: 800 .8125rem/1.2 var(--text);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-underline-offset: .3em;
  text-decoration-thickness: 2px;
}
.foot-nav a:hover { color: var(--ink); background: var(--white); text-decoration: none; }

/* ---------- Кнопки на телефоне ---------- */

@media (min-width: 768px) {
  .slab { white-space: nowrap; }
}
@media (max-width: 767px) {
  .slab { width: 100%; }
}

/* ---------- Движение ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js .tape-run { animation: tape-go 58s linear infinite; }
  .js .tape-run--back { animation-direction: reverse; }
  .tape:hover .tape-run { animation-play-state: paused; }

  .js [data-reveal] .ln {
    opacity: 0;
    transform: translate3d(calc(var(--from, -1) * 62vw), 0, 0);
    transition: transform .95s var(--ease) var(--lag, 0s), opacity .2s linear var(--lag, 0s);
  }
  .js [data-reveal].is-in .ln {
    opacity: 1;
    transform: none;
  }
  .js [data-reveal] .ln:nth-child(2) { --lag: .09s; }
  .js [data-reveal] .ln:nth-child(3) { --lag: .18s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slab, .slab::after, .burger i, .ask-list summary, .ask-list summary::after, .mast-nav a { transition: none; }
}