/* ═══════════════════════════════════════════════════════
   main-page.css  — Figma redesign, reference 1920 × 1080
   Scale: 1px (Figma) = 100vw / 1920 = 0.05208vw
   All sizes in vw so layout scales to any viewport width
════════════════════════════════════════════════════════ */

/* ── Page shell ── */
html { background: #F2F2F2; }

/* Compact header: half the top padding from layout.css (100px → 50px) */
.header { padding-top: 50px; }

/* {Next} cursor — copy from main.css (main.css not linked here) */
.hero-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 500;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(242,242,242,0.92);
  opacity: 0;
  transition: opacity 0.25s ease;
  white-space: nowrap;
  left: -500px;
  top: -500px;
}

/* ─── Section title line animation (mirrors main.css) ─── */
.section-title__line {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease);
}
/* Мобильный BR внутри строк заголовков — по умолчанию скрыт (desktop),
   активируется в media(max-width: 768px) для отдельных случаев. */
.mobile-br { display: none; }
.section-title__line.visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.section-title__line:nth-child(1) { transition-delay: 0s; }
.section-title__line:nth-child(2) { transition-delay: 0.3s; }
.section-title__line:nth-child(3) { transition-delay: 0.6s; }

body.home {
  max-width: 1920px;
  margin: 0 auto;
  background: #F2F2F2;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────────────
   SHARED HELPERS
───────────────────────────────────────────────────── */

/* pill button — standard scale (matches "see all packs" in wallpaper block) */
.mp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.63vw 2.1vw;
  border-radius: 8.19vw;
  border: 0.08vw solid #303030;
  font-family: var(--font-ui);
  font-size: 0.948vw;
  font-weight: 400;
  color: #303030;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}
.mp-pill:hover { background: #303030; color: #F2F2F2; }

/* square-ish pill (apply form) */
.mp-pill--sq {
  border-radius: 2.92vw;
}

/* CTA wrapper — centers the button */
.mp-cta {
  display: flex;
  justify-content: center;
}

/* pagination dots */
.mp-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.294vw;
}
.mp-dot {
  display: block;
  position: relative;
  box-sizing: content-box;
  height: 0.574vw;
  width: 1.19vw;
  border-radius: 1.15vw;
  background: transparent;
  background-clip: content-box;
  cursor: pointer;
  /* padding extends hit area 2× without affecting layout (negative margin compensates) */
  padding: 0.574vw 0.3vw;
  margin: -0.574vw -0.3vw;
  transition: width 0.3s ease, background 0.3s ease;
}
.mp-dot::before {
  content: '';
  position: absolute;
  inset: 0.574vw 0.3vw;       /* sits exactly over content area */
  border-radius: 1.15vw;
  border: 0.04vw solid #303030;
  pointer-events: none;
}
.mp-dot--active {
  width: 2.58vw;
  background: #303030;
  background-clip: content-box;
}

/* {Next} overlay label inside cards */
.mp-next-label {
  position: absolute;
  font-family: var(--font-display);
  font-size: 2.5vw;
  color: #F2F2F2;
  pointer-events: none;
  bottom: 7vw;
  left: 10.6vw;
}


/* ─────────────────────────────────────────────────────
   BLOCK 1 — HERO
───────────────────────────────────────────────────── */
.mp-hero {
  position: relative;
  height: calc(100vh - 138px);
  min-height: 520px;
  background: #1a1a1a;
  overflow: hidden;
  cursor: none;
}

.mp-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.mp-hero__slide--active {
  opacity: 1;
  pointer-events: auto;
}

.mp-hero__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop shifted upward — image content appears lower in the frame,
     leaving more sky/space at the top. JS adds scale(1.08) as headroom. */
  object-position: center 25%;
  display: block;
  will-change: transform;
  transform: scale(1.08);        /* fallback in case JS hasn't run yet */
}


/* ─────────────────────────────────────────────────────
   BLOCK 2 — WALLPAPER VIDEOS
───────────────────────────────────────────────────── */
.mp-wallpapers {
  padding-top: 2.87vw;
  padding-bottom: 0;
  background: #F2F2F2;
}

