/* ============================================================
   Приглашение. Элана и Муса, 5 декабря 2026
   Mobile-first. Палитра снята пипеткой с референса заказчицы
   (photo_2026-09-22 13.40.04.jpeg), холодная ночь плюс тёплый кремовый.
   Шрифты локальные, fonts.css. Внешних загрузок на странице нет.
   ============================================================ */

:root{
  --night:#0b0d12;
  --night-2:#121722;
  --night-3:#1a2131;
  --slate:#2b3342;
  --cream:#ece3d6;
  --cream-dim:#a3998c;
  --gold:#c2a172;
  --gold-dim:#7d674a;
  --wine:#5e1f28;

  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'Onest',system-ui,-apple-system,sans-serif;

  --maxw:520px;
  --pad:24px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

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

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

body{
  margin:0;
  background:var(--night);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;height:100%}

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

/* ------------------------------ орнамент ------------------------------ */
.orn{
  display:block;width:180px;height:18px;margin:0 auto;
  color:var(--gold-dim);opacity:.85;
}
.orn--sm{width:140px;height:14px}

/* ------------------------------ кнопки ------------------------------ */
.btn{
  display:inline-block;
  font-family:var(--font-body);font-weight:400;font-size:15px;
  letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;text-align:center;
  padding:15px 34px;border-radius:2px;cursor:pointer;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.btn--open{
  background:transparent;color:var(--gold);
  border:1px solid var(--gold-dim);
  min-width:190px;
}
.btn--open:hover,.btn--open:focus-visible{background:var(--gold);color:var(--night);border-color:var(--gold)}
.btn--ghost{
  background:transparent;color:var(--cream);
  border:1px solid var(--slate);font-size:13px;padding:12px 20px;flex:1 1 auto;
}
.btn--ghost:hover{border-color:var(--gold-dim);color:var(--gold)}

/* ============================================================
   КОНВЕРТ
   ============================================================ */
.envelope{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  padding:calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b));
  background:
    radial-gradient(120% 80% at 50% 12%,var(--night-3) 0%,var(--night) 62%),
    var(--night);
  transition:opacity .65s ease,visibility .65s ease;
}
.envelope.is-open{opacity:0;visibility:hidden}

.envelope__card{
  position:relative;width:100%;max-width:340px;
  padding:52px 26px 34px;text-align:center;
  border:1px solid var(--slate);
  background:var(--night-2);
}
/* клапан конверта */
.envelope__flap{
  position:absolute;left:-1px;right:-1px;top:-1px;height:74px;
  background:var(--night-3);
  border:1px solid var(--slate);border-bottom:0;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:50% 0;
  transition:transform .8s cubic-bezier(.62,.02,.35,1);
  backface-visibility:hidden;
}
.envelope.is-open .envelope__flap{transform:rotateX(-176deg)}

.envelope__kicker{
  margin:18px 0 0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cream-dim);
}
.envelope__names{
  margin:14px 0 6px;font-family:var(--font-display);font-weight:500;
  font-size:40px;line-height:1.12;color:var(--cream);
}
.envelope__names i{
  display:block;font-size:19px;font-style:italic;color:var(--gold);
  margin:2px 0;
}
.envelope__date{margin:0 0 20px;font-size:14px;letter-spacing:.14em;color:var(--cream-dim)}
.envelope .btn--open{margin-top:26px}
.envelope__hint{
  margin:14px 0 0;font-size:12px;letter-spacing:.04em;
  color:var(--cream-dim);
}

/* ============================================================
   КНОПКА ЗВУКА
   ============================================================ */
.sound{
  position:fixed;z-index:40;
  top:calc(14px + var(--safe-t));right:14px;
  width:44px;height:44px;padding:0;   /* зона нажатия не меньше 44 */
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--slate);border-radius:50%;
  background:rgba(11,13,18,.72);backdrop-filter:blur(8px);
  color:var(--cream);cursor:pointer;
  transition:color .3s ease,border-color .3s ease,opacity .5s ease;
}
.sound[hidden]{display:none}   /* display:flex выше перебивает атрибут hidden, без песни кнопка не нужна */
.sound:hover{color:var(--gold);border-color:var(--gold-dim)}
.sound svg{width:21px;height:21px}
.sound .cross{opacity:0}
.sound[aria-pressed="false"] .wave{opacity:0}
.sound[aria-pressed="false"] .cross{opacity:1}

/* ============================================================
   ТИТРЫ
   ============================================================ */
.titles{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:80px var(--pad);text-align:center;
  background:radial-gradient(120% 70% at 50% 40%,var(--night-3) 0%,var(--night) 66%);
}
.titles__line{margin:0}
.js .titles__line{opacity:0}
.titles__line--1{
  font-family:var(--font-display);font-weight:500;font-size:44px;line-height:1.1;
}
.titles__line--1 i{display:block;font-size:20px;font-style:italic;color:var(--gold);margin:4px 0}
.titles__line--2{margin-top:20px;font-size:17px;letter-spacing:.2em;color:var(--cream)}
.titles__line--3{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-dim)}
.titles__line--4{
  margin-top:26px;max-width:19em;font-family:var(--font-display);font-style:italic;
  font-size:19px;line-height:1.5;color:var(--cream-dim);
}
.titles__hint{
  position:absolute;bottom:calc(30px + var(--safe-b));left:50%;transform:translateX(-50%);
  width:1px;height:46px;background:linear-gradient(180deg,transparent,var(--gold-dim));
}
.js .titles__hint{opacity:0}

