/* ============================================================================
   Шрифты (self-host, кириллица). Объявлены вне @layer — @font-face не каскадируется.
   Display: Cormorant Garamond (вариативный subset 500–600).
   Текст:   PT Serif (400/700).
   ============================================================================ */

/* --- Cormorant Garamond (display) --- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- PT Serif (текст) 400 --- */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/pt-serif-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/pt-serif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- PT Serif (текст) 700 --- */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/pt-serif-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/pt-serif-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   Порядок слоёв каскада. Объявлен заранее — определяет приоритет независимо от
   порядка написания правил ниже.
   ============================================================================ */
@layer tokens, base, layout, components, sections, utilities;

/* ============================================================================
   TOKENS — дизайн-система: палитра, типографика, отступы, контейнеры, радиусы,
   z-index. Всё остальное опирается на эти переменные.
   ============================================================================ */
@layer tokens {
  :root {
    /* --- Палитра (editorial-свадебная, по reference.png) --- */
    --c-green-900: #3e4f27; /* самый тёмный фон (осветлён ещё, тёплый оливковый) */
    --c-green-800: #586a49; /* основной тёмный блок (осветлён ещё, мягкий лесной) */
    --c-green-700: #5a6c56; /* тёмный акцент/границы (осветлён ещё) */
    --c-ivory: #f7f2ea; /* основной светлый фон (чуть светлее/теплее) */
    --c-cream: #efe7d6; /* тёплый светлый акцент (чуть светлее) */
    --c-gold: #b08d57; /* приглушённый золотой акцент */
    --c-gold-soft: #c9b08a; /* мягкий золотой (линии, бейджи) */
    --c-near-black: #14150f; /* фон под фото */
    --c-ink: #23271f; /* основной текст на светлом */
    --c-ink-soft: #4d5347; /* вторичный текст на светлом */
    --c-on-dark: #f3ede2; /* текст на тёмном */
    --c-on-dark-soft: #c4c9ba; /* вторичный текст на тёмном */

    /* Семантические роли (используются в компонентах/секциях) */
    --bg-page: var(--c-ivory);
    --text-base: var(--c-ink);
    --text-muted: var(--c-ink-soft);
    --accent: var(--c-gold);

    /* --- Типографика --- */
    --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
    --font-text: 'PT Serif', Georgia, 'Times New Roman', serif;

    /* Типошкала (mobile-first, плавная через clamp) */
    --fs-100: clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem); /* мелкий/капс */
    --fs-200: clamp(0.92rem, 0.88rem + 0.25vw, 1rem); /* подписи */
    --fs-300: clamp(1rem, 0.95rem + 0.35vw, 1.13rem); /* базовый текст */
    --fs-400: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem); /* лид/крупный текст */
    --fs-500: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); /* подзаголовки */
    --fs-600: clamp(2.1rem, 1.6rem + 2.6vw, 3.6rem); /* заголовки секций */
    --fs-700: clamp(2.8rem, 1.9rem + 4.6vw, 6rem); /* обложка/имена */

    --lh-tight: 1.05;
    --lh-snug: 1.25;
    --lh-base: 1.6;
    --tracking-caps: 0.22em; /* разрядка для капс-надписей */
    --tracking-wide: 0.06em;

    /* --- Отступы (шкала по 4px) --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* Вертикальный ритм секций (mobile → desktop) */
    --section-pad-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);

    /* --- Контейнеры --- */
    --container-narrow: 38rem; /* текстовые блоки */
    --container: 60rem; /* основной */
    --container-wide: 75rem; /* широкие медиа-секции */
    --page-shell-width: 37.5rem; /* 600px: центральная лента сайта на широких экранах */
    --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

    /* --- Радиусы --- */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-card: 0.25rem; /* editorial-карточки почти прямые */
    --radius-pill: 999px;

    /* --- Тени --- */
    --shadow-card: 0 18px 50px -24px rgba(20, 21, 15, 0.55);
    --shadow-soft: 0 10px 30px -18px rgba(20, 21, 15, 0.4);

    /* --- z-index-слои --- */
    --z-deco: 1; /* декоративные оверлеи за контентом */
    --z-base: 2; /* контент секций */
    --z-overlap: 5; /* перекрывающие карточки */
    --z-header: 50;
    --z-modal: 100;

    /* --- Длительности анимаций --- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-reveal: 0.8s;
  }
}

/* ============================================================================
   BASE — reset, корневые элементы, базовая типографика.
   ============================================================================ */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

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

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    min-height: 100vh;
    font-family: var(--font-text);
    font-size: var(--fs-300);
    line-height: var(--lh-base);
    color: var(--text-base);
    background:
      radial-gradient(80% 60% at 50% 0%, rgba(201, 176, 138, 0.16), transparent 60%),
      linear-gradient(180deg, #e6ddcd, #d7cbb8 42%, #4d5f3b 100%);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  main {
    width: min(100%, var(--page-shell-width));
    margin-inline: auto;
    background: var(--bg-page);
    box-shadow:
      0 0 0 1px rgba(255, 250, 242, 0.18),
      0 0 72px rgba(20, 21, 15, 0.26);
  }

  img,
  picture,
  svg,
  video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: 0.01em;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-700);
  }
  h2 {
    font-size: var(--fs-600);
  }
  h3 {
    font-size: var(--fs-500);
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  a:hover {
    color: var(--accent);
  }

  ul {
    list-style: none;
    padding: 0;
  }

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

/* ============================================================================
   LAYOUT — контейнеры, базовая сетка и ритм секций (mobile-first).
   ============================================================================ */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--narrow {
    max-width: var(--container-narrow);
  }

  .container--wide {
    max-width: var(--container-wide);
  }

  /* Секция — базовый строительный блок лендинга */
  .section {
    position: relative;
    padding-block: var(--section-pad-y);
    isolation: isolate; /* локальный контекст наложений для z-index-токенов */
  }

  /* Чередование тёмных/светлых блоков */
  .section--light {
    background: var(--c-ivory);
    color: var(--c-ink);
  }
  .section--cream {
    background: var(--c-cream);
    color: var(--c-ink);
  }
  .section--dark {
    background: var(--c-green-800);
    color: var(--c-on-dark);
  }
  .section--darker {
    background: var(--c-green-900);
    color: var(--c-on-dark);
  }

  /* Вертикальный поток внутри секции */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .stack--lg {
    gap: var(--space-6);
  }

  /* Центрированная колонка контента */
  .col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
  }
}

