:root {
  --bg-dark: #2d240e;
  --wall-1: #d3b143;
  --wall-2: #c49c2b;
  --wall-3: #7a6120;

  --paper: #ece4cd;
  --paper-border: rgba(72, 57, 20, 0.28);

  --ink: #151410;
  --ink-soft: #2a2418;
  --cream: #efe7d1;

  --shadow: 0 24px 46px rgba(26, 18, 4, 0.28);
  --content-width: 1360px;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #15140f;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================
   HERO / WALL
========================= */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(22px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__wall {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.12), transparent 18%),
    radial-gradient(circle at 82% 70%, rgba(0,0,0,.20), transparent 24%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.014) 0 2px,
      rgba(0,0,0,.018) 2px 5px
    ),
    linear-gradient(120deg, var(--wall-1) 0%, var(--wall-2) 44%, var(--wall-3) 100%);
}

.hero__wall::before {
  content: "";
  position: absolute;
  inset: -4%;
  opacity: .28;
  background-image:
    radial-gradient(circle, rgba(66,49,16,.46) 0 .8px, transparent 1.1px),
    radial-gradient(circle, rgba(255,255,255,.17) 0 .55px, transparent .95px);
  background-size: 7px 7px, 13px 13px;
  mix-blend-mode: multiply;
  transform: rotate(-2deg);
}

.hero__wall::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 16%, transparent 82%, rgba(0,0,0,.28)),
    linear-gradient(0deg, rgba(0,0,0,.18), transparent 18%, transparent 82%, rgba(255,255,255,.04));
}

.wall-patch {
  position: absolute;
  display: block;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.wall-patch--1 {
  left: -2%;
  top: 9%;
  width: 240px;
  height: 150px;
  background: rgba(233, 224, 194, .44);
  clip-path: polygon(0 18%, 83% 0, 100% 54%, 34% 100%, 8% 76%);
  transform: rotate(-13deg);
}

.wall-patch--2 {
  right: -1%;
  top: 18%;
  width: 240px;
  height: 66px;
  background: rgba(123, 31, 20, .45);
  clip-path: polygon(6% 14%, 100% 0, 92% 81%, 0 100%);
  transform: rotate(-14deg);
}

.wall-patch--3 {
  left: 4%;
  bottom: 13%;
  width: 250px;
  height: 74px;
  background: rgba(62, 56, 45, .22);
  clip-path: polygon(0 18%, 94% 0, 100% 75%, 11% 100%);
  transform: rotate(-8deg);
}

.wall-patch--4 {
  right: 5%;
  bottom: 8%;
  width: 290px;
  height: 205px;
  background: rgba(44, 31, 12, .34);
  clip-path: polygon(14% 0, 100% 10%, 86% 100%, 0 80%);
  transform: rotate(10deg);
}

.hero__inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

/* =========================
   LAYOUT
========================= */

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(380px, 430px);
  gap: 26px;
  align-items: center;
}

/* =========================
   CARDS
========================= */

.paper-card,
.poster-card {
  position: relative;
  filter: drop-shadow(var(--shadow));
}

.paper-card__tape,
.poster-card__tape {
  position: absolute;
  z-index: 10;
  width: 94px;
  height: 24px;
  background: rgba(226, 216, 181, .74);
  box-shadow: inset 0 0 8px rgba(116, 99, 57, .14);
  backdrop-filter: blur(1px);
}

.paper-card__tape--left,
.poster-card__tape--left {
  top: -11px;
  left: 9%;
  transform: rotate(-8deg);
}

.paper-card__tape--right,
.poster-card__tape--right {
  top: -10px;
  right: 10%;
  transform: rotate(7deg);
}

/* =========================
   INFO BLOCK
========================= */

.hero-info {
  background:
    linear-gradient(108deg, rgba(255,255,255,.18), transparent 38%),
    var(--paper);
  border: 1px solid var(--paper-border);
  padding: clamp(42px, 5vw, 78px) clamp(34px, 5vw, 76px);
  clip-path: polygon(.9% .5%, 98.7% 0, 100% 2.2%, 99.5% 97.3%, 97.2% 100%, 1% 99.4%, 0 96%, .2% 2%);
  overflow: hidden;
}

.hero-info::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(24,20,12,.62) 0 .55px, transparent .9px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

.hero-info::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 5% 91%, rgba(74,54,17,.14), transparent 22%),
    radial-gradient(ellipse at 96% 8%, rgba(41,30,10,.10), transparent 18%);
}

.hero-info > * {
  position: relative;
  z-index: 2;
}

.hero-info__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  font-family: "Oswald", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(19px, 1.55vw, 25px);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hero-info__dot {
  opacity: .42;
}

.hero-info__title {
  margin: 0 0 22px;
  font-family: "Oswald", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(92px, 7.3vw, 140px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.hero-info__lead {
  margin: 0 0 36px;
  max-width: 620px;
  font-family: "PT Serif", Georgia, serif;
  font-size: clamp(26px, 2vw, 36px);
  line-height: 1.16;
  color: var(--ink-soft);
}

.hero-info__place {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 38px;
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.26;
}

.hero-info__place strong {
  font-family: "Oswald", "Arial Narrow", Arial, sans-serif;
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* =========================
   POSTER BLOCK
========================= */

.hero-poster {
  align-self: stretch;
}

.poster-card__frame {
  height: 100%;
  min-height: 760px;
  background: #e0be2d;
  border: 1px solid rgba(72, 57, 20, .24);
  padding: 16px 16px 14px;
  clip-path: polygon(.9% .5%, 98.7% 0, 100% 2.2%, 99.5% 97.3%, 97.2% 100%, 1% 99.4%, 0 96%, .2% 2%);
  overflow: hidden;
}

.poster-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

/* =========================
   BUTTONS
========================= */

.ticket-button,
.sticky-ticket {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--cream);
  background: linear-gradient(180deg, #1a1813, #0f0e0b);
  font-family: "Oswald", "Arial Narrow", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  border: 2px solid rgba(238,231,210,.90);
  overflow: visible;
}

.ticket-button {
  width: fit-content;
  min-width: 300px;
  padding: 17px 24px 17px 22px;
  font-size: 20px;
  clip-path: polygon(0 11%, 92% 0, 100% 9%, 100% 88%, 91% 100%, 0 100%);
  transform: rotate(-1deg);
  transition: transform .18s ease, background .18s ease;
}

.ticket-button::before,
.sticky-ticket::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 42px;
  top: -10px;
  height: 10px;
  border: 2px solid rgba(238,231,210,.88);
  border-bottom: none;
  background: rgba(238,231,210,.04);
  transform: skewX(-43deg);
  transform-origin: bottom left;
  pointer-events: none;
}

.ticket-button::after,
.sticky-ticket::after {
  content: "";
  position: absolute;
  top: 5px;
  right: -11px;
  bottom: 9px;
  width: 11px;
  border: 2px solid rgba(238,231,210,.88);
  border-left: none;
  background: rgba(238,231,210,.035);
  transform: skewY(-42deg);
  transform-origin: top left;
  pointer-events: none;
}

.ticket-button:hover {
  background: linear-gradient(180deg, #28251e, #15130f);
  transform: rotate(0deg) translateY(-1px);
}

.ticket-button__arrow {
  font-size: 28px;
  line-height: 1;
}

.sticky-ticket {
  position: fixed;
  right: 28px;
  bottom: 24px;
  z-index: 100;
  min-width: 235px;
  padding: 15px 19px;
  font-size: 17px;
  clip-path: polygon(0 11%, 92% 0, 100% 9%, 100% 88%, 91% 100%, 0 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(28px) rotate(-1deg);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.sticky-ticket.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) rotate(-1deg);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding:
      8px
      8px
      calc(92px + env(safe-area-inset-bottom));
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hero-poster {
    order: 1;
  }

  .hero-info {
    order: 2;
    padding: 14px 14px 16px;
  }

  .poster-card__frame {
    min-height: 0;
    height: auto;
    padding: 8px 8px 0;
  }

  .poster-card__frame img {
    width: 100%;
    height: auto;
    max-height: 46svh;
    margin: 0 auto;
    object-fit: contain;
  }

  .hero-info__meta {
    margin-bottom: 6px;
    gap: 8px;
    font-size: 11px;
  }

  .hero-info__title {
    margin-bottom: 6px;
    font-size: clamp(44px, 12vw, 58px);
    line-height: .94;
  }

  .hero-info__lead {
    margin-bottom: 10px;
    font-size: clamp(13px, 3.8vw, 16px);
    line-height: 1.15;
  }

  .hero-info__place {
    gap: 3px;
    margin-bottom: 0;
    font-size: 13px;
  }

  .hero-info__place strong {
    font-size: 1.2em;
  }

  .ticket-button--desktop {
    display: none;
  }

  .sticky-ticket,
  .sticky-ticket.is-visible {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    min-width: 0;
    font-size: 16px;
    padding: 14px 18px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: rotate(-1deg);
  }
}

@media (max-width: 767px) and (max-height: 740px) {
  .poster-card__frame img {
    max-height: 40svh;
  }

  .hero-info {
    padding: 12px 12px 14px;
  }

  .hero-info__meta {
    font-size: 10px;
    margin-bottom: 4px;
  }

  .hero-info__title {
    font-size: clamp(38px, 10.5vw, 50px);
    margin-bottom: 4px;
  }

  .hero-info__lead {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .hero-info__place {
    font-size: 12px;
  }
}


/* =========================================================
   HERO — ROUND 6
   poster without backing + overlap
   ========================================================= */

/* ---------- DESKTOP ---------- */
@media (min-width: 768px) {

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 0;
    align-items: center;
  }

  .hero-info {
    position: relative;
    z-index: 2;
  }

  .hero-poster {
    position: relative;
    z-index: 3;
    margin-left: -34px;
    transform: rotate(-1.9deg) translateY(10px);
    align-self: center;
  }

  .poster-card {
    filter: drop-shadow(0 26px 40px rgba(22, 16, 5, .34));
  }

  .poster-card__frame {
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    clip-path: none !important;
    overflow: visible !important;
  }

  .poster-card__frame img {
    display: block;
    width: min(100%, 430px);
    height: auto !important;
    max-height: none !important;
    margin: 0 auto;
    object-fit: contain !important;
    object-position: center top !important;
  }

  .paper-card__tape,
  .poster-card__tape {
    width: 96px;
    height: 24px;
  }

  .paper-card__tape--left {
    top: -12px;
    left: 14px;
    transform: rotate(8deg);
  }

  .paper-card__tape--right {
    top: -9px;
    left: 126px;
    right: auto;
    transform: rotate(-6deg);
  }

  .poster-card__tape--left {
    top: -12px;
    left: 36px;
    transform: rotate(-8deg);
  }

  .poster-card__tape--right {
    top: -13px;
    right: 28px;
    transform: rotate(7deg);
  }
}


/* ---------- MOBILE ---------- */
@media (max-width: 767px) {

  .hero__grid {
    gap: 12px;
  }

  .hero-poster {
    transform: rotate(-1deg);
  }

  .poster-card__frame {
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    clip-path: none !important;
    overflow: visible !important;
  }

  .poster-card__frame img {
    width: min(100%, 330px);
    height: auto !important;
    max-height: 50svh !important;
    margin: 0 auto;
    object-fit: contain !important;
  }

  .paper-card__tape,
  .poster-card__tape {
    width: 72px;
    height: 20px;
  }

  .paper-card__tape--left {
    top: -9px;
    left: 10px;
    transform: rotate(7deg);
  }

  .paper-card__tape--right {
    top: -7px;
    left: 92px;
    right: auto;
    transform: rotate(-6deg);
  }

  .poster-card__tape--left {
    top: -9px;
    left: 18px;
    transform: rotate(-8deg);
  }

  .poster-card__tape--right {
    top: -9px;
    right: 18px;
    transform: rotate(7deg);
  }
}


/* =========================================================
   HERO — ROUND 7
   poster bigger + compact mobile
   ========================================================= */


/* Убираем скотч с бежевого инфоблока полностью */
.paper-card__tape {
  display: none !important;
}


/* ---------- DESKTOP ---------- */

@media (min-width: 768px) {

  .hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      560px;

    gap: 0;
    align-items: center;
  }


  .hero-info {
    position: relative;
    z-index: 2;
  }


  .hero-poster {
    position: relative;
    z-index: 3;

    width: 560px;

    margin-left: -58px;

    transform:
      rotate(-1.7deg)
      translateY(8px);
  }


  .poster-card__frame img {
    width: 560px;
    max-width: 560px;

    height: auto !important;

    object-fit: contain !important;
  }

}


/* ---------- MOBILE ---------- */

@media (max-width: 767px) {

  .hero {
    padding:
      7px
      7px
      calc(88px + env(safe-area-inset-bottom));
  }


  .hero__grid {
    gap: 0;
  }


  /*
   * Афиша чуть крупнее и заходит нижним краем
   * на бежевый лист.
   */
  .hero-poster {
    position: relative;

    z-index: 3;

    width: 100%;

    margin-bottom: -16px;

    transform:
      rotate(-1deg);
  }


  .poster-card__frame img {
    width: min(100%, 365px);

    max-height: 48svh !important;

    margin-inline: auto;

    height: auto !important;
  }


  /*
   * Инфоблок ниже по высоте.
   */
  .hero-info {
    position: relative;

    z-index: 2;

    padding:
      22px
      12px
      11px;
  }


  .hero-info__meta {
    margin-bottom: 3px;

    gap: 7px;

    font-size: 10px;
  }


  .hero-info__title {
    margin-bottom: 3px;

    font-size:
      clamp(
        38px,
        10.2vw,
        47px
      );

    line-height: .92;
  }


  .hero-info__lead {
    margin-bottom: 7px;

    font-size:
      clamp(
        11px,
        3.3vw,
        13px
      );

    line-height: 1.12;
  }


  .hero-info__place {
    gap: 1px;

    margin-bottom: 0;

    font-size:
      clamp(
        11px,
        3.1vw,
        12px
      );

    line-height: 1.18;
  }


  .hero-info__place strong {
    font-size: 1.16em;
  }

}


/* Низкие мобильные экраны */

@media (max-width: 767px) and (max-height: 740px) {

  .poster-card__frame img {
    width: min(100%, 345px);

    max-height: 43svh !important;
  }


  .hero-info {
    padding:
      20px
      11px
      9px;
  }


  .hero-info__title {
    font-size:
      clamp(
        35px,
        9.6vw,
        43px
      );
  }


  .hero-info__lead {
    font-size: 10.5px;
  }


  .hero-info__place {
    font-size: 10.5px;
  }

}


/* =========================================================
   MOBILE — poster full width
   ========================================================= */

@media (max-width: 767px) {

  .hero-poster {
    width: calc(100% - 10px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -16px;
  }

  .poster-card__frame {
    width: 100%;
  }

  .poster-card__frame img {
    display: block;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 !important;

    object-fit: contain !important;
  }

  .hero-info {
    width: 100%;
  }

}


/* перебиваем старое ограничение и для низких экранов */
@media (max-width: 767px) and (max-height: 740px) {

  .poster-card__frame img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
  }

}


/* =========================================================
   MOBILE — compact info block
   ========================================================= */

@media (max-width: 767px) {

  /* ИСТОРИЯ КИНО в одну строку */
  .hero-info__title br {
    display: none;
  }

  .hero-info__title {
    white-space: nowrap;
    font-size: clamp(31px, 8.9vw, 40px);
    line-height: 1;
    letter-spacing: -.045em;
    margin-bottom: 4px;
  }

  .hero-info {
    padding:
      20px
      11px
      9px;
  }

  .hero-info__meta {
    margin-bottom: 3px;
    font-size: 9.5px;
  }

  .hero-info__lead {
    margin-bottom: 6px;
    font-size: clamp(10.5px, 3vw, 12px);
    line-height: 1.1;
  }

  .hero-info__place {
    gap: 0;
    font-size: clamp(10.5px, 3vw, 12px);
    line-height: 1.13;
  }

  .hero-info__place strong {
    font-size: 1.14em;
  }

}


/* На совсем узких телефонах */
@media (max-width: 370px) {

  .hero-info__title {
    font-size: 29px;
  }

}


/* =========================================================
   SECOND SCREEN — ABOUT
   ========================================================= */

.about-section {
  position: relative;
  background:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,.10), transparent 18%),
    radial-gradient(circle at 82% 75%, rgba(0,0,0,.05), transparent 24%),
    linear-gradient(180deg, #ddd2b4 0%, #e7deca 18%, #e8dfcb 100%);
  color: #1a1814;
  padding:
    clamp(56px, 8vw, 110px)
    clamp(18px, 4vw, 34px)
    clamp(64px, 8vw, 110px);
  overflow: hidden;
}

.about-section__fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(201,162,49,1) 0%,
      rgba(214,186,89,.88) 28%,
      rgba(229,216,184,.56) 68%,
      rgba(231,222,202,0) 100%
    );
}

.about-section__inner {
  position: relative;
  z-index: 2;
  width: min(100%, 1320px);
  margin: 0 auto;
}

.about-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(340px, 520px);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.about-section__content {
  position: relative;
}

.about-section__eyebrow {
  margin: 0 0 16px;
  font-family: "Oswald", "Arial Narrow", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(28,24,18,.72);
}

.about-section__title {
  margin: 0 0 18px;
  font-family: "Oswald", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(38px, 4.2vw, 68px);
  line-height: .98;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #161410;
}

.about-section__subtitle {
  margin: 0 0 20px;
  font-family: "PT Serif", Georgia, serif;
  font-size: clamp(24px, 2.3vw, 38px);
  line-height: 1.15;
  font-weight: 700;
  color: #262018;
}

.about-section__text {
  margin: 0;
  max-width: 760px;
  font-family: "PT Serif", Georgia, serif;
  font-size: clamp(20px, 1.55vw, 26px);
  line-height: 1.5;
  color: #312a21;
}

.about-photo {
  margin: 0;
}

.about-photo__frame {
  position: relative;
  background: #d9d0bd;
  padding: 14px;
  border: 1px solid rgba(65,54,34,.26);
  box-shadow:
    0 22px 38px rgba(34,26,12,.16),
    inset 0 0 0 2px rgba(92,75,45,.10);
}

.about-photo__frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(79,63,38,.16);
  pointer-events: none;
}

.about-photo__frame img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    sepia(.22)
    contrast(.96)
    brightness(.98);
}

@media (max-width: 767px) {
  .about-section {
    padding:
      44px
      12px
      54px;
  }

  .about-section__fade {
    height: 86px;
  }

  .about-section__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-section__content {
    order: 1;
  }

  .about-photo {
    order: 2;
  }

  .about-section__eyebrow {
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: .12em;
  }

  .about-section__title {
    margin-bottom: 12px;
    font-size: clamp(28px, 8.4vw, 42px);
    line-height: 1.02;
  }

  .about-section__subtitle {
    margin-bottom: 12px;
    font-size: clamp(18px, 5.2vw, 24px);
    line-height: 1.16;
  }

  .about-section__text {
    font-size: clamp(15px, 4vw, 18px);
    line-height: 1.42;
  }

  .about-photo__frame {
    padding: 10px;
  }
}


/* =========================================================
   SECOND SCREEN — PAPER ALBUM / TORN EDGE
   ========================================================= */

.about-section {
  position: relative;

  margin-top: -1px;

  padding:
    clamp(105px, 9vw, 150px)
    clamp(20px, 4vw, 36px)
    clamp(80px, 9vw, 130px);

  background:
    radial-gradient(
      circle at 18% 23%,
      rgba(255,255,255,.16),
      transparent 23%
    ),
    radial-gradient(
      circle at 82% 72%,
      rgba(87,66,32,.06),
      transparent 28%
    ),
    #e7deca;

  color: #1b1915;

  isolation: isolate;
}


/*
 * Рваный верх большого бумажного листа.
 * Он наползает на жёлтую стену первого экрана.
 */
.about-section::before {
  content: "";

  position: absolute;

  z-index: 2;

  left: 0;
  right: 0;
  top: -42px;

  height: 48px;

  background: #e7deca;

  clip-path: polygon(
    0 38%,
    2% 47%,
    4% 31%,
    6% 45%,
    8% 24%,
    10% 42%,
    13% 30%,
    15% 49%,
    18% 34%,
    20% 43%,
    23% 25%,
    25% 47%,
    28% 32%,
    31% 45%,
    34% 28%,
    37% 48%,
    40% 34%,
    43% 43%,
    46% 26%,
    49% 46%,
    52% 31%,
    55% 49%,
    58% 34%,
    61% 44%,
    64% 29%,
    67% 48%,
    70% 32%,
    73% 46%,
    76% 26%,
    79% 45%,
    82% 33%,
    85% 49%,
    88% 30%,
    91% 44%,
    94% 27%,
    97% 46%,
    100% 34%,
    100% 100%,
    0 100%
  );

  filter:
    drop-shadow(
      0 -5px 5px
      rgba(59,42,13,.12)
    );
}


/* волокна/грязь по линии разрыва */
.about-section::after {
  content: "";

  position: absolute;

  z-index: 1;

  left: 0;
  right: 0;
  top: -17px;

  height: 42px;

  pointer-events: none;

  opacity: .23;

  background:
    repeating-radial-gradient(
      ellipse at 50% 0,
      rgba(72,55,27,.30) 0 1px,
      transparent 1px 6px
    );
}


.about-section__inner {
  position: relative;

  z-index: 3;

  width:
    min(
      100%,
      1320px
    );

  margin:
    0
    auto;
}


.about-section__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(390px, 540px);

  align-items: center;

  gap:
    clamp(
      42px,
      6vw,
      90px
    );
}


/* =========================
   COPY
========================= */

.about-section__content {
  max-width: 720px;
}


.about-section__subtitle {
  margin:
    0
    0
    30px;

  max-width: 760px;

  font-family:
    "Oswald",
    "Arial Narrow",
    Arial,
    sans-serif;

  font-size:
    clamp(
      43px,
      4.1vw,
      68px
    );

  font-weight: 600;

  line-height: 1;

  letter-spacing: -.025em;

  text-transform: uppercase;

  color: #171510;
}


.about-section__text {
  margin: 0;

  max-width: 690px;

  font-family:
    "PT Serif",
    Georgia,
    serif;

  font-size:
    clamp(
      21px,
      1.55vw,
      27px
    );

  line-height: 1.52;

  color: #342d23;
}


/* =========================
   OLD PHOTO
========================= */

.about-photo {
  position: relative;

  margin: 0;

  transform:
    rotate(1.1deg);
}


.about-photo__mount {
  position: relative;

  padding:
    18px
    18px
    26px;

  background:
    #d7cdb5;

  border:
    1px solid
    rgba(66,53,31,.28);

  box-shadow:
    0 26px 44px
    rgba(51,37,15,.18),
    inset 0 0 0 2px
    rgba(255,255,255,.16);
}


.about-photo__mount::before {
  content: "";

  position: absolute;

  inset: 9px;

  border:
    1px solid
    rgba(76,62,37,.17);

  pointer-events: none;
}


.about-photo__mount::after {
  content: "";

  position: absolute;

  inset: 18px 18px 26px;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 13% 9%,
      rgba(112,76,32,.11),
      transparent 25%
    ),
    radial-gradient(
      ellipse at 88% 89%,
      rgba(68,45,20,.08),
      transparent 26%
    );

  mix-blend-mode: multiply;
}


.about-photo__mount img {
  display: block;

  width: 100%;
  height: auto;

  filter:
    sepia(.20)
    grayscale(.10)
    contrast(.96)
    brightness(.98);
}


/* =========================================================
   SECOND SCREEN — MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .about-section {
    padding:
      70px
      14px
      64px;
  }


  .about-section::before {
    top: -28px;

    height: 34px;
  }


  .about-section::after {
    top: -12px;

    height: 28px;
  }


  .about-section__grid {
    grid-template-columns: 1fr;

    gap: 26px;
  }


  .about-section__content {
    order: 1;

    max-width: none;
  }


  .about-photo {
    order: 2;

    transform:
      rotate(.7deg);
  }


  .about-section__subtitle {
    margin-bottom: 16px;

    font-size:
      clamp(
        31px,
        8.8vw,
        44px
      );

    line-height: 1.02;
  }


  .about-section__text {
    font-size:
      clamp(
        16px,
        4.2vw,
        19px
      );

    line-height: 1.42;
  }


  .about-photo__mount {
    padding:
      11px
      11px
      17px;
  }


  .about-photo__mount::after {
    inset:
      11px
      11px
      17px;
  }

}


/* =========================================================
   SECOND SCREEN — ROUND 2
   photo left / text right / smaller subtitle
   ========================================================= */

/* ---------- DESKTOP ---------- */
@media (min-width: 768px) {

  .about-section__grid {
    grid-template-columns:
      minmax(360px, 520px)
      minmax(0, 1fr);

    gap:
      clamp(34px, 4vw, 72px);

    align-items: center;
  }

  .about-photo {
    order: 1;
    transform: rotate(-1deg);
  }

  .about-section__content {
    order: 2;
    max-width: 680px;
  }

  .about-section__subtitle {
    margin: 0 0 18px;

    max-width: 680px;

    font-family:
      "PT Serif",
      Georgia,
      serif;

    font-size:
      clamp(
        26px,
        2.2vw,
        40px
      );

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: 0;

    text-transform: none;
  }

  .about-section__text {
    max-width: 650px;

    font-size:
      clamp(
        18px,
        1.35vw,
        24px
      );

    line-height: 1.5;
  }

}


/* ---------- MOBILE ---------- */
@media (max-width: 767px) {

  .about-section__content {
    order: 1;
  }

  .about-photo {
    order: 2;
  }

  .about-section__subtitle {
    margin-bottom: 12px;

    font-family:
      "PT Serif",
      Georgia,
      serif;

    font-size:
      clamp(
        22px,
        6.2vw,
        30px
      );

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: 0;

    text-transform: none;
  }

  .about-section__text {
    font-size:
      clamp(
        15px,
        4vw,
        18px
      );

    line-height: 1.42;
  }

}


/* =========================================================
   SECOND SCREEN — ROUND 3
   torn paper transition
   ========================================================= */

.about-section {
  position: relative;

  margin-top: -34px !important;

  padding-top: clamp(118px, 10vw, 158px) !important;

  overflow: visible !important;
}


/*
 * Основной рваный край.
 * Большой бежевый лист как будто заходит
 * поверх жёлтой стены первого экрана.
 */
.about-section::before {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  top: -36px;

  height: 56px;

  background: #e7deca;

  clip-path: polygon(
    0 78%,
    2% 63%,
    4% 82%,
    6% 58%,
    8% 79%,
    10% 54%,
    12% 75%,
    14% 57%,
    16% 81%,
    18% 60%,
    20% 76%,
    22% 56%,
    24% 80%,
    26% 59%,
    28% 77%,
    30% 55%,
    32% 79%,
    34% 60%,
    36% 82%,
    38% 58%,
    40% 77%,
    42% 56%,
    44% 80%,
    46% 61%,
    48% 78%,
    50% 55%,
    52% 81%,
    54% 59%,
    56% 76%,
    58% 57%,
    60% 80%,
    62% 60%,
    64% 78%,
    66% 56%,
    68% 82%,
    70% 58%,
    72% 76%,
    74% 54%,
    76% 79%,
    78% 60%,
    80% 81%,
    82% 57%,
    84% 77%,
    86% 55%,
    88% 80%,
    90% 61%,
    92% 76%,
    94% 58%,
    96% 82%,
    98% 63%,
    100% 79%,
    100% 100%,
    0 100%
  );

  box-shadow:
    0 10px 18px rgba(57, 42, 15, .12);

  z-index: 4;
}


/*
 * Мягкая тень/волокна под разрывом,
 * чтобы край не был пластмассовым.
 */
.about-section::after {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  top: -11px;

  height: 22px;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(86, 66, 32, .00) 0 6px,
      rgba(86, 66, 32, .08) 6px 8px,
      rgba(86, 66, 32, .00) 8px 14px
    );

  opacity: .45;
  filter: blur(.25px);

  z-index: 3;
  pointer-events: none;
}


/* Мобилка — край пониже и компактнее */
@media (max-width: 767px) {

  .about-section {
    margin-top: -24px !important;
    padding-top: 84px !important;
  }

  .about-section::before {
    top: -24px;
    height: 38px;
  }

  .about-section::after {
    top: -8px;
    height: 16px;
    opacity: .38;
  }

}


/* =========================================================
   SECOND SCREEN — ROUND 4
   real torn paper edge via SVG
   ========================================================= */

.about-section {
  margin-top: -40px !important;
  padding-top: clamp(126px, 10vw, 164px) !important;
}

/* выключаем старую геометрию */
.about-section::before {
  left: 0;
  right: 0;
  top: -50px;
  height: 74px;

  background:
    url("../ui/torn-edge-top.svg")
    center top / 100% 100% no-repeat !important;

  clip-path: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* мягкая тень под оторванным краем */
.about-section::after {
  left: 0;
  right: 0;
  top: 8px;
  height: 24px;

  background:
    linear-gradient(
      180deg,
      rgba(70, 52, 22, .18) 0%,
      rgba(70, 52, 22, .09) 32%,
      rgba(70, 52, 22, 0) 100%
    ) !important;

  filter: blur(5px);
  opacity: .55 !important;
}

@media (max-width: 767px) {
  .about-section {
    margin-top: -28px !important;
    padding-top: 88px !important;
  }

  .about-section::before {
    top: -30px;
    height: 44px;
    background-size: 100% 100% !important;
  }

  .about-section::after {
    top: 6px;
    height: 16px;
    filter: blur(4px);
    opacity: .48 !important;
  }
}


/* =========================================================
   THIRD SCREEN — FEATURES / FILMOSCOPE
   ========================================================= */

.features-section {
  position: relative;

  padding:
    clamp(88px, 9vw, 140px)
    20px
    clamp(90px, 10vw, 150px);

  overflow: hidden;

  background:
    radial-gradient(
      circle at 14% 16%,
      rgba(255,255,255,.10),
      transparent 19%
    ),
    radial-gradient(
      circle at 84% 72%,
      rgba(28,19,5,.25),
      transparent 28%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.014) 0 2px,
      rgba(0,0,0,.018) 2px 5px
    ),
    linear-gradient(
      118deg,
      #d7b342 0%,
      #bd9228 48%,
      #715719 100%
    );

  color: #15130e;
}


.features-section::before {
  content: "";

  position: absolute;
  inset: -5%;

  pointer-events: none;

  opacity: .26;

  background-image:
    radial-gradient(
      circle,
      rgba(46,32,7,.55) 0 .7px,
      transparent 1.1px
    ),
    radial-gradient(
      circle,
      rgba(255,255,255,.18) 0 .5px,
      transparent .9px
    );

  background-size:
    7px 7px,
    13px 13px;

  transform: rotate(-1.5deg);

  mix-blend-mode: multiply;
}


.features-section::after {
  content: "";

  position: absolute;

  width: 430px;
  height: 110px;

  right: -85px;
  top: 10%;

  background:
    rgba(92,25,18,.30);

  transform:
    rotate(-10deg);

  clip-path:
    polygon(
      0 18%,
      96% 0,
      100% 72%,
      8% 100%
    );

  pointer-events: none;
}


.features-section__inner {
  position: relative;

  z-index: 2;

  width:
    min(
      100%,
      1380px
    );

  margin: 0 auto;
}


/* =========================
   HEADING
========================= */

.features-heading {
  max-width: 900px;

  margin:
    0
    0
    clamp(50px, 6vw, 82px);
}


.features-heading__eyebrow {
  margin:
    0
    0
    12px;

  font-family:
    "Oswald",
    "Arial Narrow",
    Arial,
    sans-serif;

  font-size: 17px;

  font-weight: 600;

  letter-spacing: .14em;

  text-transform: uppercase;

  color:
    rgba(24,19,9,.68);
}


.features-heading__title {
  margin: 0;

  font-family:
    "Oswald",
    "Arial Narrow",
    Arial,
    sans-serif;

  font-size:
    clamp(
      48px,
      5.5vw,
      82px
    );

  font-weight: 700;

  line-height: .98;

  letter-spacing: -.035em;

  text-transform: uppercase;
}


/* =========================
   FILM GALLERIES
========================= */

.film-gallery {
  position: relative;

  overflow: visible;

  margin:
    0
    0
    clamp(46px, 6vw, 78px);
}


.film-gallery .swiper-wrapper {
  display: grid;
}


.film-gallery--musicians .swiper-wrapper {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 20px;
}


.film-gallery--concerts .swiper-wrapper {
  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  gap: 18px;
}


.film-gallery--concerts .swiper-slide:nth-child(-n+3) {
  grid-column:
    span 4;
}


.film-gallery--concerts .swiper-slide:nth-child(n+4) {
  grid-column:
    span 3;
}


.film-gallery .swiper-slide {
  width: auto;

  height: auto;
}


.film-card {
  position: relative;

  height: 100%;

  padding:
    18px
    10px;

  background:
    #11110f;

  box-shadow:
    0 20px 32px
    rgba(31,20,4,.25);

  transition:
    transform .5s ease,
    opacity .5s ease;
}


/* отверстия плёнки */
.film-card::before,
.film-card::after {
  content: "";

  position: absolute;

  left: 12px;
  right: 12px;

  height: 7px;

  background:
    repeating-linear-gradient(
      90deg,
      #d3b23e 0 10px,
      transparent 10px 20px
    );

  opacity: .78;

  pointer-events: none;
}


.film-card::before {
  top: 5px;
}


.film-card::after {
  bottom: 5px;
}


.film-card__photo {
  position: relative;

  overflow: hidden;

  background:
    #282620;
}


.film-gallery--musicians
.film-card__photo {
  aspect-ratio:
    3 / 4;
}


.film-gallery--concerts
.film-card__photo {
  aspect-ratio:
    4 / 3;
}


.film-card__photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(.92)
    contrast(1.03);
}


.film-gallery--musicians
.swiper-slide:nth-child(1)
.film-card {
  transform:
    rotate(-1.3deg);
}


.film-gallery--musicians
.swiper-slide:nth-child(2)
.film-card {
  transform:
    rotate(.8deg)
    translateY(8px);
}


.film-gallery--musicians
.swiper-slide:nth-child(3)
.film-card {
  transform:
    rotate(-.5deg);
}


.film-gallery--musicians
.swiper-slide:nth-child(4)
.film-card {
  transform:
    rotate(1.2deg)
    translateY(10px);
}


/* =========================
   ADVANTAGE STICKERS
========================= */

.advantage-strip {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 16px;

  margin:
    0
    0
    clamp(74px, 8vw, 116px);
}


.advantage-card {
  position: relative;

  min-height: 230px;

  padding:
    29px
    25px
    25px;

  background:
    #e8dfc9;

  border:
    1px solid
    rgba(56,43,18,.24);

  box-shadow:
    0 15px 28px
    rgba(42,29,7,.16);

  clip-path:
    polygon(
      1% 2%,
      98% 0,
      100% 96%,
      96% 100%,
      0 98%
    );
}


.advantage-card:nth-child(1) {
  transform:
    rotate(-1.2deg);
}


.advantage-card:nth-child(2) {
  transform:
    rotate(.7deg)
    translateY(8px);
}


.advantage-card:nth-child(3) {
  transform:
    rotate(-.6deg);
}


.advantage-card:nth-child(4) {
  transform:
    rotate(1deg)
    translateY(5px);
}


.advantage-card__number {
  display: block;

  margin-bottom: 17px;

  font-family:
    "Oswald",
    Arial,
    sans-serif;

  font-size: 15px;

  font-weight: 600;

  letter-spacing: .12em;

  opacity: .48;
}


.advantage-card h3 {
  margin:
    0
    0
    13px;

  font-family:
    "Oswald",
    "Arial Narrow",
    Arial,
    sans-serif;

  font-size:
    clamp(
      23px,
      1.8vw,
      31px
    );

  line-height: 1;

  text-transform: uppercase;
}


.advantage-card p {
  margin: 0;

  font-family:
    "PT Serif",
    Georgia,
    serif;

  font-size:
    17px;

  line-height: 1.38;
}


/* =========================
   BIG PROOF STICKER
========================= */

.features-proof {
  position: relative;

  max-width: 1160px;

  margin:
    clamp(52px, 6vw, 82px)
    auto
    0;

  padding:
    clamp(28px, 4vw, 45px)
    clamp(30px, 5vw, 64px);

  display: flex;

  align-items: center;

  gap:
    clamp(
      22px,
      4vw,
      52px
    );

  color:
    #ede5cf;

  background:
    #11110e;

  border:
    2px solid
    rgba(238,230,205,.88);

  transform:
    rotate(-.5deg);

  clip-path:
    polygon(
      0 7%,
      97% 0,
      100% 9%,
      99% 93%,
      96% 100%,
      1% 97%
    );

  box-shadow:
    0 22px 35px
    rgba(28,18,3,.25);
}


.features-proof__mark {
  flex:
    0
    0
    auto;

  font-family:
    "Oswald",
    Arial,
    sans-serif;

  font-size:
    clamp(
      34px,
      4vw,
      58px
    );

  font-weight: 700;

  letter-spacing: .04em;
}


.features-proof p {
  margin: 0;

  font-family:
    "PT Serif",
    Georgia,
    serif;

  font-size:
    clamp(
      20px,
      1.7vw,
      27px
    );

  line-height: 1.35;
}


/* =========================================================
   THIRD SCREEN — MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .features-section {
    padding:
      66px
      0
      calc(110px + env(safe-area-inset-bottom));
  }


  .features-heading {
    margin:
      0
      16px
      42px;
  }


  .features-heading__eyebrow {
    font-size: 12px;

    margin-bottom: 8px;
  }


  .features-heading__title {
    font-size:
      clamp(
        34px,
        9.5vw,
        47px
      );

    line-height: .98;
  }


  /*
   * На мобильном превращаем статичные desktop-grid
   * обратно в настоящий Swiper.
   */
  .film-gallery {
    overflow: visible;

    padding:
      28px
      0
      34px;

    margin-bottom: 30px;
  }


  .film-gallery .swiper-wrapper {
    display: flex;

    gap: 0;

    transform-style:
      preserve-3d;
  }


  .film-gallery .swiper-slide,
  .film-gallery--concerts
  .swiper-slide:nth-child(n) {
    grid-column: auto;

    width:
      min(
        72vw,
        300px
      );

    height: auto;
  }


  .film-gallery--concerts
  .swiper-slide {
    width:
      min(
        82vw,
        355px
      );
  }


  /*
   * Дуговое движение:
   * активная карточка поднимается,
   * соседние остаются ниже.
   */
  .film-gallery
  .film-card {
    transform:
      translateY(20px)
      scale(.90);

    opacity: .63;
  }


  .film-gallery
  .swiper-slide-prev
  .film-card {
    transform:
      translateY(13px)
      rotate(-4deg)
      scale(.91);

    opacity: .76;
  }


  .film-gallery
  .swiper-slide-next
  .film-card {
    transform:
      translateY(13px)
      rotate(4deg)
      scale(.91);

    opacity: .76;
  }


  .film-gallery
  .swiper-slide-active
  .film-card {
    transform:
      translateY(-16px)
      rotate(0deg)
      scale(1);

    opacity: 1;
  }


  .film-card {
    padding:
      17px
      9px;
  }


  /* преимущества листаются нативно */
  .advantage-strip {
    display: flex;

    overflow-x: auto;

    gap: 12px;

    padding:
      12px
      16px
      24px;

    margin:
      0
      0
      54px;

    scroll-snap-type:
      x mandatory;

    scrollbar-width: none;
  }


  .advantage-strip::-webkit-scrollbar {
    display: none;
  }


  .advantage-card {
    flex:
      0
      0
      min(
        78vw,
        310px
      );

    min-height: 205px;

    padding:
      24px
      20px
      21px;

    scroll-snap-align:
      center;
  }


  .advantage-card h3 {
    font-size: 24px;
  }


  .advantage-card p {
    font-size: 15px;
  }


  .features-proof {
    margin:
      47px
      15px
      0;

    padding:
      26px
      23px
      28px;

    display: block;

    transform:
      rotate(-.6deg);
  }


  .features-proof__mark {
    display: block;

    margin-bottom: 13px;

    font-size: 37px;
  }


  .features-proof p {
    font-size: 17px;

    line-height: 1.35;
  }

}


