/* ============================================================
   TOKENS — BOMA стиль: кремовый + бордо + рукопись
   ============================================================ */
:root {
  --cream:     #F5EDE0;
  --cream-d:   #EDE0CC;
  --bord:      #8B1A2A;
  --bord-d:    #6B1220;
  --bord-l:    #A52535;
  --dark:      #1A0A0E;
  --mid:       #6B4A50;
  --white:     #FDFAF5;

  --f-script:  'Playfair Display', Georgia, serif;
  --f-display: 'Playfair Display', Georgia, serif;
  --f-body:    'Montserrat', system-ui, sans-serif;

  --max: 520px;
  --gap: clamp(48px, 8vw, 80px);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--dark);
  font-family: var(--f-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
  padding: 13px 16px;
  background: rgba(245,237,224,.93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(139,26,42,.12);
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
}
.nav a { color: var(--bord); opacity: .75; transition: opacity .2s; font-weight: 600; letter-spacing: .12em; }
.nav a:hover, .nav a.active { opacity: 1; }

/* ============================================================
   HERO — тёмный фон, фото пары
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  background: #1a0a0e;
  display: flex; align-items: flex-end;
}
.hero__photo { position: absolute; inset: 0; }
.hero__photo img { width:100%; height:100%; object-fit:cover; object-position:center top; opacity:.5; }
.hero__photo::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(26,10,14,.9) 0%, rgba(26,10,14,.2) 55%, transparent 100%);
}
.hero__content {
  position: relative; z-index: 2;
  width:100%; padding: 80px 24px 56px; text-align: center; color: var(--cream);
}
.hero__eyebrow {
  font-family: var(--f-script); font-size: clamp(18px,5vw,24px);
  color: rgba(245,237,224,.65); margin-bottom: 16px;
}
.hero__names {
  font-family: var(--f-script); font-size: clamp(48px,14vw,80px);
  line-height: 1.1; margin-bottom: 12px; color: var(--cream);
}
.hero__amp { color: var(--bord-l); font-size: .65em; }
.hero__date { font-size: 11px; letter-spacing:.3em; color:rgba(245,237,224,.45); margin-bottom:32px; }
.hero__scroll {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,237,224,.3);
  animation: bounce 2.2s infinite;
}
.hero__scroll::after { content:''; width:1px; height:32px; background:rgba(245,237,224,.2); }
@keyframes bounce {
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(6px); }
}

/* ============================================================
   WAVE DIVIDERS — бордовые волны между секциями
   ============================================================ */
.wave { display:block; width:100%; line-height:0; }
.wave--down { margin-bottom:-1px; }
.wave--up   { margin-top:-1px; }

/* ============================================================
   SECTION BASE
   ============================================================ */
.section {
  position: relative; padding: var(--gap) 24px;
  max-width: var(--max); margin: 0 auto;
}
.section--bord { background: var(--bord); max-width:none; padding: var(--gap) 24px; }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); max-width:none; padding: var(--gap) 24px; }

.eyebrow {
  display:inline-block; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bord); margin-bottom:12px;
  font-weight: 400;
}
.eyebrow--light { color:rgba(245,237,224,.85); }

.section__title {
  font-family: var(--f-script); font-size: clamp(34px,10vw,52px);
  line-height: 1.15; margin-bottom: 20px; color: var(--bord);
}
.section__title--light { color: var(--cream); }

/* ============================================================
   HEARTS SVG decoration
   ============================================================ */
.hearts {
  display:flex; justify-content:center; gap:10px; margin-bottom:20px; opacity:.55;
}
.hearts svg { width:18px; height:18px; min-width:18px; max-width:18px; flex-shrink:0; fill:var(--bord); }

/* ============================================================
   COUNTDOWN
   ============================================================ */
.countdown-wrap {
  background: var(--white); padding: 40px 24px; text-align:center;
}
.countdown-title {
  font-family: var(--f-display); font-size: clamp(13px,3.5vw,16px);
  letter-spacing:.18em; text-transform:uppercase; color:var(--bord);
  margin-bottom:28px;
}
.countdown {
  display:flex; justify-content:center; gap:clamp(16px,5vw,36px); flex-wrap:wrap;
}
.countdown__unit { display:flex; flex-direction:column; align-items:center; }
.countdown__num {
  width: clamp(60px,16vw,80px); height: clamp(60px,16vw,80px);
  border: 1.5px solid var(--bord); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-size: clamp(22px,7vw,34px); font-weight:400;
  color: var(--bord); margin-bottom:8px;
}
.countdown__name { font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--mid); }

/* ============================================================
   INVITE
   ============================================================ */
.invite { text-align:center; }
.invite__heart-top {
  display:block; margin:0 auto 24px; width:clamp(60px,16vw,80px); opacity:.7;
}
.invite__text { color:var(--mid); font-size:clamp(14px,3vw,16px); margin-bottom:24px; line-height:1.8; }
.invite__date-big {
  font-family:var(--f-script); font-size:clamp(32px,10vw,52px);
  color:var(--bord); margin-bottom:28px; line-height:1;
}

/* ============================================================
   CALENDAR
   ============================================================ */
.calendar-wrap { max-width:var(--max); margin:0 auto; padding:0 24px var(--gap); }
.cal-header {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:8px;
}
.cal-month { font-family:var(--f-script); font-size:clamp(26px,7vw,36px); color:var(--bord); }
.cal-year  { font-family:var(--f-display); font-size:clamp(26px,7vw,36px); font-weight:400; color:var(--mid); }
.calendar { display:grid; grid-template-columns:1fr 1fr 1fr; border:1px solid rgba(139,26,42,.2); }
.calendar__col { padding:16px 10px; text-align:center; border-right:1px solid rgba(139,26,42,.15); }
.calendar__col:last-child { border-right:none; }
.calendar__dow { font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:var(--mid); margin-bottom:6px; }
.calendar__day { font-family:var(--f-display); font-size:clamp(34px,10vw,50px); font-weight:400; line-height:1; color:rgba(139,26,42,.18); }
.calendar__col--active .calendar__day {
  color:var(--bord); position:relative;
}
.calendar__col--active .calendar__day::before {
  content:'';
  position:absolute; inset:-6px; border:2px solid var(--bord); border-radius:50%;
  width:calc(100% + 12px); height:calc(100% + 12px);
}

