:root{color-scheme:light;--paper:#faf8f4;--terracotta:#b46b45;--display:#c1744c;--sans:'Montserrat',Arial,sans-serif;--serif:'Bodoni Moda','Didot','Times New Roman',serif}
*{box-sizing:border-box}
html{font-size:16px;background:var(--paper);scroll-behavior:smooth}
body{margin:0;color:var(--terracotta);font-family:var(--sans);text-align:center;-webkit-font-smoothing:antialiased;background:var(--paper)}
p,h1,h2{margin:0}
a{-webkit-tap-highlight-color:#c1744c20}
.invitation{width:100%;overflow-x:clip}
.panel{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;padding:44px 24px 26px;padding-bottom:max(26px,env(safe-area-inset-bottom));}
.panel-content{position:relative;z-index:1;width:100%;max-width:520px;margin-block:auto}
.welcome{background:var(--paper)}
.church{position:relative;width:clamp(160px,46vw,215px);aspect-ratio:380/295;overflow:hidden;margin:0 auto 32px;mix-blend-mode:multiply}
.church img{position:absolute;display:block;width:352.3684%;max-width:none;height:auto;left:-125.7895%;top:-56.61%}
.introduction{font-size:1rem;line-height:1.8;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
h1{margin-top:26px;font-weight:400}
.occasion{display:block;font-size:1.12rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--sans);line-height:1.6}
.name{display:block;font-family:var(--serif);font-size:min(24vw,7.8rem);font-weight:400;text-transform:uppercase;letter-spacing:.055em;line-height:1.2;padding-left:.055em;color:var(--display)}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:9px;flex-shrink:0;min-height:48px;margin-top:36px;padding:8px 14px;color:#995531;font-size:.875rem;line-height:1.5;letter-spacing:.045em;text-decoration:none;position:relative;z-index:2}
.scroll-cue svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2}
.ceremony{background:#f4ede5;border-block:1px solid #c184601b}
.star{font-family:Georgia,serif;font-size:2rem;line-height:1;margin:0 auto 35px;color:var(--display);width:fit-content}
.eyebrow{font-family:var(--sans);font-size:.9375rem;font-weight:500;text-transform:uppercase;letter-spacing:.19em;line-height:1.7}
.date{font-family:var(--serif);font-size:clamp(2.6rem,11vw,3.9rem);letter-spacing:.02em;line-height:1.25;color:var(--display);font-variant-numeric:lining-nums;margin-top:23px;overflow-wrap:anywhere}
.hour{font-size:1.08rem;line-height:1.6;text-transform:uppercase;letter-spacing:.13em;margin-top:10px}
.countdown{max-width:390px;margin:28px auto 0;padding-top:23px;border-top:1px solid #c1846040}
.countdown-heading{font-size:.875rem;line-height:1.7;letter-spacing:.07em;color:#995531}
.countdown-units{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:15px}
.countdown-unit{display:flex;flex-direction:column;align-items:center;gap:5px}
.countdown-number{font-family:var(--serif);font-size:clamp(2rem,8vw,2.65rem);line-height:1.2;font-variant-numeric:lining-nums tabular-nums;color:var(--display)}
.countdown-label{font-size:.875rem;line-height:1.6;color:#995531}
.countdown[hidden],.countdown-units[hidden]{display:none}
@media(max-width:22rem){.countdown-units{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media print{.countdown{display:none}}
.location-block{margin-top:43px}
.church-name{font-size:1.12rem;font-weight:400;letter-spacing:.1em;line-height:1.7;text-transform:uppercase}
.city{font-size:1rem;letter-spacing:.16em;line-height:1.7;text-transform:uppercase;margin-top:9px}
.map-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;color:#995531;border:1px solid #c1846080;border-radius:100px;text-decoration:none;font-size:.9375rem;line-height:1.5;letter-spacing:.015em;min-height:52px;max-width:100%;padding:13px 25px;margin-top:28px;background:#faf8f499}
.map-link svg{width:18px;height:20px;stroke:currentColor;stroke-width:1.4;flex-shrink:0}
.map-link:hover{background:#ecdccd;border-color:var(--terracotta)}
a:focus-visible{outline:2px solid #995531;outline-offset:5px;border-radius:20px}
.reception{padding-bottom:max(26px,env(safe-area-inset-bottom));padding-top:70px}
.section-title{font-family:var(--serif);font-size:clamp(3rem,12.5vw,4.7rem);font-weight:400;letter-spacing:.01em;line-height:1.3;color:var(--display)}
.after-ceremony{font-size:.875rem;letter-spacing:.12em;margin-top:12px}
.reception-details{margin-top:40px}
.venue{font-size:1.12rem;letter-spacing:.075em;line-height:1.8;text-transform:uppercase}
address{font-size:1rem;font-style:normal;letter-spacing:.035em;line-height:1.9;margin-top:22px}
.watercolor{position:absolute;inset:auto 0 0;height:120px;z-index:-1;background-image:url('assets/convite-textura.webp');background-repeat:no-repeat;background-size:850px auto;background-position:center bottom;mix-blend-mode:multiply;pointer-events:none}
/* Each block remains free to grow on small screens or with enlarged text. */
@media(max-width:359px){.panel{padding-inline:18px}.introduction{letter-spacing:.035em}.church-name,.venue{font-size:1rem}.name{letter-spacing:.035em}}
@media(max-height:680px) and (max-width:600px){.welcome{padding-top:26px}.church{width:156px;margin-bottom:22px}.welcome h1{margin-top:18px}.scroll-cue{margin-top:24px}.ceremony{padding-top:40px;padding-bottom:25px}.star{margin-bottom:25px}.location-block{margin-top:30px}}
@media(min-width:768px){.panel{min-height:760px;min-height:min(100svh,960px);padding:70px 40px 35px}.panel-content{max-width:650px}.church{width:240px}.introduction{font-size:1.06rem;letter-spacing:.14em}.occasion{font-size:1.3rem}.name{font-size:8.5rem}.church-name,.venue{font-size:1.25rem}.reception{padding-bottom:180px}.watercolor{height:170px;background-size:100% auto}}
@media(prefers-reduced-motion:no-preference){.map-link,.scroll-cue svg{transition:background .25s,border-color .25s,transform .25s,box-shadow .25s}.map-link:active{transform:scale(.97);box-shadow:none}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.map-link:hover{transform:translateY(-3px);box-shadow:0 6px 16px #99553112}.scroll-cue:hover svg{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.panel{min-height:0;padding:30px 20px;break-inside:avoid}.map-link,.scroll-cue,.watercolor{display:none}.church{width:140px;margin-bottom:20px}.name{font-size:5rem}.reception{padding-bottom:30px}}
/* Native modal keeps focus inside the app chooser and supports Escape. */
.maps-dialog{position:fixed;inset:auto 0 0;width:100%;max-width:520px;max-height:90vh;max-height:90svh;margin:0 auto;border:1px solid #c1846040;border-bottom:0;border-radius:25px 25px 0 0;padding:0;background:var(--paper);color:var(--terracotta);overflow:auto;overscroll-behavior:contain;box-shadow:0 -10px 55px #522e2720;text-align:left}
.maps-dialog::backdrop{background:#35231c66;backdrop-filter:blur(4px)}
.maps-sheet{padding:34px 24px max(30px,env(safe-area-inset-bottom));position:relative}
.maps-close-form{position:absolute;right:12px;top:10px;margin:0}
.maps-close{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#995531;cursor:pointer}
.maps-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.maps-close:hover{background:#f1e4d8}
.maps-dialog h2{font-family:var(--serif);font-size:2.2rem;line-height:1.2;font-weight:400;padding-right:30px}
.maps-destination{font-size:.9375rem;line-height:1.65;letter-spacing:.01em;margin-top:13px;margin-bottom:24px;overflow-wrap:anywhere}
.maps-options{display:grid;gap:10px}
.maps-option{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border:1px solid #c184604a;border-radius:14px;text-decoration:none;color:#995531;font-size:1rem;background:#fffaf466}
.maps-option[hidden]{display:none}
.maps-option:hover{background:#f1e4d8;border-color:var(--terracotta)}
.maps-app-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#edddcf;font-family:var(--sans);font-size:1rem;font-weight:500;flex-shrink:0}
.maps-open-icon{width:18px;height:18px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.4;flex-shrink:0}
.maps-help{font-size:.875rem;line-height:1.6;margin-top:20px}
.calendar-link{margin-top:24px}
.calendar-file-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.calendar-choice-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.calendar-choice-copy small{font-size:.875rem;line-height:1.5}
.maps-close:focus-visible{outline:2px solid #995531;outline-offset:2px}
@media(min-width:768px){.maps-dialog{inset:0;margin:auto;border:1px solid #c1846040;border-radius:25px;max-height:calc(100vh - 80px);height:fit-content}.maps-sheet{padding:36px 30px}}
@media(prefers-reduced-motion:no-preference){.maps-dialog[open]{animation:maps-enter .25s ease-out}@keyframes maps-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}}
@media print{.maps-dialog{display:none}}
/* A full-screen invitation cover, with the original page as a no-script fallback. */
.envelope-screen{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:32px 20px;padding-bottom:max(32px,env(safe-area-inset-bottom));background:var(--paper);color:var(--terracotta);overflow:auto;overscroll-behavior:contain;text-align:center}
.envelope-screen[open]{display:flex;align-items:center;justify-content:center}
.envelope-screen::backdrop{background:var(--paper)}
.envelope-content{width:100%;max-width:540px;margin:auto}
.envelope-screen .eyebrow{font-size:.875rem;letter-spacing:.16em}
#envelope-title{font-family:var(--serif);font-size:clamp(3.4rem,17vw,5.8rem);font-weight:400;line-height:1.15;margin:21px 0 6px}
#envelope-title>.envelope-occasion{display:block;font-family:var(--sans);font-size:1rem;line-height:1.8;text-transform:uppercase;letter-spacing:.2em;margin-bottom:6px}
#envelope-title>.envelope-name{font-size:inherit}
.envelope-open{display:block;border:0;background:transparent;color:inherit;font:inherit;width:100%;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.envelope-stage{position:relative;display:block;perspective:900px;isolation:isolate;margin:18px 0 12px}
.envelope-art{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 12px 18px #8b573b14)}
.envelope-note{position:absolute;z-index:0;left:23%;right:23%;top:30%;height:47%;background:#fffdf8;border:1px solid #c184602e;box-shadow:0 3px 15px #8b573b13;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0}
.envelope-note>span{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}
.envelope-note strong{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,10vw,3.4rem);line-height:1.4;letter-spacing:.055em}
.envelope-open-label{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;padding:12px 27px;border:1px solid #c1846080;border-radius:100px;font-size:1rem;letter-spacing:.04em;background:#fffaf466}
.envelope-open-label>svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.envelope-open:focus-visible{outline:2px solid #995531;outline-offset:4px;border-radius:20px}
.envelope-hint{font-size:.875rem;line-height:1.7;margin-top:18px}
.envelope-open:disabled{cursor:default}
.attendance{padding-bottom:150px;background:var(--paper)}
.attendance .section-title{font-size:clamp(2.5rem,11vw,4rem)}
.attendance-message{font-size:1rem;line-height:1.85;margin-top:22px;letter-spacing:.015em}
.rsvp-link{background:#a75e38;color:#fffaf4;border-color:#a75e38;margin-top:30px}
.rsvp-link:hover{background:#904c29;border-color:#904c29}
.rsvp-hint{font-size:.875rem;line-height:1.6;margin-top:12px;color:#995531}
.signature{font-family:var(--serif);font-size:2rem;line-height:1.5;margin-top:45px}
.signature>span{display:block;font-family:var(--sans);font-size:.875rem;letter-spacing:.07em;margin-bottom:5px}
#invitation-title:focus{outline:none}
@media(min-width:768px){.attendance{padding-bottom:180px}.reception{padding-bottom:35px}}
@media(max-height:650px){.envelope-screen{padding-block:20px}.envelope-stage{max-width:310px;margin:10px auto}.envelope-hint{margin-top:12px}#envelope-title{margin-top:14px}}
@media(prefers-reduced-motion:no-preference){
 .envelope-art,.envelope-open-label{transition:transform .4s,background .25s}
 .envelope-screen.is-opening{animation:envelope-screen-away .45s .65s both}
 .is-opening .envelope-art{animation:envelope-release .85s both}
 .is-opening .envelope-note{animation:envelope-letter-out .8s both}
 .is-opening .envelope-open-label,.is-opening .envelope-hint{opacity:0;transition:opacity .2s}
 @keyframes envelope-release{0%{transform:translateY(0) rotateX(0);opacity:1}100%{transform:translateY(65px) rotateX(-14deg) scale(1.04);opacity:0}}
 @keyframes envelope-letter-out{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(-48%);opacity:1}}
 @keyframes envelope-screen-away{to{opacity:0;transform:translateY(-12px)}}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.envelope-open:not(:disabled):hover .envelope-art{transform:translateY(-5px)}.envelope-open:not(:disabled):hover .envelope-open-label{background:#f1e4d8}}
@media print{.envelope-screen{display:none!important}.attendance{padding:30px 20px}.rsvp-link,.rsvp-hint{display:none}}