/* meta labels row */
.mp-wallpapers__meta {
  display: flex;
  justify-content: space-between;
  padding: 0 5.208vw;    /* 100px — aligned with header nav left/right edges */
  margin-bottom: 6.227vw;  /* −35% from 9.58vw */
}
.mp-wallpapers__meta-l,
.mp-wallpapers__meta-r {
  font-family: var(--font-display);
  font-size: 1.25vw;
  color: #303030;
  clip-path: inset(0 100% 0 0);
}
.mp-wallpapers__meta-l.type-play {
  animation: tw-reveal 0.72s steps(36, end) forwards;
}
.mp-wallpapers__meta-r.type-play {
  animation: tw-reveal 0.46s steps(23, end) forwards;
}
@keyframes tw-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* heading */
.mp-wallpapers__heading {
  line-height: 1.15;
  margin-bottom: 3.75vw;   /* −25% from 5vw */
  pointer-events: none;
  font-family: var(--font-ui);
  font-size: 2.5vw;
  font-weight: 400;
  color: #303030;
}
.mp-wallpapers__heading .section-title__line:nth-child(1) { padding-left: 46.09vw; }
.mp-wallpapers__heading .section-title__line:nth-child(2) { padding-left: 30.73vw; }
.mp-wallpapers__heading .section-title__line:nth-child(3) { padding-left: 37.26vw; margin-top: 0.5vw; }

/* ── Cards + Phone stage ── */
.mp-wallpapers__stage {
  position: relative;
  height: 40.5vw;         /* phone height: 18.007vw × 998/449 ≈ 40.03vw */
  overflow: hidden;
}
.mp-wtrack {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: 1.46vw;
  will-change: transform;
  isolation: isolate;
  backface-visibility: hidden;
}

/* product card — inner styled with .wp-card__* from wallpapers.css */
.mp-wcard {
  flex-shrink: 0;
  width: 14.95vw;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  will-change: opacity;
  transition: opacity 0.35s ease;
}
/* keep foot text dimmed for non-active cards */
.mp-wtrack .wp-card__foot { transition: opacity 0.4s ease; will-change: opacity; }
.mp-wcard:not(.mp-wcard--active) .wp-card__foot { opacity: 0.55; }

/* phone mockup — centered absolute over the card track */
.mp-phone {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  bottom: 0;
  width: 18.007vw;
  aspect-ratio: 449 / 998;
  z-index: 2;
}
/* Screen area: matches Group 143.svg mask path */
.mp-phone__screen {
  position: absolute;
  top: 1.748%;
  left: 2.326%;
  width: 95.607%;
  height: 95.804%;
  overflow: hidden;
  border-radius: 1.632vw;
  background: #0a0e0f;
}
/* Phone video layers (vidA + vidB created in JS — A/B crossfade) */
.mp-phone__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 0.3s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* HUD overlay (clock + date + swipe) */
.mp-phone__hud {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}
.mp-phone__time {
  margin-top: 15%;
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 2.75vw;
  font-weight: 100;
  color: rgba(255,255,255,0.95);
  line-height: 1;
  letter-spacing: -0.02em;
}
.mp-phone__date {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 0.572vw;
  font-weight: 400;
  color: rgba(255,255,255,0.82);
  margin-top: 0.38vw;
}
.mp-phone__swipe {
  margin-top: auto;
  margin-bottom: 7%;
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 0.418vw;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
}
/* SVG frame image overlay */
.mp-phone__frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  display: block;
}

/* margin 2.015vw each side = (18.98 - 14.95) / 2 — preserves original phone gap without width change.
   Both classes share same margin so the fading→active swap in transitionend is layout-neutral (no snap). */
.mp-wcard--active  { opacity: 0; pointer-events: none; margin-left: 2.015vw; margin-right: 2.015vw; }
.mp-wcard--fading  { opacity: 0; pointer-events: none; margin-left: 2.015vw; margin-right: 2.015vw; transition-delay: 0.25s; }

/* dots + CTA below wallpapers — gap slider→button = 0.73+1.18 = 1.91vw (prev 2.86vw ÷ 1.5) */
.mp-wallpapers .mp-dots {
  margin: 2.11vw 0 0.73vw;
}
.mp-wallpapers .mp-cta {
  padding: 1.18vw 0 3.5vw;
}


/* ─────────────────────────────────────────────────────
   BLOCK 3 — COLLECTIONS PHOTOS
───────────────────────────────────────────────────── */
.mp-collections {
  background: linear-gradient(180deg, rgba(242,242,242,0) 0%, rgba(137,137,137,0.03) 100%);
  padding: 1.975vw 0 0;   /* ещё −30% (2.821 × 0.7) — v23 */
}

.mp-collections__heading {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 2.5vw;
  font-weight: 400;
  color: #303030;
  line-height: 1.15;
  /* Compact vertical rhythm — margin равен одной line-height, было 3.75vw */
  margin-top: 2.875vw;      /* = font-size × line-height */
  margin-bottom: 2.875vw;
}
/* Обе строки в одну — inline, без вертикального stagger.
   Между "Photo" и "collections" — только натуральный HTML-пробел
   (collapsed whitespace между инлайн-спанами) = один пробел шрифта. */
.mp-collections__heading .section-title__line {
  display: inline;
  position: relative;
}
/* stage — 36vw gives 2vw clearance above and below the 32vw active card */
.mp-collections__stage {
  position: relative;
  height: 36vw;
  overflow: hidden;
  cursor: none;
}

/* gap: 1.46vw — matches Russian North block spacing */
.mp-ctrack {
  position: absolute;
  top: 50%;
  margin-top: -12.308vw; /* -24.615vw/2: centers track so active card (32vw) fits symmetrically */
  left: 0;
  display: flex;
  align-items: center;
  gap: 1.46vw;
  will-change: transform;
  isolation: isolate;
}

.mp-ccard {
  flex-shrink: 0;
  width: 36.923vw;  /* active 48vw ÷ 1.3 */
  position: relative;
  cursor: none;
  transform-origin: center;
  transition: transform 0.5s ease;
  z-index: 1;
}

.mp-ccard__img {
  width: 100%;
  height: 24.615vw;  /* active 32vw ÷ 1.3 */
  overflow: hidden;
  background: #878787;
}

/* scale only — margin set via JS inline style for deterministic offsetLeft reads */
.mp-ccard--active {
  transform: scale(1.3);
  z-index: 2;
}

.mp-ccard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}

.mp-ccard:hover .mp-ccard__img img {
  transform: scale(1.04);
}

.mp-ccard__label {
  position: absolute;
  bottom: 0.83vw;
  left: 0.83vw;
  font-family: var(--font-ui);
  font-size: 0.9375vw;
  color: rgba(242,242,242,0.9);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.mp-ccard:not(.mp-ccard--active) .mp-ccard__label {
  opacity: 0.55;
}

/* 0.11vw: stage has 2vw empty space below active card, 0.11+2=2.11vw visual gap = wallpapers reference */
/* gap slider→button = 0.73+1.18 = 1.91vw (prev 2.86vw ÷ 1.5) */
/* Идентично wallpapers-блоку: dots margin + cta padding.
   Приводит расстояния между каруселью → dots → button к одному ритму. */
.mp-collections .mp-dots {
  margin: 2.11vw 0 0.73vw;
}
.mp-collections .mp-cta {
  padding: 1.18vw 0 3.5vw;
}


/* ─────────────────────────────────────────────────────
   BLOCK 4 — NORTHERN LIGHTS CAROUSEL
───────────────────────────────────────────────────── */
.mp-nl {
  padding: 5.915vw 0 0;   /* padding-top −35% from 9.1vw */
}

/* heading stagger */
.mp-nl__heading {
  line-height: 1.15;
  margin-bottom: 5.31vw;  /* −25% from 7.08vw */
  font-family: var(--font-ui);
  font-size: 2.5vw;
  font-weight: 400;
  color: #303030;
}
.mp-nl__heading .section-title__line:nth-child(1) { padding-left: 39.9vw; }
.mp-nl__heading .section-title__line:nth-child(2) { padding-left: 33.8vw; }
.mp-nl__heading .section-title__line:nth-child(3) { padding-left: 48.65vw; }

/* carousel stage — same dimensions as Russian North */
.mp-nl__stage {
  position: relative;
  height: 32vw;
  overflow: hidden;
  cursor: none;
}
.mp-nl__track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: 1.46vw;
  will-change: transform;
}

/* card base */
.mp-nl__card {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: #878787;
  height: 32vw;
  cursor: none;
}
.mp-nl__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}
.mp-nl__card:hover img { transform: scale(1.03); }

/* landscape 3:2 — same as Russian North ls */
.mp-nl__card--ls { width: 48vw; }
/* portrait 2:3 — same as Russian North pt */
.mp-nl__card--pt { width: 24vw; }

.mp-nl .mp-cta { padding: 2.86vw 0; }


