:root {
  --ink: #f7e9e8;
  --muted: #c4a9ae;
  --rose: #e9969d;
  --blush: #f5c5bd;
  --wine: #3c1826;
  --deep: #120a13;
  --card: rgba(61, 24, 39, .62);
  --line: rgba(245, 197, 189, .2);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--deep); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
button { font: inherit; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .08; z-index: 10; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
main { position: relative; }
.welcome { min-height: 100svh; padding: 13vh 8vw 10vh; display: flex; flex-direction: column; justify-content: center; position: relative; isolation: isolate; background: radial-gradient(ellipse at 70% 42%, rgba(152, 66, 91, .5), transparent 45%), linear-gradient(135deg, #160c17 0%, #2d1122 52%, #130a14 100%); transition: min-height .9s ease, height .9s ease, padding .9s ease, opacity .65s ease, transform .9s ease; }
.welcome::before { content: '♡'; position: absolute; font: 46vw/1 var(--serif); color: rgba(245, 197, 189, .055); right: -8vw; top: 4vh; z-index: -1; transform: rotate(-12deg); }
.welcome-glow { position: absolute; width: 18rem; height: 18rem; border-radius: 50%; background: rgba(232, 126, 145, .22); filter: blur(90px); right: 8%; bottom: 16%; z-index: -1; }
.eyebrow { text-transform: uppercase; letter-spacing: .27em; font-size: .68rem; color: var(--blush); display: flex; align-items: center; gap: .75rem; margin: 0 0 2rem; }
.eyebrow span { display: inline-block; width: 2.6rem; height: 1px; background: var(--rose); opacity: .7; }
.welcome h1 { font: 600 clamp(4.5rem, 12vw, 10rem)/.78 var(--serif); letter-spacing: -.045em; margin: 0; max-width: 8ch; }
em { color: var(--blush); font-style: italic; font-weight: 500; }
.welcome-copy { color: var(--muted); max-width: 23rem; line-height: 1.7; margin: 3rem 0 2.5rem; font-size: .92rem; }
.primary-button { display: inline-flex; align-items: center; justify-content: space-between; width: min(100%, 18rem); border: 1px solid rgba(245, 197, 189, .6); color: var(--ink); background: rgba(245, 197, 189, .09); padding: 1rem 1.15rem 1rem 1.35rem; border-radius: 999px; cursor: pointer; transition: .3s ease; letter-spacing: .03em; }
.primary-button b { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--blush); color: var(--wine); font-size: 1.2rem; transition: transform .3s; }
.primary-button:hover { background: rgba(245, 197, 189, .18); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(225, 119, 145, .2); }
.primary-button:hover b { transform: rotate(45deg); }
.sound-note { font-size: .7rem; color: #947980; margin: 1rem 0 0 1.3rem; }
.welcome.is-hidden { min-height: 0; height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; opacity: 0; transform: scale(1.03); pointer-events: none; }
.story { max-width: 46rem; margin: 0 auto; padding: 15vh 1.25rem 8rem; position: relative; background: linear-gradient(180deg, #120a13 0%, #1b0c18 100%); opacity: 0; min-height: 100vh; transform: translateY(20px); transition: opacity 1s ease .25s, transform 1s ease .25s; }
.story.is-visible { opacity: 1; transform: translateY(0); }
.story-header { text-align: center; margin-bottom: 7rem; }
.story-header .eyebrow { justify-content: center; }
.story-header h2 { font: 600 clamp(4rem, 11vw, 7.5rem)/.72 var(--serif); letter-spacing: -.05em; margin: 0 0 2.2rem; }
.story-header > p:last-child { max-width: 24rem; margin: auto; color: var(--muted); line-height: 1.8; font-size: .9rem; }
.message-card { border: 1px solid var(--line); background: linear-gradient(135deg, rgba(84, 34, 53, .66), rgba(37, 16, 29, .82)); border-radius: 1.2rem; padding: clamp(1.7rem, 6vw, 3.3rem); position: relative; overflow: hidden; box-shadow: 0 2rem 5rem rgba(0,0,0,.16); }
.message-card::after { content: '♡'; position: absolute; font: 15rem/1 var(--serif); color: rgba(245, 197, 189, .05); right: -1rem; bottom: -3.5rem; transform: rotate(-14deg); }
.message-card.featured { border-color: rgba(233, 150, 157, .42); }
.message-card.offset { margin: -2rem 2rem 0 auto; width: 88%; }
.message-card.final { margin-top: 0; background: linear-gradient(145deg, #4d1d32, #251123); }
.card-mark { position: absolute; right: 1.5rem; top: 1.4rem; font: 1.2rem var(--serif); color: var(--rose); opacity: .8; }
.message-label { color: var(--rose); text-transform: uppercase; letter-spacing: .2em; font-size: .64rem; margin: 0 0 1.3rem; }
.message-card h3 { font: 600 clamp(2.7rem, 8vw, 4.6rem)/.8 var(--serif); letter-spacing: -.04em; margin: 0 0 2rem; position: relative; z-index: 1; }
.message-text { color: #dec8ca; font: 1.08rem/1.75 var(--serif); max-width: 30rem; position: relative; z-index: 1; margin: 0; }
.signature { margin-top: 2rem; color: var(--blush); font: italic 1.35rem var(--serif); position: relative; z-index: 1; }
.signature span { margin-left: .5rem; font-family: sans-serif; }
.photo { margin: 4rem 0 5rem; position: relative; }
.photo img { width: 83%; height: 29rem; object-fit: cover; border-radius: .8rem; display: block; filter: saturate(.8) sepia(.12); box-shadow: 1.7rem 1.7rem 0 -1rem rgba(174, 84, 110, .25); }
.photo-one img { margin-left: 5%; }
.photo-two img { margin-left: 12%; height: 25rem; }
.photo figcaption { color: #a8878c; font: italic 1.3rem var(--serif); position: absolute; right: 2%; bottom: -1.6rem; transform: rotate(-4deg); }
.heart-line { color: var(--blush); letter-spacing: .35rem; font-size: 1.7rem; margin-top: 2.2rem; position: relative; z-index: 1; }
.story-footer { text-align: center; padding-top: 7rem; color: var(--blush); }
.story-footer p { font: italic 2.6rem var(--serif); margin: 0 0 .4rem; }
.story-footer span { font-size: 2.4rem; color: var(--rose); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.floating-hearts { position: fixed; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
.float-heart { position: absolute; bottom: -2rem; color: var(--rose); opacity: 0; animation: rise linear forwards; }
@keyframes rise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .6; } 100% { transform: translateY(-105vh) rotate(35deg); opacity: 0; } }
.audio-control[hidden] { display: none; }
.audio-control { position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 12; display: flex; gap: .6rem; align-items: center; background: rgba(24, 11, 21, .76); border: 1px solid var(--line); border-radius: 99px; padding: .35rem .8rem .35rem .35rem; backdrop-filter: blur(12px); }
.audio-control button { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--blush); color: var(--wine); cursor: pointer; position: relative; }
.audio-control button span { font-size: 1.2rem; }
.audio-control button i { display: block; position: absolute; inset: .6rem; border: 1px solid var(--wine); border-radius: 50%; animation: pulse 1.5s infinite; opacity: .7; }
.audio-control.paused button i { animation-play-state: paused; }
.audio-control > span { color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; }
@keyframes pulse { 0%,100% { transform: scale(.8); opacity: 0; } 45% { opacity: .8; } 70% { transform: scale(1.3); opacity: 0; } }
@media (min-width: 720px) { .welcome { padding-left: 15vw; } .story { padding-left: 3rem; padding-right: 3rem; } .story-header { text-align: left; max-width: 32rem; } .story-header .eyebrow { justify-content: flex-start; } .story-header > p:last-child { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }