/* =========================================================
   Свадебное приглашение · Максим и Виктория · 26.09.2026
   Палитра и типографика описаны один раз в :root —
   чтобы поменять цвета всего сайта, достаточно править их здесь.
   ========================================================= */

:root {
  /* --- Цвета --- */
  --cream:      #FBF8F3;  /* фон страницы */
  --beige:      #E8DCC8;  /* фон блоков-секций */
  --beige-soft: #F2EADD;  /* карточки поверх бежевого */
  --sand:       #D3C0A5;  /* линии, рамки, сетка календаря */
  --sage:       #8E9C82;  /* второй акцент: иконки, метка на карте */
  --terracotta: #C08A72;  /* главный акцент: день свадьбы, цифры отсчёта */
  --ink:        #4A4038;  /* основной текст */
  --muted:      #8A7E71;  /* подписи, дни недели */

  /* --- Шрифты --- */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body:    "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* --- Ритм --- */
  --wrap: 62rem;
  --section-y: clamp(4.5rem, 10vw, 8.5rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(.95rem, .35vw + .85rem, 1.05rem);
  line-height: 1.75;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 300; margin: 0; }
p { margin: 0; }
img, svg { max-width: 100%; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Общие блоки ---------- */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
  text-align: center;
}

/* Деликатный бежевый фон с растворением в кремовый по краям —
   так соседняя секция не обрывается жёсткой границей цвета */
.section--beige {
  background: linear-gradient(180deg,
    var(--cream) 0%,
    #F6F0E3 16%,
    #F2E9D9 50%,
    #F6F0E3 84%,
    var(--cream) 100%);
}

.section__eyebrow,
.hero__eyebrow {
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}

.section__title {
  font-size: clamp(2.1rem, 5.5vw, 3.1rem);
  letter-spacing: .04em;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.section__hint {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 3rem;
}

.ornament {
  color: var(--sand);
  width: min(240px, 62%);
  margin: 2rem auto;
}
.ornament--sm { width: 180px; margin: 0 auto 1.5rem; }

/* ---------- Навигация ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.nav.is-visible {
  transform: translateY(0);
  opacity: 1;
  border-bottom-color: var(--sand);
}
.nav__inner {
  display: flex;
  justify-content: center;
  gap: clamp(1.4rem, 5vw, 3rem);
  padding: .95rem 1rem;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}
.nav a:hover, .nav a:focus-visible { color: var(--terracotta); }

/* =========================================================
   1. ПЕРВЫЙ ЭКРАН
   ========================================================= */
.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  /* Вертикальные отступы завязаны на высоту экрана, чтобы первый
     экран целиком помещался и на ноутбуке, и на телефоне */
  padding: clamp(1.5rem, 4vh, 4rem) 1.25rem;
  text-align: center;
  position: relative;
  background:
    /* лёгкая дымка по краям — держит текст читаемым, само фото остаётся видимым */
    radial-gradient(ellipse 80% 70% at 50% 45%, rgb(251 248 243 / .06) 0%, rgb(251 248 243 / .28) 60%, rgb(251 248 243 / .55) 100%),
    url("../assets/img/wedimg.jpg") center 42% / cover no-repeat,
    linear-gradient(170deg, var(--cream) 0%, #F5EFE5 100%);
}

/* Тонкая рамка-паспарту вокруг содержимого */
.hero__frame {
  position: relative;
  width: min(100%, 46rem);
  padding: clamp(1.75rem, 5vh, 4rem) clamp(1.25rem, 5vw, 3rem);
  background: rgb(251 248 243 / .72);
  backdrop-filter: blur(4px);
}
.hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--sand);
  opacity: .55;
  pointer-events: none;
}

.hero__eyebrow { margin-bottom: clamp(.9rem, 2.5vh, 1.75rem); }

.hero__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .06em;
  /* min(ширина, высота) — имена не «вылезают» за экран ни в одном направлении */
  font-size: clamp(2.6rem, min(11vw, 10vh), 5.5rem);
  line-height: 1;
  letter-spacing: .03em;
}
.hero__amp {
  font-style: italic;
  font-size: .42em;
  color: var(--sage);
  line-height: 1;
}

.hero__date {
  margin-top: clamp(1rem, 2.5vh, 1.75rem);
  font-size: .82rem;
  letter-spacing: .5em;
  text-indent: .5em;   /* компенсирует хвостовой трекинг */
  color: var(--muted);
  text-transform: uppercase;
}
.hero__date i { color: var(--terracotta); font-style: normal; }

.hero .ornament { margin-block: clamp(1rem, 3vh, 2rem); }

.hero__lead {
  max-width: 34rem;
  margin-inline: auto;
  color: var(--ink);
  opacity: .85;
}

.scroll-hint {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.5rem, 1.5vh, .8rem);
  margin-top: clamp(1.5rem, 4vh, 3.5rem);
  color: var(--muted);
  text-decoration: none;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}
