@font-face {
  font-family: "Angst";
  src: url("fonts/AngstVF.woff2") format("woff2-variations"),
       url("fonts/Angst-Normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Angst";
  src: url("fonts/Angst-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-1: #2e5aa7;
  --bg-2: #2e5aa7;
  --bg-3: #2e5aa7;
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.82);
  --ink-mute: rgba(255, 255, 255, 0.6);
  --gold: #ffa62b;
  --gold-light: #ffc36a;
  --gold-deep: #d27a06;
  --serif: "Angst", serif;
  --sans: "Angst", serif;
  --script: "Angst", serif;
  --pager-offset: max(env(safe-area-inset-bottom), 6px);
  --pager-size: 26px;
  --pager-hint-gap: 0px;
}

* { font-family: "Angst", serif !important; font-style: normal !important; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: #2e5aa7;
  min-height: 100vh;
}

/* ===================== WATER ===================== */
.water {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* base ripple gradient — subtle horizontal banding like reflected light */
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.0) 0px,
      rgba(255, 255, 255, 0.0) 18px,
      rgba(255, 255, 255, 0.025) 19px,
      rgba(255, 255, 255, 0.0) 22px
    );
}

.water__layer {
  position: absolute;
  inset: -20%;
  opacity: 0.35;
  mix-blend-mode: screen;
  will-change: transform;
}

/* slow, large soft blobs of light */
.water__layer--1 {
  background:
    radial-gradient(40% 22% at 20% 30%, rgba(180, 215, 255, 0.45), transparent 70%),
    radial-gradient(35% 18% at 75% 60%, rgba(160, 200, 255, 0.4), transparent 70%),
    radial-gradient(30% 16% at 55% 85%, rgba(200, 225, 255, 0.35), transparent 70%);
  filter: blur(40px);
  animation: waterDrift1 24s ease-in-out infinite alternate;
}

/* faster, smaller highlights */
.water__layer--2 {
  background:
    radial-gradient(25% 12% at 65% 20%, rgba(255, 255, 255, 0.35), transparent 70%),
    radial-gradient(22% 14% at 30% 70%, rgba(255, 255, 255, 0.3), transparent 70%),
    radial-gradient(18% 10% at 85% 80%, rgba(255, 255, 255, 0.28), transparent 70%);
  filter: blur(28px);
  animation: waterDrift2 16s ease-in-out infinite alternate-reverse;
  opacity: 0.45;
}

/* deep shadow undertones */
.water__layer--3 {
  background:
    radial-gradient(50% 30% at 10% 80%, rgba(15, 35, 80, 0.5), transparent 70%),
    radial-gradient(50% 30% at 90% 10%, rgba(15, 35, 80, 0.45), transparent 70%);
  filter: blur(50px);
  animation: waterDrift1 32s ease-in-out infinite alternate;
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* shimmering caustics — fine moving lines */
.water__caustics {
  position: absolute;
  inset: -10%;
  background:
    repeating-linear-gradient(
      70deg,
      transparent 0px,
      transparent 14px,
      rgba(255, 255, 255, 0.05) 15px,
      transparent 17px,
      transparent 36px,
      rgba(255, 255, 255, 0.03) 37px,
      transparent 40px
    ),
    repeating-linear-gradient(
      110deg,
      transparent 0px,
      transparent 22px,
      rgba(255, 255, 255, 0.035) 23px,
      transparent 25px
    );
  mix-blend-mode: screen;
  opacity: 0.6;
  animation: caustics 18s linear infinite;
  filter: blur(0.8px);
}

@keyframes waterDrift1 {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.1); }
}
@keyframes waterDrift2 {
  0%   { transform: translate3d(4%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(-4%, 3%, 0) scale(1.04); }
}
@keyframes caustics {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 200px 80px, -200px 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .water__layer, .water__caustics { animation: none !important; }
}

/* ===================== ATMOSPHERE (soft clouds) ===================== */
.stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.stars__layer { position: absolute; inset: -10%; opacity: 0.55; filter: blur(24px); }
.stars__layer--small {
  background:
    radial-gradient(220px 100px at 12% 18%, rgba(255,255,255,0.65), transparent 70%),
    radial-gradient(260px 110px at 73% 42%, rgba(255,255,255,0.55), transparent 70%),
    radial-gradient(180px 90px at 33% 71%, rgba(255,255,255,0.5), transparent 70%),
    radial-gradient(240px 110px at 88% 87%, rgba(255,255,255,0.45), transparent 70%);
  animation: drift 60s ease-in-out infinite;
}
.stars__layer--mid {
  background:
    radial-gradient(280px 130px at 22% 31%, rgba(255, 195, 106, 0.2), transparent 70%),
    radial-gradient(240px 110px at 67% 21%, rgba(255,255,255,0.5), transparent 70%);
  animation: drift 90s ease-in-out infinite reverse;
}
.stars__layer--big { display: none; }
@keyframes drift {
  0%, 100% { transform: translateX(-3%); }
  50%      { transform: translateX(3%); }
}
.shooting { display: none; }

/* ======================= DECK ======================= */
.deck {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  display: block;
}

.card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(env(safe-area-inset-top), 24px) 20px max(env(safe-area-inset-bottom), 24px);
  will-change: transform, opacity;
  transition: transform 620ms cubic-bezier(.65,.02,.2,1),
              opacity 620ms cubic-bezier(.65,.02,.2,1);
  transform: translate3d(0, 100vh, 0);
  opacity: 0;
  pointer-events: none;
}
.card[data-card="0"] { transform: translate3d(0, 0, 0); opacity: 1; pointer-events: auto; }

