/* ============================================================
   Александр & Ирина — classic botanical wedding invitation
   ============================================================ */

:root{
  --bg:        #fcf9f9;
  --ink:       #3b463a;   /* green-charcoal body text */
  --ink-soft:  #6f776b;
  --label:     #8b9088;   /* spaced uppercase labels */
  --green:     #344434;   /* dark panels */
  --cream:     #efe7d9;   /* countdown band */
  --line:      rgba(59,70,58,.22);
  --white:     #ffffff;

  /* Two families (per DESIGN.md): PT Serif (ceremony) + PT Sans (logistics) */
  --serif:   "PT Serif", Georgia, serif;   /* display & section titles (700) */
  --serif-2: "PT Serif", Georgia, serif;   /* ceremonial body prose (400) */
  --sans:    "PT Sans", Arial, sans-serif; /* labels, buttons, addresses, nav */
  --script:  "Great Vibes", cursive; /* акцент — имена и dress code */
}

*{ box-sizing:border-box; margin:0; padding:0; }

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

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif-2);
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

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

.page{
  max-width:680px;
  margin:0 auto;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}

/* ---------- shared layout ---------- */
.section{ padding:64px 30px; position:relative; }
.section--center{ text-align:center; }

@media (max-width:540px){
  .section{ padding:52px 22px; }
}

/* ---------- language nav ---------- */
.lang-nav{
  position:fixed;
  top:16px; right:16px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(252,249,249,.92);
  backdrop-filter:blur(8px);
  border:1px solid var(--green);
  padding:6px 14px;
}
.lang-btn{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.62rem;
  color:var(--label);
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  transition:color .2s ease;
}
.lang-btn:hover{ color:var(--green); }
.lang-btn.is-active{ color:var(--green); font-weight:700; }
.lang-sep{ color:var(--label); font-size:.62rem; }

/* ---------- type scale (one consistent hierarchy, big → small) ----------
   names  >  section titles  >  prose / signature  >  venue / time  >  labels  */
.names{
  font-family:var(--script);          /* как «Ladies» — каллиграфический скрипт */
  font-weight:400;
  text-transform:none;
  letter-spacing:.01em;
  line-height:1.15;
  color:var(--ink);
}
.names__line{ display:block; font-size:clamp(3.6rem,14vw,6rem); }
.names__amp{
  display:block;
  font-weight:400;
  letter-spacing:.01em;
  font-size:clamp(2.3rem,8.5vw,3.6rem);
  margin:.02em 0;
  color:var(--ink);
}

.kicker{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.86rem;
  line-height:1.8;
  color:var(--label);
}
.kicker--mt{ margin-top:34px; }

.section-title{
  font-family:var(--serif);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:clamp(1.7rem,6vw,2.3rem);
  line-height:1.3;
  color:var(--ink);
}

.serif-prose{
  font-family:var(--serif-2);
  font-size:1.16rem;
  line-height:1.9;
  color:var(--ink);
}

.accent-date{
  font-family:var(--serif-2);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:1.14rem;
  color:var(--ink-soft);
  margin:26px 0;
}
.accent-date--sm{ font-size:1.04rem; margin:6px 0 0; }

/* основная дата приглашения — крупнее и жирнее, как заголовки разделов (Dress code) */
.invite .accent-date{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.55rem,5.5vw,2.05rem);
  letter-spacing:.12em;
  color:var(--ink);
}

.signature{
  font-family:var(--serif-2);
  font-style:italic;
  font-size:1.2rem;
  color:var(--ink);
  margin-top:8px;
}

.spaced-serif{
  font-family:var(--serif-2);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.9rem;
  line-height:1.95;
  color:var(--ink-soft);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:.68rem;
  color:var(--ink);
  text-decoration:none;
  border:1px solid var(--ink);
  padding:14px 38px;
  background:transparent;
  cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.btn:hover{ background:var(--ink); color:var(--bg); }

.btn--solid{
  background:var(--white);
  color:var(--green);
  border-color:var(--white);
  margin-top:8px;
}
.btn--solid:hover{ background:transparent; color:var(--white); }
.btn:disabled{ opacity:.55; cursor:default; }

.link{ color:inherit; text-underline-offset:3px; }

/* ============ HERO ============ */
.hero{ padding-top:84px; }
.hero .kicker{ margin-top:18px; }

.photo{
  position:relative;
  background:#e7e6e0;
  overflow:hidden;
}
.photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.photo__ph{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans);
  letter-spacing:.3em;
  font-size:.7rem;
  color:#a7a89f;
}
.photo--hero{ aspect-ratio:2/3; margin-top:38px; }
.photo--wide{ aspect-ratio:4/3; margin:0; }

/* ============ VENUE ============ */
.venue__name{
  font-family:var(--serif-2);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:1.14rem;
  color:var(--ink);
}
.venue__sub{
  font-family:var(--serif-2);
  font-size:1.06rem;
  line-height:1.8;
  color:var(--ink-soft);
  margin-top:10px;
}
.venue__gather{ margin-top:30px; }
.venue .btn{ margin-top:34px; }

/* две площадки: венчание + приём */
.venue__place--first{ margin-top:0; }

/* подписи площадок (Венчание / Праздничный вечер) — жирно и крупно, как Dress code */
.venue__place .kicker{
  font-family:var(--serif);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:clamp(1.7rem,6vw,2.3rem);
  line-height:1.3;
  color:var(--ink);
}
.venue__place .venue__name{ margin-top:18px; }
.venue__place .accent-date--sm{ margin:8px 0 0; }
.venue__place .btn{ margin-top:26px; }
.venue__place--mt{
  margin-top:52px;
  padding-top:48px;
  border-top:1px solid var(--line);
}

/* ============ FLORAL BACKDROP — крупные кусты роз вдоль всей страницы ============ */
.flora-bg{
  position:absolute;
  top:0; left:0; right:0;
  height:100%;
  z-index:0;
  pointer-events:none;
  overflow:hidden;             /* арт уходит за края окна */
}
.bloom{
  position:absolute;
  width:clamp(300px,46vw,640px);
  height:auto;
  opacity:.62;
}
/* плотная часть куста — в боковом поле, лепестки заходят к контенту */
.bloom.L{ left:-6vw; }
.bloom.R{ right:-6vw; transform:scaleX(-1); }

@media (max-width:760px){
  .bloom{ width:clamp(230px,58vw,420px); opacity:.5; }
  .bloom.L{ left:-13vw; }
  .bloom.R{ right:-13vw; }
}

/* контент — поверх цветочного слоя; фон прозрачный, чтобы кусты были видны по краям */
.page{ background:transparent; z-index:1; }

/* ============ FLORAL ART (твой исходный арт, у зелёных панелей) ============ */
.floral{
  position:absolute;
  pointer-events:none;
  z-index:2;
  opacity:.7;
  width:auto;
}

.green-stage{ padding:40px 30px; }

.green-card__frame{
  position:absolute; inset:16px;
  border:1px solid rgba(255,255,255,.35);
  pointer-events:none;
}

/* ============ PROGRAM (зелёная панель с расписанием) ============ */
.program__card{ padding:54px 30px; }
.program__title{
  font-family:var(--serif);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:clamp(1.7rem,6vw,2.3rem);
  line-height:1.3;
  color:var(--white);
  text-align:center;
  margin-bottom:40px;
}
/* единая сетка: время — в одной колонке, события — в другой, строго друг под другом */
.program__list{
  list-style:none;
  display:grid;
  grid-template-columns:auto auto;
  justify-content:center;
  align-items:baseline;
  column-gap:24px;
  row-gap:15px;
  max-width:100%;
}
.program__list li{ display:contents; }
.program__time{
  font-family:var(--serif-2);
  font-size:1.1rem;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--white);
  white-space:nowrap;
  text-align:right;
}
.program__event{
  font-family:var(--serif-2);
  font-size:1.1rem;
  color:rgba(255,255,255,.9);
  text-align:left;
}

/* ============ DRESS CODE ============ */
.dc-roles{ margin-top:42px; }
.dc-script{
  font-family:var(--script);
  font-size:clamp(2.4rem,10vw,3.1rem);
  line-height:1;
  color:var(--ink);
}
.dc-script--mt{ margin-top:40px; }
.dc-roles .kicker{
  font-size:1rem;
  letter-spacing:.14em;
  line-height:1.7;
  margin-top:16px;
}