/* ─── Film variant — full-viewport preview with zoom-in parallax ─── */
.mp-nl__film-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.mp-nl__film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
  /* JS updates transform on scroll for zoom-in parallax */
}

/* captions row */
.mp-nl__captions {
  display: flex;
  justify-content: space-between;
  padding: 3.13vw 5.208vw;  /* 100px — flush with header nav left/right edges */
  font-family: var(--font-display);
  font-size: 1.458vw;        /* 28px */
  color: #303030;
}
/* Outer wrapper — scroll-driven parallax translate (set via JS) */
.mp-nl__cap {
  will-change: transform;
}
/* Inner span — fade-up entrance */
.mp-nl__cap > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.0s ease, transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.mp-nl__cap > span.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ─────────────────────────────────────────────────────
   BLOCK 5 — RUSSIAN NORTH CAROUSEL
───────────────────────────────────────────────────── */
.mp-rn {
  padding: 3.9vw 0 0;    /* padding-top −35% from 6vw */
}

/* heading stagger */
.mp-rn__heading {
  line-height: 1.15;
  margin-bottom: 3.75vw;  /* −25% from 5vw */
  font-family: var(--font-ui);
  font-size: 2.5vw;
  font-weight: 400;
  color: #303030;
}
.mp-rn__heading .section-title__line:nth-child(1) { padding-left: 42.5vw; }
.mp-rn__heading .section-title__line:nth-child(2) { padding-left: 33.44vw; }
.mp-rn__heading .section-title__line:nth-child(3) { padding-left: 41.6vw; }

/* stage: same cursor:none zone as NL */
.mp-rn__stage {
  position: relative;
  height: 32vw;
  overflow: hidden;
  cursor: none;
}
.mp-rn__track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: 1.46vw;
  will-change: transform;
}

/* base card — same height for all, top/bottom edges aligned */
.mp-rn__card {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: #878787;
  height: 32vw;
  cursor: none;
}
.mp-rn__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}
.mp-rn__card:hover img { transform: scale(1.03); }

/* landscape 3:2 — zero crop for landscape originals */
.mp-rn__card--ls { width: 48vw; }  /* 32vw × 3/2 */
/* portrait 3:4 — zero crop for portrait (_3x4) originals */
.mp-rn__card--pt { width: 24vw; }  /* 32vw × 3/4 */

.mp-rn .mp-cta { padding: 2.86vw 0 5vw; }


/* ─────────────────────────────────────────────────────
   BLOCK 6 — RUSSIAN YOUTH
───────────────────────────────────────────────────── */
.mp-ry {
  padding: 2.301vw 0 0;   /* padding-top −35% from 3.54vw */
}

.mp-ry__heading-wrap {
  text-align: center;
  margin-bottom: 1.5vw;   /* −25% from 2vw */
}
.mp-ry__heading {
  font-family: var(--font-ui);
  font-size: 2.5vw;
  font-weight: 400;
  color: #303030;
}
.mp-ry__sub {
  font-family: var(--font-display);
  font-size: 1.458vw;       /* 28px */
  color: #303030;
  margin-top: 0.15vw;
}

/* stage: full width, clips the 3 absolutely-positioned slots */
.mp-ry__stage {
  position: relative;
  width: 100%;
  height: 36.61vw;
  overflow: hidden;
  cursor: none;
}

/* base slot — all positions controlled by state classes */
.mp-ry__tcard {
  position: absolute;
  overflow: hidden;
  background: #878787;
  transition: left 0.6s ease, top 0.6s ease, width 0.6s ease, height 0.6s ease;
}
.mp-ry__tcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
  Layout geometry (at 100vw stage):
    left-pad  = 3.54vw
    active-w  = 60.47vw
    gap       = 1.46vw
    preview-w = 100vw - 3.54 - 60.47 - 1.46 - 3.54 = 30.99vw
    preview-left = 3.54 + 60.47 + 1.46 = 65.47vw
    preview-top  = 36.61 - 17.57 = 19.04vw  (bottom-aligned)
*/

/* active: large card, left */
.mp-ry__tcard--active {
  left: 3.54vw;
  top: 0;
  width: 60.47vw;
  height: 36.61vw;
}

/* preview: small card, right — top-aligned */
.mp-ry__tcard--preview {
  left: 65.47vw;
  top: 0;
  width: 30.99vw;
  height: 17.57vw;
}

/* exit: active slides off-screen left (same size, only left changes) */
.mp-ry__tcard--exit {
  left: -64.01vw;
  top: 0;
  width: 60.47vw;
  height: 36.61vw;
}

/* hidden: parked off-screen right, no transition (snap) */
.mp-ry__tcard--hidden {
  left: 200vw;
  top: 0;
  width: 30.99vw;
  height: 17.57vw;
  transition: none;
}

/* note: bottom-right of stage, same position as original stack layout */
.mp-ry__note {
  position: absolute;
  bottom: 0;
  right: 3.54vw;
  width: 15.73vw;
  font-family: var(--font-display);
  font-size: 1.458vw;
  color: #303030;
  text-align: right;
  pointer-events: none;
}

.mp-ry .mp-cta { padding: 2.86vw 0 5vw; }


/* cart icon inside right nav — vertically centered with nav links */
.mp-cart-icon {
  align-self: center;
  padding-top: 0 !important;
  line-height: 1;
  position: relative;
}

/* badge — item count dot on cart icon */
.cart-badge {
  position: absolute;
  top: -0.26vw;
  right: -0.36vw;
  min-width: 0.938vw;
  height: 0.938vw;
  border-radius: 50%;
  background: rgba(242,242,242,0.92);
  color: #303030;
  font-family: var(--font-ui);
  font-size: 0.521vw;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 0.156vw;
  line-height: 1;
  box-sizing: border-box;
}

.header--scrolled .cart-badge {
  background: #303030;
  color: #F2F2F2;
}

/* ─────────────────────────────────────────────────────
   BLOCK 7 — ABOUT AUTHOR
───────────────────────────────────────────────────── */
.mp-about {
  padding: 2.977vw 0 5vw;  /* padding-top −35% from 4.58vw */
}

.mp-about__heading {
  font-family: var(--font-ui);
  font-size: 2.5vw;
  font-weight: 400;
  color: #303030;
  text-align: center;
  margin-bottom: 3.5925vw;  /* −25% from 4.79vw */
}

.mp-about__body {
  display: flex;
  align-items: center;
  gap: 8.7vw;
  padding: 0 18.33vw 0 18.33vw;  /* 352px left */
}

/* portrait block */
.mp-about__portrait {
  flex-shrink: 0;
  width: 26.25vw;
  height: 32.24vw;
  background: #878787;
  overflow: hidden;
}
.mp-about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* text block */
.mp-about__text {
  flex: 1;
  padding-top: 0;
}

/* name: right-aligned, first element — matches .header__brand-line size (2.25rem) */
.mp-about__name {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-ui);
  font-size: 2.25rem;
  font-weight: 400;
  color: #303030;
  line-height: 1.15;
  margin-bottom: 1.98vw;
}

/* label: left-aligned, below name */
.mp-about__label {
  font-family: var(--font-display);
  font-size: 1.667vw;
  color: #303030;
  margin-bottom: 1.25vw;
}
.mp-about__bio {
  font-family: var(--font-display);
  font-size: 1.25vw;
  color: #303030;
  text-align: justify;
  line-height: 1.55;
  margin-bottom: 1.25vw;
}
/* "lav" alignment: padding-right = width of "in" (the 2 chars after "lav" in Bulavin)
   shifts Yaroslav's text left so both "lav" substrings stack vertically —
   scaled proportionally to font-size reduction (2.5vw → 2.25rem ≈ ×0.75) */
.mp-about__name span:first-child {
  padding-right: 1.875rem;
}


/* ─────────────────────────────────────────────────────
   BLOCK 8 — COLLABORATION CTA
───────────────────────────────────────────────────── */
.mp-collab {
  padding: 3.3865vw 5.208vw 3.91vw;  /* padding-top −35% from 5.21vw */
}

.mp-collab__heading {
  font-family: var(--font-ui);
  font-size: 2.5vw;
  font-weight: 400;
  color: #303030;
  text-align: left;
  line-height: 1.15;
  margin-bottom: 3.9075vw;  /* −25% from 5.21vw */
}
.mp-collab__heading .section-title__line:nth-child(1) { padding-left: 22vw; }
.mp-collab__heading .section-title__line:nth-child(2) { padding-left: 17vw; }

.mp-collab__body {
  display: flex;
  gap: 3vw;
  align-items: flex-start;
  /* Contain body between the same red-line verticals as .mp-about:
     18.33vw from viewport L/R (matches .mp-about__body padding).
     Container .mp-collab has 5.208vw padding, so add 13.122vw more here. */
  padding: 0 13.122vw;
}

.mp-collab__desc {
  flex: 0 0 22vw;
  font-family: var(--font-display);
  font-size: 1.05vw;   /* -16% from 1.25vw — enough for "…discuss" (42 chars) to fit line-1 in 22vw */
  color: #303030;
  line-height: 1.55;
}

/* form column: fields + apply button */
.mp-collab__form-col {
  flex: 1;
}

.mp-collab__form {
  display: flex;
  flex-direction: column;
  gap: 1.15vw;
}

/* Success message under collab form — скрыт по умолчанию, показывается после валидного submit */
.mp-collab__success {
  font-family: var(--font-display);
  font-size: 1.02vw;
  color: #303030;
  margin: 1vw 0 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.mp-collab__success--show {
  opacity: 1;
}

.mp-collab__apply {
  display: table;
  margin-top: 2vw;
  margin-left: auto;
  margin-right: calc(7vw + 1.5vw);
}

.mp-collab__field {
  display: flex;
  align-items: center;
  gap: 1.5vw;
}
.mp-collab__field--ta {
  align-items: flex-start;
}

.mp-collab__input,
.mp-collab__textarea {
  flex: 1;
  box-sizing: border-box;
  background: transparent;
  border: 0.104vw solid #303030;
  padding: 0 1.25vw;
  font-family: var(--font-display);
  font-size: 1.02vw;    /* -30% from 1.458vw — user input text is more compact */
  color: #303030;
  outline: none;
  resize: none;
}
.mp-collab__input {
  height: 3.125vw;
  border-radius: 8.19vw;    /* full pill */
}
.mp-collab__textarea {
  height: 11.98vw;
  border-radius: 0.83vw;
  padding-top: 0.83vw;
}

.mp-collab__label {
  flex-shrink: 0;
  width: 7vw;
  font-family: var(--font-display);
  font-size: 1.25vw;
  color: #303030;
}
.mp-collab__label--ta {
  padding-top: 0.83vw;
}


/* ─────────────────────────────────────────────────────
   BLOCK 9 — CONTACTS
───────────────────────────────────────────────────── */
/* Contacts + footer — весь блок пропорционально −20% (desktop).
   Горизонтальный padding 5.208vw — дизайн-токен левого margin, не масштабируется.
   Mobile-версия сохранена (overrides в responsive.css ≤768). */
.mp-contacts {
  padding: 1.5236vw 0 2.4vw;   /* было 1.9045vw / 3vw */
  text-align: center;
}
.mp-contacts__heading {
  font-family: var(--font-ui);
  font-size: 2vw;               /* было 2.5vw */
  font-weight: 400;
  color: #303030;
}


/* ─────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────── */
.mp-footer {
  background: linear-gradient(180deg, rgba(242,242,242,0) 0%, rgba(137,137,137,0.03) 100%);
  padding: 3.96vw 5.208vw 0;    /* top: 4.95→3.96, sides 5.208vw — токен */
}

/* top row: follow text + socials */
.mp-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3.2vw;         /* было 4vw */
}
.mp-footer__follow {
  font-family: var(--font-display);
  font-size: 1vw;               /* было 1.25vw */
  color: #303030;
  text-transform: lowercase;
}
.mp-footer__socials {
  display: flex;
  align-items: center;
  gap: 3.36vw;                  /* было 4.2vw */
}
.mp-footer__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5vw;                 /* было 3.125vw */
  height: 2.5vw;
  color: #303030;
  transition: opacity 0.3s ease;
}
.mp-footer__icon:hover { opacity: 0.5; }
.mp-footer__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Patreon paths fill ~80% of its viewBox vs ~58% for Instagram/YouTube,
   so scale the container down to match visual height */
.mp-footer__icon[aria-label="Patreon"] {
  width: 1.816vw;               /* было 2.27vw */
  height: 1.816vw;
}
/* bottom links row */
.mp-footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1vw;                     /* было 1.25vw */
  padding-bottom: 3.96vw;       /* было 4.95vw */
}
.mp-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;                   /* было 1vw */
}
.mp-footer__col a {
  font-family: var(--font-display);
  font-size: 1vw;               /* было 1.25vw */
  color: #727272;
  text-decoration: none;
  text-transform: lowercase;
  transition: color 0.25s ease;
}
.mp-footer__col a:hover { color: #303030; }
.mp-footer__col--right {
  text-align: right;
  justify-content: flex-start;
}