:root{--ink:#735b40;--gold:#a68a5d;--paper:#f5eddf;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#e9dfce;color:var(--ink)}body{font-family:Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid #967648;outline-offset:5px}.invitation{width:100%;max-width:480px;min-height:100svh;margin:auto;background:linear-gradient(#fff1,#fff0),url('assets/floral-paper.webp') center/100% 100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(30px,5.3svh,55px) 44px;box-shadow:0 0 60px #765d3f25}.card{width:100%;padding:12px 0;display:flex;flex-direction:column;align-items:center}.eyebrow{font:9px/1.9 Arial,sans-serif;letter-spacing:3.3px;margin:0}.flourish{font-size:26px;color:var(--gold);margin:11px 0 2px;line-height:1}h1{font-weight:400;font-size:clamp(49px,14.5vw,68px);line-height:1.01;letter-spacing:-2px;margin:8px 0 19px;text-shadow:0 1px #fff9}h1 .name{display:block}h1 em{display:block;font-size:29px;line-height:1.25;font-weight:400;color:#a48b66;letter-spacing:0}h1 .letter{display:inline-block}.message{font-size:14px;line-height:1.8;margin:0 0 18px}.families{font:9px/1.6 Arial,sans-serif;letter-spacing:2.1px;margin:0 0 23px}.families>span{font:italic 14px Georgia,serif;color:var(--gold);margin:0 6px}.families small{display:block;font-size:8px;letter-spacing:2px;margin-top:3px}.date{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;width:100%;max-width:310px;gap:7px;margin:0 0 24px}.date-center{border:1px solid #bca179;border-radius:45% 45% 43% 43%;padding:10px 3px 9px;outline:1px solid #cbb692;outline-offset:4px}.date-center strong{display:block;font-size:42px;line-height:1;font-weight:400;letter-spacing:-2px}.date-center>span{display:block;font:8px/1.6 Arial,sans-serif;letter-spacing:1.8px;margin-top:5px}.date-center small{font:8px/1.6 Arial,sans-serif;letter-spacing:1.5px}.date-side{font:8px/1.8 Arial,sans-serif;letter-spacing:1.1px;border-top:1px solid #c6b08b;border-bottom:1px solid #c6b08b;padding:8px 0;white-space:nowrap}.location{display:flex;flex-direction:column;align-items:center;color:inherit;text-decoration:none;width:100%;border-radius:5px}.venue{font-size:23px;line-height:1.3;letter-spacing:-.5px}.address{font-size:10px;line-height:1.6;color:#8f7a60;margin:6px 0 12px}.directions{display:flex;align-items:center;justify-content:center;gap:10px;font:9px Arial,sans-serif;letter-spacing:1.6px;min-height:43px;padding:12px 18px;border:1px solid #b99d73;border-radius:30px;background:linear-gradient(130deg,#fff8ebd9,#e9dac2bd);box-shadow:0 3px 12px #80633c12}.directions svg{width:13px;height:16px;stroke:currentColor;stroke-width:1.3}.directions>span{font-size:16px}.location:hover .directions{background:#e8d8bb}.cover{position:fixed;inset:0;max-width:480px;margin:auto;z-index:10;overflow:hidden;perspective:1200px;background:var(--paper)}.cover[hidden]{display:none}.cover-door{position:absolute;inset:0;width:50.1%;height:100%;background-image:url('assets/floral-paper.webp');background-size:200% 100%;backface-visibility:hidden;transition:transform 1.85s cubic-bezier(.6,.04,.19,1),filter 1.85s}.door-left{right:auto;left:0;background-position:left center;transform-origin:left center;border-right:1px solid #baa381;box-shadow:3px 0 12px #58462e22;z-index:2}.door-right{left:auto;right:0;background-position:right center;transform-origin:right center}.cover-touch{position:absolute;inset:0;width:100%;height:100%;z-index:3;border:0;background:transparent;color:var(--ink);cursor:pointer;text-align:center;transition:opacity .6s,transform .8s;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 15px}.cover-heading{font:8px/1.7 Arial,sans-serif;letter-spacing:2.8px;position:absolute;top:29%}.cover-names{font-size:clamp(29px,8.5vw,40px);letter-spacing:-1.5px;position:absolute;top:34%}.cover-names em{font-size:25px;color:var(--gold);padding:0 6px}.ribbon{position:absolute;top:calc(50% - 26px);left:0;width:100%;height:52px;background:linear-gradient(174deg,#cbb99b,#fff5e1 25%,#e3d1af 50%,#fff8e7 74%,#baa17b);box-shadow:0 3px 8px #77604329;transform:rotate(-3deg)}.seal{z-index:4;width:104px;height:104px;border-radius:49% 51% 47% 52%;border:3px solid #d2bfa0;background:radial-gradient(circle at 35% 25%,#fcf1da,#d8c3a1 80%);box-shadow:0 5px 12px #6b4a2840,inset 0 0 0 4px #eedfc4,inset 0 0 0 5px #b9a17b;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:0 1px #fff9;transition:transform .3s;color:#977b51}.seal>span{font-size:27px;letter-spacing:-2px}.seal em{font-size:17px;margin:0 3px}.seal small{font-size:23px;line-height:1;margin-top:3px}.cover-touch:hover .seal{transform:scale(1.04)}.open-label{position:absolute;top:65%;font:9px/1.8 Arial,sans-serif;letter-spacing:1.6px}.open-label>span{display:block;font:italic 15px/1.8 Georgia,serif;letter-spacing:0;margin-top:7px}.cover-date{position:absolute;bottom:8%;font:10px Arial,sans-serif;letter-spacing:4px}.is-opening .cover-touch{opacity:0;transform:scale(1.05);pointer-events:none}.is-opening .door-left{transform:rotateY(-110deg);filter:brightness(.8)}.is-opening .door-right{transform:rotateY(110deg);filter:brightness(.8)}.is-opening{background:transparent;pointer-events:none}.is-closed{overflow:hidden}.js-ready .reveal,.js-ready .letter{opacity:0}.revealed .reveal{animation:fall-in 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--step)*.15s)}.revealed .letter{animation:fall-in 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--letter-step)*.13s + .3s)}@keyframes fall-in{0%{opacity:0;transform:translateY(-25px);filter:blur(4px)}70%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}.music-toggle{position:fixed;right:max(12px,calc((100vw - 480px)/2 + 12px));bottom:calc(12px + env(safe-area-inset-bottom));z-index:15;width:36px;height:36px;border-radius:50%;border:1px solid #bda78177;background:#faf6ecee;box-shadow:0 2px 10px #58462e15;cursor:pointer;align-items:center;justify-content:center}.music-toggle:not([hidden]){display:flex}.music-toggle svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.4}.music-slash{position:absolute;width:21px;height:1px;background:var(--ink);transform:rotate(-45deg);box-shadow:0 0 0 2px #faf6ec}.music-toggle[aria-pressed=true] .music-slash{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:600px){body{padding:20px 0}.invitation{min-height:calc(100svh - 40px);max-width:440px}.cover{top:20px;bottom:20px;max-width:440px}}@media(max-height:740px){.invitation{padding-top:25px;padding-bottom:25px}.card{padding:5px 0}.flourish{margin:8px 0 0;font-size:21px}h1{font-size:53px;margin:5px 0 12px}h1 em{font-size:25px}.message{font-size:12px;margin-bottom:12px}.families{margin-bottom:18px}.date{margin-bottom:18px}.date-center{padding:7px 3px}.date-center strong{font-size:35px}.address{font-size:9px}.venue{font-size:21px}.eyebrow{font-size:8px}}@media(max-width:350px){.invitation{padding-left:31px;padding-right:31px}h1{font-size:49px}.message{font-size:12px}.date{grid-template-columns:1fr 65px 1fr}.date-side{font-size:7px;letter-spacing:.7px}}@media(max-height:600px){.invitation{padding-top:18px;padding-bottom:18px}h1{font-size:43px;margin-bottom:10px}h1 em{font-size:21px}.flourish{font-size:18px;margin:5px 0 0}.message{font-size:11px;margin-bottom:8px}.families{margin-bottom:13px;font-size:8px}.families small{font-size:7px}.date{margin-bottom:14px}.date-center strong{font-size:30px}.date-center{padding:5px 3px}.venue{font-size:19px}.address{margin:4px 0 8px}.directions{min-height:37px;padding:9px 15px;font-size:8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.revealed .reveal,.revealed .letter{opacity:1}}
.open-label{top:65%;font:italic 16px/1.6 Georgia,serif;letter-spacing:0;color:#806445}.open-label .touch-call{display:block;width:fit-content;margin:12px auto 0;padding:11px 24px;border:1px solid #baa17a;border-radius:30px;background:linear-gradient(135deg,#fff8eae8,#e8d8bfe0);box-shadow:0 3px 14px #7657321f,inset 0 1px #fff9;font:11px/1.5 Arial,sans-serif;letter-spacing:1.5px;color:#735431;animation:touch-invite 2.6s ease-in-out infinite}.touch-call>span{margin-left:7px;color:#a2875c;font-size:15px}.open-label .touch-note{font:italic 13px/1.6 Georgia,serif;margin-top:12px;letter-spacing:0;color:#947b5b}@keyframes touch-invite{50%{box-shadow:0 3px 22px #9b783c40,inset 0 1px #fff9;transform:translateY(-2px)}}@media(prefers-reduced-motion:reduce){.open-label .touch-call{animation:none}}@media(max-height:600px){.open-label{top:64%;font-size:14px}.open-label .touch-call{margin-top:8px;padding:8px 20px}.open-label .touch-note{font-size:11px;margin-top:8px}}
.music-toggle{width:44px;height:44px}