/* live state — controlled by JS while user is dragging/holding */
.deck.is-dragging .card {
  transition: none;
}

.card__inner {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 48px);
  padding: clamp(28px, 6vw, 56px) clamp(22px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.4vw, 22px);
  border-radius: 22px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

/* corner ornaments removed */
.card__corner { display: none; }

/* ======================= CARD 1 — HERO (точная копия по референсу) ======================= */
.card--exact {
  padding: 0 !important;
  background: #cfe4ee;
  align-items: stretch !important;
  justify-content: stretch !important;
}
.card--exact .card__inner {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  display: block;
}
.card--exact__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  z-index: 1;
}

/* ====== Замена текста внутри прямоугольника на карте 1 ====== */
/* Позиция и размер вычисляются в JS на основе реального кропа object-fit:cover.
   Здесь — только визуальные свойства. */
.card1-text {
  position: absolute;
  /* Полоска в цвет плёнки с лёгким фейдом по краям, чтобы перекрыть английский текст */
  background:
    linear-gradient(to bottom,
      rgba(238, 237, 230, 0) 0%,
      rgba(238, 237, 230, 1) 14%,
      rgba(238, 237, 230, 1) 86%,
      rgba(238, 237, 230, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caveat', 'Marck Script', cursive !important;
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  color: #1d1a16;
  white-space: nowrap;
  letter-spacing: 0.01em;
  text-transform: none;
  transform-origin: center;
  z-index: 2;
  pointer-events: none;
  /* Скрываем до вычисления в JS, чтобы не было мельканий */
  visibility: hidden;
}
.hint--on-image {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--pager-offset) + var(--pager-size) + var(--pager-hint-gap));
  z-index: 9;
  color: rgba(12, 24, 42, 0.95);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(255, 255, 255, 0.4);
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  animation: hintPulseOnImage 2.6s ease-in-out infinite;
}
@keyframes hintPulseOnImage {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 0.95; }
}

/* ======================= CARD 1 — HERO (водный календарь) ======================= */

/* полный-bleed фон-вода на всю карточку */
.card--water {
  padding: 0 !important;
  background: url("media/water-bg.jpg") center / cover no-repeat, #dcecf0;
}
.card--water .card__inner {
  width: 100%;
  max-width: none;
  max-height: 100dvh;
  height: 100dvh;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  justify-content: flex-start;
  align-items: stretch;
}

