/* ============================================================
   МОЛОДОСТЬ — molodostmag.ru · DEV v1.3 (правки по аудиту 26.08)

   Заголовки — настоящий узкий гротеск Oswald (самохостинг, SIL OFL):
   ближайшая свободная замена начертанию брендбука до покупки веб-Circe.
   Механическое сжатие scaleX убрано полностью.

   Полотно — тёплая бумага --paper #F2F1EE (как в референсе клиента),
   чистый белый --card #FFFFFF оставлен «выступающим» элементам:
   обложке журнала, компьютерным стикерам, карточкам поверх фона.

   Заголовки h1/h2 — сжатое «логотипное» начертание (класс .hh
   и .hero__line, коэффициент --squeeze), с компенсацией
   словарного пробела через word-spacing.

   Первый экран — коллаж в контейнере с aspect-ratio и container
   queries: элементы позиционированы в %, кегли в cqw, поэтому
   композиция масштабируется целиком и не рассыпается в сетку.

   Палитра: #0000F4 / #FA0193 / #FFED47 на тёплой бумаге.
   ============================================================ */

:root {
  --blue: #0000f4;
  --pink: #fa0193;
  --yellow: #ffed47;
  --gray: #e5e5e5;
  --navy: #00103d;
  --wine: #550032;
  --muted: #8a8a8f;   /* приглушённый текст */
  --blue-100: #f3f9ff;
  --pink-100: #fff1f9;
  --ink: #0a0a0a;
  --paper: #f2f1ee;   /* тёплая бумага — фон полотна (референс клиента) */
  --card: #ffffff;    /* чистый белый — обложка, стикеры, «выступающие» карточки */

  --font-main: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-head: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-pixel: "Press Start 2P", "Courier New", monospace;

  --pink-ink: #c4006f;   /* читаемый розовый для мелкого текста (5.2:1 на бумаге) */
  --text-2: #444;
  --text-3: #555;
  --line: #9a9a9e;
  --h3: clamp(20px, 1.8vw, 25px);
  --radius: 12px;
  --container: 1280px;
  --pad: clamp(16px, 4vw, 48px);
  --header-h: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  overflow-x: hidden;
  overflow-x: clip;
}

html.is-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-main);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, iframe { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- типографика ---------- */

/* высокое узкое начертание заголовков (правка №3): настоящий condensed-гротеск
   вместо механического scaleX. До покупки веб-лицензии Circe — Oswald. */
.hh {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.72em;
  line-height: 1.06;
  letter-spacing: 0.005em;
  max-width: 100%;
}

/* на узких экранах кегль заголовков ниже, иначе длинные слова не помещаются */
@media (max-width: 420px) { .hh { font-size: 1.45em; } }

/* «Сотрудничество» — одно слово в 14 букв, в узкой колонке не помещается
   при общем кегле; уменьшаем ровно настолько, чтобы влезало без переноса */
@media (min-width: 901px) { .hh--tight { font-size: 1.55em; } }
@media (max-width: 420px) { .hh--tight { font-size: 1.40em; } }
@media (max-width: 340px) { .hh--tight { font-size: 1.30em; } }

h1, h2 { font-weight: 800; }
h1 { font-size: clamp(34px, 4.6vw, 60px); }
h2 { font-size: clamp(26px, 3.4vw, 44px); }
h3 {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: var(--h3);
}

.hh .c-blue { color: var(--blue); }
.hh .c-pink { color: var(--pink); }

.lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; }

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-pixel);
  font-size: 10px;
  text-transform: uppercase;
  padding: 9px 14px 7px;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  border-radius: 999px;
  margin-bottom: 26px;
  background: var(--paper);
}

.section-tag--pink { border-color: var(--pink); color: var(--pink-ink); }

.section-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.mark { padding: 0.05em 0.3em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mark--yellow { background: var(--yellow); }
.mark--blue { background: var(--blue); color: var(--paper); }
.mark--strong { font-weight: 800; text-transform: uppercase; }
.mark--pink { background: var(--pink); color: var(--ink); }

/* ---------- доступность ---------- */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--yellow); color: var(--ink);
  padding: 12px 20px; font-weight: 800;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  padding: 17px 28px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 5px 5px 0 var(--blue);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--blue); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--blue); }

.btn--ghost { background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 var(--pink); }
.btn--ghost:hover { box-shadow: 8px 8px 0 var(--pink); }
.btn--ghost:active { box-shadow: 1px 1px 0 var(--pink); }

.btn--pink { background: var(--pink); border-color: var(--pink); color: var(--ink); box-shadow: 5px 5px 0 var(--blue); }
.btn--sm { padding: 11px 18px; font-size: 13px; }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--paper); color: var(--muted); border-color: var(--gray);
  box-shadow: none; cursor: default;
}
.btn[disabled]:hover { transform: none; }

/* ---------- декор брендбука ---------- */

.star4 { position: absolute; pointer-events: none; }

.asterisk {
  position: absolute;
  pointer-events: none;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
}

/* ---------- шапка-masthead (композиция по референсу клиента) ---------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 1px solid rgba(10, 10, 10, 0.14);
}

.header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 3vw, 40px);
}

.header__logo {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--blue);
}

.header__logo img { height: 24px; width: auto; }

.nav { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 0; }

.nav a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 9px 9px;
  white-space: nowrap;
  transition: color 0.14s ease;
}

.nav a:hover { color: var(--pink); }

.nav__buy { display: none; }

.header__right {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.header__sub {
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.header__sub:hover { color: var(--pink); }

.header__ast { color: var(--blue); font-size: 20px; line-height: 1; }

.burger {
  display: none;
  grid-column: 3;
  justify-self: end;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px; padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.burger span { display: block; height: 2.5px; width: 100%; background: var(--blue); transition: transform 0.2s ease, opacity 0.2s ease; }

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* доп. пункты меню видны только в мобильном меню и футере */
.nav__extra { display: none; }

@media (max-width: 1100px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    /* flex-start + отступы: при center переполнение сверху становится
       недоступным для прокрутки (низкие экраны, ландшафт) */
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: clamp(20px, 6vh, 64px);
    padding-inline: var(--pad);
    gap: 8px;
    background: var(--paper);
    transform: translateX(100%);
    /* visibility убирает закрытое меню из таб-порядка: иначе ссылки
       ловят фокус с клавиатуры, находясь за экраном */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s 0.25s;
    z-index: 160;
    overflow-y: auto;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
  .nav.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  .nav a { font-size: clamp(22px, 5.4vw, 34px); font-weight: 800; letter-spacing: 0; color: var(--ink); }
  .nav a:hover { color: var(--blue); }
  .nav .nav__buy {
    display: block;
    background: var(--ink);
    color: var(--paper);
    padding: 14px 30px;
    margin-top: 14px;
    box-shadow: 5px 5px 0 var(--blue);
    font-size: 16px;
    letter-spacing: 0.04em;
  }
  .burger { display: flex; }
  .header__sub { display: none; }
  .header__inner { grid-template-columns: auto 1fr auto; }
  /* на телефоне шапка чистая: логотип слева, бургер справа */
  .header__right { display: none; }
  .nav__extra { display: block; }
  .nav .nav__sub {
    display: block;
    border: 2px solid var(--ink);
    padding: 12px 28px;
    margin-top: 22px;
    box-shadow: 5px 5px 0 var(--pink);
    font-size: 16px;
    letter-spacing: 0.04em;
  }
}

/* ---------- бегущая строка ---------- */

.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-block: 1.5px solid var(--ink);
  background: var(--blue);
  color: var(--paper);
  padding: 12px 0;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(14px, 1.8vw, 19px);
}

.marquee__track { display: inline-flex; gap: 2.2em; padding-right: 2.2em; animation: marquee 28s linear infinite; }
.marquee__track span { display: inline-flex; gap: 2.2em; }

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- HERO: коллаж по референсу клиента (правка №4) ----------
   Коллаж — единая композиция в контейнере с фиксированной пропорцией.
   Все элементы позиционированы в %, кегли — в cqw, поэтому на любом
   экране картинка масштабируется целиком и не рассыпается в сетку.   */

.hero {
  position: relative;
  background: var(--paper);
  padding-top: calc(var(--header-h) + clamp(18px, 2.4vw, 36px));
  padding-bottom: clamp(16px, 2vw, 28px);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(18px, 2.6vw, 44px);
  align-items: center;
  position: relative;
  z-index: 1;
  /* запас под элементы коллажа, которые намеренно свисают за его бокс
     (курсоры у окна youth.exe и наклейки) — иначе они режут линию нижней панели */
  padding-bottom: clamp(16px, 2.4vw, 30px);
}

/* крупный заголовок не должен растягивать грид-колонку */
.hero__grid > * { min-width: 0; }

/* --- левая колонка --- */

.hero__badge {
  display: inline-block;
  background: var(--blue);
  color: var(--paper);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}

.hero__title { position: relative; margin: 16px 0 20px; }

.hero__line {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(44px, 7.3vw, 106px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  position: relative;
  z-index: 2;
}

/* вторая строка чуть выходит за левый край сетки — как в референсе */
.hero__line--2 { margin-left: -0.06em; }

@media (max-width: 420px) { .hero__line--2 { margin-left: 0; } }

/* тонкая синяя рукописная петля со стрелкой поверх заголовка */
.hero__swoosh {
  position: absolute;
  left: -5%;
  top: 43%;
  width: 122%;
  height: 70%;
  color: var(--blue);
  pointer-events: none;
  z-index: 1;              /* за буквами — как в референсе, буквы перебивают линию */
  overflow: visible;
}

.hero__sub {
  color: var(--blue);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(15px, 1.62vw, 21px);
  line-height: 1.28;
  max-width: none;
  margin-bottom: 16px;
}

.hero__vibe {
  max-width: 30em;
  color: var(--text-2);
  margin-bottom: 26px;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
}

/* кнопка с отдельной ячейкой-стрелкой */
.hero__btn {
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--blue);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.hero__btn:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--blue); }
.hero__btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--blue); }

.hero__btn span {
  padding: 16px 24px;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: grid;
  place-items: center;
}

.hero__btn i {
  display: grid;
  place-items: center;
  width: 50px;
  border-left: 2px solid rgba(255, 255, 255, 0.28);
  font-style: normal;
}

/* стрелка вектором: текстовый символ ↗ подменялся эмодзи-шрифтом
   на телефонах, потому что его нет в самохостном Manrope */
.hero__btn i svg { width: 17px; height: 17px; display: block; }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* обе кнопки первого экрана — яркие, с обводкой */
.hero__btn--ghost {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--pink);
}
.hero__btn--ghost:hover { box-shadow: 9px 9px 0 var(--pink); }
.hero__btn--ghost:active { box-shadow: 2px 2px 0 var(--pink); }
.hero__btn--ghost i { border-left-color: rgba(10, 10, 10, 0.22); }

.hero__btn--dark { background: var(--ink); color: var(--paper); box-shadow: 6px 6px 0 var(--blue); }

/* приводочный крест между колонками */
.hero__cross {
  position: absolute;
  left: calc(44% + 4px);
  bottom: 16%;
  width: 26px;
  height: 26px;
  color: var(--line);
  z-index: 1;
}

@media (max-width: 920px) { .hero__cross { display: none; } }

/* ================= КОЛЛАЖ ================= */

/* на десктопе коллаж выходит за сетку и упирается в правый край окна */
@media (min-width: 921px) {
  .collage {
    margin-right: calc(-1 * (var(--pad) + max(0px, (100vw - var(--container)) / 2)));
  }
}

.collage {
  --s: 1;                       /* единый множитель кеглей внутри коллажа */
  position: relative;
  /* width НЕ задаём: элемент растягивается по грид-области и отрицательный
     margin-right реально расширяет его до края окна */
  aspect-ratio: 1 / 0.84;
  container-type: inline-size;
}

.collage > * { position: absolute; }

