/* ============================================================
   БАЗА
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Резервируем место под скроллбар, даже когда его нет.
     Иначе при открытии модалки body становится overflow:hidden,
     скроллбар исчезает, и страница (с центрированной модалкой) сдвигается вправо. */
  scrollbar-gutter: stable;
  /* Отрезаем любые случайные горизонтальные перетекания — особенно для iOS Safari,
     где overflow-x:hidden только на body иногда не блокирует pan-zoom за край. */
  overflow-x: hidden;
}
body {
  font-family: 'EB Garamond', 'Manrope', Georgia, serif;
  color: #2b1f12;
  background: #f3ead6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

:root {
  --parchment-ink: #3a2a18;
  --parchment-ink-soft: #5a4530;
  --parchment-accent: #8a3a2a;
  /* Современная палитра — приглушённый эвкалипт + сочетаемые бежевые/коричневые */
  --modern-ink: #2c2820;             /* тёплый чёрно-коричневый */
  --modern-ink-soft: #6e6855;        /* приглушённый кофе-серый */
  --modern-accent: #6e8470;          /* эвкалипт-сэйдж, основной акцент */
  --modern-accent-deep: #54655a;     /* тёмный эвкалипт для hover */
  --modern-accent-soft: #aebca5;     /* светлый эвкалипт для подложек */
  --modern-sage: #8a9d80;             /* шалфей чуть посветлее */
  --modern-gold: #9a8a5e;             /* олива-хаки вместо золота для декора */
  --modern-bg: #ffffff;
  --modern-bg-soft: #f3ede0;          /* кремовая подложка с лёгким бежем */
  --modern-line: #d9d0c0;             /* мягкие тёплые границы */
}

/* ============================================================
   ПЕРГАМЕНТНАЯ СЕКЦИЯ (фон)
============================================================ */
/* Двухслойная схема:
   - Слой 1 (текстура, full-width): bg-tile тайлится по Y, снизу bg-bottom с рваным краем
     накладывается на текстуру через прозрачный fade.
   - Слой 2 (рамка, max-width: 1700px, центр): frame.png — декоративный оверлей
     с верхней лентой, боковыми лозами и свисающими виноградными лозами снизу.
*/
.parchment {
  position: relative;
  width: 100%;
  background-image: url('elements/bg/bg-tile.png');
  background-image: image-set(
    url('elements/bg/bg-tile.webp') type('image/webp'),
    url('elements/bg/bg-tile.png') type('image/png')
  );
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
  background-color: #ead4a3; /* подложка под субпиксельные щели между тайлами */
}

/* Декоративная рамка: position: absolute наверху, не влияет на layout, чисто декор поверх. */
.parchment-frame {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1900px; /* шире, чтобы рамка не терялась на 2K/4K мониторах */
  pointer-events: none; /* клики проходят сквозь рамку к контенту под ней */
  z-index: 2;
  line-height: 0;
}
.parchment-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.parchment-content {
  position: relative;
  z-index: 1;
  padding: 0 6vw;
}

/* Внутри рамки помещаются блоки 1 (main) и 2 (activities).
   frame.png 2400×2484, отношение 2484/2400 ≈ 1.035 → высота рамки = 103.5% ширины.
   На широких мониторах рамка ограничена 1700px, значит её высота ≤ 1759px.
   min-height гарантирует, что блок 3 (timeline) начнётся ПОСЛЕ свисающих лоз рамки.
   padding-top уводит контент ниже верхней декоративной ленты (~6% высоты рамки).
   padding-left/right отступает от боковых лоз. */
.framed-area {
  position: relative;
  z-index: 1;
  /* Высота — по контенту (без min-height). Если frame.png окажется выше блоков
     1 и 2 вместе, его свисающие лозы декоративно зайдут в начало блока 3 —
     это и нужно: даёт визуальный переход и убирает пустоту в нижней части рамки. */
  /* Верх рамки в исходнике 140px из 2400 = 5.83%. На 1900-капе это 111px.
     padding-top даёт ~22px клиренса сверх декора. */
  padding-top: min(7vw, 133px);
  /* Боковые отступы маленькие: parchment-content уже даёт 6vw, что совпадает
     с шириной боковых лоз рамки. Здесь добавляем только небольшой клиренс,
     чтобы контент не упирался в самые рейлы. */
  padding-left: 2vw;
  padding-right: 2vw;
}
/* Первый блок внутри рамки не должен добавлять собственный верхний отступ —
   его уже даёт padding-top на .framed-area. */
.framed-area > .block:first-child {
  padding-top: 0;
}

.bg-bottom-pic {
  display: block;
  position: relative;
  z-index: 0;
  line-height: 0;
  /* Картинка 2400×302, верхние 75px — fade в прозрачность.
     75 / 2400 = 3.125% от ширины — это и есть нужное наложение на последний тайл. */
  margin-top: -3.125vw;
}
.bg-bottom-pic img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .parchment {
    background-image: url('elements/bg/bg-tile-mobile.png');
  background-image: image-set(
    url('elements/bg/bg-tile-mobile.webp') type('image/webp'),
    url('elements/bg/bg-tile-mobile.png') type('image/png')
  );
  }
  .parchment-frame {
    /* На мобилке рамку убираем совсем — без неё контент центрируется
       автоматически и можно сделать main-image / main-header пошире. */
    display: none;
  }
  .parchment-content {
    padding: 0 5vw;
  }
  .framed-area {
    /* Без рамки — симметричное размещение в parchment-content (5vw с каждой стороны).
       Только небольшой padding-top, чтобы блок 1 не упирался в самый верх. */
    padding-top: 24px;
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
  }
  .bg-bottom-pic {
    /* Мобилка: 1200×302, fade те же 75px → 75 / 1200 = 6.25% */
    margin-top: -6.25vw;
  }
}

