/* ============================================================
   Artists Against the Kremlin — Memory Remains
   Landing page, built from the FINAL mockup (ФИНАЛ/DESKTOP + MOB)
   Palette: navy #111828 / deep #070f1e / red #db2119 / white
   Type: Montserrat (400 / 700 / 800), self-hosted
   Масштаб: 1u макета = 0.5227px @1440 (замерено по срезам финала);
   базовый текст 55u ≈ 28.7px = 1.37rem, интерлиньяж 66u = 1.2
   ============================================================ */

@import url('fonts.css');

:root {
  --navy: #111828;
  --navy-deep: #070f1e;      /* цвет жёсткой тени кнопок в финальном макете */
  --navy-img: #111629;       /* flat corner color of the collage JPGs */
  --red: #db2119;            /* канонический красный финальных ассетов */
  --red-dark: #b81b13;
  --white: #ffffff;

  --font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --container: 1280px;
  --narrow: 44rem; /* самая длинная ручная строка финала ≈ 908px @1440 */
}

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

html {
  /* 1rem = мокапный "базовый" кегль: ~21px при ширине 1440 (замерено по preview_3) */
  font-size: clamp(15px, 1.455vw, 28px);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.35;
  color: var(--white);
  background: var(--navy);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.container {
  width: min(100% - 3rem, var(--container));
  margin-inline: auto;
}
.container--narrow { max-width: var(--narrow); }

/* ---------- typography ---------- */

.h-display {
  font-size: clamp(2rem, 5.9vw, 3.9rem);
  font-weight: 700; /* в финале заголовки Bold, не ExtraBold (замер плотности по превью) */
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}
.h-display--red { color: var(--red); }

.h-sub {
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .02em;
}

.prose {
  text-align: center;
  font-size: 1.37rem;
  font-weight: 400;
  line-height: 1.2;
}
.prose p + p { margin-top: 1.2em; } /* пустая строка макета: 132u = 2 интерлиньяжа */
.prose strong { font-weight: 700; }
/* ручные переносы из макета — только на десктопе */
@media (max-width: 860px) { .brd { display: none; } }
/* и наоборот: переносы только для мобильного макета MOB */
.brm { display: none; }

/* ---------- sections ---------- */

.section { padding: 5.5rem 0 6rem; }
.section .h-display { margin-bottom: 2.2rem; }
.section__cta { margin-top: 3rem; text-align: center; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-family: var(--font);
  font-size: 1.5rem;          /* 60.58u финала ≈ 31.7px @1440 */
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  letter-spacing: .015em;
  padding: .85em 1.1em;       /* плашка финала 511×92 @1440 */
  border-radius: .38em;
  box-shadow: 6px 8px 0 var(--navy-deep);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover {
  background: var(--red-dark);
  transform: translate(2px, 3px);
  box-shadow: 3px 4px 0 var(--navy-deep);
}
.btn:active { transform: translate(6px, 8px); box-shadow: 0 0 0 var(--navy-deep); }
.btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

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

.hero { background: var(--navy); }

.hero__intro { padding-top: 2.6rem; text-align: center; }

.hero__partners {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.4rem);
  flex-wrap: wrap;
}
.hero__partners img { height: clamp(30px, 5.2vw, 78px); width: auto; }

.hero__presents {
  margin-top: 2.4rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(.8rem, 1.75vw, 1.25rem);
  letter-spacing: .04em;
}
.hero__presents .lc { text-transform: lowercase; }

/* «ARTISTS AGAINST THE KREMLIN» — фирменный леттеринг из макета
   (3_artists against title.svg), НЕ Montserrat */
.hero__project { margin-top: 1.1rem; }
.hero__project img { width: 100%; } /* в финале — на всю ширину контейнера (1283px @1440) */
.hero__project-stack { display: none; } /* двухстрочная версия — только на мобиле */

.hero__stage {
  position: relative;
  margin-top: 3.2rem;
  min-height: clamp(28rem, 54vw, 60rem);
  background:
    url('../assets/img/final-hero.jpg') center / cover no-repeat
    var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  padding: .2rem 0 3rem;
  text-shadow: 0 0 30px rgba(10, 16, 29, .65);
}

.hero__title {
  font-size: clamp(2.5rem, 6.4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.13;
  text-transform: uppercase;
  text-align: center;
}

.hero__band { display: contents; } /* на десктопе обёртка невидима; на мобиле несёт коллаж */
.hero__mark {
  width: clamp(15rem, 35vw, 26rem);
  margin-top: 1.15rem;
  filter: drop-shadow(0 0 26px rgba(10, 16, 29, .55));
}

.hero__date {
  margin-top: 1.15rem;
  font-size: clamp(1rem, 1.85vw, 1.3rem);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .03em;
}

/* ============================================================
   WHITE ANGLED BANDS
   ============================================================ */

.band-white {
  background: var(--white);
  color: var(--navy);
  padding: clamp(.7rem, 1.05vw, 1.1rem) 0 clamp(1.7rem, 2.45vw, 2.6rem);
  clip-path: polygon(0 clamp(2px, .3vw, 6px), 100% 0, 100% calc(100% - clamp(20px, 3.3vw, 60px)), 50% 100%, 0 calc(100% - clamp(20px, 3.3vw, 60px)));
}
.band-white .h-display { margin-bottom: 0; line-height: 1.08; } /* 170u/157u из финальных SVG */
/* у второй белой ленты в макете ровный верх и более глубокий клин */
.band-white--help {
  padding: clamp(1.2rem, 2.2vw, 2rem) 0 clamp(2.6rem, 3.95vw, 4.1rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(30px, 4.65vw, 78px)), 50% 100%, 0 calc(100% - clamp(30px, 4.65vw, 78px)));
}

/* ============================================================
   MARQUEE (бегущая строка)
   ============================================================ */

.marquee {
  overflow: hidden;
  padding: .4rem 0;
  background: var(--navy);
}
/* лента №2 идёт по белой зоне (книги → NOW WE NEED) */
.marquee--white { background: var(--white); }
/* лента №3 седлает переход тёмный→белый перед финалом */
.marquee--straddle {
  background: linear-gradient(to bottom, var(--navy) 0 68%, var(--white) 68% 100%);
}
/* в финале ленты №2 и №3 чуть выше первой */
.marquee--white .marquee__track img { height: clamp(13rem, 29vw, 20.5rem); }
.marquee--straddle .marquee__track img { height: clamp(13rem, 28.1vw, 20rem); }
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 22px);
  width: max-content;
  will-change: transform;
  animation: marquee-scroll var(--marquee-duration, 60s) linear infinite;
}
[data-marquee-reverse] .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track img {
  height: clamp(13rem, 27vw, 19rem);
  width: auto;
  max-width: none; /* Safari: % внутри max-content трека схлопывает фото в 0 */
  flex: none;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-loop, 50%))); }
}

