/* ============================================================
   invite4u — приглашение гостя
   Одна вёрстка на все макеты: цвета, бумага, шрифт и форма
   приходят переменными из invite-render.js. Телефон — основной
   носитель. На широком экране тот же лист крупнее, колонка
   остаётся 700px, а по бокам дышит фон макета.
   Одно письмо, а не стопка карточек: лист и разделы с волосками.
   ============================================================ */

.invite {
  --iv-bg: #F6EFE6;
  --iv-bg2: #EFE4D4;
  --iv-ink: #2A2419;
  --iv-mute: #857763;
  --iv-accent: #A9762A;
  --iv-line: #DECFBB;
  --iv-on-ink: #F6EFE6;
  --iv-btn-line: rgba(246, 239, 230, .3);
  --iv-divider: rgba(60, 44, 30, .13);
  --iv-frame: rgba(60, 44, 30, .10);
  --iv-card-bg: #F6EFE6;
  --iv-card-blend: normal;
  --iv-ground: #E4D8C6;
  --iv-ground-blend: normal;
  --iv-shadow: 0 22px 44px -30px rgba(64, 46, 28, .38), 0 2px 6px -4px rgba(64, 46, 28, .22);
  --iv-radius: 18px;
  --iv-soft: 16px;
  --iv-tile-r: 10px;
  --iv-pad: 26px;
  --iv-gap: 19px;
  --iv-head: "Prata", Georgia, serif;
  --iv-head-w: 400;
  --iv-head-ls: -0.02em;
  --iv-head-tt: none;
  --iv-head-lh: 1.08;
  --iv-head-size: 40px;
  --iv-time: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --iv-scale: 1;
  --iv-align: center;
  --iv-error: #9B3B2F;

  position: relative;
  color: var(--iv-ink);
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
/* Сброс через :where — он не должен перебивать классы разделов ниже */
.invite :where(*, *::before, *::after) { box-sizing: border-box; }
.invite :where(p, h1, h2, ul) { margin: 0; }
.invite :where(ul) { padding: 0; list-style: none; }
.invite :where(button, input, textarea) { font: inherit; color: inherit; }
.invite :where(img, svg) { display: block; max-width: 100%; }
.invite [hidden] { display: none !important; }
.invite :focus-visible { outline: 1px solid var(--iv-accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- фон и лист */

.iv-stage { container-type: inline-size; }

.iv-ground {
  padding: 12px 10px 28px;
  background: var(--iv-ground);
  background-blend-mode: var(--iv-ground-blend);
}

.iv-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border: 1px solid var(--iv-frame);
  border-radius: var(--iv-radius);
  background: var(--iv-card-bg);
  background-blend-mode: var(--iv-card-blend);
  box-shadow: var(--iv-shadow);
  text-align: var(--iv-align);
}

.iv-pane {
  position: relative;
  padding: var(--iv-pad);
  border-top: 1px solid var(--iv-divider);
}
.invite.no-lines .iv-pane { border-top-color: transparent; }

.iv-hero {
  border-top: 0;
  padding: calc(var(--iv-pad) + 10px) calc(var(--iv-pad) + 6px);
}

/* Декор лежит на бумаге под текстом и смешивается с ней */
.iv-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.iv-decor__piece {
  position: absolute;
  left: var(--left, auto);
  right: var(--right, auto);
  top: var(--top, auto);
  bottom: var(--bottom, auto);
  width: var(--width, auto);
  height: var(--height, auto);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.iv-photo {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-bottom: var(--iv-gap);
  border: 1px solid var(--iv-line);
  border-radius: max(calc(var(--iv-radius) - 6px), 0px);
  background: var(--iv-bg2) center / cover no-repeat;
}
.iv-photo span { display: none; font: 10px/1.6 var(--iv-time); letter-spacing: .04em; color: var(--iv-mute); }
.iv-photo.is-empty span { display: block; }

/* ---------------------------------------------------------------- шапка листа */

.iv-mono {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 4px;
  border: 1px solid var(--iv-line);
  border-radius: 50%;
  color: var(--iv-accent);
  font-family: var(--iv-head);
  font-weight: var(--iv-head-w);
  font-size: 17px;
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
}
.invite.is-left .iv-mono { margin-left: 0; }

.iv-kicker {
  margin-top: 10px;
  font-size: calc(11px * var(--iv-scale));
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--iv-mute);
}

.iv-names {
  margin: 14px 0 10px;
  font-family: var(--iv-head);
  font-weight: var(--iv-head-w);
  font-size: var(--iv-head-size);
  line-height: var(--iv-head-lh);
  letter-spacing: var(--iv-head-ls);
  text-transform: var(--iv-head-tt);
  color: var(--iv-ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.iv-names:focus { outline: 0; }
.iv-amp { color: var(--iv-accent); }

.iv-meta { font-size: calc(13.5px * var(--iv-scale)); line-height: 1.5; color: var(--iv-mute); }

.iv-words {
  max-width: 34em;
  margin: 14px auto 0;
  font-size: calc(13.5px * var(--iv-scale));
  line-height: 1.6;
  color: var(--iv-ink);
  white-space: pre-line;
  text-wrap: pretty;
}
.invite.is-left .iv-words { margin-left: 0; }

.iv-sep { display: flex; align-items: center; gap: 10px; margin-top: var(--iv-gap); color: var(--iv-accent); }
.iv-sep::before, .iv-sep::after { content: ""; flex: 1; height: 1px; background: var(--iv-line); }
.iv-sep svg { width: 11px; height: 11px; }
.iv-sep__dash { width: 12px; height: 1px; background: currentColor; }
.iv-sep__ring { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }

/* ---------------------------------------------------------------- разделы */

.iv-label {
  margin-bottom: 12px;
  font-size: calc(10.5px * var(--iv-scale));
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--iv-mute);
}
.iv-label--wide { display: none; }

.iv-text {
  font-size: calc(14px * var(--iv-scale));
  line-height: 1.6;
  white-space: pre-line;
  text-wrap: pretty;
}

/* Отсчёт: четыре ячейки без разделителей, подписи строчными */
.iv-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
.iv-count b {
  display: block;
  font-family: var(--iv-head);
  font-weight: var(--iv-head-w);
  font-size: max(26px, calc(var(--iv-head-size) * .66));
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.iv-count span { display: block; margin-top: 7px; font-size: calc(10px * var(--iv-scale)); color: var(--iv-mute); }

/* Программа: время моноширинным, пункт — строкой */
.iv-program { display: flex; flex-direction: column; gap: 11px; text-align: left; }
.invite:not(.is-left) .iv-program { max-width: 340px; margin-inline: auto; }
.iv-program li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: calc(13.5px * var(--iv-scale));
  line-height: 1.45;
}
.iv-program time { font-family: var(--iv-time); font-size: calc(12.5px * var(--iv-scale)); color: var(--iv-mute); }

/* Карта в обёртке: полоса-подпись, метка акцентом, адрес и одна ссылка */
.iv-map { padding: 0; text-align: left; }
.iv-map__bar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px var(--iv-pad);
  border-bottom: 1px solid var(--iv-line);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--iv-mute);
  white-space: nowrap;
}
.iv-map__canvas {
  position: relative;
  display: grid;
  place-items: center;
  height: 220px;
  background:
    linear-gradient(var(--iv-line), var(--iv-line)) 0 42% / 100% 1px no-repeat,
    linear-gradient(var(--iv-line), var(--iv-line)) 34% 0 / 1px 100% no-repeat,
    linear-gradient(var(--iv-line), var(--iv-line)) 0 76% / 100% 1px no-repeat,
    radial-gradient(60% 70% at 78% 30%, var(--iv-bg) 0%, transparent 70%),
    var(--iv-bg2);
}
.iv-map__canvas iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.iv-map__pin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--iv-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--iv-accent) 14%, transparent), 0 0 0 12px color-mix(in srgb, var(--iv-accent) 8%, transparent);
}
.iv-map.is-address .iv-map__canvas { display: none; }
.iv-map__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px var(--iv-pad);
  border-top: 1px solid var(--iv-line);
  font-size: calc(13px * var(--iv-scale));
  line-height: 1.4;
}
.iv-map.is-address .iv-map__foot { border-top: 0; }
.iv-map__where { min-width: 0; }
.iv-map__where small { display: block; margin-top: 3px; font-size: calc(11.5px * var(--iv-scale)); color: var(--iv-mute); }
.iv-map__route {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 12.5px;
  color: var(--iv-accent);
  text-decoration: none;
  white-space: nowrap;
}
.iv-map__route svg { width: 11px; height: 11px; }
.iv-map__route:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Свои фотографии: две колонки, 4:5, обрезка по центру */
.iv-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.iv-gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-tile-r);
  background: var(--iv-bg2);
}
.iv-gallery.is-round img { aspect-ratio: 1; border-radius: 50%; }

