:root { --ink:#173c32; --cream:#f7f1e7; --warm:#ebdfcc; --gold:#b5864c; --rose:#d78680; --serif:'Cormorant Garamond', Georgia, serif; --sans:'DM Sans', sans-serif; --script:'Great Vibes', cursive; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); }
main { overflow:hidden; }
.hero { min-height:100svh; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:42px 24px 32px; background:linear-gradient(155deg,#173c32 0%,#205043 57%,#346452 100%); color:#fff9f1; isolation:isolate; text-align:center; }
.hero::before,.hero::after { content:""; position:absolute; border:1px solid rgba(231,210,162,.25); border-radius:50%; z-index:-1; }
.hero::before { width:580px; height:580px; top:-230px; left:-270px; }.hero::after { width:440px; height:440px; bottom:-265px; right:-230px; }
.hero-glow { position:absolute; border-radius:50%; filter:blur(20px); opacity:.3; z-index:-1; }.glow-one { width:170px;height:170px;background:#d98d87;top:20%;right:-70px; }.glow-two { width:140px;height:140px;background:#c7a059;left:-55px;bottom:15%; }
.leaf { position:absolute; color:#e5b5a4; font-size:68px; opacity:.55; z-index:-1; }.leaf-one { left:10%; top:14%; transform:rotate(-25deg); }.leaf-two { right:11%; bottom:16%; transform:rotate(155deg); }
.eyebrow,.section-kicker { letter-spacing:.17em; text-transform:uppercase; font-size:10px; font-weight:600; margin:0; }.eyebrow { color:#ecd8aa; }.date { margin:18px 0 12px; color:#f2d9cb; font-family:var(--serif); font-size:16px; letter-spacing:.18em; }
h1,h2 { font-family:var(--serif); font-weight:500; line-height:.88; margin:0; } h1 { font-size:clamp(58px,17vw,88px); letter-spacing:-.055em; display:flex; flex-direction:column; } h1 em { font-family:var(--script); font-size:.78em; color:#eac395; font-weight:400; line-height:.7; }
.hero-photo { height:190px; width:min(72vw,300px); margin:30px 0 25px; border-radius:100px 100px 8px 8px; border:1px solid rgba(255,249,241,.55); }
.placeholder-photo { display:flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(135deg,rgba(234,216,192,.75),rgba(193,160,120,.78)),repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.13) 14px 15px); color:rgba(23,60,50,.75); font-family:var(--serif); font-size:15px; font-style:italic; letter-spacing:.03em; }
.hero .placeholder-photo { background:linear-gradient(135deg,rgba(216,180,138,.8),rgba(236,210,174,.85)),repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.2) 14px 15px); color:rgba(23,60,50,.84); }
button { font-family:var(--sans); cursor:pointer; }.begin-button { appearance:none; border:1px solid rgba(255,249,241,.65); background:transparent; border-radius:999px; color:#fff9f1; padding:13px 17px 13px 21px; display:flex; gap:14px; align-items:center; font-size:12px; letter-spacing:.04em; transition:.25s ease; }.begin-button i { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#efd3a0; color:#173c32; font-style:normal; }.begin-button:hover { background:rgba(255,255,255,.12); transform:translateY(-2px); }
section:not(.hero) { padding:92px 24px; }.intro { text-align:center; max-width:530px; margin:auto; }.section-kicker { color:var(--gold); margin-bottom:17px; }.intro h2,.garden h2,.then-now h2,.gallery h2 { font-size:clamp(47px,13vw,65px); letter-spacing:-.045em; }.intro h2 em,.garden h2 em,.then-now h2 em,.gallery h2 em { color:var(--rose); font-weight:500; }.intro-copy,.then-now-copy,.section-heading > p:not(.section-kicker),.gallery-note { font-family:var(--serif); font-size:19px; line-height:1.35; margin:25px auto 0; max-width:390px; }.ornament { color:var(--gold); font-size:20px; margin-top:31px; }
.garden { background:#eee5d5; }.section-heading { max-width:540px; margin:auto; }.section-heading > p:not(.section-kicker) { margin-left:0; }.garden-path { position:relative; min-height:370px; width:min(100%,430px); margin:42px auto 0; background:radial-gradient(ellipse at center bottom,rgba(181,134,76,.26),transparent 65%); }.garden-path::before { content:""; position:absolute; height:93%; width:2px; background:linear-gradient(var(--gold),transparent); left:50%; top:10px; transform:translateX(-50%); }
.bloom { position:absolute; width:53px; height:53px; border-radius:50%; border:0; color:#173c32; display:grid; place-items:center; font-family:var(--serif); font-size:16px; background:#dfa59e; box-shadow:0 5px 12px rgba(23,60,50,.15); transition:.25s ease; }.bloom::after { content:"✦"; position:absolute; font-size:47px; color:inherit; z-index:0; }.bloom span { position:relative; z-index:1; font-size:13px; font-weight:600; }.bloom:hover,.bloom.active { transform:scale(1.12); outline:2px solid rgba(181,134,76,.55); outline-offset:4px; }.bloom:nth-child(3n) { background:#e2c77c; }.bloom:nth-child(4n) { background:#a7c2a9; }.memory-card { background:#fffaf1; max-width:430px; margin:8px auto 0; padding:16px; box-shadow:0 13px 26px rgba(23,60,50,.09); }.memory-card-top { display:flex; align-items:baseline; justify-content:space-between; font-family:var(--serif); font-size:26px; }.memory-card-top span:last-child { font-size:16px; font-style:italic; color:var(--gold); }.memory-photo { margin-top:13px; height:180px; }.memory-card p { font-family:var(--serif); font-size:19px; line-height:1.25; margin:16px 4px 3px; }
.then-now { text-align:center; }.then-now-copy { margin-bottom:33px; }.comparison { display:grid; grid-template-columns:1fr 1fr; max-width:510px; margin:auto; padding-bottom:28px; position:relative; }.comparison-side { height:290px; }.comparison-side:first-child { border-radius:90px 0 0 4px; }.comparison-side.now { border-radius:0 90px 4px 0; background:linear-gradient(135deg,rgba(132,172,148,.78),rgba(220,192,147,.88)),repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.13) 14px 15px); }.comparison-labels { position:absolute; bottom:0; display:flex; justify-content:space-between; width:100%; padding:0 9px; color:var(--gold); font-size:11px; font-weight:600; letter-spacing:.13em; }
.gallery { background:#173c32; color:#fff9f1; text-align:center; }.gallery .section-kicker { color:#e9c783; }.gallery h2 em { color:#f1b7ae; }.gallery-grid { display:grid; gap:9px; grid-template-columns:1fr 1fr; grid-auto-rows:124px; max-width:600px; margin:35px auto 0; }.gallery-photo { min-height:0; color:rgba(23,60,50,.8); }.gallery-photo.tall { grid-row:span 2; border-radius:75px 3px 3px 3px; }.gallery-photo.wide { grid-column:span 2; border-radius:3px 3px 75px 3px; }.gallery-note { color:#e4d4bd; font-size:17px; }
.celebration { min-height:84svh; background:radial-gradient(circle at 50% 42%,#355f4d 0%,#173c32 66%); color:#fffaf1; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }.celebration::before { content:""; position:absolute; inset:18px; border:1px solid rgba(234,195,149,.32); }.celebration .section-kicker { color:#ead09e; }.celebration h2 { font-size:clamp(66px,19vw,105px); line-height:.72; }.celebration h2 span { color:#f0c4ad; font-family:var(--script); font-size:.89em; font-weight:400; }.celebration p:not(.section-kicker) { font-family:var(--serif); font-size:20px; line-height:1.25; max-width:350px; margin:36px auto 28px; }.celebrate-button { border:0; color:#173c32; padding:14px 21px; border-radius:99px; font-size:12px; font-weight:600; background:#f0d19b; z-index:1; }.celebrate-button span { font-size:17px; margin-left:5px; }.petals { position:absolute; inset:0; background-image:radial-gradient(circle at 20% 20%,#efa99d 0 3px,transparent 4px),radial-gradient(circle at 81% 23%,#eac984 0 3px,transparent 4px),radial-gradient(circle at 12% 70%,#eac984 0 3px,transparent 4px),radial-gradient(circle at 88% 77%,#efa99d 0 3px,transparent 4px); opacity:.75; }.celebration-overlay { pointer-events:none; position:fixed; z-index:20; inset:0; overflow:hidden; }.falling-petal { position:absolute; top:-30px; width:12px; height:17px; border-radius:12px 0 12px 0; background:#efb0a9; animation:fall linear forwards; }.falling-petal:nth-child(3n) { background:#f2d58c; } @keyframes fall { to { transform:translate(var(--drift),110vh) rotate(520deg); opacity:0; } }
.section-reveal { animation:appear .8s ease both; animation-timeline:view(); animation-range:entry 4% cover 35%; } @keyframes appear { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@media (min-width:680px) { .hero-photo { height:220px; }.garden-path { min-height:400px; }.gallery-grid { grid-auto-rows:160px; }.comparison-side { height:340px; } }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; scroll-behavior:auto !important; } }

/* Supplied photographs and full-screen viewing */
.photo-button { overflow:hidden; border:0; padding:0; background:transparent; cursor:zoom-in; position:relative; }
.photo-button img { width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; transition:transform .35s ease; }
.photo-button:hover img { transform:scale(1.035); }
.memory-photo { width:100%; border:0; padding:0; overflow:hidden; }
.memory-photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 30%; }
.memory-photo:not(:disabled) { cursor:zoom-in; }
.comparison-side.now { background:none; }
.lightbox { width:min(95vw,900px); max-height:94svh; padding:14px; border:0; background:rgba(16,31,27,.96); color:white; box-shadow:0 22px 60px rgba(0,0,0,.55); }
.lightbox::backdrop { background:rgba(9,21,17,.78); backdrop-filter:blur(5px); }
.lightbox img { display:block; width:auto; max-width:100%; max-height:82svh; margin:auto; object-fit:contain; }
.lightbox p { margin:11px 0 1px; text-align:center; color:#e3d1b7; font-size:11px; }
.lightbox-close { position:absolute; right:19px; top:18px; width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:#173c32; font-size:29px; line-height:1; z-index:1; }
.volume-note { position:fixed; left:50%; bottom:24px; z-index:30; width:min(86vw,360px); margin:0; padding:12px 18px; border-radius:999px; background:rgba(23,60,50,.95); box-shadow:0 10px 25px rgba(0,0,0,.23); color:#fffaf1; font-size:12px; line-height:1.3; text-align:center; transform:translate(-50%,140px); opacity:0; transition:transform .35s ease,opacity .35s ease; pointer-events:none; }.volume-note.visible { transform:translate(-50%,0); opacity:1; }
.music-control { position:fixed; right:16px; bottom:18px; z-index:15; padding:10px 13px; border:1px solid rgba(23,60,50,.14); border-radius:999px; background:#fffaf1; color:#173c32; box-shadow:0 5px 18px rgba(23,60,50,.15); font-family:var(--sans); font-size:12px; }.music-control[hidden] { display:none; }