/* =====================================================================
   Свадебное приглашение «Артём & Екатерина»
   Mobile-first, pixel-perfect по макету Figma (фрейм 1024px).
   Принцип масштабирования: пропорция 1024 -> ширина контейнера.
   1 «дизайн-пиксель» = var(--s). Все размеры/координаты задаются
   в дизайн-пикселях из макета и масштабируются вместе с шириной.
   ===================================================================== */

/* --------------------- Каллиграфический шрифт макета --------------------- */
@font-face {
  font-family: 'Sloop Script Pro';
  src: url('fonts/SloopScriptPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sloop Script Pro';
  src: url('fonts/SloopScriptPro-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #e7e0d3;            /* фон вокруг «телефонной» колонки на десктопе */
  color: #256182;
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: none; }

/* --------------------- Контейнер-«рамка» макета --------------------- */
/* container-type: inline-size делает .frame базой для единиц cqw,
   поэтому весь контент масштабируется относительно ШИРИНЫ колонки,
   а не вьюпорта — это даёт идентичные пропорции на 320–430px и выше. */
.frame {
  --s: 0.09765625cqw;            /* 100cqw / 1024 = размер одного дизайн-пикселя */
  container-type: inline-size;
  width: 100%;
  max-width: 480px;              /* на десктопе колонка «как телефон», по центру */
  margin: 0 auto;
  background: #ffffff;           /* белый фон страницы (в местах без секций-картинок) */
  position: relative;
  overflow: hidden;              /* подрезаем декор-листики, выходящие за правый край */
}

.stage {
  position: relative;
  width: 100%;
  height: calc(8994 * var(--s));  /* высота фрейма (финальный блок сдвинут вниз на 100) */
}

/* ------------------- Абсолютное позиционирование ------------------- */
/* Координаты и размеры берутся из макета (в дизайн-пикселях). */
.abs {
  position: absolute;
  left:  calc(var(--x) * var(--s));
  top:   calc(var(--y) * var(--s));
  width: calc(var(--w) * var(--s));
  z-index: 1;
}

/* Фоновые картинки секций и декор — под контентом, на всю ширину колонки */
.section-bg,
.leaves { z-index: 0; }
.section-bg { height: auto; }

/* Картинки сохраняют пропорции по заданной ширине */
.abs img,
img.abs { height: auto; }

/* ============================ Типографика ============================ */

/* «наконец-то» */
.t-script-small {
  margin: 0;
  font-weight: 400;
  font-size: calc(40 * var(--s));
  line-height: 1.3;
  color: #58849d;
  text-align: center;
  white-space: nowrap;
}

/* «мы женимся!» */
.t-hero {
  margin: 0;
  font-weight: 500;
  font-size: calc(77 * var(--s));
  line-height: 1.3;
  color: #ffd543;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Заголовки секций */
.t-title {
  margin: 0;
  font-weight: 500;
  font-size: calc(60 * var(--s));
  line-height: calc(60 * var(--s));
  color: #256182;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Основной текст */
.t-body {
  margin: 0;
  font-weight: 400;
  font-size: calc(40 * var(--s));
  line-height: calc(48 * var(--s));
  color: #256182;
  text-align: center;
}
.t-body.t-blue2 { color: #36607f; line-height: calc(60 * var(--s)); }

.up { text-transform: uppercase; }

/* ------------------------------ Имена ------------------------------ */
.names { height: calc(260 * var(--s)); }
.names > span {
  position: absolute;
  left:  calc(var(--x) * var(--s));
  top:   calc(var(--y) * var(--s));
  width: calc(var(--w) * var(--s));
  color: #fecf36;
  white-space: nowrap;
}
/* Имена: первая буква — Sloop Script Pro 148px, остальные — EB Garamond Medium 75px, ВЕРХНИЙ регистр */
.name {
  font-family: 'EB Garamond', serif;
  font-weight: 500;
  font-size: calc(75 * var(--s));
  line-height: 1;
  text-transform: uppercase;
}
.name .cap {
  font-family: 'Sloop Script Pro', cursive;
  font-weight: 400;
  font-size: calc(148 * var(--s));
  line-height: 1;
  vertical-align: baseline;
  text-transform: none;
}
.amp {
  font-family: 'Sloop Script Pro', cursive;
  font-weight: 400;
  font-size: calc(148 * var(--s));
  line-height: 1;
}

/* --------------------------- Программа дня --------------------------- */
.prog-icon { z-index: 1; }
.t-prog-time,
.t-prog-label {
  margin: 0;
  font-weight: 400;
  font-size: calc(41 * var(--s));
  line-height: calc(60 * var(--s));
  color: #62839a;
  white-space: nowrap;
}

/* ------------------------------ Кнопки ------------------------------ */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--h) * var(--s));
  border: clamp(1px, calc(2 * var(--s)), 3px) solid #36607f;
  border-radius: calc(57 * var(--s));
  background: transparent;
  color: #36607f;
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  font-size: calc(40 * var(--s));
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: #36607f; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* --------------------------- Поля анкеты --------------------------- */
.t-field-label {
  margin: 0;
  font-weight: 400;
  font-size: calc(40 * var(--s));
  line-height: calc(48 * var(--s));
  color: #36607f;
  white-space: nowrap;
}
.t-field-sub {
  margin: 0;
  font-weight: 400;
  font-size: calc(30 * var(--s));
  line-height: calc(48 * var(--s));
  color: #36607f;
  white-space: nowrap;
}

.field-input {
  height: calc(var(--h) * var(--s));
  padding: 0 calc(36 * var(--s));
  border: clamp(1px, calc(2 * var(--s)), 3px) solid #36607f;
  border-radius: calc(57 * var(--s));
  background: transparent;
  color: #36607f;
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  font-size: calc(40 * var(--s));
  line-height: 1;
  outline: none;
}
.field-input:focus { box-shadow: 0 0 0 calc(2 * var(--s)) rgba(54, 96, 127, .25); }

/* --------------------- Кастомные чекбоксы/радио --------------------- */
.opt {
  display: flex;
  align-items: center;
  gap: calc(11 * var(--s));
  color: #36607f;
  font-weight: 400;
  font-size: calc(40 * var(--s));
  line-height: calc(48 * var(--s));
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.mark {
  position: relative;
  flex: 0 0 auto;
  width: calc(42 * var(--s));
  height: calc(42 * var(--s));
  border: clamp(1px, calc(2 * var(--s)), 3px) solid #36607f;
  transition: background-color .15s ease;
}
.mark-round  { border-radius: 50%; }
.mark-square { border-radius: 0; }

/* отмечено: квадрат — заливка + галочка */
.opt input:checked + .mark-square { background: #36607f; }
.opt input:checked + .mark-square::after {
  content: "";
  position: absolute;
  left: 28%;
  top: 12%;
  width: 28%;
  height: 55%;
  border: solid #fff;
  border-width: 0 calc(3 * var(--s)) calc(3 * var(--s)) 0;
  transform: rotate(45deg);
}
/* отмечено: круг — внутренняя точка */
.opt input:checked + .mark-round::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: #36607f;
}
/* фокус с клавиатуры */
.opt input:focus-visible + .mark {
  box-shadow: 0 0 0 calc(3 * var(--s)) rgba(54, 96, 127, .3);
}

/* ------------------------------ Таймер ------------------------------ */
.countdown { height: calc(107 * var(--s)); }
.cd-cell {
  position: absolute;
  top: 0;
  left: calc(var(--cx) * var(--s));
  width: calc(115 * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cd-num {
  font-weight: 500;
  font-size: calc(77 * var(--s));
  line-height: calc(60 * var(--s));
  color: #256182;
}
.cd-label {
  font-weight: 400;
  font-size: calc(40 * var(--s));
  line-height: calc(47 * var(--s));
  color: #36607f;
}
.cd-colon {
  position: absolute;
  top: 0;
  left: calc(var(--cx) * var(--s));
  font-weight: 500;
  font-size: calc(77 * var(--s));
  line-height: calc(60 * var(--s));
  color: #256182;
}

/* --------------------------- Тост статуса --------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  max-width: min(92vw, 440px);
  margin: 0;
  padding: 14px 22px;
  border-radius: 14px;
  background: #36607f;
  color: #fff;
  font-family: 'EB Garamond', serif;
  font-size: 17px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: #b4452f; }

/* ----------------- Доступность: уважение reduce-motion ----------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}