:root{--paper:#f8f3e9;--ink:#392c29;--red:#a83b3b;--muted:#7c7068}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}header,main,footer{max-width:1200px;margin:auto}header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;border-bottom:1px solid #ddd3c7}a{color:inherit;text-decoration:none}.brand{font-family:Georgia,serif;font-size:27px;font-style:italic}.brand span{color:var(--red);font-size:17px}nav{display:flex;gap:30px;font-size:12px}nav a:hover{color:var(--red)}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:55px;align-items:center;padding:80px 65px 85px}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:700;color:var(--red)}h1,h2{font-family:Georgia,serif;font-weight:400}h1{font-size:clamp(46px,5.5vw,73px);line-height:1.06;letter-spacing:-3px;margin:25px 0}em{color:var(--red);font-weight:400}.lead{font-size:14px;line-height:1.9;color:var(--muted)}.button{display:inline-flex;align-items:center;gap:25px;background:var(--red);color:white;border:0;padding:17px 24px;font-size:12px;cursor:pointer;margin-top:20px;border-radius:3px}.button:hover{background:#882b2b}.button span{font-size:18px}.handwritten{font-family:Georgia,serif;font-style:italic;color:var(--muted);font-size:13px;margin-top:25px}.hero-photo{position:relative;transform:rotate(4deg);background:#fffdf8;padding:16px 16px 4px;box-shadow:0 15px 35px #392c291c;max-width:395px;margin:auto;width:100%}.hero-photo img{width:100%;height:350px;object-fit:cover}.hero-photo>p{font-family:Georgia,serif;font-style:italic;text-align:center;font-size:17px;margin:20px 0}.tape{position:absolute;width:115px;height:34px;background:#d8c5a8a6;top:-14px;left:34%;transform:rotate(-8deg)}.stamp{position:absolute;right:-28px;bottom:12px;border:1px solid var(--red);border-radius:50%;height:87px;width:87px;display:grid;place-content:center;text-align:center;font-size:10px;line-height:1.7;color:var(--red);transform:rotate(-17deg);background:var(--paper)}.ribbon{display:flex;justify-content:space-evenly;align-items:center;border-top:1px solid #d7c8b7;border-bottom:1px solid #d7c8b7;padding:22px 15px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase}.ribbon b{color:var(--red)}.memories{padding:85px 48px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}h2{font-size:40px;letter-spacing:-1.5px;margin:15px 0}.section-heading>p{font-size:12px;color:var(--muted);line-height:1.8}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 24px}.photo{border:0;background:#fffdf9;padding:10px 10px 16px;text-align:left;color:var(--ink);cursor:pointer;box-shadow:0 3px 10px #392c290a;transition:transform .2s}.photo:nth-child(2),.photo:nth-child(5){transform:rotate(2deg)}.photo:nth-child(3){transform:rotate(-1.5deg)}.photo:hover{transform:translateY(-5px) rotate(0)}.photo img{width:100%;height:270px;object-fit:cover;display:block}.photo span{display:block;font-family:Georgia,serif;font-size:19px;padding:0 9px}.photo small{display:block;font-family:Arial,sans-serif;font-size:8px;letter-spacing:1.8px;color:var(--muted);margin:18px 0 10px}.gallery-hint{text-align:center;color:var(--muted);font-size:11px;margin-top:30px}.letter-section{text-align:center;padding:65px 20px;background:#eee5d8}.letter-section>p:not(.eyebrow){font-size:13px;color:var(--muted)}.envelope{width:180px;height:115px;margin:40px auto 5px;background:#e3d2bd;position:relative;overflow:hidden;box-shadow:0 8px 18px #392c2912}.envelope:before{content:'';position:absolute;left:0;top:0;border-left:90px solid transparent;border-right:90px solid transparent;border-top:70px solid #f0e1cd}.envelope span{position:absolute;z-index:1;top:45px;left:76px;background:var(--red);color:var(--paper);width:30px;height:30px;border-radius:50%;line-height:30px}.letter{max-width:650px;margin:35px auto 0;background:#fffdf7;padding:35px 48px;text-align:left;box-shadow:0 7px 20px #392c290a;font-family:Georgia,serif;font-size:17px;line-height:1.9}.salutation,.signature{font-style:italic;color:var(--red)}.salutation{font-size:27px}.closing{text-align:center;padding:65px 20px 50px}.closing>span{color:var(--red);font-size:45px}.closing p{font-size:13px;color:var(--muted)}.closing h2{font-size:65px;margin:5px}.text-button{border:0;border-bottom:1px solid var(--red);color:var(--red);background:transparent;cursor:pointer;padding:10px 0;font-family:Georgia,serif;font-style:italic;font-size:18px}#celebration-message{min-height:20px}footer{padding:25px 48px;border-top:1px solid #ddd3c7;font-size:10px;color:var(--muted);display:flex;justify-content:space-between}dialog{border:0;border-radius:4px;background:var(--paper);color:var(--ink);max-width:min(850px,94vw);padding:15px;max-height:94dvh}dialog::backdrop{background:#211916df}#large-photo{display:block;max-width:100%;max-height:70dvh;object-fit:contain;margin:auto}.modal-top,.modal-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:13px}.modal-top{margin-bottom:10px}.modal-bottom p{font-family:Georgia,serif;font-style:italic;text-align:center}dialog button{background:transparent;border:0;font-size:22px;cursor:pointer;color:var(--red);padding:10px}.heart{position:fixed;bottom:-30px;pointer-events:none;color:var(--red);z-index:10;animation:float 3s ease-out forwards}@keyframes float{to{transform:translateY(-105vh) rotate(25deg);opacity:0}}:focus-visible{outline:3px solid #bd7446;outline-offset:5px}@media(max-width:760px){header{padding:0 24px;height:80px}nav{gap:18px;font-size:10px}.hero{grid-template-columns:1fr;padding:45px 28px 65px;gap:45px}.intro{text-align:center}h1{font-size:57px;letter-spacing:-2px}.hero-photo{max-width:310px}.hero-photo img{height:290px}.stamp{right:-12px}.ribbon{font-size:8px;letter-spacing:.3px;gap:12px}.ribbon b:last-of-type,.ribbon span:last-child{display:none}.memories{padding:50px 20px}.section-heading{display:block}h2{font-size:34px}.section-heading>p br{display:none}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.photo img{height:200px}.photo span{font-size:16px;padding:0 3px}.photo small{font-size:7px;letter-spacing:1px}.letter{padding:24px;font-size:16px}.letter-section{padding:45px 20px}.closing h2{font-size:60px}footer{padding:22px 20px;font-size:9px;gap:15px}}@media(max-width:380px){.photo img{height:165px}h1{font-size:49px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body:not(.motion-enabled) *,body:not(.motion-enabled) *:before,body:not(.motion-enabled) *:after{animation:none!important;transition:none!important}}
/* Soft paper, sage and apricot scrapbook palette. */
:root{--paper:#fbf5e9;--ink:#49473b;--red:#79876b;--muted:#827b6d;--apricot:#e7ba91}
body{background-color:var(--paper);background-image:radial-gradient(#b5a68b20 .7px,transparent .7px);background-size:7px 7px}
.hero{gap:40px}.hero h1{font-size:clamp(43px,5vw,65px)}.button{background:#778568;color:#fffdf6}.button:hover{background:#637354}.eyebrow{color:#6f7f63}.tape{background:#e6bd91b3}.hero-photo{background:#fffdf5}.hero-photo>p{color:#758168}.stamp{background:#f6e5cf;border-color:#cda37e;color:#906e53}.ribbon{background:#f3e7d5;border-color:#e2cfb7}.ribbon b{color:#d2a17b}.photo{position:relative;background:#fffdf5;overflow:visible;box-shadow:1px 5px 14px #655c4210}.photo:before{content:'';position:absolute;z-index:1;width:65px;height:22px;top:-8px;left:calc(50% - 32px);background:#e3bb91b3;transform:rotate(-7deg)}.photo:nth-child(2n):before{background:#b9c5a6a6;transform:rotate(6deg)}.photo:nth-child(3n):after{content:'♡';position:absolute;right:12px;bottom:7px;color:#d1a079;font-family:Georgia,serif;font-size:21px}.gallery{row-gap:38px}.photo small{color:#818b72}.letter-section{background:#f0e6d5;border-top:1px solid #e5d6c1;border-bottom:1px solid #e5d6c1}.envelope{background:#ddbb96}.envelope:before{border-top-color:#f2d9b9}.envelope span{background:#8a9979}.letter{background:#fffdf5;border:1px solid #eee4d3;transform:rotate(-.4deg)}.signature{color:#748263}.time-keepsake{max-width:550px;margin:35px auto 22px;padding:30px 20px 20px;position:relative;background:#f1f2e7;border:1px solid #d5ddc7;box-shadow:3px 6px 0 #ebe0cb;transform:rotate(-1deg)}.time-keepsake:before{content:'';position:absolute;width:90px;height:26px;left:calc(50% - 45px);top:-13px;background:#e7c5a2b3;transform:rotate(5deg)}.corner-heart{position:absolute;right:17px;top:15px;color:#c79c78;font-size:27px}.closing .time-keepsake .eyebrow{font-size:9px;color:#6f7f63}.closing .start-date{font-family:Georgia,serif;font-style:italic;font-size:18px;margin:13px 0 20px}.time-values{display:flex;justify-content:center;align-items:center;gap:28px}.time-values div{display:flex;flex-direction:column;gap:7px;min-width:58px}.time-values strong{font-family:Georgia,serif;font-weight:400;font-size:49px;color:#728064;font-variant-numeric:tabular-nums}.time-values span{font-size:11px;letter-spacing:1px;color:#787764}.time-values i{color:#cfa47f;font-size:28px}.closing .time-note{font-family:Georgia,serif;font-style:italic;font-size:13px;margin-top:25px}.closing>span{color:#cba07a}footer{border-color:#e2d5bf}.text-button{color:#708163}.heart{color:#b4bd9e}@media(max-width:760px){.hero h1{font-size:48px;line-height:1.08}.gallery{row-gap:30px}.photo:before{width:55px;left:calc(50% - 27px)}.time-values{gap:15px}.time-values strong{font-size:43px}.time-keepsake{margin-top:35px}.corner-heart{right:10px;top:9px}.closing .time-keepsake .eyebrow{letter-spacing:1.5px}}@media(max-width:380px){.hero h1{font-size:41px}.time-values{gap:9px}}