/* ============================================================================
   UTILITIES — мелкие помощники.
   ============================================================================ */
@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .text-center {
    text-align: center;
  }

  .accent {
    color: var(--accent);
  }

  /* Капс-надпись с разрядкой (eyebrow / SAVE THE DATE) */
  .eyebrow {
    font-family: var(--font-text);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--accent);
  }
}

/* ============================================================================
   COMPONENTS — переиспользуемые элементы: кнопки, разделители, карточки,
   бейджи, монограмма, фото-разделители, модалка.
   ============================================================================ */
@layer components {
  /* --- Кнопки --- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.85em 1.8em;
    font-family: var(--font-text);
    font-size: var(--fs-200);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.2s var(--ease-out), background-color 0.2s ease,
      color 0.2s ease, border-color 0.2s ease;
  }
  .btn:hover {
    transform: translateY(-2px);
  }
  .btn:disabled {
    opacity: 0.62;
    cursor: wait;
    transform: none;
  }
  .btn--solid {
    background: var(--c-gold);
    color: var(--c-near-black);
    border-color: var(--c-gold);
  }
  .btn--solid:hover {
    background: var(--c-gold-soft);
    color: var(--c-near-black);
  }
  .btn--outline {
    background: transparent;
    border-color: currentColor;
    color: inherit;
  }
  .btn--outline:hover {
    background: var(--c-gold);
    border-color: var(--c-gold);
    color: var(--c-near-black);
  }

  /* --- Волнистые/кривые разделители секций ---
     ::after на секции: блок цвета следующей секции, обрезанный волной-маской и
     спущенный вниз — создаёт ощущение, что следующий блок «вытекает» волной.
     Цвет задаётся переменной --wave-fill в слое sections для конкретной пары. */
  :root {
    --wave-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,48 C220,118 480,4 720,40 C940,72 1080,108 1200,64 L1200,120 L0,120 Z'/%3E%3C/svg%3E");
  }
  .section {
    --wave-fill: transparent;
    --wave-on: 0;
  }
  .section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: clamp(40px, 6vw, 96px);
    background: var(--wave-fill);
    -webkit-mask: var(--wave-shape) bottom / 100% 100% no-repeat;
    mask: var(--wave-shape) bottom / 100% 100% no-repeat;
    opacity: var(--wave-on);
    z-index: var(--z-overlap);
    pointer-events: none;
  }

  /* Тонкая золотая разделительная линия */
  .rule {
    width: clamp(48px, 8vw, 96px);
    height: 1px;
    background: var(--c-gold);
    border: 0;
    opacity: 0.7;
  }

  /* --- Фото-разделители между блоками (full-bleed, рваные края, наезд) ---
     Маска даёт волнообразно «оборванные» верх и низ; отрицательные внешние
     отступы заводят фото на соседние секции, а прозрачные зоны рвани открывают
     их фон — фото интегрируется в окружение, а не лежит ровным прямоугольником. */
  .photo-divider {
    /* верхняя кромка: непрозрачно под волной (рваный верх) */
    --wave-cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,48 C220,118 480,4 720,40 C940,72 1080,108 1200,64 L1200,120 L0,120 Z'/%3E%3C/svg%3E");
    /* нижняя кромка: зеркальная волна (рваный низ) */
    --wave-cut-flip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,72 C220,2 480,116 720,80 C940,48 1080,12 1200,56 L1200,0 L0,0 Z'/%3E%3C/svg%3E");
    position: relative;
    z-index: var(--z-overlap);
    height: clamp(220px, 45vh, 460px);
    /* наезд на соседние секции сверху и снизу */
    margin-block: calc(-1 * clamp(28px, 4vw, 56px));
    overflow: hidden;
    background: var(--c-near-black);
    -webkit-mask:
      var(--wave-cut) top / 100% 48px no-repeat,
      linear-gradient(#000, #000) center / 100% calc(100% - 88px) no-repeat,
      var(--wave-cut-flip) bottom / 100% 48px no-repeat;
    mask:
      var(--wave-cut) top / 100% 48px no-repeat,
      linear-gradient(#000, #000) center / 100% calc(100% - 88px) no-repeat,
      var(--wave-cut-flip) bottom / 100% 48px no-repeat;
  }
  .photo-divider picture,
  .photo-divider img {
    width: 100%;
    height: 100%;
  }
  .photo-divider img {
    object-fit: cover;
    object-position: center;
  }
  /* Лёгкий scrim, чтобы соседние секции мягко стыковались с фото */
  .photo-divider::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(20, 21, 15, 0.3),
      rgba(20, 21, 15, 0) 28%,
      rgba(20, 21, 15, 0) 72%,
      rgba(20, 21, 15, 0.3)
    );
    z-index: var(--z-base);
  }
  /* --- photo_4: рамка-сердце с рваным, «нарисованным от руки» краем (в блоке анкеты) --- */
  /* К гладкому контуру сердца применён feTurbulence + смещение (feDisplacementMap),
     поэтому край получается дрожащим/рваным — как обведённый рукой. Тот же фильтр
     с тем же seed используется для линии-рамки, чтобы она ложилась ровно на край.
     Тёмно-зелёный фон секции анкеты «закрывает» углы фото — как лист бумаги
     перекрывает края фото в reference_3.png. */
  .heart-photo__frame {
    --heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cdefs%3E%3Cfilter id='hr' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='13' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23hr)' fill='%23fff' d='M100 168 C38 120 10 80 10 48 C10 20 32 6 55 6 C77 6 92 20 100 38 C108 20 123 6 145 6 C168 6 190 20 190 48 C190 80 162 120 100 168 Z'/%3E%3C/svg%3E");
    --heart-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cdefs%3E%3Cfilter id='hl' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='13' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23hl)' fill='none' stroke='%23c9b08a' stroke-width='2.4' stroke-linejoin='round' d='M100 168 C38 120 10 80 10 48 C10 20 32 6 55 6 C77 6 92 20 100 38 C108 20 123 6 145 6 C168 6 190 20 190 48 C190 80 162 120 100 168 Z'/%3E%3C/svg%3E");
    position: relative;
    width: min(74vw, 340px);
    aspect-ratio: 200 / 180;
    /* Небольшие отрицательные поля гасят прозрачную кромку сердца (контур не доходит
       до краёв box) — лишний воздух под фото уходит. Сверху оставляем чуть больше. */
    margin-top: calc(-1 * var(--space-2) + 15px);
    margin-bottom: calc(-1 * var(--space-4));
    filter: drop-shadow(0 16px 34px rgba(8, 12, 5, 0.5));
    transform-origin: 50% 58%;
    animation: heart-photo-beat 3.8s ease-in-out infinite;
    will-change: transform;
  }
  /* picture абсолютным слоем — чтобы высоту рамки задавал aspect-ratio, а не
     интринсик портретного фото (иначе сердце вписывается с прозрачными полями). */
  .heart-photo__frame picture {
    position: absolute;
    inset: 0;
  }
  .heart-photo__frame picture,
  .heart-photo__frame img {
    width: 100%;
    height: 100%;
  }
  /* Кадрируем по сомкнутым рукам — они в центре сердца */
  .heart-photo__frame img {
    object-fit: cover;
    object-position: center 72%;
    -webkit-mask: var(--heart-mask) center / contain no-repeat;
    mask: var(--heart-mask) center / contain no-repeat;
  }
  /* «Нарисованная от руки» линия-рамка поверх рваного края фото */
  .heart-photo__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--heart-line) center / contain no-repeat;
    pointer-events: none;
  }
  @keyframes heart-photo-beat {
    0%,
    46%,
    100% {
      transform: scale(1);
    }
    12% {
      transform: scale(1.018);
    }
    20% {
      transform: scale(0.996);
    }
    30% {
      transform: scale(1.012);
    }
  }
  /* #contacts: снимаем локальную изоляцию, чтобы карточка поднялась НАД
     фото-разделителем (у него z-index: var(--z-overlap)) и наехала на фото,
     при этом кремовый фон секции остаётся под волной фото (как и было). */
  #contacts {
    isolation: auto;
  }
  .contact-card {
    /* Карточка наезжает нижним краем сверху на следующее фото. */
    position: relative;
    z-index: calc(var(--z-overlap) + 1);
    margin-bottom: calc(-1 * var(--section-pad-y) - clamp(40px, 7vw, 72px));
    background: var(--c-ivory);
    color: var(--c-ink);
    border: 1px solid var(--c-gold-soft);
    border-radius: var(--radius-card);
    padding: var(--space-6) var(--space-5);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-width: min(100%, 22rem);
  }
  .contact-card__role {
    font-family: var(--font-text);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--c-gold);
  }
  .contact-card__name {
    font-family: var(--font-display);
    font-size: var(--fs-500);
    font-weight: 600;
  }
  /* Тонкая золотая черта под именем ведущего — отделяет контакты */
  .contact-card__name::after {
    content: "";
    display: block;
    width: clamp(40px, 6vw, 64px);
    height: 1px;
    margin: var(--space-3) auto 0;
    background: var(--c-gold-soft);
    opacity: 0.7;
  }
  .contact-card__line {
    font-size: var(--fs-300);
    color: var(--c-ink-soft);
    transition: color 0.2s ease;
  }
  .contact-card__line:hover {
    color: var(--c-gold);
  }

}

/* ============================================================================
   SECTIONS — стили конкретных блоков лендинга + переходы между ними.
   ============================================================================ */
@layer sections {
  /* --- Чередование тёмных/светлых с мягкими градиентами --- */
  .section--light {
    background: linear-gradient(180deg, var(--c-ivory), #f1ebdf);
  }
  .section--cream {
    background: linear-gradient(180deg, var(--c-cream), #e7dcc8);
  }
  .section--dark {
    background: linear-gradient(180deg, var(--c-green-800), var(--c-green-900));
  }
  .section--darker {
    background: radial-gradient(120% 80% at 50% 0%, #53663a, var(--c-green-900));
  }

  /* --- Переходы между блоками: волна цвета следующей секции --- */
  /* обложка → приглашение (ivory) */
  #cover {
    --wave-fill: var(--c-ivory);
    --wave-on: 1;
  }
  /* приглашение → дата (тёмно-зелёный) */
  #invitation {
    --wave-fill: var(--c-green-800);
    --wave-on: 1;
  }
  /* дата (тёмно-зелёная) → локация (фото): прямой стык, фото со scrim */
  #date {
    --wave-on: 0;
    z-index: calc(var(--z-overlap) + 1);
  }
  /* локация → тайминг (тёмно-зелёный) */
  #location {
    --wave-fill: var(--c-green-800);
    --wave-on: 1;
  }
  /* детали (кремовая) → анкета (тёмно-зелёная): волна зелёного «вытекает» вниз */
  #details {
    --wave-fill: var(--c-green-900);
    --wave-on: 1;
  }
  /* Анкета — последняя секция: убираем лишний воздух под сердцем */
  #rsvp {
    padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
  }

  /* --- Общая типографика секций --- */
  .lead {
    font-size: var(--fs-400);
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--lh-snug);
    max-width: 32ch;
  }

  /* --- Крупная дата над календарём --- */
  .date-headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
    font-family: var(--font-display);
    line-height: 1;
  }
  .date-headline__day {
    font-size: var(--fs-700);
    font-weight: 600;
    color: var(--c-gold);
  }
  .date-headline__rest {
    font-size: var(--fs-500);
    color: var(--c-on-dark);
  }
  .date-headline__weekday {
    font-family: var(--font-text);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--c-on-dark-soft);
    margin-top: var(--space-2);
  }

  /* --- Календарь августа: frameless, дата-сердце, наезд на фото снизу --- */
  /* Фон прозрачен сверху и плотно-зелёный снизу: на секции панели не видно
     (frameless), но нижняя часть непрозрачна и «наезжает» на фото локации, не
     просвечивая. Ширина ограничена — по бокам виден блок ниже. */
  .calendar {
    position: relative;
    max-width: 22rem;
    width: 100%;
    margin-inline: auto;
    padding: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem) clamp(1.5rem, 1rem + 2vw, 2.25rem);
    background: var(--c-green-900);
    z-index: var(--z-overlap);
    margin-bottom: calc(-1 * var(--section-pad-y) - clamp(40px, 7vw, 72px));
  }
  /* Угловые орнаменты-лозы (ornament.svg) — только низ-слева и верх-справа.
     Перекрашиваем в золото через mask (исходник одноцветный, fill #000). */
  .calendar__corner {
    position: absolute;
    width: clamp(5rem, 3.5rem + 7vw, 8rem);
    aspect-ratio: 1280 / 1266;
    background-color: var(--c-gold-soft);
    -webkit-mask: url('/images/ornament.svg') no-repeat center / contain;
    mask: url('/images/ornament.svg') no-repeat center / contain;
    opacity: 0.9;
    pointer-events: none;
  }
  .calendar__corner--bl {
    left: -0.75rem;
    bottom: -0.75rem;
  }
  /* Верх-справа: разворачиваем нижне-левый уголок на 180° */
  .calendar__corner--tr {
    top: -0.75rem;
    right: -0.75rem;
    transform: rotate(180deg);
  }
  .calendar__table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  }
  .calendar__table th {
    font-family: var(--font-text);
    font-size: var(--fs-100);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--c-gold-soft);
    padding-bottom: var(--space-3);
  }
  .calendar__table td {
    font-family: var(--font-display);
    font-size: var(--fs-400);
    font-weight: 500;
    padding: 0.28em 0;
    color: var(--c-on-dark);
  }
  /* Выделенный день — число на золотом сердце */
  .calendar__day-marked {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 1.8em;
    height: 1.8em;
    line-height: 1;
  }
  .calendar__heart-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.05em;
    height: 2.05em;
    transform: translate(-50%, -52%);
    color: var(--c-gold);
    pointer-events: none;
  }
  .calendar__heart-bg path {
    fill: currentColor;
  }
  .calendar__day-num {
    position: relative;
    z-index: 1;
    font-weight: 600;
    line-height: 1;
    transform: translate(0.12em, -0.2em);
    color: var(--c-near-black);
  }

  /* --- Тайминг --- */
  .timeline {
    width: 100%;
    max-width: 26rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .timeline__item {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(201, 176, 138, 0.25);
    text-align: left;
  }
  .timeline__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .timeline__time {
    font-family: var(--font-display);
    font-size: var(--fs-500);
    font-weight: 600;
    color: var(--c-gold-soft);
  }
  .timeline__label {
    font-family: var(--font-display);
    font-size: var(--fs-400);
  }

  /* --- Локация: фото на фоне (full-bleed), текст поверх со scrim --- */
  .section--location {
    min-height: clamp(30rem, 80vh, 46rem);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--c-on-dark);
    text-align: center;
  }
  .location__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .location__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* Scrim для читабельности текста поверх фото: затемнение по центру + краям */
  .section--location::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(120% 75% at 50% 50%, rgba(20, 21, 15, 0.6), rgba(20, 21, 15, 0) 72%),
      linear-gradient(
        to bottom,
        rgba(20, 21, 15, 0.5) 0%,
        rgba(20, 21, 15, 0.35) 40%,
        rgba(20, 21, 15, 0.5) 74%,
        rgba(20, 21, 15, 0.8) 100%
      );
  }
  .location__inner {
    position: relative;
    z-index: var(--z-base);
  }
  .location__title {
    color: #fffaf2;
    text-shadow: 0 2px 28px rgba(20, 21, 15, 0.8), 0 1px 4px rgba(20, 21, 15, 0.7);
  }
  /* --- Анкета: дедлайн --- */
  .rsvp__deadline {
    white-space: nowrap;
    border-bottom: 1px solid var(--c-gold);
  }
}

