/* ============================================================
   Baytix Toy Invite — вёрстка v2 «арка». Mobile-first от 360px.
   Сигнатура: арочное окно. Появляется дважды — на первом экране
   и на блоке подтверждения. Между ними — тишина и золотая линия.
   ============================================================ */

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

/* Запасной текст: виден, пока не отработал скрипт, и остаётся
   единственным содержимым, если скрипт не отработал вовсе.
   Скрипт прячет его сам, когда отрисовал страницу. */
.fallback {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 1;
  padding: 26vh 24px 0;
  text-align: center;
  color: var(--espresso, #2E241A);
  font-family: var(--display, Georgia, serif);
}
.fallback h1 { font-size: 2rem; font-weight: 400; margin: 0 0 14px; }
.fallback p  { margin: 5px 0; font-size: 1rem; opacity: .78; font-family: var(--body, sans-serif); }

/* Атрибут hidden обязан скрывать. Браузерное display:none легко перебивается
   любым авторским правилом вроде .form{display:grid} или .btn{display:flex},
   и элемент остаётся на экране. Это правило закрывает вопрос раз и навсегда. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--espresso);
  color: var(--espresso);
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }

.sheet {
  max-width: 460px;
  margin: 0 auto;
  position: relative;
  background: var(--cream);
  overflow: hidden;
  /* тканевая подложка: шёлк, а не плоская заливка */
  background-image:
    radial-gradient(120% 60% at 15% 0%, rgba(235,214,156,.28), transparent 60%),
    radial-gradient(90% 50% at 92% 22%, rgba(232,217,190,.34), transparent 62%),
    radial-gradient(100% 44% at 50% 100%, rgba(199,155,62,.12), transparent 70%);
}

/* ---------- Языки ------------------------------------------- */
.lang {
  position: absolute;
  top: 14px; right: var(--gutter);
  z-index: 30;
  display: flex;
  gap: 4px;
}
.lang button {
  appearance: none;
  min-width: 40px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(168,121,31,.42);
  border-radius: 999px;
  background: rgba(251,246,236,.72);
  backdrop-filter: blur(6px);
  color: var(--espresso-2);
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
}
.lang button[aria-pressed="true"] {
  background: var(--gold-grad);
  border-color: var(--gold-dark);
  color: #FFF9EC;
}

/* ---------- Общие ------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }

.label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--gold-dark);
}

section { padding: var(--section) var(--gutter); position: relative; }

/* Стык двух разных фонов режет глаз. Тонкая растяжка сверху
   каждой секции гасит границу — переход читается как перелив. */
section::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 46px;
  background: linear-gradient(to bottom, rgba(0,0,0,.06), transparent);
  pointer-events: none;
}
.hero::before { display: none; }

.section-head { text-align: center; margin-bottom: 30px; }
.section-head h2 { font-size: var(--fs-h2); margin-top: 9px; line-height: 1.24; }

/* Золотая линия-разделитель */
.rule { height: 1px; width: 100%; max-width: 220px; margin: 0 auto; background: var(--gold-line); }

.orn { display: block; margin: 0 auto; color: var(--gold-dark); }

/* ---------- HERO -------------------------------------------- */
.hero {
  position: relative;
  min-height: 100dvh;                /* dvh: иначе прыгает в iOS Safari */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 62px var(--gutter) 42px;
  overflow: hidden;
}

