:root{--gold:#d6b45b;--gold-soft:#ead69a;--ink:#090506;--paper:#e8dfcf;--muted:#a99d8b;}
*{box-sizing:border-box}
html{background:#070304;scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 50% 15%,#251014 0,#0b0708 42%,#050304 100%);color:var(--paper);font-family:Montserrat,Arial,sans-serif;overflow-x:hidden}
main{position:relative;z-index:1;padding-top:42vh;padding-bottom:1px}
.topbar{position:fixed;z-index:50;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:center;background:linear-gradient(to bottom,rgba(4,2,3,.92),rgba(4,2,3,.35),transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:barIn 1.3s ease .7s both}
.topbar nav{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 18px}
.topbar a{color:#d9c9a8;text-decoration:none;font:500 10px/1 Montserrat,Arial,sans-serif;letter-spacing:2.2px;transition:.3s ease;text-shadow:0 1px 10px #000}
.topbar a:hover,.topbar a.active{color:#f0d99a}
.thanks-hero{position:fixed;z-index:0;inset:0;min-height:100vh;height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:0;pointer-events:none}
.hero-image-wrap{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.7);background:#080506}
.hero-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.92) contrast(1.02);transform:scale(1.055);animation:imageReveal 8s cubic-bezier(.2,.7,.2,1) .8s both}
.image-vignette{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,2,3,.4) 0%,transparent 24%,transparent 65%,rgba(5,2,3,.94) 100%),radial-gradient(circle at center,transparent 38%,rgba(5,2,3,.35) 100%);pointer-events:none}
.image-caption{position:absolute;left:50%;bottom:27px;transform:translateX(-50%);font:500 9px/1 Montserrat,Arial,sans-serif;letter-spacing:4px;color:#ead69a;white-space:nowrap;text-shadow:0 2px 15px #000;animation:captionIn 1.2s ease 2s both}
.letter{position:relative;width:min(790px,calc(100% - 38px));margin:0 auto;padding:70px 70px 90px;text-align:center;background:linear-gradient(160deg,rgba(26,13,17,.96),rgba(8,5,6,.98));border:1px solid rgba(214,180,91,.2);box-shadow:0 30px 100px rgba(0,0,0,.55);z-index:2;animation:letterIn 1.1s ease 2.7s both}
.ornament{color:var(--gold);font:24px/1 Georgia,serif;opacity:.9;margin-bottom:20px}
.eyebrow{margin:0 0 13px;color:var(--gold);font-size:9px;letter-spacing:4px}
h1{margin:0;color:#f0dfb0;font:500 clamp(38px,5vw,58px)/1.02 "Cormorant Garamond",Georgia,serif}
.divider{width:100px;height:1px;margin:28px auto 36px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.65}
.letter-text{font:400 17px/1.85 "Cormorant Garamond",Georgia,serif;color:#ddd1bf;text-align:left}
.letter-text p{margin:0 0 25px}
.letter-text strong{color:#f0dfb0;font-weight:600}
.letter-text em{color:#ead69a;font-style:italic}
.heart-line{text-align:center!important;color:#ead69a!important;font-size:27px!important;font-weight:600;margin:35px 0!important}
.signature{margin-top:52px;text-align:center}
.signature-line{width:150px;height:1px;margin:0 auto 18px;background:rgba(214,180,91,.55)}
.signature-name{color:#f0dfb0;font:500 25px/1.2 "Cormorant Garamond",Georgia,serif}
.signature-sub{margin-top:10px;color:#958a79;font-size:8px;letter-spacing:2px}
footer{padding:0 20px 35px;text-align:center;color:#645b50;font-size:7px;letter-spacing:2.5px}
.intro-curtain{position:fixed;inset:0;z-index:100;background:#050203;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:curtainOut 10.2s cubic-bezier(.7,0,.2,1) .35s forwards}
.intro-line{position:absolute;width:1px;height:0;background:linear-gradient(to bottom,transparent,#d6b45b,transparent);animation:lineGrow 1.8s ease .65s forwards}
.intro-word{max-width:min(760px,84vw);padding:0 20px;color:#ead69a;font:500 clamp(10px,1.35vw,15px)/1.65 Montserrat,Arial,sans-serif;letter-spacing:2.8px;text-align:center;text-shadow:0 2px 18px #000;opacity:0;animation:wordIn 1.5s ease 1.15s both,wordOut 1.2s ease 8.6s forwards}.intro-word span{display:block;margin-top:18px;font-size:.68em;letter-spacing:4px;color:#a99772}
@keyframes imageReveal{from{opacity:0;transform:scale(1.11)}to{opacity:1;transform:scale(1.055)}}
@keyframes imageRevealMobile{from{opacity:0;transform:none}to{opacity:1;transform:none}}
@keyframes letterIn{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}
@keyframes captionIn{from{opacity:0;transform:translate(-50%,15px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes barIn{from{opacity:0}to{opacity:1}}
@keyframes curtainOut{0%{opacity:1}78%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes lineGrow{to{height:110px}}
@keyframes wordIn{to{opacity:1}}
@keyframes wordOut{to{opacity:0}}
@media(max-width:720px){
 .topbar{height:54px}.topbar nav{gap:14px 18px}.topbar a{font-size:7px;letter-spacing:1.5px}
 main{padding-top:43vh} .thanks-hero{min-height:100vh;padding:0}.hero-image-wrap{height:100vh;box-shadow:none;display:flex;align-items:flex-start;justify-content:center;padding-top:54px}.hero-image{width:100%;height:auto;max-height:none;object-fit:contain;object-position:top center;transform:none;animation:imageRevealMobile 1.2s ease .8s both}
 .image-caption{bottom:20px;font-size:7px;letter-spacing:2.7px}
 .letter{width:calc(100% - 22px);margin:0 auto;padding:48px 25px 60px}
 h1{font-size:39px;line-height:1.04}.letter-text{font-size:18px;line-height:1.7}.letter-text p{margin-bottom:22px}.heart-line{font-size:25px!important}
 .intro-word{max-width:92vw;font-size:9px;line-height:1.6;letter-spacing:1.8px}.intro-word span{margin-top:14px;letter-spacing:2.5px} .signature{margin-top:42px}.signature-name{font-size:24px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.hero-image{transform:none}}