/* ============================================================================
   COMPONENTS (доп.) — наложения, бейджи, декоративные оверлеи (Задача 6).
   ============================================================================ */
@layer components {
  /* --- Бейдж (капс-пилюля поверх фото/секций) --- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1.1em;
    font-family: var(--font-text);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--c-on-dark);
    background: rgba(20, 21, 15, 0.35);
    border: 1px solid var(--c-gold-soft);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(2px);
  }

  /* --- Декоративный флоральный оверлей за границами блоков --- */
  /* Тонкая ботаническая ветка из SVG, вынесенная за край секции. */
  .deco-leaf {
    --leaf-rotate: 0deg;
    --leaf-drift-x: 1rem;
    --leaf-drift-y: 2.45rem;
    position: absolute;
    z-index: var(--z-deco);
    width: clamp(120px, 22vw, 280px);
    aspect-ratio: 1;
    background: var(--deco-color, rgba(176, 141, 87, 0.5));
    -webkit-mask: var(--leaf-shape) center / contain no-repeat;
    mask: var(--leaf-shape) center / contain no-repeat;
    opacity: 0.55;
    pointer-events: none;
    transform: translate3d(0, 0, 0) rotate(var(--leaf-rotate));
    transform-origin: 50% 18%;
    animation: deco-leaf-drift 8s ease-in-out infinite alternate;
  }
  :root {
    --leaf-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 C30 24 20 44 24 70 C26 84 38 94 50 96 C62 94 74 84 76 70 C80 44 70 24 50 4 Z M50 18 L50 90' fill='none' stroke='black' stroke-width='3'/%3E%3Cpath d='M50 40 C40 38 32 34 28 28 M50 56 C40 54 32 50 28 44 M50 40 C60 38 68 34 72 28 M50 56 C60 54 68 50 72 44' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
  }
  .deco-leaf--tl {
    --leaf-rotate: -18deg;
    --leaf-drift-x: clamp(0.75rem, 1.9vw, 1.35rem);
    --leaf-drift-y: clamp(1.55rem, 3.8vw, 2.75rem);
    top: -3%;
    left: -4%;
  }
  .deco-leaf--br {
    --leaf-rotate: 168deg;
    --leaf-drift-x: clamp(-1.35rem, -1.9vw, -0.75rem);
    --leaf-drift-y: clamp(1.65rem, 4vw, 2.9rem);
    bottom: -4%;
    right: -4%;
    animation-duration: 9.5s;
  }
  @keyframes deco-leaf-drift {
    0% {
      transform: translate3d(0, 0, 0) rotate(calc(var(--leaf-rotate) - 0.8deg));
    }
    55% {
      transform: translate3d(
          calc(var(--leaf-drift-x) * 0.55),
          calc(var(--leaf-drift-y) * 0.6),
          0
        )
        rotate(calc(var(--leaf-rotate) + 0.7deg));
    }
    100% {
      transform: translate3d(var(--leaf-drift-x), var(--leaf-drift-y), 0)
        rotate(calc(var(--leaf-rotate) + 1.4deg));
    }
  }

  /* --- Боковой арт-декор (роза, сердца) — едва заметные акценты по краям.
     Перекрашиваются через mask под цвет фона, с низкой непрозрачностью. --- */
  .deco-art {
    position: absolute;
    z-index: var(--z-deco);
    background-color: var(--deco-color, var(--c-gold-soft));
    -webkit-mask: var(--art-shape) center / contain no-repeat;
    mask: var(--art-shape) center / contain no-repeat;
    opacity: 0.1;
    pointer-events: none;
  }
  #timing {
    overflow-x: clip;
  }
  #contacts .container {
    position: relative;
    z-index: calc(var(--z-overlap) + 1);
  }
  .deco-art--flower {
    --art-shape: url('/images/flower.svg');
    width: clamp(170px, 26vw, 360px);
    aspect-ratio: 1280 / 986;
  }
  .deco-art--hearts {
    --art-shape: url('/images/hearts.svg');
    width: clamp(150px, 22vw, 300px);
    aspect-ratio: 1280 / 798;
  }
  /* Размещение конкретных экземпляров */
  .deco-art--timing {
    top: 6%;
    right: -7%;
    transform: rotate(6deg);
  }
  .deco-art--contacts {
    --deco-color: var(--c-green-700);
    left: clamp(-4rem, -6vw, -1.5rem);
    bottom: 10%;
    width: clamp(170px, 24vw, 320px);
    opacity: 0.09;
    transform: rotate(10deg);
  }

  /* --- Карточка поверх фото (ivory-card overlap) --- */
  .overlap-card {
    position: relative;
    z-index: var(--z-overlap);
    background: var(--c-ivory);
    color: var(--c-ink);
    border: 1px solid var(--c-gold-soft);
    box-shadow: var(--shadow-card);
    padding: var(--space-6);
  }
}

