:root { --ink: #533b36; --muted: #876b63; --gold: #d49b56; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font-family: "DM Sans", sans-serif; background: #f7e5dd; }
.hero { position: relative; isolation: isolate; display: grid; min-height: 100svh; overflow: hidden; place-items: center; padding: 48px 24px; background: radial-gradient(circle at 15% 23%, rgba(255,252,233,.9) 0 1px, transparent 1.6px) 0 0 / 37px 37px, radial-gradient(circle at 85% 78%, rgba(255,252,233,.7) 0 1.2px, transparent 1.8px) 0 0 / 51px 51px, linear-gradient(135deg, #f6ded7 0%, #fcefe2 50%, #edcec8 100%); }
.hero::before, .hero::after { position: absolute; z-index: -1; width: min(48vw,560px); aspect-ratio: 1; border-radius: 50%; content: ""; filter: blur(3px); }
.hero::before { top: -22%; left: -14%; background: rgba(255,245,215,.65); }.hero::after { right: -18%; bottom: -28%; background: rgba(226,166,165,.3); }
.glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(35px); opacity: .6; }.glow-one { width:240px; height:240px; top:12%; right:13%; background:#ffe4a3; }.glow-two { width:190px; height:190px; bottom:10%; left:10%; background:#f6b9b4; }
.stars { position:absolute; top:42px; color:#b47e68; font-size:14px; letter-spacing:12px; opacity:.75; }.content { width:min(100%,650px); text-align:center; }
.logo { display:block; width:210px; height:210px; margin:0 auto -8px; object-fit:contain; mix-blend-mode:multiply; }
.eyebrow { margin:0 0 13px; color:#aa7467; font-size:10px; font-weight:600; letter-spacing:3px; } h1 { margin:0; font-family:"Playfair Display",Georgia,serif; font-size:clamp(42px,7vw,72px); font-weight:500; line-height:1.06; letter-spacing:-2.5px; } h1 em { color:#ad7066; font-weight:500; }.intro { max-width:460px; margin:22px auto 0; color:var(--muted); font-size:15px; line-height:1.7; }
.candle-scene { position:relative; width:188px; height:258px; margin:35px auto 19px; }.shadow { position:absolute; bottom:1px; left:17px; width:154px; height:18px; border-radius:50%; background:rgba(109,70,60,.15); filter:blur(9px); }.candle-base { position:absolute; z-index:2; bottom:13px; left:33px; width:122px; height:16px; border-radius:50%; background:#d89983; }.candle { position:absolute; z-index:3; bottom:21px; left:38px; width:112px; height:148px; border-radius:13px 13px 19px 19px; background:linear-gradient(90deg,#f7e8d3,#fff8e9 48%,#ebcba9); box-shadow:inset 9px 0 13px rgba(182,121,76,.1),inset -8px 0 12px rgba(157,101,67,.11),0 8px 15px rgba(114,66,48,.14); }.candle::before { position:absolute; top:-7px; left:0; width:112px; height:16px; border-radius:50%; content:""; background:#fff2dd; box-shadow:inset 0 2px 3px rgba(142,83,53,.16); }.candle-label { position:absolute; z-index:4; top:137px; left:54px; width:80px; padding:12px 3px; border:1px solid #d2a28a; color:#a46f61; font-family:"Playfair Display",Georgia,serif; font-size:9px; font-style:italic; letter-spacing:.7px; line-height:1.45; }.wick { position:absolute; z-index:2; top:83px; left:92px; width:4px; height:22px; border-radius:4px; background:#52362f; }.flame { position:absolute; z-index:5; left:79px; border-radius:65% 35% 60% 40%; transform:rotate(-45deg); transform-origin:bottom; }.flame-outer { top:34px; width:32px; height:52px; background:#f3ae54; box-shadow:0 0 35px 10px rgba(250,186,81,.47); animation:flicker 1.7s ease-in-out infinite; }.flame-inner { top:48px; left:86px; width:17px; height:28px; background:#fff7c6; animation:flicker 1.7s ease-in-out .12s infinite; }.spark { position:absolute; z-index:5; color:#c98d57; font-size:18px; animation:twinkle 2s ease-in-out infinite alternate; }.spark-left { top:69px; left:28px; }.spark-right { top:48px; right:24px; animation-delay:.5s; }
.stay { margin:0 0 15px; color:#a26d62; font-family:"Playfair Display",Georgia,serif; font-size:19px; font-style:italic; }.contact { display:flex; justify-content:center; align-items:center; gap:16px; color:var(--ink); font-size:11px; font-weight:600; letter-spacing:.8px; }.contact a { color:inherit; text-decoration:none; transition:color .2s ease,transform .2s ease; }.contact a:hover { color:#b36f5f; transform:translateY(-1px); }.divider { width:1px; height:16px; background:rgba(83,59,54,.28); }
@keyframes flicker { 0%,100% { transform:rotate(-45deg) scale(1); opacity:1; } 25% { transform:rotate(-38deg) scale(.86,1.13); opacity:.88; } 55% { transform:rotate(-51deg) scale(1.08,.92); opacity:1; } 75% { transform:rotate(-41deg) scale(.91,1.08); opacity:.92; } } @keyframes twinkle { from { opacity:.35; transform:scale(.75); } to { opacity:1; transform:scale(1.08); } }
@media (max-width:460px) { .hero { padding:12px 20px 16px; }.logo { width:185px; height:185px; margin-bottom:-8px; }h1 { letter-spacing:-1.8px; }.intro { font-size:14px; }.candle-scene { margin-top:8px; transform:scale(.84); margin-bottom:-18px; }.contact { gap:9px; flex-direction:column; }.divider { display:none; }.stars { top:10px; } }
@media (prefers-reduced-motion: reduce) { .flame, .spark { animation: none; } }