:root{
  --page:#f2eee9;
  --paper:#fffdfa;
  --ink:#1a1a1a;
  --muted:#6c6866;
  --card-shadow:0 8px 28px rgba(0,0,0,.12);

  /* Fonts & typographic scale */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Cormorant Garamond", serif;
  --fs-base: 22px; /* base size increased by +6px */
  --section-gap: 28px; /* vertical spacing between main sections */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --ls-heading: .06em;
  --fs-hint: calc(var(--fs-base) - 6px);
  --accent: #8e7d73;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);color:var(--ink);background:var(--page);font-size:var(--fs-base)}
.container{width:min(1200px,100%);margin:0 auto;padding:24px; padding-top: 0;}

.section-title,.loc-title{
  font-family:var(--font-serif);font-weight:var(--fw-semibold);letter-spacing:var(--ls-heading);text-transform:uppercase;
  margin:0 0 16px;color:var(--ink)
}
.section-title{font-size:40px}
.loc-title{font-size:22px}
p{line-height:1.6;color:#2b2b2b}
p{line-height:1.6;color:#2b2b2b}
h1{font-family:var(--font-serif);font-weight:var(--fw-medium);letter-spacing:.12em;text-transform:uppercase;font-size:48px;margin:12px 0 0;color:#fff}
h3{font-family:var(--font-serif);font-weight:var(--fw-medium);letter-spacing:.12em;text-transform:uppercase;font-size:30px;margin:12px 0 0;color:#fff}
p{line-height:1.6;color:#2b2b2b}
.card{background:var(--paper);border-radius:10px;box-shadow:var(--card-shadow);
  /* Make text inside cards match the RSVP form (serif, medium, 18px) */
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: 1.5;
}

/* HERO full width без щели */
.hero-full{display:block;position:relative;width:100%;aspect-ratio:16/5;overflow:hidden;margin:0;margin-top:-5px;}
.hero-full img{display:block;width:100%;height:100%;object-fit:cover; object-position: center calc(33%);}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%)}
/* Center the caption both vertically and horizontally and make it adaptive */
.hero-caption{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:clamp(12px,3vw,48px);text-align:center;pointer-events:none;box-sizing:border-box}
.hero-caption > *{pointer-events:auto} /* allow interaction with children if needed (e.g. links/buttons) */

/* Restrict line length inside caption and make text scale on different screens */
.hero-caption h1,
.hero-caption .hero-title{font-size:clamp(24px,6vw,48px);line-height:1.02;margin:0;max-width:min(92%,900px);width:100%;word-break:break-word;text-shadow:0 6px 18px rgba(0,0,0,0.55)}
.hero-caption h3{font-size:clamp(18px,5vw,32px);margin:0;max-width:min(92%,900px);width:100%;word-break:break-word;text-shadow:0 5px 14px rgba(0,0,0,0.5)}
.hero-caption .hero-date{color:#eaeaea;font-size:clamp(16px,4vw,28px);letter-spacing:.12em;text-transform:uppercase;margin:0;text-shadow:0 4px 10px rgba(0,0,0,0.55)}
.hero-caption p{font-size:clamp(13px,3.2vw,18px);margin:8px 0 0;max-width:min(92%,820px);width:100%;color:rgba(255,255,255,0.95);text-shadow:0 3px 8px rgba(0,0,0,0.5)}

/* Small tweaks for very narrow screens (e.g. iPhone SE) */
@media (max-width:360px){
  .hero-caption{gap:6px;padding:10px}
  .hero-caption h1,.hero-caption .hero-title{letter-spacing:0.06em}
}

/* INTRO */
.intro{padding:28px;}
.hello{font-family:var(--font-serif);font-size:26px;margin:0 0 -8px}
.save-date{text-align:center;margin:8px 0 6px}
.save-date .label{font-family:var(--font-serif);font-size:28px;letter-spacing:.08em;text-transform:uppercase}
.save-date .bigdate{font-family:var(--font-serif);font-size:40px;letter-spacing:.18em;margin-top:6px}
.three-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.ph{aspect-ratio: 1/1;background:#ddd;border-radius:8px;background-size:cover;background-position:center}
.ph1{background-image:url(assets/img/mini1.jpg)}
.ph2{background-image:url(assets/img/mini2.jpg)}
.ph3{background-image:url(assets/img/mini3.jpg)}

/* GRID 2 */
.two-col{margin:var(--section-gap) 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--section-gap)}
.two-col .col{padding:24px;border-radius:10px}
.palette{display:flex;gap:12px;margin:14px 0 18px}
.palette span{width:44px;height:28px;border-radius:6px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.outfits{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.outfits .tile{background:#d6d2ce;height:96px;border-radius:8px;background-size:cover;background-position:center}
#cl1{background-image:url(assets/img/cl1.jpg)}
#cl2{background-image:url(assets/img/cl2.jpg)}
#cl3{background-image:url(assets/img/cl3.jpg)}
#cl4{background-image:url(assets/img/cl4.jpg)}
#cl5{background-image:url(assets/img/cl5.jpg)}
#cl6{background-image:url(assets/img/cl6.jpg)}
#cl7{background-image:url(assets/img/cl7.jpg)}
#cl8{background-image:url(assets/img/cl8.jpg)}
.hands-photo{background:#111 url(assets/img/hands.jpg) center/cover no-repeat;min-height:360px}

/* WISHES */
.wish-list{padding-left:18px;margin:0}
.wish-list li{margin:0 0 10px}

/* TIMING */
.timing{padding:var(--section-gap);margin:var(--section-gap) 0}
.timing .time-item{padding:16px 0;border-top:1px solid #ede7e2}
.timing .time-item:first-of-type{border-top:none}
.time{font-family:var(--font-serif);font-size:26px}
.desc{color:var(--muted)}

/* separator used in locations */
.loc-sep{
  height:1px;border:0;margin:18px 0;
  background:linear-gradient(90deg,transparent, #e6ded6 20%, #e6ded6 80%, transparent);
}

/* RSVP — шире (до 900px) и ровно по сетке */
.rsvp{margin:var(--section-gap) 0}
.rsvp-card{margin:40px auto;padding:32px;display:flex;flex-direction:column;gap:16px}
form{display:grid;gap:14px}
label{display:grid;gap:8px;font-size:var(--fs-base)}
input[type="text"], select{
  padding:14px 12px;border:1px solid #ded7d0;border-radius:8px;outline:none;font:inherit;background:#fff;font-size:var(--fs-base)
}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M5 7l5 6 5-6' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:18px}
.radios{display:grid;gap:8px;margin:6px 0 10px;border:none;padding:0}
.radio{display:flex;gap:10px;align-items:center}
.btn{appearance:none;border:none;background:#8e7d73;color:#fff;padding:14px 18px;border-radius:8px;font-weight:500;cursor:pointer;width:100%;font-size:var(--fs-base)}
.status{margin-top:8px;font-size:var(--fs-hint);color:#2b2b2b}
.organizer-note{margin-top:10px;color:#555;font-size:var(--fs-hint)}

/* FOOTER */
.foot{margin:var(--section-gap) 0}

/* Normalize section gaps on small screens so spacing looks consistent */
@media (max-width: 600px){
  :root{--section-gap:18px}
}
.foot-photo {text-align: center; margin-top: 50px;}
.foot-photo img{width:30%;height:30%;object-fit:cover;filter:grayscale(.2) contrast(1.05);}
.foot .vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(0,0,0,.4) 100%)}

/* ==== ОГЛАВЛЕНИЕ (TOC) ==== */
.toc {
  position: fixed;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255,253,250,0.9);
  backdrop-filter: blur(10px);
  padding: 16px 22px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  letter-spacing: .05em;
  text-transform: uppercase;
  z-index: 80;
}

/* TOC links as pill/button-style controls */
.toc a{
  display:block;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  color:var(--accent);
  background:transparent;
  font-weight:var(--fw-medium);
  border:1px solid transparent;
  box-shadow:none;
  transition: all .18s ease;
  text-align:center;
  user-select:none;
}
.toc a:hover, .toc a:focus{
  background: rgba(142,125,115,0.08);
  border-color: rgba(142,125,115,0.12);
  transform: translateY(-2px);
}
.toc a:focus{ outline: 3px solid rgba(142,125,115,0.16); outline-offset:3px }
.toc a.active{
  background: var(--accent);
  color: #fff;
  border-color: rgba(0,0,0,0.04);
  box-shadow: 0 10px 30px rgba(142,125,115,0.12);
}

.loc-card{
  padding:24px;
  background:var(--paper);
  border-radius:14px;
  box-shadow:var(--card-shadow);
  border-left:6px solid var(--accent);
  color:var(--ink);
}
.loc-card .section-title{margin-bottom:18px}
.loc-one .place{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding:12px 0;
}
.loc-title{
  font-family:var(--font-serif);
  font-size:28px;
  letter-spacing:.06em;
  margin:0 0 6px;
  color:var(--ink);
  display:block; /* ensure on its own line */
}
.loc-address{margin:2px 0 8px;color:var(--muted);font-size:var(--fs-hint);display:block}
.map-wrap{margin-top:8px;border-radius:10px;overflow:hidden;background:#eee;box-sizing:border-box;width:100%}

/* iframe inside map should fill the wrap and respect padding */
.map-wrap iframe{width:100%;height:320px;border:0;display:block}

/* On wider screens, show place text and map side-by-side (map column flexible) */
/* Keep place stacked: title, address, map full-width for each block */
@media (min-width:900px){
  .loc-one .place{grid-template-columns:1fr;gap:8px}
  .map-wrap iframe{height:420px}
}

@media (max-width:540px){
  .map-wrap iframe{height:260px}
}

@media (max-width: 1650px) {
  .toc {
    right: 16px;
    font-size: 16px;
    padding: 12px 16px;
    gap: 8px;
  }
}

/* OVERLAY */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#f6f1eb;z-index:99999;opacity:1;transition:opacity 1.5s ease}
.overlay.fadeout{opacity:0;pointer-events:none}
.overlay-card{width:min(560px,92vw);aspect-ratio: 1/1;background:#fffdfa;border-radius:20px;padding:36px 24px 28px;text-align:center;align-items: center; box-shadow:0 18px 60px rgba(0,0,0,.18)}
.ov-title{font-family:var(--font-serif);font-size:48px;margin:6px 0 8px;color:#8e7d73}
.ov-text{font-family:var(--font-serif);font-size:30px;margin:0 0 8px;color:#8e7d73}
.ov-date{font-family:var(--font-serif);font-size:36px;letter-spacing:.12em;margin-bottom:14px;color:#8e7d73}
.ov-bow{max-width:380px;width:82%;margin:8px auto 16px;display:block}
  
  /* Very short viewports: remove large decorative images and shrink the card
     Keep the slider visible and usable at all times */
  @media (max-height: 400px) {
    /* hide bow/image elements inside overlay if present */
    .overlay-card img, .overlay-card .ov-bow { display: none !important; }

    /* reduce card padding and rounding to save vertical space */
    .overlay-card{
      padding:12px 12px !important;
      border-radius:10px !important;
      max-height: calc(100vh - 16px) !important;
      overflow: visible !important; /* we avoid internal scroll — we scale or compact content */
    }

    /* scale down large headline/date/text for compactness */
    .ov-title{ font-size: clamp(20px, 4.5vw, 28px) !important; }
    .ov-text{ font-size: clamp(14px, 3.2vw, 18px) !important; }
    .ov-date{ font-size: clamp(12px, 3vw, 16px) !important; letter-spacing: .06em }

    /* ensure slider remains visible & on top and comfortably tappable */
    .overlay .slider{ z-index: 20; margin-top:8px }
    .slider-track{ height:44px !important }
    .slider-thumb{ width:40px !important; height:40px !important; z-index: 30 !important; }

    /* reduce other vertical gaps inside the card */
    .overlay-card .ov-bow, .overlay-card .ov-text, .overlay-card .ov-date { margin:6px 0 !important }
  }

/* SLIDER */
.slider{display:flex;justify-content:center;margin-top: auto}
.slider-track{
  position:relative;width:min(420px,86vw);height:52px;background:#fff;border:1px solid #d8cfc6;
  border-radius:28px;box-shadow:inset 0 2px 0 rgba(0,0,0,.03);overflow:hidden
}
.slider-track, .slider-thumb { touch-action: none; -webkit-user-select: none; user-select: none; }
.slider-text{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-size:var(--fs-hint);letter-spacing:.14em;color:var(--accent);text-transform:uppercase;pointer-events:none
}
.slider-thumb{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;border-radius:50%;
  background:#b8a99d;color:#fff;cursor:grab;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 6px rgba(0,0,0,.18);z-index:2;
  /* smooth snap animation when released; disabled while dragging by JS */
  transition: left 560ms cubic-bezier(.22,.9,.3,1);
}
.slider-thumb:active{cursor:grabbing}
.slider-progress{position:absolute;left:0;top:0;bottom:0;width:0;background:#efe7df;border-radius:28px;transition:width 560ms cubic-bezier(.22,.9,.3,1)}

/* Prevent page scroll while overlay is visible */
html.no-scroll, body.no-scroll { overflow: hidden; height: 100%; }

/* SPARKLES */
.spark{
  position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fff 0%,#e48c60f8 50%,#e48c60f8 70%);
  transform:translate(-50%,-50%);pointer-events:none;animation:spark 700ms ease-out forwards
}
@keyframes spark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-120%) scale(1.2)}
}

/* О НАС (ИИ) */
.about{margin:28px auto;padding:28px}
.about-note{margin:-4px 0 12px;color:#3a3a3a}
.ai-form{display:grid;gap:12px}
#aiQuestion{
  resize:vertical; min-height:96px; padding:14px 12px;
  border:1px solid #ded7d0; border-radius:8px; background:#fff; font:inherit;
}
.ai-answer{
  margin-top:12px; background:#fff; border:1px dashed #d9cfc6;
  border-radius:10px; padding:14px; min-height:60px; white-space:pre-wrap;
}

/* ADAPTIVE */
@media (max-width:980px){
  .two-col{grid-template-columns:1fr}
  .loc-grid{grid-template-columns:1fr}
  .section-title{font-size:34px}
  h1{font-size:40px}
  .timing{padding:22px}
}
@media (max-width:1680px){
  .toc{display:none}
}
@media (max-width:600px){
  .section-title{font-size:30px}
  h1{font-size:34px}
}

/* Многократные поля имени */
.name-block{display:grid;gap:8px}
.name-row{display:flex;gap:8px;align-items:center;margin-bottom:4px;}
.name-row input{flex:1}

/* Круглая кнопка "+" рядом с первым полем */
.btn-circle{
  width:40px;height:40px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;background:#411b31;color:#fff;font-size:22px;line-height:1;
  cursor:pointer;box-shadow:0 3px 6px rgba(0,0,0,.18)
}
.btn-circle:active{transform:translateY(1px)}

/* Напитки — чекбоксы */
.drinks{
  display:grid;
  gap:6px;
  margin:6px 0 10px;
  border:none;
  padding:0;
}
.drinks label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  cursor:pointer;
}
.drinks input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:#111;
  cursor:pointer;
}

/* === СТИЛЬНАЯ АНКЕТА RSVP === */
.rsvp-card {
  background: var(--paper);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  padding: 48px 40px;
  margin: 60px auto;
  position: relative;
  overflow: hidden;
}

.rsvp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(233,225,215,0.35), transparent 60%);
  pointer-events: none;
}

.rsvp-card .section-title {
  font-size: 42px;
  text-align: center;
  margin-bottom: 12px;
  color: var(--ink);
  letter-spacing: .08em;
}

.rsvp-card p {
  text-align: center;
  color: #5e564f;
  font-size: 16px;
  margin-bottom: 32px;
}

/* Поля ввода */
#rsvpForm label,
.name-block > label {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: 18px;
  color: var(--ink);
  letter-spacing: .02em;
}

#rsvpForm input[type="text"],
#rsvpForm textarea,
#rsvpForm select {
  border: 1px solid #e0d7ce;
  background: #fffdfa;
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  transition: all .2s ease;
}

#rsvpForm input:focus,
#rsvpForm select:focus,
#rsvpForm textarea:focus {
  outline: none;
  border-color: #b8a99d;
  box-shadow: 0 0 0 3px rgba(184,169,157,.15);
}

/* Кнопка отправки */
.btn {
  background: linear-gradient(180deg, #b9a79b 0%, #8e7d73 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 16px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transition: all .3s ease;
}

.btn:hover {
  background: linear-gradient(180deg, #a9988c 0%, #7a6c63 100%);
  transform: translateY(-2px);
}

/* Радио */
.radios legend {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 10px;
}

.radio {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  color: #3a3a3a;
  line-height: 1.6;
}

.radio input[type="radio"] {
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  appearance: none;
  border: 1.5px solid #b8a99d;
  border-radius: 50%;
  background: #fff;
  transition: all .2s ease;
}

.radio input[type="radio"]:checked {
  border-color: #8e7d73;
  background: radial-gradient(circle, #8e7d73 45%, transparent 47%);
}

/* Чекбоксы напитков */
.drinks legend {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 8px;
}

.drinks label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #3a3a3a;
}

.drinks input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #8e7d73;
  cursor: pointer;
  border-radius: 4px;
}

/* Кнопка "+" для добавления имени */
.btn-circle {
  background: #b8a99d;
  color: #fff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.btn-circle:hover {
  background: #8e7d73;
  transform: rotate(90deg);
}

/* Status block — use hint size */
#formStatus {
  text-align: center;
  margin-top: 12px;
  color: #6c625a;
  font-size: var(--fs-hint);
  font-style: italic;
}

/* Contacts */
.organizer-note {
  margin-top: 24px;
  text-align: center;
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: var(--fs-hint);
}
.organizer-note a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted rgba(142,125,115,.4);
}
.organizer-note a:hover {
  border-color: rgba(142,125,115,1);
}

/* ===== Unified typographic tweaks (adapted to --fs-base) ===== */
:root{
  --fs-h1: clamp(42px, 5.2vw, 64px);
  --fs-h2: clamp(26px, 3.2vw, 40px);
  --fs-h3: clamp(18px, 2.2vw, 28px);
}

body{ font-size: var(--fs-base); line-height: 1.6; }
h1{ font-size: var(--fs-h1); }
.section-title{ font-size: var(--fs-h2); }
.loc-title, .time{ font-size: var(--fs-h3); font-family: var(--font-serif); }

/* hero tweaks kept */
.hero-caption h1{
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
  letter-spacing: .14em;
}
.hero-date h3{
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  letter-spacing: .18em;
  margin: 0;
}

/* intro lead */
.intro{ padding: 34px 28px; }
.intro .lede{
  margin: 0 auto 18px;
  max-width: 980px;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.35;
  letter-spacing: .04em;
  color: var(--ink);
  position: relative;
}
.intro .lede span{
  white-space: nowrap;
  color: var(--accent);
  font-weight: 600;
}
.intro .lede::after{
  content:"";
  display:block;
  width: 120px;
  height: 2px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, #d6cbc1 12%, var(--accent) 50%, #d6cbc1 88%, transparent);
  border-radius: 2px;
}

/* save-date */
.save-date{ text-align: center; margin-top: 10px; }
.save-date .label{ font-size: clamp(18px, 2.2vw, 26px); }
.save-date .bigdate{ font-size: clamp(22px, 3vw, 36px); }

.section-title{ margin: 0 0 18px; letter-spacing: .08em; }
.toc{ font-size: clamp(16px, 1.6vw, 20px); }
.wish-list li{ line-height: 1.55; }
.loc-address{ font-size: var(--fs-base); color: var(--muted); }