/* ============================================================================
   SECTIONS (доп.) — обложка с текстом поверх фото + наложения (Задача 6).
   ============================================================================ */
@layer sections {
  /* --- Обложка: текст поверх photo_1 со scrim --- */
  .section--cover {
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding-block: clamp(4rem, 10vh, 8rem);
    color: var(--c-on-dark);
    text-align: center;
  }
  .cover__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .cover__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
  }
  /* Scrim для читабельности текста поверх фото */
  .section--cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(20, 21, 15, 0.5) 0%,
        rgba(20, 21, 15, 0.2) 32%,
        rgba(20, 21, 15, 0.55) 68%,
        rgba(20, 21, 15, 0.9) 100%
      );
  }
  .cover__inner {
    position: relative;
    z-index: var(--z-base);
    gap: var(--space-4);
  }
  .cover__title {
    font-size: var(--fs-700);
    font-weight: 600;
    line-height: 0.95;
    color: #fffaf2;
    text-shadow: 0 2px 30px rgba(20, 21, 15, 0.75), 0 1px 4px rgba(20, 21, 15, 0.6);
  }
  .cover__amp {
    display: block;
    font-style: italic;
    font-weight: 500;
    color: var(--c-gold);
    font-size: 0.7em;
    line-height: 1;
    margin-block: 0.05em;
  }
  .cover__verse {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-400);
    max-width: 26ch;
    margin-inline: auto;
    color: #f6f1e8;
    text-shadow: 0 1px 18px rgba(20, 21, 15, 0.9), 0 1px 4px rgba(20, 21, 15, 0.7);
  }
  .cover__verse-ref {
    display: block;
    margin-top: var(--space-2);
    font-style: normal;
    font-size: var(--fs-100);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--c-gold-soft);
  }
  /* Индикатор «листать вниз» */
  .cover__scroll {
    position: absolute;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-base);
  }
  .cover__scroll-line {
    display: block;
    width: 1px;
    height: clamp(36px, 7vh, 64px);
    background: linear-gradient(var(--c-gold-soft), transparent);
  }

  /* Декоративные оверлеи в светлых секциях (флораль за границами блоков) */
  #invitation,
  #details {
    overflow: clip;
  }
}

