:root { --ivory:#fbf1ec; --rose:#d88c9a; --plum:#6b3f4b; --sage:#a8b79a; --gold:#c9a66b; --soft-rose:#f0cbd2; --paper:#fffaf7; }
* { box-sizing:border-box; }
html, body { min-height:100%; margin:0; }
body { background:var(--ivory); color:var(--plum); font-family:Nunito, sans-serif; }
button { font:inherit; }
.love-story { isolation:isolate; display:grid; min-height:100svh; overflow:hidden; padding:clamp(1.5rem,5vw,4rem); position:relative; place-items:center; }
.paper-grain { 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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E"); inset:0; opacity:.11; pointer-events:none; position:absolute; z-index:-1; }
.chapter { display:none; max-width:620px; text-align:center; width:100%; }
.chapter--active { animation:arrive .65s cubic-bezier(.22,.8,.28,1) both; display:grid; min-height:min(670px,85svh); place-content:center; }
.eyebrow { color:var(--rose); font-size:.68rem; font-weight:700; letter-spacing:.18em; margin:0 0 .7rem; text-transform:uppercase; }
.handwritten, .signature, .script-line { font-family:Parisienne, cursive; font-weight:400; }
.handwritten { font-size:clamp(3.6rem,13vw,6.7rem); line-height:.88; margin:0; }
h2 { font-family:"Cormorant Garamond", serif; font-size:clamp(2.35rem,7vw,4.25rem); font-weight:600; letter-spacing:-.035em; line-height:.95; margin:.2rem auto 1.35rem; }
.chapter-content > p:not(.eyebrow):not(.script-line):not(.subtle-copy) { font-size:clamp(1rem,2.5vw,1.15rem); line-height:1.75; margin:0 auto 1rem; max-width:510px; }
.chapter-number { color:var(--gold); font-size:.7rem; font-weight:700; letter-spacing:.15em; margin:0 0 1.5rem; }
.script-line { color:var(--rose); font-size:clamp(1.7rem,5vw,2.2rem); margin:1.15rem 0 0; }
.tap-note, .subtle-copy { color:#a87682; font-size:.85rem; margin:1.25rem 0 0; }
.envelope { background:none; border:0; cursor:pointer; display:block; height:190px; margin:1.3rem auto .4rem; padding:0; position:relative; transform:rotate(-2deg); transition:transform .35s ease; width:min(290px,80vw); }
.envelope:hover { transform:rotate(1deg) translateY(-5px); }.envelope:focus-visible, .next-button:focus-visible, .reason-card:focus-visible, .miss-button:focus-visible, .confetti-button:focus-visible, .music-control:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.envelope__back, .envelope__front { background:#e8b4be; border:1px solid #d88c9a; inset:36px 0 0; position:absolute; }
.envelope__back { box-shadow:0 14px 27px #6b3f4b26; }.envelope__front { clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%); z-index:2; }
.envelope__letter { background:var(--paper); box-shadow:0 1px 4px #6b3f4b19; display:grid; font-family:"Cormorant Garamond",serif; font-size:1rem; inset:16px 14px auto; min-height:125px; padding:29px 1rem 1rem; position:absolute; transform:rotate(1deg); transition:transform .7s ease; z-index:1; }.envelope__letter strong { font-family:Parisienne,cursive; font-size:1.6rem; font-weight:400; }
.envelope__seal { align-items:center; background:var(--gold); border:3px double #e9c994; border-radius:50%; box-shadow:0 3px 5px #6b3f4b33; color:#fff7e9; display:flex; font-family:Parisienne,cursive; font-size:1.8rem; height:48px; justify-content:center; left:calc(50% - 24px); position:absolute; top:74px; width:48px; z-index:3; }.envelope:hover .envelope__letter { transform:rotate(1deg) translateY(-12px); }
.chapter-nav { align-items:center; display:flex; justify-content:space-between; margin:2rem auto 0; max-width:360px; }.next-button,.previous-button { background:transparent; border:0; color:var(--plum); cursor:pointer; font-size:.88rem; font-weight:700; letter-spacing:.05em; margin:0; padding:.75rem; }.next-button span,.previous-button span { color:var(--rose); font-size:1.35rem; transition:transform .2s ease; }.next-button span { padding-left:.25rem; }.previous-button span { padding-right:.25rem; }.next-button:hover span { display:inline-block; transform:translateX(5px); }.previous-button { color:#a87682; font-weight:600; }.previous-button:hover span { display:inline-block; transform:translateX(-5px); }.chapter-nav--final { justify-content:center; margin-top:.25rem; }
.reason-garden { display:flex; gap:.65rem; justify-content:center; margin:1.25rem auto .8rem; }.reason-card { background:#fff8f5a8; border:1px solid #e9c5cb; border-radius:100px 100px 28px 28px; color:var(--plum); cursor:pointer; min-height:145px; padding:1rem .65rem; transition:transform .25s ease, background .25s ease; width:31%; }.reason-card:hover, .reason-card.is-open { background:#fffafa; transform:translateY(-7px) rotate(-2deg); }.reason-card:nth-child(2):hover, .reason-card:nth-child(2).is-open { transform:translateY(-7px) rotate(2deg); }.reason-card__flower { color:var(--rose); display:block; font-size:2.8rem; line-height:1; margin-bottom:.65rem; }.reason-card:nth-child(2) .reason-card__flower { color:var(--gold); }.reason-card:nth-child(3) .reason-card__flower { color:#c78090; }.reason-card__title { font-family:"Cormorant Garamond",serif; font-size:1.08rem; font-weight:600; }.reason-message { color:#855361; font-family:"Cormorant Garamond",serif; font-size:1.25rem; font-style:italic; line-height:1.35; margin:1rem auto 0; max-width:460px; min-height:3.4em; }
.heart-orbit { color:var(--rose); font-size:1.8rem; height:60px; margin:.2rem auto .8rem; position:relative; width:160px; }.heart-orbit span { animation:float 3s ease-in-out infinite; position:absolute; }.heart-orbit span:nth-child(1) { left:18px; top:22px; }.heart-orbit span:nth-child(2) { animation-delay:-1.1s; color:var(--gold); font-size:1.25rem; left:72px; top:0; }.heart-orbit span:nth-child(3) { animation-delay:-2s; left:126px; top:24px; }
.miss-button,.confetti-button { background:#f9e2e5; border:1px solid #dca0aa; border-radius:999px; color:var(--plum); cursor:pointer; font-size:.85rem; font-weight:700; margin:1.25rem auto 0; padding:.75rem 1.1rem; transition:background .2s ease,transform .2s ease; }.miss-button:hover,.confetti-button:hover { background:#f2cbd1; transform:translateY(-2px); }.miss-button span,.confetti-button span { color:var(--rose); font-size:1.1rem; }.miss-message { color:var(--rose); font-family:Parisienne,cursive; font-size:1.8rem; min-height:1.5em; margin:.5rem 0 0; }
.promise-list { border-bottom:1px solid #dfc6b7; border-top:1px solid #dfc6b7; margin:1.5rem auto; max-width:460px; padding:.7rem 0; text-align:left; }.promise-list p { font-size:.92rem; line-height:1.45; margin:.7rem 0; }.promise-list span { color:var(--gold); padding-right:.45rem; }
.letter-wrap { max-width:520px; position:relative; }.final-letter { background:var(--paper); box-shadow:0 12px 35px #6b3f4b1c; padding:clamp(2rem,7vw,3.8rem) clamp(1.5rem,7vw,4.4rem); position:relative; text-align:left; }.final-letter:before { border:1px solid #ead2c2; content:""; inset:10px; pointer-events:none; position:absolute; }.final-letter h2 { font-size:clamp(2.1rem,7vw,3.2rem); margin-bottom:1rem; }.final-letter > p:not(.eyebrow):not(.letter-close):not(.signature) { font-size:.97rem; line-height:1.7; position:relative; }.letter-close { margin:1.4rem 0 0; position:relative; }.signature { color:var(--rose); font-size:2.3rem; margin:.1rem 0 0; position:relative; }.confetti-button { margin-top:1.2rem; }
.progress { background:#ead8d2; border-radius:99px; bottom:1.2rem; height:3px; left:50%; overflow:hidden; position:absolute; transform:translateX(-50%); width:90px; }.progress__fill { background:var(--rose); border-radius:inherit; display:block; height:100%; transition:width .5s ease; width:0%; }
.music-control { align-items:center; background:#fffaf7c9; border:1px solid #e7c8c0; border-radius:999px; color:var(--plum); cursor:pointer; display:flex; font-size:.73rem; font-weight:700; gap:.35rem; padding:.45rem .65rem; position:absolute; right:1.4rem; top:1.4rem; z-index:2; }.music-control.is-playing .music-icon { animation:pulse .9s ease-in-out infinite alternate; color:var(--rose); }
.botanical { height:230px; opacity:.6; pointer-events:none; position:absolute; width:210px; z-index:-1; }.botanical--top { right:-44px; top:-15px; transform:rotate(22deg); }.botanical--bottom { bottom:-47px; left:-43px; transform:rotate(204deg); }.stem { background:var(--sage); height:190px; left:90px; position:absolute; top:15px; transform:rotate(-18deg); width:2px; }.leaf { background:var(--sage); border-radius:100% 0 100% 0; height:39px; position:absolute; width:20px; }.leaf--one { left:57px; top:84px; transform:rotate(13deg); }.leaf--two { left:90px; top:135px; transform:rotate(113deg); }.flower { color:var(--rose); font-size:3.8rem; line-height:1; position:absolute; }.flower--one { left:84px; top:0; }.flower--two { color:var(--gold); font-size:2.3rem; left:41px; top:52px; }
.confetti { animation:confetti-fall 2.9s ease-out forwards; font-size:var(--size); left:var(--left); pointer-events:none; position:fixed; top:-2rem; z-index:5; }
.sr-only { height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; clip:rect(0,0,0,0); white-space:nowrap; }
@keyframes arrive { from { opacity:0; transform:translateY(18px) scale(.985); } to { opacity:1; transform:none; } } @keyframes float { 50% { transform:translateY(-10px) rotate(8deg); } } @keyframes pulse { to { transform:scale(1.2); } } @keyframes confetti-fall { to { opacity:0; transform:translate(var(--drift),110svh) rotate(600deg); } }
@media (max-width:430px) { .love-story { padding:1.25rem; }.chapter--active { min-height:82svh; }.reason-card { min-height:130px; padding:.8rem .35rem; }.reason-card__flower { font-size:2.35rem; }.reason-card__title { font-size:.95rem; }.botanical { opacity:.45; transform:scale(.75); }.final-letter { padding:2.5rem 1.6rem; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }