:root{
  --bg:#f3efe8;--paper:#fbfaf7;--ink:#171717;--muted:#746f68;--accent:#9d8061;
  --shadow:0 26px 80px rgba(20,18,15,.14);--radius:26px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;overflow-x:hidden}
img{display:block;width:100%}
button{font:inherit}
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:100;background:transparent}
.progress span{display:block;height:100%;width:0;background:#fff}
.hero{min-height:100svh;position:relative;display:grid;place-items:end center;overflow:hidden;background:#111}
.hero>img{position:absolute;inset:0;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.08) 66%)}
.hero-content{position:relative;width:min(1120px,92vw);padding:12vh 0 7vh;color:#fff}
.eyebrow,.chapter-label{text-transform:uppercase;letter-spacing:.24em;font-size:.76rem;color:var(--muted)}
.hero .eyebrow{color:rgba(255,255,255,.72)}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:400}
h1{font-size:clamp(3.7rem,10vw,8rem);line-height:.95;margin:.35rem 0 1rem}
h2{font-size:clamp(2.6rem,7vw,5.8rem);line-height:1;margin:.2rem 0 1.5rem}
h3{font-size:clamp(2rem,4vw,3.3rem);line-height:1.05;margin:.4rem 0 1rem}
.hero-copy,.lead{max-width:720px;font-size:clamp(1.1rem,2.4vw,1.55rem)}
.hero-copy{color:rgba(255,255,255,.86)}
.countdown{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.time{min-width:92px;padding:1rem 1.1rem;border:1px solid rgba(255,255,255,.25);border-radius:16px;background:rgba(255,255,255,.1);backdrop-filter:blur(14px)}
.time strong{display:block;font-size:1.7rem;line-height:1;font-weight:500}
.time span{display:block;margin-top:.45rem;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;opacity:.72}
.scroll-cue{display:inline-flex;gap:.7rem;margin-top:2.4rem;color:rgba(255,255,255,.7);text-decoration:none;text-transform:uppercase;letter-spacing:.2em;font-size:.74rem}
.scroll-cue span{animation:bob 1.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.chapter{width:min(1120px,90vw);margin:0 auto;padding:clamp(6rem,13vw,11rem) 0}
.narrow{width:min(770px,88vw)}
.story-lines{display:grid;gap:2.2rem;margin-top:4rem;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.7rem,4.8vw,3.9rem);line-height:1.12}
.story-lines p,.letter-inner p{margin:0;opacity:.14;transform:translateY(22px);transition:.8s ease}
.story-lines p.visible,.letter-inner p.visible{opacity:1;transform:none}
.phone-joke{margin:4rem 0 0;padding:1.4rem 1.6rem;border-left:2px solid var(--accent);color:var(--muted);font-style:italic}
.phone-joke span{display:inline-block;margin-top:.55rem;color:var(--ink)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.photo-card,.route-card,.gallery-item{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);background:#ddd}
.photo-card{margin:0}.photo-card img{aspect-ratio:4/5;object-fit:cover}
.route-map{margin:3rem 0 5rem;color:var(--accent)}
.route-map svg{width:100%;height:auto;overflow:visible}
.route-labels{font-size:21px;fill:var(--ink);font-family:Georgia,"Times New Roman",serif}
.traveler{fill:var(--accent)}
.route-stories{display:grid;gap:5rem}
.route-card{display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}
.route-card.reverse img{order:2}.route-card img{height:100%;min-height:470px;object-fit:cover}
.route-card div{padding:clamp(2rem,5vw,4rem);display:flex;flex-direction:column;justify-content:center}
.route-card small{text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.cinema{min-height:82svh;position:relative;display:grid;align-items:center;overflow:hidden;color:#fff}
.cinema>img{position:absolute;inset:0;height:100%;object-fit:cover}
.cinema-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.08))}
.cinema-copy{position:relative;width:min(1120px,90vw);margin:auto;max-width:1120px}
.cinema-copy>p:last-child{max-width:590px;font-size:clamp(1.15rem,2vw,1.55rem);color:rgba(255,255,255,.82)}
.cinema .chapter-label{color:rgba(255,255,255,.6)}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;margin-top:3rem}
.gallery-item{padding:0;border:0;cursor:zoom-in}
.gallery-item:nth-child(1){grid-column:span 7}.gallery-item:nth-child(2){grid-column:span 5}.gallery-item:nth-child(3){grid-column:span 5}.gallery-item:nth-child(4){grid-column:span 7}
.gallery-item img{height:100%;min-height:420px;object-fit:cover;transition:transform .6s ease}
.gallery-item:hover img{transform:scale(1.025)}
.love-list{display:grid;gap:2.1rem;margin-top:4rem}
.love-list p{display:grid;grid-template-columns:60px 1fr;gap:1rem;margin:0;padding-top:1.3rem;border-top:1px solid rgba(20,20,20,.15);font-size:clamp(1.4rem,3.4vw,2.75rem);line-height:1.2}
.love-list span{font-size:.72rem;letter-spacing:.16em;color:var(--muted);padding-top:.55rem}
.distance-card{padding:clamp(2rem,5vw,4.5rem);background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow)}
.distance-line{display:grid;grid-template-columns:auto 1fr auto;gap:1.3rem;align-items:center;margin:3rem 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.5rem,4vw,3rem)}
.distance-line>div{height:1px;background:repeating-linear-gradient(90deg,var(--accent) 0 10px,transparent 10px 18px);position:relative}
.distance-line i{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--accent);animation:travel 5.5s linear infinite}
@keyframes travel{to{left:100%}}
.jokes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.jokes article{min-height:220px;padding:2rem;background:var(--paper);border-radius:20px;box-shadow:0 14px 40px rgba(20,18,15,.07);display:flex;flex-direction:column;justify-content:space-between}
.jokes strong{font-size:2rem;font-weight:500}.jokes p{color:var(--muted)}
.memory-section{background:#151515;color:#fff;padding:clamp(6rem,11vw,10rem) 0}
.memory-wrap{width:min(930px,92vw);margin:auto}.memory-section .chapter-label{color:rgba(255,255,255,.5)}.memory-intro,.memory-status{color:rgba(255,255,255,.68)}
.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:3rem}
.memory-card{aspect-ratio:1;perspective:900px;border:0;padding:0;background:transparent;cursor:pointer}
.memory-card:disabled{cursor:default;opacity:1}
.memory-card-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s ease}
.memory-card.flipped .memory-card-inner,.memory-card.matched .memory-card-inner{transform:rotateY(180deg)}
.memory-face{position:absolute;inset:0;display:grid;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:15px;overflow:hidden}
.memory-front{place-items:center;background:#262626;border:1px solid rgba(255,255,255,.12);font-family:Georgia,"Times New Roman",serif;font-size:2rem}
.memory-back{transform:rotateY(180deg)}.memory-back img{height:100%;object-fit:cover}
.memory-status{min-height:2rem}.ghost-btn{padding:.8rem 1.25rem;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff;background:transparent;cursor:pointer}
.letter{min-height:100svh;display:grid;place-items:center;background:#0f0f0f;color:#fff;padding:8rem 0}
.letter-inner{width:min(720px,86vw);font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.45rem,3vw,2.2rem);line-height:1.55;display:grid;gap:1.4rem}
.signature{margin-top:2rem!important}
.reveal{opacity:0;transform:translateY(26px);transition:.9s ease}.reveal.visible{opacity:1;transform:none}
.lightbox{width:min(1000px,94vw);border:0;border-radius:22px;padding:0;background:#111;color:#fff;box-shadow:0 30px 100px rgba(0,0,0,.5)}
.lightbox::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(8px)}
.lightbox img{max-height:78vh;object-fit:contain;background:#000}.lightbox p{margin:0;padding:1rem 1.2rem;color:rgba(255,255,255,.76)}
.lightbox-close{position:absolute;right:.8rem;top:.6rem;width:42px;height:42px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:1.8rem;cursor:pointer;z-index:2}
.heart-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:200}
.floating-heart{position:absolute;bottom:-40px;animation:floatHeart 3.8s ease-in forwards;font-size:clamp(18px,3vw,30px)}
@keyframes floatHeart{to{transform:translateY(-110vh) rotate(18deg);opacity:0}}
@media(max-width:820px){
  .split,.route-card{grid-template-columns:1fr}.route-card.reverse img{order:0}.route-card img{min-height:360px}
  .gallery-item{grid-column:span 12!important}.gallery-item img{min-height:350px}
  .jokes{grid-template-columns:1fr}.memory-grid{grid-template-columns:repeat(3,1fr)}
  .distance-line{grid-template-columns:1fr}.route-labels{font-size:16px}
}
@media(max-width:520px){.memory-grid{grid-template-columns:repeat(3,1fr)}.time{min-width:76px}.route-map{overflow-x:auto}.route-map svg{min-width:760px}}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .reveal,.story-lines p,.letter-inner p{opacity:1;transform:none}
}