/* ============================================================
   ОБЩЕЕ ДЛЯ БЛОКОВ ВНУТРИ ПЕРГАМЕНТА
============================================================ */
.block {
  max-width: 1600px;
  margin: 0 auto;
  padding: 44px 0;
  text-align: center;
}
.block-header {
  display: block;
  margin: 0 auto 28px;
  max-width: 880px;
  width: 100%;
  height: auto;
}
.divider {
  display: block;
  /* margin-top 50: divider сидит на 10px ниже visible bottom item-2 в timeline
     (item-2 transformed +40, layout-bottom + 50 = +10 ниже visible bottom).
     В блоке 2 (без transform) — просто 50px ниже грида. */
  margin: 50px auto 0;
  width: 100%;
  max-width: 1500px;
  height: auto;
}

/* Мобильный divider — скрыт на десктопе, показывается только на мобилке. */
.divider-mobile-only {
  display: none;
}
@media (max-width: 768px) {
  .divider-mobile-only {
    display: block;
    /* Почти на всю ширину viewport'а — точное значение margin-left зависит от родителя
       (см. правила ниже). */
    width: 100vw;
    max-width: none;
    height: auto;
    margin-top: 24px;
    margin-bottom: 16px;
  }
  /* В блоке 2 (внутри framed-area) родитель имеет 5vw + 9vw = 14vw padding слева. */
  .framed-area .divider-mobile-only {
    margin-left: -14vw;
  }
  /* В блоках вне framed-area (block-activities, block-timeline) родитель имеет
     только 5vw padding parchment-content. */
  .block-activities > .divider-mobile-only,
  .block-timeline > .divider-mobile-only {
    margin-left: -5vw;
  }
}
@media (max-width: 768px) {
  .block { padding: 40px 0; }
  .divider-desktop { display: none; }
}

