/* ============================================================
   Мастер-шаблон пригласительного сайта · тема «Эдиториал» v2
   Швейцарская/журнальная типографика: холодная нейтральная
   палитра, 5-колоночная сетка с тремя силовыми линиями,
   крупные заголовки, линейки-разделители, фото во всю ширину
   с полями 10px. Палитра и шрифты — в секции «ТОКЕНЫ ТЕМЫ».

   СЕТКА (≥900px): 5 колонок, три вертикальные оси текста —
     ось A — левое поле (--wrap-pad): рубрикаторы, заголовки,
             время таймлайна, номера пожеланий, дисплей;
     ось B — начало колонки 3: читальная колонка — лиды,
             абзацы, FAQ, форма RSVP, примечания;
     ось C — начало колонки 5: маргиналии — подписи к фото,
             вторые колонки локации и контактов.
   На мобильном сетка складывается в одну колонку.
   ============================================================ */

/* ---------- ТОКЕНЫ ТЕМЫ ---------- */
:root {
  /* ПАЛИТРА — роли, не оттенки:
       ink   — весь текст и капс-ярлыки
       muted — вторичный текст (примечания, подписи, ответы FAQ)
       line  — линейки
       steel — номера, амперсанд, интеракции (ховер, фокус)
     на чёрной панели RSVP — ровно два уровня бумаги: текст и линия */
  --c-paper: #F6F6F4;      /* фон, холодная бумага */
  --c-ink: #131313;        /* почти чёрный */
  --c-muted: #6F6F69;      /* вторичный текст */
  --c-line: #D8D8D2;       /* линейки */
  --c-steel: #6B7D8F;      /* акцент — стальной (эхо «пыльно-голубого» из дресс-кода) */
  --c-error: #E9A794;      /* ошибки на тёмной панели RSVP */
  --c-paper-muted: rgba(246, 246, 244, 0.7);   /* вторичный текст на чернильном */
  --c-paper-line: rgba(246, 246, 244, 0.35);   /* линейки и границы на чернильном */
  --c-line-soft: rgba(19, 19, 19, 0.1);        /* линейки поверх фона обложки и в шапке */
  --c-bar: #FFFFFF;                             /* фон шапки после прокрутки — белый */

  /* типографика (макет v3, 20.09.2026): антиква — Tenor Sans, гротеск — Manrope */
  --font-display: 'Tenor Sans', 'Trebuchet MS', sans-serif;
  --font-text: 'Manrope', system-ui, -apple-system, sans-serif;

  /* ТИПОГРАФСКАЯ ШКАЛА — роли (значения на 1440px / 375px):
       names   100 / 36  Tenor капсом — имена на обложке (& — 80 % кегля)
       display 184       Tenor — имена в футере («задняя обложка»)
       title    70 / 37  Tenor капсом — заголовки рубрик, числа отсчёта
       accent  ~35       Tenor — время таймлайна, имена контактов
       lead    ~30       Tenor — лиды, дата на обложке, подпись пары
                                 (отдельного стиля подписи больше нет — это lead)
       body   16.5       Manrope 300 — весь текст, события, поля, тост; FAQ — 600
       meta     12       Manrope — ярлыки капсом и кнопки (400), номера (600),
                                   подписи к фото */
  --t-names: clamp(2.25rem, 6.95vw, 6.25rem);
  --t-display: clamp(3.2rem, 16.5vw, 11.5rem);
  --t-title: clamp(2.3rem, 4.86vw, 4.375rem);
  --t-accent: clamp(1.4rem, 2.6vw, 2.2rem);
  --t-lead: clamp(1.3rem, 2.4vw, 1.85rem);
  --fs-meta: 12px;         /* ТОЛЬКО украшение: ярлыки рубрик, номера, подписи к фото */
  --fs-note: 14px;         /* смысл мелким кеглем: сноски со временем, подписи полей,
                              ошибки формы, дата и адрес в футере.
                              Ф7: ниже 14px смысловую информацию не набираем —
                              гостям 60+ 12px строчными вторичным цветом уже не читаются */
  --fs-seating: 18px;      /* строки рассадки — крупнее body: гость ищет себя
                              с телефона стоя в холле */

  /* насыщенность: у Tenor Sans одно начертание (400) — жирный ей не назначать */
  --fw-body: 300;          /* текст — Manrope Light, как в макете */
  --fw-caps: 400;          /* ярлыки капсом и кнопки */
  --fw-strong: 600;        /* номера, вопросы FAQ, выделение в тексте */

  /* высоты строк: по одной на регистр (как в текстовых стилях Figma) */
  --lh-display: 1.05;
  --lh-lead: 1.35;
  --lh-body: 1.7;
  --lh-caps: 1.17;         /* ярлыки капсом, кнопки, номера рубрик — строка 14 px, как в макете */
  --lh-accent: normal;     /* роль accent (Tenor): «авто» из шрифта, как в макете */

  /* трекинги */
  --ls-tight: -0.01em;     /* имена в футере */
  --ls-title: -0.05em;     /* заголовки и имена на обложке — капс Tenor */
  --ls-lead: -0.02em;      /* лид, дата на обложке, подпись */
  --ls-caps: 0.18em;       /* все uppercase-ярлыки */
  --ls-num: 0.08em;        /* номера рубрик и списков */

  /* ритм и поля */
  --gutter: 10px;                                /* поля фото и панелей от краёв экрана */
  --wrap-pad: clamp(16px, 4vw, 56px);            /* поля текстовых колонок */
  --topbar-h: 64px;                              /* высота фиксированной шапки */
  --cta-bar-gap: 12px;                           /* плавающая кнопка внизу окна: отступ от краёв экрана */
  --cta-bar-h: 58px;                             /* она же с отступом снизу: 16 + 14 + 16 + 12 */
  --gap: 16px;                                   /* межколонник 5-колоночной сетки — как в макете:
                                                    оси B и C встают на 537 и 1073 при 1440 */

  /* ШКАЛА ОТСТУПОВ — 7 ступеней с шагом ~1.5–2×:
       sp-1   8       микро: ярлык→поле, роль→имя, зазор радио
       sp-2  16       внутригрупповые зазоры, gap строк и свотчей
       sp-3  24       паддинги строк таблиц, обложечных полос, карточек
       sp-4  32       между крупными элементами внутри блока
       sp-5  40→72    флюид: после рубрикатора и h2, поля вокруг списков
       sp-6  72→128   флюид: вертикаль чёрной панели RSVP
       section 96→176 флюид: пауза между рубриками */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: clamp(40px, 5vw, 72px);
  --sp-6: clamp(72px, 9vw, 128px);
  --section-pad: clamp(96px, 13vw, 176px);
  --seating-row-pad: 6px;  /* вне шкалы осознанно: строка рассадки — плотнее sp-1,
                              чтобы список на 150 имён оставался коротким */

  /* отступы до осей B и C от левого края контентного поля:
     100% берётся от ширины контейнера в точке применения */
  --off-b: calc(2 * ((100% - 4 * var(--gap)) / 5) + 2 * var(--gap));
  --off-c: calc(4 * ((100% - 4 * var(--gap)) / 5) + 4 * var(--gap));
}

