:root {
  --background: #1d0710;
  --foreground: #fff7ee;
  --card: #2a0c17;
  --card-foreground: #fff7ee;
  --popover: #fff9f3;
  --popover-foreground: #36131d;
  --primary: #f8c9ca;
  --primary-foreground: #4c1324;
  --secondary: #582034;
  --secondary-foreground: #fff7ee;
  --muted: #341321;
  --muted-foreground: #dab7b7;
  --accent: #f4d6b9;
  --accent-foreground: #4c1324;
  --destructive: #d03f62;
  --border: rgba(255, 238, 226, .16);
  --input: rgba(255, 238, 226, .2);
  --ring: #efb4bb;
  --radius: 1rem;
  --wine: #421324;
  --wine-deep: #200811;
  --blush: #efb4bb;
  --rose: #b84c66;
  --cream: #fff8ef;
  --ink: #3d1721;
  --font-cormorant: Georgia, 'Times New Roman', serif;
  --font-nunito: 'Trebuchet MS', Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--background); }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-nunito), ui-sans-serif, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; font-weight: 700; white-space: nowrap; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.btn:focus-visible, button:focus-visible { outline: 3px solid rgba(238, 168, 180, .65); outline-offset: 3px; }
.btn:disabled { opacity: .72; cursor: default; }
.btn svg { width: 18px; height: 18px; }
::selection { background: #d9798e; color: white; }

.birthday-shell { position: relative; min-height: 100svh; overflow: hidden; background: var(--wine-deep); }
.birthday-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 70;
  opacity: .06;
  pointer-events: none;
  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");
}
.ambient-glow { position: absolute; z-index: 2; border-radius: 999px; opacity: .65; }
.ambient-glow-one { width: 10px; height: 10px; top: 12%; left: 8%; background: #ffd1bd; box-shadow: 0 0 35px 8px #f9a6a1; }
.ambient-glow-two { width: 7px; height: 7px; top: 79vh; right: 13%; background: #ffe8bc; box-shadow: 0 0 38px 9px #d46d78; }

.loading-screen, .transition-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px;
  color: #4b1726;
  text-align: center;
  background: radial-gradient(circle at center, #fffdf8 0%, #fce9e5 58%, #eec9c7 100%);
}
.transition-screen { animation: transition-in .24s ease both; }
.loading-screen p, .transition-screen p { margin: 8px 0 0; font-family: var(--font-cormorant), Georgia, serif; font-size: clamp(22px, 4vw, 32px); font-style: italic; }
.chibi-sprite, .chibi-large, .wish-chibi, .footer-chibi {
  background-image: url('assets/generated/cynthia-chibi-sheet.png');
  background-repeat: no-repeat;
  background-size: 200% 200%;
}
.chibi-sprite { width: min(260px, 58vw); aspect-ratio: 1; filter: drop-shadow(0 20px 25px rgba(84, 28, 42, .14)); animation: chibi-bob 1.2s ease-in-out infinite; }
.sprite-0 { background-position: 0% 0%; }
.sprite-1 { background-position: 100% 0%; }
.sprite-2 { background-position: 0% 100%; }
.sprite-3 { background-position: 100% 100%; }
.loading-dots { display: flex; gap: 6px; margin-top: 18px; }
.loading-dots span { width: 7px; aspect-ratio: 1; border-radius: 50%; background: #b34f69; animation: dot-pulse 1s ease-in-out infinite; }
.loading-dots span:nth-child(2) { animation-delay: .14s; }
.loading-dots span:nth-child(3) { animation-delay: .28s; }

.hero {
  position: relative;
  z-index: 3;
  width: min(1180px, calc(100% - 40px));
  min-height: 100svh;
  margin: 0 auto;
  padding: 56px 0 82px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: clamp(48px, 7vw, 105px);
}
.hero::before { content: ''; position: absolute; z-index: -1; width: 620px; aspect-ratio: 1; right: -130px; top: 3vh; border-radius: 50%; background: rgba(165, 52, 80, .16); filter: blur(80px); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 30px; color: #ecc4be; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow svg { width: 16px; }
.for-you { max-width: 480px; margin: 0 0 20px; color: #d7aba9; font-size: 14px; line-height: 1.75; }
.hero h1 { margin: 0; color: #fff5eb; font-family: var(--font-cormorant), Georgia, serif; font-size: clamp(57px, 7vw, 96px); font-weight: 500; line-height: .86; letter-spacing: -.045em; }
.hero h1 em { color: #f0b7bc; font-weight: 400; }
.hero-note { max-width: 530px; margin: 32px 0 28px; color: #e4c6c0; font-size: 16px; line-height: 1.8; }
.open-surprise { height: 52px; padding: 0 24px; border-radius: 999px; color: #4c1324; background: #f8c9ca; box-shadow: 0 14px 45px rgba(236, 155, 169, .18); transition: transform .25s ease, box-shadow .25s ease; }
.open-surprise:hover { transform: translateY(-3px); box-shadow: 0 18px 55px rgba(236, 155, 169, .28); }
.open-surprise svg { width: 17px; }
.tiny-note { margin: 14px 0 0 7px; color: #9d7277; font-size: 11px; }
.portrait-wrap { position: relative; justify-self: center; width: min(470px, 100%); }
.portrait-kicker { position: absolute; z-index: 3; top: 10px; left: -35px; color: #f2c9ba; font-family: var(--font-cormorant), Georgia, serif; font-size: 19px; font-style: italic; transform: rotate(-7deg); }
.portrait-frame { position: relative; aspect-ratio: 4 / 5.55; overflow: hidden; border: 1px solid rgba(255, 233, 218, .25); border-radius: 48% 48% 20px 20px; box-shadow: 0 40px 100px rgba(3, 0, 1, .55), 0 0 0 10px rgba(255,255,255,.025); }
.portrait-frame img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 1.4s ease; }
.portrait-frame:hover img { transform: scale(1.035); }
.seal { position: absolute; right: -28px; bottom: 12%; display: grid; place-items: center; width: 82px; aspect-ratio: 1; border: 1px solid rgba(255, 226, 203, .55); border-radius: 50%; background: rgba(45, 12, 22, .87); color: #f5d6c0; font-family: var(--font-cormorant), Georgia, serif; font-size: 36px; box-shadow: 0 15px 40px rgba(0,0,0,.25); backdrop-filter: blur(10px); }
.seal small { margin-left: 2px; font-size: 13px; }

.light-section { color: var(--ink); background: var(--cream); }
.dark-section { color: #fff5ed; background: var(--wine-deep); }
.section-number { margin: 0 0 24px; color: #a25f6f; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.light-section h2, .dark-section h2, .wish-section h2 { margin: 0; font-family: var(--font-cormorant), Georgia, serif; font-size: clamp(49px, 6.3vw, 88px); font-weight: 500; line-height: .9; letter-spacing: -.045em; }
.light-section h2 em, .dark-section h2 em, .wish-section h2 em { color: #bd6075; font-weight: 400; }

.story-section { position: relative; z-index: 4; min-height: 1100px; padding: clamp(100px, 12vw, 170px) max(24px, calc((100vw - 1180px) / 2)); border-radius: 60px 60px 0 0; }
.section-intro { width: min(610px, 100%); margin-left: auto; }
.section-intro > p:last-child { width: min(480px, 100%); margin: 30px 0 0 auto; color: #79535b; font-size: 15px; line-height: 1.9; }
.memory-collage { position: relative; width: min(1060px, 100%); height: 720px; margin: 60px auto 0; }
.memory-photo { position: absolute; overflow: visible; margin: 0; padding: 10px 10px 48px; border: 0; background: #fff; color: #59303a; box-shadow: 0 18px 55px rgba(66, 25, 34, .16); cursor: zoom-in; transition: z-index .1s, transform .35s ease, box-shadow .35s ease; }
.memory-photo:hover { z-index: 10; transform: rotate(0deg) scale(1.055) !important; box-shadow: 0 28px 70px rgba(66, 25, 34, .24); }
.memory-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.memory-photo span { position: absolute; left: 13px; right: 13px; bottom: 12px; font-family: var(--font-cormorant), Georgia, serif; font-size: 14px; font-style: italic; line-height: 1.05; }
.memory-photo-1 { width: 31%; aspect-ratio: .75; left: 4%; top: 7%; transform: rotate(-5deg); }
.memory-photo-2 { width: 34%; aspect-ratio: .87; left: 33%; top: 20%; transform: rotate(3deg); }
.memory-photo-3 { width: 25%; aspect-ratio: .7; right: 4%; top: 2%; transform: rotate(7deg); }
.memory-photo-4 { width: 24%; aspect-ratio: .72; left: 10%; bottom: -5%; transform: rotate(5deg); }
.memory-photo-5 { width: 27%; aspect-ratio: .7; left: 41%; bottom: -10%; transform: rotate(-4deg); }
.memory-photo-6 { width: 25%; aspect-ratio: .72; right: 4%; bottom: -1%; transform: rotate(4deg); }
.tap-hint { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 55px 0 0; color: #a3757e; font-size: 12px; }
.tap-hint svg { width: 15px; }

.reasons-section { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; min-height: 830px; padding: clamp(110px, 12vw, 165px) max(24px, calc((100vw - 1180px) / 2)); overflow: hidden; }
.reasons-section::after { content: '28'; position: absolute; right: -5vw; bottom: -20%; color: rgba(255,255,255,.025); font-family: var(--font-cormorant), Georgia, serif; font-size: 34vw; line-height: 1; }
.reasons-visual { position: relative; z-index: 1; width: min(480px, 90%); aspect-ratio: 1; display: grid; place-items: center; }
.reasons-visual::before { content: ''; position: absolute; inset: 9%; border: 1px solid rgba(238, 190, 186, .2); border-radius: 50%; }
.chibi-large { width: 76%; aspect-ratio: 1; filter: drop-shadow(0 30px 35px rgba(0,0,0,.28)); animation: chibi-bob 3.8s ease-in-out infinite; }
.orbit-copy { position: absolute; right: 0; top: 14%; color: #bc8188; font-family: var(--font-cormorant), Georgia, serif; font-size: 18px; font-style: italic; transform: rotate(8deg); }
.reasons-copy { position: relative; z-index: 2; max-width: 600px; }
.reasons-copy h2 span { color: #e8a3ad; }
.reasons-copy blockquote { min-height: 150px; margin: 35px 0 28px; color: #dec5c2; font-family: var(--font-cormorant), Georgia, serif; font-size: clamp(24px, 3vw, 39px); line-height: 1.28; animation: soft-appear .5s ease both; }
.reason-progress { width: min(420px, 100%); height: 3px; overflow: hidden; background: #522031; }
.reason-progress span { display: block; height: 100%; background: linear-gradient(90deg, #a84461, #f0b8b8); transition: width .55s ease; }
.next-reason { margin-top: 28px; padding: 10px 15px; border: 1px solid #6b3342; border-radius: 999px; background: transparent; color: #efd2cb; }

.faces-section { padding: clamp(105px, 12vw, 170px) 0; overflow: hidden; }
.faces-heading { width: min(1180px, calc(100% - 48px)); margin: 0 auto 65px; display: grid; grid-template-columns: 1fr 1fr; align-items: end; column-gap: 50px; }
.faces-heading .section-number { grid-column: 1 / -1; }
.faces-heading p:last-child { max-width: 430px; margin: 0 0 8px; color: #7b5860; line-height: 1.85; }
.faces-strip { display: flex; gap: 22px; width: 100%; padding: 10px max(24px, calc((100vw - 1180px) / 2)) 50px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #d7aab1 transparent; }
.face-card { flex: 0 0 clamp(220px, 24vw, 310px); padding: 0 0 18px; border: 0; color: #542c36; text-align: left; background: transparent; cursor: zoom-in; scroll-snap-align: center; }
.face-image { position: relative; display: block; aspect-ratio: .76; overflow: hidden; border-radius: 999px 999px 22px 22px; background: #eedcd7; }
.face-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.face-card:hover .face-image img { transform: scale(1.07); }
.face-index { display: block; margin: 13px 0 4px; color: #c0848f; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.face-caption { font-family: var(--font-cormorant), Georgia, serif; font-size: 18px; font-style: italic; }

.game-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 9vw, 130px); align-items: center; min-height: 760px; padding: clamp(100px, 12vw, 160px) max(24px, calc((100vw - 1180px) / 2)); background: #f5ded9; }
.game-copy p:last-child { max-width: 430px; margin-top: 28px; color: #7d555e; line-height: 1.9; }
.love-game { position: relative; min-height: 390px; padding: 55px; border: 1px solid rgba(93, 34, 50, .12); border-radius: 36px; background: rgba(255, 251, 246, .72); box-shadow: 0 35px 90px rgba(102, 48, 61, .12); }
.love-meter-top { display: flex; justify-content: space-between; align-items: baseline; color: #8b5c66; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.love-meter-top strong { color: #ad405e; font-family: var(--font-cormorant), Georgia, serif; font-size: 42px; letter-spacing: -.04em; }
.love-track { height: 12px; margin: 16px 0 20px; overflow: hidden; border-radius: 999px; background: #e9c8c8; }
.love-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a92f53, #ef8da0, #f8b4b8); box-shadow: 0 0 20px #e6758a; transition: width .55s cubic-bezier(.25,.8,.25,1); }
.love-meter p { min-height: 24px; margin-bottom: 32px; color: #8d626a; font-size: 13px; }
.love-button { width: 100%; height: 52px; border-radius: 999px; background: #a93353; color: white; }
.no-button { position: absolute; min-width: 120px; right: 50%; bottom: 28px; color: #9e747b; background: transparent; transform: translateX(50%); transition: all .28s cubic-bezier(.2,.8,.2,1); }
.no-button-1 { right: 18%; bottom: 42px; transform: rotate(6deg); }
.no-button-2 { right: 72%; bottom: 18px; transform: rotate(-5deg); }
.no-button-3 { right: 8%; bottom: 10px; transform: rotate(8deg); }
.no-button-4 { right: 50%; bottom: 24px; color: #9d3752; transform: translateX(50%) scale(1.08); }

.letter-section { position: relative; min-height: 950px; padding: clamp(100px, 11vw, 155px) max(24px, calc((100vw - 1180px) / 2)); text-align: center; overflow: hidden; }
.letter-section::before { content: ''; position: absolute; width: 650px; aspect-ratio: 1; top: 35%; left: 50%; border-radius: 50%; background: rgba(152, 52, 78, .18); filter: blur(90px); transform: translate(-50%, -50%); }
.letter-heading { position: relative; z-index: 2; max-width: 700px; margin: 0 auto 60px; }
.letter-heading p:last-child { max-width: 470px; margin: 27px auto 0; color: #c7a6a4; line-height: 1.85; }
.letter-card { position: relative; z-index: 2; display: block; width: min(700px, 100%); min-height: 350px; margin: 0 auto; padding: 0; overflow: hidden; border: 1px solid rgba(255, 231, 214, .22); border-radius: 32px; color: #4c2730; background: #f5dddb; box-shadow: 0 35px 100px rgba(0,0,0,.35); text-align: left; cursor: pointer; transition: min-height .8s cubic-bezier(.2,.75,.2,1), transform .3s ease; }
.letter-card:hover { transform: translateY(-5px); }
.letter-cover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, #f8ece5, #e9c8c8); transition: opacity .45s ease, transform .7s ease; }
.gift-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 24px; border-radius: 50%; color: #fff4ec; background: #9f3f59; font-size: 24px; }
.letter-cover strong { font-family: var(--font-cormorant), Georgia, serif; font-size: 42px; font-weight: 500; font-style: italic; }
.letter-cover small { margin-top: 10px; color: #9c6973; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.letter-paper { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; width: 100%; padding: 60px clamp(28px, 7vw, 75px); opacity: 0; transform: translateY(25px); transition: opacity .55s .3s ease, transform .7s .25s ease; font-family: var(--font-cormorant), Georgia, serif; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.55; }
.letter-paper strong { color: #923b55; font-size: 30px; font-weight: 600; }
.letter-paper em { margin-top: 10px; color: #9a3d58; }
.letter-is-open .letter-card { min-height: 690px; }
.letter-is-open .letter-cover { opacity: 0; pointer-events: none; transform: translateY(-35px); }
.letter-is-open .letter-paper { opacity: 1; transform: translateY(0); }
.letter-hint { position: relative; z-index: 2; margin-top: 22px; color: #99737a; font-size: 11px; }

.wish-section { position: relative; min-height: 1000px; display: grid; place-items: center; overflow: hidden; color: #fff6ee; text-align: center; }
.wish-photo, .wish-overlay { position: absolute; inset: 0; }
.wish-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 30%; }
.wish-overlay { background: linear-gradient(to bottom, rgba(21, 5, 10, .55), rgba(24, 5, 11, .73) 48%, rgba(18, 4, 8, .9)); backdrop-filter: blur(1px); }
.wish-content { position: relative; z-index: 3; width: min(720px, calc(100% - 34px)); padding: 100px 0; }
.wish-content .section-number { color: #e0adb1; }
.wish-content h2 em { color: #efb3b8; }
.wish-chibi { width: min(310px, 65vw); aspect-ratio: 1; margin: 26px auto 5px; filter: drop-shadow(0 25px 40px rgba(0,0,0,.35)); transition: filter .8s ease, transform .8s ease; animation: chibi-bob 3.4s ease-in-out infinite; }
.wish-chibi.candles-out { filter: grayscale(.2) brightness(.82) drop-shadow(0 25px 40px rgba(0,0,0,.35)); transform: scale(.97); }
.blow-button { height: 52px; padding: 0 24px; border-radius: 999px; color: #4c1324; background: #f8c9ca; }
.final-wish { max-width: 610px; margin: 30px auto 0; color: #f5d8d2; font-family: var(--font-cormorant), Georgia, serif; font-size: clamp(22px, 3vw, 31px); line-height: 1.5; animation: soft-appear .8s ease both; }
.confetti { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.confetti span { position: absolute; top: -5%; left: var(--x); color: #ffb9bd; font-size: 18px; animation: confetti-fall 4.2s var(--delay) ease-in both; transform: rotate(var(--spin)); }

footer { position: relative; z-index: 3; display: grid; place-items: center; min-height: 420px; padding: 70px 24px 110px; color: #e9c8c4; text-align: center; background: #16040b; }
.footer-chibi { width: 190px; aspect-ratio: 1; margin-bottom: 5px; filter: drop-shadow(0 20px 25px rgba(0,0,0,.3)); }
footer p { margin: 0 0 10px; font-family: var(--font-cormorant), Georgia, serif; font-size: 24px; font-style: italic; }
footer span { color: #865967; font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }

.music-player { position: fixed; z-index: 60; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 7px; width: min(420px, calc(100% - 24px)); min-height: 62px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #fff5ee; background: rgba(38, 8, 17, .82); box-shadow: 0 18px 55px rgba(0,0,0,.32); backdrop-filter: blur(18px); transform: translateX(-50%); }
.music-icon { display: grid; place-items: center; flex: 0 0 42px; aspect-ratio: 1; border-radius: 50%; color: #6d2438; background: #f0c7c5; }
.music-icon svg { width: 18px; }
.track-info { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.1; }
.track-info strong { overflow: hidden; font-family: var(--font-cormorant), Georgia, serif; font-size: 17px; white-space: nowrap; text-overflow: ellipsis; }
.track-info small { margin-top: 3px; overflow: hidden; color: #b98e94; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.music-player button { border-radius: 50%; color: #e9c8c3; }
.icon-btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; }

.photo-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 12px; background: rgba(22, 4, 10, .78); backdrop-filter: blur(8px); animation: transition-in .2s ease both; }
.photo-dialog { position: relative; width: min(620px, calc(100vw - 24px)); max-height: calc(100svh - 24px); display: grid; gap: 12px; padding: 12px 12px 18px; border-radius: 24px; background: #fff9f2; color: #4f2731; box-shadow: 0 30px 100px rgba(0,0,0,.48); }
.dialog-image { position: relative; min-height: 70vh; overflow: hidden; border-radius: 17px; background: #ead7d3; }
.dialog-image img { width: 100%; height: 100%; display: block; object-fit: contain; }
.photo-dialog > p { margin: 0 12px; font-family: var(--font-cormorant), Georgia, serif; font-size: 19px; font-style: italic; text-align: center; }
.photo-close { position: absolute; z-index: 5; top: 20px; right: 20px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: white; background: rgba(39, 9, 18, .58); backdrop-filter: blur(8px); font-size: 22px; cursor: pointer; }

@keyframes chibi-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes dot-pulse { 0%, 100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1); } }
@keyframes transition-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes soft-appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes confetti-fall { 0% { opacity: 0; transform: translateY(-4vh) rotate(var(--spin)); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(108vh) rotate(calc(var(--spin) + 540deg)); } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 46px 0 86px; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .eyebrow { margin-bottom: 24px; }
  .hero h1 { font-size: clamp(53px, 15vw, 78px); }
  .portrait-wrap { grid-row: 1; width: min(410px, 84vw); }
  .portrait-kicker { left: -10px; }
  .reasons-section, .game-section { grid-template-columns: 1fr; }
  .reasons-section { padding-top: 75px; text-align: center; }
  .reasons-visual { margin: 0 auto; }
  .reasons-copy { margin: -10px auto 0; }
  .reason-progress { margin-inline: auto; }
  .faces-heading { grid-template-columns: 1fr; }
  .faces-heading p:last-child { margin-top: 28px; }
  .game-section { text-align: center; }
  .game-copy p:last-child { margin-inline: auto; }
}

@media (max-width: 700px) {
  .story-section { min-height: unset; border-radius: 34px 34px 0 0; text-align: center; }
  .section-intro { margin: 0 auto; }
  .section-intro > p:last-child { margin-inline: auto; }
  .memory-collage { height: auto; margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; align-items: start; }
  .memory-photo { position: relative; inset: auto !important; width: 100%; aspect-ratio: .7; transform: rotate(-2deg); }
  .memory-photo:nth-child(even) { transform: rotate(2deg); }
  .memory-photo:hover { transform: rotate(0deg) scale(1.02) !important; }
  .tap-hint { margin-top: 38px; }
  .letter-is-open .letter-card { min-height: 850px; }
  .love-game { padding: 40px 24px 55px; }
  .dialog-image { min-height: 64vh; }
}

@media (max-width: 520px) {
  .hero { width: min(100% - 28px, 1180px); gap: 40px; }
  .portrait-wrap { width: min(340px, 80vw); }
  .portrait-frame { border-radius: 46% 46% 18px 18px; }
  .portrait-kicker { top: 4px; left: -20px; font-size: 16px; }
  .seal { right: -22px; width: 68px; font-size: 30px; }
  .hero-note { font-size: 15px; }
  .story-section, .reasons-section, .game-section, .letter-section { padding-inline: 19px; }
  .memory-collage { gap: 20px 10px; }
  .memory-photo { padding: 7px 7px 41px; }
  .memory-photo span { bottom: 10px; font-size: 12px; }
  .reasons-visual { width: 100%; }
  .faces-heading { width: calc(100% - 38px); }
  .love-game { min-height: 410px; }
  .no-button-1 { right: 8%; }
  .no-button-2 { right: 58%; }
  .letter-cover strong { font-size: 34px; }
  .letter-paper { font-size: 17px; }
  .letter-is-open .letter-card { min-height: 920px; }
  .music-player { bottom: 10px; }
  .music-icon { flex-basis: 38px; }
  .music-player button { width: 27px; height: 27px; }
  .music-player button:last-child { display: none; }
}

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