/* фотографии в рамках */
.cl-photo {
  border: 1px solid rgba(10, 10, 10, 0.9);
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 calc(0.5cqw) calc(1.4cqw) rgba(0, 16, 61, 0.13),
              0 calc(0.12cqw) calc(0.35cqw) rgba(0, 16, 61, 0.09);
}

.cl-photo img { width: 100%; height: 100%; object-fit: cover; }

.cl-concert { left: 61%; top: 6%; width: 33%; height: 27%; rotate: 1.3deg; z-index: 2; }
.cl-portrait { left: 71%; top: 51%; width: 25%; height: 33%; rotate: -1.6deg; z-index: 3; }
.cl-zine { left: 4%; top: 69%; width: 20%; height: 23%; rotate: -6deg; z-index: 5; }

/* --- обложка журнала --- */

.cl-cover {
  left: 10%; top: 7%; width: 50%; aspect-ratio: 1150 / 1600;
  background: var(--card);
  overflow: hidden;
  border: 1px solid rgba(10, 10, 10, 0.85);
  box-shadow: 0 calc(0.9cqw) calc(2.4cqw) rgba(0, 16, 61, 0.16),
              0 calc(0.2cqw) calc(0.6cqw) rgba(0, 16, 61, 0.1);
  rotate: -4deg;
  z-index: 6;      /* выше зин-вырезки: обложка должна читаться целиком */
}

.cl-cover img { width: 100%; height: 100%; object-fit: cover; }

/* --- наклейки и элементы компьютерной графики --- */

.cl-tape {
  left: 45%; top: 3.5%; width: 18%; height: 4.4%;
  background: #17171a;
  rotate: -3.4deg;
  z-index: 6;
  opacity: 0.93;
  clip-path: polygon(2% 22%, 13% 6%, 30% 16%, 47% 3%, 65% 17%, 83% 5%, 98% 22%, 96% 78%, 82% 95%, 63% 84%, 45% 97%, 27% 85%, 11% 96%, 1% 76%);
}

.cl-pink {
  left: 10%; top: 55%; width: 26%;
  z-index: 7;
  background: var(--pink);
  color: var(--ink);
  padding: 1.9cqw 2.2cqw;
  font-weight: 800;
  text-transform: uppercase;
  font-size: max(11px, calc(1.95cqw * var(--s, 1)));
  line-height: 1.4;
  rotate: -4deg;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 86% 100%, 0 100%);
}

.cl-mark {
  left: 62%; top: 34%; width: 14%;
  z-index: 7;
  background: var(--card);
  border: 1px solid var(--ink);
  padding: 2cqw;
  rotate: 1deg;
  box-shadow: 0 calc(0.4cqw) calc(1.1cqw) rgba(0, 16, 61, 0.12);
}

.cl-mark em { position: absolute; top: 0.9cqw; right: 1.4cqw; font-style: normal; font-weight: 700; font-size: max(10px, calc(1.5cqw * var(--s, 1))); }
.cl-mark img { width: 76%; margin: 1.2cqw auto 0; }
.cl-mark .cursor { position: absolute; right: -1.6cqw; bottom: -2.8cqw; width: calc(3.4cqw * var(--s, 1)); height: auto; }

.cl-blue {
  left: 78%; top: 35%; width: 17%;
  z-index: 8;
  background: var(--blue);
  color: var(--card);
  padding: 1.8cqw 2cqw;
  font-weight: 800;
  text-transform: uppercase;
  font-size: max(11px, calc(2cqw * var(--s, 1)));
  line-height: 1.5;
  rotate: 1deg;
}

.cl-blue .ast { color: var(--pink); font-size: calc(2.8cqw * var(--s, 1)); }

.cl-strip {
  left: 25%; top: 80%; width: 16%; height: 12.5%;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.35cqw;
  background: var(--ink);
  padding: 0.35cqw;
  rotate: -1.2deg;
}

.cl-strip img {
  width: 100%; height: 100%;
  /* без min-*: 0 картинки распирают строки грида и лист вылезает за коллаж */
  min-width: 0; min-height: 0;
  object-fit: cover; filter: grayscale(1) contrast(1.18);
}

/* декоративные звёзды коллажа */
.cl-star { z-index: 8; pointer-events: none; }
.cl-star--1 { left: 58%; top: 45%; width: 4%; color: var(--pink); }
.cl-star--2 { left: 5%; top: 38%; width: 3.2%; color: var(--blue); }

/* --- планшет и мобильный: композиция сохраняется, кегли крупнее --- */

@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__line { font-size: clamp(38px, 14.2vw, 104px); }
  .hero__sub { max-width: none; }
  .hero__swoosh { top: 47%; height: 60%; left: -4%; width: 110%; }

  .collage {
    --s: 1.42;
    aspect-ratio: 1 / 1.06;
    margin-top: clamp(28px, 5vw, 44px);
  }

  .cl-cover { left: 1%; top: 5%; width: 56%; }
  .cl-tape { left: 42%; top: 1.5%; width: 21%; height: 4.2%; }
  .cl-concert { left: 63%; top: 3%; width: 36%; height: 25%; }
  .cl-blue { left: 65%; top: 31%; width: 34%; }
  .cl-portrait { left: 65%; top: 48%; width: 34%; height: 25%; }
  .cl-pink { left: 2%; top: 54%; width: 40%; }
  .cl-mark { left: 60%; top: 72%; width: 22%; }
  .cl-zine { left: 1%; top: 74%; width: 25%; height: 19%; }
  .cl-strip { left: 28%; top: 75%; width: 24%; height: 17%; }
  .cl-star--1 { left: 55%; top: 74%; width: 6%; }
  .cl-star--2 { left: 85%; top: 72%; width: 5.4%; }
}