/* сетка-календарь — как на референсе: тонкие тёмные линии */
.calgrid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.calgrid__line {
  position: absolute;
  background: rgba(30, 35, 45, 0.62);
}
.calgrid__line--v {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5px;
}
.calgrid__line--h {
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
}
.calgrid__num {
  position: absolute;
  /* ближе к референсу: большие тонкие sans-serif/serif цифры, без рукописи */
  font-family: "Cormorant Garamond", "Tenor Sans", serif !important;
  font-weight: 400;
  font-size: clamp(64px, 16vw, 110px);
  line-height: 1;
  color: rgba(35, 40, 50, 0.78);
  letter-spacing: -0.02em;
}
/* прижимаем цифры поближе к линиям — как в референсе (внутри ячеек, близко к углу) */
.calgrid__num--tl { top: clamp(50px, 14vw, 110px); left: clamp(28px, 7vw, 60px); }
.calgrid__num--tr { top: clamp(50px, 14vw, 110px); right: clamp(28px, 7vw, 60px); }
.calgrid__num--bl { bottom: calc(50% + clamp(2px, 1vw, 8px)); left: clamp(28px, 7vw, 60px); transform: translateY(100%); margin-top: clamp(6px, 1.5vw, 12px); }
.calgrid__num--br { bottom: calc(50% + clamp(2px, 1vw, 8px)); right: clamp(28px, 7vw, 60px); transform: translateY(100%); margin-top: clamp(6px, 1.5vw, 12px); }
/* выделенный номер (18) — без подчёркивания, только темнее (референс в исходнике не выделяет) */
.calgrid__num--hi {
  color: rgba(20, 28, 40, 0.92);
}
.calgrid__num--hi::after { display: none; }

/* центральный блок поверх сетки */
.water-hero {
  position: relative;
  z-index: 2;
  margin: auto;
  width: 100%;
  max-width: min(440px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vw, 14px);
  padding: clamp(20px, 6vw, 40px) clamp(16px, 5vw, 28px);
  text-align: center;
}

/* ОСНОВНОЙ ЗАГОЛОВОК: SVG-«бабл»-буквы с двойной обводкой (как Soul Blue) */
.water-hero__title {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: min(520px, 85vw);
  display: block;
  line-height: 0;
}
.water-hero__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* «Скотч» — длинная узкая прозрачная полоса с рукописным текстом на ней */
.water-hero__tape {
  display: inline-block;
  background: rgba(245, 248, 248, 0.65);
  padding: 5px clamp(18px, 5vw, 32px) 3px;
  transform: rotate(-4deg);
  margin-top: clamp(-6px, -1vw, -2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
  /* тонкие неровные края скотча */
  clip-path: polygon(
    0% 12%, 3% 0%, 12% 8%, 28% 2%, 45% 6%, 63% 0%, 78% 4%, 92% 0%, 100% 10%,
    100% 88%, 97% 100%, 85% 92%, 70% 100%, 52% 94%, 35% 100%, 18% 92%, 6% 100%, 0% 90%
  );
}
.water-hero__tape span {
  font-family: "Gloria Hallelujah", "Caveat", cursive !important;
  font-weight: 400;
  font-size: clamp(15px, 3.6vw, 22px);
  color: #1d2a3c;
  letter-spacing: 0.005em;
  line-height: 1.1;
  white-space: nowrap;
}

.water-hero__place,
.water-hero__when {
  margin: 0;
  font-family: "Gloria Hallelujah", "Caveat", cursive !important;
  font-weight: 400;
  color: #1d2a3c;
  font-size: clamp(18px, 4.3vw, 26px);
  line-height: 1.25;
  letter-spacing: 0.005em;
}
.water-hero__place { margin-top: clamp(10px, 2.5vw, 16px); transform: rotate(-1.5deg); }
.water-hero__when  { margin-top: clamp(2px, 0.6vw, 4px); transform: rotate(-2.2deg); }

/* спрячем старые hero-элементы, если останутся в разметке */
.card--water .hero__title,
.card--water .frame,
.card--water .hero__date-wrap,
.card--water .hero__where { display: none !important; }
/* DEAD: previous mask data — keep it as a no-op variable that no one uses */
.frame__media-legacy-mask-unused {
  --mask: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20480'%20preserveAspectRatio='none'><path%20d='M38.00,38.00%20C38.00,20.21%20100.44,20.34%20100.44,38.13%20C100.44,27.77%20166.43,27.95%20166.43,38.31%20C166.43,19.66%20233.53,18.04%20233.53,36.70%20C233.53,21.43%20292.82,23.75%20292.82,39.01%20C292.82,24.94%20362.00,23.93%20362.00,38.00%20C374.51,38.00%20373.79,102.94%20361.28,102.94%20C352.37,102.94%20354.58,172.40%20363.49,172.40%20C354.00,172.40%20353.52,239.79%20363.01,239.79%20C352.47,239.79%20351.88,304.19%20362.42,304.19%20C378.13,304.19%20378.12,377.98%20362.40,377.98%20C351.84,377.98%20351.44,442.00%20362.00,442.00%20C362.00,460.05%20297.41,460.77%20297.41,442.72%20C297.41,458.86%20233.94,456.83%20233.94,440.69%20C233.94,458.01%20169.92,459.59%20169.92,442.27%20C169.92,454.12%20101.01,452.44%20101.01,440.59%20C101.01,430.07%2038.00,431.48%2038.00,442.00%20C28.11,442.00%2029.21,374.42%2039.10,374.42%20C25.99,374.42%2025.55,310.74%2038.66,310.74%20C26.72,310.74%2026.70,243.79%2038.64,243.79%20C20.91,243.79%2019.96,175.37%2037.68,175.37%20C22.54,175.37%2022.69,109.25%2037.83,109.25%20C21.65,109.25%2021.82,38.00%2038.00,38.00%20Z'%20fill='black'/></svg>");
  -webkit-mask: var(--mask) center / 100% 100% no-repeat;
          mask: var(--mask) center / 100% 100% no-repeat;
}
.frame__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.95) saturate(1.05);
}

