:root{color-scheme:light;--ink:#111;--paper:#fff;--ease:cubic-bezier(.22,.68,.18,1)}*{box-sizing:border-box}html{background:#fff;scrollbar-gutter:stable}body{margin:0;background:#fff;color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}button{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:1px solid #333;outline-offset:7px}button{cursor:pointer}.opening{position:fixed;inset:0;z-index:5;overflow:hidden;isolation:isolate;transition:visibility 0s 2s}.waves{position:absolute;inset:0;overflow:hidden;pointer-events:none}.wave{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform;transform:translateX(0);transition:transform 1.85s var(--ease);filter:drop-shadow(0 0 1px #00000012)}.wave path{fill:#fff}.wave-right{transition-duration:2s}.opening-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateY(-3vh);transition:opacity .42s ease,transform .6s var(--ease)}.monogram-button{background:transparent;border:0;display:flex;align-items:center;justify-content:center;width:220px;height:230px;padding:24px;transition:transform .4s var(--ease)}.monogram{width:100%;height:100%;fill:#080808;overflow:visible}.monogram-button:hover{transform:scale(1.025)}.monogram-button:active{transform:scale(.98)}.opening-date{font-size:10px;letter-spacing:.32em;font-weight:300;margin:23px 0 0 5px;color:#4a4a4a}.opening-date span{padding:0 6px;color:#888}.opening-hint{font-size:7px;letter-spacing:.23em;color:#888;margin:62px 0 0 3px}.invitation{width:min(92vw,500px);margin:0 auto;padding:22px 0 0;opacity:0;transform:translateY(18px);visibility:hidden;transition:opacity 1.1s .15s ease,transform 1.7s .1s var(--ease)}.page{width:100%;position:relative}.page img{display:block;width:100%;height:auto;object-fit:contain}.page-one{background:#fff}.page-two{box-shadow:0 7px 27px -17px #0004}.next-page{display:flex;flex-direction:column;align-items:center;gap:10px;margin:10px auto 34px;padding:12px 22px;background:none;border:0;color:#7a7a7a}.next-page span{font-size:7px;letter-spacing:.22em}.next-page svg{transition:transform .25s}.next-page:hover svg{transform:translateY(3px)}footer{padding:30px 0 34px;display:flex;justify-content:center}.replay{border:0;background:none;display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:.04em;color:#777;padding:12px 16px;min-height:44px}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fallback{max-width:500px;margin:20px auto;line-height:1.7;padding:16px;font-size:14px}body[data-state=opening] .invitation,body[data-state=open] .invitation{visibility:visible;opacity:1;transform:translateY(0)}body[data-state=opening] .opening-content,body[data-state=open] .opening-content{opacity:0;transform:translateY(-3vh) scale(.96);pointer-events:none}body[data-state=opening] .wave-left,body[data-state=open] .wave-left{transform:translateX(-72%)}body[data-state=opening] .wave-right,body[data-state=open] .wave-right{transform:translateX(72%)}body[data-state=open]{overflow:auto}body[data-state=open] .opening{visibility:hidden;pointer-events:none}body.resetting *,body.resetting .opening{transition:none!important}body.resetting .wave{transform:translateX(0)}
@media(min-width:700px){.invitation{padding-top:36px;width:min(85vw,500px)}.next-page{margin-top:6px;margin-bottom:40px}.opening-hint{margin-top:76px}}
@media(max-width:360px){.invitation{width:94vw;padding-top:12px}.monogram-button{width:192px;height:208px}.opening-date{font-size:9px}.opening-hint{margin-top:48px}}
@media(max-height:500px){.monogram-button{height:160px;width:170px;padding:15px}.opening-date{margin-top:10px}.opening-hint{margin-top:25px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.wave{will-change:auto}}

.rsvp-page{padding:90px 26px 20px;text-align:center;font-family:Georgia,"Times New Roman",serif}.rsvp-eyebrow{font:8px Arial,sans-serif;letter-spacing:.25em;color:#777;margin:0 0 28px}.rsvp-page h2{font-weight:400;font-size:30px;line-height:1.2;margin:0 0 20px}.rsvp-intro{font-size:14px;line-height:1.6;margin:0 0 40px;color:#555}.rsvp-page form{text-align:left}.rsvp-label,.rsvp-page legend{font:10px Arial,sans-serif;letter-spacing:.035em;display:block;margin:24px 0 10px;color:#444}.rsvp-page input:not([type=radio]){width:100%;border:0;border-bottom:1px solid #bdbdbd;background:#fff;border-radius:0;padding:12px 2px;font:16px Georgia,serif;color:#111;min-height:44px}.rsvp-page input:focus-visible{outline:1px solid #333;outline-offset:4px}.rsvp-page fieldset{border:0;padding:0;margin:20px 0 24px;min-width:0}.rsvp-page legend{padding:0;margin-bottom:12px}.rsvp-choice{display:flex;gap:8px}.rsvp-choice label{flex:1;position:relative;cursor:pointer}.rsvp-choice input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.rsvp-choice span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;border:1px solid #ccc;padding:10px 8px;font-size:13px;line-height:1.3}.rsvp-choice input:checked+span{background:#111;color:white;border-color:#111}.rsvp-choice input:focus-visible+span{outline:1px solid #111;outline-offset:4px}.rsvp-help{font:10px/1.5 Arial,sans-serif;color:#777;margin:8px 0 25px}.rsvp-send{background:#111;color:#fff;border:1px solid #111;width:100%;padding:16px;font:11px Arial,sans-serif;letter-spacing:.08em;min-height:48px}.rsvp-send:disabled{opacity:.6;cursor:default}.rsvp-status{font:14px/1.6 Georgia,serif;min-height:1.6em;color:#333;margin:20px 0}.rsvp-privacy{font:9px/1.7 Arial,sans-serif;color:#888;margin-top:22px}.rsvp-signature{font-size:16px;font-style:italic;margin:42px 0 0}.rsvp-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}@media(max-width:360px){.rsvp-page{padding:65px 18px 12px}.rsvp-page h2{font-size:26px}.rsvp-choice span{font-size:12px}}

/* Validated invitation pages: semantic continuation controls only. */
.intro-next{position:absolute;left:30%;right:30%;bottom:2%;height:11%;min-height:44px;background:transparent;border:0;padding:0;cursor:pointer}.intro-next:focus-visible{outline:1px solid #222;outline-offset:2px}
.venue-caption{text-align:center;font:12px Georgia,serif;letter-spacing:.06em;margin:12px 0 28px}
.next-page.continuation{min-height:66px;margin:14px auto 34px;gap:8px;padding:10px 22px;color:#333}.next-page.continuation span{font:12px Georgia,serif;letter-spacing:.06em}#page-one-title:focus,#page-two-title:focus,#rsvp-heading:focus{outline:none}

/* The actual fibrous Villa paper continues across every revealed page. */
.paper-texture{position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:100%;z-index:-1;pointer-events:none;visibility:hidden;background:#fff}
body[data-state=opening] .paper-texture,body[data-state=open] .paper-texture{visibility:visible}
.invitation{position:relative;z-index:1;isolation:isolate;background:transparent}
.invitation .page,.invitation .rsvp-page,.invitation footer{background:transparent}
.invitation .page img{mix-blend-mode:darken}
.invitation .page-two{box-shadow:none}
.invitation .rsvp-page input:not([type=radio]){background:transparent}

/* Fine Roman capitals with continuous, readable strokes at phone sizes. */
@font-face{font-family:"Invitation Roman";src:url("assets/fonts/CormorantGaramond.ttf") format("truetype");font-style:normal;font-weight:300 700;font-display:swap}
.rsvp-page,.rsvp-page h2,.rsvp-page p,.rsvp-page label,.rsvp-page legend,.rsvp-page input,.rsvp-page button,.rsvp-page span,.invitation footer .replay{font-family:"Invitation Roman",Georgia,serif;font-style:normal;font-weight:400;font-optical-sizing:auto;font-variation-settings:normal;letter-spacing:.065em;text-transform:uppercase}
.rsvp-page h2{font-size:27px;line-height:1.35;letter-spacing:.08em}
.rsvp-intro{font-size:14px;line-height:1.7;letter-spacing:.055em}
.rsvp-eyebrow{font-size:11px;letter-spacing:.18em}
.rsvp-label,.rsvp-page legend{font-size:13px;letter-spacing:.07em;color:#222}
.rsvp-page input:not([type=radio]){font-family:"Invitation Roman",Georgia,serif;font-style:normal;font-size:18px;line-height:1.5;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.rsvp-choice span{font-size:13px;letter-spacing:.035em;line-height:1.45}
.rsvp-send{font-size:13px;letter-spacing:.10em}
.rsvp-help,.rsvp-privacy{font-size:11px;line-height:1.75;letter-spacing:.035em;color:#444}
.rsvp-status{font-size:14px;line-height:1.7;letter-spacing:.05em}
.rsvp-signature-exact{display:block;width:min(220px,75%);height:auto;margin:42px auto 0;overflow:hidden;mix-blend-mode:darken}
.invitation footer .replay{font-size:11px;letter-spacing:.08em}
@media(max-width:360px){.rsvp-page h2{font-size:24px}.rsvp-choice span{font-size:12px}.rsvp-label,.rsvp-page legend{font-size:12px}}

/* A quieter, smaller RSVP scale; input text stays at least 16px on phones. */
.rsvp-page h2{font-size:23px}
.rsvp-intro{font-size:12px}
.rsvp-eyebrow{font-size:9px}
.rsvp-label,.rsvp-page legend{font-size:11px}
.rsvp-page input:not([type=radio]){font-size:16px}
.rsvp-choice span,.rsvp-send{font-size:11px}
.rsvp-help,.rsvp-privacy{font-size:10px}
.rsvp-status{font-size:12px}
.rsvp-signature-exact{width:min(175px,65%)}
.invitation footer .replay{font-size:10px}
@media(max-width:360px){.rsvp-page h2{font-size:21px}.rsvp-choice span{font-size:10px}.rsvp-label,.rsvp-page legend{font-size:10px}}

/* Clip only the old printed navigation, keeping the validated image untouched. */
.page-intro > img{clip-path:inset(0 0 13% 0)}
.next-page.continuation{width:150px;height:66px;min-height:66px;margin:14px auto 34px;gap:8px;padding:10px 22px;position:relative;left:auto;right:auto;bottom:auto}
.next-page.continuation span{font:12px Georgia,serif;letter-spacing:.06em}
.next-page.continuation svg{width:12px;height:20px;flex:none}
/* Paper can bleed to screen edges without creating horizontal scrolling. */
body{overflow-x:clip}
.rsvp-page{min-height:100svh}
html,body[data-state=open]{overflow-x:clip}

/* Use the exact validated opening monogram, not separately typeset initials. */
.program-artwork{position:relative}
.program-artwork>img{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,36% 8%,36% 14.5%,64% 14.5%,64% 8%,36% 8%)}
.program-monogram{position:absolute;left:50%;top:1%;width:23%;height:auto;transform:translateX(-50%);fill:#080808;overflow:visible}
/* At the raised Villa entry point, keep the next page below the viewport. */
#page-cover{display:flex;flex-direction:column;min-height:calc(100svh + var(--cover-entry-offset, 0px))}
#page-cover>img{flex:none}
#page-cover>.continuation{margin-top:auto;flex:none}

/* Optional private note, matching the invitation typography. */
.rsvp-page textarea{display:block;width:100%;min-height:90px;resize:vertical;border:0;border-bottom:1px solid #bdbdbd;border-radius:0;background:transparent;padding:10px 2px;font-family:"Invitation Roman",Georgia,serif;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:.025em;color:#111}
.rsvp-page textarea::placeholder{color:#777;opacity:1}
.rsvp-page textarea:focus-visible{outline:1px solid #333;outline-offset:4px}

/* Fluid full-screen cards with an individual continuation at the same thumb height. */
.invitation{padding:0!important;transition:opacity .35s ease,transform 1s var(--ease)}
.invitation>.page{position:relative;min-height:100svh;padding:22px 0 110px}
.invitation>.page-one{display:block;min-height:100svh;padding-top:0;overflow:hidden}
#page-cover>img{margin-top:calc(-1 * var(--cover-crop, 0px))}
.invitation>.page>.continuation{position:absolute;left:50%;right:auto;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);width:150px;height:66px;min-height:66px;margin:0;padding:10px 22px;display:flex;justify-content:center;gap:8px}
.next-page.continuation:hover svg{transform:translateY(3px)}
@media(max-width:360px){.invitation>.page{padding-top:12px;padding-bottom:100px}.invitation>.page-one{padding-top:0}}

/* Compact RSVP: preserve the paper, typeface and full copy; spend space on usable fields. */
.rsvp-page{min-height:calc(100svh - 44px);padding:clamp(14px,3svh,28px) 24px 6px;display:flex;flex-direction:column;align-items:stretch}
.rsvp-page h2{font-size:22px;font-weight:700;line-height:1.15;letter-spacing:.045em;margin:0 0 7px}
.rsvp-intro{font-size:12px;line-height:1.35;letter-spacing:.035em;margin:0 0 13px}
.rsvp-page form{display:grid;grid-template-columns:minmax(0,1fr);row-gap:6px;min-width:0}
.rsvp-label,.rsvp-page legend{font-size:11px;line-height:1.2;letter-spacing:.035em;margin:0}
.rsvp-label strong,.rsvp-page legend strong{font-weight:700}
.rsvp-page input:not([type=radio]){height:44px;min-height:44px;padding:7px 2px;font-size:16px;line-height:1.25;letter-spacing:.035em;min-width:0}
.rsvp-page fieldset{margin:2px 0;padding:0;min-width:0}
.rsvp-page legend{margin:0 0 4px;padding:0}
.rsvp-choice{gap:7px}
.rsvp-choice span{min-height:44px;padding:7px 5px;font-size:11px;line-height:1.2;letter-spacing:.025em}
.rsvp-page textarea{height:48px;min-height:44px;padding:3px 2px;font-size:16px;line-height:1.25;letter-spacing:.015em;min-width:0}
.rsvp-help{font-size:10px;line-height:1.25;letter-spacing:.02em;margin:0 0 2px}
.rsvp-send{height:44px;min-height:44px;padding:8px;font-size:11px;line-height:1.2;letter-spacing:.07em;margin:3px 0 0}
.rsvp-status{min-height:0;font-size:12px;line-height:1.35;margin:3px 0}
.rsvp-status:empty{display:none}
.rsvp-privacy{font-size:10px;line-height:1.25;letter-spacing:.02em;margin:3px 0 0}
.rsvp-signature-exact{flex:none;width:124px;max-width:60%;height:auto;margin:8px auto 0}
.invitation>.rsvp-page+footer{padding:0;min-height:44px;align-items:center}
.invitation>.rsvp-page+footer .replay{min-height:44px;font-size:10px;padding:8px 12px}
@media(max-width:360px){
  .rsvp-page{padding-inline:14px}
  .rsvp-page h2{font-size:21px;letter-spacing:.025em}
  .rsvp-label,.rsvp-page legend{font-size:10px}
  .rsvp-choice span{font-size:10px}
}
/* Short phones: labels share their field rows instead of shrinking input text or tap targets. */
@media(max-height:620px){
  .rsvp-page{padding:6px 12px 1px;min-height:calc(100svh - 44px)}
  .rsvp-page h2{font-size:20px;line-height:1.15;letter-spacing:.025em;margin-bottom:3px}
  .rsvp-intro{font-size:12px;line-height:1.1;letter-spacing:0;margin-bottom:4px}
  .rsvp-page form{grid-template-columns:minmax(96px,40%) minmax(0,1fr);column-gap:8px;row-gap:2px}
  .rsvp-page form>*{grid-column:1/-1}
  .rsvp-page .rsvp-label[for=guest-name],.rsvp-page .rsvp-label[for=guest-count],.rsvp-page .rsvp-label[for=guest-comment]{grid-column:1;align-self:center}
  .rsvp-page #guest-name,.rsvp-page #guest-count,.rsvp-page #guest-comment{grid-column:2;align-self:center}
  .rsvp-label,.rsvp-page legend{font-size:10px;line-height:1.1;letter-spacing:.015em}
  .rsvp-page fieldset{margin:0}
  .rsvp-page legend{margin-bottom:3px}
  .rsvp-choice span{font-size:10px;line-height:1.15;min-height:44px;padding:5px 3px}
  .rsvp-page input:not([type=radio]){height:44px;min-height:44px;padding:5px 2px;font-size:16px;letter-spacing:.01em}
  .rsvp-page textarea{height:44px;min-height:44px;font-size:16px;padding:1px 2px;line-height:1.25}
  .rsvp-help{font-size:10px;line-height:1.1;letter-spacing:.01em;margin:0}
  .rsvp-send{margin:0;height:44px;min-height:44px;padding:6px;font-size:11px}
  .rsvp-privacy{font-size:10px;line-height:1.05;letter-spacing:.01em;margin:1px 0 0}
  .rsvp-signature-exact{width:110px;margin:2px auto 0}
}

/* Keep each question together, with breathing room distributed between question blocks. */
.rsvp-page form{display:flex;flex-direction:column;justify-content:space-between;flex:1;gap:clamp(12px,2.4svh,21px)}
.rsvp-page .rsvp-field,.rsvp-page fieldset,.rsvp-send{flex:none}
.rsvp-page .rsvp-label,.rsvp-page legend{margin:0 0 6px}
.rsvp-page .rsvp-help{margin:6px 0 0}
.rsvp-page fieldset{margin:0}
.rsvp-page .rsvp-intro{margin-bottom:22px}
.rsvp-page .rsvp-signature-exact{margin-top:18px;margin-bottom:4px}
.rsvp-page .rsvp-status:empty{display:none}
@media(max-height:620px){
  .rsvp-page{padding-top:8px;padding-bottom:2px}
  .rsvp-page form{display:flex;gap:9px}
  .rsvp-page .rsvp-label,.rsvp-page legend{margin-bottom:4px}
  .rsvp-page .rsvp-help{margin-top:4px}
  .rsvp-page .rsvp-intro{margin-bottom:10px}
  .rsvp-page .rsvp-signature-exact{margin-top:10px;margin-bottom:0}
}

.intro-photo-artwork{display:block;width:100%;height:auto}

/* One shared fibrous paper stock; feather only blank card margins into it. */
#page-cover>img{mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(to bottom,#000 0,#000 84%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(to bottom,#000 0,#000 84%,transparent 100%);-webkit-mask-composite:source-in}

/* Match the newly requested ivory paper even on the opening curtains. */
:root{--paper:#f0ede7}html,body{background:#f0ede7}.wave-left path{fill:url(#door-paper-left)}.wave-right path{fill:url(#door-paper-right)}

html{overflow-anchor:none}
/* Keep the programme's white raster paper transparent during its fade/slide. */
.program-artwork{mix-blend-mode:darken}.invitation .program-artwork>img{mix-blend-mode:normal}

/* Full-screen natural sections with a deliberate, whole-page 950 ms slide. */
.invitation>.page{min-height:100dvh;scroll-margin-top:0}
.invitation>.rsvp-page{min-height:calc(100dvh - 44px)}
body.curtains-opening .opening{visibility:visible;pointer-events:none;transition:none}
.wave,.wave-right{transition:none;filter:drop-shadow(0 0 7px #00000024)}
body[data-state=open] .opening{transition:none}
body[data-state=open] .invitation{transition:none}
@media(prefers-reduced-motion:reduce){.wave{filter:none}}
/* Center the unchanged intro artwork in the space above its own continuation. */
.invitation>.page-intro{display:flex;flex-direction:column;justify-content:center}

/* Two approved, separate introductory pages, with original image bytes. */
.invitation>.page-photo{display:flex;flex-direction:column;justify-content:center}
.separate-intro-artwork{display:block;width:100%;height:auto;flex:none}
#photo-title:focus{outline:none}

/* Small, pale architectural watermark only in the gap between parents and date. */
.program-watermark{position:absolute;left:50%;top:36.2%;width:13.7%;height:auto;transform:translateX(-50%);opacity:.32;mix-blend-mode:darken;pointer-events:none}

/* Programme spacing only: preserve all printed glyph sizes, compact individual rows. */
.program-layout{display:block;width:100%;height:auto}
.program-watermark{top:37.6%;width:29.7%;opacity:.32}

/* Move the Villa and its lettering as one unchanged group, leaving the CTA fixed in its section. */
#page-cover>img{transform:translateY(4.1%)}

/* Give the larger programme watermark more breathing room above and below. */
.program-watermark{top:39.95%}

/* Keep each card's ink inside its own full-screen section. */
.invitation>.page{overflow:clip}
.rsvp-page{padding-top:calc(clamp(14px,3svh,28px) + 18px)}
@media(max-height:620px){.rsvp-page{padding-top:24px}.rsvp-page form{gap:6px}.rsvp-page .rsvp-signature-exact{margin-top:6px}}

/* Structural full-screen stage: inactive slides cannot paint into the viewport. */
html,body,body[data-state=open]{height:100%;overflow:hidden;overscroll-behavior:none}
.invitation{position:fixed;top:var(--viewport-offset,0px);left:0;right:0;height:var(--page-height,100dvh);max-height:var(--page-height,100dvh);overflow:hidden;overflow:clip;isolation:isolate}
.invitation>.slide{position:absolute!important;inset:0;width:100%;height:100%;min-height:0!important;max-height:100%;margin:0;visibility:hidden;pointer-events:none;overflow:hidden;contain:paint;touch-action:pan-x pinch-zoom;will-change:transform}
.invitation>.slide.is-active,.invitation>.slide.is-transitioning{visibility:visible}
.invitation>.slide.is-active{pointer-events:auto}
.invitation>.reply-slide{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.reply-slide>.rsvp-page{min-height:calc(var(--page-height,100dvh) - 44px)}
.reply-slide>footer{padding:0;min-height:44px;align-items:center}
.reply-slide>footer .replay{min-height:44px;font-size:10px;padding:8px 12px}
.opening{top:var(--viewport-offset,0px);bottom:auto;height:var(--page-height,100dvh)}

/* Retain the exact paper beneath darkened ink inside each isolated slide. */
.outside-paper{position:fixed;inset:0;width:100vw;height:100dvh;z-index:0;pointer-events:none}
.slide-paper{position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:100%;z-index:-1;pointer-events:none}
/* The reply can scroll for a keyboard or validation message without stealing content width. */
.reply-slide{scrollbar-width:none}.reply-slide::-webkit-scrollbar{display:none}

/* The same larger architectural watermark in both editions. */
.program-watermark{width:38.3%}