@media (max-width: 620px) {
  /* ПЕРВЫЙ ЭКРАН НА ТЕЛЕФОНЕ: коллаж сверху, текст и кнопки снизу,
     всё вместе укладывается в один экран (100dvh минус шапка).
     Состав коллажа тот же, что на десктопе — вырезка и плёнка не прячутся. */

  .hero {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--header-h) + 8px);
    padding-bottom: 10px;
  }

  @media (max-height: 700px) {
    .hero__vibe { display: none; }
    .hero__line { font-size: clamp(30px, 10vw, 44px); }
    .collage { aspect-ratio: 1 / 0.8; }
  }

  .hero__grid { gap: 12px; padding-bottom: 0; }

  .collage {
    order: -1;                 /* графика вперёд */
    --s: 1.18;
    aspect-ratio: 1 / 0.8;     /* компактнее: больше воздуха под текст */
    width: 94%;
    margin: 0 auto;
  }

  .hero__badge { font-size: 10px; padding: 5px 11px; letter-spacing: 0.12em; }

  .hero__title { margin: 10px 0 10px; }
  .hero__line { font-size: clamp(34px, 11.6vw, 52px); }
  /* росчерк держим в габаритах заголовка, иначе уезжает в поле справа */
  .hero__swoosh { left: -3%; width: 106%; top: 44%; height: 60%; }

  .hero__sub { font-size: 13.5px; line-height: 1.24; margin-bottom: 9px; }
  .hero__vibe { font-size: 12.5px; line-height: 1.45; margin-bottom: 14px; }

  /* кнопки в столбик на всю ширину: в два столбца длинная подпись
     переносилась на 2–3 строки и кнопки получались разной высоты */
  /* зазор с запасом: иначе смещённая тень первой кнопки
     читается как полоса-разделитель, а не как тень */
  .hero__actions { gap: 17px; flex-direction: column; align-items: stretch; }
  .hero__actions .hero__btn { width: 100%; }
  /* подпись занимает всё место до стрелки и центрируется в нём */
  .hero__btn span { flex: 1; padding: 14px 16px; font-size: 12.5px; letter-spacing: 0.04em; text-align: center; }
  .hero__btn i { width: 46px; flex-shrink: 0; }
  .hero__btn i svg { width: 15px; height: 15px; }

  /* на самых узких экранах подпись не умещалась в строку */
  @media (max-width: 345px) {
    .hero__btn span { font-size: 11px; letter-spacing: 0.01em; padding: 13px 12px; }
    .hero__btn i { width: 40px; }
  }

  /* --- раскладка коллажа: обложка слева крупно, остальное колонкой справа --- */
  .cl-cover { left: 0%; top: 4%; width: 50%; }
  .cl-tape { left: 37%; top: 1%; width: 18%; height: 4.4%; }
  .cl-concert { left: 55%; top: 3%; width: 43%; height: 26%; }
  .cl-blue { left: 55%; top: 33%; width: 30%; }
  .cl-mark { left: 87%; top: 34%; width: 13%; }
  .cl-portrait { left: 55%; top: 55%; width: 43%; height: 30%; }
  .cl-pink { left: 1%; top: 66%; width: 40%; font-size: max(10px, calc(1.9cqw * var(--s, 1))); padding: 1.7cqw 2cqw; }
  .cl-zine { left: 2%; top: 84%; width: 22%; height: 15%; }
  .cl-strip { left: 27%; top: 85%; width: 21%; height: 13%; }
  .cl-star--1 { left: 50%; top: 47%; width: 6%; }
  .cl-star--2 { left: 49%; top: 88%; width: 5.5%; }
}

/* ---------- утилиты (вместо инлайновых стилей) ---------- */

.section-lead { max-width: 38em; margin-top: 18px; color: var(--text-2); }
.section-lead--wide { max-width: none; }
.team-note { margin-top: 28px; color: var(--text-2); }
.collab-lead { margin-top: 18px; }

.section-runner { width: 36px; height: auto; margin-bottom: 12px; }

/* ---------- секции ---------- */

.section { padding-block: clamp(56px, 8vw, 112px); position: relative; background: var(--paper); }

.section--line { border-top: 1.5px solid var(--ink); }

.split > * { min-width: 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}

@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.section p + p { margin-top: 14px; }

/* ---------- фото ---------- */

.photo {
  position: relative;
  border: 1.5px solid var(--ink);
  overflow: hidden;
  background: var(--blue-100);
}

.photo img { width: 100%; height: 100%; object-fit: cover; }

.photo--tall { aspect-ratio: 3 / 4; }
.photo--wide { aspect-ratio: 16 / 10; }
.photo--square { aspect-ratio: 1; }

.photo .temp {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  font-family: var(--font-pixel);
  font-size: 10px;
  text-transform: uppercase;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 6px 9px 4px;
}

.photo--bw img { filter: grayscale(1) contrast(1.06); }

/* ---------- «нам не хватает» (правка №4б: разбить шрифтами/цветом) ---------- */

/* на средних ширинах звезда наезжала на плашку — прячем */
@media (max-width: 900px) { .why .asterisk { display: none; } }
/* на мобильном декор уменьшаем, а не выключаем (правка №4) */
@media (max-width: 760px) {
  .section .asterisk { font-size: 24px; }
  .section .star4 { width: 16px !important; }
  .section .section-runner { width: 26px; }
}

.why__head { position: relative; }

.why p b { font-weight: 800; }

/* ---------- история: таймлайн (правка №1, референс клиента) ---------- */

.timeline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: 36px;
}

@media (max-width: 720px) { .timeline { grid-template-columns: 1fr; } }

.tl-card { border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 6px 6px 0 rgba(0, 16, 61, 0.14); }

.tl-card__year {
  display: inline-block;
  background: var(--pink);
  color: var(--paper);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  padding: 6px 16px;
  margin: 16px 0 0 16px;
}

.tl-card--blue .tl-card__year { background: var(--blue); }

.tl-card h3 { padding: 14px 18px 6px; }

.tl-card p { padding: 0 18px 18px; font-size: 15.5px; color: var(--text-2); }

.tl-card .photo { border-left: 0; border-right: 0; border-bottom: 0; margin-top: 6px; aspect-ratio: 16/9; }

@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .stats { grid-template-columns: 1fr; } }

/* ---------- выпуски ---------- */

.issues__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: 40px;
}