/* Фон: фото пары либо шёлк с золотым отблеском (режим ornament) */
.hero-bg {
  position: absolute;
  inset: 0;
  background-color: var(--cream-deep);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero-bg::before {                   /* затемнение под своё фото, если текст плохо читается */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(46,36,26,var(--bg-dim, 0));
  z-index: 1;
}
.hero-bg::after {                    /* мягкая вуаль, чтобы текст читался поверх фото */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(74% 50% at 50% 44%, rgba(251,246,236,.34), rgba(251,246,236,.06) 58%, rgba(120,92,48,.16) 100%);
}
.hero-bg--rings {
  /* --bg-rings-url задаётся из JS: путь зависит от того, в корне сайт или в подпапке */
  background-image:
    var(--bg-rings-url),
    radial-gradient(44% 26% at 18% 12%, rgba(255,253,247,.9), transparent 62%),
    radial-gradient(60% 34% at 74% 82%, rgba(186,140,52,.5), transparent 68%),
    linear-gradient(162deg, #FDF9F0 0%, #F1E1C0 32%, #E3CA9C 60%, #D2B17C 100%);
  background-size: cover, auto, auto, auto;
  background-repeat: no-repeat;
}
.hero-bg--silk {
  background-image:
    radial-gradient(46% 26% at 20% 10%, rgba(255,253,247,.98), transparent 62%),
    radial-gradient(44% 26% at 86% 20%, rgba(240,214,150,.9), transparent 64%),
    radial-gradient(56% 32% at 72% 84%, rgba(186,140,52,.55), transparent 66%),
    radial-gradient(38% 24% at 8% 70%, rgba(255,251,240,.9), transparent 60%),
    radial-gradient(70% 44% at 50% 50%, rgba(214,178,108,.3), transparent 72%),
    linear-gradient(162deg, #FDF9F0 0%, #F0DFBC 30%, #E2C99A 58%, #D3B37F 82%, #C9A76F 100%);
}
.grain {                             /* зерно: убирает пластиковость градиентов */
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .58;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* --- Арка: сигнатурный элемент --- */
.arch {
  position: relative;
  z-index: 2;
  width: var(--arch-w);
  border-radius: var(--arch-r) var(--arch-r) var(--radius) var(--radius);
  padding: 38px 24px 28px;
  text-align: center;
  background: rgba(252,247,238,.78);
  backdrop-filter: blur(9px) saturate(1.12);
  -webkit-backdrop-filter: blur(9px) saturate(1.12);
  box-shadow: 0 22px 54px -22px rgba(46,36,26,.45);
}
.arch::before {                      /* золотой кант */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--gold-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.arch::after {                       /* внутренняя волосяная линия */
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(168,121,31,.3);
  border-radius: calc(var(--arch-r) - 9px) calc(var(--arch-r) - 9px) 2px 2px;
  pointer-events: none;
}

/* Раньше это была служебная строка капслоком. В торжественном
   приглашении она должна звучать, а не подписывать. */
.hero-eyebrow {
  font-family: var(--accent);
  font-style: italic;
  font-size: clamp(1.02rem, 4.4vw, 1.2rem);
  letter-spacing: .01em;
  text-transform: none;
  color: var(--gold-dark);
  margin: 12px 0 10px;
}

.names { font-family: var(--display); font-size: var(--fs-names); line-height: 1.06; color: var(--espresso); }
.names span { display: block; }
.amp {
  font-family: var(--accent);
  font-style: italic;
  font-size: .62em;
  line-height: 1;
  margin: 2px 0;
  background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Дата: сетка «день | число | время», как в печатном приглашении */
.datebox {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 19px;
  border-top: 1px solid rgba(168,121,31,.28);
  /* День недели и время — одного кегля и веса. «17:00» казалось
     мельче из-за того, что цифры уже букв: добавлен вес. */
  font-size: 1.04rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--espresso-2);
}
.datebox .big {
  font-family: var(--display);
  font-size: 2.9rem;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  color: var(--espresso);
}
.datebox .my { display: block; font-size: .86rem; margin-top: 7px; letter-spacing: .11em; color: var(--muted); }
.datebox .side { position: relative; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* Экран уже 340 px — день недели и время уходят под число,
   иначе строка сжимается до нечитаемого. */
@media (max-width: 339px) {
  .datebox { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .datebox .side:first-child::after,
  .datebox .side:last-child::before { display: none; }
}
.datebox .side:first-child::after,
.datebox .side:last-child::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 1px; height: 30px;
  margin-top: -15px;
  background: rgba(168,121,31,.32);
}
.datebox .side:first-child::after { right: -7px; }
.datebox .side:last-child::before { left: -7px; }

/* Фон-фотография: стекло плотнее, тень глубже.
   На однотонном шёлке прозрачность красива, на букетах — мешает читать. */
.hero.has-photo:not(.is-framed) .arch {
  background: rgba(253,249,242,.93);
  box-shadow: 0 26px 60px -22px rgba(46,36,26,.6);
}
.hero.has-photo:not(.is-framed) .cd-cell {
  background: rgba(253,249,242,.86);
  border-color: rgba(168,121,31,.45);
}
.hero.has-photo .countdown-cap,
.hero.has-photo .scroll-cue { color: #8A6318; }

/* Фон-рамка. Картинка вертикальная (примерно 3:4), экран телефона
   вытянутее — поэтому заполняем по высоте и центрируем: рамка
   остаётся целой, а по бокам ничего важного не срезается. */
.hero.is-framed .hero-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--champagne);
}

/* Фон слегка отъезжает при прокрутке — эффект глубины.
   Двигаем только transform: браузер считает его на видеокарте,
   поэтому не дёргается даже на дешёвом Android. Раньше фон
   прыгал скачками, потому что менялся размер картинки. */
.hero-bg {
  transform: scale(var(--bg-zoom, 1));
  transform-origin: center 30%;
  will-change: transform;
  transition: transform .18s linear;
}

/* ---------- Счётчик ----------------------------------------- */
.countdown-wrap { position: relative; z-index: 2; margin-top: 20px; text-align: center; }
.countdown-cap { font-size: var(--fs-label); letter-spacing: var(--tracking); text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px; }
.countdown { display: flex; justify-content: center; gap: 8px; }
.cd-cell {
  min-width: 58px;
  padding: 8px 5px;
  border: 1px solid rgba(168,121,31,.34);
  border-radius: var(--radius);
  background: rgba(252,247,238,.6);
  backdrop-filter: blur(5px);
}
.cd-num { font-family: var(--display); font-size: 1.42rem; line-height: 1; color: var(--espresso); font-variant-numeric: tabular-nums; }
.cd-cap { font-size: .63rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

/* ---------- Приглашение -------------------------------------- */
.invite { text-align: center; }
/* Имена хозяев работают заголовком блока — так строка читается как фраза,
   а не как три отдельные надписи подряд */
.invite-head--hosts {
  font-family: var(--accent);
  font-style: italic;
  font-size: clamp(1.72rem, 7.4vw, 2.24rem);
  line-height: 1.22;
  color: var(--espresso);
}
/* Это сердце приглашения — здесь уместна книжная антиква,
   а не тот же шрифт, что на кнопках */
/* Приглашение читают и пожилые гости. Cormorant — узкий и лёгкий,
   на телефоне буквы сливаются. Playfair плотнее и держит штрих:
   тот же шрифт, что у названия тойханы, которое читается хорошо. */
.invite-text {
  font-family: var(--display);
  font-size: clamp(1.28rem, 5.4vw, 1.48rem);
  line-height: 1.66;
  letter-spacing: .005em;
  color: var(--espresso);
  max-width: 30ch;
  margin: 0 auto;
}
/* Без заголовков блок начинается сразу с текста — сверху нужен воздух */
.section-head.is-bare { margin-bottom: 0; min-height: 4px; }

.invite-text p:first-child {
  font-size: 1.08em;
  font-weight: 500;
  color: var(--espresso);
  margin-bottom: 1em;
}
.invite-text p { margin: 0 0 .9em; }

/* ---------- Программа ---------------------------------------- */
.program { background: var(--cream); }
.timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 320px; }
.timeline li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(168,121,31,.2);
}
.timeline li:last-child { border-bottom: 0; }
.tl-time { font-family: var(--display); font-size: 1.06rem; color: var(--gold-dark); font-variant-numeric: tabular-nums; }
.tl-title { font-size: 1.02rem; color: var(--espresso-2); }

/* ---------- Место -------------------------------------------- */
.venue { text-align: center; }
.venue-name { font-family: var(--display); font-size: 1.42rem; margin: 12px 0 6px; }
.venue-addr { color: var(--muted); font-size: .98rem; line-height: 1.62; max-width: 29ch; margin: 0 auto 22px; }
.map-btns { display: grid; gap: 10px; max-width: 296px; margin: 0 auto; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;                  /* палец, а не курсор */
  padding: 0 18px;
  border: 1px solid var(--gold-dark);
  border-radius: 999px;
  background: transparent;
  color: var(--espresso);
  font-family: var(--body);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: rgba(199,155,62,.14); }
.btn--gold { background: var(--gold-grad); border-color: var(--gold-dark); color: #FFFAF0; }
.btn--gold:hover { filter: brightness(1.06); }

/* ---------- RSVP --------------------------------------------- */
.rsvp {
  /* стоит сразу за приглашением: сверху тот же тон, чтобы читалось
     как продолжение фразы, а не как отдельный раздел */
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 46%, var(--cream-deep) 100%);
  padding-top: calc(var(--section) * .6);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rsvp .arch {
  --arch-r: 118px;
  width: min(384px, 90vw);
  padding: 30px 22px 26px;
  background: rgba(253,249,241,.9);
}
.rsvp-hint { font-size: .93rem; line-height: 1.62; color: var(--muted); max-width: 30ch; margin: 12px auto 0; }

.form { display: grid; gap: 13px; margin-top: 22px; text-align: left; }
.field label {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.field input, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  background: rgba(255,253,248,.9);
  border: 1px solid rgba(168,121,31,.34);
  border-radius: var(--radius);
  color: var(--espresso);
  font-family: var(--body);
  font-size: 16px;                   /* <16px → iOS зумит форму при фокусе */
}
.field textarea { min-height: 74px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--gold-mid); outline-offset: 1px; }

.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 7px 3px;
  border: 1px solid rgba(168,121,31,.34);
  border-radius: var(--radius);
  background: rgba(255,253,248,.7);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--espresso-2);
  cursor: pointer;
  margin: 0;
}
.choice input:checked + label { background: var(--gold-grad); border-color: var(--gold-dark); color: #FFFAF0; }
.choice input:focus-visible + label { outline: 2px solid var(--espresso); outline-offset: 2px; }

.form-msg { font-size: .86rem; text-align: center; min-height: 1.1em; margin: 0; }
.form-msg[data-state="error"] { color: #9A3B2B; }

.rsvp-done { text-align: center; max-width: 30ch; margin: 0 auto; padding: 8px 0 4px; }
.rsvp-done .tick { font-family: var(--display); font-size: 2rem; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Контакты, подвал --------------------------------- */
.contacts { background: var(--champagne); text-align: center; }
.contact-list { display: grid; gap: 9px; max-width: 296px; margin: 0 auto; }

.footer {
  background: var(--espresso);
  color: rgba(251,246,236,.56);
  text-align: center;
  font-size: .82rem;
  line-height: 1.7;
  padding: 30px var(--gutter) 116px;  /* запас под sticky-кнопку */
}
.footer a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(235,214,156,.35); }
/* Toygo и Baytix в одном весе: гость ищет, где заказать приглашение,
   местный видит, кто это делает. Обе строки одинаково читаемы. */
.foot-sep { opacity: .45; margin: 0 4px; }
.foot-by { white-space: nowrap; }
@media (max-width: 360px) {
  .foot-sep { display: none; }
  .foot-by { display: block; margin-top: 3px; }
}

/* ---------- Sticky CTA --------------------------------------- */
.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(46,36,26,.9) 55%, rgba(46,36,26,0));
  transform: translateY(130%);
  transition: transform .32s ease;
}
.cta-bar.is-visible { transform: translateY(0); }
.cta-bar .btn { width: 100%; max-width: 416px; }

/* Пока конверт закрыт, первый экран просто невидим и анимация
   не назначена. Как только конверт открывается, класс снимается —
   анимация назначается заново и проигрывается с начала.

   Раньше здесь была пауза через animation-play-state. Она оказалась
   ненадёжной: анимация могла остаться в паузе навсегда, и после
   открытия конверта текст не появлялся вообще. */
.hero.waiting .arch,
.hero.waiting .arch > *,
.hero.waiting .countdown-wrap,
.hero.waiting .scroll-cue {
  animation: none !important;
  opacity: 0;
}

/* ---------- Появление первого экрана -------------------------
   Ступенчато: фон, потом арка, потом её содержимое сверху вниз.
   Скорость задаётся одной переменной --rise ниже.
   Двигаем только opacity и transform — эти два свойства браузер
   считает на видеокарте и не пересчитывает вёрстку. На дешёвом
   Android остальное подтормаживает. */
:root { --rise: 1.4s; --ease-rise: cubic-bezier(.16,.72,.24,1); }

.hero-bg { animation: fade-in 1.1s ease both; }

.hero .arch {
  animation: rise-arch var(--rise) .15s var(--ease-rise) both;
}
/* Каждому элементу — полное правило целиком. Сокращённая запись
   в общем селекторе с переопределением задержки ниже вела себя
   непредсказуемо: часть элементов стартовала не в свой момент. */
.hero .arch > .orn          { animation: rise-soft 1s  .60s var(--ease-rise) both; }
.hero .arch > .hero-eyebrow { animation: rise-soft 1s  .75s var(--ease-rise) both; }
.hero .arch > .names        { animation: rise-soft 1s  .90s var(--ease-rise) both; }
.hero .arch > .datebox      { animation: rise-soft 1s 1.10s var(--ease-rise) both; }
.hero .countdown-wrap       { animation: rise-soft 1s 1.30s var(--ease-rise) both; }

@keyframes fade-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise-arch{ from { opacity: 0; transform: translateY(30px) scale(.965) } to { opacity: 1; transform: none } }
@keyframes rise-soft{ from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

/* Страховка: что бы ни случилось с анимацией, через 2,6 секунды
   первый экран виден. Пустая страница недопустима. */
.hero.shown .arch,
.hero.shown .arch > *,
.hero.shown .countdown-wrap,
.hero.shown .scroll-cue { opacity: 1 !important; transform: none !important; }

/* ---------- Появление остальных секций ----------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero-bg, .hero .arch, .hero .arch > *, .hero .countdown-wrap {
    opacity: 1; transform: none; transition: none; animation: none;
  }
  .cta-bar { transition: none; }
}

/* ---------- Кошумча ------------------------------------------
   Главная традиция тоя — конверт с деньгами. Гость из другого
   города или из-за границы не может его вручить лично. Этот блок
   закрывает ровно этот случай, поэтому стоит после подтверждения:
   сначала «приду / не приду», и только потом про перевод. */
.gift { background: var(--cream-deep); text-align: center; }
.gift-note { font-size: .93rem; color: var(--muted); max-width: 30ch; margin: 12px auto 0; line-height: 1.62; }

.gift-card {
  max-width: 340px;
  margin: 0 auto;
  padding: 24px 22px;
  background: rgba(253,249,241,.92);
  border: 1px solid rgba(168,121,31,.34);
  border-radius: var(--radius);
}
.gift-qr {
  width: min(200px, 62%);
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0 auto 18px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(168,121,31,.24);
  border-radius: var(--radius);
}
.gift-owner { font-family: var(--display); font-size: 1.12rem; margin: 0 0 14px; }
.gift-copy { width: 100%; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.gift-copied { font-size: .84rem; color: var(--gold-dark); margin: 10px 0 0; font-weight: 600; }

.gift-banks { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 14px; }
.gift-banks a {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid rgba(168,121,31,.3);
  border-radius: var(--radius);
  background: rgba(255,253,248,.8);
  color: var(--espresso-2);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
}
.gift-banks a:hover { border-color: var(--gold-dark); }

/* ---------- Поделиться и календарь --------------------------- */
.tools { background: var(--cream-deep); padding-top: 0; }
/* Две кнопки в столбик: на узком экране «Чакырууну бөлүшүү»
   в две строки рядом с «Календарга кошуу» выглядит рвано. */
.tool-btns { display: grid; gap: 10px; max-width: 360px; margin: 0 auto; }
.tool-btns .btn { width: 100%; }
@media (min-width: 480px) { .tool-btns { grid-template-columns: 1fr 1fr; } }

/* Тона бумаги конверта. Задаются явно для каждой палитры:
   вычисление из цветов сайта давало прозрачность и грязь. */
:root {
  --env-light: #FFFDF8;
  --env-mid:   #F6EEDC;
  --env-dark:  #EADBB9;
  --env-card:  #FFFFFF;   /* карточка внутри — самая светлая */
}
[data-palette="olive"]   { --env-light: #F4F5E8; --env-mid: #E6E8D2; --env-dark: #D3D7B6; --env-card: #FBFCF3; }
[data-palette="blush"]   { --env-light: #FDF4F0; --env-mid: #F6E4DD; --env-dark: #ECD2C8; --env-card: #FFFAF7; }
[data-palette="marsala"] { --env-light: #6B2331; --env-mid: #521A26; --env-dark: #3A0F19; --env-card: #7C2C3B; }
[data-palette="emerald"] { --env-light: #1F4A3C; --env-mid: #163629; --env-dark: #0F2A23; --env-card: #276054; }
[data-palette="night"]   { --env-light: #26375C; --env-mid: #1A2743; --env-dark: #101A2E; --env-card: #2F4471; }

/* ============================================================
   КОНВЕРТ. Первое, что видит гость.
   Строится как настоящий: корпус, боковые сгибы, нижний клапан,
   верхний клапан и сургуч. Плоские фигуры сразу выдают подделку,
   поэтому каждая грань имеет свою подсветку и тень.
   ============================================================ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  cursor: pointer;
  overflow: hidden;
  /* Цвета берутся из палитры: конверт должен быть того же тона,
     что и сам сайт, иначе открытие выглядит как переход на другой сайт.
     background-color обязателен: без него сквозь интро просвечивает
     фоновая картинка первого экрана вместе с тенью арки. */
  background-color: var(--cream-deep);
  background-image:
    radial-gradient(50% 30% at 22% 12%, rgba(255,253,247,.16), transparent 64%),
    radial-gradient(46% 28% at 84% 22%, rgba(255,246,214,.12), transparent 66%),
    linear-gradient(162deg, var(--cream) 0%, var(--cream-deep) 44%, var(--champagne) 100%);
  transition: opacity .8s ease, visibility .8s;
}
.intro.is-open { opacity: 0; visibility: hidden; pointer-events: none; }

.envelope {
  position: relative;
  width: min(330px, 84vw);
  aspect-ratio: 1.46;
  perspective: 1100px;
  /* Ничего не должно вылезать за границы конверта, пока он закрыт */
  overflow: hidden;
  /* Конверт «дышит»: едва заметное покачивание, будто лежит на ткани.
     Двигаем только transform — это не нагружает телефон. */
  animation: env-float 4.6s ease-in-out infinite, env-in 1.1s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes env-in {
  from { opacity: 0; transform: translateY(26px) scale(.94) }
  to   { opacity: 1; transform: none }
}
@keyframes env-float {
  0%, 100% { transform: translateY(0)    rotate(0deg) }
  50%      { transform: translateY(-7px) rotate(-.5deg) }
}
.is-open .envelope { animation: none; }
/* Тень на ткани под конвертом. Живёт на отдельной обёртке,
   потому что сам конверт теперь обрезает всё, что за его границами. */
.env-shadow {
  position: absolute;
  left: 50%;
  width: min(300px, 76vw);
  margin-left: min(-150px, -38vw);
  top: 50%;
  margin-top: 108px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(50% 50%, rgba(0,0,0,.45), transparent 72%);
  filter: blur(7px);
  pointer-events: none;
}

/* Карточка, выезжающая изнутри. Форма арки — как на самом сайте. */
.env-card {
  position: absolute;
  transition-property: transform;
  left: 9%; right: 9%;
  /* Карточка целиком внутри конверта: верх ниже кромки корпуса,
     низ вровень с ним. Раньше её скруглённый верх торчал над
     конвертом и читался как полупрозрачная арка. */
  top: 34%;
  height: 66%;
  border-radius: 60px 60px 4px 4px;
  /* Светлее корпуса, чтобы карточка читалась при выезде */
  background: linear-gradient(180deg, var(--env-card) 0%, var(--env-light) 100%);
  box-shadow: inset 0 0 0 1px rgba(245,228,168,.32), 0 2px 8px rgba(0,0,0,.3);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18px;
  transform: translateY(0);
  transition: transform .95s cubic-bezier(.28,.84,.3,1);
  z-index: 1;
}
.intro.is-open .envelope { overflow: visible; }
.is-open .env-card { transform: translateY(-84%) scale(1.02); }
.env-card span {
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold-mid);
  opacity: 0;
  transition: opacity .5s .5s ease;
}
.is-open .env-card span { opacity: 1; }

/* Корпус: нижняя часть конверта */
.env-body {
  position: absolute;
  inset: 30% 0 0 0;
  border-radius: 2px 2px 4px 4px;
  /* Бумага конверта светлее фона страницы, иначе силуэт теряется */
  background: linear-gradient(168deg, var(--env-light) 0%, var(--env-mid) 52%, var(--env-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(245,228,168,.26),
    0 18px 36px -14px rgba(0,0,0,.55);
  z-index: 3;
  overflow: hidden;
}
/* боковые сгибы: не белые треугольники, а едва заметные грани */
.env-body::before, .env-body::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 54%;
}
.env-body::before {
  left: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: linear-gradient(112deg, rgba(255,252,244,.14), rgba(0,0,0,.18) 78%);
}
.env-body::after {
  right: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: linear-gradient(248deg, rgba(255,252,244,.1), rgba(0,0,0,.2) 78%);
}
/* тонкая золотая кромка по низу */
.env-edge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold-line);
  opacity: .5;
  z-index: 4;
}

/* Верхний клапан */
.env-flap {
  position: absolute;
  left: 0; right: 0;
  top: 30%;                 /* ровно верхняя кромка корпуса */
  height: 42%;
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform .9s cubic-bezier(.52,0,.28,1);
  z-index: 4;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(178deg, var(--env-light) 0%, var(--env-mid) 58%, var(--env-dark) 100%);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.32));
}
.is-open .env-flap { transform: rotateX(-176deg); z-index: 2; }
/* изнанка клапана темнее — так бумага и выглядит */
/* Тонкая золотая линия по краю клапана */
.env-flap::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%, 50% calc(100% - 1.5px), 0 1.5px);
  background: var(--gold-grad);
  opacity: .55;
}
.env-flap::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background: linear-gradient(178deg, rgba(0,0,0,.3), rgba(0,0,0,.08));
  opacity: 0;
  transition: opacity .45s .4s ease;
}
.is-open .env-flap::after { opacity: 1; }

/* Сургучная печать */
.env-seal {
  position: absolute;
  left: 50%;
  top: 68%;                 /* у острия клапана, как на настоящем письме */
  width: 72px; height: 72px;
  margin: -36px 0 0 -36px;
  z-index: 5;
  display: grid;
  place-items: center;
  /* края у сургуча неровные — идеальный круг выглядит пуговицей */
  border-radius: 47% 53% 45% 55% / 52% 46% 54% 48%;
  /* сургуч матовый: сильный блик превращает его в стеклянную пуговицу */
  background:
    radial-gradient(52% 46% at 38% 32%, rgba(255,244,206,.34), transparent 70%),
    radial-gradient(74% 74% at 64% 78%, rgba(112,74,10,.42), transparent 64%),
    linear-gradient(142deg, #BE9130 0%, #D9BB72 34%, #B07F26 66%, #8A5E14 100%);
  box-shadow:
    inset 0 -3px 8px rgba(78,50,8,.5),
    inset 0 1px 3px rgba(255,244,208,.2),
    0 6px 16px -4px rgba(0,0,0,.6);
  transition: transform .55s ease, opacity .55s ease;
}
.env-seal::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  border: 1px solid rgba(255,248,222,.42);
}
/* Блик, пробегающий по сургучу: золото должно жить */
.env-seal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255,250,225,.45) 50%, transparent 62%);
  background-size: 280% 100%;
  animation: seal-shine 4.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes seal-shine {
  0%, 62%, 100% { background-position: 190% 0 }
  30%           { background-position: -90% 0 }
}
.is-open .env-seal::before { animation: none; }
.env-seal span {
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1;
  color: #FFF6DE;
  text-shadow: 0 1px 2px rgba(70,46,10,.65), 0 -1px 0 rgba(255,250,226,.3);
}
.is-open .env-seal { transform: scale(.42) rotate(-22deg) translateY(-34px); opacity: 0; }

