@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@400;500;600&display=swap');
:root{--green:#173f35;--dark:#102f28;--ivory:#f8f3e9;--red:#a52c32;--gold:#d8bd82;--muted:#706b5e;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',Arial,sans-serif;font-family:var(--sans);color:var(--green);background:var(--dark);line-height:1.6;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-width:none}html::-webkit-scrollbar{display:none}body{margin:0}img{display:block;max-width:100%}p,h1,h2,h3{margin:0}a{color:inherit;touch-action:manipulation}a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02}h2{font-size:clamp(40px,5.5vw,70px);letter-spacing:-.035em}.eyebrow{font-size:9px;letter-spacing:.17em;text-transform:uppercase;font-weight:500}.page{min-height:100svh;display:grid;align-items:center}.page[hidden]{display:none}
/* The extra scroll distance pins the card while the painted doors open. */
.opening-chapter{height:100svh;position:relative;background:radial-gradient(ellipse at center,#285448,var(--dark) 80%)}
.opening-viewport{height:100svh;position:sticky;top:0;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}
.door-scene{width:min(100%,530px,64svh);aspect-ratio:1120/1545;position:relative;perspective:1300px;isolation:isolate;--door-progress:0}
.painted-arch{width:100%;height:100%;position:relative;background:#fff}.painted-arch>img{height:100%;width:100%;object-fit:fill}.arch-copy{position:absolute;inset:22% 14% 11.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.arch-copy>.eyebrow{font-size:8px;letter-spacing:.1em}.invite-line{font:italic 17px var(--serif);margin-top:5px}.arch-copy h1{font-size:clamp(42px,7vw,65px);letter-spacing:-.035em;margin:9px 0 13px;line-height:1}.arch-copy h1 span{font-style:italic;color:var(--red);font-size:.55em;margin:0 .12em}.card-families{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;font:400 14px/1.35 var(--serif)}.family-label{font:500 6px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:8px 0 4px}.hero-date{font:500 23px var(--serif);margin-top:20px}.hero-place{font-size:9px;margin-top:5px}.card-closing{font:italic 15px var(--serif);color:var(--red);margin-top:13px}.door-leaf{position:absolute;top:0;height:100%;width:50%;z-index:2;backface-visibility:hidden;will-change:transform;pointer-events:none}.door-leaf.left{left:0;transform-origin:left;transform:rotateY(calc(var(--door-progress)*-106deg))}.door-leaf.right{right:0;transform-origin:right;transform:rotateY(calc(var(--door-progress)*106deg))}.door-leaf img{height:100%;width:100%;object-fit:cover}.door-leaf.left img{object-position:right center}.door-leaf.right img{object-position:left center}.door-seal{position:absolute;top:57%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border:1px solid var(--gold);border-radius:50%;background:var(--red);display:grid;place-items:center;z-index:3;opacity:calc(1 - var(--door-progress)*5);pointer-events:none}.door-seal img{width:34px;filter:brightness(0) invert(1)}.scroll-instruction{position:absolute;bottom:26px;color:var(--gold);font-size:9px;letter-spacing:.17em;text-transform:uppercase}.scroll-instruction span{margin-left:14px}.door-scene.open-complete .door-leaf{visibility:hidden}
.agenda-page{padding:36px 6vw;background:var(--ivory)}.agenda-inner{width:100%;max-width:850px;margin:auto;position:relative}.agenda-inner>.eyebrow{color:var(--red)}.agenda-heading{display:flex;gap:25px;align-items:center;margin:28px 0}.day-number{font:400 clamp(80px,12vw,140px)/1 var(--serif);color:var(--red);letter-spacing:-.06em}.agenda-heading .eyebrow{margin-bottom:10px}.agenda-heading h2{font-size:clamp(36px,4.5vw,56px)}.agenda-venue{border-top:1px solid #173f352d;border-bottom:1px solid #173f352d;padding:17px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}.agenda-venue h3{font-size:25px}.agenda-venue p{font-size:11px;color:var(--muted);margin-top:7px}.agenda-venue a{font-size:10px;white-space:nowrap;text-underline-offset:5px}.agenda-label{font-size:9px;text-transform:uppercase;letter-spacing:.2em;margin:22px 0 10px;color:var(--red)}.agenda-list{padding:0;margin:0;list-style:none}.agenda-list li{display:grid;grid-template-columns:185px 1fr;gap:15px;align-items:baseline;padding:10px 0;border-bottom:1px solid #173f3518}.agenda-list time{font-size:12px;color:var(--muted)}.agenda-list span{font:500 24px/1.2 var(--serif)}.agenda-list small{font:400 10px var(--sans);display:block;color:var(--muted);margin-top:2px}.page-note{font-size:10px;color:var(--muted);margin-top:22px}.page-next{display:flex;justify-content:space-between;font-size:9px;text-transform:uppercase;letter-spacing:.15em;text-decoration:none;margin-top:28px;padding-top:12px;border-top:1px solid #173f352d}.day8{background:var(--green);color:var(--ivory)}.day8 .agenda-inner>.eyebrow,.day8 .day-number,.day8 .agenda-label{color:var(--gold)}.day8 .agenda-venue p,.day8 .agenda-list time,.day8 .page-note{color:#d5d3bf}.day8 .agenda-venue,.day8 .agenda-list li,.day8 .page-next{border-color:#f8f3e933}.day8 .agenda-list{margin-bottom:60px}.agenda-pending{font:italic 25px var(--serif);padding:45px 0}
.contact-page{background:var(--red);color:var(--ivory);text-align:center;padding:48px 24px;position:relative}.contact-page:before{content:'';position:absolute;inset:16px;border:1px solid #f8f3e933;pointer-events:none}.contact-inner{width:100%;max-width:650px;margin:auto}.contact-inner>.eyebrow{color:#edcda9;margin-bottom:20px}.contact-inner>p:not(.eyebrow):not(.footer-names){font-size:12px;margin-top:22px}.reply-date{color:#edcda9}.whatsapp-links{display:grid;gap:13px;max-width:350px;margin:27px auto}.button{display:flex;align-items:center;justify-content:space-between;text-decoration:none;text-align:left;font-size:12px;padding:15px 22px;border:1px solid #f8f3e977;transition:background .2s}.button small{display:block;font-size:10px;opacity:.7;margin-top:3px}.button:hover{background:#fff1}.contact-monogram{width:50px;filter:brightness(0) invert(1);margin:35px auto 15px}.footer-names{font:italic 23px var(--serif)}.replay{display:inline-block;font-size:9px;color:#edcda9;margin-top:20px;text-underline-offset:5px}
@media(max-width:650px){.door-scene{width:100%;max-width:none}.arch-copy h1{font-size:clamp(36px,10.7vw,63px)}.arch-copy>.eyebrow{font-size:6px}.invite-line{font-size:14px}.card-families{font-size:clamp(10px,3vw,16px);gap:12px}.hero-date{font-size:21px;margin-top:15px}.hero-place{font-size:8px}.card-closing{font-size:13px;margin-top:10px}.agenda-page{padding:26px 27px}.agenda-heading{gap:20px;margin:22px 0}.day-number{font-size:89px}.agenda-heading h2{font-size:37px}.agenda-heading .eyebrow{font-size:8px}.agenda-venue{display:block;padding:14px 0}.agenda-venue h3{font-size:24px}.agenda-venue p{font-size:10px}.agenda-venue a{display:inline-block;margin-top:8px}.agenda-label{margin-top:18px}.agenda-list li{grid-template-columns:120px 1fr;gap:10px;padding:8px 0}.agenda-list time{font-size:10px}.agenda-list span{font-size:22px}.agenda-list small{font-size:9px}.page-note{font-size:9px;margin-top:19px}.page-next{margin-top:22px}.day8 .agenda-list{margin-bottom:70px}.contact-page h2{font-size:45px}}
@media(max-height:700px) and (max-width:650px){.agenda-page{padding-top:20px;padding-bottom:20px}.agenda-heading{margin:14px 0}.agenda-heading h2{font-size:33px}.day-number{font-size:75px}.agenda-list li{padding:6px 0}.agenda-venue{padding:10px 0}.page-note{margin-top:13px}.page-next{margin-top:15px}.contact-page{padding:30px 24px}.contact-monogram{margin-top:20px}}
@media(scripting:none){.opening-chapter{height:100svh}.door-leaf,.door-seal,.scroll-instruction{display:none}}
@media(max-height:700px) and (max-width:650px){
  .agenda-page{padding:18px 25px}
  .agenda-heading{margin:12px 0}
  .agenda-heading h2{font-size:30px}
  .agenda-heading .eyebrow{margin-bottom:7px}
  .agenda-list span{font-size:20px}
  .agenda-label{margin-top:14px;margin-bottom:7px}
  .page-next{margin-top:12px;padding-top:10px}
  .contact-page h2{font-size:39px}
}

/* The cover consumes the opening gesture; there is no extra blank scroll distance. */
.door-leaf{transition:transform .16s linear}
.scroll-arrows{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);width:40px;height:60px;pointer-events:none;color:#fff;filter:drop-shadow(0 2px 5px #0006)}
.scroll-arrows svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scroll-arrows path{animation:scroll-pulse 1.6s ease-in-out infinite;opacity:.15}
.scroll-arrows path:nth-child(2){animation-delay:.18s}
.scroll-arrows path:nth-child(3){animation-delay:.36s}
.scroll-started .scroll-arrows{display:none}
@keyframes scroll-pulse{0%,100%{opacity:.12;transform:translateY(-2px)}50%{opacity:.65;transform:translateY(3px)}}
.whatsapp-icon{width:30px;height:30px;flex-shrink:0}
.whatsapp-links .button{gap:14px}
.whatsapp-links .button>span:first-of-type{flex:1}
.contact-inner>.eyebrow{max-width:300px;margin-left:auto;margin-right:auto}

/* Give the family acknowledgements more room inside the hand-painted arch. */
.arch-copy{inset:19.5% 14% 11.5%}
.card-families{font-size:12px;line-height:1.35}
.invite-line{line-height:1.25}
.agenda-page{position:relative;padding-top:100px}
.agenda-page::before{content:'';position:absolute;top:0;left:0;right:0;height:62px;background:url('assets/lotus.jpg') center 42%/140px auto;pointer-events:none}
@media(max-width:650px){
  .card-families{font-size:clamp(9px,2.65vw,14px);gap:12px}
  .family-label{margin-top:9px}
  .arch-copy h1{margin-top:10px;margin-bottom:8px}
  .invite-line{font-size:13px}
  .agenda-page{padding-top:80px}
  .agenda-page::before{height:48px;background-size:33.333% auto}
}
/* On shorter phones a slim side border leaves room for the full day's agenda. */
@media(max-height:700px) and (max-width:650px){
  .agenda-page{padding-top:18px;padding-left:37px;padding-right:23px}
  .agenda-page::before{right:auto;bottom:0;width:14px;height:auto;background-size:85px auto;background-position:40% center}
}

/* A short vertical swipe completes the entire door movement on touchscreens. */
.door-scene.touch-motion .door-leaf{transition:transform .75s cubic-bezier(.25,.7,.2,1)}

/* One reader controls page changes; the browser no longer scrolls between pages. */
html.reader-active,html.reader-active body{height:100%;overflow:hidden;overscroll-behavior:none;scroll-behavior:auto}
.paged-reader{position:fixed;inset:0;overflow:hidden;height:100dvh;background:var(--dark)}
.paged-reader .reader-page{position:absolute;inset:0;display:none;min-height:0;height:100%;overflow-y:auto;overscroll-behavior-y:contain;scroll-behavior:auto}
.paged-reader .opening-chapter.reader-visible{display:block}
.paged-reader .page.reader-visible{display:grid}
.paged-reader .opening-viewport{height:100%;position:relative}
.paged-reader .door-leaf,.paged-reader .door-scene.touch-motion .door-leaf{transition:none}
.paged-reader .agenda-inner,.paged-reader .contact-inner{flex-shrink:0}

.paged-reader .reader-page:focus{outline:none}

.contact-inner>p.painting-credit{font-size:9px;color:#edcda9;margin-top:30px;line-height:1.5}
.contact-inner>p.painting-credit{position:absolute;bottom:28px;left:24px;right:24px;margin:0}
@media(max-height:600px){.contact-inner>p.painting-credit{position:static;margin-top:25px}}

/* All reader pages use the same current visible height on iOS Safari. */
.paged-reader{top:var(--reader-top,0px);bottom:auto;height:var(--reader-height,100dvh);isolation:isolate}
.paged-reader .reader-page{top:0;bottom:auto;height:100%;max-height:100%;margin:0}
.scroll-instruction{bottom:calc(26px + env(safe-area-inset-bottom,0px))}
.scroll-arrows{bottom:calc(44px + env(safe-area-inset-bottom,0px))}
.contact-inner>p.painting-credit{bottom:calc(28px + env(safe-area-inset-bottom,0px))}

/* Soft rose petals begin only after the doors finish opening. */
.petal-shower{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none;visibility:hidden}
.petals-active .petal-shower{visibility:visible}
.petal{position:absolute;top:-28px;left:var(--left);width:var(--size);height:calc(var(--size)*1.4);border-radius:75% 15% 65% 35%;background:radial-gradient(ellipse at 30% 25%,#f8d2c0,#dc8b88 65%,#bd666d);opacity:0;pointer-events:none}
.petals-active .petal{animation:petal-fall var(--duration) var(--delay) linear infinite}
@keyframes petal-fall{0%{opacity:0;transform:translate3d(0,0,0) rotate(-25deg)}10%{opacity:.55}45%{transform:translate3d(var(--drift),calc(var(--reader-height,100svh)*.45),0) rotate(75deg)}85%{opacity:.45}100%{opacity:0;transform:translate3d(0,calc(var(--reader-height,100svh) + 60px),0) rotate(var(--turn))}}
.instagram-link{display:inline-flex;flex-direction:column;align-items:center;gap:5px;margin:0 auto;text-decoration:none;color:#f8f3e9;padding:8px 12px}
.instagram-caption{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.04em}
.instagram-caption svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.instagram-caption .instagram-dot{fill:currentColor;stroke:none}
.instagram-handle{font-size:13px;color:#edcda9;text-underline-offset:4px}
.instagram-link:hover .instagram-handle{text-decoration:underline}
.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}
.contact-page{padding-bottom:85px}
.contact-monogram{margin-top:20px}
@media(max-height:700px) and (max-width:650px){.contact-inner>.eyebrow{margin-bottom:12px}.contact-page h2{font-size:39px}.whatsapp-links{margin:18px auto;gap:10px}.button{padding:12px 18px}.contact-monogram{margin:14px auto 10px}.replay{margin-top:12px}}

/* Music follows the visible viewport and stays reachable on every page. */
.music-toggle{position:absolute;z-index:20;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 12px;border:1px solid #d8bd8280;border-radius:24px;background:#102f28e8;color:#f8f3e9;font:500 10px var(--sans);cursor:pointer;touch-action:manipulation;box-shadow:0 3px 12px #0002}
.music-toggle[hidden]{display:none}
.music-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.music-toggle .sound-waves,.music-toggle.music-playing .sound-off{display:none}
.music-toggle.music-playing .sound-waves{display:block}
.music-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
/* Content reveals do not extend the navigation animation or delay the next swipe. */
.reader-active .opening-chapter:not(.reveal-ready) .arch-copy h1{opacity:0}
.opening-chapter.reveal-ready .arch-copy h1{animation:invite-reveal .85s cubic-bezier(.2,.7,.2,1) both}
.paged-reader .agenda-page:not(.reveal-ready) .agenda-list li{opacity:0}
.agenda-page.reveal-ready .agenda-heading{animation:invite-reveal .65s ease-out both}
.agenda-page.reveal-ready .agenda-list li{animation:invite-reveal .55s var(--reveal-delay,0ms) ease-out both}
@keyframes invite-reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.contact-inner>p.painting-credit{left:100px;right:24px}
@media(max-height:600px){.contact-inner>p.painting-credit{margin-bottom:35px}}
