@font-face {
  font-family: "Znikomit";
  src: url("assets/fonts/Znikomit.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Floriselscript";
  src: url("assets/fonts/Floriselscript.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
  Макет собран в колонке 512 px. Все размеры ниже записаны в «пикселях макета»
  и переводятся в cqw через --u: 1 px макета = 0.1953125 cqw (100 / 512).
  За счёт этого композиция масштабируется целиком и переносы строк не «съезжают».
*/

:root {
  --olive: #566230;
  --olive-deep: #3e4722;
  --ivory: #f3f0ea;
  /* Запасной вариант для браузеров без container queries (старые iOS/Android). */
  --u: calc(100vw / 512);
  --lh: 1.7;
  /* Обводка текста: толщина в em, поэтому работает на любом кегле. */
  --ink: 0.050em;
}

/* Где поддержаны container queries — считаем от ширины колонки, а не окна. */
@supports (container-type: inline-size) {
  :root {
    --u: 0.1953125cqw;
  }
}

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

html {
  scroll-behavior: smooth;
  /* Отключаем автоподстройку кегля в iOS Safari — иначе текст «съезжает». */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--olive);
  background:
    radial-gradient(circle at 50% -8%, #fbf8f1, transparent 34rem),
    linear-gradient(180deg, #eee9de 0%, #e2dccf 100%);
  font-family: "Znikomit", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 4px;
}

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

.skip-link {
  position: fixed;
  z-index: 50;
  top: -52px;
  left: 14px;
  padding: 9px 14px;
  color: var(--ivory);
  background: var(--olive-deep);
  border-radius: 5px;
  font-size: 14px;
  text-decoration: none;
  transition: top 160ms ease;
}

.skip-link:focus-visible {
  top: 14px;
}

.site {
  position: relative;
  width: min(100%, 512px);
  margin: 0 auto;
  overflow: hidden;
  container-type: inline-size;
  color: var(--olive);
  background: #f7f4ed;
  font-size: calc(18 * var(--u));
  line-height: var(--lh);
  /* В макете трекинг 0.72px, но встроенный шрифт идёт шире, поэтому без
     трекинга переносы строк совпадают с макетом один в один. */
  letter-spacing: 0;
  text-wrap: pretty;
  box-shadow:
    0 1px 1px rgba(46, 50, 30, 0.05),
    0 6px 16px rgba(46, 50, 30, 0.06),
    0 22px 54px rgba(46, 50, 30, 0.09);
}

/* Десктоп: та же композиция целиком крупнее — колонка плавно растягивается
   до 640 px, всё внутри масштабируется вместе с ней (размеры завязаны на cqw).
   Отступов сверху/снизу нет: страница начинается с ленты, как в макете.
   Макет «парит» над фоном: тень в несколько слоёв + мягкое затемнение краёв. */
@media (min-width: 560px) {
  body {
    /* лёгкая виньетка по краям: макет читается как лист на подсвеченной поверхности */
    background:
      radial-gradient(circle at 50% 4%, #fdfbf6 0%, rgba(253, 251, 246, 0) 62rem),
      radial-gradient(ellipse at 50% 42%, #f2ede1 0%, #e3dccc 64%, #d5cebb 100%);
  }

  .site {
    width: min(calc(100% - 48px), 640px);
    border-radius: 2px;
    box-shadow:
      /* тонкая линия-подложка по контуру */
      0 0 0 1px rgba(42, 46, 28, 0.05),
      /* «контакт» с фоном */
      0 4px 10px rgba(42, 46, 28, 0.12),
      /* ближняя мягкая */
      0 20px 50px rgba(42, 46, 28, 0.18),
      /* ореол вокруг листа */
      0 0 70px rgba(42, 46, 28, 0.14),
      /* дальний мягкий ореол */
      0 0 180px rgba(42, 46, 28, 0.10);
  }
}

.panel,
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Скриптовые заголовки ---------- */

.hero {
  aspect-ratio: 512 / 838;
  background:
    linear-gradient(rgba(42, 48, 23, 0.1), rgba(42, 48, 23, 0.1)),
    url("assets/bg-envelope.png") center / cover no-repeat;
}

.hero::before {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  height: calc(39 * var(--u));
  content: "";
  /* Бесшовная лента в нативном разрешении: прижата к верхнему краю, торцов нет. */
  background: url("assets/lace-band.png") center bottom / 100% auto no-repeat;
}

.hero__pearls {
  position: absolute;
  z-index: 2;
  top: 0;
  left: calc(-5 * var(--u));
  width: calc(341 * var(--u));
  height: auto;
}

.hero__heart {
  position: absolute;
  z-index: 1;
  top: calc(322 * var(--u));
  left: calc(173 * var(--u));
  width: calc(165 * var(--u));
  height: auto;
}

.lace-divider {
  position: relative;
  z-index: 8;
  height: calc(78 * var(--u));
  margin-block: calc(-39 * var(--u));
  /* Бесшовная полоса от края до края: ни торцов, ни стыка блоков не видно.
     cover — без растяжения по высоте, поэтому кружево остаётся резким. */
  background: url("assets/lace-band.png") center / cover no-repeat;
  pointer-events: none;
}

/* ---------- Первая страница: приглашение, календарь, план дня ---------- */

.story {
  aspect-ratio: 512 / 1676;
  background: url("assets/bg-cream.png") center / cover no-repeat;
}

.story__intro {
  position: absolute;
  z-index: 2;
  top: calc(65 * var(--u));
  left: 50%;
  /* узкая колонка ~345 px макета: даёт такие же переносы, как в макете */
  width: calc(365 * var(--u));
  text-align: center;
  transform: translateX(-50%);
}

.story__lead {
  margin: 0;
  font-size: calc(18 * var(--u));
  line-height: var(--lh);
  -webkit-text-stroke: var(--ink) currentColor;
}

/* Первая строка с именами — отдельный бокс, чтобы управлять отбивкой от
   второй строки (иначе высокая скриптовая строка раздувает интерлиньяж).
   nowrap: длинные обращения («Дорогие Виктор и Татьяна,») не переносятся. */
.story__lead-name {
  display: inline-block;
  line-height: 1;
  margin-bottom: calc(-8 * var(--u));
  white-space: nowrap;
}

.story__names1,
.story__names2 {
  font-family: "Floriselscript", "Segoe Script", cursive;
  font-size: calc(38 * var(--u));
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-text-stroke: 0px;
}

/* «и» между именами: обычный кегль + небольшие отступы, чтобы не липло к именам */
.story__and {
  padding-inline: calc(5 * var(--u));
  font-size: calc(18 * var(--u));
  white-space: nowrap;
}

.story__text {
  width: 100%;
  margin: calc(18 * var(--u)) auto 0;
  font-size: calc(18 * var(--u));
  line-height: var(--lh);
  -webkit-text-stroke: var(--ink) currentColor;
}

.story__text--narrow {
  width: 100%;
}

/* Календарь */

/* Крупный мотив с голубями вместо прежней рамки-венка. */
.story__doves {
  position: absolute;
  z-index: 2;
  top: calc(446 * var(--u));
  left: calc(22 * var(--u));
  width: calc(182 * var(--u));
  height: auto;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.calendar {
  position: absolute;
  z-index: 1;
  top: calc(470 * var(--u));
  left: calc(-43 * var(--u));
  width: calc(590 * var(--u));
  height: calc(752 * var(--u));
}

.calendar__month {
  position: absolute;
  top: calc(111 * var(--u));
  left: calc(205 * var(--u));
  width: calc(180 * var(--u));
  margin: 0;
  font-family: "Floriselscript", "Segoe Script", cursive;
  font-size: calc(72 * var(--u));
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.calendar__dates {
  position: absolute;
  top: calc(158 * var(--u));
  left: calc(77 * var(--u));
  width: calc(456 * var(--u));
  height: calc(219 * var(--u));
  object-fit: fill;
}

/* План дня */

.story__rail {
  position: absolute;
  z-index: 2;
  top: calc(898.84 * var(--u));
  left: calc(204.15 * var(--u));
  width: calc(52.72 * var(--u));
  height: calc(480.2 * var(--u));
}

.story__rail::before {
  position: absolute;
  top: calc(18 * var(--u));
  bottom: calc(36 * var(--u));
  left: 50%;
  width: calc(1.4 * var(--u));
  content: "";
  background: currentColor;
  opacity: 0.8;
  transform: translateX(-50%);
}

.story__bow {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
}

.story__bow:nth-child(1) {
  top: 0;
}

.story__bow:nth-child(2) {
  top: calc(142.3 * var(--u));
}

.story__bow:nth-child(3) {
  top: calc(285 * var(--u));
}

.story__bow:nth-child(4) {
  top: calc(427.5 * var(--u));
}

.timeline {
  position: absolute;
  z-index: 3;
  top: calc(872 * var(--u));
  left: calc(93 * var(--u));
  width: calc(370 * var(--u));
  height: calc(516 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__item {
  position: absolute;
  inset: 0;
}

.timeline__icon {
  position: absolute;
  left: var(--icon-x);
  top: var(--icon-y);
  width: var(--icon-w);
  height: var(--icon-h);
  mix-blend-mode: multiply;
}

.timeline__copy {
  position: absolute;
  left: calc(175 * var(--u));
  top: var(--copy-y);
  width: calc(195 * var(--u));
}

.timeline__copy time {
  position: absolute;
  top: calc(-14 * var(--u));
  left: calc(68 * var(--u));
  font-size: calc(19 * var(--u));
  line-height: var(--lh);
  white-space: nowrap;
  -webkit-text-stroke: var(--ink) currentColor;
}

.timeline__copy h2 {
  margin: 0;
  font-family: "Floriselscript", "Segoe Script", cursive;
  font-size: calc(40 * var(--u));
  font-weight: 400;
  line-height: var(--lh);
  letter-spacing: 0;
}

.timeline__copy p {
  position: absolute;
  top: var(--desc-y);
  left: 0;
  filter: brightness(100%);
  width: calc(196 * var(--u));
  margin: 0;
  color: #4c5727;
  /* на узких экранах не мельче 10.5px */
  font-size: max(10.5px, calc(12.6 * var(--u)));
  line-height: 1.5;
  -webkit-text-stroke: var(--ink) currentColor;
}

.timeline__item--drinks {
  --icon-x: 0;
  --icon-y: 0;
  --icon-w: calc(101 * var(--u));
  --icon-h: calc(98 * var(--u));
  --copy-y: calc(23 * var(--u));
  --desc-y: calc(61 * var(--u));
}

.timeline__item--rings {
  --icon-x: calc(4.85 * var(--u));
  --icon-y: calc(151.45 * var(--u));
  --icon-w: calc(101.18 * var(--u));
  --icon-h: calc(67.45 * var(--u));
  --copy-y: calc(157 * var(--u));
  --desc-y: calc(58 * var(--u));
}

.timeline__item--table {
  --icon-x: calc(6.76 * var(--u));
  --icon-y: calc(300.27 * var(--u));
  --icon-w: calc(101.18 * var(--u));
  --icon-h: calc(67.45 * var(--u));
  --copy-y: calc(302 * var(--u));
  --desc-y: calc(48 * var(--u));
}

.timeline__item--moon {
  --icon-x: calc(17.5 * var(--u));
  --icon-y: calc(432.02 * var(--u));
  --icon-w: calc(76.06 * var(--u));
  --icon-h: calc(79.98 * var(--u));
  --copy-y: calc(437 * var(--u));
  --desc-y: calc(44 * var(--u));
}

.story__candles {
  position: absolute;
  z-index: 2;
  top: calc(1401 * var(--u));
  left: calc(376 * var(--u));
  width: calc(131.5 * var(--u));
  height: auto;
  mix-blend-mode: multiply;
}

/* ---------- Вторая страница: домик ---------- */

.house {
  aspect-ratio: 512 / 935;
  background:
    linear-gradient(rgba(54, 64, 30, 0.12), rgba(38, 45, 21, 0.16)),
    url("assets/bg-green.png") center / cover no-repeat;
}

.house__frame {
  position: absolute;
  z-index: 2;
  top: calc(76 * var(--u));
  left: calc(105 * var(--u));
  width: calc(301 * var(--u));
  height: calc(314 * var(--u));
  margin: 0;
}

.house__frame-image {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.house__photos {
  position: absolute;
  z-index: 1;
  top: calc(62 * var(--u));
  left: calc(52 * var(--u));
  width: calc(199 * var(--u));
  height: calc(199 * var(--u));
  overflow: hidden;
  background: #d8d3c8;
}

.house__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.015);
  transition:
    opacity 1.1s ease,
    transform 5.8s linear;
}

.house__photo.is-active {
  opacity: 1;
  transform: scale(1);
}

.house__pearls {
  position: absolute;
  z-index: 3;
  top: calc(-57 * var(--u));
  left: calc(164 * var(--u));
  width: calc(233 * var(--u));
  height: auto;
  pointer-events: none;
}

.house__address {
  position: absolute;
  z-index: 3;
  top: calc(400 * var(--u));
  left: 50%;
  width: calc(492 * var(--u));
  color: var(--ivory);
  font-size: calc(18 * var(--u));
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.32);
  white-space: nowrap;
  transform: translateX(-50%);
  -webkit-text-stroke: var(--ink) currentColor;
}

.house__address:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.house-card {
  position: absolute;
  z-index: 2;
  top: calc(442 * var(--u));
  left: calc(43 * var(--u));
  width: calc(426 * var(--u));
  height: calc(426 * var(--u));
}

.house-card__frame,
.checklist__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.house-card__content {
  position: absolute;
  inset: 0;
  /* текст идёт потоком: абзацы стоят вплотную, как строки одного блока */
  padding: calc(118 * var(--u)) 0 0 calc(69 * var(--u));
  color: var(--olive);
  text-align: center;
}

.house-card__content h2 {
  position: absolute;
  top: calc(62 * var(--u));
  left: -25px;
  width: 100%;
  margin: 0;
  font-family: "Floriselscript", "Segoe Script", cursive;
  font-size: calc(38 * var(--u));
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
}

.house-card__content p {
  width: calc(288 * var(--u));
  margin: 0;
  color: #4f5a2a;
  font-size: calc(15.64 * var(--u));
  line-height: 1.55;
  /* как в макете: по ширине с центрированием последней строки */
  text-align: justify;
  /* обычный (жадный) перенос: text-wrap: pretty «балансирует» строки и ломает макетный ритм */
  text-wrap: wrap;
  -webkit-text-stroke: var(--ink) currentColor;
}

/* перед последним абзацем — отбивка в одну лишнюю строку, как в макете */
.house-card__content p:nth-of-type(4) {
  margin-top: calc(14 * var(--u));
}

/* ---------- Третья страница: дресс-код ---------- */

.dress {
  aspect-ratio: 512 / 910;
  background: url("assets/bg-cream.png") center / cover no-repeat;
}

.dress__heading {
  position: absolute;
  z-index: 2;
  top: calc(61 * var(--u));
  left: 0;
  width: 100%;
  height: calc(77 * var(--u));
}

.dress__heading h2 {
  margin: 0;
  font-family: "Floriselscript", "Segoe Script", cursive;
  font-size: calc(48 * var(--u));
  font-weight: 400;
  line-height: calc(77 * var(--u));
  letter-spacing: 0;
  text-align: center;
}

.dress__icon {
  position: absolute;
  width: auto;
  mix-blend-mode: multiply;
}

.dress__icon--woman {
  top: calc(7 * var(--u));
  left: calc(117 * var(--u));
  height: calc(64.6 * var(--u));
}

.dress__icon--man {
  top: calc(9.8 * var(--u));
  left: calc(331.9 * var(--u));
  height: calc(61.9 * var(--u));
}

.dress__copy {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.dress__copy p {
  position: absolute;
  left: 50%;
  margin: 0;
  font-size: calc(18 * var(--u));
  line-height: 1.5;
  text-align: center;
  transform: translateX(-50%);
  -webkit-text-stroke: var(--ink) currentColor;
}

.dress__p1{
  top: calc(143 * var(--u));
  width: calc(445 * var(--u));
}

.dress__p2 {
  top: calc(238 * var(--u));
  width: calc(445 * var(--u));
}

.dress__p3 {
  top: calc(370 * var(--u));
  width: calc(396 * var(--u));
}

.palette {
  position: absolute;
  z-index: 2;
  top: calc(455 * var(--u));
  left: calc(136 * var(--u));
  display: flex;
  width: calc(239.76 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.palette li {
  width: calc(54.96 * var(--u));
  height: calc(54.96 * var(--u));
  margin-left: calc(-18 * var(--u));
  overflow: hidden;
  background: #efece2;
  border-radius: 50%;
  /* мягкая тень под каждым кружком: ближняя + рассеянная */
  box-shadow:
    0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(46, 50, 28, 0.26),
    0 calc(7 * var(--u)) calc(14 * var(--u)) rgba(46, 50, 28, 0.22);
}

.palette li:first-child {
  margin-left: 0;
}

.palette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checklist {
  position: absolute;
  z-index: 2;
  top: calc(542 * var(--u));
  left: calc(36 * var(--u));
  width: calc(440 * var(--u));
  height: calc(314 * var(--u));
}

.checklist__content {
  position: absolute;
  inset: 0;
  color: var(--ivory);
}

.checklist__content h3 {
  position: absolute;
  top: calc(65 * var(--u));
  left: 0;
  width: 100%;
  margin: 0;
  font-family: "Floriselscript", "Segoe Script", cursive;
  font-size: calc(40 * var(--u));
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
}

.checklist__content ul {
  position: absolute;
  top: calc(113 * var(--u));
  left: calc(43 * var(--u));
  width: calc(370 * var(--u));
  margin: 0;
  padding-left: calc(15 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: 1.5;
  -webkit-text-stroke: var(--ink) currentColor;
}

.checklist__content li + li {
  margin-top: calc(1 * var(--u));
}

.checklist__note {
  position: absolute;
  top: calc(235 * var(--u));
  left: calc(43 * var(--u));
  width: calc(360 * var(--u));
  margin: 0;
  color: #f7f4ec;
  font-size: max(9.5px, calc(8.8 * var(--u)));
  line-height: 1.45;
  -webkit-text-stroke: var(--ink) currentColor;
}

/* ---------- Четвёртая страница: важные детали ---------- */

.details {
  aspect-ratio: 512 / 767;
  background: url("assets/bg-floral.png") center / cover no-repeat;
}

/* Лента внизу страницы — зеркально верхней: обрезана нижним краем полотна. */
.details::after {
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  height: calc(39 * var(--u));
  content: "";
  background: url("assets/lace-band.png") center top / 100% auto no-repeat;
  pointer-events: none;
}

.details-card {
  position: absolute;
  top: calc(66 * var(--u));
  left: calc(81 * var(--u));
  width: calc(350 * var(--u));
  height: calc(636 * var(--u));
  margin: 0;
  overflow: hidden;
}

/* В макете картинка рамки вынесена за пределы карточки и обрезана — повторяем это. */
.details-card__frame {
  position: absolute;
  inset: -21.09% auto auto -21.58%;
  width: 144.78%;
  height: 141.68%;
  max-width: none;
  object-fit: fill;
}

.details-card__content {
  position: absolute;
  inset: 0;
  color: var(--olive);
  text-align: center;
}

.details-card__content h2 {
  position: absolute;
  top: calc(102 * var(--u));
  left: 0;
  width: 100%;
  margin: 0;
  font-family: "Floriselscript", "Segoe Script", cursive;
  font-size: calc(32 * var(--u));
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
}

.details-card__content p {
  position: absolute;
  left: calc(53 * var(--u));
  margin: 0;
  font-size: calc(16 * var(--u));
  line-height: 1.35;
  text-align: center;
  -webkit-text-stroke: var(--ink) currentColor;
}

.details-card__content .details__p1 {
  top: calc(149 * var(--u));
  width: calc(243 * var(--u));
}

.details-card__content .details__p2 {
  top: calc(206 * var(--u));
  width: calc(255 * var(--u));
}

.details-card__content .details__p3 {
  top: calc(285 * var(--u));
  width: calc(255 * var(--u));
}

.details-card__content .details-card__closing {
  top: calc(470 * var(--u));
  left: calc(30 * var(--u));
  width: calc(290 * var(--u));
  font-family: "Floriselscript", "Segoe Script", cursive;
  font-size: calc(32 * var(--u));
  line-height: 1.25;
  letter-spacing: 0;
  -webkit-text-stroke: 0px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}