@font-face{
  font-family:"English Script";
  src:url("fonts/english-script.ttf") format("truetype");
  font-display:swap;
  font-weight:400;
  font-style:normal;
}

:root{
  /* whites & creams */
  --ivory:        #fdfbf6;
  --ivory-soft:   #f7f2e7;
  --cream:        #f1ead9;
  --cream-light:  #faf4e6;
  --cream-dark:   #e3d6b9;
  --paper-edge:   #c4b393;

  /* "dark" sections now near-white */
  --tint:         #f5efe2;
  --tint-deep:    #ebe1c8;

  /* ink */
  --ink:          #4a4232;
  --ink-soft:     #6e6450;
  --muted:        #9b8e75;

  /* accents */
  --gold:         #b89968;
  --gold-light:   #d6b878;
  --gold-deep:    #8a7038;
  --champagne:    #c9b88a;

  --pearl:        #fbf6ea;
  --light:        #5a4e3b;

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --script: "English Script", "Bad Script", "Marck Script", "Lucida Handwriting", cursive;
  --sans:   "Tenor Sans", -apple-system, Segoe UI, Roboto, sans-serif;
  --cap:    "Cormorant Garamond", Georgia, serif;

  --max: 720px;
  --pad: clamp(20px, 6vw, 56px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}

/* disable selection / copy on site content; keep form inputs selectable */
body{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
input, textarea, [contenteditable=true]{
  -webkit-user-select:text;
  -moz-user-select:text;
  user-select:text;
}
img{
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  user-drag:none;
}
html{
  scroll-behavior:smooth;
  /* тёмный сепия-фон: если из-за округления субпикселя где-то и появится
     微-шов, он покажет тёмное (под цвет картины), а не светлое */
  background:#4a4030;
  scrollbar-gutter:stable both-edges;
}

/* fonfon split into two side panels — body covers the centre,
   never lets fonfon's central "lake" peek out around the column.
   Панели заходят на ~40px ПОД колонку-body (она непрозрачная, лежит выше),
   поэтому между фоном и колонкой не остаётся белого шва из-за округления
   субпикселей и резерва под скроллбар. */
body::before, body::after{
  content:"";
  position:fixed;
  top:0;bottom:0;
  width:max(0px, calc((100vw - 460px) / 2));
  background-image:url('fonfon.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  pointer-events:none;
  z-index:-1;
}
/* Половинки картины в естественном порядке: левая часть сцены — слева,
   правая — справа (сцена «продолжается» за колонкой). */
body::before{
  left:0;
  background-position:left center;
}
body::after{
  right:0;
  background-position:right center;
}
body{
  margin:0 auto;
  max-width:540px;
  font-family:var(--serif);
  font-weight:400;
  color:var(--ink);
  background:var(--ivory);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* внешнее свечение + тёмная сепия-кромка по бокам: затемняет крайний
     пиксель колонки, чтобы при дробном device-pixel (масштаб 125%) сглаживание
     не давало светлой полоски на стыке с картиной по бокам */
  box-shadow:
    0 0 80px rgba(80,60,30,.18),
    inset 1px 0 0 rgba(48,38,22,.9),
    inset -1px 0 0 rgba(48,38,22,.9);
  position:relative;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

h1,h2{font-weight:400;margin:0;line-height:1.05}
p{margin:0 0 1em}

/* ===== type ===== */
.script{
  font-family:var(--script);font-weight:400;color:var(--gold);
  font-size:clamp(44px,11vw,76px);line-height:1;
  letter-spacing:.005em;
}
.script--lg{font-size:clamp(60px,15vw,104px)}

.serif-cap{
  font-family:var(--cap);font-weight:400;
  font-size:clamp(22px,5.4vw,30px);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink);
}

.smallcaps{
  font-family:var(--cap);
  font-weight:500; /* основной текст — на ~1,2 жирнее (заголовки и цитата не трогаются) */
  font-size:clamp(13px,3.5vw,16px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  line-height:1.95;
  margin:0;
}
.smallcaps.tiny{font-size:11px;letter-spacing:.26em;color:var(--muted)}
.smallcaps.light{color:var(--ink);text-shadow:0 1px 6px rgba(255,250,240,.8)}

.bigdate{
  font-family:var(--cap);font-weight:500;
  font-size:clamp(22px,5.6vw,30px);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);
  margin:18px 0 0;
}

.rule{
  width:54px;height:1px;background:var(--ink-soft);opacity:.4;
  margin:22px auto;
}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ===== nav ===== */
.topnav{
  position:fixed;
  top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:540px;
  z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--pad);
  background:transparent;
  transition:background .4s ease, box-shadow .4s ease;
}
.topnav.is-stuck{
  background:rgba(250,246,237,.92);
  backdrop-filter:saturate(150%) blur(10px);
  box-shadow:0 1px 0 rgba(120,90,40,.08);
}
.topnav .brand{
  font-family:var(--cap);letter-spacing:.36em;font-size:14px;
  color:var(--pearl);text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.topnav.is-stuck .brand{color:var(--ink);text-shadow:none}

/* burger always visible — site uses mobile-style nav at all widths */
.burger{
  display:flex;width:36px;height:36px;
  flex-direction:column;justify-content:center;gap:5px;align-items:center;
  padding:0;
}
.burger span{display:block;width:22px;height:1.5px;background:var(--pearl);transition:transform .3s ease,opacity .3s ease}
.topnav.is-stuck .burger span{background:var(--ink)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* nav list always behaves as a dropdown */
.topnav ul{
  list-style:none;padding:0;margin:0;
  position:absolute;top:100%;right:0;left:0;
  display:flex;flex-direction:column;gap:0;
  background:rgba(250,246,237,.96);
  backdrop-filter:saturate(150%) blur(10px);
  padding:8px 0;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.topnav ul.is-open{transform:none;opacity:1;pointer-events:auto}
.topnav ul li{border-top:1px solid rgba(120,90,40,.1)}
.topnav ul a{
  display:block;padding:14px var(--pad);text-align:center;
  font-family:var(--sans);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-soft);text-shadow:none;
}
.topnav ul a:hover{color:var(--gold-deep)}

/* ===== light ivory sections base ===== */
.dark-bg{
  background:
    radial-gradient(ellipse at 50% 35%, var(--ivory) 0%, var(--tint) 60%, var(--tint-deep) 100%);
  color:var(--ink);
  position:relative;
}

/* ===== pearls ===== */
.pearl{
  position:absolute;pointer-events:none;display:block;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, #ece4d0 50%, #b8a679 100%);
  box-shadow:0 0 12px rgba(255,245,210,.55), 0 2px 4px rgba(120,90,40,.18);
  opacity:.9;
}
.pearl--a{top:10%;left:8%;width:10px;height:10px;animation:floatA 9s var(--ease) infinite}
.pearl--b{top:62%;right:10%;width:16px;height:16px;animation:floatB 11s var(--ease) infinite}
.pearl--c{bottom:14%;left:18%;width:8px;height:8px;animation:floatA 7s var(--ease) infinite}
.pearl--d{top:30%;right:30%;width:6px;height:6px;animation:floatB 10s var(--ease) infinite}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(16px)}}

/* ============ 1 · HERO (full-bleed photo + lace chrome) ============ */
.hero{
  position:relative;
  aspect-ratio:2/3;
  min-height:auto;
  max-height:100svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.hero__photo{
  position:absolute;inset:0;z-index:0;
  background-size:cover;
  background-position:center 55%;
}
.hero__veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(245,235,215,.35) 0%, rgba(245,235,215,.15) 35%, rgba(40,30,20,.35) 100%),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%);
}


