*{box-sizing:border-box}
html,body{margin:0;width:100%;background:#fbfaf6;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{color:#181818;font-family:"Cormorant Garamond",Georgia,serif;text-align:center}
button,input,textarea{font:inherit}
.page{width:100%;max-width:820px;margin:0 auto;background:#fbfaf6;padding-top:max(34px,env(safe-area-inset-top));padding-right:max(22px,env(safe-area-inset-right));padding-bottom:max(120px,calc(env(safe-area-inset-bottom) + 30px));padding-left:max(22px,env(safe-area-inset-left))}
.hero{max-width:650px;margin:0 auto}
.eyebrow,.section-title,.dress,.date,.directions,.home-rsvp-heading,.home-rsvp-deadline{font-family:"Montserrat",Arial,sans-serif;text-transform:uppercase}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:4px;margin-bottom:12px}
h1{margin:0;font-family:"Snell Roundhand","Snell Roundhand Script","Italianno",cursive;font-size:72px;font-weight:400;line-height:1}
.watercolor-wrap{position:relative;margin:16px auto 18px;max-width:650px}
.watercolor{display:block;width:100%;height:auto}
.date{font-size:12px;font-weight:600;letter-spacing:2.4px}
.time-script{font-size:22px;font-style:italic;margin:8px 0 15px}
.venue-link{display:block;color:inherit;text-decoration:none}
.venue{font-size:24px;font-weight:500}
.address{margin-top:5px;font-size:17px;line-height:1.4}
.directions{margin-top:6px;font-size:9px;letter-spacing:1.6px;color:#777}
.dress{margin-top:20px;font-size:9px;font-weight:600;letter-spacing:2px}
.rule{width:42px;height:1px;background:#b7b0a5;margin:35px auto}
.home-rsvp-section{width:100%;max-width:570px;margin:0 auto;text-align:center}
.home-rsvp-heading{margin-bottom:15px;font-size:10px;font-weight:600;letter-spacing:3.4px}
.home-invitee{margin-bottom:13px;font-size:25px;font-weight:500;line-height:1.25;overflow-wrap:anywhere}
.home-rsvp-copy{width:100%;max-width:470px;margin:0 auto 11px;font-size:16px;font-style:italic;line-height:1.5;color:#555}
.home-rsvp-deadline{width:100%;max-width:500px;margin:0 auto;font-size:10px;font-weight:500;line-height:1.6;letter-spacing:1.25px}
.section-title{font-size:10px;font-weight:600;letter-spacing:3.2px;margin-bottom:18px}
.schedule{max-width:480px;margin:0 auto}
.schedule-row{display:grid;grid-template-columns:95px 1fr;gap:18px;align-items:baseline;text-align:left;padding:8px 0;border-bottom:1px solid #e6e1d8}
.schedule-row span{font-family:"Montserrat",Arial,sans-serif;font-size:10px;letter-spacing:1px}
.schedule-row strong{font-size:18px;font-weight:500}
.schedule-note{max-width:390px;margin:10px auto 15px;font-size:14px;line-height:1.45;font-style:italic;color:#666}
.details-grid{max-width:570px;margin:0 auto}
.detail+.detail{margin-top:30px}.detail p{font-size:16px;line-height:1.5;margin:7px auto;max-width:500px;color:#4f4f4f}
.floating-rsvp-wrap{position:fixed;left:50%;bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px));transform:translate(-50%,4px);z-index:999}
.floating-rsvp,.button{border:1px solid #181818;background:#181818;color:#fff;padding:14px 28px;min-width:184px;font-family:"Montserrat",Arial,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;text-decoration:none;cursor:pointer}
.floating-rsvp{min-width:196px;min-height:50px;box-shadow:0 7px 22px rgba(0,0,0,.10);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.floating-rsvp:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(0,0,0,.14)}
.floating-rsvp:active{transform:translateY(0)}
.floating-rsvp:disabled{opacity:.55;cursor:default}
.button.secondary{display:inline-flex;align-items:center;justify-content:center;background:#fbfaf6;color:#181818;margin:5px;min-width:160px}
.modal{position:fixed;inset:0;z-index:10000;background:rgba(251,250,246,.97);overflow-y:auto;padding:max(28px,env(safe-area-inset-top)) 16px max(32px,env(safe-area-inset-bottom))}
.modal-card{position:relative;width:min(600px,100%);margin:0 auto;background:#fbfaf6;padding:34px 22px 45px}
.close{position:absolute;right:5px;top:0;border:0;background:transparent;font-size:34px;font-weight:300;cursor:pointer}
.modal-card h2{font-size:28px;font-weight:500;margin:8px 0 8px}.subcopy{font-style:italic;color:#666}
.guest-card{padding:20px 0;border-top:1px solid #ddd7cc;text-align:left}
.guest-name{font-size:21px;font-weight:500;margin-bottom:12px}
.choice-row{display:flex;gap:10px;flex-wrap:wrap}
.choice{flex:1;min-width:120px;border:1px solid #b8b1a6;padding:11px 12px;text-align:center;cursor:pointer}
.choice input{margin-right:7px}
.dietary{width:100%;margin-top:12px;padding:12px;border:1px solid #cfc8bc;background:#fffdf8;border-radius:0;min-height:78px;resize:vertical}
.submit-wrap{text-align:center;margin-top:24px}
.form-error{margin:18px 0;color:#8c2929;font-family:"Montserrat",Arial,sans-serif;font-size:11px;line-height:1.5}
.saved-responses{margin:22px 0}.saved-item{padding:10px 0;border-bottom:1px solid #e0dbd1}
.calendar-actions{margin:22px 0}
@media(max-width:600px){
  .page{padding-top:27px;padding-left:16px;padding-right:16px;padding-bottom:max(110px,calc(env(safe-area-inset-bottom) + 28px))}
  h1{font-size:58px}
  .watercolor-wrap{margin-top:12px}
  .schedule-row{grid-template-columns:82px 1fr;gap:12px}
  .modal-card{padding-left:12px;padding-right:12px}
}


/* Post-deadline message for households that did not RSVP */
.closed-contact {
  max-width: 620px;
  margin: 42px auto 10px;
  padding: 0 24px 44px;
  text-align: center;
}

.closed-contact-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

.closed-contact p {
  margin: 8px 0;
  line-height: 1.7;
}

.closed-phone {
  display: inline-block;
  margin-top: 10px;
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Smooth personalized-content reveal: no visible "Loading..." state. */
.personalized-content,
.generic-rsvp-section {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease;
}

.personalized-content.is-ready,
.generic-rsvp-section.is-ready {
  opacity: 1;
  transform: translateY(0);
}

.generic-rsvp-section {
  width: 100%;
  max-width: 570px;
  margin: 0 auto;
  text-align: center;
}

.generic-rsvp-title {
  margin: 0 auto 12px;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.25;
}

.generic-rsvp-section p {
  max-width: 500px;
  margin: 0 auto;
  font-size: 16px;
  font-style: italic;
  line-height: 1.6;
  color: #555;
}

/* ================================
   V4 refinements
   ================================ */

.generic-rsvp-section .generic-warmth{
  margin:0 auto 8px;
  font-size:17px;
  color:#3f3f3f;
}

/* Personalized RSVP form: more compact, refined, mobile-friendly */
.modal-card{
  max-width:620px;
}

.guest-card{
  padding:18px 0 20px;
}

.guest-name{
  margin-bottom:10px;
  font-size:22px;
}

.choice-row{
  gap:12px;
}

.choice{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:52px;
  padding:9px 12px;
  border:1px solid #c8c1b5;
  background:transparent;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.choice:hover{
  border-color:#8f887d;
}

.choice:has(input:checked){
  border-color:#181818;
  background:#f1eee7;
  box-shadow:inset 0 0 0 1px #181818;
}

.choice input{
  margin:0;
  width:17px;
  height:17px;
  accent-color:#181818;
}

.choice span{
  font-size:18px;
}

.dietary-wrap{
  margin-top:10px;
}

.dietary-wrap[hidden]{
  display:none;
}

.dietary{
  width:100%;
  height:48px;
  min-height:48px;
  margin:0;
  padding:0 14px;
  border:1px solid #d5cec2;
  background:#fffdf8;
  border-radius:0;
  font-size:16px;
  line-height:48px;
}

.dietary::placeholder{
  color:#aaa49a;
}

/* Subtle personalized contact link on the normal site */
.personalized-contact{
  margin:42px auto 0;
  padding-top:10px;
  text-align:center;
}

.contact-link{
  appearance:none;
  border:0;
  border-bottom:1px solid #b9b1a5;
  background:transparent;
  padding:2px 0 3px;
  color:#5f5a53;
  font-family:"Montserrat",Arial,sans-serif;
  font-size:9px;
  font-weight:500;
  letter-spacing:1.7px;
  text-transform:uppercase;
  cursor:pointer;
}

.contact-link:hover{
  color:#181818;
  border-color:#181818;
}

/* Missed deadline: messaging is intentionally more prominent */
.closed-contact{
  max-width:600px;
  margin:32px auto 12px;
  padding:0 24px 42px;
}

.closed-contact-title{
  margin-bottom:12px;
}

.closed-message-button{
  margin-top:20px;
}

/* Message modal */
.message-card{
  text-align:left;
}

.message-card .section-title,
.message-card h2,
.message-card .subcopy{
  text-align:center;
}

.message-form{
  margin-top:26px;
}

.field-label{
  display:block;
  margin:18px 0 7px;
  font-family:"Montserrat",Arial,sans-serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.field-label span{
  font-weight:400;
  color:#777;
  text-transform:none;
  letter-spacing:.4px;
}

.message-text,
.reply-contact{
  display:block;
  width:100%;
  border:1px solid #cbc4b8;
  border-radius:0;
  background:#fffdf8;
  color:#181818;
}

.message-text{
  min-height:140px;
  padding:13px 14px;
  resize:vertical;
  line-height:1.45;
}

.reply-contact{
  height:48px;
  padding:0 14px;
}

.field-help{
  margin:7px 0 0;
  color:#777;
  font-size:13px;
  font-style:italic;
  line-height:1.4;
}

@media(max-width:600px){
  .guest-card{
    padding:16px 0 18px;
  }
  .guest-name{
    font-size:20px;
  }
  .choice{
    min-height:50px;
    padding:8px 8px;
  }
  .choice span{
    font-size:17px;
  }
}


/* ================================
   V5 final visual polish
   ================================ */
.schedule-icon{width:34px;height:34px;margin:0 auto 11px;color:#8d867b}
.schedule-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ceremony-arrival-note{max-width:470px;margin:28px auto 0;padding:22px 18px 0;border-top:1px solid #d8d2c8;text-align:center}
.arrival-note-title,.policy-heading{font-family:"Montserrat",Arial,sans-serif;text-transform:uppercase;font-size:9px;font-weight:600;letter-spacing:2px}
.ceremony-arrival-note p{max-width:430px;margin:10px auto 0;font-size:14px;line-height:1.55;font-style:italic;color:#666}
.guest-policy{max-width:520px;margin-left:auto;margin-right:auto}
.policy-item{max-width:490px;margin:0 auto}
.policy-item p{margin-top:9px}
.policy-divider{width:30px;height:1px;background:#d8d2c8;margin:20px auto}
@media(max-width:600px){
  .ceremony-arrival-note{margin-top:24px;padding-top:19px}
  .policy-divider{margin:18px auto}
}


/* V7: preserve true horizontal centering while the personalized reveal animates. */
.floating-rsvp-wrap.personalized-content{
  transform:translate(-50%,4px);
}
.floating-rsvp-wrap.personalized-content.is-ready{
  transform:translate(-50%,0);
}

/* ================================
   V8 RSVP confirmation polish
   ================================ */
.confirmation-card{
  max-width:620px;
  text-align:center;
}
.confirmation-intro{
  max-width:470px;
  margin:8px auto 22px;
  color:#5f5a53;
  font-size:16px;
  font-style:italic;
  line-height:1.6;
}
.confirmation-card .saved-responses{
  max-width:470px;
  margin:22px auto 26px;
  text-align:left;
  border-top:1px solid #ded8ce;
}
.confirmation-card .saved-item{
  padding:13px 4px;
  line-height:1.45;
}
.confirmation-note{
  max-width:490px;
  margin:28px auto 0;
  padding-top:24px;
  border-top:1px solid #d8d2c8;
}
.confirmation-note-title{
  font-family:"Montserrat",Arial,sans-serif;
  text-transform:uppercase;
  font-size:9px;
  font-weight:600;
  letter-spacing:2px;
}
.confirmation-note p{
  max-width:460px;
  margin:10px auto 0;
  color:#5f5a53;
  font-size:15px;
  line-height:1.6;
}
.confirmation-actions{
  margin:28px auto 0;
}
.primary-confirmation-action .button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:230px;
  text-decoration:none;
}
.confirmation-tools{
  max-width:500px;
  margin:34px auto 0;
  padding-top:26px;
  border-top:1px solid #d8d2c8;
}
.confirmation-tools .calendar-actions{
  margin:16px 0 6px;
}
.confirmation-signoff{
  margin:42px auto 4px;
  padding-top:30px;
  border-top:1px solid #d8d2c8;
}
.see-you-soon{
  font-family:"Snell Roundhand","Snell Roundhand Script","Italianno",cursive;
  font-size:42px;
  line-height:1.05;
  color:#181818;
}
.signoff-names{
  margin-top:10px;
  font-family:"Montserrat",Arial,sans-serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:3.2px;
}
@media(max-width:600px){
  .confirmation-card{
    padding-top:30px;
  }
  .confirmation-intro{
    font-size:15px;
  }
  .confirmation-note{
    margin-top:24px;
    padding-top:21px;
  }
  .confirmation-note p{
    font-size:14px;
  }
  .confirmation-tools .button.secondary{
    width:min(100%,260px);
    margin:5px auto;
  }
  .see-you-soon{
    font-size:39px;
  }
}