/* Весь конверт мягко отъезжает назад, освобождая место карточке */
.intro.is-open .envelope { transform: scale(1.06) translateY(-4%); transition: transform .9s cubic-bezier(.3,.85,.3,1); }

.intro-hint {
  position: relative;
  padding-left: 18px;
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-dark);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

.intro-hint::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: currentColor;
  animation: hint-dot 2.6s ease-in-out infinite;
}
@keyframes hint-dot {
  0%, 100% { transform: scale(.7); opacity: .4 }
  50%      { transform: scale(1);  opacity: .9 }
}

body.intro-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .env-card, .env-flap, .env-flap::after, .env-seal, .intro { transition: none; }
  .envelope, .env-seal::before, .intro-hint, .intro-hint::before { animation: none; }
}

/* ============================================================
   ЧТОБЫ ЛИСТАЛИ ДАЛЬШЕ И НЕ БОЯЛИСЬ НАЖИМАТЬ
   ============================================================ */

/* Первый экран чуть ниже высоты телефона: снизу видно край
   следующей секции. Это самый надёжный намёк, что дальше есть
   продолжение — сильнее любой стрелки. */
.hero { min-height: 92dvh; }

/* Стрелка вниз. Не иконка из набора, а две линии — так же
   уместно в свадебном приглашении, как и остальная графика. */