/* ============================================================
   БЛОК 1: MAIN
   (стили геометрии .block-main см. в секции про .parchment-frame —
    блок должен совпадать по высоте с рамкой)
============================================================ */
/* Двухколоночный layout: слева иллюстрация, справа текст приглашения.
   В DOM текст идёт первым (для правильного порядка чтения и стэка на мобилке),
   на десктопе grid-template-areas меняет визуальный порядок. */
.main-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  grid-template-areas: "image text";
  align-items: center;
  gap: 48px;
  margin-top: 4px;
}
.main-text {
  grid-area: text;
  text-align: center;
}
.main-image-wrap {
  grid-area: image;
  display: flex;
  align-items: center;
  justify-content: center;
}

.invitation-pretext {
  font-family: 'EB Garamond', serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  /* Масштабируется с viewport: 13px на узких десктопах, 19px на 1900+ */
  font-size: clamp(13px, 1vw, 19px);
  font-weight: 600;
  color: var(--parchment-ink); /* тёмно-коричневый — лучше читается */
  margin: 0 0 22px;
  line-height: 1.5;
}
/* Принудительные переносы строк работают только на мобилке;
   на десктопе скрыты, чтобы текст шёл одной строкой. */
.br-mobile { display: none; }
.main-header {
  display: block;
  margin: 0 auto 14px;
  width: 100%;
  max-width: 880px; /* шире, чтобы заголовок занимал бóльшую часть колонки */
  height: auto;
}
.invitation-subtext {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500; /* жирнее, чтобы курсив не тонул */
  color: var(--parchment-accent);
  /* Масштабируется: 19px на узких, 28px на 1900+ */
  font-size: clamp(19px, 1.5vw, 28px);
  line-height: 1.3;
  margin: 0;
}
.main-image {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin: 0;
}

@media (max-width: 768px) {
  .main-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "image";
    gap: 24px;
  }
  .invitation-pretext { font-size: 13px; letter-spacing: 0.14em; margin-bottom: 16px; }
  .invitation-subtext { font-size: 19px; }
  /* На мобилке — разрешаем переносы строки в нужных местах pretext'а,
     чтобы текст не слипался с правым краем экрана. */
  .br-mobile { display: initial; }
  /* main-image вырывается из 5vw padding'ов parchment-content на всю ширину viewport'а. */
  .main-image {
    width: 100vw;
    max-width: none;
    margin-left: -5vw;
    margin-right: -5vw;
  }
  /* main-header чуть меньше — не до самых краёв, оставляем по 5vw полей. */
  .main-header {
    width: 90vw;
    max-width: none;
    margin: 0 auto 14px;
  }
}

/* ============================================================
   БЛОК 2: ACTIVITIES
============================================================ */
.block-activities {
  /* Уменьшаем разрыв между блоками 1 и 2:
     было 44 (низ блока 1) + 44 (верх блока 2) = 88px
     стало 44 + 14 = 58px ≈ 88/1.5 */
  padding-top: 14px;
  /* Маленький padding после divider — чтобы блок 3 был ближе. */
  padding-bottom: 10px;
}
.block-activities .block-header {
  /* Размер задан в процентах от блока, а не в пикселях, —
     иначе на средних viewport'ах activities-header становится почти таким же
     по размеру, как main-header (который сидит в полуколонке и масштабируется).
     45% блока ≈ 92% от ширины main-header (тот занимает ~49% блока). */
  width: 45%;
  max-width: 720px;
  margin-bottom: 28px;
}
.activities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 16px;
}
.activity-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.activity-card img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.activity-card figcaption {
  /* EB Garamond обычной плотности — менее жирно, чем pretext. */
  margin-top: 22px;
  font-family: 'EB Garamond', serif;
  font-size: clamp(20px, 1.5vw, 28px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--parchment-ink);
  max-width: 380px;
}
@media (max-width: 768px) {
  .activities-grid {
    grid-template-columns: 1fr;
    /* Больший gap = подпись визуально дальше от СЛЕДУЮЩЕЙ картинки и явно ближе
       к своей собственной (margin-top подписи всего 4px). */
    gap: 36px;
  }
  /* Подтягиваем блок 2 ближе к блоку 1: уменьшаем низ блока 1 и обнуляем верх блока 2. */
  .block-main { padding-bottom: 16px; }
  .block-activities { padding-top: 0; }
  /* Заголовок чуть крупнее */
  .block-activities .block-header {
    width: 90%;
    max-width: 420px;
    margin-bottom: 18px;
  }
  /* Картинки чуть меньше — не на всю ширину карточки. */
  .activity-card img {
    width: 90%;
    max-width: 380px;
    margin: 0 auto;          /* явно центрируем — на случай если picture-обёртка ломает flex-центровку */
    display: block;
  }
  /* picture в block-контексте, не inline — чтобы margin auto на img надёжно сработал */
  .activity-card > picture {
    display: block;
    width: 100%;
  }
  /* Подписи поменьше и почти прижаты к своей картинке (margin-top: 4). */
  .activity-card figcaption {
    margin-top: 4px;
    font-size: 19px;
    max-width: 260px;
  }
}

/* ============================================================
   БЛОК 3: TIMELINE
============================================================ */
.block-timeline {
  /* Меньше padding сверху и снизу, чтобы блок плотнее прилегал к соседям. */
  padding-top: 10px;
  padding-bottom: 0;
}
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 8px;
}
.timeline-item img { width: 100%; height: auto; }
/* transform не влияет на layout — middle item визуально ниже,
   но timeline-grid считается заканчивающимся на уровне item-1/item-3. */
.timeline-item-2 { transform: translateY(40px); }

@media (max-width: 768px) {
  .timeline-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .timeline-item-2 { transform: none; }
  /* Картинки чуть-чуть поменьше карточки — на 8% ужимаем по ширине, центрируем. */
  .timeline-item img {
    width: 92%;
    max-width: 380px;
    margin: 0 auto;
    display: block;
  }
}

/* ============================================================
   БЛОК 4: DRESSCODE
============================================================ */
.block-dresscode {
  /* Близко к блоку 3 + bg-bottom близко к контенту блока 4 */
  padding-top: 4px;
  padding-bottom: 14px;
}
.block-dresscode .block-header {
  /* Заголовок «Подобающий облик» меньше, чтобы не конкурировал по размеру
     с главным заголовком сайта. */
  max-width: 540px;
}
.dresscode-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  /* Текстовый блок выравнивается по верху картинки, а не по центру —
     иначе заголовок «Подобающий облик» съезжает вниз пропорционально разнице высот
     image и text-блока. */
  align-items: start;
  margin-top: 8px;
  text-align: left;
}
.dresscode-image {
  width: 100%;
  height: auto;
  display: block;
}
/* Текстовая колонка центрируется по вертикали относительно картинки —
   заголовок не упирается в верх, кнопка не висит у низа. */
.dresscode-text {
  align-self: center;
}
.dresscode-text p {
  font-size: 24px;
  line-height: 1.5;
  color: var(--parchment-ink);
  margin: 0 auto 24px; /* margin auto по горизонтали — параграф центрируется
                          в колонке (на одной оси с центрированным заголовком) */
  max-width: 460px;
  text-align: center;
}
.dresscode-header-mobile-only { display: none; }
.dresscode-header-desktop-only .block-header {
  margin: 0 0 24px;
  max-width: 100%;
}

.dresscode-button {
  /* block-уровень + горизонтальный центр относительно текстовой колонки. */
  display: block;
  width: 85%;
  max-width: 700px;
  margin: 16px auto 0;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.dresscode-button img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}
.dresscode-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

@media (max-width: 768px) {
  .dresscode-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .dresscode-header-mobile-only { display: block; }
  .dresscode-header-desktop-only { display: none; }
  /* Заголовок блока 4 чуть-чуть поменьше на мобилке. */
  .block-dresscode .block-header {
    width: 75%;
    max-width: 280px;
  }
  .dresscode-text p { font-size: 17px; }
  .dresscode-button { width: 90%; max-width: 380px; }
}

