@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
:root{--cream:#f7f0e7;--paper:#fffaf4;--ink:#49372f;--muted:#8e776b;--rose:#b77b70;--rose-dark:#966057;--line:#e7d7ca;--gold:#c7a27c}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;font-size:15px;line-height:1.75}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}.wrap{width:min(1160px,calc(100% - 48px));margin-inline:auto}.topline{height:5px;background:linear-gradient(90deg,#d8b69b,var(--rose),#e7cbb6)}.nav{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-family:"Playfair Display",serif;font-size:24px;letter-spacing:.08em}.brand span{color:var(--rose);font-size:17px}.nav nav{display:flex;gap:32px;font-size:12px;letter-spacing:.06em;color:var(--muted)}.nav nav a:hover,.footer a:hover{color:var(--rose-dark)}.music-button{border:1px solid var(--line);background:transparent;border-radius:99px;padding:10px 16px;color:var(--ink);font:inherit;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:9px}.music-icon{color:var(--rose);font-size:18px}.music-button[aria-pressed=true]{background:#f0e0d7;border-color:#d7b5a9}.hero{min-height:640px;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;padding-top:35px;padding-bottom:70px}.hero-copy{position:relative;z-index:2;padding:30px 0 55px}.eyebrow,.section-number{font-size:10px;letter-spacing:.2em;font-weight:600;color:var(--rose-dark)}.tiny-heart{font-size:17px;margin-right:8px}.hero h1,.section-heading h2,.letter h2,.closing h2{font-family:"Playfair Display",serif;font-weight:400;letter-spacing:-.045em;line-height:1.05}.hero h1{font-size:clamp(56px,7vw,92px);margin:25px 0 20px}.hero h1 em,.hero-subtitle em,.intro-quote em,.section-heading h2 em,.letter h2 em,.closing h2 em{color:var(--rose);font-weight:400}.hero-subtitle{font-family:"Playfair Display",serif;font-size:23px;line-height:1.55;margin:0 0 26px}.date-lockup{display:flex;align-items:center;gap:15px;color:var(--muted);font-size:11px;letter-spacing:.2em;margin:26px 0 30px}.date-line{width:35px;height:1px;background:var(--gold)}.primary-link{display:inline-flex;align-items:center;gap:28px;background:var(--rose);color:white;padding:14px 20px;font-size:11px;letter-spacing:.08em;transition:background .2s}.primary-link:hover{background:var(--rose-dark)}.primary-link span{font-size:17px}.anniversary-count{font-size:11px;color:var(--muted);letter-spacing:.05em;margin-top:18px}.anniversary-count span{color:var(--rose);padding:0 7px}.hero-art{position:relative;min-height:480px;display:flex;align-items:center;justify-content:center}.image-frame{width:74%;height:440px;padding:12px;border:1px solid #d7b9a4;transform:rotate(2deg);position:relative;z-index:1;background:var(--paper);box-shadow:0 25px 65px #7d5a3d18}.image-frame img{filter:saturate(.78)}.frame-note{position:absolute;z-index:2;bottom:20px;left:1%;background:var(--paper);padding:15px 23px;box-shadow:0 8px 24px #5e403016;font-family:"Playfair Display",serif;font-size:18px;line-height:1.3;transform:rotate(-4deg)}.frame-note em{color:var(--rose)}.orbit{position:absolute;border:1px solid #d9bba5;border-radius:50%;width:95%;height:90%;transform:rotate(-28deg)}.orbit-two{width:85%;height:100%;transform:rotate(24deg);border-color:#eadbd0}.hero-spark{position:absolute;right:3%;top:9%;font-size:34px;color:var(--gold)}.hero-bottom{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.18em;color:#a58e80}.section-pad{padding:110px 0}.intro{background:var(--cream);text-align:center}.intro-inner{max-width:760px}.intro-quote{font-family:"Playfair Display",serif;font-size:clamp(30px,4vw,48px);line-height:1.35;margin:25px 0}.intro-text{max-width:650px;margin:0 auto;color:var(--muted);font-size:14px}.ornament{display:block;color:var(--gold);font-size:26px;margin-top:28px}.section-heading{max-width:620px;margin-bottom:60px}.section-heading h2,.letter h2{font-size:clamp(38px,5vw,58px);margin:18px 0}.section-heading p{color:var(--muted);font-size:14px}.centered{text-align:center;margin-left:auto;margin-right:auto}.timeline{max-width:900px;margin:0 auto;position:relative}.timeline:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line)}.timeline-item{display:grid;grid-template-columns:1fr 52px 1fr;align-items:center;gap:22px;position:relative;margin:0 0 68px}.timeline-item:last-child{margin-bottom:0}.timeline-marker{grid-column:2;grid-row:1;z-index:1;width:42px;height:42px;border-radius:50%;background:var(--paper);border:1px solid #d8b9a8;display:grid;place-items:center;color:var(--rose);font-size:18px;justify-self:center}.timeline-content{grid-column:1;grid-row:1;text-align:right;padding:8px 12px 8px 0}.timeline-item.reverse .timeline-content{grid-column:3;text-align:left;padding:8px 0 8px 12px}.timeline-date{font-size:9px;letter-spacing:.18em;color:var(--rose-dark)}.timeline-content h3{font-family:"Playfair Display",serif;font-size:28px;font-weight:400;margin:10px 0}.timeline-content p{font-size:13px;color:var(--muted);margin:0}.timeline-image{grid-column:3;grid-row:1;height:210px;overflow:hidden}.timeline-item.reverse .timeline-image{grid-column:1;grid-row:1}.timeline-image img{transition:transform .6s;filter:saturate(.8)}.timeline-image:hover img{transform:scale(1.04)}.gallery-section{background:#f2e8de}.gallery{display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:230px;gap:18px}.gallery figure{margin:0;position:relative;overflow:hidden;background:#e4d4c7}.gallery figure:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#2e201c88)}.gallery figure img{transition:transform .7s;filter:saturate(.8)}.gallery figure:hover img{transform:scale(1.05)}.gallery figcaption{position:absolute;z-index:1;bottom:14px;left:17px;color:white;font-family:"Playfair Display",serif;font-size:17px;font-style:italic}.gallery-tall{grid-row:span 2}.gallery-wide{grid-column:span 2}.gallery-note{text-align:center;color:var(--muted);font-size:11px;margin-top:22px}.song-section{background:#eadbd0;border-top:1px solid #dfc8b8;border-bottom:1px solid #dfc8b8;padding:36px 0}.song-inner{display:flex;align-items:center;gap:25px}.song-note{font-family:"Playfair Display",serif;color:var(--rose);font-size:42px}.song-inner h2{font-family:"Playfair Display",serif;font-size:28px;font-weight:400;margin:5px 0}.song-inner p{font-size:12px;color:var(--muted);margin:0}.song-link{margin-left:auto;border-bottom:1px solid var(--rose);padding:8px 0;font-size:11px;letter-spacing:.06em;white-space:nowrap}.letter{max-width:850px}.letter-card{position:relative;border:1px solid #dfc6b5;background:#fffaf5;padding:clamp(28px,6vw,72px);box-shadow:0 22px 65px #6e4a3510}.letter-card:before{content:"";position:absolute;inset:10px;border:1px solid #eee0d5;pointer-events:none}.letter-flower{position:absolute;right:45px;top:15px;color:#d3ad9b;font-size:60px;transform:rotate(-20deg)}.letter-body{max-width:620px;font-family:"Playfair Display",serif;font-size:17px;line-height:1.95;position:relative}.letter-body p{margin:0 0 18px}.signoff{padding-top:10px}.signoff span{font-style:italic;color:var(--rose);font-size:27px}.closing{background:#5a433b;color:#fff6ee;text-align:center;padding:100px 24px 85px;position:relative;overflow:hidden}.closing:before,.closing:after{content:"✳";position:absolute;color:#b78d7b25;font-size:210px;top:15px}.closing:before{left:4%}.closing:after{right:4%}.closing-inner{position:relative;z-index:1}.closing-heart{font-size:30px;color:#d8b29f}.closing .eyebrow{color:#d8b29f;margin-top:20px}.closing h2{font-size:clamp(42px,6vw,70px);margin:25px 0}.closing h2 em{color:#dfb8a4}.closing-inner>p:not(.eyebrow){font-family:"Playfair Display",serif;font-size:20px;font-style:italic;color:#ead8cc}.closing-date{margin-top:42px;font-size:9px;letter-spacing:.2em;color:#d9b9a8}.closing-date span{padding:0 10px}.footer{min-height:75px;display:flex;align-items:center;justify-content:space-between;color:#9a8478;font-size:11px}.footer a{color:var(--rose-dark)}@media(max-width:760px){.wrap{width:min(100% - 34px,560px)}.nav{height:74px}.nav nav{display:none}.music-button{padding:8px 12px}.hero{grid-template-columns:1fr;padding-top:20px;min-height:unset}.hero-copy{padding:45px 0 5px}.hero h1{font-size:68px}.hero-art{min-height:390px;margin-top:15px}.image-frame{height:340px;width:72%}.frame-note{left:0;bottom:10px}.hero-bottom{position:static;margin-top:18px}.section-pad{padding:75px 0}.timeline:before{left:20px}.timeline-item,.timeline-item.reverse{grid-template-columns:42px 1fr;gap:16px;margin-bottom:45px}.timeline-marker{grid-column:1;grid-row:1;align-self:start}.timeline-content,.timeline-item.reverse .timeline-content{grid-column:2;grid-row:1;text-align:left;padding:0}.timeline-image,.timeline-item.reverse .timeline-image{grid-column:2;grid-row:2;height:190px;margin-top:12px}.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:190px;gap:10px}.gallery-tall{grid-row:span 2}.gallery-wide{grid-column:span 2}.gallery figcaption{font-size:14px;left:12px;bottom:10px}.song-inner{align-items:flex-start;gap:15px;flex-wrap:wrap}.song-inner>div{flex:1;min-width:180px}.song-link{margin-left:57px}.letter-flower{right:22px;top:15px;font-size:42px}.letter-body{font-size:16px}.closing{padding:75px 18px}.closing:before,.closing:after{font-size:110px}.footer{gap:15px;font-size:10px}.footer span{max-width:55%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Portrait layout for timeline photos */
.timeline-image {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 12px;
}

.timeline-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Keep portrait proportions on mobile */
@media (max-width: 760px) {
    .timeline-image,
    .timeline-item.reverse .timeline-image {
        height: auto;
        aspect-ratio: 3 / 4;
    }
}