/* ---------- БАЗА ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--sp-2)); /* якоря не ныряют под шапку */
}

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: 16.5px;
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  /* текст пары: слово, которое не влезает в строку (длинное имя, «Достопримечательности»
     крупными заглавными), переносится, а не раздвигает страницу вбок. Обычный текст это
     не трогает — правило срабатывает только у слова шире строки (проверено на демо: 0 сдвигов) */
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* счётчик номеров рубрик — см. .sec-head__num::before */
  counter-reset: sec-num;
}

/* Каждая секция и футер увеличивают счётчик рубрик на единицу.
   Обложка (header.cover) номера не имеет и счётчик не трогает. */
.section,
.footer {
  counter-increment: sec-num;
}

/* height: auto обязателен: у картинок есть атрибуты width/height (против скачка
   вёрстки, Ф6), и без него высота берётся из атрибута — фото растягивается */
img { display: block; max-width: 100%; height: auto; }

/* <picture> — только контейнер для выбора формата (webp с jpg-фолбэком, Ф6).
   display: contents убирает его собственный бокс, поэтому вся вёрстка
   вокруг картинок продолжает работать так, будто <img> лежит напрямую. */
picture { display: contents; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--c-ink); color: var(--c-paper); }

:focus-visible {
  outline: 2px solid var(--c-steel);
  outline-offset: 3px;
}

.wrap { padding-inline: var(--wrap-pad); }

.section { padding-block: calc(var(--section-pad) / 2); }
.section + .section { padding-top: calc(var(--section-pad) / 2); }
main > .section:first-child { padding-top: var(--section-pad); }

/* ---------- ШАПКА РУБРИКИ: номер — линейка — ярлык ---------- */
.sec-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

/* порядок: ярлык слева — линейка — номер справа */
.sec-head__label {
  order: 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  font-weight: var(--fw-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.sec-head__rule {
  order: 1;
  flex: 1;
  height: 1px;
  background: var(--c-line);
  transform-origin: left center;
}

.sec-head__num {
  order: 2;
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  font-weight: var(--fw-strong);
  letter-spacing: var(--ls-num);
  color: var(--c-steel);
  font-variant-numeric: tabular-nums;
}

/* Номер рубрики НЕ вписан в разметку — считается на лету.
   Зачем: блоки включаются галочкой, и выключенный блок не должен
   оставлять дыру в нумерации (01, 02, 04...). Считает браузер.
   Важно: секция, скрытая через display:none, счётчик не увеличивает —
   это ровно то поведение, которое нужно. Футер продолжает ту же
   последовательность и всегда получает последний номер. */
.sec-head__num::before {
  content: counter(sec-num, decimal-leading-zero);
}

.sec-head--invert .sec-head__rule { background: var(--c-paper-line); }
.sec-head--invert .sec-head__num { color: var(--c-steel); }

/* ---------- ТИПОГРАФИКА ---------- */
/* заголовок рубрики — роль title: Tenor капсом на всю ширину колонок
   (в приглашении это может быть целая фраза) */
.h2 {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-title);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  text-wrap: balance;
}

.h3 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  font-weight: var(--fw-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* лид и подпись пары — одна роль lead (отдельный стиль подписи в макете v3 упразднён) */
.lead,
.sign {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
}
.lead { margin-bottom: 1.2em; }
.sign { margin-top: var(--sp-5); }

.aside-note {
  margin-top: var(--sp-5);
  max-width: 54ch;
  font-size: var(--fs-note);   /* Ф7: содержит время сбора — это смысл, не украшение */
  color: var(--c-muted);
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-2);
}

/* читальная колонка: текст на оси B (колонки 3–5) */
.sec-grid { display: grid; }
.sec-grid__main { max-width: 62ch; }

@media (min-width: 900px) {
  .sec-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .sec-grid__main { grid-column: 3 / 6; max-width: none; }
  .sec-grid__main p { max-width: 62ch; }
  .sec-grid__main .lead { max-width: none; } /* лид дышит на всю ширину B..5 */

  /* одиночные элементы, посаженные на ось B */
  .aside-note { margin-left: var(--off-b); }
}

/* появление слов (спаны создаёт JS) */
[data-words] .w { display: inline-block; }

/* ---------- КНОПКИ И ССЫЛКИ ---------- */
.btn {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-ink);
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  font-weight: var(--fw-caps);
  line-height: var(--lh-caps);   /* кнопка ≈ 46 px, в шапке ≈ 30 — как в макете */
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { background: var(--c-ink); color: var(--c-paper); }

.btn--solid { background: var(--c-ink); color: var(--c-paper); }
.btn--solid:hover { background: var(--c-steel); border-color: var(--c-steel); }

.btn--paper { background: var(--c-paper); border-color: var(--c-paper); color: var(--c-ink); }
.btn--paper:hover { background: transparent; color: var(--c-paper); }

.link-ext {
  display: inline-block;
  margin-right: var(--sp-3);
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  font-weight: var(--fw-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
}
.link-ext:hover { color: var(--c-steel); }

/* ---------- ФОТО ВО ВСЮ ШИРИНУ (поля 10px) ---------- */
.photo {
  margin: 0;
  padding-inline: var(--gutter);
}

/* фото и списки после текста рубрики — через sp-5, как в макете
   (без этого фото «Истории» и список «Пожеланий» прилипали к последнему абзацу) */
.wrap + .photo,
.sec-grid + .index-list,
.sec-grid + .timetable { margin-top: var(--sp-5); }

.photo__frame {
  overflow: hidden;
  /* стартовое сужение до 70% задаёт JS (клип по горизонтали);
     без JS фото сразу на всю ширину */
}

.photo__frame img {
  width: 100%;
  /* фото во всю ширину — одной высоты, 3:2, как в макете (355×237 на телефоне):
     снимки пары бывают любых пропорций, лишнее срезается по краям, центр остаётся */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.02); /* холоднее и графичнее */
}
/* на телефоне фото выше — 4:5 (решение Yan 04.10.2026) */
@media (max-width: 719px) {
  .photo__frame img { aspect-ratio: 4 / 5; }
}

/* подпись — маргиналия на оси C; компенсация --gutter выравнивает
   контентное поле подписи с полем .wrap */
.photo__caption {
  padding: var(--sp-2) calc(var(--wrap-pad) - var(--gutter)) 0;
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  color: var(--c-muted);
}
.photo__caption-text::before { content: "— "; color: var(--c-steel); }

@media (min-width: 900px) {
  .photo__caption {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .photo__caption-text {
    grid-column: 5 / 6;
    hyphens: auto;
  }
}

/* ============================================================
   ШАПКА (TOPBAR) — фиксирована: подпись — линейка — дата — кнопка RSVP.
   На телефоне кнопки в шапке нет: она полосой внизу окна (.cta-bar).
   Над обложкой прозрачная; белой становится, как только страницу прокрутили
   (класс is-scrolled ставит main.js). Прозрачность включает класс js на <html>
   из скрипта в <head>: без JavaScript шапка просто белая и всегда читается.
   ============================================================ */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--topbar-h);
  background: var(--c-bar);
  border-bottom: 1px solid var(--c-line-soft);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
/* Браузеры с полупрозрачными панелями (Telegram и Safari на iOS 26) прокручивают страницу
   и под своими панелями, а закреплённое ставят у края видимой области — между шапкой
   и краем экрана просвечивал сайт. Фон шапки продолжается вверх, под панель браузера;
   в обычном браузере это продолжение за краем экрана и не видно. */
.topbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;
  background: inherit;
  pointer-events: none;
}
.js .topbar:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 100%;
}

