/* =====================================================================
   ДИЗАЙН-ТОКЕНЫ
   Цвета и прочие переменные темы. Меняются только здесь.
   ===================================================================== */
:root{
  --ink:      #0d0d0d;
  --ink-2:    #1a1a1a;
  --paper:    #ffffff;
  --off:      #faf9f7;
  --gray:     #6e6e6e;
  --gray-l:   #b3b3b3;
  --line:     rgba(0,0,0,0.16);
  --line-dk:  rgba(255,255,255,0.22);
}

/* =====================================================================
   БАЗОВЫЕ СТИЛИ (reset / глобальные правила тегов)
   ===================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body
{
  margin:0;
  background:var(--off);
  color:var(--ink);
  font-family:'EB Garamond', serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}

h1,h2,h3{
  font-family:'Italiana', serif;
  font-weight:400;
  letter-spacing:0.02em;
}

a{color:inherit;}

section{position:relative;}

:focus-visible{outline:1.5px solid var(--paper); outline-offset:3px;}
.section--light :focus-visible{outline-color:var(--ink);}

/* =====================================================================
   УТИЛИТЫ (не являются самостоятельными БЭМ-блоками,
   переиспользуются в разных блоках)
   ===================================================================== */

/* .eyebrow — маленькая надпись-«подзаголовок» над заголовком секции.
   Модификатор eyebrow--dark даёт светлый цвет текста на тёмном фоне. */
.eyebrow
{
  font-family:'EB Garamond', serif;
  font-style:italic;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-size:0.72rem;
  color:var(--gray);
}
.eyebrow--dark{color:var(--gray-l);}

/* .container — центрирующая обёртка с ограничением ширины контента */
.container{max-width:760px;margin:0 auto;padding:0 28px;}

/* .js-reveal — JS-хук для анимации появления блоков при скролле.
   Класс не для стилизации по смыслу (BEM), а как флаг поведения:
   JS добавляет модификатор js-reveal--visible, когда блок попал во вьюпорт. */
.js-reveal{opacity:0; transform:translateY(22px); transition:opacity 0.9s ease, transform 0.9s ease;}
.js-reveal--visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .js-reveal{opacity:1; transform:none; transition:none;}
}

/* .btn-ghost — кнопка-ссылка с прозрачным фоном и обводкой.
   Модификаторы задают цвет в зависимости от фона секции. */
.btn-ghost{
  display:inline-block; margin-top:12px; padding:11px 26px;
  border:1px solid currentColor;
  text-decoration:none; letter-spacing:0.12em; text-transform:uppercase; font-size:0.72rem;
  transition:background 0.3s, color 0.3s;
}
.btn-ghost--dark{color:var(--paper);}
.btn-ghost--dark:hover{background:var(--paper); color:var(--ink);}
.btn-ghost--light{color:var(--ink);}
.btn-ghost--light:hover{background:var(--ink); color:var(--paper);}

/* =====================================================================
   БЛОК: logo
   Монограмма молодожёнов. Используется в трёх разных местах
   (обложка, hero, футер) — со своими размерами и отступами,
   поэтому у блока три элемента-контекста вместо трёх разных классов.
   ===================================================================== */
.logo{filter:invert(1) brightness(1.15); height:auto;}

/* =====================================================================
   БЛОК: cover
   Первый экран — фото на всю ширину с цитатой поверх затемнения.
   ===================================================================== */
.cover
{
  position:relative;
  background:var(--ink);
  overflow:hidden;
}

.cover__photo
{
  width:100%;
  aspect-ratio:667/1000;
  max-height:100vh;
  object-fit:cover;
  object-position:50% 30%;
  display:block;
}

.cover__scrim
{
  position:absolute;
  left:0; right:0; bottom:0;
  height:58%;
  background:linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.32) 60%, transparent 100%);
  pointer-events:none;
}

.cover__overlay
{
  position:absolute;
  left:0; right:0;
  bottom:16%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:0 28px;
}

.cover__logo
{
  width:64px;
  margin-bottom:0;
}

.cover__quote
{
  max-width:360px;
  text-align:center;
  font-family:'EB Garamond', serif;
  font-style:italic;
  font-size:1.05rem;
  line-height:1.5;
  color:rgba(255,255,255,0.92);
}
@media (max-width:640px){
  .cover__overlay{bottom:12%; gap:12px;}
  .cover__logo{width:52px;}
  .cover__quote{font-size:0.95rem; max-width:280px;}
}

/* =====================================================================
   БЛОК: hero
   Первый смысловой экран с именами, датой и таймером обратного отсчёта.
   ===================================================================== */
.hero
{
  min-height:100vh;
  background:var(--ink);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:80px 24px 56px;
  overflow:hidden;
}
.hero__logo
{
  width:120px;
  margin-bottom:22px;
  animation:logoFadeIn 1.4s ease both;
}
@keyframes logoFadeIn{
  from{opacity:0; transform:translateY(-6px);}
  to{opacity:1; transform:translateY(0);}
}
.hero__eyebrow{margin-bottom:18px;}
.hero__title
{
  font-size:clamp(2.4rem, 8vw, 4.6rem);
  margin:0;
  line-height:1.05;
}
.hero__amp
{
  display:block;
  color:var(--gray-l);
  font-size:0.55em;
  margin:6px 0;
}
.hero__date
{
  margin-top:34px;
  letter-spacing:0.32em;
  font-size:1rem;
  color:var(--paper);
}
.hero__scroll-cue
{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:1px; height:46px;
  background:linear-gradient(rgba(255,255,255,0.6), transparent);
}
@media (max-width:640px){
  .hero{padding:64px 20px 44px;}
  .hero__logo{width:92px; margin-bottom:16px;}
}

/* =====================================================================
   БЛОК: countdown
   Таймер «дней · часов · минут · секунд» до события.
   ===================================================================== */
.countdown{
  margin-top:44px;
  display:flex;
  gap:22px;
}
.countdown__item{min-width:64px; text-align:center;}
.countdown__value{
  font-family:'Italiana', serif;
  font-size:2.1rem;
  color:var(--paper);
  line-height:1;
}
.countdown__label{
  margin-top:6px;
  font-size:0.62rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
}
.countdown__separator{color:var(--line-dk); font-size:1.6rem; align-self:flex-start; margin-top:2px;}
@media (max-width:640px){
  .countdown{gap:12px;}
  .countdown__item{min-width:50px;}
  .countdown__value{font-size:1.55rem;}
  .countdown__label{font-size:0.55rem;}
  .countdown__separator{font-size:1.2rem;}
}
@media (max-width:380px){
  .countdown{gap:8px;}
  .countdown__item{min-width:44px;}
  .countdown__value{font-size:1.3rem;}
}

/* =====================================================================
   БЛОК: portrait
   Фото на всю ширину между hero и текстовыми секциями.
   ===================================================================== */
.portrait{
  background:var(--ink);
  padding:0;
}
.portrait__figure{margin:0; position:relative;}
.portrait__image{
  width:100%;
  aspect-ratio:854/1280;
  max-height:92vh;
  object-fit:cover;
  object-position:50% 22%;
  display:block;
}
@media (orientation:landscape) and (max-height:500px){
  .portrait__image{
    max-height:none;
    width:auto;
    height:96vh;
    margin:0 auto;
    object-fit:contain;
  }
}

/* =====================================================================
   БЛОК: section
   Универсальная обёртка для текстовых секций (история, дресс-код,
   расписание, локация, галерея, RSVP). Модификаторы section--light /
   section--dark задают цветовую тему секции; остальное содержимое —
   это собственные блоки (story, venue-card и т.д.) внутри section.
   ===================================================================== */
.section{padding:104px 0;}
.section--light{background:var(--off); color:var(--ink);}
.section--dark{background:var(--ink); color:var(--paper);}
.section .container{text-align:center;}

.section__divider{width:1px; height:54px; margin:0 auto 34px;}
.section--light .section__divider{background:linear-gradient(var(--ink), transparent);}
.section--dark .section__divider{background:linear-gradient(var(--paper), transparent);}

.section__title{font-size:clamp(1.8rem, 4vw, 2.5rem); margin:8px 0 26px;}

.section__lede{max-width:520px; margin:0 auto;}
.section--light .section__lede{color:#3d3d3d;}
.section--dark .section__lede{color:rgba(255,255,255,0.75);}

@media (max-width:640px){
  .section{padding:72px 0;}
  .container{padding:0 22px;}
}

/* ---------- содержимое секции «Наша история» ---------- */
.story__frame{
  margin:40px auto 0; max-width:520px;
  border:1px solid var(--line);
  padding:34px 30px;
  font-style:italic;
  color:#3d3d3d;
  position:relative;
}
.story__frame::before, .story__frame::after{
  content:""; position:absolute; width:14px; height:14px; border:1px solid var(--ink);
}
.story__frame::before{top:-1px; left:-1px; border-right:none; border-bottom:none;}
.story__frame::after{bottom:-1px; right:-1px; border-left:none; border-top:none;}
@media (max-width:640px){
  .story__frame{padding:26px 20px;}
}

/* ---------- содержимое секции «Ждём Вас» (расписание) ---------- */
.schedule__time{
  font-family:'Italiana', serif;
  font-size:clamp(3rem, 9vw, 4.4rem);
  margin:8px 0 6px;
  letter-spacing:0.04em;
}
.schedule__label{
  letter-spacing:0.18em; text-transform:uppercase; font-size:0.78rem; color:var(--gray);
}

/* ---------- содержимое секции «Место проведения» ---------- */
.venue-card{
  margin:40px auto 0; max-width:440px;
  border:1px solid var(--line-dk);
  padding:34px 30px;
}
.section--light .venue-card{border-color:var(--line);}
.venue-card__title{margin:0 0 8px; font-size:1.6rem;}
.venue-card__address{margin-bottom:6px;}
@media (max-width:640px){
  .venue-card{padding:26px 20px;}
}

/* ---------- содержимое секции «Галерея» ---------- */
.gallery__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:40px;
}
.gallery__image{
  width:100%; height:100%;
  object-fit:cover;
  aspect-ratio:3/4;
}
@media (max-width:640px){
  .gallery__grid{gap:8px;}
}

/* =====================================================================
   БЛОК: rsvp
   Секция подтверждения присутствия — сердечко-иконка, пояснительный
   текст и форма (форма вынесена в отдельные блоки form-field / attend-toggle).
   ===================================================================== */
.rsvp__icon{width:26px; height:26px; margin:0 auto 22px;}
.section--dark .rsvp__icon path{stroke:var(--paper);}
.rsvp__note{
  max-width:480px; margin:0 auto 8px;
  color:rgba(255,255,255,0.78);
}
.rsvp__note + .rsvp__note{margin-top:14px;}

.rsvp__form{margin:44px auto 0; max-width:440px; text-align:left;}
@media (max-width:640px){
  .rsvp__form{max-width:100%;}
}

.rsvp__submit{
  width:100%; padding:14px; background:var(--paper); color:var(--ink); border:none;
  letter-spacing:0.16em; text-transform:uppercase; font-size:0.78rem; cursor:pointer;
  transition:opacity 0.3s;
}
.rsvp__submit:hover{opacity:0.8;}
.rsvp__submit:disabled{opacity:0.4; cursor:default;}

/* .rsvp__message — статус отправки формы.
   Модификатор rsvp__message--error красит текст в тревожный цвет. */
.rsvp__message{margin-top:16px; font-size:0.9rem; text-align:center; min-height:1.2em; color:rgba(255,255,255,0.8);}
.rsvp__message--error{color:#ff8a8a;}

/* =====================================================================
   БЛОК: form-field
   Переиспользуемая пара «подпись + поле» для текстовых полей формы.
   ===================================================================== */
.form-field{margin-bottom:22px;}
.form-field__label{
  display:block; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gray-l); margin-bottom:8px;
}
.form-field__input,
.form-field__textarea{
  width:100%; border:none; border-bottom:1px solid var(--line-dk);
  background:transparent; font-family:'EB Garamond', serif; font-size:1.05rem;
  padding:8px 2px; color:var(--paper);
}
.form-field__input:focus,
.form-field__textarea:focus{outline:none; border-bottom-color:var(--paper);}
.form-field__textarea{resize:vertical; min-height:70px;}

/* =====================================================================
   БЛОК: attend-toggle
   Переключатель «Приду / Не смогу». Активная кнопка получает
   состояние is-active (JS переключает этот класс по клику).
   ===================================================================== */
.attend-toggle{display:flex; gap:12px;}
.attend-toggle__button{
  flex:1; padding:12px 10px; background:transparent; border:1px solid var(--line-dk);
  font-family:'EB Garamond', serif; font-size:0.95rem; cursor:pointer; color:var(--paper);
  transition:all 0.25s;
}
.attend-toggle__button.is-active{background:var(--paper); color:var(--ink); border-color:var(--paper);}

/* =====================================================================
   БЛОК: site-footer
   ===================================================================== */
.site-footer{
  background:var(--ink); color:rgba(255,255,255,0.7);
  text-align:center; padding:60px 24px 40px;
  border-top:1px solid var(--line-dk);
}
.site-footer__logo{width:64px; margin:0 auto 14px;}
.site-footer__note{font-size:0.78rem; letter-spacing:0.12em;}