/* =========================================================
   FEATURES — title cleanup
   ========================================================= */
.features-section__eyebrow,
.features-section__label,
.features-card__number,
.feature-card__number {
  display: none !important;
}

.features-section__title {
  font-size: clamp(42px, 5.2vw, 74px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.04em !important;
  max-width: 980px;
  margin-bottom: 34px !important;
}

@media (max-width: 767px) {
  .features-section__title {
    font-size: clamp(28px, 8.2vw, 44px) !important;
    line-height: 0.98 !important;
    margin-bottom: 22px !important;
  }
}


/* =========================================================
   FEATURES — ROUND 2
   typography + working mobile swiper
   ========================================================= */


/* Заголовок третьего блока — масштаб второго экрана */
.features-heading {
  max-width: 760px;
  margin-bottom: clamp(38px, 5vw, 62px);
}

.features-heading__eyebrow {
  display: none !important;
}

.features-heading__title {
  margin: 0;

  max-width: 760px;

  font-family:
    "PT Serif",
    Georgia,
    serif;

  font-size:
    clamp(
      26px,
      2.2vw,
      40px
    ) !important;

  font-weight: 700;

  line-height: 1.14 !important;

  letter-spacing: 0 !important;

  text-transform: none !important;
}


/* Номерков больше нет */
.advantage-card__number {
  display: none !important;
}


/* После удаления номера карточка начинается сразу с заголовка */
.advantage-card {
  padding-top: 25px;
}


/* LIVE удалён, поэтому большой стикер теперь просто текстовый */
.features-proof {
  display: block;
}

.features-proof__mark {
  display: none !important;
}


/* На desktop сетку фиксируем статично.
   Только здесь можно запрещать transform. */
@media (min-width: 768px) {

  .film-gallery .swiper-wrapper {
    transform: none !important;
  }

}


/* =========================================================
   MOBILE SWIPER FIX
   ========================================================= */

@media (max-width: 767px) {

  .features-heading {
    margin:
      0
      16px
      32px;
  }

  .features-heading__title {
    font-size:
      clamp(
        22px,
        6.2vw,
        30px
      ) !important;

    line-height: 1.15 !important;
  }


  /*
   * Критично:
   * здесь НЕТ transform:none.
   * Swiper пишет transform прямо в style элемента.
   */
  .film-gallery .swiper-wrapper {
    display: flex;
    transform-style: preserve-3d;
  }


  .film-gallery .swiper-slide {
    flex-shrink: 0;
  }


  /*
   * Сбрасываем desktop-наклоны четырёх музыкантов.
   * Иначе nth-child был специфичнее active/prev/next.
   */
  .film-gallery--musicians
  .swiper-slide:nth-child(n)
  .film-card {
    transform:
      translateY(22px)
      scale(.90) !important;

    opacity: .60;
  }


  .film-gallery
  .swiper-slide-prev
  .film-card {
    transform:
      translateY(12px)
      rotate(-4deg)
      scale(.92) !important;

    opacity: .76;
  }


  .film-gallery
  .swiper-slide-next
  .film-card {
    transform:
      translateY(12px)
      rotate(4deg)
      scale(.92) !important;

    opacity: .76;
  }


  .film-gallery
  .swiper-slide-active
  .film-card {
    transform:
      translateY(-18px)
      rotate(0deg)
      scale(1) !important;

    opacity: 1;
  }


  .film-gallery.swiper {
    overflow: visible;
    touch-action: pan-y;
  }


  .features-proof {
    display: block;

    padding:
      25px
      22px
      27px;
  }

}


/* =========================================================
   FEATURES — ROUND 3
   musicians opacity fix + tighter rhythm
   ========================================================= */


/* Немного ужимаем весь третий экран на desktop */
.features-section {
  padding-top: clamp(78px, 8vw, 126px);
  padding-bottom: clamp(82px, 9vw, 135px);
}

.features-heading {
  margin-bottom: clamp(34px, 4.5vw, 56px);
}

.film-gallery {
  margin-bottom: clamp(41px, 5.4vw, 70px);
}

.advantage-strip {
  margin-bottom: clamp(66px, 7.2vw, 104px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .features-section {
    padding-top: 58px;
  }

  .features-heading {
    margin-bottom: 27px;
  }

  .film-gallery {
    padding-top: 24px;
    padding-bottom: 29px;
    margin-bottom: 27px;
  }

  .advantage-strip {
    margin-bottom: 48px;
  }


  /*
   * Верхняя галерея раньше имела собственную opacity .60,
   * которая перебивала состояния Swiper.
   * Теперь состояния полностью такие же, как у нижней.
   */

  .film-gallery--musicians
  .swiper-slide:nth-child(n)
  .film-card {
    opacity: .63;
  }


  .film-gallery--musicians
  .swiper-slide.swiper-slide-prev
  .film-card {
    opacity: .76;
  }


  .film-gallery--musicians
  .swiper-slide.swiper-slide-next
  .film-card {
    opacity: .76;
  }


  .film-gallery--musicians
  .swiper-slide.swiper-slide-active
  .film-card {
    opacity: 1;
  }


  /* Нижний большой стикер тоже чуть подтягиваем вверх */
  .features-proof {
    margin-top: 42px;
  }

}


/* =========================================================
   VIDEO SECTION
   ========================================================= */

.video-section {
  position: relative;
  background: linear-gradient(
    180deg,
    #e5dcc6 0%,
    #e8dec8 100%
  );
  color: #181510;
  padding:
    clamp(82px, 8vw, 118px)
    24px
    clamp(88px, 9vw, 128px);
  overflow: hidden;
}

.video-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at top center,
      rgba(255,255,255,.22),
      transparent 46%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.018) 0 2px,
      rgba(0,0,0,.016) 2px 5px
    );
  opacity: .55;
}

.video-section__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}

.video-section__heading {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 42px);
}

.video-section__title {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: clamp(42px, 5.1vw, 72px);
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.video-showcase {
  position: relative;
  max-width: 980px;
  margin: 0 auto clamp(34px, 4vw, 46px);
  padding: clamp(12px, 2vw, 18px);
}

.video-frame {
  position: relative;
  background: #11100d;
  padding: 10px;
  box-shadow:
    0 22px 48px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

.video-frame::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(24,21,16,.12);
  pointer-events: none;
}

.video-frame__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f0e0b;
}

.video-showcase__sticker {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px 9px;
  background: #f2e8cf;
  color: #1c1812;
  font-family: "Oswald", sans-serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  box-shadow:
    0 10px 20px rgba(0,0,0,.12);
  transform-origin: center;
}

.video-showcase__sticker::before,
.video-showcase__sticker::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 56px;
  height: 18px;
  background: rgba(239,229,195,.78);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.video-showcase__sticker::before {
  left: 10px;
  transform: rotate(-8deg);
}

.video-showcase__sticker::after {
  right: 10px;
  transform: rotate(7deg);
}

.video-showcase__sticker--left {
  top: -12px;
  left: -10px;
  transform: rotate(-3deg);
}

.video-showcase__sticker--right {
  top: -8px;
  right: -8px;
  transform: rotate(4deg);
}

.video-showcase__sticker--bottom {
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
}

.video-section__footer {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.video-section__quote {
  margin: 0 0 20px;
  font-family: "PT Serif", serif;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.42;
  font-style: italic;
  color: #1d1913;
}

.video-section__cta {
  margin: 0 0 28px;
  font-family: "PT Serif", serif;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.38;
  color: #2a241c;
}

.video-section__button {
  justify-content: center;
  margin: 0 auto;
}

@media (max-width: 767px) {

  .video-section {
    padding:
      64px
      14px
      78px;
  }

  .video-section__heading {
    margin-bottom: 24px;
  }

  .video-section__title {
    font-size: clamp(34px, 10.5vw, 48px);
    line-height: .98;
  }

  .video-showcase {
    padding: 0;
    margin-bottom: 28px;
  }

  .video-frame {
    padding: 6px;
  }

  .video-showcase__sticker {
    position: static;
    display: inline-flex;
    margin:
      0 8px 10px
      0;
    min-height: 36px;
    padding: 8px 12px 7px;
    font-size: 16px;
    transform: none !important;
  }

  .video-showcase__sticker::before,
  .video-showcase__sticker::after {
    display: none;
  }

  .video-showcase {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .video-showcase__sticker--left,
  .video-showcase__sticker--right,
  .video-showcase__sticker--bottom {
    align-self: flex-start;
  }

  .video-frame {
    order: 2;
    margin-top: 4px;
  }

  .video-section__quote {
    font-size: clamp(20px, 6.1vw, 26px);
    line-height: 1.38;
  }

  .video-section__cta {
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.4;
    margin-bottom: 22px;
  }

  .video-section__button {
    width: 100%;
    max-width: 360px;
  }
}


/* =========================================================
   VIDEO SECTION — extra stickers + CRT look
   ========================================================= */

.video-frame {
  position: relative;
  overflow: hidden;
  border-radius: 34px / 22px;
  background: #050505;
  box-shadow:
    0 18px 38px rgba(0,0,0,.18),
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 0 80px rgba(0,0,0,.22);
}

.video-frame::before {
  border-radius: inherit !important;
}

.video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,0) 56%,
      rgba(0,0,0,.10) 78%,
      rgba(0,0,0,.22) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 48px rgba(0,0,0,.24);
}

.video-frame__media {
  display: block;
  width: 100%;
  background: #000;
  border-radius: 28px / 18px;
}

/* новые наклейки */
.video-showcase__sticker--lower-left {
  left: 2%;
  bottom: -18px;
  transform: rotate(-4deg);
}

.video-showcase__sticker--lower-right {
  right: 2%;
  bottom: -18px;
  transform: rotate(4deg);
}

/* чуть компактнее и аккуратнее */
.video-showcase__sticker {
  z-index: 3;
}

@media (max-width: 767px) {
  .video-frame {
    border-radius: 24px / 16px;
  }

  .video-frame__media {
    border-radius: 20px / 14px;
  }

  .video-showcase__sticker--lower-left,
  .video-showcase__sticker--lower-right {
    bottom: -14px;
  }

  .video-showcase__sticker--lower-left {
    left: -2px;
    transform: rotate(-3deg);
  }

  .video-showcase__sticker--lower-right {
    right: -2px;
    transform: rotate(3deg);
  }
}


/* =========================================================
   VIDEO SECTION — ROUND 3
   compact title / mobile stickers / spacing
   ========================================================= */


/* Заголовок в одной системе со 2-м и 3-м экранами */
.video-section__heading {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(30px, 4vw, 44px);
}

.video-section__title {
  font-family: "PT Serif", Georgia, serif;
  font-size: clamp(26px, 2.2vw, 40px) !important;
  font-weight: 700;
  line-height: 1.14 !important;
  letter-spacing: 0;
  text-transform: none !important;
}


/* Чуть больше воздуха после видео и нижних наклеек */
.video-showcase {
  margin-bottom: clamp(64px, 6vw, 84px);
}


/* Внутренняя CTA-кнопка больше не нужна */
.video-section__button {
  display: none !important;
}


@media (max-width: 767px) {

  .video-section__heading {
    margin-bottom: 26px;
  }

  .video-section__title {
    font-size: clamp(22px, 6.2vw, 30px) !important;
    line-height: 1.16 !important;
  }


  /*
   * Возвращаем настоящие наклейки вокруг видео.
   * Никакого вертикального списка.
   */

  .video-showcase {
    display: block;
    position: relative;
    padding:
      34px
      0
      58px;
    margin-bottom: 38px;
  }

  .video-frame {
    margin: 0;
  }

  .video-showcase__sticker {
    position: absolute !important;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    max-width: 42%;

    min-height: 27px;
    margin: 0;

    padding: 6px 8px 5px;

    font-size: 11px;
    line-height: 1.02;

    text-align: center;
    white-space: normal;

    box-shadow:
      0 5px 10px rgba(0,0,0,.10);
  }


  /* маленькие кусочки "скотча" оставляем */
  .video-showcase__sticker::before,
  .video-showcase__sticker::after {
    display: block;
    top: -6px;
    width: 30px;
    height: 10px;
  }


  /* верх слева */
  .video-showcase__sticker--left {
    top: 11px;
    left: 5px;
    right: auto;
    bottom: auto;

    transform: rotate(-3deg) !important;
  }


  /* верх справа */
  .video-showcase__sticker--right {
    top: 8px;
    right: 5px;
    left: auto;
    bottom: auto;

    transform: rotate(3deg) !important;
  }


  /* низ по центру */
  .video-showcase__sticker--bottom {
    top: auto;
    bottom: 16px;
    left: 50%;
    right: auto;

    transform:
      translateX(-50%)
      rotate(-1deg) !important;
  }


  /* низ слева */
  .video-showcase__sticker--lower-left {
    top: auto;
    bottom: 8px;
    left: 2px;
    right: auto;

    max-width: 34%;

    transform: rotate(-3deg) !important;
  }


  /* низ справа */
  .video-showcase__sticker--lower-right {
    top: auto;
    bottom: 6px;
    right: 2px;
    left: auto;

    max-width: 36%;

    transform: rotate(3deg) !important;
  }


  /*
   * Длинные названия спокойно переносятся
   * максимум примерно на две строки.
   */
  .video-showcase__sticker--lower-left,
  .video-showcase__sticker--lower-right {
    line-height: 1.05;
  }


  /* Цитату отрываем от нижних наклеек */
  .video-section__footer {
    padding-top: 8px;
  }

}

/* =========================================================
   PAPER STAMP SEPARATORS — FINAL
   одна чистая реализация
   ========================================================= */


/*
 * Старые ::before / ::after рваной бумаги
 * больше не участвуют.
 */
.about-section::before,
.about-section::after {
  display: none !important;
}


/*
 * КРИТИЧНО:
 * старый torn-paper код двигал about вверх на 40px.
 * Возвращаем лист в нормальный поток.
 */
.about-section {
  margin-top: 0 !important;
}


/* =========================================================
   ОБЩАЯ ГЕОМЕТРИЯ
   ========================================================= */

.stamp-separator {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  height: 30px !important;

  /*
   * Сам separator прозрачный.
   * Поэтому в отверстиях SVG виден настоящий
   * фон соседнего блока.
   */
  background-color: transparent !important;

  background-repeat: repeat-x !important;
  background-size: 96px 30px !important;

  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;

  overflow: hidden !important;

  z-index: 20 !important;

  pointer-events: none !important;
}


/* никаких старых псевдоэлементов */
.stamp-separator::before,
.stamp-separator::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   ВЕРХ БЕЖЕВОГО ЛИСТА

   separator занимает последние 30px предыдущего блока.
   Поэтому через его отверстия виден именно предыдущий фон.
   ========================================================= */