/* ============================================================================
   SECTIONS (доп.) — асимметричная/offset-раскладка на широких экранах (Задача 7).
   Базовая (mobile) раскладка — выше; здесь смещения для desktop.
   ============================================================================ */
@layer sections {
  @media (min-width: 56rem) {
    /* --- Тайминг: сдвиг колонки к левому краю (асимметрия) --- */
    /* --- Приглашение: смещение текстовой колонки вправо --- */
    #invitation .container {
      margin-inline: auto 0;
      margin-right: clamp(2rem, 10vw, 7rem);
    }
  }
}

/* ============================================================================
   SECTIONS (доп.) — mobile-first адаптив: брейкпоинты и перестройка на узких
   экранах (Задача 8). База выше — одноколоночная, типографика/отступы на clamp.
   ============================================================================ */
@layer sections {
  /* Очень узкие экраны (~360px) — поджать декор и календарь */
  @media (max-width: 26rem) {
    .calendar {
      padding: var(--space-6) var(--space-4);
    }
    .calendar__table td {
      font-size: 1.05rem;
    }
    .calendar__table th {
      font-size: 0.72rem;
    }
    .deco-leaf {
      opacity: 0.35;
    }
    .timeline__item {
      grid-template-columns: 3.6rem 1fr;
      gap: var(--space-3);
    }
  }

  /* Планшет: фото-разделители выше, контактная карточка шире */
  @media (min-width: 40rem) {
    .photo-divider {
      height: clamp(280px, 40vh, 520px);
    }
  }

  /* Десктоп: ограничить высоту фото-разделителей, добавить «дыхание» секциям */
  @media (min-width: 64rem) {
    .photo-divider {
      height: clamp(360px, 52vh, 620px);
    }
  }

  /* На устройствах с тонким указателем убрать «прыжок» кнопок без hover */
  @media (hover: none) {
    .btn:hover {
      transform: none;
    }
  }
}