/* Календарь: дата залита акцентом — единственный залитый кружок */
.iv-cal__month { margin-bottom: 10px; font-size: calc(12.5px * var(--iv-scale)); }
.iv-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 2px;
  max-width: 320px;
  margin: 0 auto;
  font-family: var(--iv-time);
  font-size: 12px;
  text-align: center;
}
.invite.is-left .iv-cal__grid { margin-left: 0; }
.iv-cal__grid i { font-style: normal; }
.iv-cal__wd { padding-bottom: 4px; font-family: "Onest", system-ui, sans-serif; font-size: 10px; color: var(--iv-mute); }
.iv-cal__grid b { display: grid; place-items: center; height: 30px; font-weight: 400; }
.iv-cal__grid b.is-day { width: 30px; margin: 0 auto; border-radius: 50%; background: var(--iv-accent); color: var(--iv-on-ink); font-weight: 500; }

.iv-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-soft);
  color: var(--iv-ink);
  font-size: calc(14px * var(--iv-scale));
  text-decoration: none;
  transition: border-color 120ms ease-out;
}
.iv-ghost svg { width: 13px; height: 13px; }
a.iv-ghost:hover { border-color: var(--iv-ink); }

.iv-cal__more { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 18px; margin-top: 4px; font-size: 12.5px; }
.invite.is-left .iv-cal__more { justify-content: flex-start; }
.iv-cal__more a {
  display: inline-block;
  padding: 10px 0;
  color: var(--iv-mute);
  text-decoration: underline;
  text-decoration-color: var(--iv-line);
  text-underline-offset: 4px;
}
.iv-cal__more a:hover { color: var(--iv-ink); }

.iv-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.invite.is-left .iv-swatches { justify-content: flex-start; }
.iv-swatches:empty { display: none; }
.iv-swatches i { width: 28px; height: 28px; border: 1px solid var(--iv-line); border-radius: 50%; }

/* ---------------------------------------------------------------- ответ гостя */

.iv-subhead {
  margin-bottom: 16px;
  font-family: var(--iv-head);
  font-weight: var(--iv-head-w);
  font-size: max(22px, calc(var(--iv-head-size) * .56));
  line-height: 1.15;
  letter-spacing: var(--iv-head-ls);
  text-transform: var(--iv-head-tt);
}

.iv-choices { display: grid; gap: 8px; }
.iv-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-soft);
  background: transparent;
  color: var(--iv-ink);
  font-size: calc(14.5px * var(--iv-scale));
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.iv-choice:hover { border-color: var(--iv-ink); }
.iv-choice__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--iv-line);
  border-radius: 50%;
  color: transparent;
}
.iv-choice__mark svg { width: 11px; height: 11px; }
.iv-choice[aria-pressed="true"] { background: var(--iv-ink); border-color: var(--iv-ink); color: var(--iv-on-ink); }
.iv-choice[aria-pressed="true"] .iv-choice__mark { border-color: var(--iv-btn-line); color: var(--iv-on-ink); }

.iv-field { margin-top: 16px; text-align: left; }
.iv-field__label { display: block; margin-bottom: 8px; font-size: calc(12.5px * var(--iv-scale)); color: var(--iv-mute); }

.iv-input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-soft);
  background: transparent;
  color: var(--iv-ink);
  font-size: 16px;
  line-height: 1.4;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 120ms ease-out;
}
.iv-input:focus { border-color: var(--iv-ink); }
.iv-input[aria-invalid="true"] { border-color: var(--iv-error); }
.iv-input--area { min-height: 96px; resize: vertical; }

.iv-options { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-option {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-soft);
  background: transparent;
  color: var(--iv-ink);
  font-size: calc(13.5px * var(--iv-scale));
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.iv-option:hover { border-color: var(--iv-ink); }
.iv-option[aria-pressed="true"] { background: var(--iv-ink); border-color: var(--iv-ink); color: var(--iv-on-ink); }

.iv-error { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--iv-error); text-align: left; }

