:root {
  --wine: #9c3e65;
  --wine-dark: #78324f;
  --rose: #e8789e;
  --rose-soft: #ffc3d7;
  --pink-bg: #fbd3df;
  --text: #775267;
  --cream: #fff9fa;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-script: 'Great Vibes', 'Segoe Script', 'Brush Script MT', cursive;
  --font-body: 'DM Sans', 'Trebuchet MS', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 60px; }
body { margin: 0; background: #f9d4df; color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body:has(dialog[open]) { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #9c3e65; outline-offset: 4px; }
::selection { background: #e884a8; color: #fff; }
.skip-link { position: absolute; z-index: 1000; top: 0; transform: translateY(-200%); left: 15px; background: #fff; color: var(--wine); padding: 13px 18px; border-radius: 12px; }
.skip-link:focus { transform: translateY(12px); }
.background-wash { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(135deg,rgba(254,222,232,.11),rgba(255,214,229,.19)), url('assets/images/pink-hearts-background.jpg'); background-position: center top; background-size: auto, 690px auto; background-repeat: repeat; }
.background-wash::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 65% 15%,#fff5fa33,transparent 47%),linear-gradient(180deg,transparent 10%,#ffe3ed12 90%); }
.topbar { position: relative; z-index: 10; min-height: 72px; padding: 0 max(5vw,calc((100vw - 1200px)/2)); display:flex; justify-content:space-between; align-items:center; gap:16px; background: rgba(255,250,251,.45); border-bottom: 1px solid #fff8; backdrop-filter: blur(14px); }
.wordmark { text-decoration:none; font-family:var(--font-display);font-weight:700; color:var(--wine); font-size: 22px; white-space:nowrap; }
.wordmark span { color:var(--rose);font-size:21px; margin: 0 3px; }
.topbar-note { color:#ab6d85; font-size:10px; letter-spacing:.34em; font-weight:700; }
.topbar-link { text-decoration:none; border:1px solid rgba(166,72,110,.26); background:#fff8; padding:10px 17px; font-size:11px; font-weight:700; color:var(--wine);border-radius:999px; transition:background .25s, transform .25s; }
.topbar-link span { font-size:15px; margin-left:7px; }
.topbar-link:hover { background:white;transform:translateY(-2px); }
.hero { min-height: 740px; isolation:isolate; overflow:hidden; position:relative; padding: 74px 18px 120px; background: radial-gradient(ellipse at 50% 17%,#fff8f7aa 3%, transparent 68%), linear-gradient(180deg, #ffecf277 0%, #ffe1ec22 100%); }
.hero::before, .hero::after { content:''; position:absolute; z-index:-1; left:-5%;width:45vw;height:45vw; max-width:610px;max-height:610px;border-radius:50%;background:radial-gradient(circle,#fff9fb8c,transparent 66%); pointer-events:none; }
.hero::before { top:-220px; }.hero::after { right:-22%;left:auto;top:130px; }
.hero-content { max-width:1100px; margin:auto; text-align:center; position:relative; }
.hero-overline { margin: 0 0 29px; color:#a96180; text-transform:uppercase; font-weight:700; letter-spacing:.33em; font-size:11px; display:flex; justify-content:center; gap:19px;align-items:center; }
.overline-line { width:35px;height:1px;background:#d9a0b4;display:inline-block; }
.hero h1 { margin:0 auto; display:flex; align-items:baseline; justify-content:center; gap:clamp(12px,2.7vw,37px); color:var(--wine); font-family:var(--font-script); font-size:clamp(69px,10.2vw,142px); line-height:1.2; text-shadow:0 7px 20px rgba(255,255,255,.95); font-weight:400; }
.hero h1 .title-heart { font-family:var(--font-display); font-weight:400; font-style:italic; font-size:clamp(45px,6vw,76px); color:#df739b; line-height:1; }
.hero-ribbon { position:relative; display:inline-flex; align-items:center;justify-content:center; gap:9px; background:linear-gradient(110deg,#f8a9c5,#ed8eb1,#f7a5be); color:#fffefa; text-transform:none; font-weight:700; font-size:clamp(12px,1.5vw,17px); letter-spacing:.12em; padding:15px 45px; margin:10px 0 32px; box-shadow: 0 12px 25px #c3749828; transform:rotate(-1deg); }
.hero-ribbon::before,.hero-ribbon::after{ content:''; position:absolute; top:12px;width:28px;height:46px;background:#dc80a0;z-index:-1; }
.hero-ribbon::before { left:-17px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,32% 50%); }
.hero-ribbon::after {right:-17px;clip-path:polygon(0 0,100% 0,68% 50%,100% 100%,0 100%);}
.hero-ribbon span:last-child{font-size:19px;}
.hero-quote { color:#b76888; font-family:var(--font-display);font-style:italic;font-size:clamp(19px,2.3vw,27px);line-height:1.5; }
.hero-quote em{color:var(--wine);font-weight:600;}
.distance-scene { position:relative;display:grid;grid-template-columns:1fr 1fr 1fr; align-items:end; gap:24px; margin:36px auto 0; width:min(780px,100%); }
.place { display:flex;flex-direction:column; gap:2px;align-items:center; color:#bd7591;font-size:10px;letter-spacing:.34em;font-weight:700; }
.place svg{max-width:245px;width:100%;height:auto;}
.distance-center{ display:flex; flex-direction:column;justify-content:center;align-items:center; gap:7px; min-height:110px; padding-bottom:16px;color:#b66988;font-family:var(--font-display);font-size:14px;font-style:italic; }
.distance-center small{font-size:13px; }
.heart-orbit{color:#dc6c99;font-size:27px;animation:pulse 2.4s ease-in-out infinite;}
.start-button{ position:relative; display:inline-flex;align-items:center;gap:15px; margin-top:32px; padding:16px 24px 16px 30px; border:1px solid rgba(193,100,134,.23);border-radius:100px;background:#fffcfbee;box-shadow:0 11px 30px #b36a8d24, inset 0 1px white;color:var(--wine);font-size:13px;text-decoration:none;font-weight:700; transition:transform .25s, box-shadow .25s; }
.start-button:hover{transform:translateY(-4px);box-shadow:0 15px 34px #b36a8d40;}
.button-heart { font-size:22px; }
.down-arrow { background:var(--rose);color:white;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:19px; }
.hero-sparkles { position:absolute;inset:0;pointer-events:none;overflow:hidden; z-index:-1; }
.hero-sparkles span { position:absolute;color:#fffdfc;font-size:27px;text-shadow:0 0 12px #fff6;animation:floaty 6s ease-in-out infinite alternate; }
.hero-sparkles span:nth-child(1){top:7%;left:13%;font-size:36px;animation-delay:-3s;color:#ef91b2;}
.hero-sparkles span:nth-child(2){top:16%;right:10%;font-size:34px;animation-delay:-1s;}
.hero-sparkles span:nth-child(3){top:43%;left:7%;font-size:17px;animation-delay:-2s;color:#e989aa;}
.hero-sparkles span:nth-child(4){top:57%;right:7%;font-size:31px;}
.hero-sparkles span:nth-child(5){top:70%;left:21%;font-size:22px;animation-delay:-4s;}
.hero-sparkles span:nth-child(6){top:78%;right:24%;font-size:26px;animation-delay:-2.5s;}
.hero-sparkles span:nth-child(7){top:31%;right:18%;font-size:29px;}
.hero-sparkles span:nth-child(8){top:35%;left:24%;font-size:16px;color:#e981a7;}
.hero-bottom-cloud { position:absolute;bottom:-37px;left:-2%;width:104%;height:110px;background:radial-gradient(ellipse 85px 42px at 4% 74%,#fff4f7c2 99%,transparent 101%),radial-gradient(ellipse 130px 60px at 21% 97%,#fff6f9d9 99%,transparent 101%),radial-gradient(ellipse 128px 60px at 51% 92%,#fff4f7cb 99%,transparent 101%),radial-gradient(ellipse 128px 60px at 78% 94%,#fff6f9e0 99%,transparent 101%),radial-gradient(ellipse 86px 38px at 98% 77%,#fff4f7cc 99%,transparent 101%);filter:blur(1px); }
.story-section {padding:20px 18px 70px;}
.timeline { max-width:1070px;position:relative;margin:0 auto; padding:26px 0 55px;display:flex; flex-direction:column; align-items:stretch;gap:135px; }
.thread-svg { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0; }
.thread-svg path.thread-line{ stroke:#fffafd;stroke-width:8;stroke-linecap:round;fill:none;stroke-dasharray:2 19;filter:drop-shadow(0 2px 3px #ad789151); }
.thread-heart-svg {fill:#f394b6;stroke:#fff9fc;stroke-width:4;filter:drop-shadow(0 4px 5px #ab65834b);}
.story-card { --tilt:0deg; position:relative;z-index:2; width:49%; padding:40px 37px 34px; background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,246,249,.92));border:2px solid #fffdfde8; border-radius:27px; box-shadow:0 20px 45px rgba(167,93,128,.14),0 4px 8px rgba(140,62,107,.055),inset 0 1px 0 white; transform: rotate(var(--tilt));transition:box-shadow .3s,transform .4s; }
.story-card:hover{ box-shadow:0 26px 60px rgba(167,93,128,.21),0 4px 8px rgba(140,62,107,.045);transform:translateY(-4px) rotate(0deg); }
.story-card::before{content:'';position:absolute;top:-18px;right:22%;width:95px;height:33px;background:repeating-linear-gradient(30deg,#ffffff21 0px,#ffffff21 5px,transparent 5px,transparent 13px),#f0a8c0b9;box-shadow:0 2px 5px #c890a629; transform:rotate(7deg);clip-path:polygon(0 6%,98% 0,100% 90%,2% 100%); }
.story-card::after{content:'♡';position:absolute;bottom:14px;right:21px;color:#ee9bb8;font-size:20px;line-height:1; }
.align-left { align-self:flex-start;--tilt:-.8deg; }
.align-right { align-self:flex-end;--tilt:.8deg; }
.story-card:nth-of-type(3n){--tilt:.7deg;}
.story-card:nth-of-type(4n){--tilt:-1deg;}
.intro-card {width:74%; margin-top:5px;padding:48px 47px; }
.intro-card::before{right:42%;}
.corner-heart{position:absolute;left:-20px;top:-20px;color:white;text-shadow:0 3px 8px #bd6d9470; font-family:var(--font-display);font-size:63px;line-height:1;background:linear-gradient(140deg,#f8b0c6,#db6b98);width:69px;height:66px;display:grid;place-items:center;border-radius:50%;border:3px solid #fff9fb;transform:rotate(-11deg);}
.corner-glint{position:absolute;top:25px;right:35px;color:#f0a3bc;font-size:21px;}
.chapter-badge{position:absolute;left:-21px;top:-29px; width:69px;height:69px;display:grid;place-items:center;border-radius:24px 27px 26px 20px;transform:rotate(-14deg);background:linear-gradient(135deg,#ffadc6,#ed769e);color:white;border:3px solid #fffafb;box-shadow:0 6px 14px #b8779566;font-family:var(--font-display);font-size:27px; font-style:italic; }
.eyebrow{display:block; color:#be7a93;letter-spacing:.17em;line-height:1.7; font-size:10px;font-weight:700;text-transform:uppercase;margin-bottom:9px;}
.eyebrow span{margin:0 5px;color:#df99b0;}
.story-card h2{font:600 clamp(26px,2.75vw,35px)/1.25 var(--font-display);color:var(--wine-dark);letter-spacing:-.025em;margin:0 0 23px; }
.story-card h2 .accent-italic{font-style:italic;color:#bf6082;}
.story-copy{font:400 15.5px/1.83 var(--font-body);letter-spacing:.003em;color:#765368;}
.story-copy p{margin:0 0 14px;}
.story-copy p:last-child{margin-bottom:0;}
.story-copy em { font-family:var(--font-display);color:#a34c70;font-size:1.08em;font-weight:600; }
.story-copy p:first-child::first-letter{color:var(--wine);}
.memory-photo{width:39%;max-width:174px;min-width:122px;float:right;position:relative;margin:5px -6px 18px 23px;padding:9px 9px 13px; background:#fffafa; box-shadow:0 8px 16px rgba(120,67,94,.16); border:1px solid #fff; transform:rotate(5deg); }
.memory-photo::before {content:'';position:absolute;top:-17px;left:28%;width:61px;height:29px;background:repeating-linear-gradient(35deg,#ffffff30 0px,#ffffff30 5px,transparent 5px,transparent 10px),#efa1babf; transform:rotate(-8deg);z-index:2;}
.memory-photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#ffe5eb; }
.memory-photo figcaption{text-align:center;font-family:var(--font-script);font-size:clamp(17px,2.1vw,22px);line-height:1.2;color:#c47c97;margin-top:9px;white-space:normal;}
.align-right .memory-photo{float:left; margin:6px 23px 17px -6px;transform:rotate(-5deg);}
.intro-card .memory-photo {max-width:213px;width:30%;float:left;margin:2px 32px 20px -8px;transform:rotate(-6deg);}
.intro-card h2{font-size:clamp(32px,4vw,43px);}
.intro-card .story-copy{font-size:16px;}
.chapter .story-copy p:last-child em:only-child{font-size:24px;}
.finale { position:relative;text-align:center;margin-top:16px;padding:115px 24px 86px; background:linear-gradient(0deg,#ffd3e1a3,#fff4f7ab 38%,transparent);border-top:1px solid #fff4; overflow:hidden; }
.finale::before,.finale::after{content:'♡';font-family:var(--font-display);position:absolute;color:#f09db8;font-size:clamp(100px,17vw,210px); opacity:.35;line-height:1;transform:rotate(-18deg);}
.finale::before{left:-20px;bottom:0;}.finale::after{right:-25px;top:52px;transform:rotate(12deg);}
.finale-sparkles {font-size:17px;letter-spacing:14px;color:#dfa0b7;margin-bottom:20px;}
.finale-heart{font-size:47px;color:#e57da2;text-shadow:0 6px 18px #a9527b36;animation:pulse 2.5s infinite;}
.finale-overline{font-size:10px;letter-spacing:.28em;color:#ab6c84;font-weight:700;margin:17px 0 7px;}
.finale h2 {font:400 clamp(58px,9vw,125px)/1.26 var(--font-script);color:var(--wine);margin:0 auto 10px;max-width:850px;}
.finale h2 em{font-style:normal;color:#bf5d80;}
.finale h2 span{font-family:var(--font-display);font-size:.53em;vertical-align:middle; }
.finale-message{font:500 clamp(16px,2vw,21px)/1.9 var(--font-display);letter-spacing:.045em;color:#a96884;}
.surprise-button{border:1px solid #d57c9d;background:linear-gradient(110deg,#ec87a9,#df729b);color:#fff;box-shadow:0 12px 23px #ce7da04a;border-radius:999px;padding:17px 33px;font:700 13px var(--font-body);cursor:pointer;margin-top:19px;transition:transform .25s,box-shadow .25s;}
.surprise-button:hover{transform:translateY(-3px);box-shadow:0 17px 30px #ce7da075;}
.surprise-button span{font-size:18px;margin-left:7px;}
.footer-signature{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:#b67c93;margin:60px 0 0;}
.site-footer{background:#ffedf2b8;border-top:1px solid #ffffff85; padding:24px max(5vw,calc((100vw - 1200px)/2));display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:#ac6582;font-weight:700;letter-spacing:.17em;}
.site-footer a{text-decoration:none;text-align:center;letter-spacing:.02em;}
.site-footer a:hover{text-decoration:underline;}
.reading-track{z-index:20;position:fixed;right:17px;top:50%;transform:translateY(-50%);height:158px;width:4px;border-radius:4px;background:#fff8;box-shadow:0 0 0 1px #e19cb754;pointer-events:none;}
.reading-track-fill{position:absolute;top:0;left:0;right:0;background:#d96190;height:0;border-radius:4px;}
.reading-track-heart{position:absolute;top:-11px;left:50%;transform:translate(-50%,-50%);color:#d65b89;font-size:18px;text-shadow:0 1px 4px white;}
.birthday-dialog { border:1px solid white; border-radius:27px; width:min(92vw,455px);max-height:90vh;padding:36px 40px 42px; box-shadow:0 30px 95px #65304772;background:linear-gradient(150deg,#fff9fa,#ffe4ed);text-align:center;color:#8b4b6b;}
.birthday-dialog::backdrop{background:#80466585;backdrop-filter:blur(7px);}
.birthday-dialog[open]{animation:dialog-in .45s ease both;}
.dialog-close{position:absolute;right:19px;top:12px;border:0;background:transparent;color:#b46f8e;font-size:31px;cursor:pointer;}
.dialog-symbol{font-size:65px;color:#e878a2;margin:0;line-height:1.2;}
.dialog-kicker{font-size:10px;letter-spacing:.23em;font-weight:700;color:#b07390;}
.birthday-dialog h2{font:400 62px/1.12 var(--font-script);color:var(--wine);margin:15px 0 21px;}
.birthday-dialog h2 em{font-style:normal;color:#d56b91;}
.birthday-dialog p:not(.dialog-kicker){font:400 17px/1.65 var(--font-display);color:#8c5870;}
.dialog-okay{background:#dc769c;color:#fff;border:0;border-radius:100px;padding:15px 22px;margin-top:12px;cursor:pointer;}
#confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden;}
.falling-heart{position:absolute;top:-50px;left:var(--left);font-size:var(--size);color:var(--color);animation:heart-fall var(--duration) linear forwards;opacity:.9;text-shadow:0 2px 3px white;}
.js .reveal {opacity:0;transform:translateY(26px) rotate(var(--tilt));transition:opacity .85s ease,transform .95s cubic-bezier(.2,.65,.22,1),box-shadow .3s;}
.js .reveal.is-visible{opacity:1;transform:translateY(0) rotate(var(--tilt));}
.js .reveal.is-visible:hover{transform:translateY(-4px) rotate(0deg);}
@keyframes floaty{from{transform:translate3d(0,0,0) rotate(-6deg);}to{transform:translate3d(0,-18px,0) rotate(8deg);}}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
@keyframes heart-fall{0%{transform:translateY(-40px) rotate(0deg);opacity:0;}8%{opacity:1;}90%{opacity:1;}100%{transform:translateY(110vh) rotate(var(--spin));opacity:0;}}
@keyframes dialog-in{from{opacity:0;transform:scale(.88) translateY(25px);}to{opacity:1;transform:scale(1) translateY(0);}}
@media (max-width: 900px){
  .hero{min-height:670px;padding-top:76px;}
  .timeline{max-width:730px;gap:105px;}
  .story-card{width:65%;padding:32px 28px 30px;}
  .story-card h2{font-size:28px;}
  .story-copy{font-size:14px;line-height:1.78;}
  .intro-card{width:85%;}
  .intro-card .memory-photo{width:32%;}
}
@media (max-width: 650px){
  .topbar{min-height:62px;padding:0 17px;}
  .wordmark{font-size:20px;}
  .topbar-note{display:none;}
  .topbar-link{font-size:10px;padding:9px 12px;}
  .hero{min-height:615px;padding:78px 12px 92px;}
  .hero-overline{font-size:9px;letter-spacing:.17em;gap:9px;margin-bottom:18px;}
  .overline-line{width:19px;}
  .hero h1 {flex-wrap:wrap;column-gap:12px;row-gap:0;font-size:clamp(56px,12.4vw,80px);line-height:1.06;}
  .hero h1 .title-heart{font-size:38px;}
  .hero-ribbon{padding:12px 24px; margin:21px 0 28px;font-size:11px;max-width:90%;}
  .hero-quote{font-size:20px;}
  .distance-scene{gap:9px;margin-top:36px;grid-template-columns:1fr .85fr 1fr;}
  .distance-center{font-size:11px;min-height:100px;padding-bottom:16px;}
  .distance-center small{font-size:11px;}
  .place{font-size:9px;}
  .place svg{min-height:64px;}
  .start-button{font-size:12px;margin-top:24px;padding:12px 15px 12px 20px;gap:7px;}
  .story-section{padding:10px 17px 60px;}
  .timeline{gap:95px;padding:35px 0 25px;}
  .story-card, .intro-card{width:96%;padding:37px 22px 28px;}
  .story-card.align-left{align-self:flex-start;}
  .story-card.align-right{align-self:flex-end;}
  .intro-card{padding:38px 23px 30px;}
  .story-card h2{font-size:clamp(25px,6.3vw,33px);margin-bottom:18px;line-height:1.28;}
  .intro-card h2{font-size:clamp(25px,7vw,35px);}
  .story-copy,.intro-card .story-copy{font-size:clamp(13.5px,3.8vw,15.5px);line-height:1.82;}
  .story-copy p{margin-bottom:12px;}
  .eyebrow{font-size:9px;letter-spacing:.12em;}
  .memory-photo{width:38%;min-width:102px;max-width:151px;margin:7px -5px 14px 15px;padding:7px 7px 9px;}
  .align-right .memory-photo{margin:7px 15px 14px -5px;}
  .intro-card .memory-photo{float:right;width:38%;max-width:155px;margin:0 -3px 12px 16px;transform:rotate(5deg);}
  .memory-photo figcaption{font-size:20px;}
  .memory-photo::before{height:23px;width:52px;top:-13px;}
  .chapter-badge{width:52px;height:52px;font-size:21px;left:-9px;top:-30px;border-radius:19px;}
  .corner-heart{width:55px;height:55px;font-size:48px;left:-10px;top:-29px;}
  .story-card::before{width:70px;height:27px;top:-14px;}
  .reading-track{right:5px;height:105px;width:3px;opacity:.6;}
  .finale{padding:82px 24px 75px;}
  .finale h2{font-size:clamp(63px,13vw,90px);}
  .finale-message{font-size:16px;}
  .footer-signature{line-height:1.7;margin-top:58px;}
  .site-footer{flex-direction:column;gap:14px;text-align:center;letter-spacing:.12em;padding:25px 10px;}
}
@media (max-width: 360px){
  .hero h1{font-size:49px;}
  .story-card,.intro-card{width:97%;padding-left:17px;padding-right:17px;}
  .story-copy,.intro-card .story-copy{font-size:13px;}
  .memory-photo,.intro-card .memory-photo{min-width:88px;width:37%;}
  .memory-photo figcaption{font-size:17px;}
  .hero-ribbon{font-size:10px;letter-spacing:.02em;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .js .reveal{opacity:1;transform:rotate(var(--tilt));}
}