/* ============================================================
   STORY — «Тили-тили тесто» + поляроиды
   ============================================================ */
.story-wrap { background:var(--cream); }
.story { max-width:var(--max); margin:0 auto; padding:var(--gap) 24px; text-align:center; }
.story__title {
  font-family:var(--f-script); font-size:clamp(36px,11vw,56px);
  color:var(--bord); line-height:1.15; margin-bottom:6px;
}
.story__sub { color:var(--mid); font-size:14px; margin-bottom:36px; }
.story__polaroids {
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px;
}
.polaroid {
  background:var(--white);
  padding:8px 8px 28px;
  box-shadow:0 4px 16px rgba(0,0,0,.13);
  position:relative;
}
.polaroid--left  { transform:rotate(-3deg); }
.polaroid--right { transform:rotate(2.5deg); }
.polaroid img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; display:block; }
.polaroid__label {
  position:absolute; bottom:5px; left:0; right:0;
  text-align:center;
  font-family:var(--f-script); font-size:clamp(13px,3.5vw,16px); color:var(--bord);
}
.story__heart-divider {
  display:flex; align-items:center; gap:12px; margin:0 auto 20px; max-width:240px;
}
.story__heart-divider::before,
.story__heart-divider::after { content:''; flex:1; height:1px; background:rgba(139,26,42,.2); }
.story__heart-divider svg { width:18px; height:18px; fill:var(--bord); flex-shrink:0; }
.story__text { color:var(--mid); font-size:14px; line-height:1.8; }

/* ============================================================
   PROPOSAL — фото «мы женимся!»
   ============================================================ */
.proposal-wrap { background:var(--bord); }
.proposal { max-width:var(--max); margin:0 auto; padding:var(--gap) 24px; text-align:center; color:var(--cream); }
.proposal__photo {
  width:min(280px,80%); margin:0 auto 28px;
  background:var(--white); padding:8px 8px 32px;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  transform:rotate(-1.5deg);
}
.proposal__photo img { width:100%; aspect-ratio:2/3; object-fit:cover; }
.proposal__label {
  font-family:var(--f-script); font-size:clamp(22px,7vw,30px);
  color:var(--cream); margin-top:8px; display:block;
}
.proposal__text { font-size:15px; color:rgba(245,237,224,.8); line-height:1.8; }

/* ============================================================
   LOCATION
   ============================================================ */
.loc-inner { max-width:var(--max); margin:0 auto; }
.loc-title { font-family:var(--f-script); font-size:clamp(38px,11vw,58px); color:var(--cream); margin-bottom:28px; }
.loc-cards { display:flex; flex-direction:column; gap:20px; }
.loc-card {
  background:rgba(245,237,224,.1); border:1px solid rgba(245,237,224,.2);
  padding:24px 20px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
}
.loc-card__time {
  font-family:var(--f-display); font-size:clamp(30px,9vw,44px); font-weight:400;
  color:var(--cream); line-height:1; white-space:nowrap;
}
.loc-card__tag { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(245,237,224,.75); display:block; margin-bottom:4px; font-weight:400; }
.loc-card__name { font-family:var(--f-display); font-size:clamp(16px,4.5vw,20px); color:var(--cream); margin-bottom:4px; }
.loc-card__addr { font-size:12px; color:rgba(245,237,224,.6); line-height:1.6; margin-bottom:10px; }
.loc-card__note { font-size:11px; color:rgba(245,237,224,.4); font-style:italic; }

/* ============================================================
   TIMING — с иконками
   ============================================================ */
.timing-inner { max-width:var(--max); margin:0 auto; }
.timeline { list-style:none; position:relative; padding-left:20px; }
.timeline::before {
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:2px;
  background: repeating-linear-gradient(to bottom, var(--bord) 0, var(--bord) 6px, transparent 6px, transparent 12px);
  opacity:.3;
}
.timeline__item {
  display:grid; grid-template-columns:70px 28px 1fr; gap:0 14px;
  padding:20px 0; align-items:start;
  opacity:0; transform:translateY(18px); transition:opacity .5s, transform .5s;
}
.timeline__item.visible { opacity:1; transform:none; }
.timeline__time {
  font-family:var(--f-display); font-size:clamp(22px,6vw,28px); font-weight:400;
  color:var(--bord); line-height:1; text-align:right; padding-top:2px;
}
.timeline__icon { font-size:22px; text-align:center; padding-top:1px; }
.timeline__body strong { display:block; font-family:var(--f-display); font-size:clamp(15px,4vw,18px); font-weight:400; margin-bottom:2px; }
.timeline__body p { font-size:12px; color:var(--mid); }

/* ============================================================
   DRESSCODE
   ============================================================ */
.dresscode { text-align:center; }
.dresscode__rule {
  font-family:var(--f-script); font-size:clamp(18px,5vw,24px);
  color:var(--bord); margin-bottom:16px; line-height:1.4;
}
.dresscode__text { color:var(--mid); font-size:14px; margin-bottom:28px; line-height:1.7; }
.dresscode__no {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(139,26,42,.2); padding:12px 20px;
  margin-bottom:28px; font-size:13px; color:var(--mid);
}
.dresscode__swatches {
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:8px;
}
.swatch { display:flex; flex-direction:column; align-items:center; gap:6px; }
.swatch__dot {
  width:42px; height:42px; border-radius:50%; background:var(--c);
  box-shadow:0 2px 10px rgba(0,0,0,.12); border:2px solid rgba(255,255,255,.5);
}
.swatch__name { font-size:9px; color:var(--mid); letter-spacing:.05em; }

