/* RSVP page: the invitation's paper, olive and wood, with a card that walks the guest through two short steps. */
.rsvp-main{position:relative;isolation:isolate;overflow-x:clip;max-width:1180px;margin:0 auto;padding:72px 45px 96px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:70px;align-items:center}
.rsvp-main::before,.rsvp-main::after{content:'';position:absolute;z-index:-1;pointer-events:none;width:clamp(160px,24vw,300px);height:100%;max-height:620px;background:url('/enredadera-oliva.png') left center/contain no-repeat;opacity:.22;top:20px;left:0}
.rsvp-main::after{left:auto;right:0;top:auto;bottom:0;transform:scaleX(-1);opacity:.18}
.rsvp-intro{text-align:center}
.rsvp-intro h1{font:italic 400 clamp(64px,6.4vw,88px)/.95 var(--serif);letter-spacing:-2.5px;margin:20px 0 24px}
.rsvp-intro h1 em{color:var(--wood)}
.rsvp-intro p{font-size:20px;line-height:1.55;color:var(--muted);max-width:420px;margin:0 auto}
.rsvp-intro .wedding-car{width:250px;margin:26px auto 16px}
.rsvp-when{display:block;font-size:12px;font-weight:600;letter-spacing:2.5px;line-height:2;color:var(--wood)}
.rsvp-card{padding:58px 46px 52px;box-shadow:0 18px 45px #59462c12}
.rsvp-card .eyebrow{font-size:12px;font-weight:600;margin-bottom:12px}
.rsvp-card h2{font-size:50px;margin:0 0 18px;overflow-wrap:anywhere}
.rsvp-card h2:focus{outline:none}
.rsvp-card h2 em{font-style:italic}
.rsvp-card .card-rule{margin-bottom:18px}
.rsvp-card p{margin-bottom:0}
.step-note{font-size:18px;line-height:1.5;color:var(--muted)}
.rsvp-step.step-in{animation:stepIn .45s ease both}
@keyframes stepIn{from{opacity:0;transform:translateY(12px)}}
.field{text-align:left;margin-top:28px}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--wood);margin-bottom:2px}
.field input{display:block;width:100%;font:22px/1.4 var(--serif);color:var(--ink);background:transparent;border:0;border-bottom:1px solid #bfa98f;border-radius:0;padding:10px 2px;transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:#a8a596;font-style:italic}
.field input:focus{outline:none;border-bottom-color:var(--olive);box-shadow:0 1px 0 var(--olive)}
.field input[aria-invalid="true"]{border-bottom-color:#a5533f;box-shadow:0 1px 0 #a5533f}
.field-hint{font-size:16px;line-height:1.45;color:var(--muted);margin-top:8px}
.field-error,.form-error{font-size:17px;line-height:1.45;color:#9a4632;margin-top:8px;text-align:left}
.form-error{margin-top:22px;padding:12px 14px;background:#f6ebe4;border:1px solid #e2c6b8}
.rsvp-card .button{width:100%;margin-top:34px;font-size:18px;font-weight:500;letter-spacing:.5px}
.link-button{background:none;border:0;padding:0 0 2px;color:var(--wood);border-bottom:1px solid var(--wood);font-size:inherit;line-height:1.2}
.link-button:hover{color:var(--deep);border-color:var(--deep)}
.companion-toggle{position:relative;display:flex;gap:16px;align-items:flex-start;text-align:left;margin-top:30px;padding:18px;border:1px solid #d2c8b7;background:var(--paper);cursor:pointer;transition:border-color .2s,background .2s}
.companion-toggle:hover{border-color:var(--wood)}
.companion-toggle:has(input:checked){border-color:var(--olive);background:#eceee3}
.companion-toggle input{position:absolute;opacity:0;width:24px;height:24px;margin:0;top:21px;left:18px}
.toggle-box{flex:0 0 24px;height:24px;margin-top:3px;display:grid;place-items:center;border:1px solid var(--wood);background:#fff;transition:background .2s,border-color .2s}
.companion-toggle input:checked+.toggle-box{background:var(--olive);border-color:var(--olive)}
.companion-toggle input:checked+.toggle-box::after{content:'';width:6px;height:12px;border:solid var(--paper);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.companion-toggle input:focus-visible+.toggle-box{outline:3px solid var(--wood);outline-offset:3px}
.companion-toggle strong{display:block;font-size:21px;font-weight:500;line-height:1.3}
.companion-toggle small{display:block;font-size:16px;line-height:1.4;color:var(--muted);margin-top:3px}
#companionField{margin-top:22px}
.confirmed-note{font-size:17px;line-height:1.45;color:var(--deep);margin-top:16px;padding:12px 14px;background:#eceee3;border:1px solid #c4c8b4}
.done-mark{display:grid;place-items:center;width:74px;height:74px;margin:0 auto 26px;border-radius:50%;background:var(--olive);color:var(--paper);box-shadow:0 0 0 6px #f3f1e8,0 0 0 7px #c4c8b4}
.done-mark svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#doneMessage{font-size:20px;line-height:1.55}
.return-note{font-size:16px;color:var(--muted);margin-top:18px}
/* On narrow screens the form comes right after the heading; the car closes the page. */
@media(max-width:900px){.rsvp-main{grid-template-columns:1fr;max-width:620px;gap:40px;padding:52px 23px 72px}
.rsvp-intro{display:contents}
.rsvp-heading{text-align:center}
.rsvp-card{order:1}
.rsvp-keepsake{order:2;text-align:center}
.rsvp-intro .wedding-car{width:200px;margin-top:0}
}
@media(max-width:600px){.rsvp-main{padding:40px 16px 64px;gap:34px}
.rsvp-main::before,.rsvp-main::after{width:150px;max-height:420px;opacity:.17}
.rsvp-intro h1{font-size:64px}
.rsvp-intro p{font-size:19px}
.rsvp-intro .wedding-car{width:170px;margin:0 auto 12px}
.rsvp-when{font-size:11px}
.rsvp-card{padding:46px 22px 40px}
.rsvp-card h2{font-size:40px}
.field input{font-size:21px}
.companion-toggle{padding:16px 14px;gap:13px}
.companion-toggle input{left:14px;top:19px}
.companion-toggle strong{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.rsvp-step.step-in{animation:none}}