/* date under the frame */
.hero__date-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(6px, 1.5vw, 12px);
}
.hero__date {
  font-weight: 400;
  font-size: clamp(34px, 8vw, 56px);
  letter-spacing: 0.005em;
  color: var(--gold);
  line-height: 1;
}

/* address + time row */
.hero__where {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(14px, 3vw, 22px);
  margin-top: clamp(8px, 1.6vw, 14px);
  padding: 0 clamp(4px, 1vw, 10px);
  color: var(--gold);
}
.where__addr {
  margin: 0;
  font-size: clamp(13px, 1.75vw, 16px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--gold);
  font-weight: 400;
}
.where__time {
  margin: 0;
  font-size: clamp(16px, 3vw, 22px);
  letter-spacing: 0.02em;
  color: var(--gold);
  font-weight: 400;
  white-space: nowrap;
  /* vertical divider before time */
  position: relative;
  padding-left: clamp(14px, 3vw, 22px);
}
.where__time::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.8em;
  background: var(--gold);
  opacity: 0.22;
}

/* hint to swipe */
.hint {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: #1d3a5a;
  font-size: clamp(9px, 1.2vw, 11px);
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-top: 4px;
  animation: hintPulse 2.6s ease-in-out infinite;
}
/* на водной карте — синяя подсказка над pager */
.card--water .hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--pager-offset) + var(--pager-size) + var(--pager-hint-gap));
  color: #1d3a5a;
  opacity: 0.55;
}
.hint__arrow {
  width: 14px; height: 14px;
  animation: hintArrow 1.6s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  50%      { transform: translateX(0); opacity: 0.55; }
}
@keyframes hintArrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* ======================= CARD 2 — INFO (инвертированные цвета) ======================= */
/* CARD 2 — фон: заблюренная 1-я страница + ракушки; CARD 3 — остаётся золотым */
.card--info {
  background: #ffffff;
  overflow: hidden;
}
/* На 2-й и 3-й карточках прячем SVG-рамку */
.card--info .card2-frame,
.card--form .card2-frame { display: none !important; }
/* Заблюренная копия 1-й страницы как фон (под ракушками и текстом) */
.card--info .card__inner::after,
.card--form .card__inner::after {
  content: "";
  position: absolute;
  inset: -60px; /* увеличиваем bbox, чтобы blur не давал светлых краёв */
  background: url("media/card1-exact.jpg") center / cover no-repeat;
  filter: blur(28px) saturate(1.05);
  transform: scale(1.18);
  z-index: 0;
  pointer-events: none;
}
/* Полупрозрачная вуаль поверх блюра — чтобы текст оставался читаем */
.card--info .card__inner > .info,
.card--form .card__inner > .info {
  position: relative;
  z-index: 2;
}
.card--info .card__inner::before,
.card--form .card__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("media/frame-shells.png") center / contain no-repeat,
    rgba(255, 255, 255, 0.28);
  pointer-events: none;
  z-index: 1;
}
.card--form {
  background: #ffffff;
  overflow: hidden;
}
/* шрифт второй и третьей карточек — Tenor Sans (тонкий sans) */
.card--info, .card--info *,
.card--form, .card--form * {
  font-family: "Tenor Sans", "Angst", serif !important;
}
/* кроме заголовка ДРЕСС-КОД и меток ЖЕНЩИНЫ/МУЖЧИНЫ — Angst как на 1-й странице */
.card--info .info__h,
.card--info .dress__label,
.card--form .info__h {
  font-family: "Angst", serif !important;
}
.card--info .card__inner,
.card--form .card__inner {
  position: relative;
  gap: clamp(10px, 1.6vw, 14px);
  padding: clamp(46px, 9vw, 70px) clamp(40px, 8vw, 60px);
}