/* ============================================================
   GIFTS
   ============================================================ */
.gifts { text-align:center; }
.gifts__card {
  background:var(--white); border:1px solid rgba(139,26,42,.12);
  padding:28px 24px; margin-bottom:16px; text-align:left;
}
.gifts__primary {
  font-family:var(--f-script); font-size:clamp(20px,6vw,26px);
  color:var(--bord); margin-bottom:10px;
}
.gifts__text { font-size:14px; color:var(--mid); line-height:1.7; margin-bottom:18px; }
.gifts__note {
  background:rgba(139,26,42,.06); border-left:3px solid var(--bord);
  padding:12px 16px; font-size:13px; color:var(--mid); line-height:1.6;
}

/* ============================================================
   RSVP
   ============================================================ */
.rsvp-wrap { background:var(--white); max-width:none; }
.rsvp { max-width:var(--max); margin:0 auto; padding:var(--gap) 24px; }
.rsvp__title { font-family:var(--f-display); font-size:clamp(28px,8vw,40px); text-transform:uppercase; letter-spacing:.12em; color:var(--bord); text-align:center; margin-bottom:8px; }
.rsvp__sub { font-size:13px; color:var(--mid); text-align:center; margin-bottom:32px; line-height:1.6; }
.rsvp__form { display:flex; flex-direction:column; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--mid); }
.form-group input,
.form-group select,
.form-group textarea {
  background:var(--cream); border:1px solid rgba(139,26,42,.18);
  color:var(--dark); padding:12px 14px; font-family:var(--f-body);
  font-size:14px; font-weight:300; outline:none; transition:border-color .2s;
  -webkit-appearance:none; border-radius:0;
}
.form-group input::placeholder, .form-group textarea::placeholder { color:rgba(107,74,80,.35); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--bord); }
.form-group select { cursor:pointer; }
.form-group textarea { resize:vertical; min-height:70px; }
.radio-group, .check-group { display:flex; flex-direction:column; gap:8px; }
.radio-label, .check-label { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; }
.radio-label input, .check-label input { accent-color:var(--bord); width:15px; height:15px; flex-shrink:0; }
.rsvp__success {
  background:rgba(139,26,42,.08); border:1px solid var(--bord);
  padding:18px 20px; margin-bottom:20px;
  font-family:var(--f-script); font-size:22px; text-align:center; color:var(--bord);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--bord); padding:44px 24px; text-align:center; }
.footer__names { font-family:var(--f-script); font-size:clamp(32px,10vw,48px); color:var(--cream); margin-bottom:4px; }
.footer__date { font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgba(245,237,224,.4); margin-bottom:20px; }
.footer__hearts { display:flex; justify-content:center; gap:10px; margin-bottom:20px; }
.footer__hearts svg { width:22px; height:22px; fill:rgba(245,237,224,.35); }
.footer__top { display:inline-block; font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:rgba(245,237,224,.3); transition:color .2s; border-bottom:1px solid rgba(245,237,224,.15); padding-bottom:2px; }
.footer__top:hover { color:var(--cream); }

/* ============================================================
   BTN
   ============================================================ */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:13px 32px; font-family:var(--f-body); font-size:10px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; transition:all .25s; border:none; border-radius:0; }
.btn--primary { background:var(--bord); color:var(--cream); }
.btn--primary:hover { background:var(--bord-d); }
.btn--outline { background:transparent; border:1px solid currentColor; }
.btn--outline-light { color:var(--cream); }
.btn--outline-light:hover { background:rgba(245,237,224,.12); }
.btn--outline-dark { color:var(--bord); border-color:var(--bord); }
.btn--outline-dark:hover { background:var(--bord); color:var(--cream); }
.btn--full { width:100%; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:480px) {
  .nav { gap:10px; font-size:9px; }
  .loc-card { grid-template-columns:1fr; }
  .timeline__item { grid-template-columns:60px 24px 1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .hero__scroll { animation:none; }
  .reveal, .timeline__item { transition:none; opacity:1; transform:none; }
}

/* ============================================================
   STORY TIMELINE — таймлайн «от детства до предложения»
   ============================================================ */
.timeline-story { display: flex; flex-direction: column; gap: 28px; margin: 32px 0; }

.ts-chapter {
  text-align: center;
}
.ts-chapter__label {
  font-family: var(--f-script); font-size: clamp(22px, 6vw, 30px);
  color: var(--bord); margin-bottom: 6px;
}
.ts-chapter__sub {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mid); margin-bottom: 18px;
}

/* parallel duo: groom + bride side by side */
.ts-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-items: start;
}
.ts-col { display: flex; flex-direction: column; gap: 12px; }
.ts-col__tag {
  font-family: var(--f-script); font-size: 18px; color: var(--bord);
  text-align: center; margin-bottom: 4px;
}
.ts-photo {
  width: 100%; aspect-ratio: 3/4; overflow: hidden;
  background: var(--white); padding: 6px 6px 22px;
  box-shadow: 0 3px 12px rgba(0,0,0,.13);
}
.ts-photo img { width:100%; height:100%; object-fit: cover; object-position: top; }
.ts-photo--rot-l { transform: rotate(-2deg); }
.ts-photo--rot-r { transform: rotate(2deg); }
.ts-photo--sq { aspect-ratio: 1; }

/* combined "together" photos - single column */
.ts-together {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

/* full-width proposal photo */
.ts-proposal {
  width: min(320px, 88%); margin: 0 auto;
  background: var(--white); padding: 8px 8px 28px;
  box-shadow: 0 5px 22px rgba(0,0,0,.18);
  transform: rotate(-1.2deg);
}
.ts-proposal img { width:100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.ts-proposal__label {
  display: block; text-align: center; margin-top: 10px;
  font-family: var(--f-script); font-size: clamp(20px, 6vw, 26px); color: var(--bord);
}

/* hearts between chapters */
.ts-divider {
  display: flex; align-items: center; gap: 12px; max-width: 200px; margin: 0 auto;
}
.ts-divider::before, .ts-divider::after {
  content: ''; flex: 1; height: 1px;
  background: repeating-linear-gradient(to right, var(--bord) 0, var(--bord) 3px, transparent 3px, transparent 7px);
  opacity: .35;
}
.ts-divider svg { width: 14px; height: 14px; fill: var(--bord); opacity: .7; }

/* ============================================================
   DRESSCODE GALLERY — мини-галерея референсов
   ============================================================ */
.ref-gallery {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 20px;
}
.ref-slot {
  aspect-ratio: 3/4;
  border: 1.5px dashed rgba(139,26,42,.3);
  background: rgba(245,237,224,.5);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.ref-slot img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
}
.ref-slot__plus {
  font-size: 32px; color: rgba(139,26,42,.35); line-height: 1;
}
.ref-slot__hint {
  font-size: 10px; color: var(--mid); letter-spacing: .08em; text-align: center;
  padding: 0 8px;
}
.ref-slot--filled { border-style: solid; border-color: rgba(139,26,42,.15); padding: 0; }

@media (max-width: 480px) {
  .ts-duo, .ts-together { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ref-gallery { grid-template-columns: 1fr 1fr; }
}

/* RSVP error state */
.rsvp__error {
  background: rgba(200,40,40,.08); border: 1px solid rgba(200,40,40,.3);
  padding: 14px 18px; margin-bottom: 20px;
  font-size: 13px; color: #8B1A1A; text-align: center;
}
.btn[disabled] { opacity: .6; cursor: wait; }

/* ============================================================
   TIMELINE PHOTO GALLERY — хронология
   ============================================================ */
.photo-timeline { max-width: var(--max); margin: 0 auto; padding: var(--gap) 24px; }
.photo-timeline__chapter {
  margin-bottom: 48px;
}
.chapter-label {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.chapter-label::before,
.chapter-label::after { content:''; flex:1; height:1px; background:rgba(139,26,42,.18); }
.chapter-label span {
  font-family: var(--f-script); font-size: clamp(20px,6vw,26px);
  color: var(--bord); white-space: nowrap; flex-shrink: 0;
}

/* сетка фото */
.photo-grid {
  display: grid;
  gap: 10px;
}
.photo-grid--2 { grid-template-columns: 1fr 1fr; }
.photo-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.photo-grid--2plus1 { grid-template-columns: 1fr 1fr; }
.photo-grid--2plus1 .photo-item:last-child { grid-column: 1 / -1; }
.photo-grid--1 { grid-template-columns: 1fr; }

.photo-item {
  position: relative; overflow: hidden;
  background: var(--cream-d);
  cursor: pointer;
}
.photo-item--polar {
  background: var(--white);
  padding: 6px 6px 24px;
  box-shadow: 0 3px 14px rgba(0,0,0,.12);
}
.photo-item--polar:nth-child(odd)  { transform: rotate(-2deg); }
.photo-item--polar:nth-child(even) { transform: rotate(1.8deg); }
.photo-item img {
  width: 100%; display: block;
  aspect-ratio: 3/4; object-fit: cover; object-position: top;
}
.photo-item--wide img  { aspect-ratio: 4/3; }
.photo-item--sq img    { aspect-ratio: 1; }
.photo-item--tall img  { aspect-ratio: 2/3; }

.photo-item__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 22px 10px 6px;
  background: linear-gradient(transparent, rgba(26,10,14,.55));
  font-size: 11px; color: rgba(245,237,224,.85);
  text-align: center; letter-spacing: .04em;
}
.photo-item--polar .photo-item__caption {
  position: static; background: none;
  font-family: var(--f-script); font-size: 13px;
  color: var(--bord); padding: 4px 0 0;
}

/* lightbox */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.92);
  align-items: center; justify-content: center;
  padding: 20px;
}
.lightbox.open { display: flex; }
.lightbox__img {
  max-width: 100%; max-height: 90svh;
  object-fit: contain; display: block;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.lightbox__close {
  position: absolute; top: 16px; right: 20px;
  font-size: 32px; color: rgba(245,237,224,.6);
  cursor: pointer; line-height: 1; background: none; border: none;
  transition: color .2s;
}
.lightbox__close:hover { color: var(--cream); }
.lightbox__prev,
.lightbox__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 28px; color: rgba(245,237,224,.5);
  cursor: pointer; background: none; border: none; padding: 12px;
  transition: color .2s; line-height: 1;
}
.lightbox__prev { left: 8px; }
.lightbox__next { right: 8px; }
.lightbox__prev:hover,
.lightbox__next:hover { color: var(--cream); }
.lightbox__counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: rgba(245,237,224,.4); letter-spacing: .1em;
}

/* ============================================================
   DRESS GALLERY — минигалерея референсов
   ============================================================ */
.dress-gallery {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-top: 20px;
}
.dress-slot {
  position: relative; background: var(--cream-d);
  border: 1.5px dashed rgba(139,26,42,.25);
  aspect-ratio: 2/3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer;
  transition: border-color .2s;
}
.dress-slot:hover { border-color: var(--bord); }
.dress-slot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top;
}
.dress-slot__empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(139,26,42,.4); font-size: 12px; letter-spacing: .08em; text-align: center;
  padding: 16px;
}
.dress-slot__empty svg { width: 28px; height: 28px; fill: rgba(139,26,42,.25); }
.dress-slot__label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(26,10,14,.5));
  padding: 16px 8px 6px; font-size: 11px;
  color: rgba(245,237,224,.9); text-align: center;
}