/* ============================================================
   СОВРЕМЕННАЯ ЧАСТЬ
============================================================ */
.modern {
  background: var(--modern-bg);
  font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  color: var(--modern-ink);
  padding: 0;
}
.modern-block {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 32px;
}
/* Секции через одну на тёплой кремовой подложке для визуального ритма */
.modern-block-soft {
  background: var(--modern-bg-soft);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.modern-block-soft > .modern-block-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.modern-heading {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-weight: 500;
  font-size: 52px;
  line-height: 1.1;
  text-align: center;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  color: var(--modern-ink);
}
.modern-heading.left { text-align: left; }

/* Декоративный орнамент над заголовком — две тонкие линии с ромбиком в центре */
.modern-heading-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 18px;
  color: var(--modern-gold);
}
.modern-heading-ornament::before,
.modern-heading-ornament::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: currentColor;
}
.modern-heading-ornament svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Подзаголовок-ремарка под главным заголовком */
.modern-subheading {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--modern-ink-soft);
  font-size: 20px;
  margin: 0 0 40px;
}

@media (max-width: 768px) {
  .modern-block { padding: 48px 20px; }
  .modern-block-soft > .modern-block-inner { padding: 0 20px; }
  .modern-heading { font-size: 28px; }
  .modern-subheading { font-size: 16px; margin-bottom: 28px; }
  .modern-heading-ornament { margin-bottom: 14px; }
  .modern-heading-ornament::before,
  .modern-heading-ornament::after { width: 32px; }
}

/* ----- БЛОК 5: WHEN / WHERE ----- */
.when-where-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 56px;
  align-items: center;
  max-width: 760px;
  margin: 56px auto 0; /* отбивка от заголовка побольше */
}
.when-where-item { text-align: center; }
.when-where-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--modern-accent);
}
.when-where-icon svg { width: 100%; height: 100%; }
.when-where-item h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 30px;
  margin: 0 0 12px;
  color: var(--modern-ink);
}
.when-where-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  color: var(--modern-ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.when-where-meta {
  font-size: 16px;
  color: var(--modern-ink-soft);
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.when-where-divider {
  width: 1px;
  height: 100px;
  background: var(--modern-gold);
  opacity: 0.5;
}
@media (max-width: 768px) {
  .when-where-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;        /* меньше отступа от заголовка, чем на десктопе (там 56) */
  }
  .when-where-divider {
    width: 60px;
    height: 1px;
    margin: 0 auto;
  }
  .when-where-icon { width: 38px; height: 38px; margin-bottom: 10px; }
  .when-where-item h3 { font-size: 24px; }
  .when-where-value { font-size: 20px; }
  .when-where-meta { font-size: 14px; }
}

/* ----- БЛОК 6: ЛОКАЦИЯ ----- */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
/* Заголовок и орнамент центрированы относительно текстовой колонки. */
.location-text .modern-heading {
  font-size: 42px;
  margin-bottom: 24px;
}
.location-text p {
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 20px;
  color: var(--modern-ink);
}
.location-text strong {
  font-weight: 600;
  color: var(--modern-accent);
}
.location-map {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(74, 50, 30, 0.12);
  border: 1px solid var(--modern-line);
  background: #efefef;
}
.location-map iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
}
@media (max-width: 768px) {
  .location-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .location-text { text-align: center; }
  .location-text .modern-heading-ornament { margin: 0 auto 14px; }
  .location-text .modern-heading {
    text-align: center;
    font-size: 28px;
  }
  .location-text p { font-size: 16px; text-align: left; }
  .location-map iframe { height: 320px; }
}

