@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
:root{--black:#090909;--panel:#111;--gold:#c6a66b;--gold2:#e1c994;--ivory:#f4efe5;--muted:#a8a196;--line:rgba(198,166,107,.28);--serif:'Cormorant Garamond',Georgia,serif;--sans:'Montserrat',Arial,sans-serif;--display:'Cinzel',serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--black);color:var(--ivory);font-family:var(--sans);font-weight:300;overflow-x:hidden}::selection{background:var(--gold);color:#090909}
.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.progress{height:2px;position:fixed;top:0;left:0;width:100%;z-index:30}.progress span{display:block;height:100%;width:0;background:var(--gold)}.topbar{height:76px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;position:absolute;top:0;width:100%;z-index:10;border-bottom:1px solid rgba(198,166,107,.12)}.brand{font:500 20px var(--display);letter-spacing:.12em;color:var(--gold);text-decoration:none}.brand span{color:var(--ivory);padding:0 3px}.topbar nav{display:flex;gap:34px}.topbar nav a,.sound-toggle{font:400 9px var(--sans);letter-spacing:.18em;color:#c9c1b4;text-decoration:none;transition:color .3s}.topbar nav a:hover,.sound-toggle:hover{color:var(--gold)}.sound-toggle{border:0;background:none;cursor:pointer}.sound-toggle span{font-size:8px;margin-left:5px}
.section{position:relative;padding:130px 9vw;min-height:80vh}.hero{min-height:100vh;display:grid;place-items:center;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 50% 46%,#242018 0%,#11100e 28%,#090909 68%)}.hero:after{content:"";position:absolute;inset:8%;border:1px solid rgba(198,166,107,.13);pointer-events:none}.hero-content{position:relative;z-index:2}.eyebrow{font-size:9px;letter-spacing:.25em;color:var(--gold);font-weight:500}.hero .eyebrow span{display:inline-block;width:25px;height:1px;background:var(--gold);vertical-align:middle;margin:0 12px}.hero-kicker,.hero-side-note,.scroll-cue,.hero-date{font-size:8px;letter-spacing:.22em;color:#a69b87}.hero h1{font:400 clamp(60px,9vw,120px)/.9 var(--display);letter-spacing:.02em;margin:30px 0}.hero h1 em,.intro h2 em,.center-heading h2 em,.letter h2 em,.wish h2 em,.closing h2 em{font-family:var(--serif);font-weight:400;color:var(--gold2)}.gold-dot{color:var(--gold)}.hero-subtitle{font:italic 22px/1.45 var(--serif);color:#c8bead}.text-link{display:inline-block;margin-top:34px;color:var(--gold2);font-size:8px;letter-spacing:.2em;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:10px}.text-link span{margin-left:16px}.hero-side-note{position:absolute;right:3%;top:50%;writing-mode:vertical-rl}.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%)}.scroll-cue span{display:block;width:1px;height:30px;background:var(--gold);margin:0 auto 10px}.hero-date{position:absolute;bottom:38px;right:6vw}.hero-orbit{position:absolute;border:1px solid rgba(198,166,107,.12);border-radius:50%;pointer-events:none}.orbit-one{width:55vw;height:55vw}.orbit-two{width:70vw;height:70vw;border-style:dashed;opacity:.45}
.section-index{font-size:8px;letter-spacing:.2em;color:var(--gold)}.section-index i{font-style:normal;color:#75664e;margin:0 8px}.intro{background:#0d0d0c}.intro-grid{display:grid;grid-template-columns:1fr 2fr;gap:8vw;margin:70px 0}.intro-label{font-size:9px;letter-spacing:.2em;color:var(--gold);line-height:2}.intro-copy h2{font:400 clamp(40px,5.2vw,70px)/1.02 var(--serif);margin:20px 0 25px}.body-copy{max-width:540px;color:var(--muted);font:400 16px/1.8 var(--serif)}.signature{font:italic 21px var(--serif);color:#c9b88f;margin-top:30px}.signature span{color:var(--gold)}.gold-rule{height:1px;background:var(--line);margin:90px 0 20px}.intro-foot{display:flex;justify-content:space-between;color:#847966;font-size:8px;letter-spacing:.18em}
.journey{background:#11100e}.center-heading{text-align:center;margin:30px auto 90px}.center-heading h2{font:400 clamp(45px,6vw,76px)/1 var(--display);margin:20px 0}.center-heading .body-copy{margin:auto}.timeline{max-width:900px;margin:auto;position:relative}.timeline:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}.timeline-item{display:grid;grid-template-columns:1fr 30px 1fr;gap:25px;align-items:start;margin-bottom:65px}.timeline-item:nth-child(even) .timeline-year{grid-column:3;grid-row:1;text-align:left}.timeline-item:nth-child(even) .timeline-marker{grid-column:2;grid-row:1}.timeline-item:nth-child(even) .timeline-card{grid-column:1;grid-row:1;text-align:right}.timeline-year{font-size:8px;letter-spacing:.2em;color:var(--gold);text-align:right;padding-top:8px}.timeline-marker{width:9px;height:9px;border:1px solid var(--gold);background:#111;border-radius:50%;margin:8px auto;z-index:1}.timeline-card{padding:28px;background:linear-gradient(135deg,#191713,#111);border:1px solid rgba(198,166,107,.12)}.timeline-card h3{font:500 30px var(--serif);margin:8px 0}.timeline-card p:last-child{font:400 14px/1.8 var(--serif);color:var(--muted)}.timeline-note{text-align:center;color:var(--gold);font-size:8px;letter-spacing:.22em;margin-top:90px}
.letter{background:radial-gradient(ellipse at 75% 50%,#211b12,#0a0a09 65%)}.letter-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:8vw;align-items:center;margin-top:70px}.letter-heading h2{font:400 clamp(65px,8vw,100px)/.85 var(--display);margin:25px 0}.envelope-wrap{min-height:360px;display:grid;place-items:center;position:relative}.envelope{position:relative;width:min(100%,390px);height:245px;border:0;background:#c6a66b;cursor:pointer;box-shadow:0 20px 60px #0008;overflow:hidden}.envelope:before,.envelope:after{content:"";position:absolute;bottom:0;width:0;height:0;border-style:solid;z-index:1}.envelope:before{left:0;border-width:122px 195px 0;border-color:#b89865 transparent transparent}.envelope:after{right:0;border-width:122px 0 0 195px;border-color:transparent transparent transparent #d4b984}.envelope-flap{position:absolute;top:0;left:0;width:0;height:0;border-left:194px solid transparent;border-right:194px solid transparent;border-top:130px solid #dfc48f;z-index:2;transform-origin:top;transition:transform .7s}.wax-seal{position:absolute;z-index:3;left:50%;top:48%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#6d2524;color:#e8d4ac;display:grid;place-items:center;font:16px var(--display)}.envelope-caption{position:absolute;z-index:4;bottom:18px;left:0;right:0;color:#4a3826;font-size:8px;letter-spacing:.2em}.envelope.opened{opacity:0;pointer-events:none}.letter-paper{position:absolute;width:min(100%,420px);background:#eee4d0;color:#3c3328;padding:35px 38px;box-shadow:0 25px 80px #0009;opacity:0;transform:translateY(25px) scale(.96);pointer-events:none;transition:all .7s;z-index:5}.letter-paper.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.letter-paper .eyebrow{font-size:7px;color:#927448}.letter-paper h3{font:italic 30px var(--serif);margin:0 0 12px}.letter-paper p:not(.eyebrow){font:400 11px/1.8 var(--serif)}.letter-sign{font:italic 17px var(--serif)!important;margin-top:20px}.close-letter{border:0;border-bottom:1px solid #927448;background:none;color:#725a38;font:500 8px var(--sans);letter-spacing:.15em;padding:8px 0;cursor:pointer}
.wish{background:radial-gradient(ellipse at 50% 60%,#282116,#0b0b0a 65%);text-align:center;overflow:hidden}.wish-content{max-width:650px;margin:auto;position:relative}.wish h2{font:400 clamp(55px,8vw,95px)/1 var(--display)}.wish .body-copy{margin:0 auto}.cake-scene{width:240px;height:190px;margin:48px auto 25px;position:relative}.cake-body{position:absolute;width:170px;height:85px;left:35px;bottom:25px;border-radius:8px 8px 22px 22px;background:linear-gradient(90deg,#8b6a42,#d4b67d 45%,#8d6b43);box-shadow:0 12px 35px #0008}.cake-top{position:absolute;width:170px;height:38px;left:35px;bottom:90px;border-radius:50%;background:linear-gradient(90deg,#d9c69f,#f0dfb7,#a98b5e);z-index:2}.cake-plate{position:absolute;width:220px;height:15px;left:10px;bottom:15px;border-radius:50%;background:linear-gradient(#e9dfca,#9d8b6b);box-shadow:0 9px 20px #0008}.icing-drip{position:absolute;top:12px;width:13px;height:24px;border-radius:0 0 10px 10px;background:#e5d5b4}.icing-drip:nth-child(1){left:35px;height:31px}.icing-drip:nth-child(2){left:86px;height:22px}.icing-drip:nth-child(3){right:35px;height:29px}.candle{position:absolute;z-index:4;left:111px;top:0;width:18px;height:75px}.candle-stick{height:64px;width:12px;margin:auto;background:repeating-linear-gradient(135deg,#eee0c4 0 5px,#b99865 5px 8px);border-radius:3px}.wick{width:2px;height:8px;background:#3a3025;margin:auto}.flame{position:absolute;width:16px;height:24px;top:-20px;left:1px;background:radial-gradient(ellipse at 50% 65%,#fff5c8 0 15%,#e8a33e 40%,#b64a18 75%);border-radius:50% 50% 50% 0;transform:rotate(-45deg);filter:drop-shadow(0 0 12px #f3b34f);animation:flicker .15s infinite alternate;transform-origin:bottom}.flame.out{opacity:0;animation:none}@keyframes flicker{to{transform:rotate(-42deg) scale(.92)}}.wish-status{font-size:8px;letter-spacing:.22em;color:#a69b87;margin:15px 0 22px}.gold-button{background:linear-gradient(110deg,#9c7b48,#e1c994,#9c7b48);border:0;color:#17120a;padding:16px 28px;font:600 9px var(--sans);letter-spacing:.18em;cursor:pointer;transition:filter .3s,transform .3s}.gold-button:hover{filter:brightness(1.15);transform:translateY(-3px)}.gold-button span{margin-left:16px}.confetti-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti{position:absolute;top:35%;width:6px;height:10px;background:var(--gold);animation:fall 2.8s ease-out forwards}.confetti:nth-child(3n){background:#f4efe5}.confetti:nth-child(3n+1){background:#94764a}@keyframes fall{to{transform:translate(var(--drift),420px) rotate(700deg);opacity:0}}
.closing{min-height:90vh;background:radial-gradient(ellipse at center,#201b13,#090909 62%);display:flex;align-items:center;justify-content:center;text-align:center;padding-bottom:110px}.closing-content h2{font:400 clamp(58px,9vw,105px)/.88 var(--display);margin-bottom:35px}.closing-line{font:italic 21px/1.5 var(--serif);color:#c0b7a8}.closing-ornament{font-size:22px;color:var(--gold);margin:35px}.closing-signature{font-size:8px;letter-spacing:.25em;color:var(--gold)}.replay-button{margin-top:35px;border:1px solid var(--line);background:transparent;color:#c9b88f;padding:14px 20px;font:500 8px var(--sans);letter-spacing:.2em;cursor:pointer}footer{position:absolute;bottom:30px;left:6vw;right:6vw;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.18em;color:#817765}.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:700px){.topbar{height:64px;padding:0 5vw}.topbar nav{gap:13px}.topbar nav a{font-size:7px;letter-spacing:.1em}.sound-toggle span{display:none}.section{padding:100px 7vw;min-height:auto}.hero{min-height:100svh}.hero h1{font-size:clamp(50px,13vw,82px)}.hero-subtitle{font-size:19px}.hero:after{inset:5%}.hero-side-note,.hero-date{display:none}.scroll-cue{bottom:25px}.intro-grid,.letter-layout{grid-template-columns:1fr;gap:35px}.section-index{margin-bottom:48px}.intro-label{font-size:8px}.intro-copy h2{font-size:49px}.gold-rule{margin:65px auto 20px}.center-heading{margin-bottom:60px}.center-heading h2{font-size:47px}.timeline:before{left:8px}.timeline-item,.timeline-item:nth-child(even){grid-template-columns:18px 1fr;gap:15px;margin-bottom:40px}.timeline-marker,.timeline-item:nth-child(even) .timeline-marker{grid-column:1;grid-row:1}.timeline-year,.timeline-item:nth-child(even) .timeline-year{grid-column:2;grid-row:1;text-align:left;padding:4px 0 10px}.timeline-card,.timeline-item:nth-child(even) .timeline-card{grid-column:2;grid-row:2;text-align:left;padding:22px}.timeline-card h3{font-size:27px}.timeline-note{margin-top:55px}.letter-heading h2{font-size:78px}.envelope-wrap{min-height:330px}.envelope{height:205px;width:min(100%,340px)}.envelope:before{border-width:102px 170px 0}.envelope:after{border-width:102px 0 0 170px}.envelope-flap{border-left-width:169px;border-right-width:169px;border-top-width:110px}.letter-paper{padding:25px 26px}.wish h2{font-size:60px}.closing{min-height:85vh;padding-top:100px}footer{font-size:6px;letter-spacing:.1em;gap:20px}.orbit-one{width:85vw;height:85vw}.orbit-two{width:100vw;height:100vw}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}