/* =========================================================
   Евгений и Наталья — 30.10.2026
   Alcohol ink + золотая фольга + каллиграфия
   ========================================================= */

/* ---------------------------------------------------------
   КАЛЛИГРАФИЯ
   Положите файл шрифта в  fonts/nicoletta-script.woff2
   (или .ttf) — он подхватится сам. Пока файла нет,
   подставляется Cormorant Garamond Italic с кириллицей.
   --------------------------------------------------------- */
@font-face{
  font-family:"Nicoletta Script";
  src:url("fonts/nicoletta-script.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nicoletta Script";
  src:url("fonts/nicoletta-script.otf") format("opentype");
  font-weight:400;
  font-style:italic;   /* тот же файл: наклон уже заложен в рисунок букв */
  font-display:swap;
}

:root{
  /* База. Бумага здесь не белая, а пастельно-голубая — тот же
     тон, на котором лежит конверт. Белый лист обрубал акварель
     сразу под первым экраном: дальше шёл ровный офисный фон, и
     страница распадалась на две разные. Теперь тон один на всё,
     и разводы просвечивают до самого подвала. */
  --paper:  #F0F6FC;
  --haze:   #E2ECF6;

  /* Тот же тон каналами: он идёт в градиенты полупрозрачным
     слоем, а rgba() переменную-цвет не принимает. */
  --veil: 226, 237, 248;

  /* чернильные разливы */
  --wash-blue:  #A9C6DC;
  --wash-deep:  #6E93B0;
  --wash-steel: #C3CCD8;
  --wash-lilac: #C7C4D8;

  /* золото */
  --gold:      #C9A227;
  --gold-soft: #E7CE8E;
  --gold-pale: #F3E7BE;

  /* текст */
  --ink:    #2B3A4A;
  /* Прозрачность подобрана по контрасту 4.5:1 на бумаге
     поверх мрамора — иначе мелкие подписи не читаются.
     Светлый тон держит запас впритык, поэтому на первом
     экране, где под текстом фотография, он поднят до .75. */
  --ink-70: rgba(43,58,74,.80);
  --ink-45: rgba(43,58,74,.78);
  --ink-15: rgba(43,58,74,.15);
  --ink-08: rgba(43,58,74,.08);

  /* Яркое золото годится для нитей и точек, но как текст
     даёт на бумаге всего 2.4:1. Для слов — глубокий вариант.
     Прежний #8C6B12 держал 4.9:1 на чистом листе, но бумага
     здесь полупрозрачная: под римскими цифрами разделов
     проступала тёплая акварель, и запас падал до 4.59.
     Этот тон даёт 5.3:1 на листе и 4.9:1 в худшей точке.
     После перехода на голубую бумагу лист стал темнее белого,
     и прежний #856713 просел до 4.4 в тёмных точках акварели —
     ниже порога. Этот тон держит 5.5 на листе и 4.8 в худшей
     точке (замер по реальным пикселям bg-desktop.jpg). */
  --gold-ink:#755A0E;

  /* шрифты */
  --script: "Nicoletta Script", "Cormorant Garamond", Georgia, serif;
  --body:   "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ритм */
  --gut: 24px;
  --sec-y: 46px;
  --maxw: 620px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* viewport-fit=cover пускает мрамор под вырез экрана,
     но текст под «чёлку» уезжать не должен.
     .ink лежит fixed — отступы его не двигают, фон остаётся во весь экран. */
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

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

/* =========================================================
   ЧЕРНИЛЬНЫЙ ФОН — держится за экраном постоянно
   ========================================================= */

/* Две отдельные акварели: вертикальная для телефона,
   горизонтальная для монитора. Одну картинку на оба формата
   растягивало так, что от рисунка оставалась случайная полоса.
   Файлы заменяются на месте — правки в стилях не нужны.
   Важно: у обеих центр должен быть светлым, цвет и золото — по краям,
   иначе имена лягут на пятно. */
.ink{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background-image:url("photo/bg-mobile.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:var(--haze);   /* пока картинка грузится */
}

/* Блик. Раз в четырнадцать секунд по золоту проходит свет —
   как по фольге, когда открытку поворачивают в руке.
   Полоса только осветляет, поэтому текст от неё не страдает. */
.ink__sheen{
  position:absolute;
  inset:-30% -40%;
  background:linear-gradient(102deg,
    rgba(255,255,255,0)    42%,
    rgba(255,253,246,.34)  47%,
    rgba(255,243,214,.60)  50%,
    rgba(255,253,246,.34)  53%,
    rgba(255,255,255,0)    58%);
  animation:sheen 14s linear infinite;
}
@keyframes sheen{
  0%, 100%{ transform:translateX(-62%); opacity:0; }
  5%      { opacity:1; }
  19%     { opacity:1; }
  24%     { transform:translateX(62%); opacity:0; }
}

/* Зерно. Один процент шума — и акварель перестаёт выглядеть
   как jpeg на экране, начинает выглядеть как краска на бумаге. */
.ink__grain{
  position:absolute;
  inset:0;
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
/* =========================================================
   ОБЩАЯ ТИПОГРАФИКА
   ========================================================= */

.eyebrow{
  margin:0 0 16px;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-45);
}

.h2{
  margin:0 0 22px;
  font-family:var(--script);
  font-style:italic;
  font-weight:400;
  /* Рукописные буквы выходят за свою advance-ширину,
     поэтому на узких экранах заголовок должен уменьшаться
     заметно быстрее ширины окна. */
  font-size:clamp(31px,10.5vw,54px);
  line-height:1.12;
  letter-spacing:.005em;
}

/* ---------- шапка раздела ----------
   Римская цифра здесь не украшение: приглашение читают
   сверху вниз, одним проходом, и номер говорит гостю,
   сколько глав ещё осталось. Поэтому пронумерованы только
   четыре смысловые главы, а дата и фото — нет. */
.sec-head{ margin:0 0 34px; }

.sec-head__num{
  display:block;
  margin-bottom:16px;
  font-size:10px;
  font-weight:400;
  letter-spacing:.42em;
  text-indent:.42em;          /* компенсируем разрядку после последней буквы */
  color:var(--gold-ink);
}

.sec-head .eyebrow{ margin-bottom:14px; }
.sec-head .h2{ margin-bottom:22px; }

.sec-head__rule{
  position:relative;
  display:block;
  height:7px;
  background:linear-gradient(90deg,
    transparent 0, var(--gold-soft) 22%, var(--gold-soft) 78%, transparent 100%)
    no-repeat center / 100% 1px;
}
.sec-head__rule::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold);
}

.link{
  position:relative;
  display:inline-block;
  margin-top:12px;
  font-size:11px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--gold);
  padding-bottom:3px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
/* Строка набрана мелко и не должна толстеть ради пальца,
   поэтому зону нажатия растим невидимо до 44px. */
.link::after{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:44px;
  transform:translateY(-50%);
}
.link:hover,
.link:focus-visible{ color:var(--gold-ink); }

.section{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:var(--sec-y) var(--gut);
  text-align:center;
}

/* Лист поверх акварели. Раньше он начинался прямой линией
   поперёк разводов — экран будто разрезали. Теперь бумага
   проявляется из фона сверху, а растворяется в него уже
   в самом низу подвала — одним непрерывным полотном.
   Полупрозрачная: чернила просвечивают до самого конца страницы. */
main{
  position:relative;
  isolation:isolate;   /* чтобы подложка ушла за текст, а не за акварель */
  padding-top:120px;
}
main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  /* Промежуточные точки подобраны по ореолу первого экрана.
     Он в этой же полосе спадает с .75 до нуля, и если бумага
     набирает плотность равномерно, то на стыке двух полупрозрачных
     слоёв суммарное покрытие проседает — поперёк экрана проступает
     синяя полоса. Поэтому лист забирает вверх круто в первые 40px
     и дальше идёт положе: сумма двух слоёв остаётся ровной.
     Внизу лист не гаснет — дальше подвал на таком же .90,
     и растворяется страница уже там (см. .footer).
     Тон голубой, а не белый, и плотность на десятую ниже:
     акварель должна проступать сквозь всю страницу. */
  background:linear-gradient(180deg,
    rgba(var(--veil),0)   0,
    rgba(var(--veil),.40) 40px,
    rgba(var(--veil),.60) 90px,
    rgba(var(--veil),.73) 140px,
    rgba(var(--veil),.90) 200px,
    rgba(var(--veil),.90) 100%);
}