/* проигрывание */
.titles.is-playing .titles__line--1{animation:rise 1.7s .4s ease-out forwards}
.titles.is-playing .titles__line--2{animation:rise 1.7s 3s ease-out forwards}
.titles.is-playing .titles__line--3{animation:rise 1.7s 5.2s ease-out forwards}
.titles.is-playing .titles__line--4{animation:rise 1.9s 7.4s ease-out forwards}
.titles.is-playing .titles__hint{animation:fade 1.4s 10s ease-out forwards}
/* перемотка, если гость начал листать раньше */
.titles.is-done .titles__line,.titles.is-done .titles__hint{
  opacity:1;transform:none;animation:none;
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

/* ============================================================
   СЕКЦИИ
   ============================================================ */
.page{position:relative}
.titles{position:relative}

.sec{
  position:relative;
  max-width:var(--maxw);margin:0 auto;
  padding:66px var(--pad);
  text-align:center;
}
.sec--card{
  max-width:calc(var(--maxw) - 24px);
  margin:34px auto;padding:44px 22px;
  border:1px solid var(--slate);
  background:var(--night-2);
}
.sec--final{padding-top:40px;padding-bottom:calc(76px + var(--safe-b))}
.sec--final .art{margin-bottom:22px}

.h2{
  margin:0 0 22px;font-family:var(--font-display);font-weight:500;
  font-size:30px;line-height:1.2;color:var(--cream);
}
.h2--script{font-style:italic;color:var(--gold);font-size:36px}
.lead{
  margin:22px 0 14px;font-family:var(--font-display);font-style:italic;
  font-size:23px;line-height:1.4;color:var(--cream);
}
.body{margin:0 auto;max-width:27em;font-size:15.5px;color:var(--cream-dim)}

.date-big{
  margin:26px 0 4px;font-family:var(--font-display);font-weight:500;
  font-size:34px;line-height:1.15;color:var(--cream);
}
.date-sub{margin:0 0 22px;font-size:13px;letter-spacing:.16em;color:var(--cream-dim)}
.place-name{
  margin:20px 0 4px;font-family:var(--font-display);font-size:25px;color:var(--gold);
}
.place-city{margin:0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-dim)}

.amp{margin:20px 0 0;font-family:var(--font-display);font-weight:500;font-size:28px}
.amp i{font-style:italic;color:var(--gold)}
.amp--big{font-size:40px;margin:22px 0 8px}

/* место под иллюстрацию */
.art{position:relative;margin:0 auto 6px;width:100%;max-width:260px;aspect-ratio:2/3}  /* под вывод GPT 1024х1536, чтобы не резать готовый кадр */
.art.art--photo{max-width:340px}   /* как детская шапка. Двойной класс держит ширину и на десктопе, где .art ужат до 300 */
.art--photo img{display:block;width:100%;height:100%;object-fit:cover}   /* кадр GPT уже 2 к 3, ничего не режется */
.art__frame{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--gold-dim);
  stroke-width:1;stroke-dasharray:5 5;opacity:.6}
.art__note{
  position:absolute;inset:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-style:italic;font-size:17px;line-height:1.5;
  color:var(--gold-dim);
}

/* отсчёт */
.count{display:flex;justify-content:center;gap:10px;margin-top:8px}
.count__cell{
  flex:1 1 0;max-width:110px;padding:18px 6px;
  border:1px solid var(--slate);background:var(--night-2);
}
.count__cell b{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:38px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;
}
.count__cell span{display:block;margin-top:7px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream-dim)}

/* детская шапка. Обводка, тень и растворение низа запечены в файл, CSS-фильтров нет */
.kids{padding-bottom:30px}
.kids .h2--script{margin-bottom:8px}
.kids__art{position:relative;margin:0 auto;width:100%;max-width:340px}
.kids__art img{width:100%}
.kids__label{
  position:absolute;top:1%;
  font-family:var(--font-display);font-style:italic;font-size:23px;line-height:1;color:var(--gold);
}
.kids__label--l{left:-1%;transform:rotate(-6deg)}
.kids__label--r{right:-1%;transform:rotate(5deg)}

/* фото. Полароид Эланы со своей рамкой, поэтому своей не рисуем */
.polaroid{
  margin:0 auto 22px;width:100%;max-width:320px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  transform:rotate(-1.6deg);
}
.polaroid img{width:100%}
.photo{margin:0 auto;width:100%;max-width:420px}
.photo--tall{max-width:300px;margin-top:14px}
.photo img{width:100%}   /* ч/б запечён в файлы, filter под transform Safari сбрасывает */

/* кнопка 2ГИС под картой */
.btns{display:flex;gap:10px;margin:14px 0 0}

