/* ============================================================
   ТОКЕНЫ ДИЗАЙНА — палитра «белое золото»
   Меняйте цвета и шрифты здесь — они используются по всему сайту
   ============================================================ */
:root{
  --color-white:       #FFFFFF;
  --color-cream:       #FDF9F0;   /* основной тёплый белый фон */
  --color-cream-deep:  #F6ECD9;   /* фон чередующихся секций */
  --color-gold:        #C7A251;   /* акцентное золото — текст, линии, рамки */
  --color-gold-deep:   #8A6A2E;   /* глубокое золото/бронза — заголовки, кнопки */
  --color-gold-light:  #E9DBB4;   /* светлое золото — тонкие рамки, разделители */
  --color-charcoal:    #241E15;   /* тёмный бронзово-чёрный — фон hero/отсчёта */
  --color-ink:         #2B2620;   /* цвет обычного текста */

  --font-display: 'Playfair Display', serif;
  --font-body:    'EB Garamond', serif;
  --font-script:  'Marck Script', cursive;
  --font-sans:    'Jost', sans-serif;
  /* --font-heading — отдельный шрифт именно для заголовков секций
     (h2.heading / h2.heading-script), разный по языкам: Great Vibes
     для русского, Parisienne для английского (см. переопределения
     ниже на body.lang-en и body.lang-ko). Числа, тайминг, имя в
     карточке контакта по-прежнему используют --font-display —
     рукописный шрифт для цифр читался бы плохо. */
  --font-heading: 'Great Vibes', cursive;

  --section-pad-y: 7rem;
  --section-pad-x: 6vw;
  --max-w: 720px;
}

/* Три уровня типографики для более редакторского, элегантного вида:
   --font-display (Playfair Display) — крупные заголовки секций,
   контрастная "модная" антиква вместо мягкой Cormorant Garamond —
   даёт больше характера и меньше "воздушности";
   --font-body (EB Garamond) — основной текст абзацев, читается легче
   и выглядит благороднее, чем геометрический гротеск, на большом
   объёме текста; --font-sans (Jost) — служебный текст интерфейса
   (кнопки, подсказки навигации, подписи полей формы);
   --font-script (Marck Script) — только подпись/вензель.

   Корейский язык: у Playfair Display / EB Garamond / Marck Script /
   Jost нет корейских глифов, поэтому для body.lang-ko переключаем
   шрифты на Noto Serif KR / Noto Sans KR. Переменные переопределяются
   на уровне body, поэтому вся остальная вёрстка не меняется.

   word-break:keep-all — важная деталь именно для корейского: без неё
   браузер переносит корейский текст по любому слогу (как по буквам),
   из-за чего в конце строки может "отрываться" один одинокий слог.
   keep-all разрешает перенос только по пробелам между словами —
   слово целиком уходит на следующую строку, а не разваливается.

   Marck Script выбран специально: в отличие от многих декоративных
   курсивных шрифтов, он поддерживает и кириллицу, и латиницу одним
   и тем же начертанием — поэтому имена, печать и вензель на фоне
   выглядят одинаково что на русском, что на английском, и не
   "проваливаются" в обычный системный шрифт браузера. */
body.lang-ko{
  --font-display: 'Noto Serif KR', serif;
  --font-body:    'Noto Serif KR', serif;
  --font-script:  'Noto Serif KR', serif;
  --font-sans:    'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  word-break: keep-all;
}
body.lang-en{
  --font-heading: 'Parisienne', cursive;
}