.topbar__item {
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  font-weight: var(--fw-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar__rule { flex: 1; min-width: var(--sp-3); height: 1px; background: var(--c-line-soft); }

/* подпись до свадьбы: на широком экране — надпись пары, на телефоне — «Свадьба» */
.topbar__short { display: none; }

/* компактная кнопка внутри шапки; от даты — 32 px, как в макете */
.topbar .btn { padding: var(--sp-1) var(--sp-3); margin-left: var(--sp-2); }

/* блок, к которому прокрутила кнопка, получает фокус (main.js) — рамку фокуса у него не рисуем */
.section[tabindex="-1"]:focus { outline: none; }

/* узкие экраны: подпись — линейка — дата, кнопка уходит вниз окна (.cta-bar);
   до свадьбы подпись короткая — «Свадьба».
   Линейка сжимается до нуля; длинная подпись обрезается многоточием, дата — никогда */
@media (max-width: 719px) {
  .topbar .btn { display: none; }
  .topbar__wide { display: none; }
  .topbar__short { display: inline; }
  .topbar__rule { min-width: 0; }
  .topbar__item:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- КНОПКА ВНИЗУ ОКНА (телефон) ----------
   Та же кнопка, что в шапке: плавающая, с отступом 12 px от краёв экрана, углы острые.
   Не полосой у края: в Telegram на iPhone нижняя панель браузера отодвигает
   закреплённое вверх, а рисовать под панелью не даёт — у полосы снизу была дыра.
   Уезжает вниз, пока на экране блок, куда она ведёт (класс is-hidden ставит main.js).
   Под неё у страницы запас снизу — футер она не закрывает. */
.cta-bar { display: none; }

@media (max-width: 719px) {
  .cta-bar {
    display: block;
    position: fixed;
    inset: auto var(--cta-bar-gap) var(--cta-bar-gap) var(--cta-bar-gap);
    z-index: 40;
    padding: var(--sp-2) var(--sp-3);
    border: 0;                 /* рамка добавила бы 2 px к высоте 46 */
    text-align: center;
    /* надпись пары не шире экрана: длинная обрезается многоточием, а не раздвигает страницу
       (закреплённая кнопка шире окна растягивала всю страницу вбок; лимит поля — 22 знака) */
    max-width: calc(100vw - 2 * var(--cta-bar-gap));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(19, 19, 19, 0.18); /* отделяет от фото под ней; углы острые */
    transition: transform 0.3s ease, visibility 0s;
  }
  .cta-bar.is-hidden {
    transform: translateY(calc(100% + var(--cta-bar-gap)));
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s 0.3s;
  }
  body:has(.cta-bar) { padding-bottom: var(--cta-bar-h); }
  /* первый экран кончается над кнопкой: подпись обложки не уходит под неё,
     имена стоят посередине видимой части */
  .cover:has(.cta-bar) .cover__screen { min-height: calc(100svh - var(--cta-bar-h)); }
}

/* ============================================================
   БЛОК 1 · ОБЛОЖКА
   Первый экран — на всю высоту окна, поверх фона (картинка темы,
   позже её заменит видео): имена одной строкой и дата — посередине,
   подпись — внизу над линейкой. Шапка лежит поверх фона.
   Ниже первого экрана — главное фото пары.
   ============================================================ */
.cover__screen {
  position: relative;
  isolation: isolate;          /* фон уходит под текст, но не под соседние блоки */
  display: grid;
  /* верхний ряд не ниже шапки — на низком экране имена не залезут под неё;
     при обычной высоте ряды равны, и имена стоят ровно посередине экрана */
  grid-template-rows: minmax(var(--topbar-h), 1fr) auto 1fr;
  min-height: 100svh;
  background: var(--c-paper);  /* пока грузится фон */
}

.cover__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* видео (и его кадр-заставка) — во весь экран, с кадрированием */
.cover__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover__center { grid-row: 2; }
.cover__bottom { grid-row: 3; align-self: end; }

.cover__names {
  display: flex;
  flex-wrap: wrap;             /* длинные имена не входят в строку — переносятся целиком */
  justify-content: center;
  align-items: baseline;
  gap: 0 0.3em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-names);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  text-align: center;
}

/* min-width: 0 — длинное имя может переноситься внутри строки, а не растягивать её */
.cover__line { display: inline-flex; align-items: baseline; min-width: 0; max-width: 100%; }

/* амперсанд — 80 % кегля имён, того же цвета */
.cover__amp { font-size: 0.8em; }

/* телефон: имена столбиком, амперсанд — своей строкой между ними */
@media (max-width: 719px) {
  .cover__names { flex-direction: column; align-items: center; gap: 0; }
}

/* дата — роль lead; в день свадьбы здесь «Сегодня» */
.cover__date {
  margin: 1.2em 0 0;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  text-align: center;
}

.cover__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-line-soft);
  padding-block: var(--sp-3);
}

.cover__sub {
  margin: 0;
  max-width: 36ch; /* кегль — базовый body */
}

/* ============================================================
   БЛОК 3 · ОБРАТНЫЙ ОТСЧЁТ
   ============================================================ */
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--c-line);
}

.countdown__cell {
  display: flex;
  flex-direction: column;
  padding: var(--sp-3) var(--sp-2) var(--sp-3) 0;
}

/* сетка линеек: мобильно 2×2, шире — 4 в ряд */
.countdown__cell:nth-child(even) { border-left: 1px solid var(--c-line); padding-left: var(--sp-2); }
.countdown__cell:nth-child(n+3) { border-top: 1px solid var(--c-line); }

@media (min-width: 720px) {
  .countdown__grid { grid-template-columns: repeat(4, 1fr); }
  .countdown__cell { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; }
  .countdown__cell:nth-child(n+3) { border-top: 0; }
  .countdown__cell:nth-child(n+2) { border-left: 1px solid var(--c-line); padding-left: var(--sp-3); }
}

