/* Invitation-inspired watercolor: a framed cover, generous unadorned content. */
:root {
  --paper: #faf7ef; --paper-soft: #fffdf8;
  --gold: #526c5b; --gold-soft: #b5c7b8; --gold-line: #cad5cb;
  --dark: #344a40; --dark-2: #293e34; --line: #e6ddd1;
}
.cover .cover-damask { display: block; position: absolute; z-index: 0; opacity: .065; filter: grayscale(1) sepia(.6) hue-rotate(65deg) saturate(.6); mix-blend-mode: multiply; }
.hero-mark, .fund-mark, .footer-mark { filter: none; }
.cover .hero-mark { width: 72px; margin-bottom: 26px; }
.cover { padding: 150px 24px; }
.cover-inner { max-width: 850px; }
.garden-section { position: relative; isolation: isolate; overflow: hidden; }
.garden-section > :not(.garden-art):not(.garden-butterfly):not(.cover-damask):not(.cover-hint):not(.sil):not(.sil-svg):not(.emboss) { position: relative; z-index: 1; }
.garden-section > .cover-hint { position: absolute; }
@property --paint-edge { syntax: '<percentage>'; initial-value: 145%; inherits: false; }
.garden-art {
  position: absolute; z-index: 0; height: auto; pointer-events: none; user-select: none;
  width: clamp(180px, 23vw, 340px); opacity: .85;
  --paint-edge: 145%;
  mask-image: linear-gradient(135deg, #000 calc(var(--paint-edge) - 45%), transparent var(--paint-edge)), linear-gradient(to bottom, transparent, #000 28%);
  mask-composite: intersect;
  transition: --paint-edge 3.6s cubic-bezier(.25,.1,.35,1), opacity 2.5s ease;
}
.garden-top { top: 58px; left: -45px; }
.garden-bottom { bottom: 0; right: -45px; rotate: 180deg; transition-delay: .5s; }
.garden-section.garden-wait .garden-art { --paint-edge: 0%; opacity: 0; }
.footer .garden-art, .rsvp-foot .garden-art { width: 165px; opacity: .6; }
.nav { background: rgba(250,247,239,.97); border-bottom: 1px solid var(--line); }
@media (max-width: 600px) {
  .cover { padding: 170px 18px 155px; }
  .cover .garden-art { width: 168px; opacity: .75; }
  .cover .garden-top { top: 64px; left: -55px; }
  .cover .garden-bottom { bottom: 0; right: -55px; }
  .cover .hero-mark { width: 64px; }
  .footer .garden-art, .rsvp-foot .garden-art { width: 115px; opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .garden-art { transition: none; --paint-edge: 145%; }
  .garden-section.garden-wait .garden-art { opacity: .75; }
}

.rsvp-invitation { background: var(--paper-soft); border-block: 1px solid var(--line); }

/* Staggered butterfly paths cross the invitation, above the lettering. */
.garden-butterfly { position:absolute; z-index:3; width:29px; height:25px; pointer-events:none; color:#769484; opacity:.75; left:-6%; top:var(--flight-top,40%); animation:garden-flight var(--flight-time,32s) linear infinite; animation-delay:var(--flight-delay,0s); animation-play-state:paused; }
.garden-butterfly svg { display:block; width:100%; height:100%; overflow:visible; }
.garden-butterfly .wing { transform-box:fill-box; transform-origin:center; animation:garden-wing .85s ease-in-out infinite alternate; animation-play-state:paused; }
.garden-visible .garden-butterfly, .garden-visible .garden-butterfly .wing { animation-play-state:running; }
.butterfly-first { --flight-top:32%; --flight-time:36s; --flight-delay:-8s; }
.butterfly-second { --flight-top:62%; --flight-time:42s; --flight-delay:-26s; animation-direction:reverse; width:25px; }
.butterfly-third { --flight-top:46%; --flight-time:38s; --flight-delay:-17s; width:32px; }
.butterfly-fourth { --flight-top:74%; --flight-time:46s; --flight-delay:-5s; animation-direction:reverse; width:26px; }
.butterfly-fifth { --flight-top:22%; --flight-time:40s; --flight-delay:-31s; width:28px; }
@keyframes garden-flight { 0% { left:-6%; transform:translateY(0) rotate(-12deg); } 25% { transform:translateY(-40px) rotate(12deg); } 50% { transform:translateY(25px) rotate(-10deg); } 75% { transform:translateY(-30px) rotate(14deg); } 100% { left:106%; transform:translateY(0) rotate(-12deg); } }
@keyframes garden-wing { from { transform:scaleX(1); } to { transform:scaleX(.4); } }
@media(max-width:600px) { .garden-butterfly { width:23px; height:20px; } .butterfly-fourth { display:none; } }
@media(prefers-reduced-motion:reduce) { .garden-butterfly { display:none; } }

#messages { width:100%; max-width:none !important; }
#messages .sec-title { max-width:900px; margin-inline:auto; line-height:1.15; text-wrap:balance; }
#messages .garden-art { position:absolute; z-index:0; width:clamp(130px,15vw,220px); opacity:.42; top:0; left:-48px; }
.footer .garden-top { top:0; left:-35px; }
.footer .emboss { display:none; }
@media(max-width:900px) {
  #messages { padding-top:96px; }
  #messages .sec-title { max-width:680px; font-size:clamp(30px,4.8vw,38px); letter-spacing:clamp(3px,.65vw,5px); }
  #messages .garden-art { width:110px; left:-30px; opacity:.3; }
}
@media(max-width:520px) {
  #messages { padding-top:82px; }
  #messages .sec-title { max-width:330px; font-size:30px; letter-spacing:3px; }
  #messages .garden-art { width:92px; left:-28px; opacity:.26; }
  .footer .garden-top { left:-45px; }
}

.response-embed { width:100%; max-width:760px; margin:32px auto; }
.response-embed .response-frame-crop { overflow:hidden; border:1px solid rgba(82,108,91,.28); border-radius:18px; background:rgba(255,253,247,.82); box-shadow:0 18px 46px rgba(35,48,40,.08); }
.response-embed iframe { display:block; width:calc(100% + 18px); border:0; background:transparent; }
.response-embed-rsvp .response-frame-crop { height:870px; }
.response-embed-rsvp iframe { transform:translateY(-220px); }
.response-embed-message { max-width:620px; }
.response-embed-message .form-intro { margin:0 0 16px; color:var(--ink-soft); font-style:italic; text-align:center; }
.response-embed-message .response-frame-crop { height:285px; }
.response-embed-message iframe { transform:translateY(-170px); }
#stepForm[hidden], #msgForm[hidden] { display:none !important; }

@media(max-width:600px) {
  .response-embed-rsvp .response-frame-crop { height:800px; }
  .response-embed-rsvp iframe { height:1160px; transform:translateY(-325px); }
  .response-embed-message .response-frame-crop { height:280px; }
  .response-embed-message iframe { height:650px; transform:translateY(-200px); }
}