/* ==========================================================================
   Этап 2 — токены + reset + база
   Секции стилизуются на следующих этапах по блокам
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-bg: #f5f5f5;
  --color-text: #141414;
  --color-text-soft: #141414;
  --color-white: #ffffff;
  --color-border: #141414;
  --color-divider: #c7c7c7;

  /* Typography families */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-script: "Great Vibes", cursive;
  --font-ui: "Montserrat", system-ui, -apple-system, sans-serif;

  /* Type scale — mobile (base) */
  --fs-eyebrow: 26px;
  --fs-name: 70px;
  --fs-amp: 56px;
  --fs-body: 20px;
  --fs-date: 34px;
  --fs-section-title: 52px;
  --fs-subtitle: 34px;
  --fs-restaurant: 40px;
  --fs-program-time: 26px;
  --fs-program-desc: 22px;
  --lh-section-title: 76px;
  --lh-program-time: 34px;
  --lh-program-desc: 29px;
  --section-title-gap: 28px;
  --program-list-gap: 24px;
  --program-item-gap: 8px;
  --program-item-width: 100%;
  --program-pad-top: 56px;
  --program-pad-bottom: 48px;

  /* Place */
  --place-pad-top: 56px;
  --place-pad-bottom: 40px;
  --place-title-gap: 28px;
  --place-stack-gap: 16px;
  --fs-place-body: 20px;
  --lh-place-body: 30px;
  --lh-restaurant: 50px;
  --place-text-max: 318px;
  --place-map-h: 280px;
  --fs-btn: 12px;
  --fs-btn-submit: 14px;
  --fs-hint: 13px;
  --fs-field: 18px;
  --lh-hint: 20px;
  --lh-field: 26px;
  --field-gap: 10px;
  --rsvp-pad-top: 56px;
  --rsvp-pad-bottom: 40px;
  --rsvp-title-gap: 28px;
  --rsvp-hint-gap: 28px;
  --rsvp-field-gap: 22px;
  --rsvp-block-gap: 28px;
  --rsvp-btn-gap: 40px;
  --form-max: 334px;
  --radio-size: 18px;
  --meat-gap: 14px;
  --fs-footer-love: 33px;
  --lh-footer-love: 41px;
  --fs-footer-closing: 20px;
  --lh-footer-closing: 28px;
  --footer-pad-top: 48px;
  --footer-pad-bottom: 64px;
  --footer-gap: 16px;
  --footer-closing-max: 330px;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-body: 1.45;
  --lh-tight: 1.2;

  /* Space — mobile */
  --page-pad-x: clamp(20px, 7.2vw, 28px);
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 28px;
  --space-lg: 40px;
  --space-xl: 56px;
  --space-2xl: 64px;

  --section-pad-y-top: 56px;
  --section-pad-y-bottom: 40px;

  /* Layout */
  --page-max: 1440px;
  --content-max: 1240px;
  --photo-size: 320px;

  /* Hero rhythm — mobile */
  --hero-pad-top: 40px;
  --hero-pad-bottom: 24px;
  --hero-gap-eyebrow-photo: 32px;
  --hero-gap-photo-names: 76px;
  --hero-gap-names-invite: 24px;
  --hero-gap-invite-date: 28px;
  --hero-invite-max: 318px;
  --hero-names-gap: 0px;
  --lh-eyebrow: 35px;
  --lh-invite: 30px;
  --lh-date: 42px;

  /* Components */
  --btn-pad-y: 14px;
  --btn-pad-x: 24px;
  --btn-submit-h: 50px;
  --swatch-size: 44px;
  --swatch-gap: 12px;
  --lh-subtitle: 41px;
  --dress-pad-top: 56px;
  --dress-pad-bottom: 40px;
  --dress-title-gap: 28px;
  --dress-groups-gap: 36px;
  --dress-group-gap: 16px;
  --dress-note-gap: 28px;
  --dress-note-max: 318px;
  --details-pad-top: 56px;
  --details-pad-bottom: 40px;
  --details-title-gap: 28px;
  --details-text-max: 318px;
  --radius: 0;

  /* Breakpoint reference (used in media queries below) */
  --bp-desktop: 1024px;
}

@media (min-width: 1024px) {
  :root {
    /* Type scale — desktop */
    --fs-eyebrow: 37px;
    --fs-name: 76px;
    --fs-amp: 76px;
    --fs-body: 28px;
    --fs-date: 50px;
    --fs-section-title: 73px;
    --fs-subtitle: 45px;
    --lh-subtitle: 55px;
    --dress-pad-top: 52px;
    --dress-pad-bottom: 52px;
    --dress-title-gap: 40px;
    --dress-groups-gap: 40px;
    --dress-note-gap: 40px;
    --dress-note-max: 680px;
    --dress-group-width: 480px;
    --details-pad-top: 52px;
    --details-pad-bottom: 52px;
    --details-title-gap: 40px;
    --details-text-max: 560px;
    --fs-restaurant: 56px;
    --fs-program-time: 35px;
    --fs-program-desc: 29px;
    --lh-section-title: 100px;
    --lh-program-time: 42px;
    --lh-program-desc: 35px;
    --section-title-gap: 32px;
    --program-list-gap: 48px;
    --program-item-gap: 10px;
    --program-item-width: 220px;
    --program-pad-top: 48px;
    --program-pad-bottom: 64px;

    /* Place */
    --place-pad-top: 48px;
    --place-pad-bottom: 48px;
    --place-title-gap: 28px;
    --place-stack-gap: 14px;
    --fs-place-body: 27px;
    --lh-place-body: 40px;
    --lh-restaurant: 70px;
    --fs-restaurant: 56px;
    --place-text-max: 520px;
    --place-col-gap: 40px;
    --place-map-w: 600px;
    --place-map-h: 420px;
    --fs-btn: 14px;
    --fs-hint: 17px;
    --fs-field: 23px;
    --fs-btn-submit: 17px;
    --lh-hint: 26px;
    --lh-field: 33px;
    --field-gap: 8px;
    --rsvp-pad-top: 52px;
    --rsvp-pad-bottom: 52px;
    --rsvp-title-gap: 30px;
    --rsvp-hint-gap: 30px;
    --rsvp-field-gap: 12px;
    --rsvp-block-gap: 15px;
    --rsvp-btn-gap: 28px;
    --form-max: 520px;
    --meat-gap: 10px;
    --fs-footer-love: 50px;
    --lh-footer-love: 70px;
    --fs-footer-closing: 28px;
    --lh-footer-closing: 39px;
    --footer-pad-top: 56px;
    --footer-pad-bottom: 56px;
    --footer-gap: 28px;
    --footer-closing-max: 560px;

    /* Space — desktop */
    --page-pad-x: 100px;
    --space-md: 28px;
    --space-lg: 48px;
    --space-xl: 64px;
    --section-pad-y-top: 52px;
    --section-pad-y-bottom: 52px;
    --photo-size: 480px;

    /* Hero rhythm — desktop */
    --hero-pad-top: 72px;
    --hero-pad-bottom: 48px;
    --hero-gap-text: 20px;
    --hero-text-pad-y: 16px;
    --hero-col-gap: 48px;
    --hero-text-width: 640px;
    --hero-invite-max: 520px;
    --lh-eyebrow: 49px;
    --lh-invite: 43px;
    --lh-date: 68px;
    --lh-names: 120px;
  }
}

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

* {
  margin: 0;
  padding: 0;
}

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

body {
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

img {
  height: auto;
}

iframe {
  border: 0;
  width: 100%;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

address {
  font-style: normal;
}

fieldset {
  border: 0;
  min-inline-size: 0;
}

::placeholder {
  color: var(--color-text);
  opacity: 0.45;
}

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

.field__input:focus-visible {
  outline: none;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */
.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  background-color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   Shared primitives (минимальная база; детализация — по блокам)
   -------------------------------------------------------------------------- */
.section-title {
  font-family: var(--font-script);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-regular);
  line-height: var(--lh-section-title);
  text-align: center;
  color: var(--color-text);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--fs-btn);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  background-color: transparent;
  color: var(--color-text);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.btn:hover {
  background-color: var(--color-text);
  color: var(--color-white);
}

.btn:active,
.btn.is-pressed {
  transform: scale(0.97);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn--submit {
  width: 100%;
  min-height: var(--btn-submit-h);
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-white);
  font-size: var(--fs-btn-submit);
}

.btn--submit:hover {
  background-color: #2a2a2a;
  border-color: #2a2a2a;
  color: var(--color-white);
}

.btn--submit:active,
.btn--submit.is-pressed {
  background-color: #000000;
  border-color: #000000;
  transform: scale(0.98);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
  width: 100%;
}

.field__label {
  font-family: var(--font-serif);
  font-size: var(--fs-field);
  font-weight: var(--fw-regular);
  line-height: var(--lh-field);
  text-align: left;
}

.field__input {
  width: 100%;
  padding: 0 0 10px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  font-family: var(--font-serif);
  font-size: var(--fs-field);
  line-height: var(--lh-field);
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-bottom-color 0.2s ease;
}

.field__input:focus,
.field__input:focus-visible {
  outline: none;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  background: transparent;
}

.palette {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--swatch-gap);
}

.palette__row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--swatch-gap);
}

.palette__swatch {
  display: block;
  width: var(--swatch-size);
  height: var(--swatch-size);
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--swatch, #ccc);
  list-style: none;
  flex-shrink: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.palette__swatch:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px rgba(20, 20, 20, 0.12);
}

.palette__swatch:focus-visible {
  outline: 2px solid #141414;
  outline-offset: 3px;
}

.palette__swatch:active,
.palette__swatch.is-pressed {
  transform: scale(0.94);
}

/* --------------------------------------------------------------------------
   01 Hero
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--hero-pad-top) var(--page-pad-x) var(--hero-pad-bottom);
  text-align: center;
}

.hero__text {
  display: contents;
}

.hero__eyebrow {
  order: 1;
  font-family: var(--font-serif);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-light);
  line-height: var(--lh-eyebrow);
  text-align: center;
}

.hero__photo {
  order: 2;
  width: var(--photo-size);
  height: var(--photo-size);
  margin-top: var(--hero-gap-eyebrow-photo);
  overflow: hidden;
  background-color: var(--color-white);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.hero__names {
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--hero-gap-photo-names);
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  text-align: center;
}

.hero__name {
  font-size: var(--fs-name);
  line-height: 1.15;
}

.hero__amp {
  font-size: var(--fs-amp);
  line-height: 1.15;
}

.hero__invite {
  order: 4;
  max-width: var(--hero-invite-max);
  margin-top: var(--hero-gap-names-invite);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-invite);
  text-align: center;
}

.hero__date {
  order: 5;
  margin-top: var(--hero-gap-invite-date);
  font-family: var(--font-serif);
  font-size: var(--fs-date);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-date);
  text-align: center;
}

@media (min-width: 1024px) {
  .hero {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--hero-col-gap);
  }

  .hero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--hero-text-width);
    max-width: 100%;
    padding-block: var(--hero-text-pad-y);
    gap: var(--hero-gap-text);
  }

  .hero__eyebrow,
  .hero__names,
  .hero__invite,
  .hero__date,
  .hero__photo {
    order: initial;
    margin-top: 0;
  }

  .hero__names {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.25em;
    line-height: var(--lh-names);
  }

  .hero__name,
  .hero__amp {
    font-size: var(--fs-name);
    line-height: var(--lh-names);
  }

  .hero__invite {
    max-width: var(--hero-invite-max);
  }

  .hero__photo {
    flex-shrink: 0;
  }
}

/* --------------------------------------------------------------------------
   02 Программа дня
   -------------------------------------------------------------------------- */
.program {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--program-pad-top) var(--page-pad-x) var(--program-pad-bottom);
  text-align: center;
  gap: var(--section-title-gap);
}

.program__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--program-list-gap);
}

.program__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--program-item-width);
  max-width: 100%;
  gap: var(--program-item-gap);
  text-align: center;
}

.program__time {
  font-family: var(--font-serif);
  font-size: var(--fs-program-time);
  font-weight: var(--fw-medium);
  line-height: var(--lh-program-time);
}

.program__desc {
  font-family: var(--font-serif);
  font-size: var(--fs-program-desc);
  font-weight: var(--fw-regular);
  line-height: var(--lh-program-desc);
}

@media (min-width: 1024px) {
  .program__list {
    flex-direction: row;
    justify-content: center;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   03 Место торжества
   -------------------------------------------------------------------------- */
.place {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--place-pad-top) var(--page-pad-x) var(--place-pad-bottom);
  text-align: center;
  gap: var(--place-title-gap);
}

.place__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.place__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--place-text-max);
  gap: var(--place-stack-gap);
  text-align: center;
}

.place__body,
.place__lead,
.place__address {
  font-family: var(--font-serif);
  font-size: var(--fs-place-body);
  line-height: var(--lh-place-body);
  text-align: center;
}

.place__body,
.place__lead {
  font-weight: var(--fw-regular);
}

.place__address {
  font-weight: var(--fw-medium);
}

.place__restaurant {
  font-family: var(--font-script);
  font-size: var(--fs-restaurant);
  font-weight: var(--fw-regular);
  line-height: var(--lh-restaurant);
  text-align: center;
}

.place__text .btn {
  margin-top: 0;
}

.place__map {
  display: none;
  width: 100%;
  height: var(--place-map-h);
  overflow: hidden;
  background-color: var(--color-white);
}

.place__map iframe {
  width: 100%;
  height: 100%;
}

@media (min-width: 1024px) {
  .place__content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--place-col-gap);
    max-width: var(--content-max);
  }

  .place__text {
    flex: 1 1 0;
    max-width: none;
    width: auto;
  }

  .place__body,
  .place__lead,
  .place__address {
    max-width: var(--place-text-max);
  }

  .place__map {
    display: block;
    flex: 0 0 var(--place-map-w);
    width: var(--place-map-w);
    height: var(--place-map-h);
  }

  .place__text .btn {
    font-size: 16px;
    min-height: 50px;
    padding: 14px 24px;
  }
}

/* --------------------------------------------------------------------------
   04 Дресс-код
   -------------------------------------------------------------------------- */
.dresscode {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--dress-pad-top) var(--page-pad-x) var(--dress-pad-bottom);
  text-align: center;
}

.dresscode .section-title {
  margin-bottom: var(--dress-title-gap);
}

.dresscode__groups {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--dress-groups-gap);
}

.dresscode__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dress-group-gap);
  width: 100%;
}

.dresscode__subtitle {
  font-family: var(--font-script);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-regular);
  line-height: var(--lh-subtitle);
  text-align: center;
}

.dresscode__note,
.details__text {
  max-width: var(--dress-note-max);
  font-family: var(--font-serif);
  font-size: var(--fs-place-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-place-body);
  text-align: center;
}

.dresscode__note {
  margin-top: var(--dress-note-gap);
}

.details__text {
  max-width: var(--details-text-max);
}

@media (min-width: 1024px) {
  .dresscode__groups {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    max-width: 1000px;
  }

  .dresscode__group {
    width: var(--dress-group-width);
  }
}

/* --------------------------------------------------------------------------
   05 Детали
   -------------------------------------------------------------------------- */
.details {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--details-pad-top) var(--page-pad-x) var(--details-pad-bottom);
  text-align: center;
  gap: var(--details-title-gap);
}

/* --------------------------------------------------------------------------
   06 Анкета
   -------------------------------------------------------------------------- */
.rsvp {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--rsvp-pad-top) var(--page-pad-x) var(--rsvp-pad-bottom);
}

.rsvp .section-title {
  margin-bottom: var(--rsvp-title-gap);
}

.rsvp__hint {
  max-width: var(--form-max);
  margin-bottom: var(--rsvp-hint-gap);
  font-family: var(--font-ui);
  font-size: var(--fs-hint);
  font-weight: var(--fw-medium);
  line-height: var(--lh-hint);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.rsvp__form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--form-max);
}

.rsvp__form > :nth-child(2) {
  margin-top: var(--rsvp-field-gap);
}

.rsvp__form > :nth-child(3),
.rsvp__form > :nth-child(4) {
  margin-top: var(--rsvp-block-gap);
}

.rsvp__form > :nth-child(5) {
  margin-top: var(--rsvp-btn-gap);
}

.field--choice {
  gap: var(--meat-gap);
}

.field--choice .field__label {
  font-weight: var(--fw-medium);
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.choice__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.choice__input + .choice__text {
  position: relative;
  padding-left: calc(var(--radio-size) + 10px);
  font-family: var(--font-serif);
  font-size: var(--fs-field);
  font-weight: var(--fw-regular);
  line-height: var(--lh-field);
}

.choice__input + .choice__text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: var(--radio-size);
  height: var(--radio-size);
  border: 1px solid var(--color-border);
  background: transparent;
}

.choice__input:checked + .choice__text::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  translate: 0 -50%;
  width: 10px;
  height: 10px;
  background: var(--color-text);
}

