*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#e7e9e2;color:#29382e;font-family:Georgia,'Times New Roman',serif;min-height:100svh;background-image:radial-gradient(ellipse at 50% 35%,#f6f5ef,transparent 65%)}main{max-width:1050px;margin:auto;padding:28px 20px}header{text-align:center;margin-bottom:25px}.eyebrow{font:12px/1.5 Arial,sans-serif;letter-spacing:.25em;margin:0 0 10px}h1{font-weight:400;font-size:36px;margin:0 0 10px}h1 i{color:#827448}.date{font:14px Arial,sans-serif;letter-spacing:.1em}.stage{perspective:1800px;display:flex;justify-content:center;padding:10px 0 20px}.book{width:min(800px,100%);aspect-ratio:176/125;position:relative;transform-style:preserve-3d;transform:translateX(0);transition:transform 1.1s cubic-bezier(.25,.7,.2,1);container-type:inline-size}.book.closed{transform:translateX(-25%)}.leaf,.spinner{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d}.leaf{transition:transform 1.15s cubic-bezier(.3,.65,.2,1)}.leaf.flipped{transform:rotateY(-180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#f5f2e9;border-radius:0 8px 8px 0;box-shadow:inset 3px 0 10px #37412a12,1px 1px 2px #39442a30}.face:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#39442a13,transparent 8%,transparent 95%,#fff3)}.face.back{transform:rotateY(180deg);border-radius:8px 0 0 8px}.art{display:block;position:absolute;inset:0;overflow:hidden}.art img{position:absolute;width:200%;height:100%;max-width:none;left:-100%}.left-art img{left:0}.base-left,.base-right{position:absolute;top:0;width:50%;height:100%;background:#f5f2e9;box-shadow:0 20px 35px #34433125;border-radius:8px 0 0 8px;overflow:hidden}.base-right{left:50%;border-radius:0 8px 8px 0}.base-left{left:0}.closed .base-left{visibility:hidden}.closed .leaf{visibility:hidden}.spinner{z-index:20;border:0;padding:0;background:transparent;transform-origin:center;animation:revolve 9s linear infinite;cursor:pointer;border-radius:8px;box-shadow:5px 5px 0 #c7cbbd,0 20px 32px #34433130}.spin-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:8px;overflow:hidden}.spin-back{transform:rotateY(180deg)}.spinner:hover{animation-play-state:paused}.book:not(.closed) .spinner{display:none}.turn-target{position:absolute;right:0;top:0;width:50%;height:100%;z-index:15;background:none;border:0;cursor:pointer;border-radius:0 8px 8px 0}.turn-target:hover{background:linear-gradient(90deg,transparent 90%,#967d3320)}.turn-target:focus-visible{outline:3px solid #967d33;outline-offset:4px}.final{height:100%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6%;background:linear-gradient(145deg,#f8f6ef,#e8ecdf)}.final .eyebrow{font-size:1.45cqw;letter-spacing:.18em}.heart{color:#89763f;font-size:3.3cqw;margin:1cqw 0}h2{font-size:5cqw;line-height:1.14;font-weight:400;margin:1cqw 0 2.2cqw}h2 i{color:#617761}.final p:not(.eyebrow){font-size:2cqw;line-height:1.5;margin:1cqw 0}.rule{width:7cqw;height:1px;background:#a79565;margin:1.8cqw 0}.rsvp-button{background:#344f3e;color:white;text-decoration:none;font:1.8cqw/1.4 Arial,sans-serif;padding:2cqw 2.4cqw;border-radius:3px;margin-top:1.5cqw;position:relative;z-index:2}.rsvp-button:hover{background:#213c2c}.domain{font:1.5cqw Arial,sans-serif;margin-top:1.5cqw}.final .sign{font-style:italic;font-size:3.2cqw!important;margin-top:2.5cqw!important;color:#6f704f}nav{max-width:800px;margin:8px auto;display:flex;align-items:center;justify-content:center;gap:24px}nav button{border:1px solid #344f3e38;background:#f7f7f0aa;border-radius:24px;padding:12px 18px;font:14px Arial,sans-serif;color:#344f3e;cursor:pointer;min-height:44px}nav button:disabled{opacity:.4}#status{font:14px/1.5 Arial,sans-serif;text-align:center;color:#5d6d5f}.hint{text-align:center;color:#778275;font-size:14px;font-style:italic;margin:14px 0 0}[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:3px solid #9a833e;outline-offset:4px}@keyframes revolve{0%{transform:rotateY(0) rotateZ(-3deg)}50%{transform:rotateY(180deg) rotateZ(3deg)}100%{transform:rotateY(360deg) rotateZ(-3deg)}}@media(max-width:600px){main{padding:24px 10px}.stage{padding:26px 0 20px}h1{font-size:30px}.book{width:100%}.book.closed{width:160%;flex-shrink:0;transform:translateX(-25%) scale(.8)}.stage{overflow:clip;overflow-clip-margin:30px}nav{gap:12px}nav button{padding:10px 13px}#status{font-size:13px}.hint{font-size:13px}.book:not(.closed){margin:40px 0}.rsvp-button{min-height:44px;display:flex;align-items:center;font-size:max(1.8cqw,10px);padding:1.5cqw}.final .sign{margin-top:1cqw!important}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(min-width:601px) and (max-height:820px){.book{max-width:650px}main{padding-top:16px}header{margin-bottom:14px}}
/* Keep every stationary page out of the closed-passport view. */
.closed .base-left,.closed .base-right{visibility:hidden}
.spinner{display:block;appearance:none;-webkit-appearance:none;isolation:auto;overflow:visible;box-shadow:none;outline-offset:8px}
.spin-face{background:#aeb8ad;box-shadow:0 10px 28px #34433128}
.spin-front{transform:translateZ(2px)}
.spin-back{transform:rotateY(180deg) translateZ(2px)}
.spinner::before{content:'';position:absolute;top:1%;left:0;width:4px;height:98%;background:#7e8e78;transform:translateX(-2px) rotateY(90deg);transform-origin:center;backface-visibility:visible}
@keyframes revolve{0%,12%{transform:rotateY(0deg)}48%,60%{transform:rotateY(180deg)}96%,100%{transform:rotateY(360deg)}}
@media(hover:hover){.spinner:hover{animation-play-state:paused}}
@media(hover:none){.spinner:hover{animation-play-state:running}}
@media(max-width:600px){.book.closed{width:100%;flex-shrink:1;transform:translateX(-25%)}.book.closed .spinner{transform-origin:center}.stage{overflow:visible;min-height:0}.book:not(.closed){margin:0}.stage{padding:26px 0 20px}}

/* A short, clear website action with room for larger phone text. */
.rsvp-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:94%;max-width:240px;min-height:48px;flex-shrink:0;margin-top:1.5cqw;padding:12px 10px;border:1px solid #b5a370;border-radius:7px;background:linear-gradient(135deg,#3d5948,#2d4436);color:#fffaf0;box-shadow:inset 0 0 0 3px #344f3e,inset 0 0 0 4px #b5a37066,0 4px 12px #29382e14;text-decoration:none;transition:background .2s,box-shadow .2s,transform .2s}
.rsvp-label{font:400 clamp(16px,2.3cqw,18px)/1.4 Georgia,'Times New Roman',serif;letter-spacing:.01em}
@media(hover:hover){.rsvp-button:hover{background:linear-gradient(135deg,#486552,#344f3e);box-shadow:inset 0 0 0 3px #344f3e,inset 0 0 0 4px #c9b982aa,0 6px 16px #29382e24;transform:translateY(-1px)}}
.rsvp-button:focus-visible{outline:3px solid #89763f;outline-offset:4px}
@media(max-width:600px){.rsvp-button{width:100%;min-height:48px;padding:8px 6px;gap:0}.rsvp-label{font-size:16px}}