/* ============================================================
   ART RESPONDS
   ============================================================ */

.art-responds { padding-top: 2rem; padding-bottom: 3rem; }
.art-responds .marquee { margin-bottom: 1.4rem; }
.art-responds > .h-display { margin-bottom: .8rem; }
.art-responds .section__cta { margin-top: 2.6rem; }
.act-now { padding-top: 1.3rem; padding-bottom: 2.2rem; }
.act-now .section__cta { margin-top: 2.6rem; }
.statement { padding-top: 1.5rem; padding-bottom: 4.7rem; } /* заголовок почти прижат к коллажу */
.statement .h-display { margin-bottom: 2.4rem; }
.memory-needs { padding-top: 3.6rem; padding-bottom: 3rem; }
.memory-needs .h-display { margin-bottom: 1.3rem; }
.memory-needs .section__cta { margin-top: 3.2rem; }
.contribution { padding-top: 3.7rem; }
.contribution .h-display { margin-bottom: 2.1rem; }

/* ============================================================
   MEMORY NEEDS PEOPLE / GOAL
   ============================================================ */

.goal { margin-top: 2.6rem; }
.goal__label { text-align: center; font-size: 1.37rem; margin-bottom: .6rem; }

.goal__bar {
  display: flex;
  gap: clamp(3px, .28vw, 5px);
  padding: clamp(4px, .5vw, 9px);
  border: 3px solid var(--white);
  border-radius: 100px;
  /* в макете бар шире текстовой колонки (821px @1440) */
  width: min(57vw, 39.3rem);
  margin-left: calc((100% - min(57vw, 39.3rem)) / 2);
}
.goal__seg {
  flex: 1;
  height: clamp(16px, 1.81vw, 30px);
  background: var(--white);
  border-radius: 3px;
}
.goal__seg--fill { background: var(--red); transform-origin: left center; }
.is-visible .goal__seg--fill { animation: goal-fill 1s cubic-bezier(.6, 0, .3, 1) both; }
@keyframes goal-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.help { margin-top: .9rem; }
.help__label { text-align: center; font-size: 1.37rem; margin-bottom: 1.35rem; }
.help__grid {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.4rem;
  font-size: 1.37rem;
  line-height: 1.2;
  text-align: center;
  max-width: 38rem;
  margin-inline: auto;
}
.help__grid li { flex: 0 1 11.4rem; }

/* ============================================================
   CONTRIBUTION TIERS
   ============================================================ */

.contribution {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  padding-bottom: clamp(5rem, 10vw, 9.5rem);
}
/* финальный макет: глитч-полоса лежит ПОВЕРХ кнопки Make your contribution */
.contribution__glitch {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 2600 / 689;
  background: url('../assets/img/final-glitch-overlay.webp') center / 100% auto no-repeat;
  pointer-events: none;
  z-index: 2;
}
.contribution .container { position: relative; }

.tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.85vw, 1.6rem) clamp(1rem, 1.8vw, 1.5rem);
  max-width: 39rem;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.tier {
  border: 3px solid var(--white); /* обводка финала 5.9u ≈ 3.1px */
  background: var(--navy);
  text-align: center;
}
.tier__price {
  font-size: 1.25rem; /* 50.2u финала */
  font-weight: 700;
  padding: .3em .5em;
  border-bottom: 3px solid var(--white);
}
.tier p { padding: .8em .6em .85em; font-size: 1.25rem; line-height: 1.2; }

.tiers__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.tiers__wires line { stroke: var(--red); } /* толщину задаёт js по масштабу карточки */

.contribution__cta { position: relative; z-index: 3; margin-top: 3.1rem; } /* кнопка поверх глитч-полосы */
.btn--contribute { font-size: 1.69rem; padding: .5em 1.28em; } /* 67.78u, плашка 386×123 */

/* ============================================================
   TRUST / BOOKS
   ============================================================ */

.trust { position: relative; padding-top: 0; padding-bottom: 4.3rem; }
.trust .h-display { margin-bottom: 0; }
.trust__statement { margin-top: 1.6rem; }
.trust .trust__twice {
  color: var(--red);
  margin: 1.6rem 0 3.4rem;
}
.trust__prose { margin-inline: auto; max-width: 40rem; }

/* белая лента с книгами по бокам жирного текста */
.trust-books {
  background: var(--white);
  color: var(--navy);
  position: relative;
}
.trust-books__book {
  position: absolute;
  bottom: .8rem;
  width: clamp(18rem, 36vw, 27rem);
}
.trust-books__book--left { left: 6vw; }
.trust-books__book--right { right: 7vw; }
.trust-books__text {
  text-align: center;
  font-size: 1.37rem;
  line-height: 1.2;
  padding: 2.6rem 1rem 4.1rem;
  max-width: 26rem;
  margin-inline: auto;
  position: relative;
}

/* ============================================================
   ABOUT / STATS
   ============================================================ */

.about { padding-top: 2.8rem; padding-bottom: 1.8rem; }
.about .about__title { margin-bottom: 1.1rem; white-space: nowrap; }
.about .prose { max-width: 30rem; margin-inline: auto; }

.stats {
  display: grid;
  /* колонки финала неравные: левая узкая, правая под 'through international' */
  grid-template-columns: 10.7rem 15.3rem;
  gap: 1.45rem .55rem;
  text-align: center;
  width: max-content;
  margin: 1.6rem auto 0;
}
.stat__num {
  font-size: 2.1rem; /* 84.14u финала ≈ 44px @1440 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
}
.stat__num--wide { text-transform: uppercase; white-space: nowrap; }
.stat dd { font-size: 1.37rem; line-height: 1.2; margin-top: .05em; }

/* ============================================================
   MEMORY REMAINS BAND
   ============================================================ */

.mr-band {
  background:
    url('../assets/img/final-mr.jpg') center / cover no-repeat
    var(--navy);
  min-height: clamp(26rem, 60.5vw, 62rem); /* картинка 2600×1575 в кадре */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 0 4rem;
}
.mr-band__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-shadow: 0 0 30px rgba(10, 16, 29, .6);
  margin-top: 1.7rem; /* знак на 35px ниже кромки коллажа */
}
.mr-band__mark {
  width: clamp(15rem, 32.5vw, 23.5rem);
  filter: drop-shadow(0 0 26px rgba(10, 16, 29, .5));
}
.mr-band__title {
  margin-top: .3rem;
  font-size: clamp(2.5rem, 6vw, 4.1rem);
  font-weight: 700;
  line-height: 1.12;
  text-transform: uppercase;
  text-align: center;
}

/* ============================================================
   ERASING / EXHIBITION SECTIONS
   ============================================================ */

.erasing { padding-top: 1.2rem; padding-bottom: 4.5rem; }

.sections { padding-top: .5rem; padding-bottom: 1.2rem; }
.sections__title {
  font-size: clamp(2.2rem, 5.9vw, 3.9rem);
  line-height: 1.08;
  margin-bottom: 3.75rem;
}

.sections__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.3rem 1.5rem;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
/* в финале шапка и текст карточки идут единым интерлиньяжем 66u, без трекинга */
.sections__item h3 {
  font-size: 1.37rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 0;
}
.sections__item p {
  font-size: 1.37rem;
  line-height: 1.2;
  margin-inline: auto;
}

.sections + .marquee { margin-top: 1.6rem; }

/* ============================================================
   FINALE (white)
   ============================================================ */

.finale {
  background: var(--white);
  color: var(--navy);
  padding: 1.2rem 0 clamp(3.5rem, 7vw, 6rem);
  text-align: center;
}
.finale .h-display { margin-bottom: 1.9rem; line-height: 1.08; }
.finale .section__cta { margin-top: 1.9rem; }

.footer {
  background: var(--white);
  color: rgba(17, 24, 40, .72);
  text-align: center;
  font-size: .72rem;
  padding: 2.5rem 0 2rem;
}

/* ============================================================
   GLITCH FLICKER on display titles
   ============================================================ */

.glitch-text { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .glitch-text { animation: glitch-flicker 9s infinite steps(1); }
  @keyframes glitch-flicker {
    0%, 91%, 94.5%, 100% { text-shadow: none; transform: none; }
    92% { text-shadow: .06em 0 var(--red), -.05em 0 rgba(120, 180, 255, .8); transform: translateX(-.02em) skewX(-1.5deg); }
    93% { text-shadow: -.05em 0 var(--red), .05em 0 rgba(120, 180, 255, .8); transform: translateX(.02em); }
    94% { text-shadow: .03em .02em var(--red); transform: none; }
  }
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--reveal-delay, 0s);
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 860px) {
  .section { padding: 3.6rem 0 4rem; }

  .trust-books__book { width: clamp(7.5rem, 27vw, 12rem); bottom: 1.6rem; }
  .trust-books__book--left { left: 0; }
  .trust-books__book--right { right: 0; }
  .trust-books__text { font-size: .95rem; padding: 2.4rem 3.2rem; }

  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }

  .marquee__track img,
  .marquee--white .marquee__track img,
  .marquee--straddle .marquee__track img { height: clamp(11rem, 32vw, 15rem); }
}

/* ============ мобильная версия по финальному макету MOB (390px) ============ */
@media (max-width: 560px) {
  .h-display { font-size: 30px; line-height: 1.16; }
  .prose { font-size: 11.5px; line-height: 1.2; }
  .prose p + p { margin-top: 1.15em; }
  .section { padding: 2.1rem 0 2.2rem; } /* межсекционный шаг MOB ≈ 64px */

  .section__cta,
  .act-now .section__cta,
  .art-responds .section__cta,
  .memory-needs .section__cta,
  .finale .section__cta { margin-top: 1rem; } /* по MOB кнопка близко к тексту */
  .btn {
    font-size: 12.5px;
    padding: .85em 1em;
    min-width: 193px;
    border-radius: 5px;
    box-shadow: 3px 4px 0 var(--navy-deep);
  }

  /* — hero: заголовок над коллажем, коллаж только за знаком, дата под ним — */
  .hero__partners { gap: 1.2rem; }
  .hero__partners img { height: 26px; }
  .brm { display: inline; } /* перенос «…EDITION / OF CRITICAL ART PROJECT» */
  .hero__presents { font-size: 12.5px; margin-top: 1.4rem; }
  .hero__project-line { display: none; }
  .hero__project-stack { display: block; width: 81vw; margin-inline: auto; } /* ≈316px @390 по MOB */
  .hero__stage { background: none; min-height: 0; margin-top: 1.2rem; }
  .hero__content { padding: 0 0 1rem; }
  .hero__title { font-size: 36px; position: relative; z-index: 1; }
  .hero__band {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 50vw;
    margin-top: -15px; /* MEMORY REMAINS наезжает на коллаж — часть айдентики */
    background: url('../assets/img/final-hero.jpg') center / cover no-repeat var(--navy);
  }
  .hero__mark { width: 55vw; margin-top: 0; } /* группа III ≈169px @390, по MOB */
  .hero__date { font-size: 12.5px; margin-top: 1rem; }

  /* — прогресс-бар 310×17 — */
  .goal__bar {
    width: min(100%, 312px);
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    padding: 2px;
    gap: 2px;
  }
  .goal__seg { height: 9px; border-radius: 2px; }
  .goal__label, .help__label { font-size: 12.5px; }

  /* — сетка помощи 3+2, мелкий текст — */
  .help__grid { gap: 1.2rem 1.2rem; font-size: 10.5px; }
  .help__grid li { flex: 0 1 88px; }

  /* — карточки взносов: 2 колонки, компакт — */
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 312px; gap: 9px 10px; }
  .tier { border-width: 1px; }
  .tier__price { font-size: 10.5px; padding: .3em .5em; border-bottom-width: 1px; }
  .tier p { font-size: 10px; padding: .7em .5em .8em; line-height: 1.2; }
  .btn--contribute { font-size: 12.5px; min-width: 146px; padding: .8em .9em; }
  .contribution { padding-bottom: 4.5rem; }

  /* — книги и белая зона — */
  .trust-books__text { font-size: 11px; padding: 2rem 5.5rem; }
  /* тело книги ≈107px @390 (PNG на ~53% — тень), тени уходят за края экрана;
     ширина ограничена, чтобы на широких телефонах не доставать до текста */
  .trust-books__book { width: clamp(150px, 52vw, 205px); bottom: .8rem; }
  .trust { padding-bottom: 3rem; } /* воздух между абзацем и книгами */
  .trust-books__book--left { left: -5.8vw; }
  .trust-books__book--right { right: -6.9vw; }
  .marquee__track img { height: 37vw; }
  .marquee--white .marquee__track img { height: 49vw; }
  .marquee--straddle .marquee__track img { height: 42vw; }

  /* — about + статистика 2×2 — */
  .about .about__title { white-space: normal; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .8rem; width: 100%; max-width: 280px; }
  .stat__num { font-size: 17px; }
  .stat dd { font-size: 10px; }

  /* — MR band — */
  .mr-band { min-height: 65vw; margin-top: 2rem; }
  .mr-band__mark { width: 44vw; } /* группа III ≈134px @390, по MOB */
  .mr-band__title { font-size: 32px; }
  .mr-band__content { margin-top: 1rem; } /* знак и титул опущены внутрь коллажа, как в MOB */

  /* — секции выставки 2×2 — */
  .sections__title { font-size: 32px; }
  .sections__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1.4rem; }
  .sections__item h3 { font-size: 11px; letter-spacing: .08em; }
  .sections__item p { font-size: 10px; max-width: none; }

  .footer { font-size: 10px; }
}