/* hero content */
.hero__content{
  position:relative;z-index:3;
  padding:0 clamp(24px,7vw,48px);
  color:var(--pearl);
  max-width:880px;
  display:flex;flex-direction:column;align-items:center;
}
.hero__names{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-weight:400;
  text-shadow:0 2px 22px rgba(0,0,0,.9), 0 0 36px rgba(0,0,0,.55);
  margin:0;
}
.hero__names .script{
  color:var(--pearl);
  font-size:clamp(64px,16vw,124px);
  line-height:1;
}
.hero__names .amp{
  font-family:var(--script);
  font-size:clamp(44px,11vw,72px);
  color:var(--gold-light);
  line-height:1;
  margin:-4px 0;
}
.hero__date{
  margin:40px 0 0;
  font-family:var(--cap);
  font-size:clamp(14px,3.6vw,18px);
  letter-spacing:.5em;text-transform:uppercase;
  color:var(--pearl);opacity:.95;
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}

/* ============ paper (textured paper with corner reliefs) ============ */
.paper{
  position:relative;
  background:
    url('paper-bg.jpg') center top / 100% 100% no-repeat,
    #f8f4ea;
  padding:clamp(60px,13vw,110px) clamp(48px,13vw,90px);
  overflow:hidden;
}
.paper__inner{
  position:relative;z-index:2;
  max-width:var(--max);margin:0 auto;text-align:center;
}
.paper__orn{display:none}