.countdown__num {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-title);
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  font-weight: var(--fw-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.countdown__note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-meta);
  color: var(--c-muted);
}

.countdown__today {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
}

/* ============================================================
   БЛОК 5 · ПРОГРАММА ДНЯ — журнальная таблица
   Время на оси A, событие на оси B, линейка во всю полосу.
   ============================================================ */
.timetable {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timetable__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: baseline;
  gap: var(--sp-2);
  border-top: 1px solid var(--c-line);
  padding-block: var(--sp-3);
}
.timetable__row:last-child { border-bottom: 1px solid var(--c-line); }

@media (min-width: 720px) {
  .timetable__row { grid-template-columns: 160px 1fr; }
}

@media (min-width: 900px) {
  .timetable__row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .timetable__time { grid-column: 1 / 2; }
  .timetable__event { grid-column: 3 / 6; max-width: 62ch; }
}

.timetable__time {
  font-family: var(--font-display);
  font-size: var(--t-accent);
  line-height: var(--lh-accent);
  font-variant-numeric: tabular-nums;
}

/* событие — базовый body; иерархию держит крупное время в Tenor */

/* ============================================================
   БЛОК 6 · ЛОКАЦИЯ
   ============================================================ */
.location__address {
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-5);
  color: var(--c-muted);
  max-width: 48ch;
}

#location .photo { margin-bottom: var(--sp-5); }

.location__cols {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

@media (min-width: 720px) {
  .location__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}

/* ≥900px: длинный «Трансфер» — читальная колонка (ось B),
   короткое «На автомобиле» — маргиналия (ось C): высоты колонок
   выравниваются */
@media (min-width: 900px) {
  .location__address { margin-left: var(--off-b); }

  .location__cols {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: 0;
  }
  .location__col:first-child { grid-column: 5 / 6; grid-row: 1; hyphens: auto; }
  .location__col:last-child { grid-column: 3 / 5; grid-row: 1; }
}

.location__col p { max-width: 48ch; }

/* ============================================================
   БЛОК 7 · ДРЕСС-КОД — образцы-квадраты
   ============================================================ */
.swatches {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-5) 0;
  padding: 0;
}

@media (min-width: 720px) {
  .swatches { grid-template-columns: repeat(4, 1fr); }
}

.swatches__item { display: flex; flex-direction: column; gap: var(--sp-1); }

.swatches__chip {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(19, 19, 19, 0.06);
}

.swatches__name {
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  font-weight: var(--fw-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* ============================================================
   БЛОК 8 · ПОЖЕЛАНИЯ — нумерованный индекс
   Номер на оси A, текст на оси B — воздушный разрыв между ними.
   ============================================================ */
.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* та же логика, что и у рубрик: номер строки считается на лету,
     чтобы удаление любого пункта не разорвало последовательность */
  counter-reset: idx-num;
}

.index-list__row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--sp-2);
  border-top: 1px solid var(--c-line);
  padding-block: var(--sp-3);
  counter-increment: idx-num;
}
.index-list__row:last-child { border-bottom: 1px solid var(--c-line); }

@media (min-width: 900px) {
  .index-list__row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .index-list__num { grid-column: 1 / 2; }
  .index-list__row p { grid-column: 3 / 6; max-width: 62ch; }
}

.index-list__num {
  font-size: var(--fs-meta);
  font-weight: var(--fw-strong);
  color: var(--c-steel);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-num);
  padding-top: 4px;
}

.index-list__num::before {
  content: counter(idx-num, decimal-leading-zero);
}

.index-list__row p { margin: 0; }
.index-list__row strong { font-weight: var(--fw-strong); }

/* ============================================================
   БЛОК 10 · FAQ — весь список в читальной колонке (ось B)
   ============================================================ */
@media (min-width: 900px) {
  .faq__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .faq__item { grid-column: 3 / 6; }
}

.faq__item { border-top: 1px solid var(--c-line); }
.faq__item:last-of-type { border-bottom: 1px solid var(--c-line); }

.faq__item summary {
  position: relative;
  list-style: none;
  padding: var(--sp-3) 44px var(--sp-3) 0;
  font-weight: var(--fw-strong); /* кегль — базовый body, иерархию держит вес */
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--c-ink);
  transition: transform 0.3s ease;
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }

.faq__item p {
  padding: 0 0 var(--sp-3);
  max-width: 62ch;
  color: var(--c-muted);
}

/* ============================================================
   БЛОК · ГАЛЕРЕЯ (Б2)
   Сетка: на мобильном одна колонка, с 700px — две, с 1100px — три.
   Соотношение сторон фиксировано, чтобы разнокалиберные фото пары
   не разваливали ряд, а кадрирование брал на себя object-fit.
   ============================================================ */
.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 700px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gallery__item { margin: 0; }

.gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);   /* тот же тон, что у остальных фото темы */
}

.gallery__caption {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  color: var(--c-muted);
}
.gallery__caption::before { content: "— "; color: var(--c-steel); }

/* ---------- РЕКВИЗИТЫ ПОДАРКА: раскрываются по клику (С4) ----------
   Реквизиты — деликатная штука, в открытую не лежат. Механика та же,
   что у FAQ: <details>, поэтому правило «печать раскрывает все details»
   работает и здесь без единой дополнительной строки. */
