
:root{--paper:#faf6ee;--olive:#555b36;--ink:#34382a;--muted:#77745f;--clay:#a3634a;--line:#dcd7c7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 25% 20%,#fffdf8,transparent 60%),#f1ece2;font-family:Georgia,'Times New Roman',serif}button,input,textarea,select{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b9805c;outline-offset:5px}button{cursor:pointer}button:disabled{cursor:default}a{color:var(--olive)}.brand{text-align:center;padding:30px 20px 0}.brand a{text-decoration:none;font-size:30px;letter-spacing:.04em}.eyebrow{font:10px/1.7 Arial,sans-serif;letter-spacing:.25em;text-transform:uppercase}.brand p{margin:7px 0;color:var(--muted)}.preview-tag{position:fixed;top:15px;left:15px;z-index:20;border:1px solid var(--line);background:#faf6eef0;border-radius:20px;padding:8px 12px;font:10px Arial,sans-serif;letter-spacing:.12em}.edit-toggle{position:fixed;top:15px;right:15px;z-index:20;background:var(--olive);color:white;border:0;border-radius:20px;padding:10px 15px;font:12px Arial,sans-serif}.scene{height:clamp(640px,165vw,820px);max-width:650px;margin:auto;position:relative;perspective:1400px;transition:height .6s}.envelope{position:absolute;width:min(84vw,450px);aspect-ratio:900/620;bottom:100px;left:50%;transform:translateX(-50%);filter:drop-shadow(0 16px 20px #4b402322)}.back{position:absolute;inset:0;background:linear-gradient(135deg,#e8e1d1,#f7f1e4);border:1px solid #e2d9c8;border-radius:3px;z-index:1}.lining{position:absolute;inset:3%;background:repeating-linear-gradient(45deg,#73805612 0 2px,transparent 2px 12px);clip-path:polygon(0 0,100% 0,50% 60%);z-index:2}.flap{position:absolute;inset:0;background:linear-gradient(165deg,#fffaf0,#e8dfcc);clip-path:polygon(0 0,100% 0,50% 64%);transform-origin:center top;transition:transform .85s cubic-bezier(.4,0,.2,1);z-index:6;backface-visibility:visible}.flap:after,.front:after,.card:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.28' filter='url(%23n)'/%3E%3C/svg%3E")}.front{position:absolute;inset:0;z-index:5;background:linear-gradient(22deg,#f5eddd,#fffaf0);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);border-radius:3px}.front .twig{width:37%;position:absolute;bottom:9%;left:3%;transform:rotate(-22deg);opacity:.7}.front .twig.right{left:auto;right:1%;bottom:7%;transform:rotate(160deg)}.seal{position:absolute;z-index:7;width:16.66%;aspect-ratio:1;left:41.67%;top:43%;border-radius:48% 52% 46% 54%;background:radial-gradient(circle at 33% 28%,#939469,#535a31 65%,#3d4527);border:3px solid #7b8052;box-shadow:0 3px 5px #4b422744,inset 0 0 0 3px #424a29,inset 0 0 0 5px #92936b;color:#d4cf9e;display:flex;align-items:center;justify-content:center;font-size:clamp(16px,4vw,27px);transition:opacity .25s,transform .4s}.open-trigger{position:absolute;inset:0;z-index:9;border:0;background:transparent;border-radius:5px}.open-trigger:focus-visible{outline-offset:10px}.card{position:absolute;width:86.666%;aspect-ratio:780/1100;left:6.667%;bottom:4%;z-index:3;background:var(--paper);border:1px solid #e3d9c6;box-shadow:0 4px 15px #554b3020;text-align:center;padding:9% 6% 0;display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(0);transition:transform 1.15s cubic-bezier(.22,.61,.36,1) .65s,opacity .2s .65s;overflow:hidden}.card .eyebrow{font-size:clamp(7px,1.8vw,10px);letter-spacing:.19em}.names{font-size:clamp(34px,8vw,56px);line-height:1.02;font-weight:normal;margin:6% 0}.amp{font-style:italic;font-size:.65em;display:block;line-height:1.3;color:#818263}.card .date{font-size:clamp(11px,2.7vw,16px);letter-spacing:.1em;margin:6% 0 3%}.card .location{font-size:clamp(8px,2vw,11px);letter-spacing:.17em;text-transform:uppercase;margin:0 0 5%}.art{width:116%;margin:auto -8% 0;display:block;max-height:42%;object-fit:cover;object-position:center}.scene.open .flap{transform:rotateX(180deg);z-index:2}.scene.open .seal{opacity:0;transform:translateY(15px) scale(.85)}.scene.open .card{opacity:1;transform:translateY(-30%)}.scene.open .open-trigger{display:none}.hint{position:absolute;bottom:40px;text-align:center;width:100%;font-style:italic;font-size:18px;color:var(--olive)}.hint small{display:block;font:10px Arial,sans-serif;margin-top:10px;letter-spacing:.1em;color:var(--muted)}.scene.open .hint{bottom:25px}.small-btn{background:none;border:0;border-bottom:1px solid #b4b398;color:var(--olive);padding:8px;font-size:13px}.details{max-width:920px;margin:0 auto;padding:0 24px 55px}.details[hidden]{display:none}.intro{text-align:center;padding:55px 0 40px}.intro h1{font-weight:normal;font-size:clamp(32px,6vw,52px);margin:10px 0 20px}.intro p{max-width:490px;margin:0 auto;color:var(--muted);line-height:1.8}.divider{width:60px;border:0;border-top:1px solid #a4a486;margin:25px auto}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.panel{background:#faf7f0b0;border:1px solid var(--line);padding:35px;text-align:center;border-radius:2px}.panel h2{font-size:28px;font-weight:normal;margin:15px 0}.panel p{font-size:15px;line-height:1.8;color:var(--muted)}.button{display:inline-block;background:var(--olive);color:#fffdf6;border:1px solid var(--olive);text-decoration:none;padding:13px 23px;border-radius:2px;font:12px Arial,sans-serif;letter-spacing:.04em}.button.secondary{background:transparent;color:var(--olive)}.schedule{margin:35px auto;max-width:660px}.schedule h2,.rsvp h2{text-align:center;font-weight:normal;font-size:34px}.moment{display:grid;grid-template-columns:90px 1fr;gap:25px;border-bottom:1px solid var(--line);padding:20px 5px}.moment time{color:var(--clay);font-style:italic}.moment strong{font-weight:normal;font-size:20px}.moment p{font-size:14px;color:var(--muted);line-height:1.6;margin:7px 0}.rsvp{max-width:620px;margin:50px auto;padding:35px;background:#faf7f0;border:1px solid var(--line)}.rsvp>p{text-align:center;font-size:14px;color:var(--muted);line-height:1.6}.rsvp label,.editor label{display:block;font:12px Arial,sans-serif;margin:18px 0 7px;color:var(--olive)}input,select,textarea{width:100%;padding:12px;border:1px solid #d7d2c3;border-radius:2px;color:var(--ink);background:#fffdf8;font:15px Arial,sans-serif}textarea{resize:vertical}.rsvp .button{width:100%;margin-top:20px}.status{text-align:center;line-height:1.7;color:var(--olive);font-size:15px}.footer{text-align:center;padding:25px;font:11px Arial,sans-serif;color:var(--muted);letter-spacing:.07em}.editor{position:fixed;right:0;top:0;bottom:0;width:min(390px,100%);background:#fffdf8;box-shadow:-15px 0 80px #24241735;z-index:30;padding:30px;overflow-y:auto}.editor[hidden]{display:none}.editor h2{font-size:29px;font-weight:normal;margin:10px 0}.editor p{font:13px/1.7 Arial,sans-serif;color:var(--muted)}.editor header{display:flex;align-items:center;justify-content:space-between}.editor .close{border:0;background:none;font-size:28px;color:var(--olive)}.editor .button{width:100%;margin-top:20px}.overlay{position:fixed;inset:0;background:#292c1d55;z-index:29}.overlay[hidden]{display:none}.twig{color:#78845b}.noscript{padding:30px;text-align:center}.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:25px}@media(max-width:600px){.brand{padding-top:65px}.grid{grid-template-columns:1fr}.panel{padding:26px}.rsvp{padding:24px}.preview-tag{font-size:9px}.scene{margin-top:-15px}.moment{gap:10px;grid-template-columns:75px 1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

.scene.instant *{transition:none!important}
[data-vm-slot="rsvp"]{text-align:center;line-height:1.8}

/* Native CSS fallback: JSON-driven host runtime can instead set .scene.open. */
.vm-toggle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.vm-toggle:focus-visible ~ .scene .envelope{outline:3px solid #b9805c;outline-offset:10px}
.vm-toggle:checked ~ .scene .flap{transform:rotateX(180deg);z-index:2}
.vm-toggle:checked ~ .scene .seal{opacity:0;transform:translateY(15px) scale(.85)}
.vm-toggle:checked ~ .scene .card{opacity:1;transform:translateY(-30%)}
.vm-toggle:checked ~ .scene .open-trigger{display:none}
.vm-toggle:not(:checked) ~ .scene .card{visibility:hidden}
.vm-toggle:checked ~ .scene .card{visibility:visible}
.vm-toggle:not(:checked) ~ .details{display:none}
.vm-toggle:checked ~ .details{display:block}
.opened-hint{display:none}
.vm-toggle:checked ~ .scene .closed-hint{display:none}
.vm-toggle:checked ~ .scene .opened-hint{display:inline}
.open-trigger,.opened-hint label{cursor:pointer}

.closed-envelope-art{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;opacity:1;transition:opacity .25s}
.vm-toggle:checked ~ .scene .closed-envelope-art,.scene.open .closed-envelope-art{opacity:0}