@media (max-width: 1080px) { .issues__grid { grid-template-columns: repeat(2, 1fr); } }
/* на телефоне выпуски — горизонтальный слайдер с прилипанием */
@media (max-width: 620px) {
  .issues__grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    padding-bottom: 6px;
    scroll-padding-inline: var(--pad);
  }

  .issues__grid::-webkit-scrollbar { display: none; }
  .issues__grid .issue { flex: 0 0 76%; scroll-snap-align: start; }

}

/* шкала вместо надписи: видно, сколько карточек и где ты сейчас.
   Базовое правило объявлено ДО медиазапроса, иначе перебивает его. */
.issues__bar {
  display: none;
  gap: 6px;
  margin-top: 16px;
}

@media (max-width: 620px) { .issues__bar { display: flex; } }

.issues__bar span {
  flex: 1;
  height: 3px;
  background: var(--gray);
  transition: background 0.2s ease;
}

.issues__bar span.is-active { background: var(--blue); }

.issue {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.issue:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--pink); }

.issue .photo { border: 0; border-bottom: 1.5px solid var(--ink); aspect-ratio: 3/4; }

.issue__body { padding: 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }

.issue__title { font-size: var(--h3); }

.issue__body .btn { margin-top: auto; }

.issue-viewer { margin-top: clamp(24px, 4vw, 40px); border: 1.5px solid var(--ink); background: var(--paper); display: none; }
.issue-viewer.is-open { display: block; }
.issue-viewer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-bottom: 1.5px solid var(--ink);
  background: var(--yellow);
  font-weight: 800; text-transform: uppercase; font-size: 14px;
}
.issue-viewer__tools { display: inline-flex; align-items: center; gap: 14px; }

.issue-viewer__ext {
  font-size: 12px; font-weight: 700; text-transform: none;
  color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
  white-space: nowrap;
}

@media (max-width: 560px) { .issue-viewer__ext { display: none; } }

.issue-viewer__close {
  background: var(--paper); border: 1.5px solid var(--ink);
  font-weight: 800; font-size: 13px; padding: 8px 15px; cursor: pointer; text-transform: uppercase;
}
.issue-viewer__frame { aspect-ratio: 4 / 3; background: var(--gray); position: relative; }
.issue-viewer__frame iframe { width: 100%; height: 100%; border: 0; position: relative; z-index: 1; }
@media (min-width: 900px) { .issue-viewer__frame { aspect-ratio: 16 / 9; } }

.issue-viewer__status {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 24px; text-align: center;
  font-weight: 700; color: var(--text-2); font-size: 15px;
}
.issue-viewer__status a { color: var(--blue); }
.issue-viewer__status.is-error { z-index: 2; background: var(--gray); }

/* на телефоне рамка 4:3 в колонке непригодна для разворота — фулскрин */
@media (max-width: 899px) {
  .issue-viewer.is-open {
    position: fixed; inset: 0; z-index: 250;
    margin: 0; border: 0;
    display: flex; flex-direction: column;
    background: var(--paper);
  }
  .issue-viewer.is-open .issue-viewer__frame { flex: 1; aspect-ratio: auto; min-height: 0; }
}

/* ---------- гости ---------- */

.guests__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 24px);
  margin-top: 40px;
}

@media (max-width: 900px) { .guests__strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- направления ---------- */

.dirs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
  margin-top: 40px;
}

@media (max-width: 1080px) { .dirs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dirs { grid-template-columns: 1fr; } }

.dir {
  border: 1.5px solid var(--ink);
  padding: 0;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--card);
  box-shadow: 4px 4px 0 rgba(0, 16, 61, 0.12);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.dir:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--blue); }

.dir__en {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-pixel); font-size: 10px;
  color: var(--card); background: var(--blue);
  padding: 7px 12px 6px; text-transform: uppercase;
}
.dir__en::after { content: "✕"; font-size: 10px; opacity: 0.85; }

.dir h3 { font-size: var(--h3); padding: 16px 18px 0; }

.dir p { color: var(--text-2); font-size: 15px; padding: 10px 18px 18px; }

/* ---------- партнёры (правка №6) ---------- */

.partners {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1.5px solid var(--ink);
  border-left: 1.5px solid var(--ink);
  margin-top: 40px;
}

@media (max-width: 900px) { .partners { grid-template-columns: repeat(2, 1fr); } }

.partner {
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  min-height: 148px;
  display: grid;
  place-items: center;
  padding: 22px 18px;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease;
}

/* логотипы уже перекрашены в чёрный в файлах — подсветка фоном, а не инверсией
   (у ЛУКОЙЛа внутри знака есть белая монограмма, её нельзя инвертировать) */
.partner:hover { background: var(--blue-100); }

.partner__logo {
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.15s ease;
}

.partner:hover .partner__logo { transform: scale(1.05); }

/* оптическая подгонка: у каждого знака своя «зрительная» масса */
.partner__logo--letual { height: 30px; max-width: 78%; }
.partner__logo--omanko { height: 34px; max-width: 72%; }
.partner__logo--lukoil { height: 38px; max-width: 74%; }
.partner__logo--rovesnik { height: 52px; max-width: 46%; }
.partner__logo--orbita { height: 64px; max-width: 52%; }
.partner__logo--letnik { height: 44px; max-width: 82%; }
.partner__logo--nasvezhuyu { height: 46px; max-width: 80%; }

/* ячейка-призыв в конце ряда */
.partner--cta { text-decoration: none; color: var(--ink); }

.partner--cta:hover { background: var(--blue); color: var(--paper); }

.partner b { font-weight: 800; text-transform: uppercase; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: 0.04em; }

.partner--cta span span { display: block; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; margin-top: 10px; color: var(--pink-ink); text-transform: uppercase; }

.partner--cta:hover span span { color: var(--yellow); }

/* ---------- события ---------- */

.event-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--blue);
  margin-top: 40px;
  overflow: hidden;
}

@media (max-width: 900px) { .event-featured { grid-template-columns: 1fr; } }

.event-featured .photo { border: 0; border-right: 1.5px solid var(--ink); min-height: 340px; }

@media (max-width: 900px) { .event-featured .photo { border-right: 0; border-bottom: 1.5px solid var(--ink); } }

.event-featured__body { padding: clamp(24px, 3.4vw, 44px); }


/* кикер — мелко, сверху: контекст, а не соперник заголовку */
.event-kicker {
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pink-ink);
  margin-bottom: 10px;
}

.event-kicker .x { margin: 0 0.4em; }

/* название события — главное в карточке */
.event-name {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.06;
  letter-spacing: 0.005em;
  color: var(--blue);
  margin-bottom: 22px;
}

/* когда / где / вход — таблицей, а не столбиком абзацев */
.event-facts {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 22px;
}

.event-facts > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px 16px;
  align-items: baseline;
}

.event-facts dt {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}

.event-facts dd { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.4; }

.event-facts address { font-style: normal; }

.event-facts address span { display: block; font-weight: 500; color: var(--text-3); }

.event-facts__free { color: var(--pink-ink); }

@media (max-width: 460px) {
  .event-facts > div { grid-template-columns: 1fr; gap: 2px; }
}





.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.event-featured__program { columns: 2; gap: 24px; list-style: none; margin: 0 0 20px; font-size: 15px; }

@media (max-width: 560px) { .event-featured__program { columns: 1; } }

.event-featured__program li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 0; break-inside: avoid;
}

.event-featured__program li::before {
  content: "✦\FE0E";
  flex: 0 0 auto;
  color: var(--pink);
}

.event-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 22px);
  margin-top: clamp(24px, 4vw, 44px);
}

@media (max-width: 720px) { .event-gallery { grid-template-columns: 1fr; } }

.event-gallery .photo { aspect-ratio: 4/3; }

.events-strip { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: clamp(22px, 3vw, 34px); }

.event-chip {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  padding: 10px 15px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
}

.event-chip i { font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: 0.08em; color: var(--pink-ink); margin-right: 8px; }

.event-chip--past { opacity: 0.5; }

/* ---------- команда (правка №8: настоящие фото) ---------- */

.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: 40px;
}

@media (max-width: 900px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }

.person { border: 1.5px solid var(--ink); background: var(--paper); transition: transform 0.16s ease, box-shadow 0.16s ease; }

.person:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--pink); }

.person .photo { border: 0; border-bottom: 1.5px solid var(--ink); aspect-ratio: 3/4; }

.person__body { padding: 18px 20px; }

.person__name { font-size: var(--h3); font-weight: 800; text-transform: uppercase; }

.person__role { color: var(--blue); font-weight: 700; margin-top: 4px; font-size: 14.5px; }

/* ---------- где найти (правка №7: 20 точек) ---------- */

.places {
  margin-top: 40px;
  border-top: 1.5px solid var(--ink);
  columns: 2;
  column-gap: clamp(28px, 4vw, 64px);
}

@media (max-width: 820px) { .places { columns: 1; } }

.place {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 3px;
  padding: 13px 4px;
  min-height: 44px;
  border-bottom: 1px solid var(--gray);
  break-inside: avoid;
  text-decoration: none;
  transition: background 0.13s ease;
}

a.place:hover { background: var(--blue-100); }
a.place:hover .place__name { color: var(--blue); }

.place__name { font-weight: 800; text-transform: uppercase; font-size: clamp(16px, 1.8vw, 21px); }

/* название и тип в строку, адрес — отдельной строкой под названием */
.place__type {
  grid-column: 2; justify-self: end; text-align: right;
  font-weight: 700; font-size: 11px; letter-spacing: 0.1em;
  color: var(--blue); text-transform: uppercase;
}

.place__addr {
  grid-column: 1 / -1;
  font-weight: 500; font-size: 12.5px; letter-spacing: 0.01em;
  color: var(--text-3);
}

/* уточнение к адресу («вход через бар...») — читается как пометка, не как часть адреса */
.place__note { color: var(--blue); font-weight: 700; }

/* расхлоп списка точек: JS сворачивает на телефоне, без JS видно всё */
.places.is-collapsed {
  max-height: 430px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}

.places-toggle {
  display: none;
  width: 100%;
  margin-top: 18px;
  padding: 15px 20px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--blue);
  font-weight: 800; font-size: 13px; letter-spacing: 0.05em;
  text-transform: uppercase; cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.places-toggle:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--blue); }
.places-toggle.is-shown { display: block; }
.places-toggle i { font-style: normal; color: var(--blue); margin-left: 6px; }

/* ---------- манифест ---------- */

.stay { text-align: left; }

.stay__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}

@media (max-width: 900px) { .stay__grid { grid-template-columns: 1fr; } }

.stay__text {
  font-weight: 500;
  font-size: clamp(17px, 1.75vw, 22px);
  line-height: 1.5;
  max-width: none;
  margin-top: 22px;
}

/* заголовок манифеста держим в две строки */
.stay .hh { font-size: 1.5em; }
@media (max-width: 900px) { .stay .hh { font-size: 1.42em; } }
@media (max-width: 420px) { .stay .hh { font-size: 1.3em; } }

/* акценты манифеста — вторым, заголовочным шрифтом (правка №4) */
.stay__aside { position: relative; min-height: 240px; display: grid; align-content: center; }
.stay__aside .stay__card { z-index: 2; }

.stay__photo {
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(0, 16, 61, 0.16);
  rotate: 2deg;
  overflow: hidden;
  width: min(300px, 78%);
  margin-inline: auto;
  aspect-ratio: 3 / 4;
}
.stay__photo img { width: 100%; height: 100%; object-fit: cover; }

.stay__card {
  position: relative;
  width: min(214px, 62%);
  margin: -46px 0 0 auto;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(0, 16, 61, 0.16);
  rotate: -3deg;
  padding: 18px 16px 14px;
  text-align: center;
}

.stay__card img { width: 72px; height: auto; margin-inline: auto; }

.stay__card span {
  display: block;
  margin-top: 16px;
  font-family: var(--font-pixel);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--blue);
  line-height: 1.8;
}

.stay__aside .star4 { position: absolute; }
.stay__star--1 { top: -6%; right: 12%; width: 30px; color: var(--pink); }
.stay__star--2 { bottom: -4%; left: 8%; width: 22px; color: var(--blue); }