/* =========================================================
   ПЕРВЫЙ ЭКРАН
   ========================================================= */

.hero{
  position:relative;
  /* Здесь стоял overflow:hidden — и ореол обрывался ровно по низу
     экрана: сверху забелённая акварель, снизу чистая. Это и была
     «ступенька». Теперь ореол свободно дотекает до бумаги, а вбок
     он больше не выходит (см. .hero::before) — обрезать нечего. */
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(72px + env(safe-area-inset-top)) var(--gut)
          calc(44px + env(safe-area-inset-bottom));
}

/* Фотография тёмная в синих разводах: мелкие прописные
   на ней падают до 1.2:1. Кладём под текст мягкий ореол —
   он гаснет к краям, так что акварель по-прежнему видно,
   а буквы лежат на светлом. */
.hero::before{
  content:"";
  position:absolute;
  /* По горизонтали — ровно по экрану: раньше припуск -6% уносил
     страницу вбок на 45px. По вертикали припуск оставляем: он
     поднимает центр эллипса ровно в центр экрана, а низ ореола
     уходит под бумагу и гаснет уже там, без видимого края. */
  /* Снизу припуск большой не просто так. Ореол — эллипс, и
     раньше коробка кончалась там, где до нуля ему оставалась
     ещё треть: край обрубался на прозрачности .42, и поперёк
     страницы шла ступенька — та самая линия под первым экраном.
     Теперь коробка длиннее хвоста, и он гаснет сам.
     Центр и радиус пересчитаны от новой высоты (36.3% и 46%),
     чтобы сам ореол на первом экране остался прежним. */
  inset:-10% 0 -55%;
  z-index:0;
  pointer-events:none;
  /* Ореол того же голубого тона, что и бумага ниже. Белым он
     ложился на страницу светлым пятном, и первый экран читался
     отдельной картинкой, наклеенной поверх. */
  background:radial-gradient(105% 46% at 50% 36.3%,
    rgba(var(--veil),.95) 0%,
    rgba(var(--veil),.93) 42%,
    rgba(var(--veil),.76) 66%,
    rgba(var(--veil),.33) 84%,
    rgba(var(--veil),0)   100%);
}

.hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--maxw);
  text-align:center;
}

/* Гравированная рамка. Одна волосяная линия по краю экрана —
   ровно то, чем печатное приглашение отличается от страницы сайта.
   Отступы считаем от безопасной зоны, иначе на телефоне с вырезом
   верхняя грань уезжает под чёлку. */
.hero__rule{
  position:absolute;
  inset:calc(15px + env(safe-area-inset-top)) 15px
        calc(15px + env(safe-area-inset-bottom));
  z-index:1;
  pointer-events:none;
  border:1px solid rgba(201,162,39,.34);
}

/* Вензель. Раньше здесь стоял надстрочник «Вместе и навсегда» —
   он говорил то же, что и вся страница, только словами.
   Монограмма делает это короче и оставляет воздух именам. */
.hero__mono{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,3.5vw,16px);
  margin:0 0 26px;
}
.hero__mono-mark{
  font-family:var(--script);
  font-style:italic;
  font-size:clamp(20px,5.6vw,26px);
  line-height:1;
  letter-spacing:.04em;
  color:var(--ink);
}
.hero__mono-mark i{
  font-style:normal;
  padding:0 .16em;
  color:var(--gold-ink);
}
.hero__mono-line{
  width:clamp(26px,9vw,52px);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft));
}
.hero__mono-line:last-child{
  background:linear-gradient(90deg,var(--gold-soft),transparent);
}

.hero__names{
  margin:0;
  font-family:var(--script);
  font-style:italic;
  font-weight:400;
  line-height:1.04;
  letter-spacing:.005em;
}