.scroll-hint:hover, .scroll-hint:focus-visible { color: var(--terracotta); }
.scroll-hint i {
  width: 1px;
  height: clamp(1.75rem, 4.5vh, 3rem);
  background: linear-gradient(var(--sand), transparent);
  animation: drift 2.6s var(--ease) infinite;
}
@keyframes drift {
  0%, 100% { transform: scaleY(.55); transform-origin: top; opacity: .5; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* =========================================================
   2. КАЛЕНДАРЬ И ОТСЧЁТ
   ========================================================= */
.calendar {
  width: min(100%, 26rem);
  margin: 2.5rem auto 0;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: #FBF8F2;
  border: 1px solid color-mix(in srgb, var(--sand) 55%, transparent);
  box-shadow: 0 1.5rem 3rem -1.75rem rgb(74 64 56 / .25);
}

.calendar__month {
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.35rem;
  /* Cormorant по умолчанию рисует «старостильные» цифры с хвостами —
     для дат и чисел включаем обычные, ровные по высоте */
  font-variant-numeric: lining-nums;
}

.calendar__grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.calendar__grid th {
  font-weight: 400;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: .9rem;
}
.calendar__grid td {
  font-size: .95rem;
  text-align: center;
  padding: .42rem 0;
  color: var(--ink);
}
.calendar__grid td.is-out { color: color-mix(in srgb, var(--sand) 65%, transparent); }

/* Отмеченный день свадьбы */
.is-wedding { position: relative; }
.is-wedding__mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  font-weight: 400;
}
/* Тихое дыхание кольца вокруг даты — привлекает взгляд, не мельтеша */
.is-wedding__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--terracotta);
  animation: pulse-ring 2.8s var(--ease) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.is-wedding__heart {
  position: absolute;
  top: -.5rem; right: -.45rem;
  width: 1.05rem; height: 1.05rem;
  fill: var(--sage);
}

/* --- Отсчёт --- */
.countdown { margin-top: clamp(3rem, 7vw, 4.5rem); }

.countdown__label {
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
}

.countdown__row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 5vw, 2.75rem);
}
.countdown__cell {
  min-width: 4.5rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.countdown__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  line-height: 1;
  color: var(--terracotta);
  font-variant-numeric: lining-nums tabular-nums;
}
.countdown__unit {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.countdown__done {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.8rem);
  color: var(--terracotta);
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-block;
  margin-top: 2.5rem;
  padding: .95rem 2.1rem;
  border: 1px solid var(--sand);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover, .btn:focus-visible {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--terracotta);
  border-color: var(--terracotta);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
/* отступ задаёт сам ряд — иначе при переносе на телефоне
   между кнопками появляется двойной зазор */
.btn-row .btn { margin-top: 0; }

/* =========================================================
   3. МЕСТО
   ========================================================= */
.venue__address {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: .06em;
  color: var(--muted);
}
.venue__note {
  max-width: 36rem;
  margin: 1.25rem auto 0;
  color: var(--ink);
  opacity: .8;
  font-size: .92rem;
}

.map-frame {
  margin-top: 2.75rem;
  padding: .6rem;
  background: var(--beige);
  border: 1px solid var(--sand);
}
#map {
  height: clamp(18rem, 46vh, 27rem);
  background: var(--beige-soft);
}
.map-frame__fallback {
  padding: 4rem 1rem;
  color: var(--muted);
  font-size: .9rem;
}

/* Подложка меток и подсказок Leaflet под палитру сайта */
.leaflet-container { font-family: var(--font-body); }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--cream);
  color: var(--ink);
  border-radius: 0;
  box-shadow: 0 6px 24px rgb(74 64 56 / .16);
}
.leaflet-popup-content {
  margin: .85rem 1.1rem;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.leaflet-control-zoom a {
  color: var(--ink);
  background: var(--cream);
  border-color: var(--sand);
}

/* Метка на карте */
.pin {
  width: 2rem;
  height: 2rem;
  border-radius: 50% 50% 50% 0;
  background: var(--sage);
  transform: rotate(-45deg);
  border: 2px solid var(--cream);
  box-shadow: 0 4px 12px rgb(74 64 56 / .3);
}
.pin::after {
  content: "";
  position: absolute;
  inset: .55rem;
  border-radius: 50%;
  background: var(--cream);
}

/* =========================================================
   4. ПРОГРАММА ДНЯ
   ========================================================= */
.tl {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(100%, 40rem);
  text-align: left;
  position: relative;
}
/* Вертикальная линия таймлайна — «прорастает» сверху вниз при появлении секции */
.tl::before {
  content: "";
  position: absolute;
  top: .6rem;
  bottom: .6rem;
  left: 6.5rem;
  width: 1px;
  /* к низу линия растворяется — иначе «хвост» после последнего пункта
     выглядит незаконченным */
  background: linear-gradient(var(--sand) 82%, transparent);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.6s var(--ease);
}
.tl.is-in::before { transform: scaleY(1); }

.tl__item {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0 2rem;
  padding-bottom: 2.75rem;
  position: relative;
}
.tl__item:last-child { padding-bottom: 0; }

/* Точка на линии */
.tl__item::before {
  content: "";
  position: absolute;
  left: 6.5rem;
  top: .55rem;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 5px #F2E9D9;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.tl__item:hover::before {
  transform: scale(1.35);
  box-shadow: 0 0 0 5px #F2E9D9, 0 0 0 9px rgb(142 156 130 / .18);
}

.tl__time {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--terracotta);
  text-align: right;
  /* отступ от вертикальной линии таймлайна */
  padding-right: 1.15rem;
  font-variant-numeric: lining-nums tabular-nums;
}
/* «Воздушный» пункт между церемонией и завершением вечера:
   полая точка, приглушённое время и одна строка курсивом */