.choice__input:focus-visible + .choice__text::before {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.rsvp__form .btn--submit {
  width: 100%;
}

.rsvp__form .btn--submit:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

.field__error {
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: #8b1e1e;
  text-align: left;
}

.field__error:empty {
  display: none;
}

.field.is-invalid .field__input {
  border-bottom-color: #8b1e1e;
}

.field.is-invalid .field__label,
.field.is-invalid.field--choice .field__label {
  color: #8b1e1e;
}

/* ActiveForm checkboxList */
.field--choice .choice-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rsvp__success {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: var(--fs-place-body);
  line-height: var(--lh-place-body);
  text-align: center;
}

/* Scroll reveal: без JS контент виден; анимация только при работающем JS */
.js-reveal {
  opacity: 1;
  transform: none;
}

html.js-enabled .js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

html.js-enabled .js-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Фоновая музыка
   -------------------------------------------------------------------------- */
.wedding-music {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.music-gate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-pad-x);
  background: rgba(245, 245, 245, 0.96);
  backdrop-filter: blur(6px);
}

.music-gate[hidden] {
  display: none !important;
}

.music-gate__inner {
  max-width: 320px;
  text-align: center;
}

.music-gate__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-script);
  font-size: 36px;
  line-height: 1.1;
  color: var(--color-text);
}

.music-gate__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-text);
}

.music-gate__note {
  margin: 0 0 28px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.65;
}

.music-gate__btn {
  min-width: 200px;
}

.music-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(20, 20, 20, 0.08);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.music-toggle[hidden] {
  display: none !important;
}

.music-toggle:active {
  transform: scale(0.96);
}

.music-toggle.is-paused .music-toggle__icon--on {
  opacity: 0.35;
}

.music-toggle:not(.is-paused) .music-toggle__icon--off {
  display: none;
}

.music-toggle.is-paused .music-toggle__icon--off {
  display: block;
  opacity: 0.5;
  text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   Map service sheet (Яндекс / 2ГИС)
   -------------------------------------------------------------------------- */
.map-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.map-sheet[hidden] {
  display: none;
}

.map-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.map-sheet__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  padding: 12px 24px 40px;
  border-radius: 20px 20px 0 0;
  background: var(--color-white);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.map-sheet.is-open .map-sheet__backdrop {
  opacity: 1;
}

.map-sheet.is-open .map-sheet__panel {
  transform: translateY(0);
}

.map-sheet__handle {
  width: 40px;
  height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: #ccc;
}

.map-sheet__title {
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  text-align: left;
  color: #1f1f1f;
}

.map-sheet__sub {
  margin-bottom: 20px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  text-align: left;
  color: #737373;
}

.map-sheet__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.map-sheet__option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #f5f1ec;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.map-sheet__option:hover {
  background: #ebe4dc;
}

.map-sheet__option:active {
  transform: scale(0.99);
}

.map-sheet__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: #fff;
  flex-shrink: 0;
}

.map-sheet__icon--yandex {
  background: #f23333;
}

.map-sheet__icon--2gis {
  background: #0d8c59;
}

.map-sheet__option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.map-sheet__option-name {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: #1f1f1f;
}

.map-sheet__option-desc {
  font-family: var(--font-ui);
  font-size: 12px;
  color: #737373;
}

.map-sheet__chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid #b0b0b0;
  border-bottom: 2px solid #b0b0b0;
  transform: rotate(-45deg);
  flex-shrink: 0;
}

.map-sheet__cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: #737373;
  background: transparent;
}

.map-sheet__cancel:hover {
  color: #1f1f1f;
}

body.is-map-sheet-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Dress code examples sheet
   -------------------------------------------------------------------------- */
.dress-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.dress-sheet[hidden] {
  display: none;
}

.dress-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.dress-sheet__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 480px);
  max-height: min(92vh, 900px);
  padding: 12px 20px 28px;
  border-radius: 20px 20px 0 0;
  background: #f7f4ef;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.dress-sheet.is-open .dress-sheet__backdrop {
  opacity: 1;
}

.dress-sheet.is-open .dress-sheet__panel {
  transform: translateY(0);
}

.dress-sheet__handle {
  width: 40px;
  height: 4px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: #ccc;
  flex-shrink: 0;
}

.dress-sheet__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.dress-sheet__accent {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--swatch, #ccc);
  flex-shrink: 0;
}

.dress-sheet__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.dress-sheet__badge {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #737373;
  line-height: 1.2;
}

.dress-sheet__title {
  margin: 0;
  font-family: var(--font-script);
  font-size: 32px;
  font-weight: var(--fw-regular);
  line-height: 1.15;
  color: #141414;
  text-align: left;
}

.dress-sheet__gallery {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 14px;
  background: #f7f4ef;
}

.dress-sheet__image {
  display: block;
  width: 100%;
  height: auto;
}

.dress-sheet__palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  flex-shrink: 0;
}

.dress-sheet__palette li {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--swatch, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.dress-sheet__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #141414;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease;
}

.dress-sheet__close:hover {
  background: rgba(20, 20, 20, 0.04);
}

body.is-dress-sheet-open {
  overflow: hidden;
}

@media (min-width: 768px) {
  .dress-sheet {
    align-items: center;
    padding: 24px;
  }

  .dress-sheet__panel {
    border-radius: 16px;
    max-height: min(90vh, 860px);
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .dress-sheet.is-open .dress-sheet__panel {
    transform: none;
    opacity: 1;
  }

  .dress-sheet__handle {
    display: none;
  }

  .dress-sheet__title {
    font-size: 36px;
  }
}

@media (min-width: 768px) {
  .map-sheet {
    align-items: center;
    padding: 24px;
  }

  .map-sheet__panel {
    border-radius: 16px;
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .map-sheet.is-open .map-sheet__panel {
    transform: none;
    opacity: 1;
  }

  .map-sheet__handle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   07 Footer
   -------------------------------------------------------------------------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--footer-pad-top) var(--page-pad-x) var(--footer-pad-bottom);
  text-align: center;
  gap: var(--footer-gap);
}

.footer__closing {
  max-width: var(--footer-closing-max);
  font-family: var(--font-serif);
  font-size: var(--fs-footer-closing);
  font-weight: var(--fw-regular);
  line-height: var(--lh-footer-closing);
  text-align: center;
}

.footer__love {
  font-family: var(--font-script);
  font-size: var(--fs-footer-love);
  font-weight: var(--fw-regular);
  line-height: var(--lh-footer-love);
  text-align: center;
}

/* --------------------------------------------------------------------------
   10 Адаптив / общие стыки
   -------------------------------------------------------------------------- */
.divider {
  display: none;
  width: 80px;
  height: 1px;
  margin: 4px auto;
  border: 0;
  background-color: var(--color-divider);
}

/* Tablet: карта под текстом, ещё не двухколоночный desktop */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --page-pad-x: clamp(40px, 6vw, 72px);
    --photo-size: min(420px, 70vw);
    --hero-pad-top: 80px;
    --fs-section-title: 60px;
    --lh-section-title: 84px;
    --form-max: min(520px, 100%);
    --dress-note-max: 520px;
    --details-text-max: 520px;
    --place-text-max: 480px;
  }

  .hero__names {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.2em;
  }

  .hero__name,
  .hero__amp {
    font-size: clamp(56px, 8vw, 70px);
  }

  .place__map {
    display: block;
    width: min(600px, 100%);
    height: 340px;
    margin-top: 28px;
  }

  .dresscode__groups {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
  }

  .dresscode__group {
    width: min(400px, 45%);
  }

  .program__list {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
  }

  .program__item {
    width: 180px;
  }
}

@media (min-width: 1024px) {
  .divider {
    display: block;
  }

  :root {
    --page-pad-x: clamp(48px, 7vw, 100px);
  }

  .hero {
    min-height: auto;
  }

  .place__content {
    width: 100%;
  }
}

/* Узкий desktop: карта не ломает ряд */
@media (min-width: 1024px) and (max-width: 1199px) {
  :root {
    --place-map-w: min(480px, 42vw);
    --place-map-h: 360px;
    --hero-text-width: min(560px, 48vw);
    --photo-size: min(420px, 40vw);
  }
}

@media (min-width: 1440px) {
  :root {
    --page-pad-x: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .field__input,
  .js-reveal,
  .map-sheet__backdrop,
  .map-sheet__panel,
  .dress-sheet__backdrop,
  .dress-sheet__panel {
    transition: none;
  }

  .js-reveal {
    opacity: 1;
    transform: none;
  }

  .map-sheet__panel {
    transform: none;
    opacity: 1;
  }

  .dress-sheet__panel {
    transform: none;
    opacity: 1;
  }

  .btn:active,
  .btn.is-pressed,
  .btn--submit:active,
  .btn--submit.is-pressed {
    transform: none;
  }
}