/* ---------- fonts ----------
     Benzin, два начертания, subset: латиница + кириллица.                            */
  @font-face {
    font-family: 'Benzin';
    src: url("fonts/Benzin-Regular.woff2") format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: 'Benzin';
    src: url("fonts/Benzin-Medium.woff2") format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
  }

  :root {
    --font: "Benzin", "Helvetica Neue", Arial, sans-serif;
    --ink: #111;
    --ink-slate: #34464f;

    /* трекинг под Benzin                                              */
    --ls-date: -0.02em;
    --ls-lead: 0.053em;
    --ls-cta:  -0.02em;
    --ls-dress-title: 0em;
    --ls-dress-note:  0em;
    --ls-wish-title: 0.007em;
    --ls-wish-lead:  0.068em;
    --ls-wish-sub:   0em;
    --ls-rsvp:       0em;
    --ls-rsvp-row:   0.02em;
  }

  html, body { margin: 0; padding: 0; background: #f6f5f3; }
  body { font-family: var(--font); color: var(--ink); }

  .stack {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .stack__img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ---------- invite: photo + text ---------- */
  .invite { position: relative; width: 100%; }
  .invite__photo { display: block; width: 100%; height: auto; }

  .invite__copy {
    position: absolute;
    inset: 0;
    text-align: center;
  }
  .invite__date,
  .invite__lead,
  .invite__place,
  .invite__cta {
    position: absolute;
    left: 72.75%;
    transform: translateX(-50%);
    width: max-content;
    margin: 0;
    white-space: nowrap;
  }

  .invite__date {
    top: 10.72%;
    font-size: 4.503vw;
    font-weight: 400;
    letter-spacing: var(--ls-date);
    line-height: 1;
    text-transform: uppercase;
  }
  /* компенсируем трекинг справа, чтобы строка осталась оптически по центру */
  .invite__date { text-indent: var(--ls-date); }

  .invite__lead {
    top: 22.67%;
    font-size: 1.778vw;
    font-weight: 400;
    letter-spacing: var(--ls-lead);
    line-height: 1.481;
    text-indent: var(--ls-lead);
  }

  /* место и время — той же типографикой, что и лид, сразу под ним */
  .invite__place {
    top: 45.20%;
    font-size: 1.778vw;
    font-weight: 400;
    letter-spacing: var(--ls-lead);
    line-height: 1.481;
    text-indent: var(--ls-lead);
  }
  .invite__place a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity .25s ease;
  }
  .invite__place a:hover { opacity: .55; }

  .invite__cta {
    top: 58.40%;
    font-size: 2.633vw;
    font-weight: 400;
    letter-spacing: var(--ls-cta);
    line-height: 1.158;
    text-transform: uppercase;
    text-indent: var(--ls-cta);
    color: inherit;
    text-decoration: none;
    display: block;
    transition: opacity .25s ease;
  }
  .invite__cta:hover { opacity: .55; }

  /* ---------- dress code strip ---------- */
  .dress { position: relative; width: 100%; }
  .dress__bg { display: block; width: 100%; height: auto; }

  .dress__title,
  .dress__note {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    margin: 0;
    white-space: nowrap;
    color: #f6f5f3;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1;
  }
  .dress__title {
    top: 29.82%;
    font-size: 5.196vw;
    letter-spacing: var(--ls-dress-title);
    text-indent: var(--ls-dress-title);
  }
  .dress__note {
    top: 64.46%;
    font-size: 1.444vw;
    font-weight: 500;
    letter-spacing: var(--ls-dress-note);
    text-indent: var(--ls-dress-note);
  }

  /* ---------- photo grid (dress code) ---------- */
  .photogrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
  }
  .photogrid .cell {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
  }
  .photogrid .cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ---------- torn-paper section ---------- */
  .torn {
    position: relative;
    width: 100%;
    /* pulls the transparent part of the torn edge over the previous block.
       320 / 1920 = 16.6667% of the container width */
    margin-top: -16.6667%;
    z-index: 2;
  }
  .torn__edge {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    pointer-events: none;
  }
  .torn__body {
    position: relative;
    width: 100%;
    margin-top: -1px; /* kills the sub-pixel seam between PNG and JPEG */
  }
  .torn__photo {
    display: block;
    width: 100%;
    height: auto;
  }

  /* text well sitting on the grey left half */
  .torn__copy {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    color: var(--ink-slate);
  }
  .wish__title,
  .wish__lead,
  .wish__sub {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    margin: 0;
    white-space: nowrap;
    text-align: center;
    font-weight: 400;
  }
  .wish__title {
    top: 15.60vw;
    font-size: 4.402vw;
    line-height: 1;
    letter-spacing: var(--ls-wish-title);
    text-indent: var(--ls-wish-title);
    text-transform: uppercase;
  }
  .wish__lead {
    top: 26.39vw;
    font-size: 1.757vw;
    line-height: 1.483;
    letter-spacing: var(--ls-wish-lead);
    text-indent: var(--ls-wish-lead);
  }
  /* «Сертификаты» и «Подарки» — одинаковые ссылки, разная высота */
  .wish__sub {
    font-size: 2.800vw;
    line-height: 1;
    letter-spacing: var(--ls-wish-sub);
    text-indent: var(--ls-wish-sub);
    text-transform: uppercase;
    display: block;
    color: inherit;
    text-decoration: none;
    transition: opacity .25s ease;
  }
  .wish__sub:hover { opacity: .55; }
  .wish__sub--certificates { top: 42.81vw; }
  .wish__sub--gifts        { top: 51.39vw; }

  /* кнопки открытия попапов — визуально это те же надписи, что и были */
  button.wish__sub,
  button.invite__cta {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-weight: 400;
    cursor: pointer;
  }
  button.invite__cta { text-align: center; }

  /* ---------- попапы: сертификаты и подарки ---------- */
  .modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    box-sizing: border-box;
    background: rgba(24, 32, 36, .55);
  }
  .modal[open],
  .modal.is-open { display: flex; }

  .modal__box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 760px;
    max-height: 92vh;
    /* на iOS 100vh — это высота БЕЗ учёта панелей Safari, поэтому низ попапа
       уезжает под нижнюю панель. dvh считает по реально видимой области;
       строка выше остаётся запасным вариантом для старых браузеров        */
    max-height: 92dvh;
    box-sizing: border-box;
    /* тот же серый, что на левой половине блока Wishlist */
    background: #bdbec3;
    color: var(--ink-slate);
    padding: 44px 48px 40px;
  }
  .modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    transition: opacity .25s ease;
  }
  .modal__close:hover { opacity: .55; }
  .modal__close::before,
  .modal__close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 1px;
    background: currentColor;
  }
  .modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .modal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

  .modal__title {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: var(--ls-wish-sub);
  }
  .modal__lead {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.55;
    text-align: center;
    opacity: .8;
  }

  /* прокручивается только содержимое, заголовок и крестик остаются на месте */
  .modal__scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: 0 -48px;
    padding: 0 48px;
  }

  .modal__list { margin: 0; padding: 0; list-style: none; }
  .modal__item {
    padding: 14px 0;
    border-top: 1px solid rgba(52, 70, 79, .28);
  }
  .modal__item:last-child { border-bottom: 1px solid rgba(52, 70, 79, .28); }
  .modal__name {
    font-size: 17px;
    line-height: 1.35;
  }
  .modal__name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity .25s ease;
  }
  .modal__name a:hover { opacity: .55; }
  .modal__meta {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.5;
    opacity: .72;
  }
  .modal__meta a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
  }

  /* ---------- позиция подарка: превью + описание + бронь ---------- */
  .gift {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 0;
  }
  /* слот под фото. Картинку подставляет админка — пока её нет, остаётся
     ровный прямоугольник того же тона, чтобы сетка не прыгала             */
  .gift__thumb {
    flex: none;
    width: 104px;
    height: 104px;
    background: rgba(52, 70, 79, .1);
    overflow: hidden;
  }
  .gift__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .gift__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .gift__name {
    font-size: 17px;
    line-height: 1.35;
  }
  .gift__note {
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.5;
    opacity: .72;
  }
  .gift__example {
    margin-top: 5px;
    font-size: 14px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    opacity: .72;
    transition: opacity .25s ease;
  }
  .gift__example:hover { opacity: 1; }

  .gift__book {
    margin-top: 12px;
    min-height: 40px;
    padding: 0 18px;
    box-sizing: border-box;
    background: none;
    border: 1px solid var(--ink-slate);
    color: inherit;
    font: inherit;
    font-size: 14px;
    line-height: 38px;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, opacity .25s ease;
  }
  .gift__book:hover { background: var(--ink-slate); color: #bdbec3; }

  /* забронированный подарок: кнопка гаснет и перестаёт нажиматься */
  .gift.is-booked { opacity: .55; }
  .gift.is-booked .gift__book {
    border-color: transparent;
    padding-left: 0;
    cursor: default;
    pointer-events: none;
  }
  .gift.is-booked .gift__book:hover { background: none; color: inherit; }

  /* шаг подтверждения брони: раскрывается на месте кнопки, в той же строке
     подарка — чтобы было видно, что именно бронируешь                       */
  .gift__confirm { display: none; width: 100%; margin-top: 12px; }
  .gift.is-booking .gift__book { display: none; }
  .gift.is-booking .gift__confirm { display: block; }

  .gift__confirm label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .gift__confirm .form__input { font-size: 16px; padding: 4px 0; }
  .gift__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
  }
  .gift__cancel {
    min-height: 40px;
    padding: 0 4px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
    cursor: pointer;
    transition: opacity .25s ease;
  }
  .gift__cancel:hover { opacity: 1; }
  .gift__error {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #7d2b22;
  }
  .gift__error:empty { margin: 0; }

  /* ---------- форма подтверждения присутствия ---------- */
  .form__field { margin-bottom: 26px; }
  .form__label {
    display: block;
    margin-bottom: 9px;
    font-size: 13px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .form__hint {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    opacity: .7;
  }
  .form__input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(52, 70, 79, .42);
    border-radius: 0;
    color: inherit;
    font: inherit;
    font-size: 16px; /* меньше 16px — iOS зумит страницу при фокусе */
    line-height: 1.4;
    transition: border-color .25s ease;
  }
  .form__input:focus {
    outline: none;
    border-bottom-color: var(--ink-slate);
  }
  textarea.form__input { resize: vertical; min-height: 62px; }

  /* «да / нет» — две кнопки-переключателя вместо системных радио */
  .form__choices { display: flex; gap: 10px; }
  .form__choice { position: relative; }
  .form__choice input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
  }
  .form__choice span {
    display: block;
    min-width: 84px;
    min-height: 44px;
    padding: 0 20px;
    box-sizing: border-box;
    border: 1px solid rgba(52, 70, 79, .42);
    font-size: 14px;
    line-height: 42px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .form__choice input:checked + span {
    background: var(--ink-slate);
    border-color: var(--ink-slate);
    color: #bdbec3;
  }
  .form__choice input:focus-visible + span { border-color: var(--ink-slate); }

  /* ловушка для ботов: человек её не видит и не заполняет */
  .form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .form__submit {
    min-height: 46px;
    padding: 0 28px;
    background: var(--ink-slate);
    border: 1px solid var(--ink-slate);
    color: #bdbec3;
    font: inherit;
    font-size: 14px;
    line-height: 44px;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: opacity .25s ease;
  }
  .form__submit:hover { opacity: .8; }
  .form__submit[disabled] { opacity: .5; cursor: default; }

  .form__note {
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 1.5;
    opacity: .72;
  }
  .form__note a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

  /* сообщения после отправки */
  .form__message {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
  }
  .form__message:empty { margin-top: 0; }
  .form__message--error { color: #7d2b22; }

  /* экран «спасибо» вместо формы */
  .form__done { display: none; text-align: center; padding: 12px 0 4px; }
  .form.is-sent .form__body { display: none; }
  .form.is-sent .form__done { display: block; }
  .form__done p { margin: 0; font-size: 16px; line-height: 1.5; }

  @media (max-width: 600px) {
    .modal { padding: 0; }
    .modal__box {
      max-width: none;
      max-height: 100vh;
      max-height: 100dvh;
      height: 100%;
      padding: 40px 20px 28px;
    }
    .modal__scroll { margin: 0 -20px; padding: 0 20px; }
    .modal__title { font-size: 24px; }
    .modal__lead  { font-size: 14px; margin-bottom: 20px; }
    .modal__name  { font-size: 16px; }
    .modal__meta  { font-size: 13px; }

    .gift { gap: 14px; padding: 16px 0; }
    .gift__thumb { width: 76px; height: 76px; }
    .gift__name { font-size: 16px; }
    .gift__note, .gift__example { font-size: 13px; }

    .form__field { margin-bottom: 22px; }
    /* на всю ширину растягиваем только большую кнопку формы RSVP —
       в строке подарка кнопки стоят парой и должны остаться рядом */
    #rsvp-form .form__submit { width: 100%; }
    /* рядом с фото на строку остаётся ~260px — ужимаем кнопку,
       чтобы «Подтвердить» и «Отмена» помещались в одну строку */
    .gift__confirm .form__submit {
      padding: 0 12px;
      font-size: 13px;
      letter-spacing: .04em;
    }
  }

  /* блокировка прокрутки страницы, пока открыт попап */
  body.is-locked { overflow: hidden; }

  /* ---------- split section: photo | black panel ---------- */
  .split {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .split__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .split__panel {
    position: relative;
    background-color: #232122;
    background-image: url("img/black-noise.jpg");
    background-image: image-set(url("img/black-noise.webp") type("image/webp"),
                                url("img/black-noise.jpg") type("image/jpeg"));
    background-size: 480px 480px;
    background-repeat: repeat;
  }
  .split__copy {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: 8% 4.2%;
    color: #f6f5f3;
  }

  .rsvp__title {
    margin: 0 0 4.5%;
    font-size: 4.885vw;
    font-weight: 400;
    line-height: 1;
    letter-spacing: var(--ls-rsvp);
    text-indent: var(--ls-rsvp);
    text-align: center;
    text-transform: uppercase;
  }

  /* пояснение под заголовком INFO — кегль ровно такой же, как у абзаца
     про книги в блоке Wishlist, чтобы два пояснительных текста на странице
     читались одинаково                                                    */
  .rsvp__note {
    margin: 0 0 8.7%;
    font-size: 1.757vw;
    line-height: 1.483;
    letter-spacing: var(--ls-rsvp-row);
    text-align: center;
  }

  .rsvp__item { border-top: 1px solid rgba(246, 245, 243, .38); }
  .rsvp__item:last-of-type { border-bottom: 1px solid rgba(246, 245, 243, .38); }

  .rsvp__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 3.5% 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-size: 2.935vw;
    line-height: 1;
    letter-spacing: var(--ls-rsvp-row);
    cursor: pointer;
    text-align: left;
    min-height: 44px; /* размер тап-таргета на телефоне, на десктопе и так больше */
    box-sizing: border-box;
  }
  .rsvp__plus {
    position: relative;
    width: .62em;
    height: .62em;
    flex: none;
  }
  .rsvp__plus::before,
  .rsvp__plus::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform .3s ease, opacity .3s ease;
  }
  .rsvp__plus::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
  .rsvp__plus::after  { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
  .rsvp__item[open] .rsvp__plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

  /* содержимое аккордеона */
  .rsvp__item summary { list-style: none; }
  .rsvp__item summary::-webkit-details-marker { display: none; }
  .rsvp__panel {
    padding: 0 0 4%;
    font-size: 1.9vw;
    line-height: 1.6;
    letter-spacing: var(--ls-rsvp-row);
  }
  .rsvp__panel a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(246,245,243,.35); }

  /* логотип агентства прижат к низу панели */
  .rsvp__logo {
    position: absolute;
    left: 50%;
    bottom: 3vw;
    transform: translateX(-50%);
    display: block;
    width: 28.9%;
    height: auto;
  }

  @media (max-width: 640px) {
    .split__copy { padding: 8% 7%; }
  }

  /* ---------- узкие экраны ----------
     Композиция целиком задана в vw: кегли, координаты текста и высоты блоков —
     доли ширины экрана. Поэтому на любом экране страница выглядит одинаково,
     просто в другом масштабе: строки не переносятся и не обрезаются, мудборд
     дресс-кода везде 4×2. Минимальные кегли (clamp) здесь пробовали — они
     ломают масштаб: строка под «DRESS CODE» перестаёт помещаться и обрезается
     по краям. Не возвращать.

     Единственное исключение ниже. Строка под «DRESS CODE» — самая длинная на
     странице, и на телефоне её кегль падает примерно до 5px. На таких размерах
     ширина глифов округляется браузером до целого пикселя, и накопленная на 79
     символах ошибка доходит до 60px — строка перестаёт масштабироваться линейно
     и на отдельных ширинах (например ровно 390px) вылезает за экран, хотя на
     360 и 430 помещается. Поэтому только на узких экранах берём кегль с запасом
     ~10%: на глаз при 5px разницы нет, а от округления уводит гарантированно.  */
  @media (max-width: 520px) {
    .dress__note { font-size: 1.30vw; }
  }