@font-face{font-family:'Cormorant Garamond';src:url('./assets/cormorant-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('./assets/cormorant-italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'Great Vibes';src:url('./assets/great-vibes.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url('./assets/manrope.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}

:root{color-scheme:light;--paper:#f4eee6;--ink:#786344;--gold:#b99a64;--motion:16600ms;font-family:'Cormorant Garamond',Georgia,serif;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#e9e2d7}
body{overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid #957441;outline-offset:7px}
.experience{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:25px 20px 22px;overflow:hidden;background:radial-gradient(ellipse at 43% 25%,#faf7ef 0%,#eee8dd 52%,#e1d8ca 100%)}
.experience::before{content:'';position:absolute;z-index:-1;inset:0;opacity:.2;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23a99b85' filter='url(%23n)' opacity='.25' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.ambient{position:absolute;pointer-events:none;z-index:-1;width:45vw;height:120vh;opacity:.16;filter:blur(22px);background:repeating-linear-gradient(74deg,transparent 0 65px,#9f937d 68px 83px,transparent 88px 146px);transform:rotate(-28deg)}
.ambient-left{left:-39vw;top:-30vh}.ambient-right{right:-39vw;bottom:-30vh;transform:rotate(-28deg) scaleX(-1);opacity:.12}
.masthead{display:flex;align-items:center;gap:17px;color:#8e7c61;font-family:Georgia,serif;font-size:9px;letter-spacing:3.3px;text-transform:uppercase;white-space:nowrap}
.hairline{height:1px;width:30px;background:linear-gradient(90deg,transparent,#b6a78d)}
.hairline:last-child{transform:rotate(180deg)}
.invitation{position:relative;width:min(430px,calc((100svh - 145px) * .57142857));aspect-ratio:4/7;isolation:isolate;perspective:1600px;overflow:hidden;background:var(--paper);border-radius:2px;box-shadow:0 1px 1px #fff9,0 3px 9px #6250391a,0 25px 60px -20px #6c573f59,0 50px 110px -40px #705d4238;container-type:inline-size}
.envelope{position:absolute;inset:0;z-index:5;perspective:2200px;pointer-events:none}
.flap{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;pointer-events:none}
.paper,.paper-back{position:absolute;inset:0;background-image:url('./assets/envelope.webp');background-size:100% 100%;background-position:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.relief-ready .paper{background-image:url('./assets/paper.webp')}
.paper-back{background-image:linear-gradient(120deg,#d7c5ac55,#fff5e211 45%,#97765444),url('./assets/paper.webp');transform:translateZ(calc(var(--stock-depth,6px)*-.5)) rotateY(180deg)}
.paper-back::after{content:'';position:absolute;inset:0;background:linear-gradient(#fff9e8,#826345);opacity:var(--back-shade,.2);mix-blend-mode:multiply}
.paper-top{clip-path:polygon(0 0,100% 0,50% 53.2%)}
.paper-bottom{clip-path:polygon(0 100%,50% 47.7%,100% 100%)}
.paper-left{clip-path:polygon(0 0,55.5% 50%,0 100%)}
.paper-right{clip-path:polygon(100% 0,44.5% 50%,100% 100%)}
.paper-back.paper-left{clip-path:polygon(100% 0,44.5% 50%,100% 100%)}
.paper-back.paper-right{clip-path:polygon(0 0,55.5% 50%,0 100%)}
.flap-top{z-index:7;transform-origin:50% 0%}
.flap-bottom{z-index:5;transform-origin:50% 100%}
.flap-left{z-index:1;transform-origin:0% 50%}
.flap-right{z-index:3;transform-origin:100% 50%}
.seal{z-index:9;position:absolute;left:50%;top:50%;width:27%;aspect-ratio:1;transform:translate(-50%,-50%) translateZ(3px);filter:drop-shadow(0 5px 3px #6d543c3d) drop-shadow(0 12px 12px #6e543125);backface-visibility:hidden}
.seal-art{display:block;width:100%;height:100%;overflow:visible}
.monogram-fire{opacity:0;filter:drop-shadow(0 0 1px #fff9cd) drop-shadow(0 0 4px #f4cf64) drop-shadow(0 0 6px #f0bc4c99)}
.seal-ring{opacity:0;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
.seal-ring-bloom{stroke:#ffd46b;stroke-width:3.4;filter:blur(1.5px) drop-shadow(0 0 5px #edbb43)}
.seal-ring-core{stroke:#fff8bd;stroke-width:1.7;filter:drop-shadow(0 0 2px #fff3b3)}
.seal-ring-head{opacity:0;transform-origin:90px 88px;filter:drop-shadow(0 0 3px #fff4ab) drop-shadow(0 0 8px #ffcf66)}
.seal-gleam{position:absolute;inset:13%;border-radius:50%;background:linear-gradient(115deg,transparent 20%,#fff9dc00 35%,#fffefdc4 50%,#fff7d300 65%,transparent 80%);background-size:350% 100%;background-position:130% 0;mix-blend-mode:screen;opacity:.4;animation:idle-gleam 7s 1.8s ease-in-out infinite}
.seal-trigger{z-index:20;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28%;aspect-ratio:1;border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer;touch-action:manipulation}
.seal-trigger:focus-visible{outline:1px solid #a78248;outline-offset:5px;box-shadow:0 0 20px #f7dfa0}
.seal-trigger:disabled{pointer-events:none}
.inside-hint{display:none}
.relief-fire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.opening-light{position:absolute;inset:-10%;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,#fff7cde0 0%,#ffe7a9c7 12%,#e5af4b80 30%,#e7b65b30 50%,#fbe8c400 72%);transform:scale(.5)}
.letter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:12% 9%;background:radial-gradient(ellipse at 50% 24%,#fffdf9,#faf6ee 55%,#f0e7da);color:var(--ink);opacity:0;transform:scale(1.045)}
.letter::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' fill='%238e7957' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
.letter-frame{position:absolute;inset:4.5%;border:1px solid #b39a6b66;pointer-events:none}
.letter-frame::after{content:'';position:absolute;inset:5px;border:1px solid #c3ab7b3b}
.letter-eyebrow{font-family:Georgia,serif;font-size:clamp(8px,2.05cqw,10px);letter-spacing:2.5px;text-transform:uppercase;color:#9c896c;line-height:2;margin:0 0 8%}
.letter-monogram{display:flex;align-items:baseline;justify-content:center;line-height:.94;font-size:clamp(76px,27cqw,126px);font-style:italic;font-weight:400;letter-spacing:-.06em;color:#a58a59;text-shadow:0 2px 1px #fff}
.letter-monogram i{font-size:.3em;margin:0 .38em;color:#b5a081;align-self:center;padding-top:.7em;letter-spacing:0}
.letter-monogram span:last-child{transform:translateY(.1em)}
.small-divider{display:flex;align-items:center;gap:12px;color:#b79b68;font-size:16px;margin:11% 0 7%}
.small-divider span{height:1px;width:30px;background:#b79b6866}
h1{font-weight:400;font-style:italic;font-size:clamp(31px,10.8cqw,47px);line-height:1.1;margin:0 0 6%;outline:none}
.letter-message{font-size:clamp(16px,4.9cqw,22px);line-height:1.55;font-weight:400;margin:0;color:#8c7a60}
.letter-signature{font-size:clamp(16px,4.4cqw,20px);font-style:italic;margin:13% 0 0;color:#9d8763}
.botanical{position:absolute;left:18%;width:64%;height:auto;color:#b39a6d;opacity:.64}
.botanical-top{top:6%}.botanical-bottom{bottom:6%;transform:rotate(180deg)}
.experience-footer{height:25px;display:flex;align-items:center;justify-content:center;position:relative;z-index:15}
.opening-hint{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:9px;text-transform:uppercase;letter-spacing:2.5px;color:#8d7a5d;margin:0;transition:opacity .4s}
.hint-dot{width:4px;height:4px;border-radius:50%;background:#b79b68;box-shadow:0 0 0 4px #b79b6814}
.replay{display:flex;align-items:center;gap:9px;padding:6px 12px;border:0;background:none;font-size:15px;letter-spacing:.5px;color:#8b775a;cursor:pointer;animation:fade-in .8s both;min-height:38px}
.replay:hover{color:#594527}.replay svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.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}

.invitation[data-state="opening"] .seal-gleam{animation:none;opacity:0}
.invitation[data-state="opening"] .monogram-fire{animation:monogram-ignite 2600ms ease-in-out both}
.invitation[data-state="opening"] .seal-ring{animation:ring-trace 2600ms linear both}
.invitation[data-state="opening"] .seal-ring-head{animation:ring-head 2600ms linear both}
.invitation[data-state="opening"] .inside-hint{opacity:0}
.invitation[data-state="opened"] .seal-trigger{visibility:hidden}
.invitation[data-state="opened"] .letter{opacity:1;transform:none}
.invitation[data-state="opened"] .inside-hint{display:none}
.experience:has([data-state="opening"]) .opening-hint{opacity:0}

@keyframes idle-gleam{0%,35%,100%{background-position:130% 0;opacity:0}40%{opacity:.6}61%{background-position:-20% 0;opacity:0}}
@keyframes monogram-ignite{0%{opacity:0}12%{opacity:.65}28%,40%{opacity:1}56%{opacity:.4}72%,100%{opacity:0}}
@keyframes ring-trace{0%,28%{opacity:0;stroke-dashoffset:100}29%{opacity:1;stroke-dashoffset:100}66%{opacity:1;stroke-dashoffset:0}80%{opacity:.7;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes ring-head{0%,28%{opacity:0;transform:rotate(0)}29%{opacity:1;transform:rotate(0)}66%{opacity:1;transform:rotate(360deg)}74%,100%{opacity:0;transform:rotate(360deg)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

@media(hover:hover){.invitation[data-state="closed"]:has(.seal-trigger:hover) .seal{filter:drop-shadow(0 5px 4px #6d543c40) drop-shadow(0 0 16px #fff3cc99);transition:filter .4s}.replay{transition:color .2s}}
@media(max-width:600px){
  html,body{background:var(--paper)}
  .experience{padding:0;gap:0;min-height:100svh;background:var(--paper);justify-content:flex-start}
  .masthead,.ambient{display:none}
  .invitation{width:100%;height:100svh;min-height:480px;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .experience-footer{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:0;width:100%;height:30px}
  .opening-hint{font-size:8px;letter-spacing:2.5px;color:#99866d}
  .letter{padding:15% 9%}
  .letter-frame{inset:3% 5% 8%}
  .botanical-top{top:8%}.botanical-bottom{bottom:12%}
  .letter-eyebrow{font-size:8px}
  .seal{width:28%}.seal-trigger{width:30%}
}
@media(max-height:600px) and (min-width:601px){.experience{padding:14px;gap:12px}.invitation{width:calc((100svh - 95px)*.57142857)}.masthead{font-size:8px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  .seal-gleam{animation:none}
}

/* Two shadow scales and changing face illumination describe the paper's lift. */
.cast-shadow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:#493221;opacity:0}
.cast-shadow .penumbra{opacity:.82}.cast-shadow .umbra{opacity:.62}
.shadow-left{z-index:0}.shadow-right{z-index:2}.shadow-bottom{z-index:4}.shadow-top{z-index:6}
.shadow-right .penumbra{opacity:.52}.shadow-right .umbra{opacity:.36}
.cavity-shadow{position:absolute;inset:0;z-index:0;opacity:0;background:linear-gradient(90deg,#51301c80,transparent 24%,transparent 76%,#51301c80),linear-gradient(#573e2938,transparent 30%,transparent 70%,#573e2950)}
.paper-shade,.paper-transmission{position:absolute;inset:0;pointer-events:none;opacity:0}
.paper-shade{background:linear-gradient(160deg,transparent 15%,#69452b4d 65%,#4b2b2666);mix-blend-mode:multiply}
.flap-left .paper-shade{background:linear-gradient(90deg,#fff0,#65452685 70%)}
.flap-right .paper-shade{background:linear-gradient(-90deg,#fff0,#65452685 70%)}
.flap-bottom .paper-shade{background:linear-gradient(0deg,#4b342b45,#7e5a3630 60%,transparent)}
.paper-transmission{background:radial-gradient(ellipse 19% 21% at 50% 50%,#fff7ced9,#ffce6573 32%,#e5a93820 64%,transparent 100%);mix-blend-mode:screen}
.flap-top .paper-transmission{background:radial-gradient(ellipse 18% 19% at 50% 52%,#fff9dfe6,#ffd66e8c 26%,#e9b04716 70%,transparent)}
.flap-bottom .paper-transmission{background:radial-gradient(ellipse 19% 23% at 50% 47.5%,#fff9dff5,#ffe596a8 22%,#e9ad4b21 65%,transparent)}
.seal-shadow{position:absolute;z-index:8;left:50%;top:51%;width:24%;height:7%;transform:translate(-50%,-50%);border-radius:50%;background:#48301d;filter:blur(5px);opacity:.48;pointer-events:none}
.invitation[data-state="opened"] .opening-light{opacity:0!important}
/* The seal is an explicit request to play. Reduced-motion guests also get a
   separate instant-open control; decorative background motion stays reduced. */

/* Light is transmitted through the paper, while occlusion stays above it. */
.paper-transmission{background:radial-gradient(ellipse 30% 29% at 50% 50%,#fffcea 0%,#ffe3a6bf 22%,#e9ba7533 48%,transparent 80%);mix-blend-mode:normal}
.flap-top .paper-transmission{background:radial-gradient(ellipse 29% 25% at 50% 53.2%,#fffdf0 0%,#fff6d8 9%,#ffdc8cc2 28%,#e8b36222 62%,transparent 87%)}
.flap-bottom .paper-transmission{background:radial-gradient(ellipse 30% 27% at 50% 47.7%,#fffdf0 0%,#fff4cc 10%,#ffe19dc4 25%,#dca34824 63%,transparent 87%)}
.paper-shade{background:linear-gradient(150deg,#fff0 15%,#82634845 58%,#342119a8);mix-blend-mode:multiply}
.flap-bottom .paper-shade{background:linear-gradient(0deg,#fff0 10%,#76533955 70%,#3f2d2688)}
.seal{filter:drop-shadow(0 3px 2px #51341d70) drop-shadow(2px 13px 8px #5b3b2855)}
.seal-burn{position:absolute;inset:0;width:100%;height:100%;opacity:0;filter:drop-shadow(0 0 3px #fbc86766);pointer-events:none}
.invitation[data-state="opened"] .opening-light{opacity:0!important}

/* A rounded, extruded piece of cotton stock, including a continuous edge. */
.paper{transform:translateZ(calc(var(--stock-depth,6px)*.5))}
.stock-wall{position:absolute;left:0;top:0;display:block;transform-origin:0 0;pointer-events:none;backface-visibility:visible;background:linear-gradient(to bottom,#ac987a 0%,#cfbea4 14%,#e4d6bf 40%,#e9ddc8 76%,#fff9e9 100%);filter:brightness(var(--edge-light,.9));}
.paper-transmission{background:radial-gradient(ellipse 38% 33% at 50% 50%,#fff6d899,transparent 85%)}
.flap-top .paper-transmission,.flap-bottom .paper-transmission{background:radial-gradient(ellipse 35% 32% at 50% 50%,#fff4d4aa,transparent 85%)}

/* The invitation keeps its original dimensions; the lake continues behind it. */
.experience{overflow:clip}
.wedding-story{position:relative;isolation:isolate;width:min(430px,calc((100svh - 145px)*.57142857));color:#523b22;container-type:inline-size;--script:'Great Vibes',cursive;--reading:'Manrope',Arial,sans-serif}
.wedding-story>.invitation{width:100%;background:transparent}
.lake-scene{position:absolute;inset:0;z-index:-1;overflow:clip;pointer-events:none;background:#ddd5c6 url('./assets/lake-yachts.webp') center top/100% auto no-repeat}
.lake-viewport{position:sticky;top:0;height:100svh;overflow:hidden}
.lake-water,.lake-petals{position:absolute;inset:0;width:100%;height:100%;display:block}
.lake-water{opacity:0}.lake-water.ready{opacity:1}
.letter{background:transparent;padding:0}
.letter::after{display:none}
.hero-names{position:absolute;top:min(5%,13cqw);left:9%;width:86%;text-align:center;color:#76512d;text-shadow:0 1px 12px #fff6dd99}
.hero-names h1{font-family:var(--script);font-size:clamp(43px,17.5cqw,76px);font-weight:400;font-style:normal;line-height:1.04;letter-spacing:0;margin:0}
.hero-names h1>span{display:block}
.hero-names h1 .names-join{position:relative;display:flex;align-items:center;justify-content:center;gap:13px;height:32px;font-size:19px;letter-spacing:0}
.join-line{width:25px;height:1px;background:#9a7d494d}
.names-heart{font-family:Georgia,serif;font-size:31px;font-style:normal;line-height:1;transform:translateY(-1px);color:#a5854e}
.join-word{position:absolute;left:50%;top:7px;transform:translateX(-50%);font-size:19px}
.scroll-invitation{position:absolute;bottom:32px;left:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:17px;color:#523b22;text-decoration:none;font-family:var(--reading);font-size:10px;font-style:normal;letter-spacing:1px;text-shadow:0 1px 7px #fff9e8;visibility:hidden}
.scroll-invitation svg{width:15px;height:34px;fill:none;stroke:currentColor;stroke-width:.8;animation:lake-scroll-hint 3s ease-in-out infinite}
.invitation[data-state="opened"] .scroll-invitation{visibility:visible}
.invitation[data-state="opened"]{box-shadow:none}
body.wedding-locked{overflow-y:hidden}
.wedding-continuation{position:relative;text-align:center;font-family:var(--reading);font-size:13px;font-weight:400;text-shadow:0 1px 5px #fff3d48c}
.wedding-continuation h2,.wedding-continuation h3,.wedding-continuation p{font-weight:400;margin:0}
.wedding-date{min-height:94svh;padding:12svh 7% 8svh;display:flex;flex-direction:column;align-items:center;justify-content:center;scroll-margin-top:0;text-shadow:0 1px 7px #fff7e37d}
.date-composition{width:100%}
.chapter-eyebrow{font-family:var(--reading);font-size:8px;line-height:1.9;text-transform:uppercase;letter-spacing:1.7px;color:#60492d}
.wedding-date h2{display:flex;flex-direction:column;align-items:center;margin-top:25px;line-height:1}
.date-day{font-family:var(--script);font-size:clamp(104px,33cqw,148px);letter-spacing:0;font-style:normal;color:#674724;line-height:1.1}
.date-month{font-family:var(--script);font-size:clamp(42px,13cqw,57px);font-style:normal;margin-top:-5px}
.date-year{margin-top:14px!important;font-size:11px;letter-spacing:4px}
.date-rule{height:25px;width:1px;background:linear-gradient(transparent,#8a6538,transparent);margin:15px auto}
.date-time time{font-size:24px;font-weight:400;font-variant-numeric:lining-nums tabular-nums;letter-spacing:2px}
.date-time span{display:block;font-size:10px;font-style:normal;margin-top:8px}
.wedding-place{font-size:13px;margin-top:23px!important;letter-spacing:.2px}
.countdown-block{width:100%;margin-top:8svh}
.countdown-block h3{font-family:var(--script);font-size:clamp(29px,8.1cqw,36px);font-style:normal;line-height:1.3}
.countdown{display:flex;align-items:flex-start;justify-content:center;width:100%;gap:6px;margin-top:28px}
.countdown>div{flex:1;min-width:0;max-width:75px}
.countdown [data-count]{display:block;font-size:clamp(25px,7.7cqw,34px);font-weight:300;line-height:1.15;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-1px}
.countdown small{display:block;font-size:9px;margin-top:12px;color:#60492d;letter-spacing:.4px}
.countdown i{font-size:18px;line-height:1.55;font-style:normal;opacity:.65}
.countdown-arrived{margin-top:18px!important;font-size:22px;font-style:italic}
.program-heading{padding:5svh 8% 4svh}
.program-sprig{width:120px;height:47px;color:#8a693b;margin-bottom:22px;opacity:.85}
.program-heading h2{font-family:var(--script);font-size:clamp(50px,15.4cqw,68px);font-style:normal;margin-top:16px}
.program-note{font-size:10px;font-style:normal;opacity:.85;margin-top:13px!important;letter-spacing:.8px}
.timeline-stage{position:relative;padding:5svh 0 6svh}
.timeline-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:#91703c;stroke-width:1.2;opacity:.8}
.timeline-route{vector-effect:non-scaling-stroke}
.timeline-paw{position:sticky;top:calc(50svh - 20px);width:42px;height:42px;margin-left:calc(50% - 21px);z-index:3;filter:drop-shadow(0 3px 3px #7e613d4d) drop-shadow(0 0 12px #fff3c6);will-change:transform}
.timeline-paw svg{display:block;width:100%;height:100%}
.timeline-events{position:relative;list-style:none;margin:-42px 0 0;padding:0}
.timeline-event{position:relative;min-height:max(250px,32svh);display:flex;align-items:center;padding:0 6%;text-align:right}
.event-copy{width:46%;opacity:.87;transform:translateY(4px);transition:opacity .4s,transform .4s;text-shadow:0 1px 6px #fff4dba6}
.timeline-event:nth-child(even){justify-content:flex-end;text-align:left}
.timeline-event.is-current .event-copy{opacity:1;transform:translateY(0)}
.event-copy time{font-size:19px;font-weight:500;letter-spacing:1px;font-variant-numeric:lining-nums tabular-nums;color:#654522}
.event-copy h3{font-family:var(--script);font-size:clamp(29px,8.2cqw,37px);font-style:normal;line-height:1.15;margin-top:11px}
.event-copy p{font-size:11px;line-height:1.65;margin-top:12px}
.event-dot{position:absolute;left:calc(var(--point-x,50%) - 4px);top:calc(50% - 4px);width:8px;height:8px;border:1px solid #866638;border-radius:50%;background:#f6e7c3;box-shadow:0 0 0 4px #f7edda66}
.story-ending{min-height:52svh;padding:12svh 7% 12svh}
.story-ending>span{font-size:36px;color:#987947}
.story-ending>p{font-family:var(--script);font-size:34px;line-height:1.3;font-style:normal;margin-top:24px}
.story-ending .ending-signature{font-family:var(--reading);font-size:11px;margin-top:27px;letter-spacing:.2px}
.experience:has(.wedding-story.is-open) .experience-footer{margin-top:-65px;margin-bottom:25px}
.experience:has(.wedding-story.is-open){gap:22px}
.replay:focus-visible,.scroll-invitation:focus-visible{outline:1px solid #80613b;outline-offset:6px}
@keyframes lake-scroll-hint{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(5px);opacity:1}}
@media(max-width:600px){
  html{scrollbar-width:none}
  html::-webkit-scrollbar{display:none}
  .wedding-story{width:100%}
  .experience:has(.wedding-story.is-open){gap:0}
  .experience:has(.wedding-story.is-open) .experience-footer{margin:0;bottom:max(25px,env(safe-area-inset-bottom))}
  .hero-names{top:min(5.5%,13cqw)}
  .scroll-invitation{bottom:max(35px,env(safe-area-inset-bottom))}
}
@media(max-height:600px) and (min-width:601px){.wedding-story{width:calc((100svh - 95px)*.57142857)}.wedding-story>.invitation{width:100%}.hero-names{top:4%}.hero-names h1{font-size:12.5cqw}.hero-names h1 .names-join{height:30px}}
@media(prefers-reduced-motion:reduce){.scroll-invitation svg{animation:none}.event-copy{transition:none;transform:none;opacity:1}}

/* Readable ink and quiet paper surfaces preserve the water between chapters. */
.wedding-story{color:#35291e}
.invitation[data-state="opened"]{overflow:clip}
.hero-names{color:#54371e;text-shadow:0 1px 10px #fff8e5;-webkit-text-stroke:.35px currentColor}
.scroll-invitation{font-size:12px;font-weight:600;letter-spacing:.4px}
.wedding-continuation{font-size:15px;font-weight:500;line-height:1.7;text-shadow:none}
.wedding-continuation p{font-weight:500}
.chapter-eyebrow{font-size:10px!important;font-weight:700!important;letter-spacing:1.6px;color:#58412b;line-height:1.9}
.wedding-date{padding:9svh 5% 7svh}
.date-composition{padding:30px 13px 28px;border-radius:160px 160px 18px 18px;background:linear-gradient(160deg,#fffaf0eb,#f7eddbd9);border:1px solid #fff6e6;box-shadow:0 12px 34px #3c382011}
.date-day,.date-month{color:#51361e;-webkit-text-stroke:.25px currentColor}
.date-year{font-size:13px;font-weight:600!important}
.date-time time{font-weight:600;font-size:27px}
.date-time span{font-size:12px;font-weight:500}
.wedding-place{font-size:15px;font-weight:600!important}
.countdown-block{padding:23px 12px;background:#fff8e9ed;border-radius:18px;margin-top:35px;box-shadow:0 8px 28px #3c382010}
.countdown-block h3{font-size:clamp(29px,8.4cqw,37px);color:#51361e;-webkit-text-stroke:.2px currentColor}
.countdown [data-count]{font-size:30px;font-weight:600}
.countdown small{font-size:11px;font-weight:600;color:#4e3b27}
.countdown{gap:3px;margin-top:20px}
.program-heading{margin:4svh 5% 1svh;padding:30px 5%;background:radial-gradient(ellipse,#fff9eeed 25%,#fff9eec9 60%,#fff9ee00 73%)}
.program-heading h2{color:#51361e;-webkit-text-stroke:.3px currentColor}
.program-note{font-size:13px;opacity:1}
.timeline-event{min-height:max(270px,33svh);padding:0 5%}
.event-copy{width:58%;opacity:1!important;padding:17px 15px;background:linear-gradient(140deg,#fffaf0f7,#f8eddbf0);border:1px solid #fff8e9;border-radius:18px;box-shadow:0 7px 24px #4138201c;text-shadow:none;transform:none}
.event-copy time{font-size:22px;font-weight:700;color:#70502b;letter-spacing:.4px}
.event-copy h3{font-family:var(--reading);font-size:18px;font-weight:700;line-height:1.4;margin-top:8px;overflow-wrap:normal}
.event-copy p{font-size:14px;line-height:1.65;margin-top:10px}
.event-copy br{display:none}
.timeline-paw{filter:drop-shadow(0 3px 2px #55371966);top:calc(50svh - 21px)}
.timeline-line{stroke:#76552d;stroke-width:1.5;opacity:.85}
.guest-section{padding:60px 5% 45px}
.section-intro{padding:26px 15px 24px;border-radius:80px 80px 18px 18px;background:#fff8eeef}
.section-intro h2{font-family:var(--script);font-size:clamp(44px,13cqw,58px);line-height:1.3;color:#51361e;-webkit-text-stroke:.3px currentColor;margin:13px 0 15px}
.section-intro p{font-size:14px;line-height:1.8}
.section-intro .venue-name{font-size:18px;font-weight:700;margin-bottom:12px}
.venue-map{position:relative;height:350px;margin-top:22px;border:6px solid #fff7ea;border-radius:18px;overflow:hidden;background:#e8e3d4;box-shadow:0 14px 30px #3b34202b;isolation:isolate}
.venue-map iframe{display:block;width:100%;height:100%;border:0;pointer-events:none}
.venue-map.is-active iframe{pointer-events:auto}
.map-toggle{position:absolute;left:50%;top:12px;transform:translateX(-50%);white-space:nowrap;border:1px solid #b4a082;border-radius:30px;padding:10px 15px;background:#fffaf1;color:#3d2e20;font:600 12px var(--reading);cursor:pointer;box-shadow:0 3px 12px #32261626;z-index:2}
.text-link{display:inline-block;margin-top:20px;padding:8px 12px;background:#fff6e8e8;border-radius:8px;color:#45321f;font-weight:700;font-size:13px;text-underline-offset:4px}
.text-link span{padding-left:8px}
.dress-section{padding-top:55px}
.dress-section .section-intro{border-radius:80px 80px 0 0}
.ribbon-scene{height:248px;position:relative;perspective:700px;overflow:hidden;background:#fff8eef2}
.satin-bow{position:absolute;width:290px;height:205px;left:calc(50% - 145px);top:7px;transform-style:preserve-3d;transform:rotateX(10deg) rotateY(-12deg) rotate(-4deg);animation:satin-turn 9s ease-in-out infinite;animation-play-state:paused}
.ribbon-scene.is-visible .satin-bow{animation-play-state:running}
.satin-bow i{position:absolute;display:block;background:linear-gradient(120deg,#8b7755 0%,#d2bf96 16%,#fff4d5 35%,#d2b88b 52%,#a28b60 72%,#f9e6bb 93%);border:1px solid #ae95675c;box-shadow:inset 0 2px 3px #fffbea99,inset 0 -3px 5px #6b52364d;backface-visibility:visible}
.bow-loop{width:119px;height:90px;top:37px;z-index:2}
.loop-left{left:30px;border-radius:60% 12% 30% 65%;transform:rotate(17deg) rotateY(-29deg);transform-origin:right center}
.loop-right{right:30px;border-radius:12% 60% 65% 30%;transform:rotate(-17deg) rotateY(29deg);transform-origin:left center}
.bow-loop::after{content:'';position:absolute;inset:9px 13px;border:1px solid #8d73535c;border-radius:inherit;box-shadow:inset 0 -13px 13px #785e4033;opacity:.8}
.bow-tail{width:53px;height:117px;top:94px;transform-origin:center top;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.tail-left{left:105px;transform:rotate(23deg) rotateX(-18deg)}
.tail-right{right:102px;transform:rotate(-24deg) rotateX(16deg)}
.satin-bow .bow-knot{width:39px;height:48px;left:126px;top:67px;border-radius:35% 30% 35% 30%;transform:translateZ(22px) rotate(-6deg);z-index:3;background:linear-gradient(95deg,#a88c5e,#f9e8c1 36%,#ddc79b 65%,#9b7f54)}
.bow-shadow{position:absolute;left:20%;right:20%;bottom:17px;height:20px;background:radial-gradient(ellipse,#745d3d33,transparent 68%)}
.dress-copy{padding:0 23px 32px;background:#fff8eef2;border-radius:0 0 18px 18px}
.dress-copy p{font-size:15px;line-height:1.85}
.dress-copy .dress-lead{font-size:18px;font-weight:700;line-height:1.7;margin-bottom:20px}
.dress-copy .dress-note{font-size:14px;margin-top:24px;color:#624a32}
.guest-form{position:relative;text-align:left;margin-top:22px;padding:25px 21px;background:#fff9eff5;border:1px solid #fff9ed;border-radius:20px;box-shadow:0 12px 35px #3b34201a}
.guest-form>label,.guest-form legend{display:block;font-size:14px;font-weight:700;line-height:1.6;margin:22px 0 10px;color:#403020}
.guest-form>label:first-child{margin-top:0}
.guest-form input:not([type=radio]),.guest-form textarea{display:block;box-sizing:border-box;width:100%;font:500 16px/1.6 var(--reading);color:#35291e;background:#fffdfa;border:1px solid #b8a78c;border-radius:9px;padding:13px 12px;resize:vertical;outline-offset:3px}
.guest-form input::placeholder,.guest-form textarea::placeholder{color:#786c5b;opacity:1;font-size:14px}
.guest-form fieldset{padding:0;border:0;margin:25px 0 0;min-width:0}
.guest-form legend{margin:0 0 12px}
.meal-choices{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:7px}
.meal-choices label{position:relative;cursor:pointer}
.meal-choices input{position:absolute;opacity:0;width:100%;height:100%;margin:0}
.meal-choices span{display:flex;align-items:center;justify-content:center;min-height:65px;text-align:center;border:1px solid #b8a78c;border-radius:9px;background:#fffdfa;font-size:13px;font-weight:600;line-height:1.4;transition:background .15s,color .15s}
.meal-choices input:checked+span{background:#63492f;border-color:#63492f;color:#fff8ea}
.meal-choices input:focus-visible+span{outline:2px solid #866435;outline-offset:3px}
.form-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.guest-form .form-note{font-size:11px;line-height:1.7;margin-top:23px;color:#655540;text-align:center}
.submit-rsvp{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding:17px 18px;color:#fff9ec;background:#62472d;border:1px solid #62472d;border-radius:9px;font:600 15px var(--reading);cursor:pointer;min-height:56px}
.submit-rsvp:hover{background:#4c351f}.submit-rsvp:disabled{opacity:.7;cursor:wait}
.guest-form .form-status{font-size:14px;font-weight:600;line-height:1.7;margin-top:16px;color:#4b3722}
.form-status:empty{display:none}.form-status[data-kind="error"]{color:#8a342b}
.form-status[data-kind="success"]{color:#345039}
.guest-section button:focus-visible,.guest-section a:focus-visible{outline:2px solid #60482c;outline-offset:4px}
.story-ending{min-height:45svh;padding:8svh 6% 12svh;background:linear-gradient(transparent,#fff6e8b3 35%,#fff6e8d9)}
.story-ending>p{-webkit-text-stroke:.25px currentColor}.story-ending .ending-signature{font-size:13px;font-weight:600;-webkit-text-stroke:0}
@keyframes satin-turn{0%,100%{transform:rotateX(10deg) rotateY(-15deg) rotate(-5deg) translateY(0)}50%{transform:rotateX(-4deg) rotateY(16deg) rotate(4deg) translateY(-7px)}}
@media(prefers-reduced-motion:reduce){.satin-bow{animation:none}}

/* Cotton lace, native document movement, and the compact phone renderer. */
.names-heart{position:relative;width:39px;height:36px;display:block;transform:none;font-size:0}
.names-heart svg{display:block;width:39px;height:36px;fill:#fff9e94d;stroke:#947446;stroke-width:1.25}
.hero-names h1 .join-word{position:absolute;inset:2px 0 auto 0;width:100%;text-align:center;transform:none;font-size:22px;line-height:25px;letter-spacing:0;padding-right:1px}
.hero-date{margin:16px 0 0;font:400 27px/1.35 var(--script);color:#54371e;letter-spacing:.3px;-webkit-text-stroke:.1px currentColor}
.lake-scene{overflow:clip;background:#dcd6bc url('./assets/lake-yachts.webp') center top/100% auto no-repeat}
.lake-tile{position:absolute;left:0;width:100%;display:block;pointer-events:none}
.petal-field{position:absolute;inset:0;overflow:hidden}
.petal-field i{position:absolute;width:10px;height:16px;border-radius:75% 30% 65% 25%;background:linear-gradient(120deg,#fffef4,#f3e4cb 65%,#c9ac80);opacity:.72;transform:rotate(var(--rotation));animation:petal-fall var(--duration) var(--delay) linear infinite;animation-play-state:paused}
.lake-scene.is-animated .petal-field i{animation-play-state:running}
@keyframes petal-fall{0%{transform:translate3d(0,-70px,0) rotate(var(--rotation)) rotateY(0deg);opacity:0}15%,80%{opacity:.7}100%{transform:translate3d(var(--drift),150px,0) rotate(calc(var(--rotation) + 90deg)) rotateY(120deg);opacity:0}}
.mobile-paper-canvas,.mobile-paper-shadow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.mobile-paper-shadow{z-index:3}.mobile-paper-canvas{z-index:4}
.mobile-envelope-ready .mobile-paper-canvas,.mobile-envelope-ready .mobile-paper-shadow{display:block}
.mobile-envelope-ready .flap,.mobile-envelope-ready .cast-shadow,.mobile-envelope-ready .cavity-shadow{display:none}
.touch-renderer .seal{filter:drop-shadow(0 5px 4px #72553655)}
.touch-renderer .experience::before{background-image:none}
.touch-renderer .seal-gleam{animation:none}
.lace-panel{position:relative;border:22px solid transparent!important;border-image:url('./assets/lace-frame.svg') 32 round!important;border-image-outset:5px!important;border-radius:0!important;background:#fffaf1f5!important;background-clip:padding-box!important;box-shadow:none!important}
.date-composition{padding:19px 8px 22px;margin-top:12px}
.wedding-date h2{margin-top:5px}
.countdown-block{padding:12px 0 14px;margin-top:40px}
.countdown-block h3{font-size:clamp(26px,7.7cqw,34px)}
.countdown{gap:2px}.countdown [data-count]{font-size:27px}.countdown small{font-size:10px}
.program-heading{margin:30px 5% 0;padding:20px 5px}
.program-heading h2{margin-top:10px}.program-heading .program-sprig{margin-bottom:13px}
.timeline-event{min-height:300px}
.event-copy{width:62%;border-width:14px!important;border-image-outset:3px!important;padding:13px 10px}
.event-copy h3{font-size:17px}.event-copy p{font-size:14px}
.timeline-stage{padding:30px 0 30px}
.section-intro{padding:17px 9px 19px}
.guest-section{padding-top:60px}
.guest-form{padding:17px 12px;margin-top:38px}
.guest-form>label,.guest-form>div>label{display:block;font:700 14px/1.6 var(--reading);margin:22px 0 10px}
.guest-form input:not([type=radio]):not([type=checkbox]){min-height:49px}
.guest-form input[type=radio],.guest-form input[type=checkbox]{position:absolute;opacity:0;width:100%;height:100%;margin:0;padding:0;border:0}
.attendance-choices,.alcohol-choices{grid-template-columns:1fr 1fr}
.alcohol-choices span{min-height:48px}.attendance-choices span{min-height:56px}
.guest-form .field-help{font-size:12px;line-height:1.6;margin:0 0 13px;color:#69573f}
.guest-form [aria-invalid="true"]{border-color:#963f35!important}
.meal-choices label:has(input[aria-invalid="true"]) span{border-color:#963f35}
.guest-form .form-note{font-size:11px;line-height:1.8}
.story-chapter{margin:37px 0 0;padding:21px 12px 26px;text-align:center}
.story-number{font-size:11px;letter-spacing:3px;color:#927247}
.story-chapter h3{font:400 39px/1.35 var(--script);margin:12px 0 17px;-webkit-text-stroke:.2px currentColor}
.story-chapter p{font-size:14px;line-height:1.9}.story-chapter p+p{margin-top:13px}
.story-finish{display:block;font:400 35px/1.4 var(--script);margin-top:20px;color:#907149}
.our-story{padding-bottom:10px}
.couple-scene{position:relative;margin:0 10px;background:#f9f2e5;overflow:hidden}
.couple-scene video{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;object-position:center;filter:sepia(.12) saturate(.75);background:#e8dfcc}
.couple-scene::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 28px 9px #fff8ea70}
.couple-scene figcaption{position:absolute;bottom:0;left:0;width:100%;padding:22px 10px 17px;background:linear-gradient(transparent,#fff8eaee);font-size:11px;letter-spacing:.6px;color:#4d3a24;z-index:1}
.couple-play{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);width:190px;background:#fff9eeee;border:1px solid #ac9067;padding:12px;border-radius:30px;font:600 13px var(--reading);z-index:2}
.dress-copy{position:relative;border:22px solid transparent;border-image:url('./assets/lace-frame.svg') 32 round;border-image-outset:5px;background:#fffaf1f5;background-clip:padding-box;padding:20px 9px 24px;border-radius:0;margin-top:0}
.dress-copy .dress-lead{font-size:17px}.dress-copy p{font-size:14px;line-height:1.85}
.dress-section .section-intro{margin-bottom:14px}
@media(max-width:350px){.guest-section,.wedding-date{padding-left:5%;padding-right:5%}.lace-panel{border-width:18px!important}.event-copy{border-width:12px!important;padding:11px 7px}.event-copy h3{font-size:16px}.event-copy p{font-size:13px}.hero-date{font-size:24px}.guest-form{padding:16px 8px}.countdown-block h3{font-size:26px}.countdown [data-count]{font-size:24px}.meal-choices{gap:5px}.meal-choices span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.petal-field{display:none}}


#companions-field>label,#decline-fields>label{display:block;font-weight:700;font-size:14px;line-height:1.6;margin:22px 0 10px}

.touch-renderer .invitation[data-state="opened"] .envelope{visibility:hidden}