.scroll-cue {
  position: relative;
  z-index: 2;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  color: var(--gold-dark);
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  /* поверх фотографии золото по золоту не читается */
  text-shadow: 0 1px 3px rgba(255,252,244,.9), 0 0 10px rgba(255,252,244,.7);
  animation: cue-in 1s 1.7s var(--ease-rise) both;
  opacity: .85;
  /* Центр держим сами: первый экран бывает и flex-колонкой,
     и обычным блоком в режиме обложки. */
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}
/* Стрелка без кружка. Кружок со стрелкой внутри читался
   неоднозначно — убран. Заметность добирается движением
   и второй, догоняющей стрелкой. */
.scroll-cue svg {
  width: 22px;
  animation: nudge 1.9s ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(255,252,244,.95));
}
.scroll-cue svg + svg {
  margin-top: -13px;
  animation: nudge 1.9s .22s ease-in-out infinite;
  opacity: .5;
}
@keyframes cue-in { from { opacity: 0 } to { opacity: .85 } }
@keyframes nudge {
  0%, 100% { transform: translateY(0);   opacity: .7 }
  50%      { transform: translateY(6px); opacity: 1 }
}

/* Тонкая полоса сверху: видно, сколько страницы пройдено.
   Гость понимает, что она конечна, и доходит до формы. */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 60;
  background: var(--gold-grad);
  transition: width .12s linear;
  pointer-events: none;
}