.hero__name{
  display:block;
  font-size:clamp(58px,20vw,128px);
}

.hero__amp{
  display:block;
  margin:2px 0 4px;
  font-family:var(--script);
  font-style:italic;
  font-size:clamp(26px,7vw,44px);
  color:var(--gold-ink);
}

/* ---------- имена пишутся пером ----------
   Буквы не проявляются по очереди — по слову слева направо
   идёт мягкий край маски, будто перо кладёт чернила.
   Класс .hero-anim ставит скрипт, поэтому без JS имена видны сразу.

   --mx и --mw считает скрипт по настоящим чернилам букв:
   у рукописного шрифта росчерки выходят далеко за «шаг» глифа,
   и маска по ширине элемента срезала бы хвосты.
   Высота 320% — по той же причине, только сверху и снизу.        */
.hero-anim [data-write]{
  -webkit-mask-image:linear-gradient(90deg,#000 0 78%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(90deg,#000 0 78%,rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-position:var(--mx,0) center;  mask-position:var(--mx,0) center;
  -webkit-mask-size:0 320%;  mask-size:0 320%;
}
.hero-anim.is-writing [data-write]{
  animation:ink-write var(--dur,1.2s) cubic-bezier(.42,.03,.34,1)
            var(--d,0ms) both;
}
@keyframes ink-write{
  from{ -webkit-mask-size:0 320%;             mask-size:0 320%; }
  to  { -webkit-mask-size:var(--mw,140%) 320%; mask-size:var(--mw,140%) 320%; }
}

/* остальные элементы экрана — тихо, следом за именами */
.hero-anim .hero__mono,
.hero-anim .hero__invite,
.hero-anim .hero__date,
.hero-anim .scrollcue{
  opacity:0;
  transform:translateY(10px);
}
/* Рамка не едет, а проявляется: линия по краю экрана,
   которая куда-то сдвигается, читается как сбой вёрстки. */
.hero-anim .hero__rule{ opacity:0; }

.hero-anim.is-writing .hero__mono,
.hero-anim.is-writing .hero__invite,
.hero-anim.is-writing .hero__date,
.hero-anim.is-writing .scrollcue{
  opacity:1;
  transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.hero-anim.is-writing .hero__rule{
  opacity:1;
  transition:opacity 1.1s var(--ease);
}
/* --after ставит скрипт: это момент, когда перо дописало имена.
   На телефоне кегль меньше и перо доходит раньше, поэтому
   задержки считаются, а не задаются числом. */
.hero-anim.is-writing .hero__rule { transition-delay:.05s; }
.hero-anim.is-writing .hero__mono { transition-delay:.15s; }
.hero-anim.is-writing .hero__invite{ transition-delay:calc(var(--after,2.3s) +  80ms); }
.hero-anim.is-writing .hero__date  { transition-delay:calc(var(--after,2.3s) + 220ms); }
.hero-anim.is-writing .scrollcue   { transition-delay:calc(var(--after,2.3s) + 400ms); }

/* Акварель просто проявляется. Раньше она вдобавок открывалась
   шторкой слева направо (clip-path) — на широком экране это
   читалось как белая полоса, ползущая поперёк страницы, а не
   как растекающиеся чернила. Осталась одна прозрачность. */
.js .ink{ opacity:0; }
.js.is-inked .ink{
  opacity:1;
  transition:opacity 1.4s ease-out;
}

@media (prefers-reduced-motion:reduce){
  .js .ink{ opacity:1; clip-path:none; transition:none; }
  .ink__sheen{ animation:none; opacity:0; }
  /* маску снимаем целиком, иначе имена останутся под нулевой шириной */
  .hero-anim [data-write]{
    -webkit-mask-image:none; mask-image:none;
    animation:none;
  }
  .hero-anim .hero__mono,
  .hero-anim .hero__rule,
  .hero-anim .hero__invite,
  .hero-anim .hero__date,
  .hero-anim .scrollcue{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
}

.hero__invite{
  margin:32px auto 0;
  max-width:26ch;
  text-wrap:balance;   /* строки одной длины, иначе висит «НА» */
  font-size:11px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-70);
}

/* Число — второе, за чем гость открывает приглашение,
   после имён. Ставим его тем же пером и тем же золотом,
   что и «и» между именами, а месяц с годом — тихой строкой
   рядом, через золотую нить. */
.hero__date{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,4vw,22px);
  margin-top:40px;
}
.hero__num{
  font-family:var(--script);
  font-style:italic;
  font-size:clamp(62px,17vw,104px);
  line-height:.82;
  color:var(--gold-ink);
}
.hero__when{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding-left:clamp(14px,4vw,22px);
  border-left:1px solid var(--gold-soft);
  text-align:left;
}
.hero__month{
  font-size:clamp(13px,3.6vw,17px);
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.hero__year{
  font-size:10.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-45);
}

.scrollcue{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  margin-top:52px;
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-45);
  text-decoration:none;
}
.scrollcue svg{
  width:15px;
  height:26px;
  animation:bob 2.6s var(--ease) infinite;
}
@keyframes bob{
  0%,100%{ transform:translateY(0);   opacity:.45; }
  50%    { transform:translateY(6px); opacity:1; }
}

/* =========================================================
   ТАЙМЕР
   ========================================================= */

.countdown{ padding-top:62px; padding-bottom:52px; }

.countdown__grid{
  --clock-gap:14px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--clock-gap);
  margin-top:14px;
}

/* без рамок: четыре числа, разделённые золотой нитью */
.unit{
  position:relative;
  padding:6px 2px;
}
.unit + .unit::before{
  content:"";
  position:absolute;
  top:14%;
  left:calc(-1 * var(--clock-gap) / 2);
  width:1px;
  height:52%;
  background:linear-gradient(180deg, transparent, var(--gold-soft) 45%, transparent);
}
.unit__num{
  display:block;
  font-size:clamp(34px,10vw,52px);
  font-weight:200;
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.unit__label{
  display:block;
  margin-top:12px;
  font-size:8.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-45);
}

