:root {
  --wine: #7f173f;
  --rose: #bd496e;
  --pink: #f3a9bd;
  --paper: #fffaf6;
  --cream: #f8eee8;
  --ink: #2a1720;
  --muted: #806a72;
  --gold: #c99b57;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif; overflow-x: hidden; }
body.locked { overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; width: 100%; height: auto; }

.progress { position: fixed; inset: 0 0 auto; height: 3px; background: rgba(255,255,255,.18); z-index: 80; }
.progress span { display: block; height: 100%; width: 0; background: #f3afc3; transition: width .08s linear; }

.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; min-height: 100svh; padding: 24px; color: white; background: radial-gradient(circle at 20% 15%, #b13e62 0, transparent 38%), radial-gradient(circle at 90% 85%, #421528 0, transparent 46%), #7f173f; transition: opacity .7s ease, visibility .7s ease; }
.gate.open { opacity: 0; visibility: hidden; }
.gate-noise { position: absolute; inset: 0; opacity: .15; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' 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='.35'/%3E%3C/svg%3E"); }
.gate-card { position: relative; width: min(100%, 430px); padding: 46px 30px 34px; border: 1px solid rgba(255,255,255,.42); border-radius: 4px; text-align: center; background: rgba(73,12,35,.32); box-shadow: 0 28px 80px rgba(32,0,12,.35); backdrop-filter: blur(12px); }
.seal { width: 70px; height: 70px; margin: -82px auto 26px; display: grid; place-items: center; border: 1px solid #f3c2ce; border-radius: 50%; background: var(--wine); box-shadow: 0 0 0 7px rgba(255,255,255,.1); font-size: 30px; }
.eyebrow { margin: 0 0 16px; color: var(--wine); font: 600 .74rem/1.4 Arial, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow.light { color: #f8c5d2; }
.gate h1 { margin: 0; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.3; font-weight: 500; }
.gate-copy { margin: 22px auto 28px; max-width: 280px; color: #f6dce4; line-height: 1.8; }
.unlock-form label { display: block; margin-bottom: 9px; color: #f8c5d2; font-size: .86rem; }
.code-row { display: flex; gap: 9px; }
.code-row input { min-width: 0; flex: 1; height: 52px; border: 1px solid rgba(255,255,255,.5); border-radius: 99px; outline: none; color: white; background: rgba(255,255,255,.09); text-align: center; letter-spacing: .5em; padding-left: .5em; font: 600 1.2rem Arial, sans-serif; }
.code-row input:focus { border-color: white; box-shadow: 0 0 0 3px rgba(255,255,255,.1); }
.code-row button { width: 82px; border: 0; border-radius: 99px; color: var(--wine); background: white; font-weight: 700; }
.hint, .gate-error { min-height: 1.2em; margin: 10px 0 0; color: #e9bbc8; font-size: .78rem; }
.gate-error { color: #fff; }

#book { opacity: 0; transition: opacity .8s ease .2s; }
#book.visible { opacity: 1; }
.page-section { position: relative; min-height: 100svh; padding: 92px 22px; overflow: hidden; }
.paper { background-color: var(--paper); background-image: linear-gradient(90deg, rgba(127,23,63,.025) 1px, transparent 1px), linear-gradient(rgba(127,23,63,.025) 1px, transparent 1px); background-size: 24px 24px; }
.cover { display: flex; align-items: flex-end; padding: 0; min-height: 100svh; color: white; background: var(--wine); }
.cover-photo-wrap, .cover-photo-wrap::after { position: absolute; inset: 0; }
.cover-photo { height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.75) contrast(1.03); }
.cover-photo-wrap::after { content: ""; background: linear-gradient(to bottom, rgba(27,6,14,.08) 20%, rgba(42,8,21,.35) 57%, rgba(43,7,21,.94) 100%); }
.cover-wash { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(127,23,63,.42), transparent 54%); mix-blend-mode: color; }
.cover-content { position: relative; z-index: 2; width: min(100%, 700px); padding: 24vh 26px 9vh; }
.cover-kicker { margin: 0 0 14px; color: #f9dce4; font-size: 1rem; }
.cover h1 { margin: 0; font-size: clamp(3rem, 15vw, 6.5rem); line-height: .98; font-weight: 500; letter-spacing: -.04em; }
.cover h1 em { color: #ffc4d3; font-style: normal; }
.cover-sub { max-width: 450px; margin: 24px 0 30px; font-size: 1.05rem; line-height: 1.9; color: #fae9ee; }
.scroll-cue, .primary-btn { border: 1px solid rgba(255,255,255,.62); border-radius: 99px; padding: 13px 19px; color: white; background: rgba(255,255,255,.08); }
.scroll-cue span { display: inline-block; margin-left: 12px; animation: bounce 1.7s infinite; }

.opening { display: grid; place-items: center; }
.opening-grid { width: min(100%, 930px); display: grid; gap: 50px; align-items: center; }
.opening-copy h2, .section-heading h2, .journey-title h2, .random-card h2 { margin: 0 0 26px; font-size: clamp(2rem, 8vw, 4.6rem); line-height: 1.22; font-weight: 500; letter-spacing: -.04em; }
.opening-copy > p:last-child { color: var(--muted); font-size: 1.05rem; line-height: 2; }
.polaroid { margin: 0 auto; width: min(84vw, 320px); padding: 13px 13px 48px; background: white; box-shadow: 0 20px 55px rgba(60,27,39,.17); transform: rotate(3deg); }
.polaroid img { aspect-ratio: 3/4; object-fit: cover; }
.polaroid figcaption { margin-top: 16px; text-align: center; color: var(--muted); font-family: cursive; }
.chapter-mark { position: absolute; top: 38px; left: 22px; display: flex; align-items: center; gap: 12px; color: var(--wine); }
.chapter-mark span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; }
.chapter-mark i { display: block; width: 48px; height: 1px; background: currentColor; }

.ink { display: grid; place-items: center; color: white; background: radial-gradient(circle at 85% 10%, #9e3156, transparent 28%), linear-gradient(145deg, #531027, #250d17); }
.section-inner { width: min(100%, 980px); }
.numbers h2 { max-width: 780px; margin: 0 0 50px; font-size: clamp(2rem, 8vw, 4.5rem); line-height: 1.18; font-weight: 500; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255,255,255,.25); border-left: 1px solid rgba(255,255,255,.25); }
.stat { min-height: 145px; padding: 24px 16px; border-right: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); }
.stat strong { display: block; color: #ffc3d2; font: 400 clamp(2rem, 8vw, 4.2rem)/1.1 Georgia, serif; }
.stat span { display: block; margin-top: 11px; color: #ead6dc; font-size: .85rem; line-height: 1.5; }
.numbers-note { margin: 32px 0 0; color: #d8bfc7; line-height: 1.8; }

.messages { padding-top: 120px; }
.section-heading { max-width: 760px; margin: 0 auto 55px; }
.chat-stack { width: min(100%, 760px); margin: auto; display: flex; flex-direction: column; gap: 16px; }
.bubble { max-width: 88%; padding: 16px 18px; border-radius: 19px; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: 1rem; line-height: 1.7; box-shadow: 0 10px 25px rgba(55,22,33,.07); }
.bubble small { display: block; margin-bottom: 8px; opacity: .58; font-size: .72rem; }
.bubble.me { align-self: flex-end; color: white; background: var(--wine); border-bottom-right-radius: 5px; }
.bubble.her { align-self: flex-start; background: #f1e5e8; border-bottom-left-radius: 5px; }
.margin-note { max-width: 620px; margin: 48px auto 0; padding-left: 18px; border-left: 2px solid var(--rose); color: var(--muted); font-style: italic; line-height: 1.9; }

.journey { min-height: 100vh; padding: 110px 0 120px; color: white; background: #2b111b; }
.journey::before { content: ""; position: absolute; top: 0; left: 22px; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(255,255,255,.22) 8%, rgba(255,255,255,.22) 92%, transparent); }
.journey-title { max-width: 980px; margin: 0 auto 90px; padding: 0 28px 0 50px; }
.journey-title h2 { max-width: 800px; }
.light-mark { position: static; margin-bottom: 42px; color: #efadc0; }
.memory { width: min(100% - 44px, 980px); margin: 0 auto 110px; display: grid; gap: 28px; align-items: center; }
.memory-photo { overflow: hidden; background: #16080e; box-shadow: 0 26px 60px rgba(0,0,0,.3); }
.memory-photo img { height: auto; object-fit: contain; }
.memory-photo.landscape { aspect-ratio: auto; }
.memory-photo.portrait-photo { width: min(100%, 460px); }
.memory-copy { padding: 0 8px; }
.memory-copy span { color: #efadc0; font: 600 .74rem Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.memory-copy h3 { margin: 11px 0 15px; font-size: clamp(1.7rem, 7vw, 3rem); line-height: 1.25; font-weight: 500; }
.memory-copy p { margin: 0; color: #ceb9c1; font-size: 1rem; line-height: 1.9; }
.mini-collage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.mini-collage img { height: auto; min-width: 0; object-fit: contain; border-radius: 4px; }
.collage-card > .memory-copy { order: -1; }
.collage-card > .mini-collage { order: 0; }
.final-memory { margin-bottom: 0; }

.music-toggle { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 85; display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.45); border-radius: 99px; background: rgba(68,17,37,.92); color: #fffaf6; box-shadow: 0 4px 18px rgba(0,0,0,.14); font: 500 .875rem/1.3 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.music-toggle[hidden] { display: none; }
.music-toggle:focus-visible { outline: 3px solid #f3a9bd; outline-offset: 3px; }
.music-toggle[aria-pressed="true"] .music-icon { animation: music-pulse 2s ease-in-out infinite; }
.music-note { margin: 12px 0 0; color: #f6dce4; font-size: .875rem; line-height: 1.6; }
@keyframes music-pulse { 50% { opacity: .55; } }

@media (max-width: 759px) {
  .memory { gap: 24px; margin-bottom: 72px; }
  .final-memory { margin-bottom: 0; }
}

.random-memory { display: grid; place-items: center; }
.random-card { width: min(100%, 640px); text-align: center; }
.memory-candy { min-height: 150px; display: grid; place-items: center; margin: 40px 0 24px; padding: 26px; border: 1px solid #e3bcc7; border-radius: 50% 50% 48% 52% / 56% 46% 54% 44%; color: var(--wine); background: #faeaf0; font-size: 1.2rem; line-height: 1.8; transition: transform .25s ease, opacity .25s ease; }
.memory-candy.swap { opacity: 0; transform: scale(.92) rotate(-2deg); }
.primary-btn { border-color: var(--wine); color: white; background: var(--wine); padding: 14px 24px; }

.letter { min-height: auto; padding: 90px 20px 0; color: #3a2029; background: linear-gradient(160deg, #f1d7de, #f9eee9 55%, #f4ccd7); }
.letter-shell { position: relative; width: min(100%, 720px); margin: 0 auto 90px; padding: 34px 24px 42px; background: rgba(255,252,249,.93); box-shadow: 0 24px 70px rgba(82,25,45,.18); }
.letter-shell::before { content: ""; position: absolute; inset: 12px; border: 1px solid #dfc1c8; pointer-events: none; }
.letter-top { position: relative; display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #e0cbd0; color: var(--wine); font: 600 .72rem Arial, sans-serif; letter-spacing: .16em; }
.letter-lead { margin-top: 38px !important; font-size: 1.18rem; color: var(--wine); }
.letter-shell p { position: relative; margin: 0 0 20px; font-size: 1rem; line-height: 2; }
.letter-shell strong { color: var(--wine); font-weight: 600; }
.letter-shell .big-wish { margin: 32px 0; color: var(--wine); font-size: clamp(1.45rem, 6vw, 2.1rem); line-height: 1.7; text-align: center; }
.signature { position: relative; margin: 34px 10px; text-align: right; color: var(--wine); font-size: 1.15rem; line-height: 1.7; }
.signature span { color: var(--muted); font: .76rem Arial, sans-serif; letter-spacing: .1em; }
.wish-btn { position: relative; display: block; width: 100%; padding: 15px 18px; border: 0; border-radius: 2px; color: white; background: var(--wine); }
.ending { min-height: 80svh; margin: 0 -20px; padding: 100px 24px 80px; display: grid; place-content: center; text-align: center; color: white; background: #2b111b; opacity: 0; transform: translateY(30px); transition: .9s ease; }
.ending.show { opacity: 1; transform: translateY(0); }
.ending p { color: #dcbec8; }
.ending h2 { margin: 18px 0; color: #ffc3d2; font-size: clamp(2.8rem, 13vw, 5rem); line-height: 1.06; font-weight: 500; }
.ending h2 em { font-size: .38em; font-weight: 400; }
.ending button { margin: 30px auto 0; border: 0; color: white; background: transparent; text-decoration: underline; text-underline-offset: 5px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 28px; background: rgba(21,6,12,.93); opacity: 0; visibility: hidden; transition: .3s ease; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(100%, 900px); max-height: 82vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 20px 70px #000; }
.lightbox button { position: absolute; top: max(20px, env(safe-area-inset-top)); right: 22px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: white; background: transparent; font-size: 1.8rem; line-height: 1; }
#confetti { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.confetto { position: absolute; top: -20px; animation: fall linear forwards; }

@keyframes bounce { 50% { transform: translateY(5px); } }
@keyframes fall { to { transform: translate3d(var(--drift), 105vh, 0) rotate(720deg); opacity: .9; } }

@media (min-width: 760px) {
  .page-section { padding: 120px 60px; }
  .cover-content { padding-left: 8vw; padding-bottom: 11vh; }
  .opening-grid { grid-template-columns: 1.1fr .8fr; }
  .chapter-mark { left: 60px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { min-height: 190px; padding: 34px 24px; }
  .memory { grid-template-columns: 1.25fr .75fr; gap: 60px; }
  .memory-right { grid-template-columns: .75fr 1.25fr; }
  .memory-right > :first-child { order: 2; }
  .memory-right > .memory-copy { order: 1; }
  .memory.collage-card { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .collage-card > .memory-copy { order: -1; max-width: 720px; }
  .collage-card > .mini-collage { order: 0; }
  .mini-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .mini-collage:not(.two) img:first-child { grid-column: 1 / -1; }
  .memory-photo.portrait-photo { width: 100%; }
  .letter { padding-top: 130px; }
  .letter-shell { padding: 58px 64px 62px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}