.gift-details {
  margin-top: var(--sp-4);
  max-width: 48ch;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.gift-details summary {
  position: relative;
  list-style: none;
  padding: var(--sp-3) 44px var(--sp-3) 0;
  font-weight: var(--fw-strong);
  cursor: pointer;
}
.gift-details summary::-webkit-details-marker { display: none; }

.gift-details summary::before,
.gift-details summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--c-ink);
  transition: transform 0.3s ease;
}
.gift-details summary::after { transform: rotate(90deg); }
.gift-details[open] summary::after { transform: rotate(0deg); }

.gift-details__body {
  padding: 0 0 var(--sp-3);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- ВИШЛИСТ: карточки подарков, 1 → 2 → 3 колонки ----------
   Сетка та же, что у галереи; карточка открывается линейкой, как контакты.
   Выбранный подарок бледнеет, статус — капсом стальным. */
.giftlist {
  list-style: none;
  margin: var(--sp-5) 0 var(--sp-3);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5) var(--gap);
}

@media (min-width: 700px) {
  .giftlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .giftlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.giftlist__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  border-top: 1px solid var(--c-ink);
  padding-top: var(--sp-3);
}

.giftlist__photo img {
  display: block;
  width: 100%;
  height: auto;          /* иначе атрибут height у <img> перебивает aspect-ratio */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);   /* тот же тон, что у остальных фото темы */
}

.giftlist__title {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-accent);
  font-weight: 400;
  line-height: var(--lh-accent);
}

.giftlist__price {
  margin: 0;
  font-size: var(--fs-note);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.giftlist__text { margin: 0; color: var(--c-muted); }

.giftlist__actions {
  margin-top: auto;
  padding-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}

.giftlist__reserve { margin: 0; }

.giftlist__status {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  font-weight: var(--fw-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-steel);
}

.giftlist__item.is-taken .giftlist__photo,
.giftlist__item.is-taken .giftlist__title,
.giftlist__item.is-taken .giftlist__price,
.giftlist__item.is-taken .giftlist__text { opacity: 0.45; }

/* «Отменить» — текстовая кнопка, не спорит с «Дарю я» */
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-note);
  color: var(--c-muted);
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--c-steel); }

/* ============================================================
   ДЕНЬ СВАДЬБЫ · обложка «сегодня»
   Время сбора и место — крупнее обычной подписи: это главное, что ищут на ходу.
   ============================================================ */
/* «спасибо»: дата и место — одна строка данных, не фраза; на широком экране не переносим */
.cover--thanks .cover__sub { max-width: none; }

.cover__sub--today {
  max-width: 40ch;
  font-family: var(--font-display);   /* роль lead */
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
}

/* ============================================================
   РАССАДКА · список по столам + поиск
   Гость смотрит с телефона стоя в холле: крупный шрифт, одна колонка,
   никакого горизонтального скролла. Столы — карточками с линейкой, как контакты.
   ============================================================ */
.seating__search {
  max-width: 560px;
  margin: var(--sp-5) 0;   /* отступ сверху — от вступления, иначе подпись поиска липнет к тексту */
}
.seating__search[hidden] { display: none; }

@media (min-width: 900px) {
  .seating__search { margin-left: var(--off-b); }
}

.seating__label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  font-weight: var(--fw-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.seating__input {
  width: 100%;
  padding: var(--sp-1) 0;
  border: 0;
  border-bottom: 1px solid var(--c-ink);
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--t-accent);   /* крупно: не меньше 16px, иначе iOS зумит */
  line-height: var(--lh-accent);
  -webkit-appearance: none;
  appearance: none;
}
.seating__input::placeholder { color: var(--c-muted); opacity: 0.6; }
.seating__input:focus { outline: none; border-bottom-color: var(--c-steel); }

.seating__empty {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-note);
  color: var(--c-muted);
}
.seating__empty[hidden] { display: none; }

.seating__tables {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-5) var(--gap);
}

.seating__group {
  border-top: 1px solid var(--c-ink);
  padding-top: var(--sp-2);
}
.seating__group[hidden] { display: none; }

.seating__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--t-accent);
  font-weight: 400;
  line-height: var(--lh-accent);
}

.seating__zone {
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  font-weight: var(--fw-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-steel);
}

.seating__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.seating__list .seating__row {
  padding: var(--seating-row-pad) 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-seating);
}

.seating__alpha {
  list-style: none;
  margin: 0;
  padding: 0;
}

.seating__alpha .seating__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-seating);
}
.seating__alpha .seating__row:last-child { border-bottom: 1px solid var(--c-line); }

.seating__table {
  font-family: var(--font-display);
  color: var(--c-steel);
  white-space: nowrap;
}

.seating__row[hidden] { display: none; }

@media (min-width: 900px) {
  .seating__alpha {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .seating__alpha .seating__row { grid-column: 3 / 6; }
}

/* ============================================================
   ФОТОАЛЬБОМ · до 4 фото, сетка по их числу
   ============================================================ */
.album__grid {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4) var(--gap);
}

