/* A personal reply card: silver details, blue stationery, and room to breathe. */
html.rsvp-preview-mode { scroll-padding-top: 0; }
#rsvp { padding: 110px max(5.5vw,24px) 120px; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 64px; align-items: start; background: radial-gradient(ellipse at 18% 25%,#345fc2 0,transparent 56%),linear-gradient(125deg,#163777,#244ca1 56%,#112b68); scroll-margin-top: 20px; }
#rsvp [hidden] { display: none !important; }
#rsvp:before { inset: 24px; border-color: #c2d8ff40; }
.rsvp-architecture { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .34; }
.rsvp-architecture i { position: absolute; top: 6%; left: -12%; width: 62%; height: 100%; border: 1px solid #b7d4ff50; border-radius: 50% 50% 0 0 / 38% 38% 0 0; }
.rsvp-architecture i:nth-child(2) { inset: 7% auto auto -10%; width: 58%; }
.rsvp-architecture i:nth-child(3) { inset: 8% auto auto -8%; width: 54%; }
#rsvp .rsvp-intro { justify-self: center; align-self: start; margin-top: 30px; max-width: 440px; }
#rsvp .rsvp-intro .chapter-label { margin-bottom: 32px; }
.rsvp-script-seal { font: 74px/1 var(--script); color: #e0ecff; margin: 0 0 24px; }
.rsvp-script-seal span { font: italic 32px/1 var(--serif); margin: 0 6px; color: #aac9f5; }
#rsvp .rsvp-intro .section-title { font-size: clamp(50px,5.5vw,78px); line-height: 1.06; margin: 0; }
.rsvp-branch { display: block; width: 210px; height: 44px; margin: 22px 0; opacity: .9; }
#rsvp .rsvp-intro > p { font-size: 16px; line-height: 1.85; color: #d3e3ff; }
#rsvp .rsvp-deadline { display: flex; align-items: center; gap: 17px; margin: 38px 0 0; padding: 22px 0; border: 0; border-top: 1px solid #b9d3ff55; border-bottom: 1px solid #b9d3ff55; }
#rsvp .rsvp-deadline > .icon { width: 28px; height: 28px; flex-shrink: 0; color: #bfd8ff; }
#rsvp .rsvp-deadline span { font: 500 10px/1.5 var(--sans); letter-spacing: .14em; color: #bcd7ff; }
#rsvp .rsvp-deadline strong { font: 400 clamp(26px,2.8vw,34px)/1.2 var(--serif); margin-top: 8px; }
#rsvp .rsvp-intro > .rsvp-intro-signoff { font: italic 24px/1.4 var(--serif); color: #c6dcff; margin-top: 25px; }
#rsvp .rsvp-floral { opacity: .7; filter: none; width: min(550px,45vw); bottom: -100px; left: -170px; }
#rsvp .rsvp-paper { width: 100%; max-width: 620px; justify-self: start; padding: 34px 36px 28px; border: 1px solid #d6e6ff; outline: none; border-radius: 120px 120px 12px 12px / 38px 38px 12px 12px; background: radial-gradient(ellipse at 100% 0,#dbe9ff80,transparent 45%),linear-gradient(155deg,#fffefc,#f4f8ff); box-shadow: 0 28px 70px #071c5140,7px 7px 0 -2px #82a4db44; color: #244a87; }
#rsvp .rsvp-paper:before { content: ''; position: absolute; inset: 8px; border: 1px solid #bdcfe786; border-radius: 112px 112px 6px 6px / 30px 30px 6px 6px; pointer-events: none; }
.reply-letterhead { display: flex; align-items: center; justify-content: center; gap: 16px; color: #5375a8; margin: 5px 0 18px; }
.reply-letterhead > span:first-child { font: 25px/1.2 var(--serif); letter-spacing: .04em; }
.reply-letterhead i { width: 1px; height: 23px; background: #b8cce7; }
.reply-wedding-date { font: 500 10px/1.5 var(--sans); letter-spacing: .13em; }
#rsvp .invitation-badge { text-align: center; color: #5575a4; font-size: 9px; letter-spacing: .16em; margin: 0 0 25px; }
#rsvp .rsvp-paper h3 { font: italic 35px/1.15 var(--serif); color: #20468b; margin: 18px 0; }
#rsvp .rsvp-household { font: 500 clamp(29px,3vw,38px)/1.15 var(--serif); margin: 8px 0 9px; color: #244783; text-wrap: balance; }
.reserved-count { font: 12px/1.7 var(--sans); text-align: center; color: #647da4; margin: 0 0 19px; }
#rsvp .invited-names { display: grid; grid-template-columns: 1fr 1fr; list-style: none; gap: 0 16px; padding: 0; margin: 0; font: 400 20px/1.45 var(--serif); text-align: center; }
.invited-names li { padding: 9px 3px; border-bottom: 1px solid #c0d3ed80; overflow-wrap: anywhere; }
.invited-names li:last-child:nth-child(odd) { grid-column: 1/-1; }
.reply-divider { display: flex; justify-content: center; align-items: center; gap: 15px; margin: 23px 0 5px; color: #83a2d1; }
.reply-divider > i { width: 65px; height: 1px; background: linear-gradient(90deg,transparent,#93b1db); }
.reply-divider > i:last-child { transform: scaleX(-1); }
.reply-divider > .icon { width: 19px; height: 19px; }
#rsvp .rsvp-choices { margin: 24px 0; gap: 10px; }
#rsvp .rsvp-choices label { padding: 15px 16px; min-height: 76px; gap: 12px; border: 1px solid #b7cce9; border-radius: 12px; background: #f5f9ff; box-shadow: 0 3px 9px #163b7310; transition: background .2s,border-color .2s,box-shadow .2s; }
#rsvp .rsvp-choices label:hover { background: #edf4ff; border-color: #799ed6; }
#rsvp .rsvp-choices label:has(input:checked) { padding: 15px 16px; background: linear-gradient(110deg,#dfecff,#f6faff); border-color: #396bc1; box-shadow: inset 4px 0 #3765b5,0 4px 15px #244f9320; }
#rsvp .rsvp-choices label:has(input:disabled) { cursor: default; }
#rsvp .rsvp-choices label > span:nth-of-type(2) { font: 600 14px/1.4 var(--sans); color: #254984; }
#rsvp .rsvp-choices small { font: 400 12px/1.5 var(--sans); color: #5a7296; margin-top: 4px; }
#rsvp .choice-icon { width: 35px; min-width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: #527ab7; background: #e7effb; }
#rsvp .choice-icon .icon { width: 22px; height: 22px; }
#rsvp .rsvp-choices label > i { width: 18px; height: 18px; }
#rsvp .rsvp-choices label:has(input:checked) > i { border: 5px solid #315fb1; }
#rsvp #guest-selection { padding: 18px 15px 15px; margin: 26px 0; border: 1px solid #abc4e8; border-radius: 12px; background: #eaf2ff80; }
#rsvp #guest-selection legend { padding: 0 8px; font: italic 25px/1.2 var(--serif); color: #2b5292; }
#rsvp #guest-selection-help { font-size: 12px; margin-bottom: 13px; }
#rsvp #guest-options label { min-height: 51px; border: 1px solid #c4d6ed; background: #fff9; border-radius: 8px; padding: 10px 12px; font: 400 20px/1.3 var(--serif); }
#rsvp #guest-options label:has(input:checked) { background: #dceaff; border-color: #7299d3; }
#rsvp #guest-options input { width: 20px; height: 20px; accent-color: #2854a1; }
#rsvp #guest-selection-count { border: 0; background: none; padding: 7px 0 0; margin: 8px 0 0; font-size: 13px; text-align: center; }
#rsvp .rsvp-message-label { font-size: 12px; color: #41638f; margin: 24px 0; }
#rsvp .rsvp-message-label small { font-weight: 400; }
#rsvp .rsvp-message-label textarea { border-radius: 10px; background: #fff9; border-color: #b8cce6; font-size: 15px; min-height: 74px; }
#rsvp .rsvp-message-label textarea::placeholder { color: #8195b2; }
#rsvp .confirm-button { min-height: 60px; border-radius: 10px; padding: 15px 21px; font-size: 15px; letter-spacing: .015em; background: linear-gradient(115deg,#3468c3,#193b85); box-shadow: 0 4px 0 #113471,0 8px 20px #183c8c20; }
#rsvp .confirm-button .icon { border: 0; padding: 0; width: 23px; height: 23px; }
#rsvp .rsvp-privacy-note { margin-top: 17px; font-size: 10px; }
.reply-paper-finish { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 25px; font: italic 20px/1.2 var(--serif); color: #7392ba; }
.reply-paper-finish i { width: 27px; height: 1px; background: #b9cce6; }
#rsvp #rsvp-access-note { padding: 4px 0 12px; }
#rsvp #rsvp-access-note h3 { font: 400 44px/1.05 var(--serif); margin: 24px 0; }
#rsvp #rsvp-access-note h3 em { color: #648bc1; }
#rsvp #rsvp-access-note > p { max-width: 350px; margin: 18px auto 27px; font: 14px/1.85 var(--sans); }
.reply-help-label { display: block; font: 500 9px/1.5 var(--sans); letter-spacing: .13em; color: #6782a6; }
#rsvp #rsvp-access-note > a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 13px; font-size: 13px; border-radius: 9px; min-height: 55px; background: linear-gradient(120deg,#3765b7,#20478b); }
#rsvp-access-note > a > .icon { width: 19px; height: 19px; }
.reply-envelope { width: 152px; height: 105px; position: relative; margin: 20px auto 32px; background: linear-gradient(150deg,#d6e6fc,#a5c2e9); border: 1px solid #91b0dc; border-radius: 7px; box-shadow: 0 16px 25px #234c8e18,inset 0 0 0 5px #ecf4ff80; transform: rotate(-5deg); }
.reply-envelope:before,.reply-envelope:after { content: ''; position: absolute; inset: 6px; background: linear-gradient(32deg,transparent 49.4%,#8eafd6 50%,transparent 50.6%),linear-gradient(-32deg,transparent 49.4%,#8eafd6 50%,transparent 50.6%); }
.reply-envelope i { position: absolute; inset: 0 0 40%; clip-path: polygon(0 0,100% 0,50% 100%); background: linear-gradient(#edf5ff,#c5daf6); }
.reply-envelope b { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%,-42%); display: grid; grid-auto-flow: column; align-items: center; width: 48px; height: 48px; border-radius: 50%; padding: 5px; border: 3px double #b1c9e7; background: linear-gradient(130deg,#fff,#c4d8f2); box-shadow: 0 3px 8px #264d8920; color: #345d96; font: 25px/1 var(--serif); }
.reply-envelope b span { font-size: 16px; }
#rsvp .rsvp-success { padding-top: 8px; }
#rsvp-success, #rsvp-form-view { scroll-margin-top: 24px; }
#rsvp .success-seal { width: 86px; height: 86px; margin-bottom: 24px; border: 1px solid #96b4df; outline: 1px solid #c9dbf1; outline-offset: 6px; background: radial-gradient(circle at 30% 25%,#fff,#dae8fc); color: #315eaa; box-shadow: 0 10px 20px #24509012; }
#rsvp .success-seal .icon { width: 35px; height: 35px; }
#rsvp .reply-received { font: 500 9px/1.6 var(--sans); letter-spacing: .12em; color: #6a83aa; }
#rsvp #success-heading { font-size: 42px; text-wrap: balance; }
#rsvp #success-summary { font: 14px/1.8 var(--sans); color: #58749c; }
#rsvp #confirmed-count { margin: 20px 0; padding: 12px 15px; border-radius: 8px; background: #e3eeff; color: #2b5192; font: 600 14px/1.5 var(--sans); }
#rsvp #response-summary { margin: 18px 0; }
#rsvp #response-summary li { padding: 14px 0; align-items: center; gap: 12px; border-color: #c3d5ee; }
#rsvp #response-summary strong { font: 400 21px/1.3 var(--serif); color: #2e528b; }
#rsvp #response-summary li > span { flex-shrink: 0; padding: 4px 9px; border-radius: 5px; font: 500 10px/1.5 var(--sans); color: #647a98; background: #e9edf4; }
#rsvp #response-summary li[data-attending="true"] > span { color: #285a79; background: #dbeef5; }
#rsvp #saved-response-note { margin-bottom: 24px; font-size: 11px; line-height: 1.7; }
.attire-assignees { padding: 12px 0; font: italic 21px/1.5 var(--serif); color: #436ba5; text-wrap: balance; }
.rsvp-preview-tools { position: relative; z-index: 5; grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1180px; width: 100%; margin: -55px auto -28px; padding: 16px 20px; border: 1px solid #a4c4f060; border-radius: 10px; background: #071d4a5c; color: #e3eeff; }
.rsvp-preview-tools > div { display: grid; gap: 5px; }
.rsvp-preview-tools strong { font: 600 14px/1.4 var(--sans); }
.rsvp-preview-tools span { font: 11px/1.5 var(--sans); color: #bcd3f5; }
.rsvp-preview-tools nav { display: flex; gap: 8px; flex-wrap: wrap; }
.rsvp-preview-tools a,.rsvp-preview-tools button { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border: 1px solid #b5d2ff60; border-radius: 6px; background: #bed7ff14; color: #edf4ff; font: 500 12px/1.4 var(--sans); }
.rsvp-preview-tools :is(a,button):hover { background: #bed7ff30; }
@media(min-width:1550px) { #rsvp { padding-left: calc((100vw - 1320px)/2); padding-right: calc((100vw - 1320px)/2); } }
@media(max-width:1000px) { #rsvp { gap: 36px; padding-left: 35px; padding-right: 35px; } #rsvp .rsvp-paper { padding: 30px 24px 25px; } #rsvp .rsvp-intro .section-title { font-size: 56px; } .rsvp-preview-tools { margin-bottom: 0; } }
@media(max-width:760px) {
  #rsvp { grid-template-columns: minmax(0,1fr); gap: 40px; padding: 70px 22px 80px; }
  #rsvp:before { inset: 12px; }
  #rsvp .rsvp-intro { text-align: center; margin-top: 0; max-width: 450px; }
  #rsvp .rsvp-intro .chapter-label { justify-content: center; margin-bottom: 23px; }
  .rsvp-script-seal { font-size: 53px; margin-bottom: 15px; }.rsvp-script-seal span { font-size: 25px; }
  #rsvp .rsvp-intro .section-title { font-size: clamp(45px,10vw,58px); }
  .rsvp-branch { width: 185px; margin: 13px auto; }
  #rsvp .rsvp-intro > p { font-size: 14px; }
  #rsvp .rsvp-deadline { justify-content: center; margin: 24px auto 0; padding: 18px 0; max-width: 340px; text-align: left; }
  #rsvp .rsvp-deadline span { font-size: 8px; letter-spacing: .12em; }
  #rsvp .rsvp-deadline strong { font-size: 29px; }
  #rsvp .rsvp-intro > .rsvp-intro-signoff { font-size: 21px; margin-top: 18px; }
  #rsvp .rsvp-paper { justify-self: center; padding: 30px 23px 25px; max-width: 520px; }
  #rsvp .rsvp-floral { width: 350px; left: -180px; bottom: -75px; opacity: .55; }
  #rsvp .invitation-badge { font-size: 8px; letter-spacing: .12em; margin-bottom: 20px; }
  #rsvp .rsvp-paper h3 { font-size: 32px; }
  #rsvp .rsvp-choices label,#rsvp .rsvp-choices label:has(input:checked) { padding: 13px 11px; gap: 9px; }
  #rsvp .rsvp-choices label > span:nth-of-type(2) { font-size: 13px; }
  #rsvp .rsvp-choices small { font-size: 11px; }
  #rsvp .rsvp-message-label textarea { font-size: 16px; }
  #rsvp .invited-names { font-size: 19px; gap: 0 10px; }
  #rsvp #guest-selection { padding: 14px 10px; }
  #rsvp #guest-options label { font-size: 19px; }
  #rsvp #success-heading { font-size: 36px; }
  #rsvp #response-summary strong { font-size: 20px; }
  #rsvp #rsvp-access-note h3 { font-size: 39px; }
  #rsvp #rsvp-access-note > a { padding: 12px; font-size: 12px; }
  .rsvp-preview-tools { margin: -32px auto -10px; flex-direction: column; align-items: stretch; padding: 16px; }
  .rsvp-preview-tools nav { gap: 7px; }
  .rsvp-preview-tools a,.rsvp-preview-tools button { font-size: 11px; padding: 8px 10px; min-height: 44px; }
}
@media(max-width:380px) {
  #rsvp { padding-left: 16px; padding-right: 16px; }
  #rsvp .rsvp-paper { padding: 28px 17px 24px; }
  #rsvp .choice-icon { min-width: 27px; width: 27px; height: 27px; }
  #rsvp .choice-icon .icon { width: 19px; height: 19px; }
  #rsvp .rsvp-choices label > i { width: 16px; height: 16px; }
  #rsvp .rsvp-choices label > span:nth-of-type(2) { font-size: 12px; }
  #rsvp #response-summary li { align-items: start; flex-direction: column; gap: 6px; }
  #rsvp #rsvp-access-note > p { font-size: 13px; }
}
@media(prefers-reduced-motion:reduce) { #rsvp * { scroll-behavior: auto; transition: none !important; } }
.motion-paused #rsvp * { transition: none !important; }

/* Local preview directory. */
.preview-index { background: radial-gradient(ellipse at 10% 0,#365eaf,transparent 65%),#163677; color: #e7f0ff; min-height: 100vh; }
.preview-gallery { max-width: 1180px; margin: 0 auto; padding: 50px 30px 75px; }
.preview-home { display: inline-block; font: 42px/1.2 var(--script); color: #c7ddff; margin-bottom: 55px; }
.preview-eyebrow { font: 500 10px/1.6 var(--sans); letter-spacing: .19em; color: #b3cff4; }
.preview-gallery h1 { font: 400 clamp(44px,7vw,76px)/1.06 var(--serif); margin: 22px 0; color: #fff; }
.preview-gallery h1 em { color: #b8d2fa; }
.preview-description { font: 15px/1.9 var(--sans); max-width: 640px; color: #d1e1fa; margin-bottom: 40px; }
.preview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.preview-grid > a { display: flex; flex-direction: column; align-items: start; padding: 28px; border: 1px solid #b9d0f3; border-radius: 8px; background: linear-gradient(130deg,#fff,#e9f1ff); color: #244a87; box-shadow: 0 8px 20px #0b225525; transition: transform .2s,box-shadow .2s; }
.preview-grid > a:hover { transform: translateY(-4px); box-shadow: 0 14px 25px #0b225540; }
.preview-number { font: italic 21px/1 var(--serif); color: #6b8bbd; }
.preview-grid h2 { font: 400 33px/1.15 var(--serif); margin: 18px 0 12px; }
.preview-grid p { font: 13px/1.75 var(--sans); color: #58729a; margin: 0 0 22px; }
.preview-action { margin-top: auto; font: 600 12px/1.6 var(--sans); color: #234d9b; }
.preview-footnote { font: 12px/1.8 var(--sans); color: #aec8ed; margin-top: 28px; max-width: 650px; }
@media(max-width:650px) { .preview-gallery { padding: 30px 23px 60px; }.preview-grid { grid-template-columns: 1fr; }.preview-home { margin-bottom: 35px; }.preview-grid > a { padding: 24px; } }

/* Preserve horizontal centering while the feedback toast enters. */
#toast { animation: reply-toast-in .3s ease-out; }
@keyframes reply-toast-in { from { opacity: 0; transform: translate(-50%,10px); } to { opacity: 1; transform: translate(-50%,0); } }
@media(prefers-reduced-motion:reduce) { #toast { animation: none; } }
.motion-paused #toast { animation: none; }