/* ============================================================
   FORM STATES
   ============================================================ */
.rsvp__error {
  background: rgba(180,30,30,.1); border: 1px solid rgba(180,30,30,.3);
  padding: 14px 18px; margin-bottom: 16px;
  font-size: 13px; color: #8B1A2A;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ============================================================
   TYPOGRAPHY FIXES — все мелкие тексты крупнее и читаемее
   ============================================================ */

/* Текст под главами галереи */
.chapter-text {
  text-align: center;
  color: var(--mid);
  font-size: 15px;
  line-height: 1.75;
  max-width: 420px;
  margin: 0 auto;
}

/* Подписи поляроидов — крупнее, темнее */
.photo-item__caption {
  font-family: var(--f-script) !important;
  font-size: 14px !important;
  color: var(--bord) !important;
  text-align: center;
  padding: 6px 4px 2px !important;
  background: none !important;
  position: static !important;
}
.photo-item--polar .photo-item__caption {
  position: static !important;
  background: none !important;
  color: var(--bord) !important;
  font-size: 14px !important;
}

/* proposal__label — «мы женимся!» */
.proposal__label {
  display: block;
  text-align: center;
  font-family: var(--f-script);
  font-size: clamp(18px, 5vw, 24px);
  color: var(--bord) !important;
  padding: 8px 0 4px;
  background: none !important;
}

/* Заголовок главы (chapter-label) */
.chapter-label span {
  font-family: var(--f-script);
  font-size: clamp(22px, 6vw, 30px) !important;
  color: var(--bord);
}

/* Палитра дресскода — заголовок */
.palette-title {
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mid);
  text-align: center;
  margin-bottom: 14px;
}

/* Галерея платьев — заголовки */
.dress-refs { margin-top: 32px; }
.dress-refs__title {
  font-family: var(--f-script);
  font-size: clamp(22px, 6vw, 28px);
  color: var(--bord);
  text-align: center;
  margin-bottom: 6px;
}
.dress-refs__sub {
  font-size: 14px;
  color: var(--mid);
  text-align: center;
  margin-bottom: 18px;
}

/* Слоты платьев — текст заглушки */
.dress-slot__empty span {
  font-size: 13px !important;
  color: rgba(139,26,42,.55) !important;
  text-align: center;
}
.dress-slot__label {
  font-size: 13px !important;
  color: rgba(245,237,224,.95) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* Адрес и примечание локации */
.loc-card__addr { font-size: 14px !important; color: rgba(245,237,224,.8) !important; }
.loc-card__note { font-size: 13px !important; color: rgba(245,237,224,.6) !important; }

/* Кнопка «Карта» */
.btn--sm { padding: 10px 22px !important; font-size: 11px !important; margin-top: 12px; }

/* Тайминг — описание */
.timeline__body p { font-size: 14px !important; color: var(--mid); }

/* Footer */
.footer__bye { font-size: 14px; color: rgba(245,237,224,.55); margin-bottom: 16px; }

/* Счётчик таймера */
.countdown-title { font-size: 14px !important; letter-spacing: .15em; }
.countdown__name { font-size: 12px !important; }

/* Анкета — sub */
.rsvp__sub { font-size: 15px !important; }

/* Нижний текст календаря */
.calendar__dow { font-size: 11px !important; letter-spacing: .12em; }

/* ============================================================
   CUSTOM ICONS — нарезанные из спрайта
   ============================================================ */

/* Иконки в тайминге */
.timeline__icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  filter: sepia(1) saturate(1.2) hue-rotate(340deg) brightness(.85);
}

/* Иконки в заголовках глав истории */
.chapter-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  filter: sepia(1) saturate(1.2) hue-rotate(340deg) brightness(.8);
}

/* Иконка в подарках — крупная */
.gifts__icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 4px;
  filter: sepia(1) saturate(1.2) hue-rotate(340deg) brightness(.8);
}

/* Иконки в тексте подарков — мелкие */
.gifts__icon-sm {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  filter: sepia(1) saturate(1.2) hue-rotate(340deg) brightness(.8);
}

/* Иконка в дресскоде */
.dresscode__no-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  filter: sepia(1) saturate(1.2) hue-rotate(340deg) brightness(.8);
}

/* arch — декоративный элемент в footer */
.footer__arch {
  width: 60px;
  height: 60px;
  object-fit: contain;
  opacity: .35;
  margin: 0 auto 16px;
  display: block;
  filter: brightness(10);
}

/* ============================================================
   EMOJI → бордо через filter
   ============================================================ */
.timeline__icon {
  font-size: 22px;
  text-align: center;
  padding-top: 2px;
  filter: sepia(1) saturate(4) hue-rotate(300deg) brightness(.55);
}

.chapter-label span {
  font-family: var(--f-script);
  font-size: clamp(22px, 6vw, 30px);
  color: var(--bord);
}
/* эмодзи в chapter-label тоже в бордо */
.chapter-label span::first-letter {
  filter: sepia(1) saturate(4) hue-rotate(300deg) brightness(.55);
}

.gifts__primary {
  filter: none; /* текст не трогаем */
}
/* только эмодзи в gifts */
.gifts__primary-icon {
  filter: sepia(1) saturate(4) hue-rotate(300deg) brightness(.55);
  display: inline-block;
}

/* ============================================================
   HERO — редакционный коллаж с нарезкой фото
   ============================================================ */

/* Убираем старые стили hero__photo */
.hero__photo { display: none; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── СЕТКА ФОТО ── */
.hero__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
}

.hero__grid-item {
  overflow: hidden;
  position: relative;
}
.hero__grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(.3) contrast(1.05);
  transition: transform 8s ease;
}
/* Медленный кен-бёрнс */
.hero__grid-item:nth-child(odd)  img { transform-origin: center top;    animation: kb1 12s ease-in-out infinite alternate; }
.hero__grid-item:nth-child(even) img { transform-origin: center bottom; animation: kb2 14s ease-in-out infinite alternate; }
@keyframes kb1 { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes kb2 { from { transform: scale(1.05); } to { transform: scale(1); } }

/* разные пропорции ячеек для динамики */
.hero__grid-item--1 { grid-column: 1; grid-row: 1 / 3; }  /* левый — высокий */
.hero__grid-item--2 { grid-column: 2; grid-row: 1; }
.hero__grid-item--3 { grid-column: 2; grid-row: 2; }
.hero__grid-item--4 { display: none; } /* на мобайл скрыт */

/* на десктопе 4 ячейки */
@media (min-width: 640px) {
  .hero__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .hero__grid-item--1 { grid-column: 1; grid-row: 1 / 3; }
  .hero__grid-item--2 { grid-column: 2; grid-row: 1; }
  .hero__grid-item--3 { grid-column: 3; grid-row: 1; }
  .hero__grid-item--4 { display: block; grid-column: 2 / 4; grid-row: 2; }
}

/* ── ОВЕРЛЕЙ ── */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(26,10,14,.55) 0%, rgba(26,10,14,.25) 40%, rgba(26,10,14,.65) 100%);
  z-index: 1;
}

/* ── ГИГАНТСКИЕ БУКВЫ LOVE ── */
.hero__love {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  line-height: .85;
  pointer-events: none;
  user-select: none;
}
.hero__love span {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(100px, 32vw, 260px);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245,237,224,.18);
  display: block;
  /* чередуем: чётные буквы чуть правее */
}
.hero__love span:nth-child(even) {
  margin-left: clamp(20px, 6vw, 60px);
}
/* одна буква акцентная — бордо прозрачный */
.hero__love span:nth-child(2) {
  -webkit-text-stroke: 1.5px rgba(139,26,42,.45);
}

/* ── КОНТЕНТ ── */
.hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: var(--cream);
  padding: 80px 24px 60px;
  width: 100%;
}

.hero__eyebrow {
  font-family: var(--f-script);
  font-size: clamp(16px, 4vw, 22px);
  color: rgba(245,237,224,.7);
  margin-bottom: 16px;
  display: block;
}

.hero__names {
  font-family: var(--f-script);
  font-size: clamp(44px, 13vw, 88px);
  line-height: 1.05;
  margin-bottom: 12px;
  color: var(--cream);
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}

.hero__amp {
  color: rgba(245,237,224,.6);
  font-size: .75em;
}

.hero__date {
  font-size: 13px;
  letter-spacing: .3em;
  color: rgba(245,237,224,.5);
  margin-bottom: 32px;
}

/* ── HERO GRID: 2 фото ── */
.hero__grid {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr !important;
  gap: 3px;
}
.hero__grid-item--1 { grid-column: 1 !important; grid-row: 1 !important; }
.hero__grid-item--2 { grid-column: 2 !important; grid-row: 1 !important; display: block !important; }
.hero__grid-item--3,
.hero__grid-item--4 { display: none !important; }

/* ── Подложка под текст ── */
.hero__content {
  background: rgba(20, 8, 12, .52);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(245,237,224,.08);
  padding: 36px 40px 40px !important;
  width: auto !important;
  max-width: min(460px, 88vw);
  margin: 0 auto;
}

.hero__eyebrow {
  font-size: clamp(14px, 3.5vw, 18px) !important;
  color: rgba(245,237,224,.85) !important;
  margin-bottom: 10px !important;
}

.hero__names {
  font-size: clamp(40px, 11vw, 76px) !important;
  text-shadow: none !important;
  color: var(--cream) !important;
}

.hero__date {
  color: rgba(245,237,224,.7) !important;
  margin-bottom: 28px !important;
}

/* ── HERO GRID: 3 фото ── */
.hero__grid {
  grid-template-columns: 1.1fr 1fr 1fr !important;
  grid-template-rows: 1fr !important;
}
.hero__grid-item--1 { grid-column: 1 !important; grid-row: 1 !important; }
.hero__grid-item--2 { grid-column: 2 !important; grid-row: 1 !important; display: block !important; }
.hero__grid-item--3 { grid-column: 3 !important; grid-row: 1 !important; display: block !important; }
.hero__grid-item--4 { display: none !important; }

@media (max-width: 540px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
  }
  .hero__grid-item--1 { grid-column: 1 !important; grid-row: 1 / 3 !important; }
  .hero__grid-item--2 { grid-column: 2 !important; grid-row: 1 !important; }
  .hero__grid-item--3 { grid-column: 2 !important; grid-row: 2 !important; }
}

/* ============================================================
   PLAYFAIR DISPLAY + MONTSERRAT — финальная настройка
   ============================================================ */

/* Playfair имеет широкие собственные засечки — убираем лишний letter-spacing в заголовках */
.section__title,
.loc-title,
.hero__names,
.rsvp__title,
.story__title,
.footer__names {
  letter-spacing: 0.01em !important;
}

/* Курсивный Playfair для подзаголовков — красиво */
.hero__eyebrow,
.invite__date-big,
.dresscode__rule,
.proposal__label,
.gifts__primary,
.chapter-label span,
.dresscode__refs__title {
  font-style: italic;
}