/* shrink type inside paper sections — they were oversized */
.paper .script{
  font-size:clamp(36px,9vw,58px);
  line-height:1.15;
  margin:0 0 clamp(20px,4vw,32px);
}
.paper .script--lg{
  font-size:clamp(46px,11vw,76px);
  line-height:1.15;
  margin:0 0 clamp(24px,5vw,38px);
}
.paper .smallcaps{font-size:clamp(11px,3vw,14px);letter-spacing:.2em;line-height:1.85}
.paper .bigdate{font-size:clamp(18px,4.6vw,24px);letter-spacing:.2em}
.paper .serif-cap{font-size:clamp(20px,5vw,26px);letter-spacing:.3em;margin:0 0 clamp(18px,4vw,28px)}

/* paper-group: 2+ paper sections share one continuous fonshir background */
.paper-group{
  position:relative;
  background:url('fonshir.jpg') center top / 100% 100% no-repeat, #f8f4ea;
  overflow:hidden;
}
.paper--bare{
  background:transparent;
  padding:clamp(90px,18vw,140px) clamp(54px,14vw,100px);
}
/* inside paper-group — collapse vertical gap between consecutive sections */
.paper-group > .paper--bare:not(:last-child){padding-bottom:clamp(20px,4vw,36px)}
.paper-group > .paper--bare + .paper--bare{padding-top:clamp(20px,4vw,36px)}
/* tighten the gap where two paper--bare sections are stacked inside paper-group */
.paper-group > .paper--bare:not(:last-child){padding-bottom:clamp(16px,3vw,30px)}
.paper-group > .paper--bare:not(:first-child){padding-top:clamp(16px,3vw,30px)}
.paper--bare::before,
.paper--bare::after{content:none}

@media (max-width:380px){
  .paper{padding:54px 38px}
  .paper--bare{padding:84px 44px}
}

/* ============ 3 · ivory photo section ============ */
.dark-section{
  position:relative;
  padding:clamp(90px,18vw,170px) clamp(24px,6vw,56px);
  text-align:center;
  overflow:hidden;
  background:var(--ivory);
}
.dark-section__photo{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:contrast(.9) brightness(1.15) saturate(.9);
}
.dark-section__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(250,246,237,.55) 0%, rgba(250,246,237,.45) 50%, rgba(250,246,237,.7) 100%);
}
.dark-section__inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;color:#241d12}
.dark-section .serif-cap{color:#241d12;margin-bottom:18px;text-shadow:0 1px 6px rgba(255,250,240,.55)}
.dark-section__sub{
  font-family:var(--cap);
  font-weight:500;
  font-size:clamp(13px,3.6vw,16px);
  letter-spacing:.22em;text-transform:uppercase;
  color:#2e2618;
  margin:0 auto 38px;max-width:480px;line-height:1.95;
  text-shadow:0 1px 6px rgba(255,250,240,.55);
}

/* ============ cartouche button (plaque PNG background) ============ */
.cartouche{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:clamp(240px,68vw,320px);
  aspect-ratio:1024/768;
  max-height:110px;
  padding:0 clamp(64px,18vw,90px);
  font-family:var(--cap);font-size:clamp(12px,3.4vw,16px);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink);
  background:url('cartouche.png') center / contain no-repeat;
  transition:transform .4s var(--ease), filter .4s ease;
  filter:drop-shadow(0 4px 10px rgba(80,60,30,.18));
  white-space:nowrap;
}
.cartouche:hover{transform:translateY(-2px);filter:drop-shadow(0 8px 16px rgba(80,60,30,.28))}
/* hide old inline SVG cartouche shape — kept in markup for backward-compat */
.cartouche__bg{display:none}
.cartouche__txt{position:relative;z-index:2;line-height:1;display:inline-block}

.cartouche--submit{margin-top:18px}