/* ---------- Кнопки: понятнее и заметнее ---------- */
.btn {
  min-height: 54px;
  font-size: 1rem;
  letter-spacing: .01em;
}
/* Отклик на нажатие. Палец видит, что кнопка сработала —
   именно этого не хватает, когда человек боится нажимать. */
.btn:active { transform: scale(.975); }
.btn { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .08s ease; }

/* Второстепенная кнопка не должна выглядеть отключённой */
.btn:not(.btn--gold) {
  border-width: 1.5px;
  background: rgba(255,253,248,.72);
}
.btn--gold { box-shadow: 0 8px 20px -10px rgba(120,86,20,.7); }

/* ---------- Выбор ответа: заметная реакция ---------- */
.choice label { transition: background .18s ease, border-color .18s ease, transform .12s ease; }
.choice input:checked + label { transform: scale(1.03); }

/* ---------- Сколько гостей уже подтвердило ---------- */
.social {
  margin: 16px auto 0;
  padding: 9px 16px;
  max-width: max-content;
  border: 1px solid rgba(168,121,31,.34);
  border-radius: 999px;
  background: rgba(255,253,248,.78);
  font-size: .88rem;
  font-weight: 600;
  color: var(--espresso-2);
}
.social b { color: var(--gold-dark); }

/* ---------- Заголовки секций заметнее ---------- */
.label { font-size: .95rem; letter-spacing: .16em; font-weight: 600; }
.section-head h2 { margin-top: 11px; }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue, .scroll-cue svg { animation: none; opacity: .85; }
  .progress { transition: none; }
  .btn:active { transform: none; }
}

/* ---------- Иконки на кнопках -------------------------------
   Тонкая линия того же веса, что орнамент. Иконка не украшение:
   гость перестаёт принимать кнопку за подпись. */
.btn svg, .choice label svg, .scroll-cue svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn svg { width: 19px; height: 19px; margin-right: 9px; }
.btn > span { display: inline-block; }

