/* A portrait invitation canvas, composed for phone screens first. */
@font-face{font-family:WeddingScript;src:url('assets/wedding-calligraphy.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
html{background:#e9e6df;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{background:#e9e6df}
.invitation{width:100%;max-width:520px;margin-inline:auto;background:var(--paper);box-shadow:0 0 75px #4c493612;overflow-x:clip}
.entrance{left:50%;right:auto;width:min(100%,520px);transform:translateX(-50%);height:100%;height:100dvh}
/* Follow the roof at 33.8% of the cover image, with an 18px gap above it. */
.entrance-top{top:max(calc(env(safe-area-inset-top) + 64px),calc(61dvh - max(27.2dvh,min(36.267vw,188.59px)) - 18px));transform:translateY(-100%);gap:10px}
.entrance-brand{font-size:clamp(2.25rem,9vw,2.9rem)}
.entrance-bottom{bottom:max(30px,calc(env(safe-area-inset-bottom) + 22px));left:18px;right:18px}
.entrance-date{font-size:1.1rem;margin-bottom:12px}
.open-door{font-size:2.65rem;min-height:60px;touch-action:manipulation}
.sound-hint{max-width:280px;font-size:.9rem;margin-top:14px}
.hero{padding:30px 22px 28px;min-height:100svh;justify-content:center}
.hero-kicker{font-size:.75rem;letter-spacing:.15em;margin:0 0 14px}
.logo-frame{width:min(100%,360px);height:auto;aspect-ratio:1;overflow:visible;margin:0 auto 14px;padding:7px;mix-blend-mode:normal;flex-shrink:0;background:transparent}
.logo-frame img{width:100%;height:100%;object-fit:contain;max-width:100%;transform:none;filter:none}
.wedding-date{width:100%;font-family:Editorial,Georgia,serif;font-size:clamp(.675rem,2.8vw,.85rem);font-weight:400;line-height:1.6;letter-spacing:.115em;white-space:nowrap;margin:0}
.wedding-date span{font-family:Editorial,Georgia,serif;font-size:1em;padding:0 2px;color:var(--rose)}
.ornament{margin:19px 0 18px}
.hero h1{font-size:clamp(2.5rem,8.6vw,3rem);line-height:1.12;max-width:100%;margin-bottom:12px}
.hero h1.couple-names{display:flex;align-items:center;justify-content:center;gap:12px;font-family:WeddingScript,Celebration,Georgia,serif;font-size:clamp(2.3rem,8.8vw,3.1rem);font-weight:400;line-height:1.35;margin:0 0 16px;white-space:nowrap;font-synthesis:none}
.couple-names .weds{font-family:Editorial,Georgia,serif;font-size:.875rem;font-style:italic;color:var(--sage);letter-spacing:.06em}
.hero-note{font-size:1rem;line-height:1.6;margin:0 0 14px}
.discover{font-size:.75rem;letter-spacing:.1em;min-height:44px;padding:12px 4px 0;gap:14px}
.scroll-stem{height:24px}
.botanical{width:185px;opacity:.28}
.botanical-left{left:-120px;top:10%;transform:rotate(-10deg)}
.botanical-right{right:-120px;bottom:5%;transform:rotate(10deg)}
/* Supplied cream-and-sage florals, kept lightly along the invitation edges. */
.hero{isolation:isolate;background:var(--paper)}
.hero>.botanical{width:18%;max-width:90px;height:72%;aspect-ratio:auto;top:13%;bottom:auto;background-image:url('assets/floral-side-border.webp');background-size:auto 100%;background-repeat:no-repeat;opacity:.48;mix-blend-mode:multiply;transform:none;z-index:-1;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.hero>.botanical-left{left:-12px;background-position:left center}
.hero>.botanical-right{right:-12px;background-position:right center}
.event-pair{isolation:isolate;background:var(--paper)}
.event-pair::before,.event-pair::after{content:'';position:absolute;width:clamp(94px,26vw,124px);height:185px;background-repeat:no-repeat;background-position:center;background-size:contain;mix-blend-mode:multiply;opacity:.3;pointer-events:none;user-select:none;z-index:-1}
.event-pair::before{left:-48px;top:44%;background-image:url('assets/floral-bow.webp');transform:rotate(12deg)}
.event-pair::after{right:-48px;top:9%;background-image:url('assets/floral-bouquet.webp');transform:rotate(-16deg)}
.event-pair:nth-child(even)::before{top:8%;background-image:url('assets/floral-bouquet.webp');transform:rotate(14deg)}
.event-pair:nth-child(even)::after{top:48%;background-image:url('assets/floral-bow.webp');transform:rotate(-12deg)}
.venue-heading{position:relative;isolation:isolate;overflow:hidden}
.venue-heading::before,.venue-heading::after{content:'';position:absolute;top:2px;width:90px;height:155px;background:url('assets/floral-bouquet.webp') center/contain no-repeat;mix-blend-mode:multiply;opacity:.26;pointer-events:none;user-select:none;z-index:-1}
.venue-heading::before{left:-42px;transform:rotate(14deg)}
.venue-heading::after{right:-42px;transform:rotate(-14deg)}
.day-nav{gap:12px;padding:8px 9px;min-height:62px;scrollbar-width:none}
.day-nav a{font-size:.875rem;min-height:44px;display:flex;align-items:center;justify-content:center;white-space:nowrap;padding:0 3px}
.day-nav>span{flex-shrink:0;font-size:.75rem}
.itinerary{max-width:none;padding:0 17px}
.event-pair{display:flex;flex-direction:column;min-height:calc(100svh - 62px);padding:22px 0 24px;scroll-margin-top:68px;gap:8px}
.chapter-heading{gap:14px;flex-shrink:0;margin:6px 0 17px}
.chapter-heading>div{min-width:0}
.chapter-heading .small-caps{font-size:.75rem;letter-spacing:.12em;line-height:1.5;margin-bottom:10px}
.chapter-heading h2{font-size:1.85rem}
.chapter-line{width:27px;flex-shrink:1}
.event{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:275px;column-gap:10px;padding:10px 0}
.event>*{min-width:0}
.event-art{width:100%;max-width:235px;position:relative;justify-self:center}
.event-copy{padding:12px 0;width:100%;max-width:100%;align-self:center}
.event-date{font-size:.75rem;letter-spacing:.08em;margin-bottom:12px;line-height:1.5}
.event h3{font-size:clamp(2rem,7vw,2.65rem);line-height:1.08;margin-bottom:14px;max-width:100%;overflow-wrap:normal}
.event-time{font-size:1.0625rem;letter-spacing:.025em;line-height:1.5;margin-bottom:12px}
.event-time:before{width:25px;margin-bottom:12px}
.event-note{font-size:1rem;line-height:1.55;max-width:100%;margin:0 auto}
.event-note br{display:none}
.pair-end{flex-shrink:0;font-size:.75rem;margin-top:12px}
.venue{padding:48px 0 calc(100px + env(safe-area-inset-bottom));background:linear-gradient(var(--paper),#f4f0e6)}
.venue-heading{padding:0 20px 28px}
.venue-heading .small-caps{font-size:.75rem;letter-spacing:.13em}
.venue h2{font-size:clamp(2.9rem,10vw,3.7rem);line-height:1.15}
.venue-subtitle{display:block;font:1.05rem/1.5 Editorial,Georgia,serif;letter-spacing:.14em;color:var(--sage);margin:9px 0 13px}
.venue-date{font-size:1.1rem}
.venue-photo{padding:0 12px;max-width:100%;margin:0 auto}
.venue-photo img{width:100%;height:auto;min-height:0;max-height:none;object-fit:contain;clip-path:none;border-radius:3px}
.venue-location{padding:35px 18px 6px}
.venue-location>.small-caps{font-size:.75rem;letter-spacing:.13em;color:var(--sage);margin:0 0 13px}
.venue-location h3{font-family:Editorial,Georgia,serif;font-size:1.7rem;font-weight:400;line-height:1.3;color:var(--sage);margin:0 0 23px}
.venue-map{position:relative;width:100%;min-height:240px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#e8e6df;aspect-ratio:4/3}
.venue-map iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.location-actions{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:20px}
.directions-button{display:flex;justify-content:center;align-items:center;min-height:48px;width:min(100%,290px);padding:13px 22px;border:1px solid var(--sage);border-radius:6px;background:var(--sage);color:var(--paper);font:1rem/1.4 Quiet,Arial,sans-serif;text-decoration:none;touch-action:manipulation;transition:background .25s}
.directions-button:hover{background:#525c40}
.map-place-link{display:inline-flex;align-items:center;min-height:44px;padding:9px 12px;color:var(--sage);font:.875rem/1.5 Quiet,Arial,sans-serif;text-underline-offset:4px}
.closing{padding:32px 22px 16px}
.closing p{font-size:1.2rem;line-height:1.65}
.closing-hashtag{font-size:2.2rem}
.back-top{font-size:.75rem;min-height:44px;padding:14px 12px;letter-spacing:.1em}
.music-toggle{right:max(14px,calc((100vw - 520px)/2 + 14px));bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px));min-width:44px;min-height:44px;font-size:.75rem;padding:10px 13px;touch-action:manipulation}
.petal-rain{position:fixed;left:50%;top:0;width:min(100%,520px);height:100%;height:100dvh;transform:translateX(-50%);overflow:hidden;pointer-events:none;user-select:none;z-index:18;contain:strict;visibility:hidden}
.entered .petal-rain{visibility:visible}
.falling-petal{position:absolute;top:-42px;left:var(--left);width:var(--size);height:var(--size);opacity:0;pointer-events:none;animation:petalFall var(--duration) linear var(--delay) infinite;will-change:transform,opacity}
.petal-rain.paused .falling-petal{animation-play-state:paused}
@keyframes petalFall{0%{transform:translate3d(0,-35px,0) rotate(var(--turn));opacity:0}8%{opacity:.7}40%{transform:translate3d(var(--drift),42vh,0) rotate(calc(var(--turn) + 105deg))}75%{opacity:.7;transform:translate3d(calc(var(--drift) * -.5),80vh,0) rotate(calc(var(--turn) + 215deg))}100%{transform:translate3d(var(--drift),calc(100dvh + 85px),0) rotate(calc(var(--turn) + 290deg));opacity:0}}
@media(prefers-reduced-motion:reduce){.petal-rain{display:none}}
@media(max-width:359px){.hero{padding-inline:16px}.hero-kicker{letter-spacing:.1em}.logo-frame{width:100%;max-width:290px}.hero h1{font-size:2.4rem}.day-nav{gap:7px;padding-inline:6px}.day-nav a{font-size:.8125rem}.itinerary{padding-inline:12px}.event{column-gap:8px;min-height:300px}.event h3{font-size:1.95rem}.event-date{letter-spacing:.035em}.event-note{font-size:1rem}.chapter-heading{gap:9px}.chapter-line{width:16px}}
@media(max-height:700px) and (min-width:360px){.hero{padding-top:24px;padding-bottom:22px}.logo-frame{max-width:300px}.hero-kicker{margin-bottom:8px}.ornament{margin:15px 0}.hero-note{margin-bottom:8px}}
@media(orientation:landscape) and (max-height:550px){.entrance-top{top:14px;transform:none;gap:4px}.entrance-brand{font-size:2rem}.entrance-bottom{bottom:16px}.entrance-date{font-size:1rem;margin-bottom:2px}.open-door{font-size:2rem;min-height:44px;padding-top:6px}.sound-hint{display:none}.door-line{margin-top:5px}}