.dc-collage{
  margin-top:44px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.photo--dc{ aspect-ratio:3/4; }

/* ============ NO CHILDREN ============ */
.nokids{ padding-top:40px; }   /* отступ перед разделом — как между «Программой дня» и «Dress code» */
.nokids .serif-prose{ margin-top:22px; }

/* ============ RSVP ============ */
.rsvp{ overflow:visible; padding:48px 30px; }
.floral--rl{ width:clamp(150px,42vw,230px); bottom:-24px; left:-46px; }
.floral--rr{ width:clamp(130px,36vw,190px); top:-30px;  right:-44px; transform:scaleX(-1); }

.green-card{
  position:relative;
  background:var(--green);
  padding:48px 34px;
  z-index:1;
}
.green-card__inner{ position:relative; z-index:1; }
.rsvp__title{
  font-family:var(--serif);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:1.3rem;
  line-height:1.5;
  color:var(--white);
  text-align:center;
  margin-bottom:38px;
}

.rsvp-form .field{ margin-bottom:30px; }
.field__label{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:1rem;
  color:var(--white);
}
.field__hint{
  font-family:var(--serif-2);
  font-style:italic;
  font-size:.82rem;
  color:rgba(255,255,255,.6);
  margin-top:6px;
}
.field__input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.4);
  color:var(--white);
  font-family:var(--serif-2);
  font-size:1rem;
  padding:10px 2px;
  margin-top:14px;
}
.field__input:focus{ outline:none; border-bottom-color:#fff; }

.radio,.checkbox{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-family:var(--serif-2);
  font-size:.95rem;
  color:var(--white);
  cursor:pointer;
  margin-top:14px;
  position:relative;
}
.radio input,.checkbox input{ position:absolute; opacity:0; width:0; height:0; }
.radio__mark{
  flex:0 0 auto;
  width:15px; height:15px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:50%;
  margin-top:5px;
  position:relative;
}
.radio input:checked + .radio__mark::after{
  content:""; position:absolute; inset:3px;
  background:#d8c9a0; border-radius:50%;
}
.checkbox__mark{
  flex:0 0 auto;
  width:15px; height:15px;
  border:1px solid rgba(255,255,255,.6);
  margin-top:5px;
  position:relative;
}
.checkbox input:checked + .checkbox__mark::after{
  content:""; position:absolute; left:4px; top:0px;
  width:5px; height:9px;
  border:solid #d8c9a0; border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}

.rsvp-form .btn--solid{ display:block; margin:14px auto 0; }
.rsvp-form__done{
  text-align:center;
  font-family:var(--serif-2);
  font-style:italic;
  color:rgba(255,255,255,.85);
  margin-top:18px;
}
.rsvp-sink{ position:absolute; width:0; height:0; border:0; left:-9999px; }

.rsvp-success{
  text-align:center;
  font-family:var(--serif-2);
  font-style:italic;
  font-size:1.15rem;
  line-height:1.9;
  color:rgba(255,255,255,.92);
}

/* ============ COUNTDOWN ============ */
.countdown-band{
  text-align:center;
  padding:54px 24px 60px;
  margin-top:40px;
}
.countdown__title{
  font-family:var(--serif);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:clamp(1.7rem,6vw,2.3rem);
  line-height:1.3;
  color:var(--ink);
}
.countdown__grid{
  display:flex;
  justify-content:center;
  gap:clamp(16px,6vw,40px);
  margin-top:34px;
}
.cd{ display:flex; flex-direction:column; align-items:center; }
.cd__num{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2rem,9vw,3rem);
  line-height:1;
  color:var(--ink);
}
.cd__label{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.66rem;
  color:var(--ink-soft);
  margin-top:12px;
}

/* ============ CONTACT ============ */
.contact{ padding-top:60px; }
.contact .spaced-serif{ margin-top:30px; }
.wa{
  display:inline-flex;
  color:var(--ink);
  margin:30px 0 18px;
  width:44px; height:44px;
}
.wa svg{ width:100%; height:100%; }
.contact__name{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.86rem;
  color:var(--ink-soft);
}

/* ============ ANIMATION ============ */
.fade-in{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.fade-in.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .fade-in{ opacity:1; transform:none; transition:none; }
  .btn{ transition:none; }
}