.choice label { flex-direction: column; gap: 5px; padding: 9px 3px; min-height: 62px; }
.choice label svg { width: 20px; height: 20px; }
.choice label span { line-height: 1.15; }

/* Золотая кнопка: иконка чуть светлее текста, чтобы не спорила */
.btn--gold svg { opacity: .9; }

/* ---------- Правки для тёмных палитр -------------------------
   На светлом фоне карточки полупрозрачно-белые. На тёмном такая
   же прозрачность даёт грязно-серый — поэтому здесь свои правила. */
[data-palette="marsala"], [data-palette="emerald"], [data-palette="night"] { }

[data-palette="marsala"] body,
[data-palette="emerald"] body,
[data-palette="night"] body { background: var(--champagne); }

[data-palette="marsala"] .hero:not(.is-framed) .arch, [data-palette="marsala"] .rsvp .arch,
[data-palette="emerald"] .hero:not(.is-framed) .arch, [data-palette="emerald"] .rsvp .arch,
[data-palette="night"]   .hero:not(.is-framed) .arch, [data-palette="night"]   .rsvp .arch {
  background: rgba(255, 250, 238, .07);
  box-shadow: 0 26px 60px -22px rgba(0,0,0,.6);
}
[data-palette="marsala"] .hero.has-photo:not(.is-framed) .arch,
[data-palette="emerald"] .hero.has-photo:not(.is-framed) .arch,
[data-palette="night"]   .hero.has-photo:not(.is-framed) .arch { background: rgba(20, 8, 12, .58); }

[data-palette="marsala"] .cd-cell,
[data-palette="emerald"] .cd-cell,
[data-palette="night"] .cd-cell {
  background: rgba(255, 250, 238, .06);
  border-color: rgba(245, 228, 168, .3);
}
[data-palette="marsala"] .hero.has-photo .countdown-cap,
[data-palette="emerald"] .hero.has-photo .countdown-cap,
[data-palette="night"] .hero.has-photo .countdown-cap,
[data-palette="marsala"] .hero.has-photo .scroll-cue,
[data-palette="emerald"] .hero.has-photo .scroll-cue,
[data-palette="night"] .hero.has-photo .scroll-cue { color: var(--gold-light); }

[data-palette="marsala"] .scroll-cue,
[data-palette="emerald"] .scroll-cue,
[data-palette="night"] .scroll-cue { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
[data-palette="marsala"] .scroll-cue svg,
[data-palette="emerald"] .scroll-cue svg,
[data-palette="night"] .scroll-cue svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }

[data-palette="marsala"] .lang button,
[data-palette="emerald"] .lang button,
[data-palette="night"] .lang button {
  background: rgba(255,250,238,.1);
  color: var(--espresso-2);
  border-color: rgba(245,228,168,.34);
}

[data-palette="marsala"] .gift-card,
[data-palette="emerald"] .gift-card,
[data-palette="night"] .gift-card,
[data-palette="marsala"] .field input, [data-palette="marsala"] .field textarea,
[data-palette="emerald"] .field input, [data-palette="emerald"] .field textarea,
[data-palette="night"]   .field input, [data-palette="night"]   .field textarea {
  background: rgba(255,250,238,.07);
  border-color: rgba(245,228,168,.28);
  color: var(--espresso);
}
[data-palette="marsala"] .field input::placeholder,
[data-palette="emerald"] .field input::placeholder,
[data-palette="night"]   .field input::placeholder,
[data-palette="marsala"] .field textarea::placeholder,
[data-palette="emerald"] .field textarea::placeholder,
[data-palette="night"]   .field textarea::placeholder { color: var(--muted); }