/* ----- БЛОК 7: DRESSCODE DETAILS ----- */
.dresscode-details-layout {
  display: grid;
  grid-template-columns: 1.3fr 1.4fr 1.3fr; /* почти равные колонки, центр чуть шире */
  gap: 32px;
  align-items: stretch;                     /* колонки одной высоты — текст растянется до нижнего края фигур */
  max-width: 1480px;
  margin: 0 auto;
}
.dresscode-details-text {
  display: flex;
  flex-direction: column;
}
/* Кнопка прижата к низу растянутой текстовой колонки = на уровне нижнего края фигур. */
.dresscode-details-text > .primary-button {
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
}
.dresscode-figure {
  width: 100%;
  /* aspect 1:2 — общая для обеих фигур, чтобы при одной ширине они получили
     одинаковую высоту. Реальные пропорции (0.494 и 0.515) близки к 0.5 —
     при object-fit: cover каждая обрезается на 1-2% по краю, незаметно. */
  aspect-ratio: 1 / 2;
  height: auto;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(74, 50, 30, 0.15));
}
.dresscode-prose {
  text-align: center;
  padding-top: 24px;
}
.dresscode-prose .modern-heading {
  font-size: 42px;
  margin-bottom: 24px;
}
/* nowrap для слов, которые не должны рваться по дефису */
.nowrap { white-space: nowrap; }
.dresscode-prose p {
  font-size: 19px;
  line-height: 1.7;
  margin: 0 0 18px;
  color: var(--modern-ink);
}
.dresscode-prose p:last-of-type {
  margin-bottom: 28px;
}
@media (max-width: 768px) {
  .dresscode-details-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "text   text"
      "women  men"
      "button button";
    gap: 16px;
    align-items: start;
    max-width: 100%;
  }
  /* Раскрываем .dresscode-details-text — её дети (prose, button) становятся
     прямыми grid-итемами и могут попасть в разные области. */
  .dresscode-details-text { display: contents; }
  .dresscode-prose {
    grid-area: text;
    padding-top: 0;
  }
  .dresscode-prose .modern-heading { font-size: 28px; }
  .dresscode-prose p { font-size: 16px; }
  .dresscode-details-text > .primary-button {
    grid-area: button;
    margin-top: 12px;
  }
}

