:root{--black:#080603;--gold:#f0c24e;--gold-light:#ffd467;--cream:#f6e6c5;--muted:#cbb889;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',sans-serif;--script:'Allura',cursive;--ease:cubic-bezier(.22,.68,.22,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:60px}body{margin:0;background:var(--black);color:var(--cream);font-family:var(--sans);font-size:16px}body,button,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit}button,a{color:inherit}a{text-decoration:none}button{cursor:pointer}button:disabled{cursor:wait}::selection{background:#c99630;color:#080603}h1,h2,h3,p,figure{margin:0}h2,h3{font-family:var(--serif);font-weight:500}h2{font-size:clamp(2.05rem,5.6vw,3.8rem);line-height:1.02;letter-spacing:-.025em}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold-light);outline-offset:7px}.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}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.icon{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.skip-link{position:fixed;left:16px;top:-100px;padding:16px;background:var(--cream);color:var(--black);z-index:100}.skip-link:focus{top:12px}.progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:60;pointer-events:none}.progress span{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}.header{position:absolute;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:12px 22px;max-width:1600px;margin:auto;height:68px}.brand{display:flex;align-items:center;gap:10px;font-size:11px;line-height:1.35;letter-spacing:.025em}.brand .icon{color:var(--gold);width:24px;height:24px}.header-actions{display:flex;gap:7px}.icon-button{width:44px;height:44px;border:0;background:transparent;color:var(--gold);display:grid;place-items:center;position:relative}.audio-button .icon{width:20px;height:20px;opacity:.85}.audio-slash{position:absolute;width:25px;height:1px;background:var(--gold);transform:rotate(-50deg)}[aria-pressed=true] .audio-slash{display:none}.menu-button span{position:absolute;width:21px;height:1px;background:var(--gold);transition:transform .3s,opacity .3s}.menu-button span:first-child{transform:translateY(-6px)}.menu-button span:last-child{transform:translateY(6px)}.menu-button[aria-expanded=true] span:first-child{transform:rotate(45deg)}.menu-button[aria-expanded=true] span:nth-child(2){opacity:0}.menu-button[aria-expanded=true] span:last-child{transform:rotate(-45deg)}.navigation{position:absolute;right:22px;top:64px;width:min(300px,calc(100vw - 44px));padding:20px 24px;border:1px solid #6d532640;background:#100c06f5;backdrop-filter:blur(18px);border-radius:12px;box-shadow:0 24px 60px #0009}.navigation:not([hidden]){display:grid}.navigation a{padding:13px 0;font:500 24px var(--serif);border-bottom:1px solid #edc87318}.navigation a:last-child{border:0}.navigation a:hover{color:var(--gold)}.scene{position:relative;isolation:isolate;overflow:hidden;overflow:clip}.atmosphere{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 85% 0%,#af6b182b,transparent 36%),radial-gradient(ellipse at 10% 70%,#87601916,transparent 35%),#080603}.atmosphere:after{content:'';position:absolute;inset:0;background-image:radial-gradient(ellipse at 20% 30%,#ffbf5340 0,transparent 2px),radial-gradient(ellipse at 79% 13%,#ffcd5752 0,transparent 3px),radial-gradient(ellipse at 32% 87%,#ffb93140 0,transparent 2px);background-size:173px 237px,291px 357px,251px 297px;opacity:.5}.handwritten{font-family:var(--script);font-weight:400;color:var(--gold-light)}.hero{min-height:800px;min-height:max(800px,100svh);display:flex;flex-direction:column;align-items:center;padding:82px 20px 21px}.hero-copy{text-align:center;z-index:2}.hero h1{font-size:clamp(3.8rem,16vw,5.2rem);line-height:.9}.hero h1>span{display:block}.hero h1 strong{display:block;font-size:1.6em;font-weight:400;line-height:.94;padding:4px 0 0 20px}.title-heart{display:inline-block;font:400 .43em var(--serif);vertical-align:top;transform:rotate(12deg);margin:10px 0 0 -4px}.subtitle{font:500 clamp(1.25rem,5.2vw,1.55rem)/1.3 var(--serif);margin-top:12px}.bouquet{position:relative;flex-shrink:0}.bouquet img{display:block;width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(transparent,#000 7%,#000 92%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 92%,transparent)}.hero-bouquet{width:296px;max-width:100%;height:444px;margin-top:7px}.side-note{position:absolute;right:-10px;bottom:77px;font-size:30px;line-height:.82;transform:rotate(-9deg);text-align:center;text-shadow:0 2px 12px #000,0 0 8px #000}.gold-button{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;width:250px;max-width:100%;min-height:56px;border:1px solid #e5b34d;border-radius:999px;background:linear-gradient(170deg,#ffda75 0%,#f1c254 45%,#b7802f 100%);box-shadow:inset 0 1px 1px #fff3,0 12px 34px #0009;color:#211606;font-size:15px;font-weight:600;transition:transform .3s,box-shadow .3s}.gold-button:hover{transform:translateY(-3px);box-shadow:inset 0 1px 1px #fff5,0 15px 35px #d9a62a22}.gold-button:active{transform:translateY(1px) scale(.98)}.gold-button .icon{width:21px;height:21px}.hero-cta{margin-top:-2px}.hero-cta>span{position:absolute;right:24px;font:25px var(--serif)}.scroll-cue{width:44px;height:44px;display:grid;place-items:center;color:var(--gold);margin-top:12px}.scroll-cue .icon{width:23px;animation:down 3s ease-in-out infinite}@keyframes down{50%{transform:translateY(6px)}}.petals{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}.petal{position:absolute;left:var(--x);top:-30px;width:8px;height:18px;border-radius:100% 0 100% 0;background:linear-gradient(130deg,#eeb433aa,#a8641555);filter:blur(.4px);animation:fall var(--duration) linear var(--delay) infinite;opacity:0}@keyframes fall{8%{opacity:.65}85%{opacity:.5}100%{transform:translate3d(45px,1000px,0) rotate(240deg);opacity:0}}.section-heading{text-align:center;position:relative;z-index:2}.eyebrow{font-size:10px;font-weight:500;letter-spacing:.29em;text-transform:uppercase;color:var(--gold-light);margin-bottom:17px}.small-line{display:block;width:28px;height:1px;background:linear-gradient(90deg,transparent,#aa823d66,transparent);margin:24px auto}.reminders{min-height:820px;padding:72px 25px 68px;display:flex;flex-direction:column;align-items:center}.reminders h2{color:#f4d58c}.reasons{position:relative;z-index:2;display:grid;gap:14px;width:100%;max-width:380px}.reason{display:flex;align-items:center;gap:18px;min-height:126px;padding:20px 18px;border:1px solid #e6bc5820;border-radius:14px;background:linear-gradient(120deg,#211c1170,#151109a6);box-shadow:0 12px 35px #0005;backdrop-filter:blur(8px)}.reason-icon{width:60px;height:70px;flex-shrink:0;display:grid;place-items:center;border-bottom:1px solid #ac833926;border-radius:50%;color:var(--gold)}.reason-icon .icon{width:36px;height:36px}.reason h3{font-size:23px;line-height:1.05;color:#f7d991;margin-bottom:7px}.reason p{font-size:12px;line-height:1.5;color:var(--muted)}.gratitude{text-align:center;margin-top:12px;z-index:2}.gratitude .eyebrow{margin:27px 0 10px}.gratitude h2{font-size:36px}.heart-divider{display:flex;align-items:center;justify-content:center;gap:13px;color:var(--gold);margin:22px auto;width:130px}.heart-divider:before,.heart-divider:after{content:'';width:37px;height:1px;background:linear-gradient(90deg,transparent,#b68a3d99)}.heart-divider:after{transform:rotate(180deg)}.heart-divider .icon{width:19px;height:19px}.floral-edge{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#08060300,#08060320),url('./assets/ramo-realista-480.webp');background-size:100%,500px auto;background-position:center,calc(50% - 255px) calc(100% + 525px);background-repeat:no-repeat;filter:blur(5px);opacity:.65;mask-image:linear-gradient(transparent 30%,#000)}.sunset{min-height:850px;height:100svh;max-height:1150px;text-align:center;padding:64px 18px 0;background:#0d0b07}.sunset-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}.sunset:after{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(#08060350,#08060328 32%,#08060300 52%,#08060325 85%,#080603)}.sunset h2{font-size:32px}.sunset-second{font:500 29px/1.12 var(--serif);margin-top:19px}.sunset-message{font:500 19px/1.3 var(--serif);text-shadow:0 2px 12px #000;margin-top:30px}.sunset-note{position:absolute;right:24px;top:53%;font-size:35px;line-height:.82;transform:rotate(-9deg);text-shadow:0 2px 12px #000}.letter-intro{min-height:830px;display:flex;flex-direction:column;align-items:center;padding:68px 20px 64px}.letter-intro h2{font-size:clamp(30px,7.8vw,52px)}.envelope-stage{perspective:1200px;width:min(100%,330px);margin:120px 0 54px;position:relative;z-index:2}.envelope{display:block;position:relative;width:100%;aspect-ratio:1.32;border:0;padding:0;background:transparent;transform-style:preserve-3d;transition:transform 1.1s var(--ease);filter:drop-shadow(0 24px 20px #0009)}.envelope-back{position:absolute;inset:0;background:linear-gradient(125deg,#b47a2d,#eac77f 54%,#ae702b);border-radius:8px}.envelope-flap{position:absolute;left:0;top:0;width:100%;height:64%;background:linear-gradient(150deg,#eec77c,#b67b2b);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:5;transition:transform 1s var(--ease),filter 1s;backface-visibility:visible}.envelope-insert{position:absolute;left:5%;width:90%;height:100%;top:-19%;border-radius:7px 7px 2px 2px;background:linear-gradient(115deg,#f1d49d,#f9e6bd 54%,#ecca8e);box-shadow:0 -3px 18px #65400f25;display:flex;align-items:center;flex-direction:column;padding:30px 8px 0;font:500 18px/1.2 var(--serif);color:#302211;z-index:3;transition:transform 1.1s var(--ease) .45s,box-shadow 1s .4s}.insert-heart{display:block;color:#a36b1a;font-size:25px;margin-top:14px}.envelope-front{position:absolute;inset:0;border-radius:5px;z-index:4;overflow:hidden;background:linear-gradient(32deg,#b9894b,#e9c78b);clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%)}.envelope-front:after{content:'';position:absolute;inset:0;background:linear-gradient(145deg,#f0d39b,#c69959);clip-path:polygon(0 100%,50% 44%,100% 100%);filter:drop-shadow(0 -1px 1px #774817)}.envelope-seal{position:absolute;z-index:6;top:40%;left:50%;transform:translate(-50%,-50%);font:44px Georgia,serif;color:#c18b35;text-shadow:0 1px 1px #ffe6a9,0 5px 7px #6e450b66;transition:opacity .5s,transform .7s}.envelope-stage.is-opening .envelope{transform:rotateX(9deg) rotateZ(-2deg)}.envelope-stage.is-opening .envelope-flap{transform:rotateX(180deg);filter:brightness(.75);z-index:2}.envelope-stage.is-opening .envelope-insert{transform:translateY(-48%);box-shadow:0 16px 25px #3a210f55}.envelope-stage.is-opening .envelope-seal{opacity:0;transform:translate(-50%,-30%) scale(.8)}.js .letter-scene:not(.is-visible){display:none}.letter-scene{min-height:900px;padding:82px 22px 52px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 60%,#58401e44,transparent 70%),#080603}.paper{position:relative;width:min(100%,530px);padding:52px 29px 35px;background-color:#f4d9a3;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='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23975d18' opacity='.17' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"),linear-gradient(110deg,#e8bc70,#f9e5bb 30%,#f7e0b0 80%,#e7bb73);border-radius:6px 3px 9px 4px;color:#2d200f;box-shadow:0 28px 80px #0009,inset 0 0 45px #c38a3226;transform:rotate(-2deg);transform-style:preserve-3d;transition:transform .6s var(--ease);font:500 18px/1.4 var(--serif)}.paper h2{font-size:31px;text-align:center;letter-spacing:-.02em}.paper p{margin:22px 0}.paper-heart{position:absolute;right:22px;top:22px;font:27px Georgia,serif;color:#dda333;transform:rotate(15deg);text-shadow:1px 2px 2px #9b672a66}.paper-rule{height:19px;text-align:center;color:#9e6518;font-size:23px;line-height:19px;background:linear-gradient(transparent 49%,#b581352b 50%,transparent 54%);margin:12px 0 28px}.signature{text-align:center;color:#33220e;font-size:49px;line-height:.95;margin-top:30px}.signature span{display:block;font-size:36px;margin-top:9px}.signature:after{content:'';display:block;width:92px;height:9px;border-top:1px solid #845a29;border-radius:50%;margin:12px auto 0;transform:rotate(-6deg)}.letter-next{font-size:12px;letter-spacing:.08em;color:var(--muted);display:flex;align-items:center;gap:15px;min-height:44px;margin-top:44px}.letter-next .icon{width:18px;height:18px}.wide-only{display:none}.finale{min-height:850px;padding:57px 20px 30px;display:flex;align-items:center;flex-direction:column}.final-copy{text-align:center;z-index:2}.final-copy>p{font:500 22px/1.1 var(--serif)}.final-copy .heart-divider{margin:19px auto}.final-copy h2{font-size:67px;line-height:.74;letter-spacing:0}.final-copy h2 span{display:block;padding:8px 0 0 39px}.final-bouquet{height:440px;width:294px;max-width:100%;margin-top:14px}.final-bouquet .side-note{bottom:86px;right:-16px;font-size:29px}.promises{display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:420px;gap:12px;z-index:2;margin-top:15px}.promises>div{display:flex;align-items:center;flex-direction:column;text-align:center;gap:13px;color:#efd191;font-size:12px;line-height:1.4}.promises .icon{color:var(--gold);width:28px;height:28px}.closing{margin-top:33px;font-size:10px;letter-spacing:.13em;color:#af9462}.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}.js .reveal.is-visible{opacity:1;transform:none}.reason:nth-child(2){transition-delay:.12s}.reason:nth-child(3){transition-delay:.24s}
@media(min-width:430px) and (max-width:899px){.hero{padding-top:92px}.hero-bouquet{width:330px;height:495px}.hero h1{font-size:76px}.hero{min-height:900px}.final-bouquet{width:330px;height:495px}.finale{min-height:930px}.sunset{min-height:950px}.reminders{padding-top:90px;padding-bottom:90px}.reason{min-height:137px}.reminders h2{font-size:42px}.letter-intro{min-height:900px}.envelope-stage{width:360px;margin-top:140px}.paper{padding:60px 44px 44px;font-size:21px}.paper h2{font-size:38px}.letter-scene{min-height:1000px}}
@media(min-width:650px) and (max-width:899px){.hero{min-height:1024px}.hero-bouquet{width:360px;height:540px}.hero h1{font-size:85px}.hero .side-note{right:-65px;font-size:40px}.sunset-copy{max-width:420px;margin:auto}.sunset h2{font-size:44px}.sunset-second{font-size:37px}.sunset-message{font-size:22px}.sunset-note{right:12%;font-size:45px}.reminders{min-height:980px}.reason{padding:25px;gap:24px}.reasons{max-width:440px}.reason h3{font-size:28px}.reason p{font-size:14px}.reason-icon{width:70px}.gratitude{margin-top:40px}.finale{min-height:1000px}}
@media(min-width:900px){.header{padding:23px 5%;height:90px}.brand{font-size:12px}.brand .icon{width:29px;height:29px}.header-actions{gap:19px}.scene{min-height:768px}.hero{height:100svh;max-height:1200px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto 1fr;column-gap:30px;align-items:center;padding:115px max(6vw,calc((100vw - 1440px)/2)) 65px}.hero-copy{grid-column:1;grid-row:1/3;align-self:end;padding-bottom:40px}.hero h1{font-size:clamp(85px,7.8vw,130px)}.hero h1 strong{font-size:1.55em}.subtitle{font-size:28px;margin-top:20px}.hero-bouquet{grid-column:2;grid-row:1/4;width:100%;height:min(80svh,900px);max-height:100%;margin:0;align-self:center}.hero-bouquet .side-note{right:-8px;bottom:20%;font-size:41px}.hero-cta{grid-column:1;grid-row:3;align-self:start;justify-self:center;width:270px}.scroll-cue{position:absolute;bottom:22px;left:calc(50% - 22px)}.reminders{min-height:820px;justify-content:center;padding:100px 6% 80px}.reminders .section-heading h2{font-size:52px}.reasons{max-width:1100px;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:14px}.reason{min-height:230px;padding:30px 25px;gap:17px}.reason h3{font-size:29px}.reason p{font-size:14px;margin-top:12px}.reason-icon{width:48px}.gratitude{margin-top:35px}.gratitude h2{font-size:46px}.floral-edge{background-size:100%,820px auto;background-position:center,calc(50% - 660px) calc(100% + 820px)}.sunset{height:100svh;min-height:850px;padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:center}.sunset-image{width:60%;left:40%;object-position:center 63%}.sunset:after{background:linear-gradient(90deg,#080603 0%,#080603 35%,#08060315 63%,#08060300),linear-gradient(0deg,#080603,transparent 17%,transparent 90%,#08060370)}.sunset-copy{grid-column:1;padding:40px 20px 40px 5vw}.sunset h2{font-size:48px}.sunset-second{font-size:38px;margin-top:25px}.sunset-message{font-size:23px;line-height:1.4;margin-top:35px}.sunset-note{right:5%;top:49%;font-size:43px}.letter-intro{min-height:900px;padding:82px 20px 72px}.letter-intro h2{font-size:47px}.envelope-stage{width:365px;margin-top:135px;margin-bottom:50px}.envelope-insert{font-size:21px;padding-top:33px}.letter-scene{min-height:1000px;padding:95px 20px 65px}.paper{padding:60px 55px 40px;font-size:23px;line-height:1.35}.paper h2{font-size:40px}.signature{font-size:64px}.signature span{font-size:44px}.finale{min-height:850px;height:100svh;max-height:1100px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto;gap:20px;padding:95px max(8vw,calc((100vw - 1400px)/2)) 50px}.final-copy{grid-column:1;align-self:end;padding-bottom:25px}.final-copy>p{font-size:28px}.final-copy h2{font-size:100px}.final-copy .heart-divider{margin:28px auto}.final-bouquet{grid-column:2;grid-row:1/4;height:min(77svh,850px);width:100%;margin:0}.final-bouquet .side-note{font-size:36px;right:-15px;bottom:22%}.promises{grid-column:1;max-width:430px;justify-self:center;margin:10px 0 0}.promises>div{font-size:13px}.closing{grid-column:1;text-align:center;align-self:start;margin:17px 0 20px}}
@media(min-width:1600px){.hero-copy{padding-bottom:50px}.hero h1{font-size:140px}.hero-bouquet{height:850px}.hero-bouquet .side-note{right:0}.sunset-copy{padding-left:max(7vw,calc((100vw - 1450px)/2))}.sunset h2{font-size:62px}.sunset-second{font-size:45px}.sunset-message{font-size:27px}.final-copy h2{font-size:125px}.finale{padding-bottom:80px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.petals{display:none}.js .reveal{opacity:1;transform:none}.paper{transform:none}}
/* Physical paper details and room for the complete invitation. */
.envelope-insert{top:-40%}
.envelope-back:after,.envelope-front:before,.envelope-insert:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.15;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 fill='%23654824' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
.envelope-front{box-shadow:inset 0 -2px 4px #67431540}
.bouquet:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#080603,transparent 7%,transparent 93%,#080603)}
.bouquet .side-note{z-index:1}
@media(max-width:429px){.hero{padding-top:76px}.hero-bouquet{height:420px;width:280px}.hero .subtitle{margin-top:9px}}
.bouquet img{width:auto;max-width:100%;margin-inline:auto;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 7%,#000 92%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 7%,#000 92%,transparent);-webkit-mask-composite:source-in}
@media(min-width:900px){.hero-copy,.hero-cta{position:relative;top:clamp(50px,7vh,85px)}}