:root { --paper:#fff7f1; --wine:#8d2144; --dark:#512337; --ink:#512537; --muted:#7e6066; --pink:#f8c3d1; --serif:"Cormorant Garamond",Georgia,serif; --sans:"DM Sans",Arial,sans-serif; --hand:"Caveat","Segoe Print",cursive; }
* { box-sizing:border-box; }
html { min-height:100%; }
body { margin:0; min-height:100svh; display:flex; flex-direction:column; font-family:var(--sans); -webkit-font-smoothing:antialiased; }
body.dark-page { color:#fff1ec; background:radial-gradient(ellipse at 50% 40%,#82415a 0%,var(--dark) 60%); }
body.light-page { color:var(--ink); background:var(--paper); }
a { color:inherit; }
button { font:inherit; }
a,button { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
a:focus-visible,button:focus-visible { outline:3px solid #d06e93; outline-offset:6px; }
::selection { background:#f4bfd0; color:#512537; }
.grain { position:fixed; z-index:9; inset:0; pointer-events:none; opacity:.1; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E"); }
.skip-link { position:fixed; top:-100px; left:20px; z-index:40; padding:12px; background:white; color:var(--ink); }
.skip-link:focus { top:16px; }
.site-header { width:min(1300px,calc(100% - 100px)); margin:0 auto; padding-block:24px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #fff1ec18; }
.light-page .site-header { border-color:#51253718; }
.wordmark { font:500 32px var(--hand); text-decoration:none; line-height:1; }
.wordmark span { font:14px var(--sans); color:var(--pink); }
.light-page .wordmark span { color:var(--wine); }
.date { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#e2bbc9; }
.light-page .date { color:var(--muted); }
.journey { width:fit-content; max-width:calc(100% - 32px); margin:26px auto 0; }
.journey ol { display:flex; list-style:none; margin:0; padding:0; gap:35px; }
.journey li { display:flex; gap:8px; align-items:center; font-size:12px; color:#b997a5; }
.journey li > span { display:grid; place-items:center; width:25px; height:25px; border:1px solid #bd8ea45c; border-radius:50%; font-size:11px; }
.journey [aria-current] { color:#ffe4ed; }
.journey [aria-current] > span { background:var(--pink); color:var(--dark); border-color:var(--pink); }
.journey .complete { color:#e1b3c3; }
.light-page .journey li { color:#a48990; }
.light-page .journey [aria-current] { color:var(--wine); }
.light-page .journey [aria-current] > span { background:var(--wine); border-color:var(--wine); color:var(--paper); }
.light-page .journey .complete { color:var(--muted); }
.screen { position:relative; width:min(1100px,calc(100% - 48px)); margin-inline:auto; text-align:center; flex:1; }
.eyebrow { text-transform:uppercase; letter-spacing:.19em; font-size:12px; font-weight:500; line-height:1.7; color:#ecc3d1; margin:0 0 16px; }
.light-page .eyebrow { color:var(--wine); }
h1 { font:500 clamp(53px,6.3vw,85px)/.97 var(--serif); letter-spacing:-.035em; margin:0 0 20px; }
h1 em { color:var(--pink); font-weight:400; }
.light-page h1 em { color:var(--wine); }
.screen-intro { font-size:16px; line-height:1.65; color:#edcdd7; margin:0; }
.light-page .screen-intro { color:var(--muted); }
.handwritten { font:400 28px/1.25 var(--hand); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 27px; border:1px solid transparent; border-radius:5px; font-size:14px; font-weight:500; text-decoration:none; cursor:pointer; transition:transform .2s,box-shadow .2s,background .2s; }
.button:hover { transform:translateY(-2px); box-shadow:0 9px 28px #1b0c1b1e; }
.button:active { transform:translateY(0); }
.button span { font-size:20px; line-height:1; }
.blush-button { background:#f9c5d4; color:var(--dark); }
.blush-button:hover { background:#ffdae4; }
.wine-button { background:var(--wine); color:var(--paper); }
.wine-button:hover { background:#731832; }
.status { font-size:12px; line-height:1.6; min-height:19px; margin:13px 0 0; color:#d4abba; }
.light-page .status { color:var(--muted); }
.quiet-link { display:block; width:fit-content; margin:23px auto 0; color:#dfb3c3; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.light-page .quiet-link { color:var(--muted); }
.site-footer { width:min(1300px,calc(100% - 100px)); margin:0 auto; display:flex; justify-content:space-between; gap:12px; align-items:center; padding:23px 0; font-size:12px; color:#c99cad; }
.light-page .site-footer { color:var(--muted); }
.site-footer > span:nth-child(2) { font-size:21px; color:var(--pink); }
.light-page .site-footer > span:nth-child(2) { color:var(--wine); }
.cake-main { display:grid; grid-template-columns:1.1fr 1fr; gap:45px; align-items:center; padding:35px 0 30px; }
.cake-copy { text-align:left; padding-bottom:20px; }
.cake-main h1 { font-size:clamp(53px,5.7vw,78px); margin-bottom:15px; }
.cake-scene { position:relative; width:min(400px,100%,max(250px,calc(100svh - 310px))); margin:3px auto 20px; }
.cake-object { position:relative; display:block; width:100%; aspect-ratio:1; border:0; margin:0; padding:0; background:transparent; cursor:pointer; touch-action:pan-y; }
.cake-object:disabled { cursor:default; }
.cake-half { position:absolute; inset:0; transition:transform 1s cubic-bezier(.2,.65,.2,1); }
.cake-half img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 20px 22px #25061822); }
.cake-half-left { clip-path:inset(0 50% 0 0); }
.cake-half-right { clip-path:inset(0 0 0 50%); }
.cake-scene.is-cut .cake-half-left { transform:translateX(-24px) rotate(-4deg); }
.cake-scene.is-cut .cake-half-right { transform:translateX(24px) rotate(4deg); }
.cut-guide { position:absolute; top:48%; bottom:22%; left:50%; border-left:1px dashed #ffffff80; opacity:0; transition:opacity .2s; }
.cake-object:hover .cut-guide,.cake-object:focus-visible .cut-guide { opacity:.8; }
.cake-scene.is-cut .cut-guide { animation:cut-stroke .8s both; border-style:solid; border-width:2px; }
@keyframes cut-stroke { 0% { opacity:1; transform:scaleY(0); transform-origin:top; } 65% { opacity:1; transform:scaleY(1); } 100% { opacity:0; } }
.sparkle { position:absolute; color:#efb6ca; pointer-events:none; font:46px var(--serif); }
.sparkle-a { top:22%; left:1%; transform:rotate(14deg); }
.sparkle-b { bottom:27%; right:0; font-size:25px; }
.cake-caption { color:#f3c5d4; font-size:26px; margin:25px 0 0; transform:rotate(-3deg); }
.cake-actions { min-height:52px; }
.next-link { animation:appear .45s both; }
.envelope-main { display:grid; grid-template-columns:1fr 1fr; gap:45px; align-items:center; padding:55px 0 45px; }
.envelope-copy { text-align:left; }
.envelope-main h1 { font-size:clamp(55px,6.7vw,87px); }
.envelope-object { display:block; position:relative; width:min(430px,100%); aspect-ratio:1.5; margin:35px auto 32px; isolation:isolate; text-decoration:none; }
.envelope-object > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 18px 15px #51253713); transition:transform .6s,opacity .5s; z-index:2; }
.envelope-object:hover > img { transform:translateY(-7px) rotate(-2deg); }
.envelope-sparkle { top:0; right:-3%; color:var(--wine); }
.letter-peek { position:absolute; display:flex; flex-direction:column; align-items:center; padding:25px; width:66%; height:70%; top:10%; left:17%; background:#fffdf8; border:1px solid #eddad9; box-shadow:0 4px 15px #51253710; transform:translateY(20px) rotate(-3deg); transition:transform .8s,opacity .6s; z-index:1; opacity:0; }
.letter-peek .handwritten { color:var(--wine); font-size:30px; margin-bottom:23px; }
.peek-line { width:100%; height:1px; background:#eacfd8; margin:9px 0; }
.peek-line.short { width:70%; align-self:flex-start; }
.envelope-object.is-open > img { transform:translateY(40px) rotate(-5deg); opacity:.2; }
.envelope-object.is-open .letter-peek { transform:translateY(-52px) rotate(0); opacity:1; z-index:3; }
.envelope-caption { color:var(--muted); margin:25px 0 0; font-size:26px; transform:rotate(-3deg); }
.is-opening #open-letter { pointer-events:none; opacity:.7; }
.letter-main { width:min(630px,calc(100% - 56px)); margin:35px auto 0; text-align:center; flex:1; padding-bottom:30px; }
.letter-main > .eyebrow { margin-bottom:24px; }
.love-letter { text-align:left; position:relative; background:#fffdf9; border:1px solid #ead6db; padding:31px 40px 26px; box-shadow:7px 8px 0 #f1dce3; margin-bottom:32px; }
.love-letter::before { content:""; position:absolute; width:78px; height:24px; top:-12px; left:calc(50% - 39px); background:#eac9be99; transform:rotate(-6deg); }
.letter-topline { padding-bottom:16px; margin-bottom:22px; border-bottom:1px solid #eddad9; display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.13em; color:var(--muted); }
.letter-topline > span:last-child { font-size:17px; color:var(--wine); }
.love-letter h1 { font-size:43px; line-height:1.05; margin-bottom:23px; letter-spacing:-.025em; }
.letter-emojis { font:23px var(--sans); white-space:nowrap; }
.love-letter > p { font-size:16px; line-height:1.85; color:#694c55; margin:0 0 17px; }
.love-letter > .letter-signoff { font:500 32px/1.25 var(--hand); color:var(--wine); margin-top:23px; margin-bottom:23px; }
.letter-bottomline { display:flex; justify-content:space-between; align-items:center; font:24px var(--hand); color:var(--muted); padding-top:15px; border-top:1px solid #eddad9; }
.letter-bottomline > span:last-child { color:var(--wine); font-size:32px; transform:rotate(-10deg); }
.letter-main > .quiet-link { margin-top:17px; }
.memories-main { padding:38px 0 25px; }
.memories-main h1 { font-size:clamp(48px,5.2vw,72px); }
.memories-main h1 em { font-size:.78em; }
.memory-gallery { display:flex; gap:32px; justify-content:center; align-items:center; margin:47px auto 37px; padding-inline:22px; width:min(900px,100%); }
.polaroid { width:calc((100% - 64px)/3); max-width:250px; margin:0; padding:13px 13px 0; background:#fffdf9; box-shadow:0 15px 35px #220b251f; transition:transform .3s; }
.polaroid:nth-child(1) { transform:rotate(-8deg); }
.polaroid:nth-child(2) { transform:rotate(3deg) translateY(-13px); }
.polaroid:nth-child(3) { transform:rotate(8deg); }
.polaroid:hover { transform:rotate(0) translateY(-9px); }
.polaroid img { width:100%; height:auto; aspect-ratio:4/5; display:block; object-fit:cover; background:white; border:1px solid #f1e8e5; }
.polaroid figcaption { font:400 24px/1.15 var(--hand); padding:14px 0 18px; color:#685055; }
.memory-signoff { color:var(--pink); font-size:36px; margin:0 0 13px; }
.final-wish { font-size:15px; margin-bottom:24px; }
.confetti-layer { position:fixed; z-index:30; inset:0; overflow:hidden; pointer-events:none; }
.confetti-piece { position:absolute; top:-30px; width:8px; height:14px; border-radius:2px; animation:confetti-fall var(--duration) cubic-bezier(.14,.48,.68,1) var(--delay) both; }
@keyframes confetti-fall { from { transform:translate3d(0,-30px,0) rotate(0); opacity:1; } to { transform:translate3d(var(--drift),110vh,0) rotate(var(--rotation)); opacity:0; } }
.entrance { animation:appear .65s both; }
@keyframes appear { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
@media (max-width:760px) {
  .site-header,.site-footer { width:calc(100% - 42px); }
  .site-header { padding-block:21px; }
  .wordmark { font-size:29px; }
  .date { font-size:11px; letter-spacing:.02em; }
  .journey { margin-top:22px; }
  .journey ol { gap:26px; }
  .journey li { gap:7px; font-size:12px; }
  .screen { width:calc(100% - 40px); }
  .cake-main { display:block; padding-top:25px; }
  .cake-copy { text-align:center; padding-bottom:0; }
  .cake-main h1 { font-size:clamp(43px,12vw,70px); }
  .cake-main .eyebrow { font-size:11px; letter-spacing:.14em; }
  .screen-intro { font-size:16px; }
  .cake-scene { width:min(300px,96%,max(210px,calc(100svh - 470px))); margin-top:12px; margin-bottom:12px; }
  .cake-scene.is-cut .cake-half-left { transform:translateX(-17px) rotate(-4deg); }
  .cake-scene.is-cut .cake-half-right { transform:translateX(17px) rotate(4deg); }
  .cake-caption { display:none; }
  .sparkle-a { font-size:36px; }
  .envelope-main { display:block; padding-top:36px; }
  .envelope-copy { text-align:center; }
  .envelope-main h1 { font-size:clamp(51px,13vw,70px); }
  .envelope-object { width:min(340px,95%); margin-top:43px; }
  .envelope-caption { display:none; }
  .letter-main { width:calc(100% - 42px); margin-top:31px; }
  .love-letter { padding:26px 25px 21px; box-shadow:5px 6px 0 #f1dce3; }
  .love-letter h1 { font-size:39px; }
  .letter-topline { font-size:10px; }
  .memories-main { padding-top:35px; }
  .memories-main h1 { font-size:clamp(44px,10vw,67px); }
  .memories-main h1 em { display:inline-block; max-width:330px; font-size:.8em; }
  .memory-gallery { flex-direction:column; gap:31px; margin-block:35px 42px; padding:0; }
  .polaroid { width:70%; max-width:280px; }
  .polaroid:nth-child(1) { transform:rotate(-6deg); }
  .polaroid:nth-child(2) { transform:rotate(4deg); }
  .polaroid:nth-child(3) { transform:rotate(-4deg); }
  .polaroid figcaption { font-size:26px; }
  .memory-signoff { font-size:33px; }
  .final-wish { font-size:15px; line-height:1.8; max-width:320px; margin-inline:auto; }
  .site-footer { padding-block:24px; font-size:11px; }
  .site-footer > span:first-child,.site-footer > span:last-child { max-width:44%; }
  .site-footer > span:last-child { text-align:right; }
}
@media (max-width:365px) {
  .date { max-width:150px; text-align:right; line-height:1.6; }
  .site-header { gap:12px; }
  .journey ol { gap:18px; }
  .love-letter { padding-inline:20px; }
  .love-letter h1 { font-size:35px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
}