@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Great+Vibes&display=swap');
:root{--burgundy:#782b35;--olive:#585b36;--ivory:#f5e8dc;--border:#8c7946}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:linear-gradient(110deg,#eee0d8 0%,#faf0e7 45%,#e5d9ce 100%);color:#4d4833;font-family:Georgia,serif}
.shell{width:min(100%,500px);margin:0 auto;padding:0;}
.slide-card{position:relative;width:100%;aspect-ratio:941/1672;overflow:hidden;background:#f3e9e0;box-shadow:0 12px 58px #573a312c}
.slide-art{width:100%;height:100%;display:block;object-fit:fill;-webkit-user-select:none;user-select:none;pointer-events:none}
.hotspot{position:absolute;display:block;background:transparent;border:none;padding:0;cursor:pointer;z-index:4}
.hotspot:focus-visible,.submit-rsvp:focus-visible{outline:3px solid #6d7845;outline-offset:3px;border-radius:12px}
/* Larger, correctly aligned tappable directions area over the printed GET DIRECTIONS label. */
.directions{left:35%;top:74.7%;width:34%;height:3.2%;z-index:8;touch-action:manipulation;}
.dress-code{left:26.2%;top:88.7%;width:47.8%;height:5.3%;border-radius:999px}
.rsvp-from-dress{left:30%;top:89.1%;width:40%;height:5.2%;border-radius:999px}

/* One clean RSVP layout: decorative background has no baked-in form text. */
.rsvp-page{position:relative;isolation:isolate;overflow:hidden;min-height:max(100svh,clamp(715px,177.7vw,890px));padding:clamp(39px,7vw,55px) clamp(34px,9vw,62px) clamp(42px,8vw,64px);background:#f7eee4;display:flex;flex-direction:column;box-shadow:0 12px 58px #573a312c}
.rsvp-page::before{content:'';position:absolute;inset:0;z-index:-2;background:url('assets/venue-soft.webp') center/cover no-repeat;opacity:.85}
.rsvp-page::after{content:'';position:absolute;inset:12px;z-index:6;border:1.5px solid #873641;pointer-events:none}
.floral-corner{position:absolute;z-index:-1;pointer-events:none;background-position:center;background-size:100% 100%;background-repeat:no-repeat;opacity:.97}
.floral-corner.top-left{top:0;left:0;width:35%;aspect-ratio:250/245;background-image:url('assets/floral-tl.png')}
.floral-corner.top-right{top:0;right:0;width:35%;aspect-ratio:250/245;background-image:url('assets/floral-tr.png')}
.floral-corner.bottom-left{bottom:0;left:0;width:39%;aspect-ratio:310/337;background-image:url('assets/floral-bl.png')}
.floral-corner.bottom-right{bottom:0;right:0;width:39%;aspect-ratio:310/337;background-image:url('assets/floral-br.png')}
.rsvp-content{z-index:2;position:relative;flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.rsvp-heading{text-align:center;width:100%;}
.rsvp-eyebrow{letter-spacing:.24em;color:#5d5538;font-size:clamp(11px,2.7vw,15px);font-weight:500;white-space:nowrap}
.rsvp-rule{width:64%;margin:10px auto 0;display:flex;align-items:center;justify-content:center;gap:12px;color:#82303d;font-size:16px}
.rsvp-rule::before,.rsvp-rule::after{content:'';height:1px;background:#a98177;flex:1}
.rsvp-heading h1{font:400 clamp(86px,22vw,127px)/.96 'Great Vibes','URW Chancery L',cursive;color:#782635;margin:15px 0 0}
.rsvp-small-branch{font:400 25px/1 Georgia,serif;color:#88764e;margin-top:-2px}
.rsvp-heading p{font:400 clamp(20px,5.2vw,27px)/1.12 'Cormorant Garamond',Georgia,serif;color:#3f4830;margin:17px 0 5px;text-wrap:balance}
.rsvp-form{width:100%;display:flex;flex-direction:column;gap:15px;margin-top:auto;padding:27px 0 0;color:#504831}
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field label,.attendance-fieldset legend{font:600 clamp(18px,4.5vw,22px)/1.12 'Cormorant Garamond',Georgia,serif;color:#4b4f32;letter-spacing:.01em}
.form-field label::before,.attendance-fieldset legend::before{content:'✣';color:#8c3442;font-size:13px;margin-right:8px}
.form-field input,.form-field select{width:100%;min-height:43px;border:1.5px solid #8c3946;border-radius:12px;background:#fff8f1ef;color:#4b3e36;padding:9px 12px;font:400 15px/1.4 Georgia,serif;outline:none}
.form-field input::placeholder{color:#978573}
.form-field input:focus-visible,.form-field select:focus-visible{outline:3px solid #a7a97f;outline-offset:2px}
.form-field select{border-color:#827d51;cursor:pointer;}
.attendance-fieldset{border:0;margin:0;padding:0;display:grid;gap:10px}
.attendance-fieldset legend{padding:0;margin-bottom:8px}
.attendance-choice{display:flex;align-items:center;gap:12px;cursor:pointer;font:400 clamp(16px,3.7vw,18px)/1.2 'Cormorant Garamond',Georgia,serif;color:#41452e;min-height:28px}
.attendance-choice input{appearance:none;flex:none;margin:0;width:23px;height:23px;border:2px solid #7c293c;border-radius:50%;display:grid;place-items:center;background:#fff9f4d9;cursor:pointer}
.attendance-choice input::after{content:'';width:11px;height:11px;border-radius:50%;background:#7c293c;transform:scale(0);transition:transform .12s ease}
.attendance-choice input:checked::after{transform:scale(1)}
.attendance-choice input:focus-visible{outline:3px solid #a7a97f;outline-offset:3px}
.guests-field[hidden]{display:none!important}
.submit-rsvp{width:100%;min-height:57px;margin-top:5px;border:2px solid #aa805e;border-radius:999px;background:linear-gradient(105deg,#681728,#862c3b);color:#fffaf3;letter-spacing:.18em;font:500 clamp(16px,4vw,19px)/1.3 Georgia,serif;box-shadow:0 6px 0 #fff6ea85,0 10px 18px #62212b2a;cursor:pointer;touch-action:manipulation}
.submit-rsvp:hover{background:linear-gradient(105deg,#7d2334,#942f46)}
.honeypot{position:absolute;left:-200vw;width:1px;height:1px;opacity:0;pointer-events:none}
@media(min-width:560px){.shell{margin:26px auto}.slide-card,.rsvp-page{border:1px solid #d4bba9}}
@media(max-width:370px){.rsvp-page{padding-left:30px;padding-right:30px;min-height:710px}.rsvp-form{gap:12px}.rsvp-heading h1{margin-top:9px}.rsvp-heading p{margin-top:9px}}
@media(prefers-reduced-motion:reduce){.attendance-choice input::after{transition:none}}


.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.rsvp-art-card{background:#f3e9e0}
.rsvp-back{left:4%;top:1.7%;width:9%;height:5%;border-radius:50%;z-index:7}
.rsvp-form-overlay{position:absolute;inset:0;z-index:5}
.name-input-clean{position:absolute;left:31.3%;top:57.1%;width:47.1%;height:3.65%;border:none;background:transparent;color:#3f3027;padding:0 2.1%;font:400 clamp(12px,3.2vw,19px)/1.2 Georgia,serif;outline:none;box-shadow:none;border-radius:12px}
.name-input-clean::placeholder{color:transparent}
.name-input-clean:focus-visible{outline:2px solid rgba(124,41,60,.35);outline-offset:1px;background:rgba(255,248,241,.18)}
.name-input-clean:-webkit-autofill,.name-input-clean:-webkit-autofill:hover,.name-input-clean:-webkit-autofill:focus{transition: background-color 5000s ease-in-out 0s;-webkit-text-fill-color:#3f3027;caret-color:#3f3027;border-radius:12px}
.attendance-fieldset-clean{position:absolute;inset:0;border:0;margin:0;padding:0}
.attendance-clean{position:absolute;display:block;left:34.8%;width:6.2%;height:3.8%;cursor:pointer;z-index:6}
.attendance-clean.accept{top:69.65%}
.attendance-clean.decline{top:74.0%}
.attendance-clean input{appearance:none;opacity:0;position:absolute;inset:0;margin:0;cursor:pointer}
.attendance-clean .radio-dot{position:absolute;left:24%;top:22%;width:52%;aspect-ratio:1;border-radius:50%;background:#7c293c;opacity:0;transform:scale(.6);transition:transform .15s ease,opacity .15s ease;pointer-events:none}
.attendance-clean input:checked + .radio-dot{opacity:1;transform:scale(1)}
.attendance-clean:has(input:focus-visible){outline:3px solid #a7a97f;outline-offset:2px;border-radius:50%}
.submit-clean{position:absolute;left:30.3%;top:82.8%;width:39.5%;height:5.2%;background:transparent;border:none;cursor:pointer;border-radius:999px;z-index:6}
.submit-clean:focus-visible{outline:3px solid #6d7845;outline-offset:3px}
.attendee-chip{position:absolute;left:50%;top:79.4%;transform:translateX(-50%);min-width:182px;max-width:76%;padding:8px 14px;border-radius:999px;background:rgba(247,238,228,.9);border:1px solid rgba(124,41,60,.26);color:#5b4c35;font:500 clamp(12px,3.1vw,15px)/1.2 'Cormorant Garamond',Georgia,serif;text-align:center;z-index:6;box-shadow:0 5px 16px rgba(87,58,49,.08)}
.attendee-modal[hidden]{display:none!important}
.attendee-modal{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px}
.attendee-modal__backdrop{position:absolute;inset:0;background:rgba(41,22,18,.42);backdrop-filter:blur(2px)}
.attendee-modal__panel{position:relative;width:min(86%,360px);background:#fff8f1;border:1px solid #d7c1b2;border-radius:24px;padding:24px 20px 18px;box-shadow:0 18px 44px rgba(87,58,49,.22);text-align:center}
.attendee-modal__panel h2{margin:0 0 8px;color:#7b2e3a;font:500 34px/1.06 'Cormorant Garamond',Georgia,serif}
.attendee-modal__panel p{margin:0 0 16px;color:#5b4c35;font:400 18px/1.35 'Cormorant Garamond',Georgia,serif}
.attendee-options{display:grid;gap:10px}
.attendee-options button,.attendee-cancel{min-height:46px;border-radius:999px;border:1px solid #b99986;background:#fffdf8;color:#5b4c35;font:500 17px/1 Georgia,serif;cursor:pointer}
.attendee-options button:hover{background:#f8efe7}
.attendee-options button:focus-visible,.attendee-cancel:focus-visible{outline:3px solid #a7a97f;outline-offset:2px}
.attendee-cancel{margin-top:12px;background:linear-gradient(180deg,#f6ede3,#eee0d3)}
@media(max-width:400px){
  .name-input-clean{left:30.9%;width:47.8%;top:57.05%}
  .attendance-clean{left:34.3%;width:6.8%}
  .attendee-chip{top:79.15%}
  .submit-clean{top:82.75%}
}

/* Final pixel-matched overlay corrections (the artwork provides the visible input, circles and button). */
.rsvp-form-overlay{pointer-events:none}
.rsvp-form-overlay .name-input-clean,
.rsvp-form-overlay .attendance-clean,
.rsvp-form-overlay .attendance-clean input,
.rsvp-form-overlay .submit-clean{pointer-events:auto}
.attendance-fieldset-clean{pointer-events:none!important}

/* Keep the printed decorative border, cover only the baked-in placeholder text. */
.name-input-clean{
  left:32.3%;top:68.47%;width:42.2%;height:2.75%;
  padding:0 1.15%;border:0;border-radius:4px;
  background:#f7e9de;color:#49352d;
  font:400 clamp(12px,3.1vw,16px)/1.3 Georgia,serif;
  z-index:7;box-shadow:none;
}
.name-input-clean:focus-visible{background:#f7e9de;outline:2px solid #8c3946;outline-offset:1px}
.name-input-clean:-webkit-autofill,
.name-input-clean:-webkit-autofill:hover,
.name-input-clean:-webkit-autofill:focus{box-shadow:0 0 0 100px #f7e9de inset!important;transition:none}

/* Center the selection within the two circles already printed on the image. */
.attendance-clean{
  left:37.75%;width:5.1%;height:3.1%;
  transform:translate(-50%,-50%);
  z-index:8;
}
.attendance-clean.accept{top:77.58%}
.attendance-clean.decline{top:80.96%}
.attendance-clean .radio-dot{
  left:50%;top:50%;width:45%;height:auto;aspect-ratio:1;
  transform:translate(-50%,-50%) scale(0);
  background:#7c293c;
}
.attendance-clean input:checked + .radio-dot{
  transform:translate(-50%,-50%) scale(1);
}
.submit-clean{left:28.5%;top:83.3%;width:43%;height:5.6%;z-index:8}
/* Avoid adding a badge over the printed invitation graphics. */
.attendee-chip{display:none!important}
@media(max-width:400px){
 .name-input-clean{left:32.3%;top:68.47%;width:42.2%}
 .attendance-clean{left:37.75%;width:5.1%}
 .submit-clean{left:28.5%;top:83.3%;width:43%}
}