@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
:root{--pink:#ff7899;--rose:#ffd2dd;--wine:#4b172d;--dark:#10040e;--cream:#fff8f6;--muted:#bda6ad}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--dark);color:#fff;font-family:Inter,sans-serif;min-height:100vh}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 20% 20%,#ff78991e,transparent 32%),radial-gradient(circle at 80% 70%,#a44a9320,transparent 34%),linear-gradient(135deg,#170817,#2c0b20 55%,#10040f)}
a{text-decoration:none;color:inherit}.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:35px 20px;position:relative;overflow:hidden}.content{width:min(900px,100%);text-align:center;animation:rise .8s ease}
.serif,h1,h2,h3,.letter{font-family:"Cormorant Garamond",serif}.eyebrow{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--pink)}
h1{font-size:clamp(4rem,13vw,8.5rem);font-weight:500;line-height:.82;margin:22px 0}h2{font-size:clamp(3rem,8vw,5.8rem);line-height:.9;font-weight:500;margin:15px 0 25px}h3{font-size:2rem;font-weight:500}
p{line-height:1.8;color:var(--muted);font-size:16px}.lead{max-width:680px;margin:auto;font-size:18px}
.btn{display:inline-block;margin:12px 5px;padding:14px 23px;border:1px solid #ffffff2d;border-radius:999px;background:#ffffff0d;backdrop-filter:blur(10px);transition:.25s}.btn:hover{background:#ff78991a;transform:translateY(-3px)}
.heart{font-size:80px;color:var(--pink);animation:beat 1.5s infinite}.tiny{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.45}
.photo{width:100%;max-height:68vh;object-fit:cover;border-radius:28px;box-shadow:0 25px 80px #0008}
.card{padding:35px;border:1px solid #ffffff14;background:#ffffff09;border-radius:28px;backdrop-filter:blur(12px);box-shadow:0 25px 80px #0005}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:35px}.gallery img{width:100%;height:330px;object-fit:cover;border-radius:20px;display:block}
.arrow{font-size:13px;margin:22px 8px;opacity:.6}.letter{font-size:21px;line-height:1.8;color:#ffeef2;text-align:left}.letter p{font-family:"Cormorant Garamond",serif;font-size:21px;color:#ffeef2}.sign{text-align:right;font-style:italic;color:var(--rose)!important}
.moments{display:grid;gap:14px;text-align:left}.moment{padding:24px;border-left:2px solid var(--pink);background:#ffffff08;border-radius:0 20px 20px 0}.moment h3{margin:0 0 5px}.moment p{margin:0}
.count{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:30px 0}.unit{min-width:85px;padding:16px;border:1px solid #ffffff15;border-radius:18px;background:#ffffff09}.unit strong{display:block;font-size:28px}.unit small{font-size:9px;letter-spacing:.16em;color:#fff7}
.reveal{display:none;margin:25px auto;padding:25px;max-width:650px;border:1px solid #ff789933;border-radius:24px;background:#ff78990b}.reveal.show{display:block;animation:rise .5s ease}
@keyframes rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes beat{50%{transform:scale(1.13)}}
@media(max-width:650px){.page{padding:25px 16px 95px}.gallery{grid-template-columns:1fr}.gallery img{height:300px}.nav{max-width:95vw;overflow:auto;white-space:nowrap}}

.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}.photo-card{padding:10px;background:#ffffff08;border:1px solid #ffffff12;border-radius:22px}.photo-card img{width:100%;height:310px;object-fit:cover;border-radius:16px;display:block}.photo-card p{margin:10px 6px 3px;font-family:"Cormorant Garamond",serif;font-size:20px;color:#ffd2dd}.category{margin-top:40px;text-align:left}.category h3{margin:0 0 4px;color:#ffeef2}.category .category-note{margin:0 0 14px;font-size:13px}.dream-photo{max-width:680px;margin:28px auto 20px}.dream-photo img{width:100%;max-height:70vh;object-fit:cover;border-radius:30px;box-shadow:0 30px 100px #0009}.dream-line{font-family:"Cormorant Garamond",serif;font-size:clamp(2rem,5vw,3.6rem);line-height:1.05;color:#ffeef2;margin:18px auto;max-width:700px;font-style:italic}.dream-sub{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#ff7899}
@media(max-width:650px){.photo-grid{grid-template-columns:1fr}.photo-card img{height:330px}}


/* Birthday candle page — realistic cake */
.candle-page{overflow-x:hidden}
.candle-content{position:relative;z-index:2}
.candle-intro{font-size:22px;margin-bottom:2px}
.realistic-cake{width:350px;height:335px;margin:5px auto 0;position:relative;filter:drop-shadow(0 28px 32px #0009);cursor:pointer}
.cake-shadow{position:absolute;left:25px;bottom:24px;width:300px;height:35px;background:#0007;border-radius:50%;filter:blur(10px)}
.plate{position:absolute;left:20px;bottom:28px;width:310px;height:34px;border-radius:50%;background:linear-gradient(180deg,#fffaf9,#e8b5c2 48%,#9c5069);box-shadow:0 7px 0 #5a1d35, inset 0 3px 6px #fff}
.plate-shine{position:absolute;left:40px;top:7px;width:225px;height:8px;border-radius:50%;background:#fff9;filter:blur(2px)}
.cake-tier{position:absolute;left:43px;width:264px;border-radius:18px 18px 28px 28px;overflow:hidden;box-shadow:inset 0 -16px 20px #5a172d, inset 0 8px 9px #fff3}
.cake-bottom{bottom:55px;height:112px;background:linear-gradient(90deg,#7a1d3d,#b83e62 18%,#e47691 48%,#b83e62 82%,#6f1938)}
.cake-middle{bottom:142px;height:86px;left:59px;width:232px;background:linear-gradient(90deg,#6f1938,#cf5574 20%,#f18ba3 50%,#bf4669 80%,#6a1835)}
.cake-side{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ffffff08 0 10px,#00000008 10px 20px)}
.frosting{position:absolute;left:-2px;right:-2px;top:-2px;height:28px;background:linear-gradient(#fffdfb,#ffdfe5 58%,#f8b1c1);box-shadow:0 2px 5px #6b1d36}
.frosting i{position:absolute;bottom:-16px;width:25px;height:25px;border-radius:0 0 50% 50%;background:linear-gradient(180deg,#ffe9ee,#f7a9bb);box-shadow:inset -4px -4px 5px #d67891}
.frosting-bottom i:nth-child(1){left:15px}.frosting-bottom i:nth-child(2){left:70px}.frosting-bottom i:nth-child(3){left:125px}.frosting-bottom i:nth-child(4){left:180px}.frosting-bottom i:nth-child(5){left:235px}
.frosting-middle i:nth-child(1){left:20px}.frosting-middle i:nth-child(2){left:75px}.frosting-middle i:nth-child(3){left:130px}.frosting-middle i:nth-child(4){left:185px}
.cake-top-real{position:absolute;left:58px;bottom:214px;width:234px;height:55px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#fff 0 20%,#ffe5ea 21% 58%,#ed9bae 59% 78%,#9d3452 79%);box-shadow:inset 0 -8px 10px #8c2948,0 3px 5px #0005}
.cream-rosette{position:absolute;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fff,#fff5f5 55%,#e9b4c0);box-shadow:0 2px 5px #8e2946}
.r1{left:25px;top:9px}.r2{left:100px;top:4px}.r3{right:24px;top:10px}
.chocolate-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8d4a35,#3b1620);box-shadow:0 1px 2px #0006}
.d1{left:73px;top:30px}.d2{left:135px;top:22px}.d3{right:72px;top:31px}.d4{left:42px;top:27px}
.candle-real{position:absolute;z-index:8;left:162px;bottom:253px;width:30px;height:72px;border-radius:7px 7px 5px 5px;background:repeating-linear-gradient(135deg,#fff8f8 0 9px,#f58aa3 9px 18px);box-shadow:inset -6px 0 8px #9b3652,0 2px 5px #0005}
.candle-real:after{content:"";position:absolute;left:4px;right:4px;top:5px;height:3px;border-radius:50%;background:#fff9}
.wick{position:absolute;left:13px;top:-8px;width:4px;height:10px;background:#302028;border-radius:50%}
.real-flame{position:absolute;z-index:9;left:3px;top:-48px;width:24px;height:43px;border-radius:50% 50% 48% 48%;background:radial-gradient(ellipse at 50% 72%,#fffbd0 0 18%,#ffd45b 19% 48%,#ff7a48 49% 72%,#f04355 73% 100%);filter:drop-shadow(0 0 12px #ff9b54);animation:realFlicker .65s ease-in-out infinite alternate;transform-origin:50% 100%}
.real-flame span{position:absolute;left:7px;bottom:6px;width:10px;height:19px;border-radius:50%;background:#fffef0}
.real-flame.blown{animation:realBlow .55s ease-out forwards}
.realistic-cake.wished{animation:wishBounce .7s ease}
.sparkle{position:absolute;color:#ffd9e4;font-size:26px;opacity:.7}
.blow-text{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#ffd2dd;margin:0 auto 12px}
.blow-btn{cursor:pointer;min-width:235px;font-size:15px;position:relative;z-index:20;touch-action:manipulation}
.blow-btn:hover{background:#ff789926;box-shadow:0 10px 35px #ff789922}
.blow-btn:disabled{opacity:.72;cursor:default}
.blow-btn.done{border-color:#ff789966}
.wish-glow{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 42%,#ff78991f,transparent 28%);z-index:0}
@keyframes realFlicker{from{transform:rotate(-4deg) scale(.95,.98)}to{transform:rotate(4deg) scale(1.06,1.04)}}
@keyframes realBlow{0%{opacity:1;transform:translateX(0) scale(1)}35%{opacity:.85;transform:translateX(9px) translateY(-3px) scale(.9)}100%{opacity:0;transform:translateX(55px) translateY(-9px) scale(.08)}}
@keyframes wishBounce{0%,100%{transform:translateY(0)}35%{transform:translateY(-9px) scale(1.02)}}
@media(max-width:650px){.realistic-cake{transform:scale(.86);margin:-10px auto -18px}.blow-btn{min-width:250px;padding:16px 24px}}

/* High-contrast candle controls */
.candle-btn, button.candle-btn {
  color: #ffffff !important;
  background: linear-gradient(135deg, #c92f63, #8f1747) !important;
  border: 2px solid #ffd1df !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  text-shadow: 0 2px 4px #000 !important;
  box-shadow: 0 10px 30px #0008, 0 0 20px #ff789966 !important;
  min-width: 210px;
  padding: 16px 26px !important;
  cursor: pointer;
}
.candle-btn:hover, button.candle-btn:hover {
  background: linear-gradient(135deg, #e84b7d, #a91f56) !important;
  transform: translateY(-2px) scale(1.02);
}
.wish-message {
  color: #fff !important;
  background: rgba(80, 12, 43, .94) !important;
  border: 2px solid #ffd1df !important;
  text-shadow: 0 2px 5px #000 !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  padding: 18px 24px !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 35px #0009 !important;
}