/* ----- кнопка ----- */
.primary-button {
  display: inline-block;
  background: var(--modern-accent);
  color: #fff;
  border: none;
  padding: 14px 36px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(110, 132, 112, 0.25);
}
.primary-button:hover {
  background: var(--modern-accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(84, 101, 90, 0.35);
}

/* ----- БЛОК 8: ПРО СТИЛИСТИКУ ----- */
/* Десктоп: карусель слева, текст справа (заголовок + 3 параграфа) */
.about-style-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.about-style-text {
  text-align: left;
}
.about-style-text .modern-heading-ornament {
  /* Орнамент тоже по левому краю — flex-start вместо центра. */
  justify-content: flex-start;
  margin: 0 0 18px;
}
.about-style-text .modern-heading {
  text-align: left;
  font-size: 38px;
  margin-bottom: 22px;
  letter-spacing: 0;
}
.about-style-text p {
  font-size: 19px;
  line-height: 1.75;
  margin: 0 0 18px;
  color: var(--modern-ink);
}

/* Мобилка: единый поток, карусель между 1 и 2 параграфами.
   Используем display:contents на about-style-text, чтобы её дети стали flex-итемами
   родительского flex-контейнера. Дальше через order переставляем карусель. */
@media (max-width: 768px) {
  .about-style-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .about-style-text { display: contents; }

  /* Порядок: ornament(0), heading(0), p1(0), carousel(1), p2(2), p3(2) */
  .us-carousel { order: 1; margin: 24px auto; }
  .about-style-text > p:nth-of-type(2) { order: 2; }
  .about-style-text > p:nth-of-type(3) { order: 2; }

  /* Mobile-стили текста */
  .about-style-text > .modern-heading-ornament {
    justify-content: center;       /* возвращаем центр на мобилке */
    margin: 0 auto 14px;
  }
  .about-style-text > .modern-heading { text-align: center; font-size: 26px; }
  .about-style-text > p { font-size: 16px; text-align: left; max-width: none; }
}

/* ----- КАРУСЕЛЬ ----- */
.us-carousel {
  position: relative;
  width: 100%;
  max-width: 400px;        /* сужаем под пропорции вертикальных фото */
  margin: 0 auto;          /* по горизонтали — центр; на мобилке добавим вертикальные */
  display: flex;
  flex-direction: column;
}
.us-track {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;     /* пропорция большинства фото — 2:3 */
  overflow: hidden;
  border-radius: 4px;
  background: #f0eee9;
  box-shadow: 0 12px 36px rgba(74, 50, 30, 0.18);
}
.us-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.us-slide.active { opacity: 1; }
.us-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.us-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2;
  color: var(--modern-ink);
  transition: background 0.2s ease;
}
.us-arrow:hover { background: #fff; }
.us-prev { left: 12px; }
.us-next { right: 12px; }
.us-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.us-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--modern-line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.us-dot.active {
  background: var(--modern-accent);
  transform: scale(1.3);
}
@media (max-width: 768px) {
  .us-track { max-width: 320px; margin: 0 auto; }
  .us-arrow { width: 36px; height: 36px; font-size: 20px; }
  .us-carousel { max-width: 320px; margin: 0 auto; }
}

/* ----- БЛОК 9: ДЕТАЛИ ----- */
.details-list {
  max-width: 820px;
  margin: 0 auto 48px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}
.details-list li {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 22px 26px;
  background: var(--modern-bg-soft);
  border-radius: 6px;
  border-left: 3px solid var(--modern-accent);
  font-size: 18px;
  line-height: 1.6;
  color: var(--modern-ink);
}
.details-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(110, 132, 112, 0.12); /* эвкалипт 12% */
  border-radius: 50%;
  color: var(--modern-accent);
  margin-top: 2px;
}
.details-icon svg { width: 22px; height: 22px; }
.form-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}
.form-wrap iframe {
  width: 100%;
  min-height: 760px;
  border: 0;
  display: block;
  background: var(--modern-bg);
}
@media (max-width: 768px) {
  .details-list { gap: 12px; }
  .details-list li {
    gap: 16px;
    padding: 18px 18px;
    font-size: 16px;
  }
  .details-icon {
    width: 36px;
    height: 36px;
  }
  .details-icon svg { width: 18px; height: 18px; }
}

/* ----- ФУТЕР ----- */
.site-footer {
  text-align: center;
  padding: 56px 24px 64px;
  color: var(--modern-ink-soft);
  font-size: 18px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  border-top: 1px solid var(--modern-line);
  background: var(--modern-bg-soft);
}
.site-footer p { margin: 0 0 4px; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer p::before,
.site-footer p::after {
  content: '·';
  margin: 0 10px;
  color: var(--modern-gold);
}

@media (max-width: 768px) {
  .site-footer { font-size: 15px; padding: 40px 18px 48px; }
  .site-footer p::before,
  .site-footer p::after {
    margin: 0 8px;
  }
}

/* ============================================================
   МОДАЛКА: АКСЕССУАРЫ
============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal.open { display: flex; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 8, 0.7);
  backdrop-filter: blur(4px);
}
.modal-window {
  position: relative;
  background: #fff;
  border-radius: 16px;
  max-width: 980px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px 32px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.modal-close {
  position: absolute;
  top: 12px; right: 16px;
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: var(--modern-ink-soft);
  padding: 4px 12px;
}
.modal-close:hover { color: var(--modern-ink); }
.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  margin: 0 0 24px;
  padding-right: 32px;
  text-align: center;
}
.accessories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.accessories-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  background: #f5f0e6;
}

@media (max-width: 768px) {
  .modal-window { padding: 24px 18px; }
  .modal-title { font-size: 17px; margin-bottom: 18px; }
  .accessories-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}