/* Кнопка-штемпель в цветах макета */
.iv-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: stretch;
  width: 100%;
  min-height: 52px;
  margin-top: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--iv-soft);
  background: var(--iv-ink);
  color: var(--iv-on-ink);
  box-shadow: var(--iv-shadow);
  font-size: calc(14.5px * var(--iv-scale));
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity 120ms ease-out;
}
button.iv-btn:hover { opacity: .9; }
.iv-btn__text { display: flex; align-items: center; justify-content: var(--iv-align); padding: 13px 0 13px 18px; text-align: left; }
.iv-btn__mark { display: grid; place-items: center; border-left: 1px solid var(--iv-btn-line); }
.iv-btn__seal { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--iv-btn-line); border-radius: 50%; }
.iv-btn__seal svg { width: 11px; height: 11px; }
.iv-btn:disabled { cursor: progress; opacity: .78; }
.iv-btn.is-loading .iv-btn__seal { border-color: transparent; }
.iv-btn.is-loading .iv-btn__seal svg { display: none; }
.iv-btn.is-loading .iv-btn__seal::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -8px 0 currentColor, 8px 0 currentColor;
  animation: ivPulse 1.2s ease-in-out infinite;
}
@keyframes ivPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.iv-answer {
  padding: 16px 18px;
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-soft);
  font-size: calc(14px * var(--iv-scale));
  line-height: 1.55;
  text-align: var(--iv-align);
}
.iv-answer:focus { outline: 0; }
.iv-textlink {
  display: block;
  min-height: 44px;
  margin: 8px auto 0;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--iv-mute);
  font-size: 12.5px;
  text-decoration: underline;
  text-decoration-color: var(--iv-line);
  text-underline-offset: 4px;
  cursor: pointer;
}

.iv-foot { padding: 16px var(--iv-pad) 18px; text-align: center; font-size: calc(11.5px * var(--iv-scale)); line-height: 1.55; color: var(--iv-mute); }
.iv-foot__who { margin-bottom: 6px; color: var(--iv-ink); }
.iv-brand a { color: inherit; text-decoration: none; }
.iv-brand a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- страница гостя */

.iv-page { margin: 0; }
.iv-page .iv-ground {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 14px 12px calc(32px + env(safe-area-inset-bottom));
}

/* Пока данные не разложены, лист не показываем: без мигания чужих цветов */
.invite[data-guest]:not(.is-ready) .iv-stage,
.invite[data-guest]:not(.is-ready) .iv-cover { visibility: hidden; }

.iv-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 2px; pointer-events: none; }
.iv-progress i { display: block; height: 100%; background: var(--iv-accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

/* Конверт: надпись, имена и одна кнопка */
.iv-cover {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 20px 16px;
  background: var(--iv-ground);
  background-blend-mode: var(--iv-ground-blend);
  transition: opacity 320ms cubic-bezier(.2, .7, .3, 1), visibility 320ms;
}
.iv-cover.is-open { opacity: 0; visibility: hidden; pointer-events: none; }
.iv-cover__sheet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 440px);
  padding: 56px 28px 30px;
  border: 1px solid var(--iv-frame);
  border-radius: var(--iv-radius);
  background: var(--iv-card-bg);
  background-blend-mode: var(--iv-card-blend);
  box-shadow: var(--iv-shadow);
  text-align: center;
  transition: transform 320ms cubic-bezier(.2, .7, .3, 1);
}
.iv-cover.is-open .iv-cover__sheet { transform: translateY(-12px); }
.iv-cover .iv-mono { margin-left: auto; }
.iv-cover .iv-names { margin: 18px 0 12px; font-size: calc(var(--iv-head-size) * 1.15); }
.iv-cover .iv-btn { margin-top: 32px; }
.iv-cover .iv-btn__text { justify-content: center; }

.iv-music {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--iv-ink);
  color: var(--iv-on-ink);
  box-shadow: var(--iv-shadow);
  cursor: pointer;
}
.iv-music svg { width: 16px; height: 16px; }
.iv-music.is-off { opacity: .72; }

.iv-preview-note {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 16px;
  border-bottom: 1px solid #EDE4D8;
  background: #FBF8F3;
  color: #4A4340;
  font: 12.5px/1.4 "Onest", system-ui, sans-serif;
  text-align: center;
}
.iv-preview-note::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #B07A2B; }