/* большая волнистая рамка почти на весь экран */
.card--info,
.card--form {
  padding: 0 !important;
}
.card--info .card__inner,
.card--form .card__inner {
  width: 100%;
  max-width: none;
  max-height: 100dvh;
  height: 100dvh;
  border-radius: 0;
}
.card2-frame {
  position: absolute;
  top: clamp(20px, 4vw, 36px);
  left: clamp(16px, 3.5vw, 28px);
  width: calc(100% - 2 * clamp(16px, 3.5vw, 28px));
  height: calc(100% - 2 * clamp(20px, 4vw, 36px));
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.info {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; gap: clamp(12px, 2vw, 18px);
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #2e5aa7;
  height: 100%;
  width: 100%;
  max-width: min(260px, 64vw);
  margin: 0 auto;
  padding: clamp(60px, 11vw, 90px) 0;
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(46, 90, 167, 0.4) transparent;
}
.card--info .info,
.card--form .info {
  overflow: visible;
  max-width: min(320px, 82vw);
}
/* CARD 2: вертикальные отступы больше, чтобы текст не попадал на ракушки в углах */
.card--info .info {
  padding: clamp(120px, 22vw, 180px) clamp(20px, 5vw, 36px);
  max-width: min(360px, 86vw);
}
.card--form .info {
  overflow-y: auto;
  justify-content: flex-start;
  padding: clamp(70px, 13vw, 100px) 0 clamp(70px, 13vw, 100px);
  gap: clamp(10px, 1.8vw, 14px);
  /* больше боковых полей, чтобы форма не прикасалась к волнистой рамке */
  max-width: min(260px, 68vw);
}
.info::-webkit-scrollbar { width: 4px; }
.info::-webkit-scrollbar-thumb { background: rgba(46, 90, 167, 0.4); border-radius: 4px; }

.info__lead {
  margin: 0 auto;
  text-align: center;
  font-size: clamp(13px, 1.85vw, 16px);
  color: #2e5aa7;
  line-height: 1.3;
  max-width: none;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.info__lead span {
  display: block;
  white-space: nowrap;
}

.info__h {
  text-align: center;
  margin: 4px 0 0;
  font-weight: 700;
  font-size: clamp(20px, 3.2vw, 26px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2e5aa7;
  position: relative;
}

/* две колонки дресс-кода с тонким разделителем */
.dress {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2.5vw, 16px);
  align-items: start;
  margin: 2px 0 4px;
  position: relative;
  width: 100%;
}
.dress::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 1px;
  background: #2e5aa7;
  opacity: 0.22;
  transform: translateX(-0.5px);
}
.dress__col {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 clamp(4px, 1.5vw, 8px);
}
.dress__label {
  font-size: clamp(13px, 1.9vw, 16px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2e5aa7;
  opacity: 0.85;
  font-weight: 400;
}
.dress__text {
  margin: 0;
  font-size: clamp(10px, 1.5vw, 12px);
  line-height: 1.35;
  color: #2e5aa7;
}
.dress__text strong {
  font-weight: 700;
  color: #2e5aa7;
}

.swatches {
  display: flex; justify-content: center; gap: 0;
  margin: 6px 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.swatches span {
  width: clamp(22px, 4vw, 30px);
  height: clamp(22px, 4vw, 30px);
  border-radius: 50%;
  background: var(--c);
  margin-left: -6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.swatches span:first-child { margin-left: 0; }

.info__p {
  margin: 0 auto;
  text-align: center;
  font-size: clamp(11px, 1.6vw, 14px);
  line-height: 1.4;
  color: #2e5aa7;
  max-width: 180px;
}
/* широкий вариант — вырывается из узкого .info чтобы первая строка не переносилась */
.info__p--wide {
  max-width: none;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.info__p--wide span {
  display: block;
  white-space: nowrap;
}
.info__p--wide span.wrap {
  white-space: normal;
  max-width: min(280px, 78vw);
  margin: 0 auto;
  line-height: 1.45;
}
.info__p--small {
  font-size: clamp(12px, 1.7vw, 15px);
  line-height: 1.4;
}
.info__p--gap {
  margin-top: calc(1.4em * 1.4);
  font-style: italic !important;
}

/* --- RSVP кнопки --- */
.rsvp {
  margin-top: clamp(18px, 3.5vw, 26px);
  display: inline-grid;
  grid-auto-rows: auto;
  grid-template-columns: max-content;
  justify-content: center;
  justify-items: stretch;
  gap: 10px;
  width: 100%;
}
.rsvp__btn {
  font-family: inherit;
  font-size: clamp(12px, 1.8vw, 14px);
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid #2e5aa7;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
  white-space: nowrap;
  width: 100%;
  max-width: 100%;
  line-height: 1.2;
}
.rsvp__btn--yes {
  background: #2e5aa7;
  color: #cfe0f5;
  border-color: #2e5aa7;
}
.rsvp__btn--yes:hover {
  background: #244a8d;
  box-shadow: 0 4px 14px rgba(46, 90, 167, 0.35);
  transform: translateY(-1px);
}
.rsvp__btn--no {
  background: transparent;
  color: #2e5aa7;
}
.rsvp__btn--no:hover {
  background: rgba(46, 90, 167, 0.08);
  transform: translateY(-1px);
}
.rsvp__btn.is-selected {
  opacity: 0.55;
  cursor: default;
}
.rsvp__toast {
  margin-top: 12px;
  font-size: clamp(11px, 1.55vw, 13px);
  color: #2e5aa7;
  text-align: center;
  max-width: min(280px, 78vw);
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.rsvp__toast.is-visible {
  opacity: 1;
}

.info__phone {
  margin: 4px 0 0;
  text-align: center;
  font-size: clamp(14px, 2.2vw, 18px);
  letter-spacing: 0.04em;
  color: #2e5aa7;
  font-weight: 500;
}

.info__sign {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 4px;
}
.info__amp {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 5vw, 42px);
  color: var(--gold);
  line-height: 1;
}
.info__date {
  font-family: var(--sans);
  font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: 0.32em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* ======================= PAGER ======================= */
.pager {
  position: fixed;
  left: 50%;
  bottom: var(--pager-offset);
  transform: translateX(-50%);
  z-index: 10;
  display: flex; gap: 10px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  border: 1px solid rgba(46, 90, 167, 0.4);
}
.pager__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(28, 43, 74, 0.3);
  transition: background 240ms ease, transform 240ms ease, width 240ms ease;
}
.pager__dot.is-active {
  background: #2e5aa7;
  width: 22px;
  border-radius: 4px;
}

/* ======================= PROGRESS (scroll-hold) ======================= */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 11;
  pointer-events: none;
  background: transparent;
}
.progress span {
  display: block; height: 100%;
  width: var(--p, 0%);
  background: var(--gold);
  transition: width 80ms linear, opacity 240ms ease;
  box-shadow: 0 0 12px rgba(255, 166, 43, 0.7);
  opacity: var(--p-opacity, 0);
}

/* ======================= MOTION ======================= */
@media (prefers-reduced-motion: reduce) {
  .stars__layer, .shooting, .blob-frame svg, .hint, .hint__arrow, .hint--on-image {
    animation: none !important;
  }
  .card { transition: opacity 200ms ease; }
}

/* ======================= CARD 3 — RSVP FORM ======================= */
/* по умолчанию третья карточка и её dot скрыты — появляются после клика «С удовольствием приду» */
.card--form:not(.is-unlocked) {
  display: none !important;
}
.pager__dot[data-go="2"]:not(.is-unlocked) {
  display: none !important;
}

.form__title {
  font-size: clamp(20px, 4vw, 28px);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  margin: 0;
}
.form__sub {
  margin: 0;
  font-size: clamp(11px, 1.55vw, 13px);
  line-height: 1.45;
  color: #2e5aa7;
  opacity: 0.8;
  font-style: italic !important;
}
.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.4vw, 18px);
  margin-top: clamp(6px, 1.5vw, 12px);
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  width: 100%;
}
.form__label {
  font-size: clamp(12px, 1.7vw, 14px);
  color: #2e5aa7;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.form__hint {
  font-size: clamp(10px, 1.4vw, 12px);
  color: #2e5aa7;
  opacity: 0.65;
  font-style: italic !important;
  line-height: 1.35;
  margin-top: -2px;
  margin-bottom: 2px;
}
.form__input {
  font-family: inherit;
  font-size: clamp(13px, 1.85vw, 15px);
  color: #2e5aa7;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(46, 90, 167, 0.55);
  border-radius: 0;
  padding: 8px 2px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.form__input::placeholder {
  color: rgba(46, 90, 167, 0.4);
  font-style: italic !important;
}
.form__input:focus {
  border-bottom-color: #2e5aa7;
}
.form__input--area {
  border: 1.5px solid rgba(46, 90, 167, 0.55);
  border-radius: 10px;
  padding: 10px 12px;
  resize: none;
  line-height: 1.4;
  min-height: 60px;
}
.form__input--area:focus {
  border-color: #2e5aa7;
}
.form__radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.form__radio {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: clamp(12px, 1.75vw, 14px);
  color: #2e5aa7;
  line-height: 1.3;
  user-select: none;
}
.form__radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #2e5aa7;
  border-radius: 50%;
  background: transparent;
  margin: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}
.form__radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: #2e5aa7;
  border-radius: 50%;
}
.form__submit {
  align-self: center;
  margin-top: clamp(6px, 1.5vw, 12px);
  min-width: 60%;
}

/* экран после отправки */
.form__done {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: #2e5aa7;
}
.form__done.is-visible {
  display: flex;
}
.form__done-title {
  margin: 0;
  font-family: "Angst", serif !important;
  font-size: clamp(28px, 5.5vw, 40px);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  line-height: 1;
}
.form__done-text {
  margin: 0;
  font-size: clamp(13px, 1.85vw, 15px);
  line-height: 1.45;
  font-style: italic !important;
}
.form.is-hidden {
  display: none;
}
.form-wrap .form__sub.is-hidden,
.form-wrap .form__title.is-hidden {
  display: none;
}
/* в режиме «не приду» прячем поля про «+1» и аллергии */
.card--form.is-mode-no .form__field--yes-only {
  display: none !important;
}