/* =========================================================
   КАЛЕНДАРЬ
   Таймер отвечает «сколько осталось», календарь — «куда
   этот день падает в месяце»: пятница, конец октября,
   длинные выходные следом. Для гостя, который прикидывает
   дорогу и отпуск, это и есть главное.
   ========================================================= */

.cal{ margin-top:46px; }

.cal__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:0 0 26px;
}
.cal__year{
  font-size:10px;
  letter-spacing:.5em;
  text-indent:.5em;
  color:var(--ink-45);
}
.cal__month{
  font-size:clamp(21px,6.4vw,28px);
  font-weight:200;
  letter-spacing:.24em;
  text-indent:.24em;
  text-transform:uppercase;
  color:var(--ink);
}

.cal__grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px 0;
  align-items:center;
}

.cal__dow{
  padding-bottom:12px;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-45);
}

/* Клетка квадратная: сердце вписывается в неё ровно,
   и сетка не разъезжается при смене кегля. */
.cal__day,
.cal__pad{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  font-size:clamp(13px,3.9vw,15px);
  font-weight:300;
  font-variant-numeric:tabular-nums;
  color:var(--ink-70);
}

/* Наш день. Сердце — картинкой, а не двумя кружками:
   форма остаётся одинаковой во всех браузерах. */
.cal__day--ours{
  color:#FFFFFF;
  font-weight:400;
}
.cal__day--ours::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:88%;
  height:88%;
  transform:translate(-50%,-52%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath d='M16 29S2 20.4 2 10.6C2 5.3 6 2 10 2c2.6 0 4.9 1.4 6 3.6C17.1 3.4 19.4 2 22 2c4 0 8 3.3 8 8.6C30 20.4 16 29 16 29z' fill='%238C6B12'/%3E%3C/svg%3E")
             no-repeat center / contain;
}
.cal__day--ours b{
  position:relative;
  font-weight:inherit;
  transform:translateY(-1px);   /* оптический центр сердца выше геометрического */
}

/* Пояснение для читалки: визуально день помечен сердцем,
   голосом его нужно назвать словами. */
.cal__sr{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.cal__soon{
  margin:30px 0 0;
  font-family:var(--script);
  font-style:italic;
  font-size:clamp(21px,6vw,26px);
  line-height:1.2;
  color:var(--gold-ink);
}

.cal__add{
  display:inline-block;
  margin-top:20px;
  padding:15px 34px;
  border:1px solid var(--gold-soft);
  border-radius:100px;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  transition:border-color .3s var(--ease), color .3s var(--ease),
             background-color .3s var(--ease);
}
.cal__add:hover,
.cal__add:focus-visible{
  border-color:var(--gold-ink);
  color:var(--gold-ink);
  background:rgba(243,231,190,.35);
}

/* Когда день наступит, скрипт заменит текст в этой же строке
   на «Сегодня тот самый день» — поэтому класс общий. */
.countdown__note{
  margin:24px 0 0;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-70);
}

/* =========================================================
   ПРИГЛАШЕНИЕ
   ========================================================= */

.invite{ padding-bottom:48px; }

.invite__text{
  margin:0 auto;
  max-width:33ch;
  font-size:clamp(16px,4.2vw,19px);
  font-weight:300;
  line-height:1.75;
}
.invite__text em{
  font-style:normal;
  padding-bottom:2px;
  border-bottom:1px solid var(--gold-soft);
}

/* =========================================================
   ФОТО
   ========================================================= */

/* Снимок больше не идёт от края до края. Закатный кадр — единственное
   тёплое пятно на холодном листе, и во всю ширину он читался баннером,
   вклеенным в приглашение. Поля возвращают его на бумагу: это отпечаток,
   который положили на страницу, а не картинка поверх неё. */
.moment{
  margin:0;
  padding:0 var(--gut) var(--sec-y);
}

/* margin-inline тут не косметика. При aspect-ratio браузер, упершись
   в max-height, ужимает и ширину — на широком экране кадр становился
   уже страницы и прилипал к левому краю, а подпись оставалась по
   центру листа. Авто-поля возвращают его на ось.

   Паспарту нарисовано рамкой, а не отдельным слоем: при box-sizing
   border-box пропорция 3:2 считается по внешнему краю, поэтому
   кадру внутри достаётся чуть меньше — object-fit срезает эти
   несколько пикселей и не даёт снимку растянуться.
   Низ поля тяжелее верха на четыре пикселя — так багеты режут со
   времён гравюр: ровные поля глаз читает как съехавшие вверх. */
.moment__frame{
  position:relative;
  margin-inline:auto;
  aspect-ratio:3/2;
  max-height:78svh;
  overflow:hidden;
  border:9px solid rgba(255,255,255,.72);
  border-bottom-width:13px;
  /* Тонкая золотая обводка по краю паспарту — та же волосяная линия,
     что обводит первый экран и держит разделы. Тень мягкая и без
     смещения вбок: лист лежит ровно, свет сверху. */
  box-shadow:
    0 0 0 1px rgba(201,162,39,.36),
    0 22px 46px -24px rgba(43,58,74,.6);
  background:linear-gradient(150deg,var(--wash-blue),var(--wash-lilac) 55%,var(--wash-steel));
}

/* Уголки. Настоящие альбомные — бумажные треугольники, которыми
   отпечаток прихватывают к странице. Здесь они того же тона, что
   бумага, с золотой ниткой по косой: на закате кадр в углах то
   почти белый, то тёмно-зелёный, и одна только золотая линия
   местами пропадала бы. Заливка держит уголок на любом фоне.

   Рисуются фоном, а не четырьмя элементами: ::after на этом блоке
   уже занят заглушкой «положите фото». Диагональ задаётся углом
   градиента: 135° кладёт полосы «/», 45° — «\». Заливка идёт от
   нулевой точки оси, а она у 45° в левом нижнем углу, у 135° — в
   левом верхнем. Поэтому у правых уголков порядок цветов обратный:
   иначе бумага заливала не тот треугольник и уголок оказывался
   посреди кадра. */