@media (min-width: 900px) {
  .iv-cover__sheet { padding: 78px 64px 54px; width: min(100%, 560px); }
  .iv-cover .iv-mono { width: 86px; height: 86px; font-size: 26px; margin-bottom: 18px; }
  .iv-cover .iv-names { font-size: calc(var(--iv-head-size) * 1.5); }
  .iv-cover .iv-btn { max-width: 340px; margin-inline: auto; min-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .iv-cover, .iv-cover__sheet, .iv-choice, .iv-option, .iv-input { transition-duration: 120ms; }
  .iv-cover.is-open .iv-cover__sheet { transform: none; }
  .iv-btn.is-loading .iv-btn__seal::before { animation: none; }
}

/* ---------------------------------------------------------------- широкий экран */
/* Считаем по ширине самого приглашения, а не окна: превью «Компьютер»
   в конструкторе включает ту же раскладку в уменьшенной рамке */

@container (min-width: 900px) {
  .iv-ground { padding: 72px 40px 84px; }
  .iv-pane.iv-hero { padding: 78px 64px 66px; }
  .iv-mono { width: 86px; height: 86px; margin-bottom: 22px; font-size: 26px; }
  .iv-kicker { font-size: calc(13px * var(--iv-scale)); letter-spacing: .2em; }
  .iv-names { margin: 20px 0 18px; font-size: calc(var(--iv-head-size) * 1.5); }
  .iv-meta { font-size: calc(18px * var(--iv-scale)); line-height: 1.55; }
  .iv-words { max-width: 440px; margin-top: 24px; font-size: calc(17px * var(--iv-scale)); line-height: 1.7; }
  .iv-sep { gap: 14px; margin-top: 26px; }
  .iv-sep svg { width: 13px; height: 13px; }
  .iv-photo { max-width: 420px; margin: 0 auto 30px; }

  .iv-pane { padding: 42px 48px; }
  .iv-label, .iv-label--wide { display: block; margin-bottom: 22px; font-size: calc(12px * var(--iv-scale)); letter-spacing: .16em; }
  .iv-text { font-size: calc(17px * var(--iv-scale)); line-height: 1.7; }

  .iv-count b { font-size: max(34px, calc(var(--iv-head-size) * 1.1)); }
  .iv-count span { margin-top: 12px; font-size: 12px; letter-spacing: .05em; }

  .invite:not(.is-left) .iv-program { max-width: 480px; }
  .iv-program { gap: 17px; }
  .iv-program li { grid-template-columns: 84px minmax(0, 1fr); gap: 18px; font-size: calc(17px * var(--iv-scale)); }
  .iv-program time { font-size: calc(16px * var(--iv-scale)); }

  .iv-map { padding: 42px 48px; }
  .iv-map__bar { padding: 0 0 22px; border-bottom: 0; font-size: 12px; letter-spacing: .16em; }
  .iv-map__canvas { height: 300px; overflow: hidden; border: 1px solid var(--iv-line); border-radius: var(--iv-tile-r); }
  .iv-map__foot { margin-top: 12px; padding: 0; border-top: 0; font-size: 16px; }
  .iv-map__where small { font-size: 14px; }
  .iv-map__route { font-size: 15px; }

  .iv-gallery { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 14px; }

  .iv-cal__month { font-size: 15px; margin-bottom: 14px; }
  .iv-cal__grid { max-width: 420px; font-size: 14px; }
  .iv-cal__grid b { height: 40px; }
  .iv-cal__grid b.is-day { width: 40px; }
  .iv-ghost { max-width: 340px; min-height: 56px; margin: 20px auto 0; font-size: 16px; }
  .invite.is-left .iv-ghost { margin-left: 0; }

  .iv-rsvp { padding: 46px 48px 50px; }
  .iv-rsvp form, .iv-thanks { max-width: 460px; margin: 0 auto; }
  .iv-subhead { font-size: max(30px, calc(var(--iv-head-size) * .75)); margin-bottom: 22px; text-align: center; }
  .iv-btn { grid-template-columns: minmax(0, 1fr) 60px; min-height: 62px; font-size: 17px; }
  .iv-btn__text { padding-left: 26px; }
  .iv-btn__seal { width: 28px; height: 28px; }

  .iv-foot { padding: 20px; font-size: 13px; }

  .iv-decor__piece {
    left: var(--left-w, auto);
    right: var(--right-w, auto);
    top: var(--top-w, auto);
    bottom: var(--bottom-w, auto);
    width: var(--width-w, auto);
    height: var(--height-w, auto);
  }
}