/* карта по клику. Эталон _правила-сайтов/куки/map-click-to-load.html, редакция 24.09.2026.
   Код эталона один в один, ниже только роли цвета и размеры под эту страницу */
  #cc-embeds{
    --em-surface:var(--surface,Canvas);
    --em-text:var(--text,CanvasText);
    --em-hairline:var(--hairline,GrayText);
    --em-accent:var(--accent,CanvasText);
    --em-btn-bg:var(--em-text);
    --em-btn-text:var(--em-surface);
    --em-radius:16px;
    --em-btn-radius:12px;
  }
  #cc-embeds,#cc-embeds *{box-sizing:border-box;margin:0;padding:0}
  #cc-embeds{font-family:inherit;color:var(--em-text)}
  #cc-embeds .em-inner{max-width:1200px;margin:0 auto;padding:48px 20px;display:grid;gap:24px}
  @media (min-width:961px){#cc-embeds .em-inner{grid-template-columns:1fr 1fr}}
  @media (max-width:480px){#cc-embeds .em-inner{padding:32px 16px}}

  #cc-embeds .em{position:relative;overflow:hidden;width:100%;min-width:0;border:1px solid var(--em-hairline);
    border-radius:var(--em-radius);background:var(--em-surface)}
  #cc-embeds .em[data-em="map"]{aspect-ratio:4/3}
  #cc-embeds .em[data-em="video"]{aspect-ratio:16/9}
  /* На узком экране пропорция не вмещает подпись, поэтому высота задана. aspect-ratio вместе с min-height
     распирал карточку шире экрана, проверено на 375 px */
  @media (max-width:640px){#cc-embeds .em[data-em]{aspect-ratio:auto;height:340px}}
  #cc-embeds .em-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  #cc-embeds .em-cover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:16px}
  #cc-embeds .em-card{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:360px;padding:20px;
    text-align:center;background:var(--em-surface);border-radius:var(--em-radius)}
  #cc-embeds .em-icon{display:block;color:var(--em-text)}
  #cc-embeds .em-btn{font-family:inherit;font-size:15px;font-weight:600;line-height:1.2;min-height:44px;padding:12px 24px;
    border:1px solid var(--em-btn-bg);border-radius:var(--em-btn-radius);background:var(--em-btn-bg);color:var(--em-btn-text);
    cursor:pointer;transition:opacity .15s ease}
  #cc-embeds .em-btn:hover{opacity:.86}
  #cc-embeds .em-btn:disabled{cursor:progress;opacity:.76}
  #cc-embeds .em-btn:focus-visible,#cc-embeds .em-a:focus-visible{outline:2px solid var(--em-accent);outline-offset:2px}
  #cc-embeds .em-note{font-size:13px;line-height:1.5;color:var(--em-text)}
  #cc-embeds .em-a{font-size:13px;line-height:1.5;color:var(--em-text);text-decoration:underline;text-underline-offset:3px}
  #cc-embeds .em-frame{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0}
  #cc-embeds .em.is-ready .em-cover,#cc-embeds .em.is-ready .em-poster{display:none}
/* подгонка эталона под страницу */
#cc-embeds{
  --surface:var(--night-2);--text:var(--cream);--hairline:var(--slate);--accent:var(--gold);
  --em-btn-bg:var(--gold);--em-btn-text:var(--night);
  --em-radius:2px;--em-btn-radius:2px;
  margin-top:22px;
}
#cc-embeds .em-inner{padding:0;max-width:none;grid-template-columns:1fr}
#cc-embeds .em-btn{font-weight:500;letter-spacing:.06em}

/* дресс-код */
.swatches{display:flex;gap:10px;justify-content:center;margin-top:20px}
.swatches i{width:38px;height:38px;border-radius:50%;border:1px solid rgba(236,227,214,.14)}
.swatches i:nth-child(1){background:var(--night-2)}
.swatches i:nth-child(2){background:var(--slate)}
.swatches i:nth-child(3){background:var(--gold-dim)}
.swatches i:nth-child(4){background:var(--cream)}

/* ============================================================
   ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.is-visible{opacity:1;transform:none;transition:opacity .9s ease,transform .9s ease}

/* ============================================================
   ЧЕРНОВИК. Снять класс is-draft с body перед показом заказчице
   ============================================================ */
.is-draft [data-todo]{outline:1px dashed rgba(194,161,114,.34);outline-offset:6px}
.is-draft [data-todo]::before{
  content:attr(data-todo);
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  z-index:3;white-space:nowrap;
  padding:3px 9px;border-radius:2px;
  background:var(--gold);color:var(--night);
  font-size:10px;letter-spacing:.06em;text-transform:none;font-weight:500;
}

/* ============================================================
   ДЕСКТОП И ДОСТУПНОСТЬ
   ============================================================ */
@media (min-width:768px){
  .envelope__names{font-size:48px}
  .titles__line--1{font-size:62px}
  .titles__line--4{font-size:22px}
  .sec{padding:92px var(--pad)}
  .h2{font-size:36px}
  .date-big{font-size:42px}
  .amp--big{font-size:52px}
  .art{max-width:300px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1;transform:none}
  .titles__line,.titles__hint{opacity:1}
}