.moment__frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  --mount:20px;
  --mount-paper:rgba(240,246,252,.92);
  --mount-edge:rgba(201,162,39,.55);
  background-image:
    linear-gradient(135deg, var(--mount-paper) 0 calc(50% - .6px), var(--mount-edge) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)),
    linear-gradient(45deg,  transparent 0 calc(50% - .6px), var(--mount-edge) calc(50% - .6px) calc(50% + .6px), var(--mount-paper) calc(50% + .6px)),
    linear-gradient(45deg,  var(--mount-paper) 0 calc(50% - .6px), var(--mount-edge) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)),
    linear-gradient(135deg, transparent 0 calc(50% - .6px), var(--mount-edge) calc(50% - .6px) calc(50% + .6px), var(--mount-paper) calc(50% + .6px));
  background-size:var(--mount) var(--mount);
  background-position:left top, right top, left bottom, right bottom;
  background-repeat:no-repeat;
}

.moment__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}

.moment__frame.is-empty::after{
  content:"Положите фото в папку photo/couple.jpg";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:0 24px;
  text-align:center;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
}

.moment__cap{
  margin:16px auto 0;
  padding-inline:var(--gut);
  font-size:9.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-align:center;
  color:var(--ink-45);
}

/* =========================================================
   ПРОГРАММА ДНЯ
   ========================================================= */

.timeline{
  list-style:none;
  margin:0;
  padding:0;
  text-align:left;
}

.tl{
  position:relative;
  padding:28px 0 28px 82px;
  border-top:1px solid var(--ink-15);
}
.tl:last-child{ border-bottom:1px solid var(--ink-15); }

/* Время и адрес — то, ради чего гость открывает страницу
   на бегу. Держим их крупнее остального текста. */
.tl__time{
  position:absolute;
  left:0;
  top:26px;
  font-size:21px;
  font-weight:400;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--gold-ink);
}

/* Названия событий — рабочая информация, читаются с одного взгляда.
   Каллиграфия здесь только мешала бы. */
.tl__title{
  margin:0 0 8px;
  font-size:22px;
  font-weight:400;
  line-height:1.25;
  letter-spacing:.01em;
  color:var(--ink);
}
.tl__place{
  margin:0;
  font-size:16px;
  line-height:1.45;
  color:var(--ink);
}
.tl__note{
  margin:9px 0 0;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-70);
}

/* =========================================================
   ДРЕСС-КОД
   ========================================================= */

.dress__text{
  margin:0 auto;
  max-width:34ch;
  font-size:14.5px;
  color:var(--ink-70);
}

.swatches{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  gap:12px;
  list-style:none;
  margin:36px 0 0;
  padding:0;
}
.sw{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  text-align:center;
}
.sw__dot{
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--c);
  box-shadow:0 0 0 1px var(--gold-soft), inset 0 -6px 14px rgba(255,255,255,.5);
}
.sw__name{
  display:block;
  margin-top:13px;
  font-size:9px;
  line-height:1.45;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-70);
}

.dress__aside{
  margin:36px auto 0;
  max-width:34ch;
  padding-top:24px;
  border-top:1px solid var(--gold-soft);
  font-size:13px;
  color:var(--ink-45);
}

/* =========================================================
   ПОЖЕЛАНИЯ
   ========================================================= */

/* Просьба одна — ей не нужна ни плашка, ни собственный
   заголовок: три подписи подряд над одним абзацем читались
   как оглавление. Оставляем абзац под общим заголовком. */
.wishes__text{
  max-width:34ch;
  margin:0 auto;
  font-size:15px;
  line-height:1.75;
  color:var(--ink-70);
  text-wrap:pretty;
}

/* =========================================================
   АНКЕТА
   ========================================================= */

.rsvp__lead{
  margin:0 auto 36px;
  max-width:32ch;
  font-size:14px;
  color:var(--ink-70);
}
.rsvp__lead strong{ font-weight:500; color:var(--ink); }

.form{ text-align:left; }

.field{ margin-bottom:26px; }

.fieldset{
  border:0;
  margin-inline:0;
  padding:0;
}

.label{
  display:block;
  margin-bottom:11px;
  padding:0;
  font-size:10px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-45);
}

.input{
  width:100%;
  padding:14px 15px;
  font-family:var(--body);
  font-size:16px;
  font-weight:300;
  color:var(--ink);
  background:var(--haze);
  border:1px solid var(--ink-15);
  border-radius:0;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.input::placeholder{ color:var(--ink-45); }
/* Рамка фокуса — тоже интерфейс: яркое золото на бумаге
   даёт 2.4:1, и на солнце поле не отличить от соседнего.
   Берём глубокий тон и ощутимое кольцо. */
.input:focus-visible{
  outline:none;
  border-color:var(--gold-ink);
  box-shadow:0 0 0 3px rgba(117,90,14,.30);
}

.choices{ display:grid; gap:8px; }
.choices--wrap{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.choice{
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 15px;
  background:var(--haze);
  border:1px solid var(--ink-15);
  font-size:13.5px;
  cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.choice input{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:14px;
  height:14px;
  margin:0;
  border:1px solid var(--ink-45);
  border-radius:50%;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.choice input[type="checkbox"]{ border-radius:0; }
/* Отметка и рамка выбранного — единственный признак того,
   что гость проголосовал. Светлое золото давало 2.4:1,
   поэтому состояние берёт глубокий тон. */
.choice input:checked{
  border-color:var(--gold-ink);
  background:var(--gold-ink);
  box-shadow:inset 0 0 0 3px var(--haze);
}
.choice:has(input:checked){
  border-color:var(--gold-ink);
  background:var(--paper);
}
.choice input:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:2px; }

.conditional{ animation:fade-in .45s var(--ease); }
@keyframes fade-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.btn{
  width:100%;
  padding:17px 24px;
  font-family:var(--body);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:0;
  cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
/* На золоте светлая надпись даёт 2.4:1 — кнопка под наведением
   читалась хуже, чем в покое. Меняем не только фон, но и текст. */
.btn:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
}
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.45; cursor:default; }

.error{
  margin:8px 0 0;
  min-height:1em;
  font-size:11.5px;
  letter-spacing:.02em;
  color:#B0566E;
}

.form__status{
  margin:18px 0 0;
  font-size:13.5px;
  line-height:1.6;
  text-align:center;
  color:var(--ink-70);
}

/* =========================================================
   ПОДВАЛ
   ========================================================= */

/* Подвал — продолжение того же листа, а не отдельная плита.
   Сплошная заливка давала вторую «ступеньку»: бумага сверху
   к этому месту уже сходила на нет, а подвал начинался
   непрозрачным. Поэтому берём ровно тот же тон .93 и гасим его
   только в нижнем отступе — под последней строкой. Страница
   не обрывается, а растворяется обратно в акварель.
   Подложка вынесена в ::before: её край на широком экране
   растушёван маской, а текст размывать нельзя. */
.footer{
  position:relative;
  isolation:isolate;
  padding:74px var(--gut) calc(84px + env(safe-area-inset-bottom));
  text-align:center;
}
.footer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  /* Золотая волосяная линия лежит первым слоем — она тоже часть
     бумаги, поэтому и гаснет вместе с ней по краям. */
  background:
    linear-gradient(90deg,var(--gold-soft),var(--gold-soft)) no-repeat top left / 100% 1px,
    linear-gradient(180deg,
      rgba(var(--veil),.90) 0,
      rgba(var(--veil),.90) calc(100% - 76px),
      rgba(var(--veil),0)   100%);
}
.footer__names{
  margin:0;
  font-family:var(--script);
  font-style:italic;
  font-size:clamp(32px,9vw,46px);
  line-height:1.15;
}
.footer__names span{ color:var(--gold-ink); }

.footer__date{
  margin:16px 0 0;
  font-size:10.5px;
  letter-spacing:.32em;
  color:var(--ink-70);
}
.footer__note{
  margin:28px 0 0;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-45);
}

/* =========================================================
   НАПОМИНАНИЕ ПРО АНКЕТУ

   Тонкая полоска у нижнего края. Она не перекрывает чтение
   и не требует реакции: гость может её закрыть, а может
   просто дочитать — у формы она уйдёт сама.

   z-index ниже конверта (60): пока открытка не открыта,
   поверх неё не должно появляться ничего.
   ========================================================= */

.nudge{
  position:fixed;
  z-index:50;
  left:12px;
  right:12px;
  /* env() держит полоску над «домашней» чертой айфона —
     без него её нижний край уезжает под системную полосу. */
  bottom:calc(12px + env(safe-area-inset-bottom));
  max-width:520px;
  margin-inline:auto;

  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 9px 9px 20px;

  border:1px solid var(--gold-soft);
  border-radius:100px;
  /* Полупрозрачная бумага с размытием: под полоской видно,
     что страница продолжается, и она не читается заплаткой. */
  background:rgba(240,246,252,.93);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -16px rgba(43,58,74,.45);

  transform:translateY(180%);
  transition:transform .6s var(--ease);
}
.nudge.is-in{ transform:none; }

/* display:flex выше перебивает display:none, который браузер сам
   вешает на атрибут hidden, — без этой строки полоска остаётся в
   потоке и ловит нажатия, просто сдвинутая за нижний край. */
.nudge[hidden]{ display:none; }

.nudge__text{
  flex:1;
  margin:0;
  font-size:10px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-70);
}

