@font-face{font-family:"Wedding Script";src:url("/assets/wedding-script.otf") format("opentype");font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#f6eddf;--ink:#715530;--gold:#9b702b;--muted:#826e58;--rose:#b77763;--line:rgba(155,112,43,.25)}
*{box-sizing:border-box}
html{min-width:280px;background:var(--paper)}
body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 15% 10%,rgba(220,172,150,.16),transparent 48%),radial-gradient(ellipse at 90% 80%,rgba(181,161,109,.12),transparent 45%),#f6eddf;font-family:Georgia,"Times New Roman",serif;-webkit-font-smoothing:antialiased}
.page{max-width:660px;margin:0 auto;padding:28px 20px 18px}
.page-heading{text-align:center;margin-bottom:20px}
.eyebrow{font-family:Arial,sans-serif;font-size:10px;font-weight:500;letter-spacing:.22em;margin:0 0 10px;color:var(--muted)}
h1{font-family:"Wedding Script","Apple Chancery","Segoe Script",cursive;font-size:clamp(40px,8.8vw,62px);font-weight:400;line-height:1.14;margin:0;letter-spacing:0}
h1 span{color:var(--rose);margin:0 .015em}
.wedding-card{position:relative;container-type:inline-size;isolation:isolate;border:1px solid rgba(174,137,79,.13);box-shadow:0 14px 50px rgba(93,62,32,.11),0 2px 8px rgba(93,62,32,.05);overflow:hidden;background:#fbf1df;aspect-ratio:3/4}
.card-art{display:block;width:100%;height:100%;object-fit:fill}
.countdown-area{position:absolute;left:12.5%;right:12.5%;top:39.2%;height:35.5%;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:1.5cqw;color:var(--gold);text-align:center}
.countdown-heading{font-family:"Wedding Script","Apple Chancery","Segoe Script",cursive;font-size:clamp(20px,5cqw,32px);font-weight:400;line-height:1.1;letter-spacing:0;margin:0;color:#956d35}
.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.7cqw;padding:2.1cqw 0 2.3cqw;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums lining-nums}
.time-unit{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.8cqw;min-width:0}
.time-unit:not(:last-child)::after{content:":";position:absolute;right:-1.5cqw;top:1.2cqw;font-size:4.3cqw;color:#b88e4b;font-weight:400;line-height:1}
.time-value{font-size:clamp(24px,9cqw,56px);line-height:1;letter-spacing:-.045em;min-width:2ch;font-weight:400}
.time-label{font-family:Arial,sans-serif;font-size:clamp(9px,2.25cqw,14px);line-height:1;letter-spacing:.045em;color:#81612f}
.noscript-note{font-size:12px;margin:8px 0 0}
.sharing{text-align:center;padding:20px 0 0}
.share-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:11px;border-radius:50%;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background .16s,box-shadow .16s}
.button svg{width:23px;height:23px;flex-shrink:0}
.copied-icon{display:none}
.button[data-copied="true"] .copy-icon{display:none}
.button[data-copied="true"] .copied-icon{display:block}
.button-primary{background:#916b33;color:#fffaf2;border-color:#916b33}
.button-primary:hover{background:#7d5928}
.button-secondary{color:#7d6039;background:rgba(255,251,245,.42);border-color:rgba(145,107,51,.32)}
.button-secondary:hover{background:#fffbf4}
.button:focus-visible,input:focus-visible{outline:3px solid #b98768;outline-offset:4px}
.share-status{font:12px/1.4 Arial,sans-serif;color:#725a3b;min-height:17px;margin:10px 0 0}
.share-status:empty{display:none}
.manual-copy{font:12px Arial,sans-serif;margin:10px auto;max-width:390px;text-align:left}
.manual-copy label{display:block;margin-bottom:6px}
.manual-copy input{width:100%;border:1px solid var(--line);border-radius:4px;background:#fffcf5;padding:10px;color:var(--ink);font:12px Arial,sans-serif}
.closing-line{font-size:15px;font-style:italic;color:#9a7861;margin:18px 0 8px}
@media(max-width:440px){.page{padding:22px 10px 14px}.page-heading{margin-bottom:16px}.eyebrow{font-size:9px}.countdown-heading{margin-bottom:0}.countdown{padding-top:2.1cqw;padding-bottom:2.3cqw}.sharing{padding-top:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* The original card sits inside a tap-to-open stationery envelope. */
.page{transition:opacity .65s ease,transform .8s cubic-bezier(.2,.65,.3,1)}
.page:focus{outline:none}
.envelope-cover,.replay-envelope{display:none}
.js .replay-envelope{display:inline-flex}
.js:not(.invitation-open) body{height:100svh;overflow:hidden}
.js:not(.invitation-open) .page{opacity:0;visibility:hidden;transform:translateY(26px) scale(.985)}
.js .envelope-cover{position:fixed;inset:0;z-index:20;display:grid;place-items:center;overflow:hidden;padding:30px 24px;background:radial-gradient(ellipse at 20% 15%,rgba(224,184,161,.2),transparent 55%),radial-gradient(ellipse at 90% 90%,rgba(184,165,116,.14),transparent 50%),#f6eddf;transition:opacity .65s ease}
.js .envelope-cover[hidden]{display:none}
.envelope-content{width:min(100%,540px);text-align:center;transform:translateY(-8px)}
.envelope-scene{position:relative;width:100%;container-type:inline-size;filter:drop-shadow(0 22px 24px rgba(108,77,40,.15))}
.envelope{position:relative;aspect-ratio:1.55;perspective:1400px;isolation:isolate}
.envelope-back{position:absolute;inset:0;border:1px solid #c9ad78;border-radius:5px;background:linear-gradient(155deg,#c8aa7a,#e5d2ad 35%,#d1b88e 100%)}
.envelope-back::after{content:"";position:absolute;inset:8px;border:1px solid rgba(255,248,226,.34);border-radius:2px}
.letter-slot{position:absolute;inset:-125% 0 2px;z-index:2;overflow:hidden;pointer-events:none}
.envelope-letter{position:absolute;left:13%;bottom:-45cqw;width:74%;aspect-ratio:3/4;border:1px solid rgba(158,119,62,.25);background:#fbf1df;box-shadow:0 3px 15px rgba(70,49,24,.13);transition:transform 1.05s cubic-bezier(.22,.7,.22,1) .68s;container-type:inline-size}
.envelope-letter>img{display:block;width:100%;height:100%}
.letter-countdown{position:absolute;left:12.5%;right:12.5%;top:47%;display:grid;grid-template-columns:repeat(4,1fr);gap:1.7cqw;padding:3cqw 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:9cqw;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--gold)}
.envelope-side{position:absolute;inset:0;z-index:3;background:linear-gradient(130deg,#f7ecd6,#ebd8b6);border-radius:4px}
.envelope-side-left{clip-path:polygon(0 0,53% 51%,0 100%)}
.envelope-side-right{clip-path:polygon(100% 0,47% 51%,100% 100%);background:linear-gradient(230deg,#f8eedb,#ead6b2)}
.envelope-front{position:absolute;inset:0;z-index:4;clip-path:polygon(0 100%,0 3%,50% 55%,100% 3%,100% 100%);background:linear-gradient(165deg,#f8eedb,#efdfc2);border-radius:4px}
.envelope-front::before{content:"";position:absolute;inset:0;background:#cdb17b;clip-path:polygon(0 2%,50% 54%,100% 2%,100% 2.6%,50% 54.6%,0 2.6%)}
.envelope-front::after{content:"";position:absolute;inset:12px;border:1px solid rgba(171,131,68,.28);border-top:0;clip-path:polygon(0 100%,0 6%,50% 57%,100% 6%,100% 100%)}
.envelope-flap{position:absolute;inset:0 0 auto;height:58%;z-index:6;transform-origin:top center;clip-path:polygon(0 0,100% 0,50% 100%);background:#c9a86c;backface-visibility:visible}
.envelope-flap::before{content:"";position:absolute;inset:0 1px 2px;background:linear-gradient(155deg,#fff7e7 0%,#f1e2c5 75%,#e3cda6 100%);clip-path:polygon(0 0,100% 0,50% 100%)}
.envelope-flap::after{content:"";position:absolute;inset:11px 16px 14px;background:#cdb17b;clip-path:polygon(0 0,50% 96%,100% 0,100% 1%,50% 97%,0 1%);opacity:.65}
.envelope-seal{position:absolute;z-index:8;left:50%;top:55%;transform:translate(-50%,-50%);display:grid;place-items:center;width:clamp(80px,20cqw,108px);aspect-ratio:1;border:0;border-radius:48% 51% 49% 48%;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#73501f;background:radial-gradient(circle at 31% 23%,#f0d99a 0%,#d6b46e 46%,#b98a3d 87%,#c79d52 100%);box-shadow:0 4px 7px rgba(90,58,17,.25),inset 0 1px 2px #fff0bf,inset 0 -2px 3px rgba(101,65,16,.24);transition:transform .25s,box-shadow .25s,opacity .25s}
.envelope-seal::before{content:"";position:absolute;inset:7%;border:1px solid rgba(119,79,26,.45);border-radius:50%;box-shadow:inset 0 1px 1px rgba(255,245,204,.7),0 1px 1px rgba(255,245,204,.45)}
.envelope-seal::after{content:"";position:absolute;inset:8%;z-index:2;border:1px solid rgba(153,111,47,.4);border-radius:50%;pointer-events:none}
.seal-monogram{position:relative;z-index:1;display:block;width:84%;height:84%;overflow:hidden;border-radius:50%;background:#fbf1df;pointer-events:none}
.envelope-seal:hover{transform:translate(-50%,-50%) scale(1.055);box-shadow:0 5px 11px rgba(90,58,17,.3),inset 0 1px 2px #fff0bf}
.envelope-seal:active{transform:translate(-50%,-50%) scale(.97)}
.envelope-seal:focus-visible{outline:3px solid #99694c;outline-offset:7px}
.envelope-hint{margin:38px 0 0;color:#8e704b;font-size:16px;font-style:italic;transition:opacity .35s}
.envelope-cover.is-opening .envelope-hint{opacity:0}
.envelope-cover.is-opening .envelope-seal{opacity:0;transform:translate(-50%,-50%) scale(.8);pointer-events:none}
.envelope-cover.is-opening .envelope-flap{animation:unfold-envelope .9s cubic-bezier(.3,.2,.2,1) .15s both}
.envelope-cover.is-opening .envelope-letter{transform:translateY(-64%)}
.envelope-cover.is-revealing{opacity:0;pointer-events:none}
@keyframes unfold-envelope{0%{transform:rotateX(0deg);z-index:6}49%{z-index:6}50%{z-index:1}100%{transform:rotateX(180deg);z-index:1}}
@media(max-width:440px){.js .envelope-cover{padding:28px 22px}.envelope-hint{margin-top:32px;font-size:15px}.envelope-front::after{inset:9px}}
@media(max-height:500px) and (orientation:landscape){.envelope-content{width:min(50vw,400px)}.envelope-hint{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.envelope-flap{animation:none!important}.envelope-letter{transition:none!important}.page{transform:none!important}}
.music-toggle[hidden]{display:none}
.music-toggle{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:30;background:#fcf4e7;box-shadow:0 3px 14px rgba(93,62,32,.12)}
.music-toggle[aria-pressed="true"]{background:#916b33;border-color:#916b33;color:#fffaf2}
.music-feedback{position:fixed;z-index:30;top:max(25px,env(safe-area-inset-top));right:74px;max-width:190px;margin:0;padding:7px 10px;border-radius:18px;background:#fcf4e7;color:var(--ink);box-shadow:0 2px 12px rgba(93,62,32,.08);font:12px/1.4 Arial,sans-serif;text-align:right}
.music-feedback:empty{display:none}
@media(max-width:600px){.js .page{padding-top:80px}}

.card-date{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(13px,4.1cqw,26px);font-weight:400;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:#75633d}
.countdown-tagline{margin:0;font-family:"Wedding Script","Apple Chancery","Segoe Script",cursive;font-size:clamp(15px,4.6cqw,30px);font-weight:400;line-height:1.15;color:#b46b53;white-space:nowrap}
.card-hashtag{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(10px,3cqw,18px);line-height:1.2;color:#9b702b;white-space:nowrap}
.envelope-letter .countdown-heading{font-size:5cqw}
.envelope-letter .card-date{font-size:4.1cqw}
.envelope-letter .countdown-tagline{font-size:4.6cqw}
.envelope-letter .card-hashtag{font-size:3cqw}
.envelope-letter .time-value{font-size:9cqw}
.envelope-letter .time-label{font-size:2.25cqw}