/* ---------- соцсети ---------- */

@media (max-width: 720px) { .socials { grid-template-columns: 1fr; } }

/* блок соцсетей: заголовок + две иконки */
.social__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 4vw, 60px); flex-wrap: wrap;
}

.social__title .hh { font-size: 1.3em; }
@media (max-width: 420px) { .social__title .hh { font-size: 1.15em; } }

.social__icons { display: flex; gap: 16px; }

.social__icons a {
  display: grid; place-items: center;
  width: 68px; height: 68px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--blue);
  box-shadow: 5px 5px 0 var(--blue);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.social__icons svg { width: 30px; height: 30px; }

.social__icons a:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--pink);
  background: var(--blue); color: var(--card);
}

/* ---------- сотрудничество ---------- */

/* ---------- сотрудничество: плакат ----------
   Секция полностью синяя — единственный цветной разворот на странице,
   поэтому взгляд цепляется за неё при скролле. */

.collab {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  color: var(--paper);
  border-top: 1.5px solid var(--ink);
  padding-bottom: clamp(96px, 11vw, 150px);   /* место под ленту */
}

.collab__noise {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
}

.collab .container { position: relative; z-index: 2; }

/* метка и заголовок на синем */
.collab__tag { border-color: var(--paper); color: var(--paper); background: transparent; }
.collab__h { color: var(--yellow); }

/* декор */
.collab__st1 { top: 7%; right: 6%; width: 40px; color: var(--yellow); }
.collab__st2 { bottom: 17%; left: 0.8%; width: 26px; color: var(--pink); }
.collab__ast { top: 52%; right: 3%; color: var(--pink); font-size: 46px; }

.collab__runner { position: absolute; pointer-events: none; opacity: 0.9; filter: brightness(0) invert(1); }
.collab__runner--1 { top: 4%; right: 16%; width: 72px; rotate: -8deg; }
.collab__runner--2 { bottom: 22%; right: 13%; width: 52px; rotate: 12deg; opacity: 0.5; }

@media (max-width: 1100px) { .collab__runner--2 { display: none; } }
@media (max-width: 900px) { .collab__st2, .collab__ast { display: none; } }
@media (max-width: 620px) { .collab__runner--1 { display: none; } }

.collab__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-top: 34px;
}

@media (max-width: 900px) { .collab__grid { grid-template-columns: 1fr; } }

/* карточка «что умеем» — светлая на синем, максимальный контраст */
.collab__skills {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 12px 12px 0 var(--pink);
  padding: clamp(24px, 3vw, 38px);
}

.collab__skills-h {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  font-size: clamp(24px, 3.1vw, 40px); line-height: 1.06; letter-spacing: 0.005em;
  color: var(--blue); margin-bottom: 20px;
}

.collab__list { list-style: none; display: grid; gap: 10px; }

.collab__list li {
  display: flex;
  align-items: baseline;      /* буллит садится на базовую линию строки */
  gap: 12px;
  font-weight: 700; font-size: clamp(16px, 1.5vw, 19px);
}

/* Выравнивание по базовой линии, а не абсолютным позиционированием:
   line-height здесь задан числом, и потомок пересчитывает его от своего
   кегля — из-за этого звезда уезжала выше строки.
   \FE0E просит текстовое начертание вместо эмодзи. */
.collab__list li::before {
  content: "✦\FE0E";
  flex: 0 0 auto;
  color: var(--pink); font-size: 15px;
}

.collab__clients { margin-top: 22px; font-size: 14.5px; color: var(--text-2); }
.collab__clients b { color: var(--blue); font-weight: 800; }

.collab__cta { display: flex; flex-direction: column; gap: 24px; }

.collab__lead { font-size: clamp(18px, 1.8vw, 23px); line-height: 1.4; font-weight: 700; }

/* стрелка ведёт взгляд к кнопке */
.collab__point { position: relative; align-self: flex-start; padding-top: 54px; }

.collab__arrow {
  position: absolute; left: -6px; top: -10px;
  width: 122px; height: auto;
  color: var(--yellow); pointer-events: none;
}

.btn--big {
  padding: 22px 34px;
  font-size: clamp(15px, 1.5vw, 18px);
  box-shadow: 7px 7px 0 var(--yellow);
  align-self: flex-start;
}

.btn--big:hover { box-shadow: 11px 11px 0 var(--yellow); }

/* стикер: кто ответит с той стороны — заполняет правый низ и снимает
   тревогу «куда я пишу» перед нажатием кнопки */
.collab__sticker {
  display: flex; align-items: center; gap: 14px;
  align-self: flex-start;
  max-width: 340px;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.25);
  padding: 12px 18px 12px 12px;
  rotate: -2.5deg;
  margin-top: 6px;
}

.collab__sticker img {
  width: 62px; height: 62px;
  object-fit: cover;
  /* кадр 3:4, лицо в верхней трети — при центровке по умолчанию срезало голову */
  object-position: 50% 8%;
  border: 1.5px solid var(--ink);
  flex-shrink: 0;
}

.collab__sticker b { display: block; font-weight: 800; font-size: 15px; text-transform: uppercase; }
.collab__sticker span { display: block; margin-top: 3px; font-size: 13px; color: var(--text-2); }

/* лента-наклейка по нижнему краю */
.collab__ribbon {
  position: absolute; left: -6%; right: -6%; bottom: clamp(22px, 3vw, 40px);
  z-index: 1;
  overflow: hidden;
  background: var(--yellow);
  color: var(--ink);
  border-block: 2px solid var(--ink);
  padding: 11px 0;
  rotate: -2deg;
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(13px, 1.5vw, 17px);
  white-space: nowrap;
}

.collab__ribbon-track {
  display: inline-flex; gap: 2.2em; padding-right: 2.2em;
  animation: marquee 26s linear infinite;
}

@media (max-width: 560px) {
  .collab__arrow { display: none; }
  .collab__point { padding-top: 0; }
  .collab__sticker { rotate: 0deg; max-width: none; }
}

/* ---------- футер ---------- */