@media (min-width: 700px) {
  .album__grid[data-count="2"],
  .album__grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .album__grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.album__item { margin: 0; }

.album__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);   /* тот же тон, что у остальных фото темы */
}
.album__grid[data-count="1"] .album__item img { aspect-ratio: 3 / 2; }

.album__actions { margin: var(--sp-5) 0 0; }

@media (min-width: 900px) {
  .album__actions { margin-left: var(--off-b); }
}

/* ============================================================
   БЛОК 11 · RSVP — инвертированная полоса
   Форма и дедлайн на оси B: слева на чёрной панели — воздух.
   ============================================================ */
.rsvp { padding-block: calc(var(--section-pad) / 2); }

.rsvp__panel {
  margin-inline: var(--gutter);   /* те же поля, что у фото */
  background: var(--c-ink);
  color: var(--c-paper);
  padding-block: var(--sp-6);
}

.rsvp .h2 { max-width: none; }

.rsvp__deadline {
  margin-bottom: var(--sp-5);
  color: var(--c-paper-muted);
}
.rsvp__deadline strong { color: var(--c-paper); font-weight: var(--fw-strong); }

/* вступление над формой (поле rsvp.intro) — тот же тон, что у дедлайна */
.rsvp__intro {
  margin-bottom: var(--sp-3);
  max-width: 62ch;
  color: var(--c-paper-muted);
}

.rsvp__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4) var(--sp-5);
  max-width: 860px;
}

@media (min-width: 720px) {
  .rsvp__form { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .rsvp__intro,
  .rsvp__deadline,
  .rsvp__form,
  .rsvp__success { margin-left: var(--off-b); }
  .rsvp__form { max-width: none; }
}

/* детали для гостей встраиваются в общую сетку формы */
.rsvp__details { display: contents; }
.rsvp__details[hidden] { display: none; }

/* «+1» и имя спутника в одной ячейке: имя — под вопросом */
.rsvp__pair { display: grid; gap: var(--sp-3); min-width: 0; }

.field { min-width: 0; }

.field__label {
  display: block;
  margin-bottom: var(--sp-1);
  /* Ф7: подпись поля — смысл, а не украшение. Капс сохраняем ради ритма
     формы, но кегль поднимаем и трекинг ужимаем: капслок мелким кеглем
     с широким трекингом — худшее сочетание для чтения. */
  font-size: var(--fs-note);
  font-weight: var(--fw-caps);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-paper-muted);
}

.field__hint {
  display: inline-block;       /* не помещается в строку с ярлыком — переносится целиком, как в макете */
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--c-paper-muted); /* отличие от ярлыка держат вес и регистр */
}

.field__input {
  width: 100%;
  padding: var(--sp-1) 0;
  border: 0;
  border-bottom: 1px solid var(--c-paper-line);
  border-radius: 0;
  background: transparent;
  color: var(--c-paper);
  font-family: inherit;
  font-size: 16.5px; /* = body; не меньше 16px — иначе iOS зумит */
  line-height: 1.5;
  transition: border-color 0.2s ease;
}
.field__input:focus {
  outline: none;
  border-bottom-color: var(--c-paper);
}

/* block: у строчного textarea под ним оставался зазор ~8 px от базовой линии.
   Уголка для растягивания нет (в макете его нет): поле само растёт под текст
   там, где браузер умеет field-sizing, в остальных — прокрутка внутри */
textarea.field__input { display: block; resize: none; min-height: 66px; field-sizing: content; } /* 66 — две строки, как в макете */

.field--choice { border: 0; padding: 0; margin: 0; }
.field--choice legend { padding: 0; }

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 4px var(--sp-3) 4px 0;
  cursor: pointer;
}
/* у последнего варианта отступ справа не нужен: из-за него «Вегетарианское» уезжало на новую строку */
.choice:last-of-type { margin-right: 0; }
.choice input {
  /* свой кружок, как в макете: тонкое кольцо, выбранный — с точкой 7 px.
     Системный рисовал белый диск на чёрной панели */
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1px solid var(--c-paper);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.choice input:checked {
  background: radial-gradient(circle, var(--c-paper) 3.5px, transparent 4px);
}
.choice input:focus-visible {
  outline: 1px solid var(--c-paper);
  outline-offset: 3px;
}
.field--invalid .choice input { border-color: var(--c-error); }

/* галочка — где можно отметить несколько: квадрат 17 px, отмеченный — с «птичкой» */
.choice--check input { border-radius: 0; }
.choice--check input:checked {
  background: no-repeat center / 11px 9px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5 4 7.5 10 1' fill='none' stroke='%23F6F6F4' stroke-width='1.5'/%3E%3C/svg%3E");
}

.field__error {
  display: none;
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-note);   /* Ф7: гость должен это прочитать, чтобы починить форму */
  color: var(--c-error);
}
.field--invalid .field__error { display: block; }
.field--invalid .field__input { border-bottom-color: var(--c-error); }

.rsvp__form .btn--paper {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--sp-2);
}

/* строка о согласии на обработку данных — под кнопкой, ссылка на /privacy-guests */
.rsvp__consent {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-note);
  color: var(--c-paper-muted);
}