*{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  /* каждый скролл/свайп "прилипает" к следующей секции —
     mandatory значит, что колесо мыши не может остановиться
     между секциями, только на них */
  scroll-snap-type: y mandatory;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; scroll-snap-type: none; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  background-color: var(--color-cream);
  background-image: radial-gradient(circle, rgba(138,106,46,0.07) 1px, transparent 1.6px);
  background-size: 24px 24px;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

a{ color: inherit; }

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

/* ============================================================
   ОБЩИЕ КЛАССЫ РАЗДЕЛОВ
   ============================================================ */
.section{
  min-height: 100vh;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: var(--section-pad-y) var(--section-pad-x);
  max-width: var(--max-w);
  margin: 0 auto;
  /* точка "прилипания" — верх секции всегда выравнивается по
     верху экрана после скролла */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.section--light{ background: transparent; }

.eyebrow{
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 1.25rem;
  display:flex; align-items:center; justify-content:center; gap:0.7em;
}
.eyebrow::before, .eyebrow::after{
  content:''; width: 22px; height: 1px; background: currentColor; opacity:0.6;
}
.eyebrow--light{ color: var(--color-gold-light); }

/* Заголовки — единый шрифт (--font-display) везде на сайте.
   .heading-script оставлен отдельным классом только ради более
   крупного размера в двух местах (Приветствие, Пожелания) —
   но шрифт теперь ТОТ ЖЕ, что и у остальных заголовков. */
.heading, .heading-script{
  font-family: var(--font-heading);
  font-style: normal;
  color: var(--color-gold-deep);
  margin: 0 0 1.25rem;
}
.heading{
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1.3;
}
.heading-script{
  font-weight: 400;
  font-size: clamp(2.6rem, 6.6vw, 3.6rem);
}
body.lang-ko .heading{
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}
body.lang-ko .heading-script{
  font-weight: 600;
  font-size: clamp(2rem, 5.4vw, 2.7rem);
  letter-spacing: 0.02em;
}

/* Небольшой золотой орнамент-разделитель под заголовками —
   линия / ромб / линия, классический мотив приглашений */
.ornament{
  display:block; width: 140px; height: 16px;
  margin: 0 auto 1.75rem;
  stroke: var(--color-gold); fill: var(--color-gold);
}
.ornament-dot{ opacity: 0.7; }
.ornament--light{ stroke: var(--color-gold-light); fill: var(--color-gold-light); }

/* орнамент "растягивается" по горизонтали при появлении секции —
   более выразительно, чем обычное появление-снизу у других элементов */
.section > .ornament{
  transform: scaleX(0);
  transition: transform 0.9s ease, opacity 0.9s ease;
}
.section.is-visible > .ornament{ transform: scaleX(1); }

.body-text{
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--color-ink);
  opacity: 0.85;
  max-width: 60ch;
  line-height: 1.75;
}
.body-text--narrow{ max-width: 48ch; }

/* Круглая фото-рамка ("медальон") над приветствием. */
.portrait-frame{
  width: 148px; height: 148px;
  border-radius: 50%;
  background: var(--color-cream-deep) url('images/welcome.jpg') center/cover no-repeat;
  border: 2px solid var(--color-gold);
  box-shadow: 0 0 0 6px var(--color-white), 0 10px 26px rgba(36,30,21,0.14);
  margin: 0 auto 1.75rem;
}

/* ============================================================
   ГАЛЕРЕЯ ФОТО — симметричная сетка 3×2 (на мобильном 2×3).
   Все карточки одной пропорции (3:4), поэтому сетка получается
   ровной без "мозаичных" дыр. Добавить/убрать фото: положите файл
   в images/, добавьте/удалите один
   <figure class="gallery-item"><img src="images/имя.jpg"></figure>
   — и подправьте aspect-ratio у .gallery-item, если пропорции
   новых фото другие.
   ============================================================ */
.gallery-section{ max-width: 1040px; }
.gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  width: 100%;
  margin-top: 0.5rem;
}
.gallery-item{
  aspect-ratio: 3 / 4;
  padding: 8px;
  background: var(--color-white);
  outline: 1px solid var(--color-gold-light);
  box-shadow: 0 10px 26px rgba(36,30,21,0.10);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease, box-shadow 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}
