*{box-sizing:border-box} :root{color-scheme:dark;--gold:#d8b774;--wine:#651d32;--paper:#f7f1e5}body{margin:0;background:radial-gradient(ellipse at 50% 25%,#56172a 0, #290b15 62%,#19070d 100%);color:var(--gold);font-family:Georgia,'Times New Roman',serif;min-height:100svh}body:before{content:"";position:fixed;inset:0;z-index:-1;opacity:.2;background:repeating-linear-gradient(93deg,transparent 0,#000 5%,transparent 10%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #eacb8a;outline-offset:7px}header{padding:28px 5%;display:flex;align-items:center;justify-content:space-between;gap:18px}header a{color:#f1dfba;font-size:25px;text-decoration:none;font-style:italic}header a span{display:block;font:8px Arial,sans-serif;letter-spacing:3px;margin-top:9px;font-style:normal}#sound{background:none;color:#dfcda9;border:1px solid #a986534d;border-radius:30px;padding:11px 16px;font:11px Arial,sans-serif}main{max-width:1100px;margin:auto}#arrival{text-align:center;padding:18px 20px 0;transition:opacity .7s,transform 1.1s} .eyebrow{font:10px Arial,sans-serif;letter-spacing:3.5px}.scene{position:relative;width:min(900px,100%);aspect-ratio:3/2;margin:22px auto 0;filter:drop-shadow(0 20px 40px #0006);transition:transform 1s,opacity .9s}.scene img{width:100%;height:100%;object-fit:cover;border-radius:3px}.envelope-title{position:absolute;left:27%;right:27%;top:28%;text-align:center;text-transform:uppercase;font-size:clamp(15px,3.3vw,32px);line-height:1.4;letter-spacing:2px;color:#f5df9d;text-shadow:0 1px 2px #330b19}.envelope-title em{font-size:.52em;letter-spacing:3px;font-style:normal}#seal{position:absolute;left:43.5%;top:50.3%;width:13%;aspect-ratio:1;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#ffe1a2,#c18a33 65%,#784714);box-shadow:inset 0 0 0 4px #efcc79,inset 0 0 0 7px #b8853e,0 4px 12px #0007;color:#8c5821;transition:transform .5s,opacity .6s}#seal span{display:grid;place-items:center;height:100%;font-size:clamp(20px,5vw,49px);font-style:italic;border-radius:50%;text-shadow:1px 1px #ffe6ab}#seal:hover{transform:scale(1.06)}.hint{font-size:17px;margin:24px 0}.hint small{display:block;font:10px Arial,sans-serif;letter-spacing:1.5px;color:#bc9e90;margin-top:10px}.opening #seal{transform:translateY(55px) rotate(18deg);opacity:0}.opening .scene{transform:translateY(70px) scale(.94);opacity:0}.opening .hint,.opening>.eyebrow{opacity:0}#reveal{padding:28px 20px 30px;text-align:center}#letter{position:relative;background:var(--paper);color:#5d2432;max-width:660px;margin:auto;padding:42px 65px 27px;box-shadow:0 30px 80px #0007;outline:none;animation:emerge 1.2s cubic-bezier(.2,.7,.2,1) both;background-image:repeating-linear-gradient(20deg,#a99b7806 0 1px,transparent 1px 4px)}#letter:before{content:"";position:absolute;inset:15px;border:1px solid #a9844b60;pointer-events:none}.ornament{font-size:28px;font-style:italic;letter-spacing:-5px;color:#936b3c;margin-bottom:23px}.ornament span{font-size:18px;padding:0 7px}#letter>.eyebrow{font-size:19px;letter-spacing:4px;margin-bottom:25px}h1{font-weight:400;font-size:23px;line-height:1.5;margin:0}h1 em{font-weight:400}.rule{display:flex;align-items:center;gap:15px;justify-content:center;color:#b58f55;margin:20px 0}.rule:before,.rule:after{content:"";width:55px;height:1px;background:#b58f5555}.prose{font-size:15px;line-height:1.7;color:#64564d}.prose p{margin:0 0 15px}.event{margin:27px 0 22px}h2{font:17px Arial,sans-serif;letter-spacing:5px;margin:0 0 9px}.event>p{font:8px Arial,sans-serif;letter-spacing:3px;margin:0}.date{border-top:1px solid #b79c7155;border-bottom:1px solid #b79c7155;margin-top:20px;padding:17px 0;font:10px Arial,sans-serif;letter-spacing:2px;display:flex;justify-content:center;align-items:center;gap:15px}.date strong{font:38px Georgia,serif}.presence{font-size:14px;font-style:italic;line-height:1.7;max-width:360px;margin:0 auto 18px}.signature{font-size:23px;line-height:1.5;margin:0}.signature em{font-size:17px;color:#9a774f}.bottom-ornament{color:#b58f55;margin-top:18px}#close{margin-top:25px;color:#d4bb98;border:0;border-bottom:1px solid #8b6548;background:none;font-size:13px;padding:8px}footer{text-align:center;font:8px Arial,sans-serif;letter-spacing:3px;color:#a17b70;padding:25px 15px 30px}@keyframes emerge{from{opacity:0;transform:translateY(100px) scale(.9) rotate(-2deg)}to{opacity:1;transform:none}}@media(max-width:600px){header{padding:23px 22px}header a{font-size:21px}header a span{font-size:6px;letter-spacing:2px}#sound{font-size:10px;padding:10px}#arrival{padding:60px 0 20px}.scene{width:100%;margin-top:35px}.envelope-title{letter-spacing:1px}.envelope-title em{letter-spacing:1px}.hint{margin-top:40px}.eyebrow{font-size:8px;letter-spacing:2.5px}#reveal{padding:15px 12px}#letter{padding:35px 30px 28px}#letter>.eyebrow{font-size:16px;letter-spacing:3px}h1{font-size:20px}.prose{font-size:14px;line-height:1.7}.date{font-size:8px;letter-spacing:1px;gap:10px}footer{font-size:6px;letter-spacing:2px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}#seal{left:43%;top:51.5%;width:13%;background:transparent;box-shadow:none;color:#a66c2a}#seal span{text-shadow:1px 1px #eac485}

/* Immersive presentation */
html{min-height:100%;background:#480b15}body{background:none;overflow-x:hidden}body:before{display:none}.curtain{position:fixed;inset:-3%;z-index:-2;display:flex;overflow:hidden;background:#620b19}.curtain>div{width:50%;height:110%;background:repeating-linear-gradient(92deg,#26050b 0%,#770f22 5%,#a31b32 8%,#6c0c1b 12%,#35050e 17%,#881529 22%);box-shadow:inset 0 0 90px #19000690;animation:velvet 9s ease-in-out infinite alternate;transform-origin:top center}.curtain>div+div{animation-delay:-4s;background-position:35px 0;transform:scaleX(-1)}.spotlight{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 35%,#ffcb8b10,transparent 52%,#130007a6 100%)}header{position:absolute;z-index:10;width:100%;top:0;padding:25px 4%}header a{font-size:22px}header a span{display:none}#sound{background:#2d07154d;backdrop-filter:blur(8px)}main{max-width:none}#arrival{height:100svh;min-height:620px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:75px 0 25px;overflow:hidden}#arrival[hidden]{display:none}#arrival>.eyebrow{position:absolute;top:15%;z-index:3;font-size:12px;letter-spacing:5px;color:#f6ddb1;text-shadow:0 2px 8px #260007;animation:words 1.5s ease both}.presentation{width:min(1030px,100vw,135svh);perspective:1200px;animation:offer 2.6s cubic-bezier(.16,.76,.25,1) both}.scene{width:100%;margin:0;filter:drop-shadow(-12px 24px 22px #19000880);animation:breathe 6s ease-in-out 2.6s infinite;transform-origin:85% 90%;will-change:transform}.scene img{border-radius:0}.envelope-title{top:28%;font-size:clamp(17px,3vw,32px)}#seal{padding:0;left:43%;top:51.5%;width:13%;display:grid;place-items:center}#seal span{font-size:clamp(28px,4.5vw,48px);height:auto;line-height:1;color:#885324;text-shadow:1px 1px #ffe3a0}#seal:after{content:'';position:absolute;inset:2%;border:1px solid #ffe2a3;border-radius:50%;animation:beckon 2.4s ease-out infinite}#seal i{position:absolute;inset:-8%;border-radius:50%;box-shadow:0 0 28px #ffc96c66;animation:glow 2.4s ease-in-out infinite}.hint{position:absolute;bottom:5%;margin:0;letter-spacing:1px;font-size:15px;color:#f5dca8;animation:words 2s 1s both}.hint small{color:#d0ab98;font-size:10px}.hint-arrow{display:block;font-size:29px;margin-bottom:9px;animation:point 1.7s ease-in-out infinite}body.reading header{position:relative}body.reading .curtain>div{filter:brightness(.7)}#reveal{padding-top:12px}#letter{animation:emerge 1.5s cubic-bezier(.16,.8,.2,1) both}.opening .scene{animation:handAway 1.1s ease-in forwards}.opening #seal{transform:scale(1.35);opacity:0}.opening .presentation{animation:none}.opening .envelope-title{transition:opacity .4s;opacity:0}.opening .hint{animation:none;opacity:0}
@keyframes offer{0%{opacity:0;transform:translate(35vw,45vh) scale(.58) rotate(18deg)}35%{opacity:1}75%{transform:translate(-1vw,-1vh) scale(1.03) rotate(-1deg)}100%{opacity:1;transform:none}}@keyframes breathe{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-12px) rotate(.5deg)}}@keyframes velvet{from{transform:scaleX(1.02) skewX(-.4deg)}to{transform:scaleX(1.06) skewX(.4deg)}}@keyframes beckon{0%{transform:scale(.88);opacity:0}25%{opacity:.8}100%{transform:scale(1.5);opacity:0}}@keyframes glow{0%,100%{opacity:.2}50%{opacity:.8}}@keyframes point{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes words{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes handAway{0%{opacity:1;transform:scale(1)}35%{opacity:1;transform:scale(1.08) translateY(-15px)}100%{opacity:0;transform:translate(18vw,40vh) rotate(10deg) scale(.95)}}
@media(max-width:600px){#arrival{min-height:520px;padding:80px 0}.presentation{width:125vw;flex-shrink:0}#arrival>.eyebrow{top:22%;font-size:9px;letter-spacing:3px}.envelope-title{font-size:20px;letter-spacing:1.2px}.hint{bottom:14%;font-size:13px}header{padding:22px 20px}header a{font-size:20px}.scene{margin-top:0}.envelope-title em{font-size:.5em}#seal span{font-size:34px}#reveal{padding-top:5px}}@media(max-height:650px) and (min-width:601px){.presentation{width:110svh}#arrival{min-height:480px}#arrival>.eyebrow{top:14%}.hint{bottom:3%;font-size:12px}.hint-arrow{font-size:20px;margin-bottom:3px}}@media(prefers-reduced-motion:reduce){.presentation,.scene,.curtain>div,.hint,#seal:after,#seal i{animation:none!important;transform:none!important}}

.invitation-logo{display:block;width:110px;max-width:50%;height:auto;margin:0 auto 18px}