.nudge__go{
  flex:none;
  padding:12px 20px;
  border:1px solid var(--gold-soft);
  border-radius:100px;
  font-size:10px;
  font-weight:400;
  letter-spacing:.2em;
  text-indent:.2em;
  text-transform:uppercase;
  color:var(--gold-ink);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.nudge__go:hover,
.nudge__go:focus-visible{
  border-color:var(--gold-ink);
  background:rgba(243,231,190,.45);
}

/* Крестик — 40×40 при рисунке в 12px: палец должен попадать
   по кнопке, а не по соседней ссылке. */
.nudge__close{
  flex:none;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  font-family:inherit;
  font-size:12px;
  line-height:1;
  color:var(--ink-45);
  cursor:pointer;
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
.nudge__close:hover,
.nudge__close:focus-visible{
  color:var(--ink);
  background:var(--ink-08);
}

@media (prefers-reduced-motion:reduce){
  .nudge{ transition:none; }
}

/* =========================================================
   ОТКРЫТКА — ЗАПЕЧАТАННЫЙ КОНВЕРТ

   Хореография одна на всё: печать вдавливается, клапан
   откидывается, карточка выезжает, конверт тает. Числа
   ниже — один такт, менять их надо вместе, и вместе же
   с REVEAL/GONE во встроенном скрипте index.html.

     0.00  нажатие: сургуч вдавливается и гаснет
     0.20  клапан откидывается назад            (0.75s)
     0.62  карточка поднимается из кармана      (1.00s)
     1.45  надписи вокруг конверта гаснут       (0.45s)
     1.85  весь слой растворяется               (0.75s)
     2.45  под ним уже виден сайт — перо пишет имена
   ========================================================= */

.cover{ display:none; }

.js .cover{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:calc(var(--gut) + env(safe-area-inset-top)) var(--gut)
          calc(var(--gut) + env(safe-area-inset-bottom));
  touch-action:none;              /* палец не прокручивает страницу под открыткой */
  overscroll-behavior:contain;
  /* Тот же акварельный фон и ровно та же плотность голубого,
     что и у страницы: конверт лежит на той бумаге, на которую
     гость сейчас попадёт. Разойдись эти два значения — при
     растворении открытки фон дёрнулся бы по яркости. */
  background:
    linear-gradient(rgba(var(--veil),.90), rgba(var(--veil),.90)),
    url("photo/bg-mobile.jpg") center / cover no-repeat,
    var(--haze);
}
.js .cover.is-done{ display:none; }

.is-sealed body{ overflow:hidden; }

.cover.is-open{
  animation:cover-out .75s var(--ease) 1.85s forwards;
}
@keyframes cover-out{ to{ opacity:0; visibility:hidden; } }

.cover__stage{
  width:100%;
  max-width:560px;
  text-align:center;
}

.cover__title{
  margin:0 0 clamp(24px,4.5vh,38px);
  font-family:var(--script);
  font-style:italic;
  font-weight:400;
  font-size:clamp(32px,8.4vw,54px);
  line-height:1.06;
  color:var(--gold-ink);
}

.cover__hint{
  margin:clamp(22px,3.6vh,32px) 0 0;
  font-size:10px;
  font-weight:400;
  letter-spacing:.26em;
  text-indent:.26em;
  text-transform:uppercase;
  color:var(--ink);
}

.cover__lead{
  margin:clamp(18px,2.8vh,26px) auto 0;
  max-width:34ch;
  font-size:14px;
  font-weight:300;
  line-height:1.62;
  text-wrap:balance;              /* иначе тире срывается в начало строки */
  color:var(--ink-70);
}

/* Подписи уходят раньше конверта: если гасить всё разом,
   кадр схлопывается плоско, без ощущения, что письмо
   достали и оно осталось в руках. */
.cover.is-open .cover__title,
.cover.is-open .cover__hint,
.cover.is-open .cover__lead{
  animation:cover-fade .45s var(--ease) 1.45s forwards;
}
@keyframes cover-fade{ to{ opacity:0; transform:translateY(-6px); } }


/* ---------- КОНВЕРТ ---------- */

.env{
  position:relative;
  width:100%;
  aspect-ratio:3 / 2;
  perspective:1100px;             /* нужен клапану: он откидывается в глубину */
}

.env__back{
  position:absolute;
  inset:0;
  z-index:0;
  background:#DCE3EA;
  box-shadow:0 26px 46px -18px rgba(43,58,74,.30),
             0 3px 10px rgba(43,58,74,.07);
}

/* Треугольники конверта. Разный тон вместо нарисованных
   линий: сгиб бумаги виден потому, что грани по-разному
   ловят свет, а не потому, что кто-то провёл черту. */
.env__tri{
  position:absolute;
  inset:0;
  z-index:3;
}
.env__tri--left  { background:#C4CFDB; clip-path:polygon(0 0, 50% 50%, 0 100%); }
.env__tri--right { background:#CBD5DF; clip-path:polygon(100% 0, 50% 50%, 100% 100%); }
.env__tri--bottom{
  background:linear-gradient(180deg,#DCE3EB 0,#CDD7E1 100%);
  clip-path:polygon(0 100%, 50% 50%, 100% 100%);
  /* Тень по верхним граням кармана — тот самый волосок сгиба.
     drop-shadow повторяет clip-path, обычный box-shadow лёг бы
     прямоугольником и вылез из-под конверта. */
  filter:drop-shadow(0 -1px 1px rgba(43,58,74,.16));
}

.env__flap{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  z-index:4;
  background:linear-gradient(180deg,#EDF1F6 0,#DCE4EC 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  filter:drop-shadow(0 1px 1.5px rgba(43,58,74,.18));
  transform-origin:top center;
  backface-visibility:hidden;
}
.cover.is-open .env__flap{
  animation:flap .75s cubic-bezier(.62,0,.24,1) .2s forwards;
}
/* Клапан откидывается назад и на ребре пропадает —
   backface-visibility прячет изнанку, как и у настоящей
   бумаги, повёрнутой к нам торцом. Улететь за конверт он
   не может: там заголовок, и клапан лёг бы прямо на него.
   Прозрачность — подстраховка для браузеров, где изнанка
   с clip-path всё-таки прорисовывается. */
@keyframes flap{
  0%  { transform:rotateX(0deg);    opacity:1; }
  62% { opacity:1; }
  100%{ transform:rotateX(-165deg); opacity:0; }
}

.env__card{
  position:absolute;
  top:4%;
  bottom:4%;
  left:5.5%;
  right:5.5%;
  z-index:1;                      /* всегда ниже треугольников */
  display:flex;
  flex-direction:column;
  align-items:center;
  /* Текст прижат к верхней трети, а не по центру листа: из
     конверта карточка выходит только наполовину, и центр
     остался бы внутри кармана. */
  justify-content:flex-start;
  padding:11% 6% 0;
  background:linear-gradient(180deg,#FFFFFF 0,#FCFAF4 100%);
  box-shadow:0 0 0 1px rgba(231,206,142,.55),
             0 10px 26px -12px rgba(43,58,74,.34);
}
/* 46%, а не «побольше»: на 800px по высоте карточка при
   большем ходе упирается в верхний край экрана и обрезается. */
.cover.is-open .env__card{
  animation:card-rise 1s cubic-bezier(.52,0,.16,1) .62s forwards;
}
@keyframes card-rise{ to{ transform:translateY(-46%); } }

.env__eyebrow{
  margin:0 0 clamp(8px,1.6vw,12px);
  font-size:clamp(7px,1.7vw,9px);
  font-weight:400;
  letter-spacing:.4em;
  text-indent:.4em;
  text-transform:uppercase;
  color:var(--ink-45);
}
.env__names{
  margin:0;
  font-family:var(--script);
  font-style:italic;
  font-weight:400;
  font-size:clamp(22px,6.2vw,40px);
  line-height:1.1;
  color:var(--gold-ink);
}
.env__names i{
  font-style:inherit;
  padding:0 .1em;
  color:var(--gold);
}
.env__rule{
  display:block;
  width:clamp(30px,9vw,54px);
  height:1px;
  margin:clamp(10px,2.4vw,16px) 0;
  background:var(--gold-soft);
}
.env__date{
  margin:0;
  font-size:clamp(7px,1.7vw,9px);
  font-weight:400;
  letter-spacing:.3em;
  text-indent:.3em;
  color:var(--ink-45);
}


/* ---------- СУРГУЧ ---------- */

.cover__seal{
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  padding:14px;                   /* палец попадает и мимо самого сургуча */
  border:0;
  background:none;
  cursor:pointer;
}

/* Края намеренно неровные: идеальный круг читается как
   кнопка интерфейса, а не как оттиск на бумаге. */
.cover__wax{
  position:relative;
  /* Именно flex, а не grid: у grid текстовые узлы «Е», «·», «Н»
     становятся отдельными ячейками и вензель встаёт столбиком. */
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(72px,18.5vw,94px);
  aspect-ratio:1;
  border-radius:47% 53% 43% 57% / 55% 44% 56% 45%;
  background:
    /* мягкий блик, а не глянец: воск матовый */
    radial-gradient(56% 56% at 37% 29%, rgba(255,227,168,.30) 0, rgba(255,227,168,0) 70%),
    radial-gradient(96% 96% at 46% 40%, #C0902F 0, #A2731D 52%, #6D4A0A 100%);
  box-shadow:0 11px 22px -7px rgba(52,35,4,.52),
             inset 0 -8px 15px rgba(48,31,2,.44),
             inset 0 4px 9px rgba(255,226,164,.16);
  font-family:var(--script);
  font-style:italic;
  font-size:clamp(22px,5.6vw,29px);
  line-height:1;
  /* Вензель вдавлен, а не напечатан: тёмная буква и светлый
     блик под ней — весь фокус тиснения. */
  color:#5E4008;
  text-shadow:0 1px 0 rgba(255,238,196,.38);
  animation:wax 3.6s var(--ease) infinite;
}
.cover__wax i{ font-style:normal; padding:0 .14em; }

/* Потёк, выдавленный из-под штампа. Другая форма и лёгкий
   поворот — иначе край выглядит вырезанным ножницами. */
.cover__wax::before{
  content:"";
  position:absolute;
  inset:-10% -6% -6% -9%;
  z-index:-1;
  border-radius:58% 42% 49% 51% / 42% 57% 43% 58%;
  background:radial-gradient(70% 70% at 45% 38%, #AE7F1E 0, #7C560F 100%);
  transform:rotate(-9deg);
}
/* Приподнятый ободок вокруг вензеля */
.cover__wax::after{
  content:"";
  position:absolute;
  inset:15%;
  border-radius:52% 48% 49% 51% / 50% 52% 48% 50%;
  box-shadow:inset 0 0 0 1px rgba(255,234,184,.16),
             inset 0 2px 6px rgba(48,31,2,.32);
}

@keyframes wax{
  0%,100%{ transform:scale(1);    }
  50%    { transform:scale(1.04); }
}
.cover__seal:hover .cover__wax,
.cover__seal:focus-visible .cover__wax{
  animation-play-state:paused;
  transform:scale(1.06);
  transition:transform .25s var(--ease);
}
.cover.is-open .cover__wax{
  animation:wax-break .4s var(--ease) forwards;
}
@keyframes wax-break{
  40% { transform:scale(.88); opacity:1; }
  100%{ transform:scale(.8);  opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  /* Ни вдоха сургуча, ни откидывания, ни выезда — конверт
     просто уходит. Движение во весь экран это ровно то,
     от чего настройка и защищает. */
  .cover__wax,
  .cover.is-open .env__flap,
  .cover.is-open .env__card,
  .cover.is-open .cover__wax,
  .cover.is-open .cover__title,
  .cover.is-open .cover__hint,
  .cover.is-open .cover__lead{ animation:none; }

  .cover.is-open{ animation:cover-out .4s linear forwards; }
}

@media (min-width:700px){
  .js .cover{ background-image:
    linear-gradient(rgba(var(--veil),.90), rgba(var(--veil),.90)),
    url("photo/bg-desktop.jpg"); }
}

/* =========================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   ========================================================= */

/* Прячем только когда есть кому показать обратно:
   без JS приглашение обязано читаться целиком. */
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.js .reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   ДОСТУПНОСТЬ
   ========================================================= */

/* Рамка фокуса — элемент интерфейса, ей нужны те же 3:1,
   что и тексту, поэтому берём глубокое золото. */
:focus-visible{
  outline:2px solid var(--gold-ink);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .ink__sheen,
  .scrollcue svg{ animation:none; }
  .conditional{ animation:none; }
}

/* =========================================================
   ≥ 700px — акварель обрамляет лист
   ========================================================= */

@media (min-width:700px){
  :root{ --gut:44px; --sec-y:58px; }

  /* горизонтальная акварель — вертикальную здесь растянуло бы
     до неузнаваемости */
  .ink{ background-image:url("photo/bg-desktop.jpg"); }

  body{ font-size:17px; }

  /* Здесь main и .footer стояли в колонке 880px, и лист был уже
     экрана: по бортам оставалась незабелённая акварель, растушёванная
     маской. Первый экран при этом шёл во всю ширину — страница
     разваливалась на широкую шапку и узкую полосу под ней.
     Ширину задаёт .section (620px), так что колонка на main была
     нужна только листу. Убрали — бумага идёт от края до края,
     как на первом экране, а текст остался на своём месте. */

  /* Фото на всю ширину монитора превращается в баннер: лица уходят
     в стороны, а вертикально кадр обрезается. Здесь он — снимок,
     положенный на лист, поэтому колонка и полный кадр 3:2 без обрезки. */
  .moment__frame{ max-width:880px; max-height:none; border-width:18px; border-bottom-width:26px; }

  /* Поля паспарту выросли — уголки следом, иначе на большом
     отпечатке они превращаются в засечки. */
  .moment__frame::before{ --mount:34px; }

  /* Кнопка «в календарь» — жест телефона: там ссылка открывает
     календарь. На компьютере она в лучшем случае кладёт .ics
     в «Загрузки», и гость остаётся с файлом, который некуда деть. */
  .cal__add{ display:none; }

  .countdown__grid{ --clock-gap:28px; }
  .unit__label{ font-size:9.5px; }

  .tl{ padding-left:130px; }
  .tl__time{ font-size:25px; }
  .tl__title{ font-size:27px; }
  .tl__place{ font-size:17.5px; }

  .wishes__text{ font-size:16px; }

  .swatches{ gap:20px; }

  .choices--wrap{ grid-template-columns:repeat(3,minmax(0,1fr)); }

  .btn{ width:auto; min-width:300px; display:block; margin-inline:auto; }
}