/* ============================================================================
   COMPONENTS (доп.) — scroll-reveal, parallax, модалка (Задача 9).
   ============================================================================ */
@layer components {
  /* --- Scroll-reveal: начальное состояние и появление --- */
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-reveal) var(--ease-out),
      transform var(--dur-reveal) var(--ease-out);
    will-change: opacity, transform;
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  /* Если JS не загрузился — контент всё равно виден */
  .no-js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  /* Уважение к prefers-reduced-motion: без сдвигов и параллакса */
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .cover__img {
      transform: none !important;
    }
    .deco-leaf {
      animation: none;
    }
    .heart-photo__frame {
      animation: none;
      transform: none;
    }
  }

  /* --- Модальное окно анкеты --- */
  .modal {
    position: fixed;
    inset: 0;
    width: min(92vw, 34rem);
    max-height: 90svh;
    margin: auto;
    padding: 0;
    border: 1px solid var(--c-gold-soft);
    border-radius: var(--radius-md);
    background: var(--c-ivory);
    color: var(--c-ink);
    box-shadow: var(--shadow-card);
  }
  .modal::backdrop {
    background: rgba(20, 21, 15, 0.6);
    backdrop-filter: blur(3px);
  }
  .modal__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: calc(90svh - 2px);
    padding: var(--space-7) var(--space-6) var(--space-6);
    overflow-y: auto;
  }
  .modal__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--c-ink-soft);
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .modal__close:hover {
    color: var(--c-gold);
  }
  .modal__title {
    font-size: var(--fs-500);
  }
  .modal__hint,
  .modal__note {
    font-size: var(--fs-200);
    color: var(--c-ink-soft);
  }
  .modal__note {
    font-style: italic;
  }
  .modal__guests {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .guest-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-2);
    border: 0;
    padding: 0;
    margin: 0;
  }
  .guest-row .field {
    min-width: 0;
  }
  .guest-row__child {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: 0.62em 0.75em;
    border: 1px solid var(--c-gold-soft);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.72);
    color: var(--c-ink-soft);
    font-size: var(--fs-200);
    cursor: pointer;
    white-space: nowrap;
  }
  .guest-row__child input {
    accent-color: var(--c-gold);
  }
  .guest-row__remove {
    grid-column: 2;
    justify-self: end;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-ink-soft);
    font: inherit;
    font-size: var(--fs-100);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }
  .guest-row__remove:hover {
    color: var(--c-gold);
  }
  .guest-row .field__error {
    grid-column: 1 / -1;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .field__label {
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--c-ink-soft);
  }
  .field__input {
    width: 100%;
    font: inherit;
    padding: 0.7em 0.9em;
    border: 1px solid var(--c-gold-soft);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-ink);
  }
  .field__input:focus {
    border-color: var(--c-gold);
    outline: 2px solid rgba(176, 141, 87, 0.25);
    outline-offset: 0;
  }
  .field__input:disabled {
    background: #f4eee3;
    cursor: not-allowed;
  }
  .field__error {
    min-height: 1.2em;
    font-size: var(--fs-100);
    color: #8a3324;
  }
  .field.is-error .field__input,
  .guest-row.is-error .field__input {
    border-color: #8a3324;
  }
  .modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .modal__status {
    min-height: 1.4em;
    font-size: var(--fs-200);
    color: var(--c-ink-soft);
  }
  .modal__status.is-error {
    color: #8a3324;
  }
  .modal__status.is-success {
    color: var(--c-green-700);
  }
  .modal.is-loading .modal__inner {
    cursor: progress;
  }

  @media (max-width: 26rem) {
    .modal {
      width: min(94vw, 34rem);
    }
    .modal__inner {
      padding: var(--space-7) var(--space-4) var(--space-5);
    }
    .guest-row {
      grid-template-columns: 1fr;
    }
    .guest-row__remove {
      grid-column: 1;
      justify-self: start;
    }
    .modal__actions .btn {
      width: 100%;
    }
  }
}