.stamp-separator--paper-top {
  margin:
    -30px
    0
    0 !important;

  background-image:
    url("../img/ui/stamp-cut-top.svg") !important;

  background-position:
    left top !important;
}


/* =========================================================
   НИЗ БЕЖЕВОГО ЛИСТА

   Следующая секция начинается на 30px раньше
   и физически находится под separator.
   Поэтому отверстия показывают её настоящий фон.
   ========================================================= */

.stamp-separator--paper-bottom {
  margin:
    0
    0
    -30px !important;

  background-image:
    url("../img/ui/stamp-cut-bottom.svg") !important;

  background-position:
    left bottom !important;
}


/*
 * Секции не создают лишнюю конкуренцию по z-index.
 * Separator с z-index:20 всегда лежит сверху.
 */
.hero,
.about-section,
.features-section,
.video-section {
  position: relative;
  z-index: auto !important;
}


/* старые torn div на всякий случай */
.torn-separator {
  display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .stamp-separator {
    height: 22px !important;

    background-size:
      70px 22px !important;
  }

  .stamp-separator--paper-top {
    margin-top:
      -22px !important;
  }

  .stamp-separator--paper-bottom {
    margin-bottom:
      -22px !important;
  }

}


/* =========================================================
   HERO — NARROW DESKTOP BALANCE
   768–1199px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

  .hero {
    padding:
      clamp(16px, 2.4vw, 28px);
  }


  /*
   * Афиша больше не имеет фиксированные 560px.
   * Правая колонка плавно уменьшается вместе с viewport.
   */
  .hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      clamp(340px, 43vw, 500px);

    gap: 0;
    align-items: center;
  }


  .hero-poster {
    width: 100% !important;

    margin-left: -18px !important;

    transform:
      rotate(-1.35deg)
      translateY(5px) !important;
  }


  .poster-card__frame {
    width: 100%;
  }


  .poster-card__frame img {
    width: 100% !important;
    max-width: none !important;

    height: auto !important;
  }


  /*
   * Левый лист тоже немного адаптируется,
   * чтобы текст не превращался в узкую колонку.
   */
  .hero-info {
    padding:
      clamp(30px, 4vw, 52px)
      clamp(26px, 3.8vw, 48px);
  }


  .hero-info__meta {
    margin-bottom: 16px;

    font-size:
      clamp(16px, 1.8vw, 21px);
  }


  .hero-info__title {
    margin-bottom: 16px;

    font-size:
      clamp(60px, 7.4vw, 92px);

    line-height: .95;
  }


  .hero-info__lead {
    margin-bottom: 25px;

    font-size:
      clamp(20px, 2.3vw, 28px);

    line-height: 1.15;
  }


  .hero-info__place {
    margin-bottom: 28px;

    font-size:
      clamp(15px, 1.65vw, 19px);
  }


  .ticket-button {
    min-width: 250px;

    padding:
      15px
      21px;

    font-size: 18px;
  }

}



/* =========================================================
   VL.RU TICKET WIDGET
   desktop modal / mobile fullscreen
   ========================================================= */

body.ticket-modal-open {
  overflow: hidden !important;
}


/* весь слой */
.ticket-modal {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 56px 32px 30px;

  visibility: visible;
}


.ticket-modal[hidden] {
  display: none !important;
}


/* затемнение нашего лендинга */
.ticket-modal__backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(13, 12, 9, .74);

  backdrop-filter:
    blur(3px);
}


/* окно */
.ticket-modal__dialog {
  position: relative;

  z-index: 2;

  width:
    min(
      1180px,
      calc(100vw - 64px)
    );

  height:
    min(
      820px,
      calc(100dvh - 86px)
    );

  min-height: 540px;

  background: #fff;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.34);

  overflow: visible;
}


/* iframe */
.ticket-modal__iframe {
  position: relative;

  z-index: 2;

  display: block;

  width: 100%;
  height: 100%;

  border: 0;

  background: #fff;

  opacity: 0;

  transition:
    opacity .18s ease;
}


.ticket-modal.is-loaded
.ticket-modal__iframe {
  opacity: 1;
}


/* загрузка */
.ticket-modal__loading {
  position: absolute;
  inset: 0;

  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px;

  background: #fff;

  color: #26231c;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 16px;
}


.ticket-modal.is-loaded
.ticket-modal__loading {
  display: none;
}


/* наш крестик */
.ticket-modal__close {
  position: absolute;

  z-index: 10;

  top: -46px;
  right: 0;

  width: 38px;
  height: 38px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid
    rgba(255,255,255,.45);

  border-radius: 50%;

  background:
    #11100d;

  color:
    #f2ead6;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 29px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 8px 22px
    rgba(0,0,0,.25);
}


.ticket-modal__close:hover {
  background:
    #29261f;
}


/* =========================================================
   MOBILE
   только виджет на весь экран
   ========================================================= */

@media (max-width: 767px) {

  .ticket-modal {
    padding: 0;

    background: #fff;
  }


  .ticket-modal__backdrop {
    display: none;
  }


  .ticket-modal__dialog {
    width: 100vw;
    height: 100dvh;

    min-height: 0;

    margin: 0;

    box-shadow: none;

    background: #fff;
  }


  .ticket-modal__iframe {
    width: 100vw;
    height: 100dvh;
  }


  /*
   * Не делаем отдельную шапку:
   * практически весь экран остаётся VL-виджетом.
   *
   * Крестик немного отодвинут от правого края,
   * чтобы меньше мешать их кнопке помощи.
   */
  .ticket-modal__close {
    position: fixed;

    top:
      max(
        8px,
        env(safe-area-inset-top)
      );

    right: 52px;

    width: 34px;
    height: 34px;

    border:
      1px solid rgba(255,255,255,.72);

    background:
      rgba(17,16,13,.90);

    color: #fff;

    font-size: 25px;

    box-shadow:
      0 4px 14px rgba(0,0,0,.24);
  }

}



/* =========================================================
   HERO — WIDE DESKTOP SCALE
   слегка компактнее на обычном масштабе браузера
   ========================================================= */

@media (min-width: 1200px) {

  .hero {
    padding:
      clamp(24px, 2.4vw, 34px);
  }


  .hero__inner {
    width: min(100%, 1200px);
  }


  .hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      500px;

    gap: 0;
  }


  .hero-poster {
    width: 500px;

    margin-left: -46px;

    transform:
      rotate(-1.7deg)
      translateY(6px);
  }


  .poster-card__frame img {
    width: 500px;
    max-width: 500px;
  }


  .hero-info {
    padding:
      clamp(44px, 4vw, 62px)
      clamp(38px, 4vw, 60px);
  }


  .hero-info__meta {
    margin-bottom: 20px;

    font-size:
      clamp(18px, 1.25vw, 21px);
  }


  .hero-info__title {
    margin-bottom: 18px;

    font-size:
      clamp(82px, 6.25vw, 118px);
  }


  .hero-info__lead {
    margin-bottom: 30px;

    max-width: 560px;

    font-size:
      clamp(23px, 1.65vw, 30px);
  }


  .hero-info__place {
    gap: 6px;

    margin-bottom: 30px;

    font-size:
      clamp(16px, 1.1vw, 19px);
  }


  .ticket-button {
    min-width: 275px;

    padding:
      15px
      21px;

    font-size: 18px;
  }

}



/* =========================================================
   HERO — poster 10% smaller on wide desktop
   ========================================================= */

@media (min-width: 1200px) {

  .hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      450px;
  }

  .hero-poster {
    width: 450px;
    margin-left: -24px;
    transform:
      rotate(-1.7deg)
      translateY(6px);
  }

  .poster-card__frame img,
  .poster-card__image {
    width: 450px;
    max-width: 450px;
  }

}


/* SEO H1: город и площадка внутри единственного H1 */
.hero-info__title-main {
  display: block;
}

.hero-info__title-meta {
  display: block;
  margin-top: 16px;
  font-family: "PT Serif", serif;
  font-size: clamp(16px, 1.15vw, 20px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 767px) {
  .hero-info__title-meta {
    margin-top: 10px;
    font-size: 15px;
  }
}