/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ШАБЛОН «СКЕТЧ» — рисованное свадебное приглашение
   Палитра:
     pink   #e85d86  (акценты, скрипт, время)
     ink    #1c1c1c  (маркерные заголовки, лайн-арт)
     text   #2b2b2b  (тело)
     grey   #c9c9c9  (неактивные даты)
     blue   #a3b8e6  (синее конфетти, рамка)
     yellow #f4cf45  (жёлтое конфетти)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --pink:    #e85d86;
  --pink-dk: #d8476f;
  --ink:     #1c1c1c;
  --text:    #2b2b2b;
  --grey:    #c9c9c9;
  --blue:    #a3b8e6;
  --yellow:  #f4cf45;
  --paper:   #ffffff;

  --sw-lilac: #c79bd6;
  --sw-tan:   #ceb48a;
  --sw-red:   #ab311a;
  --sw-pink:  #df5d84;
  --sw-cream: #f5eedf;

  /* Шрифты из оригинального дизайна (извлечены из PDF) */
  --font-title:  'HitchHike', 'Caveat', cursive;   /* «МЫ женимся!», заголовки, имена, время */
  --font-body:   'Anaktoria', Georgia, serif;       /* абзацы и подписи под иконками */
  --font-badge:  'Caveat', cursive;                  /* «Наконец-то!» */
  --font-dates:  'Life Savers', cursive;             /* 06 07 08 09 10 */
  --font-form:   'Alice', Georgia, serif;            /* текст анкеты */

  --pad-x: 26px;
}

@font-face {
  font-family: 'HitchHike';
  src: url('assets/fonts/HitchHike.woff2') format('woff2'),
       url('assets/fonts/HitchHike.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Anaktoria';
  src: url('assets/fonts/Anaktoria.woff2') format('woff2'),
       url('assets/fonts/Anaktoria.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #efe7ea;
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }

.card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(60, 30, 45, 0.18);
}

/* ─── Анимация появления ───────────────────────── */
.fu { opacity: 0; transform: translateY(30px);
      transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.fu.in { opacity: 1; transform: none; }
.fu-d1 { transition-delay: .08s; }
.fu-d2 { transition-delay: .16s; }
.fu-d3 { transition-delay: .24s; }

/* ─── Общие текстовые стили ────────────────────── */
.section { position: relative; padding: 0 var(--pad-x); }

.h-script {
  font-family: var(--font-title);
  color: var(--ink);
  font-weight: 400;
  text-align: center;
  line-height: 1;
}
.h-marker {
  font-family: var(--font-title);
  color: var(--ink);
  font-weight: 700;
  text-align: center;
  line-height: 1;
  letter-spacing: .5px;
}
.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
  color: var(--text);
  max-width: 340px;
  margin: 0 auto;
}

/* конфетти-декор */
.confetti { position: absolute; pointer-events: none; z-index: 1; opacity: .9; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━ ОБЛОЖКА ━━━━━━━━━━━━ */
.cover { padding: 28px var(--pad-x) 14px; }
.cover-head { position: relative; min-height: 320px; }

/* конфетти-брызги */
.cover .cf { position: absolute; pointer-events: none; }
.cf-blue1   { top: 26px;  left: 40%;  width: 120px; }
.cf-yellow1 { top: -4px;  right: -14px; width: 150px; }
.cf-yellow2 { top: 168px; left: -16px; width: 112px; }

/* бейдж-кисть «Наконец-то!» */
.badge-wrap { position: relative; display: inline-block; margin: 0 0 2px 2px; }
.badge-brush { width: 196px; height: auto; }
.badge-text {
  position: absolute; top: 46%; left: 52%;
  transform: translate(-50%, -50%) rotate(-5deg);
  font-family: var(--font-badge); font-weight: 700; color: #fff;
  font-size: 23px; white-space: nowrap;
}

/* заголовок слева */
.title {
  font-family: var(--font-title);
  color: var(--ink);
  font-size: 94px;
  line-height: .82;
  text-align: left;
  margin: 0;
  padding-left: 4px;
  position: relative; z-index: 2;
}
.title .l2 { display: block; padding-left: 28px; }

/* пара сердец справа */
.title-hearts { position: absolute; right: 16px; top: 58px; width: 132px; z-index: 1; }
.title-hearts .hb { position: absolute; }
.title-hearts .hb1 { width: 86px; right: 30px; top: 0; }
.title-hearts .hb2 { width: 54px; right: 0;  top: 46px; }

/* имена с подчёркиванием */
.names-wrap { text-align: right; padding-right: 22px; margin-top: 6px; position: relative; z-index: 2; }
.names {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 34px;
  color: var(--ink);
  position: relative;
}
.names::after {
  content: ''; display: block; height: 3px; margin-top: 1px;
  background: var(--pink); border-radius: 3px; transform: rotate(-1deg);
}

/* полароиды */
.polaroids {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 10px; margin: 28px -14px 8px;   /* отрицательные поля — выходим за padding секции,
                                          чтобы полароиды стали покрупнее */
  max-width: none;
}
/* Слои: сменное фото + рамка-оверлей (прозрачная внутри).
   Меняется только фото внутри рамки — сам полароид остаётся на месте.
   Окно рамки — НАКЛОННЫЙ четырёхугольник, поэтому фото обрезается ровно
   по форме окна через clip-path (координаты окна из SVG, в % от габарита).
   Так фото никогда не выходит за рамку, а кремовая рамка сверху прячет
   любой край-излишек. */
.pol {
  position: relative;
  flex: 1 1 0;
  max-width: 230px;
  aspect-ratio: 440 / 495;
}
.pol .photo {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 1;
}
/* Окно polaroid-frame-l.svg: 21.4,59.2 → 365.2,23.5 → 400.9,354.7 → 55.9,391.9
   (viewBox 435×491) */
.pol-l .photo {
  clip-path: polygon(4.9% 12.1%, 84.0% 4.8%, 92.2% 72.2%, 12.8% 79.8%);
}
/* Окно polaroid-frame-r.svg: 74.3,23.4 → 417.2,67.8 → 375.8,398.4 → 31.3,355.1
   (viewBox 445×500) */
.pol-r .photo {
  clip-path: polygon(16.7% 4.7%, 93.8% 13.6%, 84.5% 79.7%, 7.0% 71.0%);
}
.pol .frame {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}
.polaroids .pol-l { transform: rotate(-5deg); }
.polaroids .pol-r { transform: rotate(4deg); margin-top: 18px; }

/* ─── Дорогие гости ────────────────────────────── */
.guests { padding-top: 14px; padding-bottom: 30px; }
.guests-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
.guests-head img { width: 70px; }
.guests-head .h-script { font-size: 40px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━ НАШ ДЕНЬ ━━━━━━━━━━━━ */
.ourday { padding-top: 12px; padding-bottom: 26px; text-align: center; }
.ourday > .h-script { font-size: 40px; margin-bottom: 26px; }

.dates {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-bottom: 6px;
}
.dates .d {
  font-family: var(--font-dates);
  font-weight: 400;
  font-size: 32px;
  color: var(--grey);
}
.date-hl { position: relative; width: 90px; height: 90px; display: grid; place-items: center; }
.date-hl img { position: absolute; inset: 0; width: 100%; height: 100%; }
.date-hl span {
  position: relative;
  font-family: var(--font-dates);
  font-weight: 700;
  font-size: 38px;
  color: var(--pink);
}
.month { font-family: var(--font-title); font-size: 30px; color: var(--pink); }

/* ─── Локация ──────────────────────────────────── */
.location { padding-top: 18px; padding-bottom: 30px; text-align: center; }
.location .loc-heart { width: 110px; margin: 0 auto 6px; }
.location .h-marker { font-size: 46px; margin-bottom: 18px; }
.location .car { width: 200px; margin: 18px auto 0; }

/* ━━━━━━━━━━━━━━━━━━━━ ПРОГРАММА ДНЯ ━━━━━━━━━━━━━ */
.program { padding-top: 16px; padding-bottom: 30px; }
.program > .h-marker { font-size: 50px; margin-bottom: 10px; }

.timeline {
  position: relative;
  width: 100%;
  height: 1500px;
  margin-top: 10px;
}
.timeline .track {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1;
}
.stop {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  /* Ширина в процентах — чтобы на узком экране редактора стопы не наезжали
     друг на друга и не упирались в серпантинный трек посередине. */
  width: 34%;
  max-width: 168px;
}
.stop img.ic {
  height: 80px; width: auto; max-width: 100%;
  object-fit: contain; margin-bottom: 6px;
}
.stop .time {
  font-family: var(--font-title);
  font-size: 46px;
  color: var(--pink);
  line-height: 1;
  margin: 2px 0 0;
}
.stop .lab {
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--text);
  max-width: 100%;
}
.stop.left  { left: 3%;  align-items: flex-start; text-align: left; }
.stop.right { right: 3%; align-items: flex-end;   text-align: right; }

.s1 { top: 20px; }
.s2 { top: 320px; }
.s3 { top: 620px; }
.s4 { top: 920px; }
.s5 { top: 1220px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━ DRESS CODE ━━━━━━━━━━━ */
.dress { padding-top: 30px; padding-bottom: 60px; text-align: center;
         border-top: 1px dashed #f0d7df; }
.dress > .h-script { font-size: 44px; margin-bottom: 18px; }
.swatches { display: flex; justify-content: center; gap: 16px; margin: 22px 0 28px; }
.swatches i { width: 40px; height: 40px; border-radius: 50%; display: block;
              box-shadow: 0 3px 8px rgba(0,0,0,.08); }
.photos { display: flex; justify-content: center; align-items: flex-start; gap: 8px; }
/* Каждое платье: сменное фото + рамка-оверлей (для конструктора) */
.dress-pic {
  position: relative;
  width: 48%;
  aspect-ratio: 479.25 / 646.5;   /* пропорции frame-red.svg */
}
.dress-pic.ph-l { transform: rotate(-3deg); }
.dress-pic.ph-r { transform: rotate(3deg); margin-top: 16px; }
/* Фото заполняет окно рамки целиком, края уходят под рамку */
.dress-pic .photo {
  position: absolute;
  top: 1.5%; left: 4%;
  width: 92%; height: 97%;
  object-fit: cover; object-position: center;
  z-index: 1;
}
/* Рамка поверх фото */
.dress-pic .frame {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ АНКЕТА ━━━━━━━━━━━━━ */
.survey { padding-top: 34px; padding-bottom: 30px; }
.survey > .h-marker { font-size: 50px; margin-bottom: 16px; }
.q { font-family: var(--font-form); font-weight: 600; font-size: 18px;
     color: var(--ink); margin: 26px 0 12px; text-align: center; }
.rsvp-form { margin-top: 4px; }
.opt { display: flex; align-items: center; gap: 14px; max-width: 320px;
       margin: 0 auto 14px; font-size: 18px; color: var(--text);
       font-family: var(--font-form); cursor: pointer; text-align: left; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt .box {
  flex: none; width: 26px; height: 26px; border: 2px solid var(--ink);
  display: inline-grid; place-items: center; position: relative;
  transition: background .15s, border-color .15s;
}
.opt.radio .box { border-radius: 50%; }
.opt input:checked + .box { background: var(--pink); border-color: var(--pink); }
/* Галочка для чекбокса */
.opt input:checked + .box::after {
  content: '✓'; color: #fff; font-size: 17px; font-weight: 900; line-height: 1;
}
/* Для радио — круглая точка */
.opt.radio input:checked + .box::after {
  content: ''; width: 10px; height: 10px; background: #fff; border-radius: 50%;
}

.rsvp-submit {
  display: block; margin: 26px auto 0; border: none; cursor: pointer;
  background: var(--pink); color: #fff;
  font-family: var(--font-badge); font-weight: 700; font-size: 24px;
  padding: 9px 42px 7px; border-radius: 40px 40px 40px 8px;
  box-shadow: 0 8px 18px rgba(232, 93, 134, .32);
  transition: transform .15s, box-shadow .15s;
}
.rsvp-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(232, 93, 134, .4); }
.rsvp-thanks { text-align: center; padding: 30px 0 6px; }
.rsvp-thanks .month { font-size: 26px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━ ПОЖЕЛАНИЯ ━━━━━━━━━━━━ */
.wishes { padding-top: 30px; padding-bottom: 20px; text-align: center; }
.wishes > .h-marker { font-size: 50px; margin-bottom: 16px; }
.wishes-icons { position: relative; display: flex; justify-content: center;
                align-items: flex-end; gap: 30px; margin-top: 30px; min-height: 170px; }
.wishes-icons .candle { width: 64px; }
.wishes-icons .cam { width: 150px; }
.wishes .confetti-bl { left: -6px; bottom: 6px; width: 120px; }

/* ━━━━━━━━━━━━━━━━━━━━ ДО НОВЫХ ВСТРЕЧ ━━━━━━━━━━━ */
.outro { padding-top: 18px; padding-bottom: 46px; text-align: center; position: relative; }
.outro > .h-script { font-size: 46px; color: var(--ink); margin-bottom: 26px; }

/* Рамка-оверлей + сменное фото под ней (для конструктора) */
.framed {
  position: relative;
  width: 84%; max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 756.75 / 1084.5;   /* пропорции frame-blue.svg */
}
/* Фото заполняет прозрачное окно рамки целиком, края уходят под рамку */
.framed .photo {
  position: absolute;
  top: 6%; left: 6.5%;
  width: 85%; height: 88.5%;
  object-fit: cover; object-position: center 35%;
  z-index: 1;
}
/* Рамка поверх фото */
.framed .frame {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}

.outro .hearts { position: absolute; left: -36px; width: 104px;
                 bottom: 36px; z-index: 3; transform: rotate(-4deg); }
.outro .confetti-bl { left: 4px; bottom: 70px; width: 96px; }
.outro .confetti-br { right: 4px; bottom: 40px; width: 96px; }

.monogram { position: relative; width: 130px; height: 120px;
            margin: 30px auto 8px; display: grid; place-items: center; }
.monogram img { position: absolute; inset: 0; width: 100%; height: 100%; }
.monogram span { position: relative; font-family: var(--font-title); font-weight: 700;
                 font-size: 40px; color: var(--pink); letter-spacing: 2px; }
.sign { font-family: var(--font-title); font-size: 26px; color: var(--ink); }

/* ─── Адаптив ──────────────────────────────────── */
@media (max-width: 400px) {
  .title { font-size: 80px; }
  .title-hearts { width: 116px; top: 48px; }
}