.rsvp__success { padding-block: var(--sp-2); }
.rsvp__success[hidden] { display: none; }

/* ловушка для ботов: поле за краем экрана, людям не видно */
.rsvp__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ошибка отправки (нет сети, приём закрыт) — над кнопкой, на всю ширину формы */
.rsvp__send-error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-note);
  color: var(--c-error);
}
.rsvp__send-error[hidden] { display: none; }

.rsvp__success-mark {
  width: 56px;
  height: 56px;
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-paper);
  border-radius: 50%;
  font-size: 24px;
}

.rsvp__success-text {
  font-family: var(--font-display);   /* роль lead */
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  max-width: 34ch;
}

/* ============================================================
   БЛОК 12 · КОНТАКТЫ — карточки на осях B и C
   ============================================================ */
.contacts__cards {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

@media (min-width: 720px) {
  .contacts__cards { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}

@media (min-width: 900px) {
  .contacts__cards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: 0;
  }
  .contacts__card:first-child { grid-column: 3 / 5; }
  .contacts__card:last-child { grid-column: 5 / 6; }
}

.contacts__card {
  border-top: 1px solid var(--c-ink);
  padding-top: var(--sp-3);
}

.contacts__role {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  font-weight: var(--fw-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.contacts__name {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--t-accent);
  line-height: var(--lh-accent);
}

.contacts__phone { margin-bottom: var(--sp-2); color: var(--c-muted); }
.contacts__phone a { text-decoration: none; }

/* ссылки капсом — своей высотой, без строки абзаца 28 px (как в макете) */
.contacts__links { display: flex; flex-wrap: wrap; margin: 0; }

/* ============================================================
   БЛОК 13 · ФУТЕР — «задняя обложка»
   ============================================================ */
.footer { padding-block: calc(var(--section-pad) / 2) var(--sp-5); }

.footer__names {
  margin: 0;
  padding-block: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--t-display); /* «задняя обложка» зеркалит переднюю */
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
}

.footer__amp { color: var(--c-steel); font-size: 0.82em; }

.footer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-3);
}

.footer__meta {
  margin: 0;
  font-size: var(--fs-note);   /* Ф7: дата и адрес площадки */
  color: var(--c-muted);
  line-height: 1.7;
}

/* «Свадьбу организует …» — строка организатора под подвалом, текстом темы, без логотипов */
.footer__credit { margin-top: var(--sp-3); }
.footer__credit a { color: inherit; }

.footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
}

/* ============================================================
   СКВОЗНЫЕ ЭЛЕМЕНТЫ
   ============================================================ */

/* сквозная кнопка: в шапке (.topbar), на телефоне — внизу окна (.cta-bar) */

/* тост «ссылка скопирована» */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 60;
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-ink);
  color: var(--c-paper);
  /* кегль — базовый body: это UI-сообщение */
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast[hidden] { display: block; } /* управляем только opacity */
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- УВЕДОМЛЕНИЕ О COOKIE (views/macros/cookie-note.njk) ----------
   Маленькая плашка в левом нижнем углу. На телефоне у сайта свадьбы внизу
   плавающая кнопка ответа — плашка встаёт над ней, а не поверх. */
.cookie-note {
  position: fixed;
  left: var(--cta-bar-gap);
  bottom: var(--cta-bar-gap);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: min(360px, calc(100vw - 2 * var(--cta-bar-gap)));
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-bar);
  border: 1px solid var(--c-line);
  font-size: var(--fs-note);
  line-height: 1.35;
}
.cookie-ok .cookie-note { display: none; }

.cookie-note__text { margin: 0; color: var(--c-muted); }
.cookie-note__text a { color: var(--c-ink); }

.cookie-note__ok {
  flex: none;
  padding: 6px var(--sp-1);
  border: 1px solid var(--c-ink);
  background: transparent;
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  cursor: pointer;
}
.cookie-note__ok:hover { background: var(--c-ink); color: var(--c-paper); }

@media (max-width: 719px) {
  body:has(.cta-bar) .cookie-note { bottom: calc(var(--cta-bar-h) + var(--cta-bar-gap)); }
}

@media print { .cookie-note { display: none; } }

/* ---------- ДОСТУПНОСТЬ: БЕЗ АНИМАЦИЙ ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .toast, .cta-bar, .cta-bar.is-hidden { transition: none; }
  .faq__item summary::before,
  .faq__item summary::after,
  .gift-details summary::before,
  .gift-details summary::after { transition: none; }
}

/* ---------- ПЕЧАТЬ (кнопка «Скачать PDF») ---------- */
@media print {
  .topbar, .toast, .btn, .countdown, .rsvp__form { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }

  .cover__screen { display: block; min-height: 0; }
  .cover__bg { display: none; }
  .photo__frame { clip-path: none !important; }
  .photo__frame img { max-height: 90mm; width: 100%; object-fit: cover; filter: none; }

  .section { padding-block: 8mm; page-break-inside: avoid; }
  .rsvp__panel { background: #fff; color: #000; margin: 0; padding: 0; }
  .rsvp__deadline, .rsvp__deadline strong { color: #000; }
  .cover__amp, .footer__amp, .sec-head__num, .index-list__num { color: #000; }
}