.tl__item--soft { padding-block: .75rem 3.25rem; }
.tl__item--soft::before {
  background: #F6F0E3;
  border: 1px solid var(--sage);
}
.tl__item--soft .tl__time {
  color: var(--sand);
  font-size: 1.15rem;
  letter-spacing: .12em;
}
.tl__soft {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--muted);
}

.tl__title {
  font-size: 1.3rem;
  letter-spacing: .03em;
  margin-bottom: .3rem;
}
.tl__text {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.6;
}

/* =========================================================
   5. ДЕТАЛИ И ПОЖЕЛАНИЯ
   ========================================================= */
.notes {
  list-style: none;
  margin: 2.5rem auto 0;
  padding: 0;
  width: min(100%, 58rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.note {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* карточки одной высоты — содержимое центрируем, чтобы короткие
     не выглядели «пустыми» снизу */
  justify-content: center;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
  background: #FBF8F2;
  border: 1px solid color-mix(in srgb, var(--sand) 55%, transparent);
  box-shadow: 0 1.5rem 3rem -1.75rem rgb(74 64 56 / .25);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.note:hover {
  transform: translateY(-5px);
  box-shadow: 0 1.9rem 3.5rem -1.7rem rgb(74 64 56 / .32);
}

.note__icon {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: 1.1rem;
  color: var(--sage);
}
.note__icon svg { width: 100%; height: 100%; display: block; }

.note__title {
  font-size: 1.3rem;
  letter-spacing: .03em;
  margin-bottom: .6rem;
}
.note__text {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--muted);
}
/* Приписка мелким шрифтом — отделена тонкой линией */
.note__fine {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid color-mix(in srgb, var(--sand) 45%, transparent);
  font-size: .76rem;
  font-style: italic;
  line-height: 1.6;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

/* Каскад появления карточек */
.note.is-in:nth-child(2) { transition-delay: .1s; }
.note.is-in:nth-child(3) { transition-delay: .2s; }

/* ---------- Подвал ---------- */
.footer {
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
  text-align: center;
  background: var(--cream);
}
.footer__names {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  letter-spacing: .06em;
}
.footer__date {
  margin-top: .6rem;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================
   Появление при прокрутке
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Лёгкая каскадность внутри таймлайна */
.tl__item.is-in:nth-child(2) { transition-delay: .08s; }
.tl__item.is-in:nth-child(3) { transition-delay: .16s; }
.tl__item.is-in:nth-child(4) { transition-delay: .24s; }
.tl__item.is-in:nth-child(5) { transition-delay: .32s; }
.tl__item.is-in:nth-child(6) { transition-delay: .40s; }

/* =========================================================
   Планшеты и узкие экраны
   ========================================================= */
@media (max-width: 52rem) {
  /* карточки в один столбец — в три они становятся слишком узкими */
  .notes {
    grid-template-columns: 1fr;
    width: min(100%, 30rem);
  }
}

/* =========================================================
   Телефоны
   ========================================================= */
@media (max-width: 34rem) {
  /* четыре пункта меню должны помещаться в одну строку */
  .nav__inner { gap: 1.1rem; }
  .nav a { font-size: .66rem; letter-spacing: .16em; }

  .tl::before { left: 4.6rem; }
  .tl__item {
    grid-template-columns: 4.6rem 1fr;
    gap: 0 1.35rem;
  }
  .tl__item::before { left: 4.6rem; }
  .tl__time { font-size: 1.2rem; }
  .tl__title { font-size: 1.15rem; }

  .countdown__row { gap: 1.1rem 1.4rem; }
  .countdown__cell { min-width: 3.9rem; }

  .calendar { padding: 1.35rem 1rem; }
  .calendar__grid td { font-size: .88rem; }
  .is-wedding__mark { width: 2.1rem; height: 2.1rem; }

  .btn { width: 100%; text-align: center; }
}

/* =========================================================
   Уважение к системной настройке «меньше движения»
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Печать (кто-то захочет распечатать) ---------- */
@media print {
  .nav, .scroll-hint, .btn, .btn-row, .map-frame { display: none !important; }
  body { background: #fff; }
  .section--beige { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}