/* ============ 4 · timing list ============ */
.timing-list{
  list-style:none;padding:0;margin:36px auto 0;
  max-width:380px;display:flex;flex-direction:column;gap:22px;
}
.timing-list li{
  display:grid;grid-template-columns:58px 64px 1fr;
  align-items:center;gap:12px;text-align:left;
}
.timing-list__icon{
  width:54px;height:54px;color:var(--ink);justify-self:center;
  object-fit:contain;
}
.timing-list b{
  font-family:var(--cap);font-weight:400;font-size:clamp(18px,4.8vw,24px);
  letter-spacing:.14em;color:var(--ink);
}
.timing-list .smallcaps{text-align:left;margin:0;font-size:clamp(11px,3.1vw,14px)}

/* ============ 5 · dress + details (single composite card) ============ */
.dress{
  position:relative;
  padding:clamp(60px,10vw,100px) clamp(24px,6vw,56px);
  overflow:hidden;
  isolation:isolate;
  background:var(--ivory-soft);
}
.dress__photo{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center 40%;
  filter:contrast(.92) brightness(1.08) saturate(.9);
}
.dress__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(250,246,237,.78) 0%,
    rgba(250,246,237,.72) 50%,
    rgba(250,246,237,.82) 100%);
}
.dress__inner{
  position:relative;z-index:2;
  max-width:540px;margin:0 auto;
}
.dress__block .script{color:var(--gold);margin:0 0 4px}
.dress__block .smallcaps{margin:0;line-height:1.95;color:#241d12;text-shadow:0 1px 4px rgba(255,250,240,.4)}

/* TOP — 2-column: salfetka+title on LEFT | text+palette on RIGHT (always side-by-side) */
.dress__block--code{
  display:grid;
  grid-template-columns:1.2fr 1.3fr;
  column-gap:clamp(12px,3.5vw,28px);
  row-gap:clamp(18px,4vw,28px);
  align-items:center;
}
.dress__code-left{
  position:relative;
  aspect-ratio:1;
  width:100%;
  justify-self:start;
  display:flex;align-items:center;justify-content:center;
  background:url('salfetka.png') center / 100% 100% no-repeat;
  padding:clamp(18px,6.5vw,34px);
}
.dress__code-left .script{
  margin:0;color:var(--gold-deep);
  font-size:clamp(44px,11vw,76px);
  text-align:left;
  line-height:.95;
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.65));
}
.dress__code-left .dress__code-kod{
  display:inline-block;padding-left:.6em;
}
.dress__code-right{
  display:flex;flex-direction:column;align-items:center;gap:clamp(12px,3vw,22px);
  text-align:center;
}
.dress__code-right .smallcaps{
  font-size:clamp(12px,3.2vw,14px);
  letter-spacing:.16em;
  line-height:1.7;
  max-width:none;margin:0;width:100%;
}
.dress__code-right .palette{
  justify-content:center;flex-wrap:wrap;gap:clamp(6px,1.6vw,10px);
}
.dress__code-right .palette img,
.dress__code-right .palette span{
  width:clamp(26px,7.2vw,42px);height:clamp(26px,7.2vw,42px);
}
/* full-width rows below the 2-column grid */
.dress__code-full{grid-column:1 / -1;justify-self:center}

/* BOTTOM — centered single column */
.dress__block--details{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;
}
.dress__block--details .smallcaps{max-width:380px}

.dress__divider{
  width:120px;height:1px;background:var(--gold);opacity:.35;
  margin:clamp(36px,7vw,60px) auto;
}
.dress__ps{
  font-style:italic;letter-spacing:.14em;
  font-size:clamp(12px,3.2vw,14px);
  color:#2a221a;
  max-width:380px;margin:4px 0 0;text-align:center;
  text-shadow:0 1px 4px rgba(255,250,240,.4);
}
.dress__gift{margin:6px 0 0;max-width:380px}

/* keep 2-column even on phones (no collapse) — tighter spacing */
@media (max-width:440px){
  .dress__block--code{column-gap:10px}
  .dress__code-left{padding:20px}
  .dress__code-left .script{font-size:46px}
}

