:root { --ivory:#f9f4eb; --paper:#fffdf9; --blush:#e9c7c1; --rose:#b86c70; --burgundy:#592631; --wine:#311319; --gold:#b58b50; --ink:#292225; --muted:#796c69; --line:rgba(89,38,49,.16); --serif: Georgia, 'Times New Roman', serif; --sans: 'Segoe UI', Arial, sans-serif; --space:clamp(1.25rem,4vw,4rem); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--ivory); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65; } body.no-scroll { overflow:hidden; }
.progress { position:fixed; z-index:20; inset:0 0 auto; height:3px; background:rgba(255,255,255,.25); }.progress span { display:block; height:100%; width:0; background:var(--gold); transition:width .1s linear; }
.site-header { position:absolute; top:0; z-index:10; width:100%; display:flex; justify-content:space-between; align-items:center; padding:1.2rem var(--space); color:white; }.monogram { color:inherit; text-decoration:none; width:2.25rem; height:2.25rem; display:grid; place-items:center; border:1px solid rgba(255,255,255,.7); border-radius:50%; font-family:var(--serif); font-size:1.35rem; font-style:italic; }.site-header nav { display:flex; gap:clamp(.6rem,2vw,1.5rem); }.site-header nav a { color:inherit; font-size:.72rem; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }.music-toggle { color:white; border:1px solid rgba(255,255,255,.55); background:rgba(55,22,29,.25); border-radius:999px; padding:.45rem .7rem; font:600 .71rem var(--sans); letter-spacing:.04em; cursor:pointer; }.music-toggle[aria-pressed=true] { background:var(--gold); border-color:var(--gold); animation:pulse 1.7s infinite; }
.hero { min-height:100svh; position:relative; display:grid; place-items:center; overflow:hidden; color:#fff; }.hero-image { position:absolute; inset:0; background:linear-gradient(140deg, #51202d 0%,#a86167 48%,#d8b58b 100%); background-image:linear-gradient(120deg,rgba(35,12,19,.35),rgba(77,31,40,.12)),url('assets/cover.jpg'); background-size:cover; background-position:center; transform:scale(1.02); }.hero-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(26,8,13,.58),rgba(36,10,18,.13) 66%,rgba(26,8,13,.3)); }.hero-content { position:relative; text-align:center; width:min(760px,88vw); margin-top:3rem; }.eyebrow { margin:0 0 .75rem; color:var(--rose); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; }.eyebrow.light { color:#f5d6bb; }.hero h1,h2 { font-family:var(--serif); font-weight:400; line-height:1.08; }.hero h1 { margin:.5rem 0 1.2rem; font-size:clamp(2.7rem,7vw,5.8rem); letter-spacing:-.04em; }.hero-subtitle { margin:0 auto 2.25rem; max-width:34rem; font-size:clamp(1rem,2vw,1.2rem); }.hero-note { position:absolute; bottom:1.4rem; font:italic .9rem var(--serif); opacity:.78; }
.button { display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem; border:0; cursor:pointer; font:700 .72rem var(--sans); letter-spacing:.13em; text-transform:uppercase; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button-light { background:var(--paper); color:var(--burgundy); }.button-dark { background:var(--burgundy); color:white; }
.introduction,.message { max-width:870px; padding:clamp(5rem,11vw,10rem) var(--space); margin:auto; text-align:center; }.introduction h2,.message h2,.timeline-intro h2 { font-size:clamp(2.3rem,5vw,4.4rem); margin:0 0 1.5rem; letter-spacing:-.04em; }.intro-copy { margin:auto; max-width:650px; color:var(--muted); font-size:clamp(1.05rem,2vw,1.25rem); }
.chapters { overflow:hidden; }.chapter { padding:clamp(4.5rem,9vw,8.5rem) var(--space); }.chapter:nth-child(even) { background:#f1e2d9; }.chapter-inner { max-width:1200px; margin:auto; }.chapter-heading { max-width:580px; margin-bottom:2.5rem; }.chapter-number { font:italic 1.1rem var(--serif); color:var(--gold); }.chapter h2 { margin:.25rem 0 .35rem; font-size:clamp(2.4rem,5vw,4.6rem); letter-spacing:-.045em; }.chapter-subtitle { font:italic 1.15rem var(--serif); color:var(--burgundy); }.chapter-intro { color:var(--muted); max-width:560px; }
.gallery { display:grid; gap:1rem; grid-template-columns:repeat(12,1fr); }.memory-card { grid-column:span 6; position:relative; margin:0; min-height:250px; background:#decac2; overflow:hidden; cursor:zoom-in; }.memory-card:first-child { grid-column:span 7; }.memory-card:nth-child(2) { grid-column:span 5; margin-top:3rem; }.memory-card img { display:block; width:100%; height:100%; min-height:250px; object-fit:cover; transition:transform .5s; }.memory-card:hover img { transform:scale(1.04); }.memory-card figcaption { position:absolute; inset:auto 0 0; padding:2.5rem 1.1rem 1rem; background:linear-gradient(transparent,rgba(34,15,20,.8)); color:#fff; }.memory-card figcaption strong { display:block; font:400 1.25rem var(--serif); }.memory-card figcaption span { display:block; font-size:.78rem; opacity:.85; }.empty-memory { grid-column:span 12; min-height:190px; display:grid; place-items:center; padding:2rem; color:var(--burgundy); text-align:center; background:repeating-linear-gradient(135deg,rgba(184,108,112,.1),rgba(184,108,112,.1) 10px,transparent 10px,transparent 20px); border:1px dashed rgba(89,38,49,.35); }.empty-memory p { max-width:28rem; }.empty-memory code { font-size:.85em; }
.timeline-section { padding:clamp(5rem,10vw,9rem) var(--space); background:var(--wine); color:#f9f0e7; }.timeline-intro { max-width:650px; margin:0 auto 4rem; text-align:center; }.timeline-intro .eyebrow { color:#e5b48a; }.timeline-intro h2 { margin-bottom:1rem; }.timeline-intro p:last-child { color:#d5bdb7; }.timeline { position:relative; max-width:740px; margin:auto; padding:0; list-style:none; }.timeline:before { content:''; position:absolute; top:12px; bottom:12px; left:calc(50% - .5px); width:1px; background:rgba(229,180,138,.55); }.timeline li { width:50%; padding:0 3rem 3.8rem 0; position:relative; text-align:right; }.timeline li:nth-child(even) { margin-left:50%; padding:2.6rem 0 1.2rem 3rem; text-align:left; }.timeline li:after { content:'✦'; position:absolute; right:-.54rem; top:0; color:#e5b48a; font-size:1rem; }.timeline li:nth-child(even):after { left:-.54rem; right:auto; }.timeline-label { display:block; margin-bottom:.4rem; color:#e5b48a; font-size:.67rem; letter-spacing:.14em; text-transform:uppercase; }.timeline h3 { margin:0 0 .35rem; font:400 1.55rem var(--serif); }.timeline p { margin:0; color:#d5bdb7; font-size:.92rem; }
.message { max-width:800px; }.message p:last-child { font:italic clamp(1.2rem,2.5vw,1.55rem) var(--serif); color:var(--burgundy); }.letter-section { padding:clamp(4rem,9vw,8rem) var(--space); background:linear-gradient(#e7cfc5,#c89995); }.letter { position:relative; max-width:760px; margin:auto; padding:clamp(2rem,7vw,5.5rem); background:var(--paper); box-shadow:14px 15px 0 rgba(89,38,49,.14); }.letter:before { content:'❦'; position:absolute; top:1.4rem; right:1.8rem; color:var(--gold); font-size:2rem; }.letter-mark { margin:0 0 1.8rem; color:var(--rose); font:italic 1.1rem var(--serif); }.letter h2 { margin:0 0 2rem; color:var(--burgundy); font-size:clamp(2.5rem,5vw,4.5rem); }.letter-body { max-width:570px; color:#4d4140; font:1.14rem/1.85 var(--serif); }.letter-body p { margin:0 0 1.2rem; }.letter .button { margin-top:1rem; } footer { padding:1.6rem var(--space); text-align:center; color:#725d5d; background:#eee1d6; font:italic .95rem var(--serif); }.wife-name { color:var(--burgundy); }
.lightbox { width:100vw; max-width:none; height:100vh; height:100dvh; margin:0; padding:clamp(1rem,3vw,3rem); border:0; background:rgba(26,8,13,.97); color:white; }.lightbox::backdrop { background:rgba(26,8,13,.85); }.lightbox figure { height:100%; margin:0; display:grid; grid-template-rows:minmax(0,1fr) auto; justify-items:center; }.lightbox img { width:auto; max-width:100%; height:100%; max-height:calc(100dvh - 170px); object-fit:contain; }.lightbox figcaption { width:min(700px,100%); padding-top:.8rem; text-align:center; }.lightbox figcaption .eyebrow { color:#e5b48a; margin-bottom:.1rem; }.lightbox h2 { margin:.1rem 0; font-size:clamp(1.5rem,3vw,2.3rem); }.lightbox figcaption p:last-child { margin:.2rem 0; color:#dac7c1; }.lightbox button { position:absolute; z-index:2; border:0; color:white; cursor:pointer; }.lightbox-close { top:1rem; right:1.3rem; background:transparent; font-size:2.4rem; }.lightbox-nav { top:50%; transform:translateY(-50%); width:3rem; height:3rem; border-radius:50%!important; background:rgba(255,255,255,.15); font-size:1.2rem; }.lightbox-nav:hover { background:var(--rose); }.previous { left:1rem; }.next { right:1rem; }.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }.reveal.is-visible { opacity:1; transform:none; } :focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
@keyframes pulse { 50% { box-shadow:0 0 0 6px rgba(181,139,80,.22); } }
.lightbox video { display:none; width:auto; max-width:100%; height:100%; max-height:calc(100dvh - 170px); object-fit:contain; }
.memory-card video { display:block; width:100%; height:100%; min-height:250px; object-fit:cover; background:var(--wine); }
.hero-image { background-image:linear-gradient(120deg,rgba(35,12,19,.35),rgba(77,31,40,.12)),url('assets/web/photos/sunlight-portrait.jpg'); }
.love-sky,.birthday-confetti { position:fixed; inset:0; z-index:30; pointer-events:none; overflow:hidden; }.love-sky { position:absolute; z-index:1; }.love-mark { position:absolute; bottom:-3rem; color:#ef233c; opacity:.62; font-size:var(--size); animation:love-float var(--duration) ease-in-out infinite; animation-delay:var(--delay); }.confetti-piece { position:absolute; top:-1.5rem; left:var(--left); width:var(--width); height:var(--height); border-radius:var(--round); background:var(--color); transform:rotate(var(--rotate)); animation:confetti-fall var(--duration) cubic-bezier(.18,.75,.4,1) forwards; animation-delay:var(--delay); }
@keyframes love-float { 0% { transform:translate3d(0,0,0) rotate(-8deg); opacity:0; } 15%,82% { opacity:.55; } 100% { transform:translate3d(var(--drift),-110svh,0) rotate(12deg); opacity:0; } }
.scroll-note { position:fixed; z-index:25; right:1rem; bottom:1.2rem; max-width:230px; padding:.8rem 1rem; color:#fff8f1; background:rgba(89,38,49,.94); box-shadow:0 10px 28px rgba(49,19,25,.22); font:italic 1rem var(--serif); opacity:0; transform:translateY(1rem); pointer-events:none; transition:opacity .35s ease,transform .35s ease; }.scroll-note.is-shown { opacity:1; transform:translateY(0); }.scroll-note:before { content:'♥'; margin-right:.45rem; color:#f2bdba; font-style:normal; }.confetti-piece { width:auto; height:auto; background:transparent; border-radius:0; color:var(--color); font:normal var(--size)/1 Georgia,serif; text-shadow:0 1px 5px rgba(49,19,25,.22); }
.introduction,.message,.chapter { position:relative; }
.love-note { position:absolute; z-index:2; max-width:190px; margin:0; padding:.7rem .85rem; color:var(--burgundy); background:rgba(255,253,249,.9); box-shadow:3px 4px 0 rgba(89,38,49,.15); font:italic 1rem/1.3 var(--serif); transform:rotate(var(--tilt)); }.love-note:before { content:'♥'; display:block; margin-bottom:.15rem; color:#d90429; font-size:.8rem; font-style:normal; }.note-one { right:7%; bottom:12%; --tilt:3deg; }.note-two { right:6%; top:16%; --tilt:-4deg; }.note-three { left:5%; bottom:9%; --tilt:3deg; }.note-four { right:6%; bottom:8%; --tilt:-3deg; }.note-five { left:5%; top:15%; --tilt:4deg; }
@keyframes confetti-fall { to { transform:translate3d(var(--drift),110svh,0) rotate(calc(var(--rotate) + 680deg)); opacity:0; } }
.site-header nav a { opacity:.75; transition:opacity .2s; }.site-header nav a[aria-current=true],.site-header nav a:hover { opacity:1; text-decoration:underline; text-underline-offset:.4rem; }
@media (max-width:600px) { .site-header nav { display:none; }.music-toggle { padding:.4rem .55rem; }.music-toggle #music-label { display:none; }.chapter { padding-inline:1.15rem; }.memory-card,.memory-card:first-child,.memory-card:nth-child(2) { grid-column:span 12; margin-top:0; min-height:230px; }.timeline:before { left:7px; }.timeline li,.timeline li:nth-child(even) { width:auto; margin-left:0; padding:0 0 2.6rem 2rem; text-align:left; }.timeline li:nth-child(even) { padding-top:0; }.timeline li:after,.timeline li:nth-child(even):after { left:0; right:auto; }.lightbox-nav { top:auto; bottom:1.4rem; transform:none; }.previous { left:calc(50% - 3.5rem); }.next { right:calc(50% - 3.5rem); } }
@media (max-width:600px) { .love-note { position:relative; inset:auto; display:block; width:fit-content; max-width:260px; margin:1.5rem auto 0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .reveal { opacity:1; transform:none; } .love-sky,.birthday-confetti { display:none; } }