[data-palette="marsala"] .choice label,
[data-palette="emerald"] .choice label,
[data-palette="night"]   .choice label,
[data-palette="marsala"] .btn:not(.btn--gold),
[data-palette="emerald"] .btn:not(.btn--gold),
[data-palette="night"]   .btn:not(.btn--gold),
[data-palette="marsala"] .social,
[data-palette="emerald"] .social,
[data-palette="night"]   .social,
[data-palette="marsala"] .gift-banks a,
[data-palette="emerald"] .gift-banks a,
[data-palette="night"]   .gift-banks a {
  background: rgba(255,250,238,.07);
  border-color: rgba(245,228,168,.3);
  color: var(--espresso);
}
[data-palette="marsala"] .btn--gold,
[data-palette="emerald"] .btn--gold,
[data-palette="night"]   .btn--gold,
[data-palette="marsala"] .choice input:checked + label,
[data-palette="emerald"] .choice input:checked + label,
[data-palette="night"]   .choice input:checked + label { color: #2A1008; }

[data-palette="marsala"] .timeline li,
[data-palette="emerald"] .timeline li,
[data-palette="night"]   .timeline li { border-bottom-color: rgba(245,228,168,.16); }

[data-palette="marsala"] .footer,
[data-palette="emerald"] .footer,
[data-palette="night"]   .footer { background: var(--champagne); color: var(--muted); }

/* Фон-шёлк на тёмных палитрах: свой, иначе он остаётся кремовым */
/* Фон с кольцами нарисован в светлых тонах: под тёмной палитрой
   поверх него кладём цветную вуаль, иначе арка тонет в кремовом. */
[data-palette="marsala"] .hero-bg--rings::before,
[data-palette="emerald"] .hero-bg--rings::before,
[data-palette="night"]   .hero-bg--rings::before,
[data-palette="marsala"] .hero:not(.is-framed) .hero-bg[style*="url"]::before,
[data-palette="emerald"] .hero:not(.is-framed) .hero-bg[style*="url"]::before,
[data-palette="night"]   .hero:not(.is-framed) .hero-bg[style*="url"]::before {
  background: rgba(var(--veil-rgb), .72);
  mix-blend-mode: multiply;
}
[data-palette="marsala"] { --veil-rgb: 74, 21, 32; }
[data-palette="emerald"] { --veil-rgb: 20, 53, 44; }
[data-palette="night"]   { --veil-rgb: 22, 33, 58; }

[data-palette="marsala"] .hero-bg--rings::after,
[data-palette="emerald"] .hero-bg--rings::after,
[data-palette="night"]   .hero-bg--rings::after,
[data-palette="marsala"] .hero:not(.is-framed) .hero-bg[style*="url"]::after,
[data-palette="emerald"] .hero:not(.is-framed) .hero-bg[style*="url"]::after,
[data-palette="night"]   .hero:not(.is-framed) .hero-bg[style*="url"]::after {
  background: radial-gradient(74% 50% at 50% 44%,
              rgba(var(--veil-rgb), .35), rgba(0,0,0,.45) 100%);
}

[data-palette="marsala"] .grain,
[data-palette="emerald"] .grain,
[data-palette="night"]   .grain { mix-blend-mode: overlay; opacity: .35; }
.hero.is-framed .grain { display: none; }   /* картинка уже готова, зерно её только грязнит */

[data-palette="marsala"] .hero-bg--silk {
  background-image:
    radial-gradient(46% 26% at 20% 10%, rgba(140,40,58,.7), transparent 62%),
    radial-gradient(44% 26% at 86% 20%, rgba(201,162,39,.26), transparent 64%),
    radial-gradient(56% 32% at 72% 84%, rgba(20,6,10,.8), transparent 66%),
    linear-gradient(162deg, #5C1B28 0%, #45131E 38%, #2E0B14 100%);
}
[data-palette="emerald"] .hero-bg--silk {
  background-image:
    radial-gradient(46% 26% at 20% 10%, rgba(28,82,66,.75), transparent 62%),
    radial-gradient(44% 26% at 86% 20%, rgba(201,162,39,.24), transparent 64%),
    radial-gradient(56% 32% at 72% 84%, rgba(6,20,16,.8), transparent 66%),
    linear-gradient(162deg, #1B4638 0%, #123328 38%, #0A1F18 100%);
}
[data-palette="night"] .hero-bg--silk {
  background-image:
    radial-gradient(46% 26% at 20% 10%, rgba(38,58,98,.75), transparent 62%),
    radial-gradient(44% 26% at 86% 20%, rgba(201,162,39,.22), transparent 64%),
    radial-gradient(56% 32% at 72% 84%, rgba(6,10,22,.85), transparent 66%),
    linear-gradient(162deg, #223154 0%, #172340 38%, #0C1225 100%);
}

/* Служебная строка над личным обращением. Мельче и спокойнее его:
   сначала «что это», потом «кому». */
.hero-kicker {
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  opacity: .82;
  margin: 12px 0 8px;
}

/* ---------- Персональное обращение ---------------------------
   Стоит над надписью «приглашение на той»: первое, что читает
   гость, — своё имя. Курсив, чтобы отличалось от служебной строки. */
.guest-greet {
  font-family: var(--accent);
  font-style: italic;
  font-size: clamp(1.18rem, 5vw, 1.42rem);
  line-height: 1.3;
  color: var(--gold-dark);
  margin: 0 0 6px;
}


/* ============================================================
   РЕЖИМ «ФОН-РАМКА»  ·  frame_mode
   Когда на фоне уже нарисовано окно — кружевная рамка, арка,
   орнамент — вторая арка поверх выглядит как рамка в рамке.
   Здесь наша арка исчезает, текст ложится прямо в чужую.
   ============================================================ */

.hero.is-framed .arch {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 0 8px;
  width: min(320px, 78vw);
}
.hero.is-framed .arch::before,
.hero.is-framed .arch::after { display: none; }   /* золотой кант и внутренняя линия */

.hero.is-framed .hero-bg::after { background: none; }   /* вуаль не нужна: фон уже тёмный */

/* Текст поверх картинки читается только с тенью */
.hero.is-framed .names,
.hero.is-framed .datebox,
.hero.is-framed .hero-eyebrow,
.hero.is-framed .guest-greet,
.hero.is-framed .countdown-cap,
.hero.is-framed .cd-num,
.hero.is-framed .cd-cap {
  text-shadow: 0 1px 10px rgba(0,0,0,.55), 0 0 26px rgba(0,0,0,.35);
}
.hero.is-framed .orn { filter: drop-shadow(0 1px 6px rgba(0,0,0,.5)); }

.hero.is-framed .datebox { border-top-color: rgba(245,228,168,.34); }
.hero.is-framed .datebox .side:first-child::after,
.hero.is-framed .datebox .side:last-child::before { background: rgba(245,228,168,.34); }

/* Счётчик без коробочек: рамка на фоне и так делит пространство */
.hero.is-framed .cd-cell {
  background: none;
  border: 0;
  padding: 0 6px;
  min-width: 52px;
}

/* Внутри чужой рамки места меньше — текст компактнее */
.hero.is-framed .names { font-size: clamp(1.78rem, 8.2vw, 2.5rem); }
.hero.is-framed .datebox { margin-top: 14px; padding-top: 12px; }
.hero.is-framed .countdown-wrap { margin-top: 16px; }

/* Бисмиллях на фоне занимает верх — опускаем содержимое ниже */
.hero.is-framed {
  justify-content: center;
  padding-top: 12dvh;
  padding-bottom: 6dvh;
}
/* На вытянутых экранах рамка растягивается сильнее — текст выше */
@media (min-aspect-ratio: 1/2) and (max-aspect-ratio: 3/5) {
  .hero.is-framed { padding-top: 10dvh; }
}


/* ============================================================
   ЦВЕТ ТЕКСТА НА ПЕРВОМ ЭКРАНЕ  ·  hero_text
   Фон у каждого клиента свой: бордовый, кремовый, с фотографией.
   Цвет из палитры на нём может совпасть с фоном — имена растворятся.
   Поэтому цвет текста выбирается отдельно от палитры.
   ============================================================ */

/* Светлый текст: для тёмных фонов */
.hero.text-light .names,
.hero.text-light .datebox,
.hero.text-light .datebox .big,
.hero.text-light .cd-num { color: #FFF6E4; }
.hero.text-light .hero-eyebrow,
.hero.text-light .guest-greet,
.hero.text-light .countdown-cap,
.hero.text-light .scroll-cue { color: #F2DFA8; }
.hero.text-light .cd-cap,
.hero.text-light .datebox .my { color: rgba(255,246,228,.72); }
.hero.text-light .orn,
.hero.text-light .amp { color: #F2DFA8; }
.hero.text-light .amp { background: none; -webkit-background-clip: initial; background-clip: initial; }
.hero.text-light .names,
.hero.text-light .datebox,
.hero.text-light .hero-eyebrow,
.hero.text-light .guest-greet,
.hero.text-light .countdown-cap,
.hero.text-light .cd-num,
.hero.text-light .cd-cap,
.hero.text-light .scroll-cue {
  text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 0 18px rgba(0,0,0,.45);
}
.hero.text-light .orn { filter: drop-shadow(0 1px 4px rgba(0,0,0,.7)); }
.hero.text-light .datebox { border-top-color: rgba(255,246,228,.32); }
.hero.text-light .datebox .side:first-child::after,
.hero.text-light .datebox .side:last-child::before { background: rgba(255,246,228,.32); }

/* Тёмный текст: для светлых фонов */
.hero.text-dark .names,
.hero.text-dark .datebox,
.hero.text-dark .datebox .big,
.hero.text-dark .cd-num { color: #241A12; }
.hero.text-dark .hero-eyebrow,
.hero.text-dark .guest-greet,
.hero.text-dark .countdown-cap,
.hero.text-dark .scroll-cue { color: #8A6318; }
.hero.text-dark .cd-cap,
.hero.text-dark .datebox .my { color: rgba(36,26,18,.68); }
.hero.text-dark .orn { color: #8A6318; }
.hero.text-dark .amp { color: #A8791F; background: none; -webkit-background-clip: initial; background-clip: initial; }
.hero.text-dark .names,
.hero.text-dark .datebox,
.hero.text-dark .hero-eyebrow,
.hero.text-dark .guest-greet,
.hero.text-dark .countdown-cap,
.hero.text-dark .cd-num,
.hero.text-dark .cd-cap,
.hero.text-dark .scroll-cue {
  text-shadow: 0 1px 3px rgba(255,252,244,.9), 0 0 16px rgba(255,252,244,.7);
}
.hero.text-dark .orn { filter: drop-shadow(0 1px 3px rgba(255,252,244,.95)); }
.hero.text-dark .datebox { border-top-color: rgba(36,26,18,.28); }
.hero.text-dark .datebox .side:first-child::after,
.hero.text-dark .datebox .side:last-child::before { background: rgba(36,26,18,.28); }


/* ---------- Фото пары ----------------------------------------
   Форма арки, как у самой рамки: круг смотрелся бы как аватарка
   из соцсети, а тут приглашение. */
/* Размер задаётся в JSON: photo_size — small | medium | large.
   По умолчанию крупно: на первом экране фото пары — главное после имён. */
.couple-photo {
  display: block;
  width: min(230px, 66%);
  aspect-ratio: 4 / 5;
  margin: 0 auto 14px;
  object-fit: cover;
  border-radius: 90px 90px 10px 10px;
  border: 1px solid rgba(168,121,31,.45);
  box-shadow: 0 10px 26px -12px rgba(46,36,26,.5);
  background: rgba(255,253,248,.4);
}
/* С фото места в арке меньше — подбираем размеры */
.hero.with-photo .names { font-size: clamp(1.62rem, 7.4vw, 2.2rem); }
.hero.with-photo .arch  { padding-top: 22px; }
.hero.with-photo .couple-photo { margin-bottom: 12px; }

.couple-photo.size-small  { width: min(170px, 48%); }
.couple-photo.size-large  { width: min(272px, 78%); }

/* Старое фото: тонкая золотая обводка вместо резкого края */
.couple-photo.vintage {
  border-width: 2px;
  border-color: rgba(168,121,31,.65);
  box-shadow: 0 12px 30px -12px rgba(46,36,26,.55),
              inset 0 0 0 1px rgba(255,253,248,.5);
}

@media (max-height: 700px) {
  .couple-photo { width: min(180px, 52%); }
  .couple-photo.size-large { width: min(210px, 60%); }
}

/* В режиме фон-рамка фото уже, чтобы поместиться в чужую рамку */
.hero.is-framed .couple-photo { width: min(140px, 38%); }


/* ============================================================
   РЕЖИМ «ОБЛОЖКА»  ·  background.mode = "cover"
   Картинка сверху целиком, текст под ней на фоне палитры.
   Для готовых композиций из Canva: имена и отсчёт не приходится
   вписывать в чужой круг, а он у каждого фона свой.
   ============================================================ */

.cover-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 clamp(18px, 5vw, 30px);
}

.hero.is-cover {
  display: block;
  min-height: 0;
  padding: 0 0 clamp(26px, 7vw, 44px);
  justify-content: flex-start;
  background: var(--cream);
}
.hero.is-cover .hero-bg,
.hero.is-cover .grain { display: none; }

.hero.is-cover .arch {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  width: min(430px, 92%);
  margin: 0 auto;
  /* Дню недели и времени нужны поля: без них строка упирается в край */
  padding: 0 18px;
}
.hero.is-cover .arch::before,
.hero.is-cover .arch::after { display: none; }

/* Текст обычного цвета палитры: он на своём фоне, не на картинке */
.hero.is-cover .names,
.hero.is-cover .datebox,
.hero.is-cover .datebox .big,
.hero.is-cover .cd-num { color: var(--espresso); text-shadow: none; }
.hero.is-cover .hero-eyebrow,
.hero.is-cover .guest-greet,
.hero.is-cover .hero-kicker,
.hero.is-cover .countdown-cap,
.hero.is-cover .scroll-cue { color: var(--gold-dark); text-shadow: none; }
.hero.is-cover .cd-cap,
.hero.is-cover .datebox .my { color: var(--muted); text-shadow: none; }
.hero.is-cover .orn { color: var(--gold-dark); filter: none; }

.hero.is-cover .cd-cell {
  background: rgba(255,253,248,.7);
  border: 1px solid rgba(168,121,31,.3);
}
.hero.is-cover .countdown-wrap { margin-top: 20px; }
/* Первый экран в режиме обложки — обычный блок, а не flex-колонка,
   поэтому подсказку центрируем вручную. */
.hero.is-cover .scroll-cue {
  margin: 18px auto 0;
  width: max-content;
}

/* Фото пары в обложке не нужно: оно уже на картинке */
.hero.is-cover .couple-photo { display: none; }

/* Тёмные палитры: подложка под текстом своя */
[data-palette="marsala"] .hero.is-cover,
[data-palette="emerald"] .hero.is-cover,
[data-palette="night"]   .hero.is-cover { background: var(--cream-deep); }
[data-palette="marsala"] .hero.is-cover .cd-cell,
[data-palette="emerald"] .hero.is-cover .cd-cell,
[data-palette="night"]   .hero.is-cover .cd-cell { background: rgba(255,250,238,.07); }

/* Одна строка вместо пары — юбилей, сүннөт той, кыз узатуу.
   Без амперсанда строка встаёт по центру и может быть длиннее. */
.names.is-single { line-height: 1.22; }
.names.is-single #groom { display: block; }

/* Аш: голуби с сердцем над именем неуместны — убираем орнамент арки */
.kind-ash .arch > .orn { display: none; }

/* Тёмные палитры + фон-фотография: ячейки счётчика были светлыми
   (правило .hero.has-photo сильнее палитры), а цифры — светлыми тоже.
   На аше в синем цифры почти не читались. Тёмное стекло — контраст. */
[data-palette="marsala"] .hero.has-photo:not(.is-framed) .cd-cell,
[data-palette="emerald"] .hero.has-photo:not(.is-framed) .cd-cell,
[data-palette="night"]   .hero.has-photo:not(.is-framed) .cd-cell {
  background: rgba(10, 10, 22, .5);
  border-color: rgba(245, 228, 168, .38);
}