.footer { border-top: 1.5px solid var(--ink); background: var(--paper); padding: clamp(30px, 3.6vw, 46px) 0 0; }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
  margin-bottom: 26px;
}

@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; gap: 22px; } }

.footer__logo img { height: 52px; width: auto; }

.footer__logo p { margin-top: 12px; color: var(--text-3); max-width: 34em; font-size: 14.5px; line-height: 1.5; }

.footer .footer__h { font-weight: 800; font-size: 12px; text-transform: uppercase; color: var(--pink-ink); margin-bottom: 10px; letter-spacing: 0.11em; }

.footer ul { list-style: none; }

.footer__contacts ul { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer li { margin: 0; }
.footer li a { display: inline-flex; align-items: center; min-height: 40px; }

.footer a { color: var(--ink); text-decoration: none; }

.footer a:hover { color: var(--blue); }

.footer__bottom {
  border-top: 1px solid var(--gray);
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-3);
}

/* ---------- куки ---------- */

/* полоса во всю ширину внизу: не перекрывает CTA первого экрана и меню */
.cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  background: var(--paper);
  border-top: 1.5px solid var(--ink);
  padding: 13px var(--pad);
  display: none;
}

.cookie.is-visible { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; }

.cookie p { font-size: 13.5px; margin: 0; flex: 1 1 420px; }

.cookie a { color: var(--blue); }

.cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cookie__actions .btn { font-size: 12.5px; padding: 11px 15px; box-shadow: 3px 3px 0 var(--blue); }

/* пока полоса видна — контент и футер не прячутся под ней.
   Высоту полосы меряет main.js и кладёт в --cookie-h. */
body.has-cookie { padding-bottom: calc(var(--cookie-h, 130px) + env(safe-area-inset-bottom)); }

/* на низких и узких экранах полоса не должна съедать первый экран */
@media (max-height: 720px), (max-width: 400px) {
  .cookie { padding: 10px var(--pad); }
  .cookie.is-visible { gap: 8px 12px; }
  .cookie p { font-size: 12.5px; flex: 1 1 100%; }
  .cookie__actions { flex-wrap: nowrap; width: 100%; }
  .cookie__actions .btn { flex: 1 1 auto; padding: 10px 8px; font-size: 11.5px; }
  .cookie__short { display: inline; }
  .cookie__full { display: none; }
}

/* На телефоне кнопки согласия — фирменные розовые.
   Отдельный запрос по ширине мобильной вёрстки: если привязать
   к компактной раскладке выше (max-width:400px), на телефонах
   390–430px правило не срабатывает и кнопка остаётся чёрной. */
@media (max-width: 760px) {
  .cookie__actions #cookie-accept {
    background: var(--pink);
    border-color: var(--pink);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--blue);
  }

  .cookie__actions #cookie-decline {
    background: var(--paper);
    border-color: var(--pink);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--pink);
  }
}

.cookie__short { display: none; }

.link-btn {
  background: none; border: 0; padding: 0;
  color: inherit; cursor: pointer; font: inherit;
  text-decoration: underline;
}
.link-btn:hover { color: var(--blue); }

/* ---------- появление при скролле ---------- */

/* анимация появления — надстройка, а не условие видимости:
   класс js ставится инлайн-скриптом в <head> и снимается через 3 с,
   если main.js не загрузился (см. index.html) */
.reveal { transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- карточки гостей с именами (правка №9) ---------- */

.guest-card { display: flex; flex-direction: column; gap: 0; }

.guest-card figcaption {
  border: 1.5px solid var(--ink);
  border-top: 0;
  padding: 12px 14px;
  background: var(--paper);
}

.guest-card figcaption b { display: block; font-weight: 800; text-transform: uppercase; font-size: 15px; }

.guest-card figcaption span { font-weight: 700; font-size: 11px; letter-spacing: 0.1em; color: var(--blue); text-transform: uppercase; }

.guest-card:nth-child(odd) { rotate: -1.2deg; }
.guest-card:nth-child(even) { rotate: 1.1deg; }

/* ---------- страница политики (перенесено из privacy.html) ---------- */

.legal { max-width: 860px; margin-inline: auto; padding: calc(var(--header-h) + 48px) var(--pad) 80px; }
.legal h1 {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  font-size: clamp(24px, 8.4vw, 58px); line-height: 1; letter-spacing: 0.005em;
  color: var(--blue); margin-bottom: 12px;
}
.legal .updated { color: var(--wine); font-weight: 700; margin-bottom: 36px; }
.legal h2 {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  font-size: clamp(21px, 3.1vw, 30px); line-height: 1.08; letter-spacing: 0.005em;
  color: var(--blue); margin: 40px 0 14px;
}
.legal p, .legal li { margin-bottom: 12px; }
.legal ul { padding-left: 22px; }
.legal .todo {
  border: 2px dashed var(--pink);
  border-radius: var(--radius);
  padding: 16px 20px;
  color: var(--wine);
  background: var(--pink-100);
  font-size: 15px;
}
.footer__bottom--flat { border-top: 0; padding-top: 0; }
.header__back { justify-self: end; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--blue); text-decoration: none; white-space: nowrap; }
.header__back:hover { color: var(--pink); }

/* ---------- страница 404 ---------- */

.err { min-height: 72vh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 40px) var(--pad) 60px; }
.err h1 { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: clamp(44px, 9vw, 120px); line-height: 0.95; }
.err p { margin: 18px auto 26px; max-width: 34em; color: var(--text-2); }
.err__links { display: flex; flex-wrap: wrap; gap: 12px 22px; justify-content: center; margin-top: 26px; }
.err__links a { color: var(--blue); font-weight: 700; }

/* ---------- печать ---------- */

@media print {
  .header, .marquee, .cookie, .skip-link, .burger, .issue-viewer,
  body { background: #fff; color: #000; }
  .section, .hero, .footer { background: #fff; }
  .hero { padding-top: 0; }
  .legal { padding-top: 24px; }
  .btn, .hero__btn, .mark, .event-date, .tl-card__year { box-shadow: none !important; }
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}