.gallery-item.is-visible{ opacity:1; transform:none; }
.gallery-item:hover{
  box-shadow: 0 16px 34px rgba(36,30,21,0.18);
  transform: translateY(-4px);
}
.gallery-item.is-visible:hover{ transform: translateY(-4px); }
.gallery-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
}
@media (max-width: 640px){
  .gallery{ grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .gallery-item{ padding: 6px; }
}

.btn{
  display:inline-block;
  margin-top: 2.2rem;
  padding: 0.9rem 2.4rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration:none;
  border-radius: 2px;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
  cursor:pointer;
}
.btn--outline{
  border: 1px solid var(--color-gold-deep);
  color: var(--color-gold-deep);
  background: transparent;
}
.btn--outline:hover{ background: var(--color-gold-deep); color: var(--color-white); }
.btn--filled{
  border: 1px solid var(--color-gold-deep);
  background: var(--color-gold-deep);
  color: var(--color-white);
}
.btn--filled:hover{ transform: translateY(-2px); background: var(--color-gold); border-color: var(--color-gold); }
.btn--wide{ width: 100%; }

/* reveal-on-scroll (управляется script.js добавлением класса .is-visible) */
.section > *{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.section.is-visible > *{ opacity:1; transform:none; }
.section > *:nth-child(1){ transition-delay: 0.05s; }
.section > *:nth-child(2){ transition-delay: 0.15s; }
.section > *:nth-child(3){ transition-delay: 0.25s; }
.section > *:nth-child(4){ transition-delay: 0.35s; }

/* ============================================================
   ЭКРАН ВЫБОРА ЯЗЫКА
   ============================================================ */
.lang-overlay{
  position: fixed; inset:0; z-index: 1000;
  background: var(--color-cream);
  display:flex; align-items:center; justify-content:center;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  padding: 6vw;
}
.lang-overlay.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.lang-box{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.lang-mark{
  font-size: 1.6rem;
  color: var(--color-gold);
  margin-bottom: 1.4rem;
}
.lang-title{
  font-family: 'Jost', 'Noto Sans KR', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--color-gold-deep);
  opacity: 0.75;
  margin: 0 0 2.2rem;
}
.lang-buttons{ display:flex; flex-direction:column; gap: 0.9rem; width: 220px; }
.lang-btn{ margin-top:0; width:100%; }

/* ============================================================
   ПЕЧАТЬ / SEAL INTRO
   ============================================================ */
.seal-overlay{
  position: fixed; inset:0; z-index: 999;
  background: radial-gradient(circle at 50% 40%, #3A2E1A 0%, var(--color-charcoal) 70%);
  display:flex; align-items:center; justify-content:center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.seal-overlay.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.seal{
  position:relative;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--color-gold-light);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer;
  animation: seal-breathe 3.4s ease-in-out infinite;
}
.seal-ring{ position:absolute; inset:0; width:100%; height:100%; fill:none; stroke: var(--color-gold-light); stroke-width:1; opacity:0.8; }
.seal-initials{ font-family: var(--font-heading); font-size: 2.6rem; color: var(--color-gold-light); }
body.lang-ko .seal-initials{ font-size: 1.8rem; letter-spacing:0.05em; }
.seal-hint{
  margin-top: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  opacity: 0.7;
}
@keyframes seal-breathe{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.035); }
}

/* ============================================================
   ПРОГРЕСС-ПОЛОСА + ТОЧЕЧНАЯ НАВИГАЦИЯ
   ============================================================ */
.progress-rail{
  position: fixed; top:0; left:0; width:100%; height:3px;
  background: transparent; z-index: 500;
}
.progress-fill{
  height:100%; width:0%;
  background: var(--color-gold);
  transition: width 0.15s linear;
}

.dot-nav{
  position: fixed;
  right: 1.4rem; top:50%; transform: translateY(-50%);
  z-index: 400;
  display:flex; flex-direction:column; gap:0.9rem;
}
.dot-nav a{
  width:8px; height:8px; border-radius:50%;
  background: var(--color-gold-light);
  border: 1px solid var(--color-gold);
  opacity:0.55;
  transition: opacity 0.3s ease, transform 0.3s ease;
  position:relative;
}
.dot-nav a:hover{ transform: scale(1.3); opacity:1; }
.dot-nav a.is-active{ background: var(--color-gold); opacity:1; transform: scale(1.3); }
.dot-nav a::after{
  content: attr(data-label);
  position:absolute; right:140%; top:50%; transform: translateY(-50%);
  white-space:nowrap;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  background: var(--color-gold-deep);
  color: var(--color-white);
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  opacity:0; pointer-events:none;
  transition: opacity 0.2s ease;
}
.dot-nav a:hover::after{ opacity:1; }
@media (max-width: 700px){ .dot-nav{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh;
  max-width:none;
  width:100%;
  /* если положить файл images/hero.jpg — он проявится под золотым
     градиентом (градиент нужен, чтобы белый текст было видно поверх
     любого фото); без файла эта прослойка просто не отрисуется и
     останется чистый градиент — ничего не сломается */
  background-image: linear-gradient(165deg, rgba(138,106,46,0.55) 0%, rgba(36,30,21,0.8) 65%), url('images/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-gold-deep);
  color: var(--color-white);
  position:relative;
  overflow:hidden;
}
/* большой полупрозрачный вензель на фоне — декоративная деталь глубины */
.hero::before{
  content: attr(data-watermark);
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: min(60vw, 34rem);
  color: rgba(233, 219, 180, 0.06);
  white-space:nowrap;
  pointer-events:none;
  line-height:1;
}
.hero-frame{ max-width: 640px; padding: 0 6vw; position:relative; z-index:1; }

/* мерцающие золотые точки — лёгкая живописная деталь на фоне hero */
.sparkle{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background: var(--color-gold-light);
  box-shadow: 0 0 6px 1px rgba(233,219,180,0.8);
  animation: sparkle-float 6s ease-in-out infinite;
  z-index:0;
}
@keyframes sparkle-float{
  0%, 100%{ opacity:0.15; transform: translateY(0); }
  50%{ opacity:0.9; transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce){
  .sparkle{ animation: none; opacity:0.4; }
}
.botanical{ width: 220px; height:auto; margin: 0 auto 1.5rem; stroke: var(--color-gold-light); fill:none; stroke-width:1.4; opacity:0.75; }
.botanical circle{ fill: var(--color-gold-light); stroke:none; }

.hero-names{
  font-family: var(--font-heading);
  font-weight:400;
  font-size: clamp(3.8rem, 12vw, 6.2rem);
  line-height:1;
  margin: 0 0 1rem;
  background: linear-gradient(120deg, #FFFDF6 0%, var(--color-gold-light) 30%, var(--color-gold) 50%, var(--color-gold-light) 70%, #FFFDF6 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-white); /* запасной цвет для браузеров без background-clip:text */
  display:flex; align-items:center; justify-content:center; gap:0.4em; flex-wrap:wrap;
  animation: shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{
  0%, 100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .hero-names{ animation: none; }
}
@supports not (background-clip: text){
  .hero-names{ color: var(--color-white); animation: none; }
}
body.lang-ko .hero-names{ font-size: clamp(2.4rem, 8vw, 3.8rem); font-weight:600; }
.hero-amp{ font-family: var(--font-display); font-style:italic; font-size:0.5em; color: var(--color-gold-light); }
body.lang-ko .hero-amp{ font-family: var(--font-sans); font-style:normal; }
.hero-date{
  font-family: var(--font-sans);
  letter-spacing:0.18em; text-transform:uppercase; font-size:0.8rem;
  color: var(--color-gold-light);
}

.scroll-cue{ margin-top:4rem; display:flex; flex-direction:column; align-items:center; gap:0.6rem; }
.scroll-cue span{
  width:1px; height:38px; background: var(--color-gold-light);
  position:relative; overflow:hidden;
}
.scroll-cue span::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--color-white);
  animation: cue-drop 2s ease-in-out infinite;
}
@keyframes cue-drop{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
.scroll-cue p{ font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color: var(--color-gold-light); opacity:0.8; margin:0; }

/* ============================================================
   КАРТОЧКИ С ДВОЙНОЙ РАМКОЙ — календарь и анкета
   классический приём приглашений: внешняя линия + отступ +
   внутренняя тонкая линия
   ============================================================ */
.framed-card{
  position:relative;
  background: var(--color-white);
  border: 1px solid var(--color-gold);
  padding: 2.25rem 1.75rem;
}
.framed-card::before{
  content:'';
  position:absolute; inset: 7px;
  border: 1px solid var(--color-gold-light);
  pointer-events:none;
}
/* маленькие уголки-скобки поверх рамки — деталь как на печатных
   пригласительных */
.framed-card::after{
  content:'';
  position:absolute; inset: -1px;
  pointer-events:none;
  background:
          linear-gradient(var(--color-gold), var(--color-gold)) top left / 18px 2px no-repeat,
          linear-gradient(var(--color-gold), var(--color-gold)) top left / 2px 18px no-repeat,
          linear-gradient(var(--color-gold), var(--color-gold)) top right / 18px 2px no-repeat,
          linear-gradient(var(--color-gold), var(--color-gold)) top right / 2px 18px no-repeat,
          linear-gradient(var(--color-gold), var(--color-gold)) bottom left / 18px 2px no-repeat,
          linear-gradient(var(--color-gold), var(--color-gold)) bottom left / 2px 18px no-repeat,
          linear-gradient(var(--color-gold), var(--color-gold)) bottom right / 18px 2px no-repeat,
          linear-gradient(var(--color-gold), var(--color-gold)) bottom right / 2px 18px no-repeat;
}

/* ============================================================
   КАЛЕНДАРЬ
   ============================================================ */
.calendar{
  width:100%; max-width: 420px;
}
.calendar-head{ display:flex; justify-content:space-between; font-family: var(--font-display); font-size:1.3rem; margin-bottom:1.2rem; color: var(--color-gold-deep); }
.calendar-month{ font-style:italic; }
body.lang-ko .calendar-month{ font-style:normal; font-weight:600; }
.calendar-grid{
  display:grid; grid-template-columns: repeat(7, 1fr);
  row-gap: 0.7rem;
  font-size:0.85rem;
}
.calendar-grid .dow{ font-size:0.65rem; letter-spacing:0.08em; color: var(--color-gold); text-transform:uppercase; }
.calendar-grid .day{ padding:0.25rem 0; color: var(--color-ink); opacity:0.75; font-variant-numeric: oldstyle-nums; }
.calendar-grid .day.empty{ opacity:0; }
.calendar-grid .day.is-marked{
  position:relative; opacity:1; color: var(--color-gold-deep); font-weight:600;
}
.calendar-grid .day.is-marked::after{
  content:''; position:absolute; inset:-6px; margin:auto; width:26px; height:26px;
  border: 1px solid var(--color-gold); border-radius:50%;
}

/* ============================================================
   КАРТА
   ============================================================ */
.map-frame{
  width:100%; max-width:560px; aspect-ratio: 4/3;
  border: 1px solid var(--color-gold-light);
  overflow:hidden; margin-top: 1rem;
}
.map-frame iframe{ width:100%; height:100%; border:0; filter: sepia(12%) saturate(90%); }

/* ============================================================
   ТАЙМИНГ
   ============================================================ */
.timeline{ list-style:none; padding:0; margin:0; width:100%; max-width:420px; text-align:left; }
.timeline li{
  display:flex; align-items:baseline; gap:1.4rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-gold-light);
}
.timeline li:last-child{ border-bottom:none; }
.timeline-time{ font-family: var(--font-display); font-size:1.3rem; color: var(--color-gold); min-width:64px; font-variant-numeric: oldstyle-nums; }
.timeline-label{ font-size:0.98rem; }

/* ============================================================
   ФОРМА АНКЕТЫ
   ============================================================ */
.rsvp-form{ width:100%; max-width: 460px; text-align:left; margin-top: 1rem; }
.field{ display:block; margin-bottom:1.6rem; border:none; padding:0; }
.field span, .field legend{
  display:block; font-size:0.78rem; letter-spacing:0.05em;
  color: var(--color-gold-deep); margin-bottom:0.55rem; padding:0;
}
.field input[type="text"], .field input[type="number"], .field textarea{
  width:100%; padding:0.75rem 0.9rem;
  border: 1px solid var(--color-gold-light);
  background: var(--color-white);
  font-family: var(--font-sans); font-size:0.95rem; color: var(--color-ink);
  border-radius:2px;
}
.field textarea{ resize:vertical; min-height:6.5rem; line-height:1.5; }
.field input:focus, .field textarea:focus{ border-color: var(--color-gold); }
.field-hint{
  display:block; font-family: var(--font-body); font-size:0.98rem; letter-spacing:normal;
  text-transform:none; font-weight:400; opacity:0.8;
  color: var(--color-ink); margin-top:-0.25rem; margin-bottom:0.7rem;
  line-height:1.6;
}
.radio, .checkbox{ display:flex; align-items:center; gap:0.55rem; font-size:0.92rem; margin-bottom:0.5rem; cursor:pointer; }
.radio span, .checkbox span{ display:inline; margin:0; font-size:inherit; color:inherit; letter-spacing:normal; }
.checkbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; }

.rsvp-thanks{ margin-top:2rem; }

/* ============================================================
   КОНТАКТЫ
   ============================================================ */
.contacts-grid{ display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center; margin-top:0.5rem; }
.contact-card{
  display:flex; flex-direction:column; gap:0.3rem;
  padding: 1.4rem 2rem;
  border: 1px solid var(--color-gold-light);
  text-decoration:none;
  min-width: 200px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.contact-card:hover{ border-color: var(--color-gold); transform: translateY(-3px); }
.contact-name{ font-family: var(--font-display); font-size:1.3rem; color: var(--color-gold-deep); }
.contact-mini-divider{
  display:block; width: 28px; height:1px; background: var(--color-gold-light); margin: 0.5rem auto;
}
.contact-phone{ font-size:0.9rem; opacity:0.8; }

/* ============================================================
   ОБРАТНЫЙ ОТСЧЁТ
   ============================================================ */
.countdown-section{
  max-width:none; width:100%;
  /* аналогично hero — файл images/countdown.jpg подставится сам,
     если положить его в папку images/ */
  background-image: linear-gradient(15deg, rgba(138,106,46,0.55) 0%, rgba(36,30,21,0.8) 65%), url('images/countdown.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-gold-deep);
  color: var(--color-white);
  position:relative;
  overflow:hidden;
}
.countdown-section::before{
  content: attr(data-watermark);
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-script);
  font-size: min(60vw, 34rem);
  color: rgba(233, 219, 180, 0.06);
  white-space:nowrap;
  pointer-events:none;
  line-height:1;
}
.countdown-section > *{ position:relative; z-index:1; }
.countdown{ display:flex; gap:1.4rem; }
.countdown-box{
  display:flex; flex-direction:column; align-items:center;
  min-width: 70px;
  padding: 1rem 0.6rem;
  border: 1px solid var(--color-gold-light);
}
.countdown-box span{ font-family: var(--font-display); font-size:2.1rem; color: var(--color-gold-light); font-variant-numeric: oldstyle-nums; }
.cd-pulse{ animation: cd-pulse 0.5s ease; }
@keyframes cd-pulse{
  0%{ transform: scale(1); opacity: 1; }
  40%{ transform: scale(1.12); opacity: 0.75; }
  100%{ transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .cd-pulse{ animation: none; }
}
.countdown-box small{ font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; opacity:0.75; margin-top:0.3rem; }
.closing-line{ margin-top:2.5rem; font-family: var(--font-script); font-size:1.8rem; color: var(--color-gold-light); }
body.lang-ko .closing-line{ font-size:1.3rem; font-weight:600; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 480px){
  :root{ --section-pad-y: 5rem; }
  .checkbox-grid{ grid-template-columns:1fr; }
  .countdown{ gap:0.7rem; }
  .countdown-box{ min-width:58px; padding:0.8rem 0.3rem; }
  .countdown-box span{ font-size:1.6rem; }
  .framed-card{ padding: 1.75rem 1.25rem; }
}