/* Montserrat body — чуть плотнее */
body {
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* Montserrat лучше работает с чуть меньшим letter-spacing в кнопках */
.btn { letter-spacing: .15em !important; }

/* Nav — Montserrat 600 */
.nav { font-size: 11px; letter-spacing: .12em !important; }

/* Счётчик таймера — Playfair цифры красивые */
.countdown__num {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
}

/* Playfair italic для дат в календаре */
.cal-month { font-style: italic; }

/* ============================================================
   PERFORMANCE — ускорение отрисовки
   ============================================================ */

/* Секции ниже первого экрана — браузер не рендерит пока не нужны */
#story, #location, #timing, #dresscode, #gifts, #rsvp {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* Плавная загрузка изображений */
img {
  color: transparent; /* скрываем alt-текст пока грузится */
}
.photo-item img,
.photo-item--polar img {
  background: var(--ivory);
}

/* ============================================================
   FIX: чекбоксы и радиокнопки — вернуть нативную отрисовку
   ============================================================ */
.form-group input[type="checkbox"],
.form-group input[type="radio"],
.check-label input,
.radio-label input {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  accent-color: var(--bord);
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer;
  flex-shrink: 0;
}

/* ============================================================
   TYPOGRAPHY SYSTEM — только 4 варианта Playfair Display
   700        → главные заголовки
   400        → обычный serif-текст
   400 italic → акценты, цитаты, даты
   300 italic → лёгкие подписи, eyebrow
   ============================================================ */

/* — 700: главные заголовки — */
.hero__names,
.section__title,
.loc-title,
.rsvp__title,
.story__title,
.footer__names {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

/* — 400: обычный serif — */
.calendar__day,
.cal-year,
.loc-card__name,
.loc-card__time,
.timeline__body strong,
.timeline__time,
.gifts__primary,
.chapter-label span,
.countdown__num {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* — 400 italic: акценты, цитаты, даты — */
.invite__date-big,
.dresscode__rule,
.proposal__label,
.rsvp__success,
.footer__names em,
.cal-month,
.photo-item__caption,
.dress-refs__title {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

/* — 300 italic: лёгкие подписи — */
.hero__eyebrow,
.eyebrow,
.eyebrow--light,
.loc-card__note,
.invite__text em,
.rsvp__sub {
  font-family: var(--f-display) !important;
  font-weight: 300 !important;
  font-style: italic !important;
}

/* Убираем случайные font-weight: 600 у Playfair */
.hero__love span,
.section__bg-word {
  font-weight: 700 !important;
  font-style: normal !important;
}

/* ============================================================
   TYPOGRAPHY NORMALIZATION — убираем italic/normal конфликты
   Правило: элементы в одной строке/блоке — одинаковый стиль
   ============================================================ */

/* Календарь: «Июль» и «2026» в одной строке — оба 400 italic */
.cal-month,
.cal-year {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

/* Дни недели в календаре — Montserrat, без serif */
.calendar__dow {
  font-family: var(--f-body) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 11px !important;
  letter-spacing: .14em;
}

/* Локация: время + тег + название — все 400 normal */
.loc-card__time,
.loc-card__name {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
/* тег (ЗАГС · регистрация) — Montserrat uppercase, без serif */
.loc-card__tag {
  font-family: var(--f-body) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
/* адрес — Montserrat normal */
.loc-card__addr {
  font-family: var(--f-body) !important;
  font-style: normal !important;
}
/* примечание — Montserrat 300 italic */
.loc-card__note {
  font-family: var(--f-body) !important;
  font-weight: 300 !important;
  font-style: italic !important;
}

/* Тайминг: время + заголовок — оба 400 normal */
.timeline__time,
.timeline__body strong {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
/* описание тайминга — Montserrat */
.timeline__body p {
  font-family: var(--f-body) !important;
  font-style: normal !important;
}

/* Eyebrow-метки везде — Montserrat uppercase 400, без serif */
.eyebrow,
.eyebrow--light,
.loc-card__tag,
.countdown-title,
.palette-title,
.calendar__dow,
.footer__date,
.hero__date {
  font-family: var(--f-body) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* hero eyebrow — Playfair 300 italic (единственный акцент) */
.hero__eyebrow {
  font-family: var(--f-display) !important;
  font-weight: 300 !important;
  font-style: italic !important;
}

/* Countdown числа — Playfair 400 normal, подписи — Montserrat */
.countdown__num {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
.countdown__name {
  font-family: var(--f-body) !important;
  font-style: normal !important;
}

/* Главы истории: подписи поляроидов — Playfair 400 italic */
.photo-item__caption,
.photo-item--polar .photo-item__caption {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

/* chapter-label — Playfair 700 normal */
.chapter-label span {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  filter: none !important;
}

/* proposal label — Playfair 400 italic */
.proposal__label {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

/* chapter-text — Montserrat */
.chapter-text {
  font-family: var(--f-body) !important;
  font-style: normal !important;
}

/* Дресскод: цитата — Playfair 400 italic */
.dresscode__rule {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-style: italic !important;
}
/* текст дресскода — Montserrat */
.dresscode__text {
  font-family: var(--f-body) !important;
  font-style: normal !important;
}

/* Подарки: заголовок — Playfair 400 normal */
.gifts__primary {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Анкета: sub — Montserrat */
.rsvp__sub {
  font-family: var(--f-body) !important;
  font-style: normal !important;
}

/* Footer: имена — Playfair 700 italic (единственный акцент) */
.footer__names {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-style: italic !important;
}
/* дата footer — Montserrat */
.footer__date,
.footer__bye {
  font-family: var(--f-body) !important;
  font-style: normal !important;
}

/* swatch names — Montserrat */
.swatch__name,
.dress-slot__label,
.dress-slot__empty span {
  font-family: var(--f-body) !important;
  font-style: normal !important;
}

/* ============================================================
   STORY — BOMA коллаж «Тили-тили тесто»
   ============================================================ */
.story-boma {
  background: var(--cream);
}

.tili-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--gap) 24px 40px;
  text-align: center;
}

/* Заголовок */
.tili__title {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  font-size: clamp(38px, 12vw, 64px);
  line-height: 1.1;
  color: var(--bord);
  margin-bottom: 32px;
  letter-spacing: 0;
}

/* Коллаж */
.tili__collage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  margin-bottom: 0;
  padding-bottom: 28px;
}

/* Фото */
.tili__photo {
  position: relative;
  width: clamp(130px, 38vw, 180px);
  flex-shrink: 0;
}
.tili__photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  border: 4px solid var(--white);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  display: block;
}
.tili__photo--groom { z-index: 2; margin-right: -20px; }
.tili__photo--bride { z-index: 1; margin-left: -20px; }

/* Подписи жених/невеста */
.tili__photo-label {
  position: absolute;
  top: -28px;
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(16px, 5vw, 20px);
  color: var(--bord);
}
.tili__photo-label--groom { left: 0; transform: rotate(-8deg); }
.tili__photo-label--bride { right: 0; transform: rotate(6deg); }

/* Лента «мы женимся!» */
.tili__ribbon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bord);
  color: var(--cream);
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(15px, 4.5vw, 19px);
  padding: 7px 24px;
  white-space: nowrap;
  z-index: 3;
  letter-spacing: .03em;
}
/* Уголки ленты */
.tili__ribbon::before,
.tili__ribbon::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 14px;
  background: var(--bord-d);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%);
}
.tili__ribbon::before { right: 100%; }
.tili__ribbon::after  { left: 100%; clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }

/* Декоративные сердечки */
.tili__heart {
  position: absolute;
  pointer-events: none;
  fill: var(--bord);
}
.tili__heart--tl { top: 10px;  left: 10px;  opacity: .6; transform: rotate(-15deg); }
.tili__heart--tr { top: 4px;   right: 16px; opacity: .8; transform: rotate(10deg); }
.tili__heart--mid{ top: 40%;  left: 50%; transform: translateX(-50%) rotate(5deg); opacity: .5; }
.tili__heart--br { bottom: 36px; right: 8px; opacity: .6; transform: rotate(-8deg); }

/* Узнали? */
.tili__footer {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(139,26,42,.15);
}
.tili__uznali {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 8vw, 38px);
  color: var(--bord);
  margin-bottom: 10px;
}
.tili__text {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--mid);
  line-height: 1.7;
  max-width: 360px;
  margin: 0 auto;
}

/* ============================================================
   TILI GRID — 3+3 детских фото в двух колонках
   ============================================================ */

/* Убираем старые стили одиночных фото */
.tili__collage { display: none; }
.tili__heart   { display: none; }
.tili__photo--groom,
.tili__photo--bride { all: unset; }

/* Основная сетка */
.tili__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 12px;
  align-items: center;
  margin-bottom: 0;
  padding: 0 8px;
}

/* Подпись «жених» / «невеста» */
.tili__col-label {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 5vw, 22px);
  color: var(--bord);
  text-align: center;
  margin-bottom: 12px;
}

/* Стек фото в колонке */
.tili__photos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Одно фото */
.tili__photo {
  border-radius: 0;
  overflow: hidden;
  background: var(--white);
  padding: 5px 5px 18px;
  box-shadow: 0 3px 12px rgba(0,0,0,.12);
}
.tili__photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Наклоны поляроидов */
.tili__photo--rotate-l { transform: rotate(-2.5deg); }
.tili__photo--rotate-r { transform: rotate(2deg); }

/* Сердечки по центру */
.tili__hearts-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Лента — теперь отдельный блок под сеткой */
.tili__ribbon {
  display: block;
  margin: 20px auto 0;
  width: fit-content;
  position: relative; /* убираем absolute */
  left: auto;
  transform: none;
}

/* Мобайл: колонки уже */
@media (max-width: 480px) {
  .tili__grid { gap: 0 6px; }
  .tili__hearts-mid { gap: 6px; }
  .tili__hearts-mid svg { width: 18px; height: 18px; }
}

/* ============================================================
   HERO LOVE — фикс обрезки на мобайле
   ============================================================ */
@media (max-width: 640px) {
  .hero__love {
    left: 50% !important;
    transform: translateX(-50%);
    width: max-content;
    bottom: 0;
  }
  .hero__love span {
    font-size: clamp(72px, 26vw, 120px) !important;
  }
  .hero__love span:nth-child(even) {
    margin-left: clamp(12px, 4vw, 30px) !important;
  }
}

/* ============================================================
   HERO LOVE — горизонтально на мобайле
   ============================================================ */
@media (max-width: 640px) {
  /* Убираем вертикальное расположение */
  .hero__love {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: baseline !important;
    gap: 0 !important;
    padding: 0 12px 6px !important;
    line-height: 1 !important;
  }
  .hero__love span {
    font-size: clamp(52px, 22vw, 90px) !important;
    margin-left: 0 !important;
    line-height: 1 !important;
  }
  .hero__love span:nth-child(even) {
    margin-left: 0 !important;
  }

  /* Контент — поднимаем выше чтобы не перекрывало LOVE */
  .hero__content {
    padding-bottom: 90px !important;
  }
}

/* ── Галерея костюмов — 2 слота, шире ── */
.dress-gallery--suits {
  grid-template-columns: 1fr 1fr !important;
}
.dress-gallery--suits .dress-slot {
  aspect-ratio: 3/4 !important;
}

/* Фиксируем выравнивание кружков по центру независимо от длины подписи */
.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.swatch__name {
  text-align: center;
  word-break: break-word;
}