/* QR with decorative heart above — toggle via button */
.heart-qr[hidden]{display:none}
.heart-qr{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:8px 0 6px;
  animation:fadeIn .55s var(--ease);
}
.heart-qr__icon{
  width:38px;height:38px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
.heart-qr__code{
  width:clamp(150px,38vw,200px);height:auto;
  display:block;background:#fff;
  padding:8px;
  border:1px solid rgba(125,104,69,.4);
  box-shadow:0 8px 22px -10px rgba(80,60,30,.35);
  border-radius:4px;
}

.palette{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.palette img,
.palette span{
  width:36px;height:36px;border-radius:50%;display:block;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(184,153,104,.35), 0 3px 8px -3px rgba(80,60,30,.3);
}

/* dress code examples (two reference boards) — collapsed by default */
.dress__examples[hidden]{display:none}
.dress__examples{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  width:100%;max-width:420px;margin-top:14px;
  animation:fadeIn .55s var(--ease);
}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dress__examples figure{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.dress__examples img{
  width:100%;aspect-ratio:9/16;object-fit:cover;
  background:var(--ivory-soft);
  border:1px solid rgba(184,153,104,.35);
  box-shadow:0 8px 22px -14px rgba(80,60,30,.35), 0 2px 6px -2px rgba(80,60,30,.18);
  border-radius:2px;
  transition:transform .5s var(--ease), box-shadow .5s ease;
}
.dress__examples img:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -16px rgba(80,60,30,.45), 0 4px 10px -3px rgba(80,60,30,.2);
}
.dress__examples figcaption{
  font-size:10px;letter-spacing:.3em;color:var(--ink-soft);
}
@media (max-width:380px){
  .dress__examples{gap:10px}
}

@media (max-width:520px){
  .dress__envelope{width:96px}
  .dress__divider{margin:32px auto}
}

/* ============ 6 · RSVP form ============ */
.rsvp-form{
  display:flex;flex-direction:column;gap:22px;
  margin:30px auto 0;max-width:440px;text-align:left;
}
.rsvp-form[hidden]{display:none}
.rsvp-form label > .smallcaps{display:block;margin-bottom:8px;text-align:left}
.rsvp-form input[type=text],
.rsvp-form textarea{
  width:100%;font:500 17px/1.5 var(--serif);color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid rgba(120,100,60,.45);
  padding:8px 0;outline:none;
  transition:border-color .3s ease;
}
.rsvp-form input[type=text]:focus,
.rsvp-form textarea:focus{border-bottom-color:var(--gold-deep)}
.rsvp-form textarea{resize:vertical;min-height:80px}
.rsvp-form fieldset{border:none;padding:0;margin:0}
.rsvp-form fieldset .smallcaps{display:block;margin-bottom:10px}

/* options laid out as a vertical list per fieldset */
.rsvp-form fieldset{display:flex;flex-direction:column;gap:8px}

.radio{
  display:flex;align-items:center;gap:12px;
  padding:6px 0;margin:0;
  font-family:var(--serif);font-size:16px;font-weight:500;color:var(--ink);
  cursor:pointer;user-select:none;
  background:none;border:none;
}
.radio input{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:20px;height:20px;
  margin:0;flex-shrink:0;
  border:1.4px solid var(--ink-soft);
  background:transparent;
  cursor:pointer;
  position:relative;
  transition:border-color .25s ease, background-color .25s ease;
}
.radio input[type=radio]{border-radius:50%}
.radio input[type=checkbox]{border-radius:3px}

.radio input:hover{border-color:var(--gold-deep)}

/* selected — radio: filled dot */
.radio input[type=radio]:checked{border-color:var(--ink)}
.radio input[type=radio]:checked::after{
  content:"";
  position:absolute;inset:3px;
  border-radius:50%;
  background:var(--ink);
}
/* selected — checkbox: ✓ */
.radio input[type=checkbox]:checked{border-color:var(--ink);background:var(--ink)}
.radio input[type=checkbox]:checked::after{
  content:"";
  position:absolute;
  left:5px;top:1px;
  width:7px;height:12px;
  border:solid #fffdf6;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.radio input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.cartouche--btn{margin-top:18px}

.rsvp-form__status{
  font-family:var(--serif);font-weight:500;font-size:16px;margin:6px 0 0;text-align:center;min-height:1.4em;
}
.rsvp-form__status.is-ok{color:#5a6d3a}
.rsvp-form__status.is-err{color:#9a4a3a}

/* organizer block */
.organizer .paper__inner{max-width:520px}
.organizer .script{margin-bottom:14px}
.organizer__phone{
  display:inline-block;margin-top:22px;
  font-family:var(--cap);font-size:clamp(20px,4.6vw,26px);
  letter-spacing:.18em;color:var(--gold-deep);
  border-bottom:1px solid currentColor;padding-bottom:4px;
  transition:color .3s ease, border-color .3s ease;
}
.organizer__phone:hover{color:var(--gold);border-color:var(--gold)}

/* ============ 7 · closing (composite collage) ============ */
.closing{
  position:relative;
  padding:clamp(40px,10vw,80px) clamp(16px,5vw,40px);
  overflow:hidden;
}
.closing__photo{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center 30%;
  filter:contrast(.88) brightness(.95) saturate(.85);
}
.closing__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(250,247,236,.45), rgba(245,238,220,.6));
}

.closing__inner{
  position:relative;z-index:2;
  width:100%;max-width:480px;margin:0 auto;
  min-height:clamp(520px,110vw,720px);
}

.closing__envelope{display:none}

/* baroque monogram — TOP-RIGHT corner of the section (sibling of .closing__inner) */
.closing__mono{
  position:absolute;
  top:0;right:0;
  width:43%;max-width:288px;height:auto;
  z-index:3;
  filter:drop-shadow(0 14px 28px rgba(80,60,30,.4));
}

/* quote + author — BOTTOM-LEFT */
.closing__text{
  position:absolute;
  left:6%;bottom:7%;
  text-align:left;
  z-index:3;
  max-width:78%;
}
.closing__quote{
  font-family:var(--script);
  font-size:clamp(26px,7vw,40px);
  color:#1a1208;
  line-height:1.2;
  margin:0 0 18px;
  text-shadow:0 1px 4px rgba(255,250,240,.55);
}
.closing__quote .closing__mark{
  font-family:var(--serif);
  font-size:1.1em;
  font-weight:500;
  vertical-align:-.05em;
  padding:0 .02em;
}
.closing__quote .closing__dash{
  font-family:var(--serif);
  font-size:.7em;
  font-weight:400;
  vertical-align:.15em;
  letter-spacing:0;
}
.closing__author{
  font-family:var(--cap);
  font-size:clamp(13px,3.2vw,16px);
  letter-spacing:.32em;text-transform:uppercase;
  font-weight:500;
  color:#0e0a04;
  margin:0;
  text-shadow:
    0 1px 4px rgba(255,250,240,.7),
    0 0 12px rgba(255,250,240,.5);
}

@media (min-width:540px){
  .closing__inner{max-width:540px}
}

/* ============ misc ============ */
::selection{background:var(--gold);color:var(--cream-light)}

/* ============ music toggle button (fixed bottom-right) ============ */
.music-toggle{
  position:fixed;
  /* пришпиливаем к правому краю колонки-body (max-width 540px, центрирована) */
  right:calc(max(0px, (100vw - 540px) / 2) + clamp(14px,4vw,28px));
  bottom:clamp(14px,4vw,28px);
  z-index:70;
  width:48px;height:48px;
  border-radius:50%;
  background:rgba(255,250,240,.92);
  border:1px solid rgba(184,153,104,.5);
  box-shadow:0 4px 14px -4px rgba(80,60,30,.35), 0 0 0 1px rgba(255,255,255,.4) inset;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-deep);
  cursor:pointer;
  padding:0;
  transition:transform .25s ease, background .25s ease, color .25s ease;
  backdrop-filter:saturate(140%) blur(6px);
}
.music-toggle:hover{transform:scale(1.06);color:var(--gold)}
.music-toggle svg{width:24px;height:24px}
.music-toggle .mt-on{display:none}
.music-toggle .mt-off{display:block}
.music-toggle.is-playing .mt-on{display:block;animation:musicBob 1.6s ease-in-out infinite}
.music-toggle.is-playing .mt-off{display:none}
.music-toggle.is-playing{background:rgba(184,153,104,.18)}
@keyframes musicBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1.5px)}
}
/* pulse when autoplay is blocked and we want guest to tap */
.music-toggle.needs-tap{
  animation:musicPulse 1.8s ease-in-out infinite;
}
@keyframes musicPulse{
  0%,100%{
    box-shadow:
      0 4px 14px -4px rgba(80,60,30,.35),
      0 0 0 1px rgba(255,255,255,.4) inset,
      0 0 0 0 rgba(184,153,104,.6);
  }
  50%{
    box-shadow:
      0 4px 14px -4px rgba(80,60,30,.35),
      0 0 0 1px rgba(255,255,255,.4) inset,
      0 0 0 14px rgba(184,153,104,0);
  }
}