:root {
    --bg: #0b0a0f;
    --panel: #121017;
    --text: #f4eee6;
    --muted: #aaa0a8;
    --accent: #d9b47c;
    --accent-soft: rgba(217, 180, 124, .16);
    --line: rgba(244, 238, 230, .12);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: var(--bg); color: var(--text); }
body {
    overflow: hidden;
    font-family: var(--sans);
    font-weight: 300;
    letter-spacing: .01em;
}

button, textarea { font: inherit; }
button { cursor: pointer; }
#ambient {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(circle at 15% 15%, rgba(217,180,124,.10), transparent 28%),
      radial-gradient(circle at 85% 80%, rgba(120,80,130,.11), transparent 32%);
}
.grain {
    position: fixed; inset: -50%; z-index: 20; pointer-events: none; opacity: .045;
    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='.55'/%3E%3C/svg%3E");
    transform: rotate(2deg);
}

.topbar {
    position: fixed; top: 0; left: 0; right: 0; height: 78px; z-index: 30;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 38px; background: linear-gradient(to bottom, rgba(11,10,15,.88), transparent);
}
.brand-mark {
    font-family: var(--serif); font-size: 26px; letter-spacing: .04em;
}
.brand-mark span { color: var(--accent); font-size: 14px; margin-left: 2px; }
.progress-wrap { width: min(420px, 42vw); text-align: center; }
.progress-line { height: 1px; background: var(--line); overflow: hidden; }
.progress-line span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .7s ease; }
.progress-wrap small { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .18em; margin-top: 8px; }
.sound-btn {
    width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%;
    color: var(--text); background: rgba(255,255,255,.02);
}
.sound-btn:hover { border-color: rgba(217,180,124,.55); color: var(--accent); }

#experience { position: relative; width: 100%; height: 100vh; z-index: 1; }
.screen {
    position: absolute; inset: 0; display: none; overflow: hidden;
    padding: 110px 7vw 95px;
}
.screen.active { display: flex; }
.enter-right { animation: inRight .75s cubic-bezier(.22,1,.36,1); }
.enter-left { animation: inLeft .75s cubic-bezier(.22,1,.36,1); }
@keyframes inRight { from { opacity: 0; transform: translateX(35px); } to { opacity: 1; transform: none; } }
@keyframes inLeft { from { opacity: 0; transform: translateX(-35px); } to { opacity: 1; transform: none; } }

.hero-screen { align-items: center; justify-content: center; text-align: center; flex-direction: column; }
.hero-orbit {
    position: absolute; width: 55vmin; height: 55vmin; border: 1px solid rgba(217,180,124,.13);
    border-radius: 50%; animation: orbit 18s linear infinite;
}
.hero-orbit:before, .hero-orbit:after {
    content:""; position:absolute; border-radius:50%; background:var(--accent);
    box-shadow: 0 0 35px rgba(217,180,124,.35);
}
.hero-orbit:before { width: 5px; height: 5px; top: 4%; left: 50%; }
.hero-orbit:after { width: 3px; height: 3px; bottom: 10%; left: 8%; }
@keyframes orbit { to { transform: rotate(360deg); } }

.eyebrow {
    color: var(--accent); text-transform: uppercase; letter-spacing: .24em;
    font-size: 10px; font-weight: 500; margin-bottom: 18px;
}
.hero-screen h1 {
    position: relative; font-family: var(--serif); font-weight: 500;
    font-size: clamp(72px, 11vw, 155px); line-height: .73; margin: 0;
}
.hero-screen h1 em, h2 em { color: var(--accent); font-style: italic; font-weight: 400; }
.hero-sub { max-width: 480px; color: var(--muted); line-height: 1.8; margin: 34px auto 28px; }
.scroll-hint { margin-top: 58px; color: #756f77; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.scroll-hint span { display: inline-block; width: 1px; height: 25px; background: var(--accent); vertical-align: middle; margin-right: 10px; }

.primary-btn, .ghost-btn {
    border: 0; padding: 13px 21px; border-radius: 2px; transition: .25s ease;
    display: inline-flex; align-items: center; gap: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .13em;
}
.primary-btn { background: var(--accent); color: #15110b; }
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(217,180,124,.16); }
.ghost-btn { background: transparent; color: var(--text); border: 1px solid var(--line); }
.ghost-btn:hover { border-color: rgba(217,180,124,.5); color: var(--accent); transform: translateY(-2px); }
.ghost-btn:disabled, .primary-btn:disabled { opacity: .35; cursor: not-allowed; }

.story-screen { align-items: center; }
.story-grid {
    width: 100%; max-width: 1250px; margin: auto; display: grid;
    grid-template-columns: minmax(320px, .85fr) minmax(320px, 1.15fr);
    gap: 7vw; align-items: center; height: 100%;
}
.story-copy { max-height: 75vh; overflow: auto; scrollbar-width: none; }
.story-copy::-webkit-scrollbar { display:none; }
.chapter-no { color: #756f77; text-transform: uppercase; font-size: 9px; letter-spacing: .22em; }
.year { font-family: var(--serif); color: var(--accent); font-size: 27px; margin: 7px 0 0; }
.story-copy h2 {
    font-family: var(--serif); font-size: clamp(48px, 6vw, 83px);
    font-weight: 500; line-height: .86; margin: 10px 0 25px; max-width: 620px;
}
.story-copy p { max-width: 580px; color: #b8b0b5; line-height: 1.85; font-size: 14px; margin: 0 0 15px; }
.story-copy blockquote {
    margin: 25px 0 27px; padding-left: 18px; border-left: 1px solid var(--accent);
    font-family: var(--serif); font-size: 22px; color: #e6ddd5; line-height: 1.3;
}
.memory-stack { position: relative; height: min(70vh, 650px); min-height: 430px; }
.memory-photo {
    position: absolute; width: min(67%, 420px); margin: 0; overflow: hidden;
    background: var(--panel); border: 8px solid #eee7dd; color: #262126;
    box-shadow: 0 28px 70px rgba(0,0,0,.42); transform-origin: center;
}
.memory-photo:nth-child(1) { top: 1%; left: 2%; transform: rotate(-3deg); z-index: 3; }
.memory-photo:nth-child(2) { top: 16%; right: 2%; transform: rotate(4deg); z-index: 2; }
.memory-photo:nth-child(3) { bottom: 1%; left: 16%; transform: rotate(-2deg); z-index: 4; }
.memory-photo:nth-child(4) { bottom: 2%; right: 7%; transform: rotate(5deg); z-index: 1; }
.memory-photo img { width: 100%; height: 100%; max-height: 430px; object-fit: cover; display: block; }
.memory-photo figcaption { padding: 9px 8px 10px; font-family: var(--serif); font-size: 14px; }

.transition-screen, .final-screen { align-items: center; justify-content: center; text-align: center; }
.transition-inner { max-width: 700px; }
.big-counter { display:flex; align-items:center; justify-content:center; gap: 18px; margin: 10px 0 30px; }
.big-counter span { font-family:var(--serif); font-size:clamp(130px, 20vw, 240px); line-height:.75; color:var(--accent); }
.big-counter small { text-align:left; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:10px; }
.transition-inner > p { color:#aaa0a8; line-height:2; margin:0 auto 30px; }

.quiz-screen { align-items:center; justify-content:center; }
.quiz-shell { width:min(760px, 92vw); }
.quiz-shell h2 { font-family:var(--serif); font-size:clamp(52px, 6vw, 82px); line-height:.88; font-weight:500; margin:0 0 35px; }
.quiz-progress { width:100%; height:1px; background:var(--line); margin-bottom:34px; }
.quiz-progress span { display:block; height:100%; width:0; background:var(--accent); transition:.35s; }
.question-number { color:var(--accent); font-size:10px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:15px; }
.quiz-card h3 { font-family:var(--serif); font-size:34px; font-weight:500; line-height:1.1; margin:0 0 25px; }
.options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.option {
    padding:17px; border:1px solid var(--line); background:rgba(255,255,255,.02);
    color:#d8d0d5; text-align:left; display:flex; gap:13px; align-items:center;
}
.option span {
    width:27px; height:27px; display:grid; place-items:center; border:1px solid var(--line);
    color:var(--accent); font-size:10px; flex:none;
}
.option:hover, .option.selected { border-color:rgba(217,180,124,.55); background:var(--accent-soft); }
textarea {
    width:100%; resize:vertical; min-height:140px; padding:18px;
    background:rgba(255,255,255,.025); border:1px solid var(--line); color:var(--text); outline:none;
}
textarea:focus { border-color:rgba(217,180,124,.6); }
.quiz-actions { display:flex; justify-content:space-between; align-items:center; margin-top:24px; }

.final-content { max-width:760px; max-height:78vh; overflow:auto; scrollbar-width:none; }
.final-content::-webkit-scrollbar { display:none; }
.final-content h2 { font-family:var(--serif); font-size:clamp(62px, 8vw, 105px); line-height:.82; font-weight:500; margin:0 0 32px; }
.final-letter { text-align:left; border-top:1px solid var(--line); padding-top:24px; }
.final-letter p { color:#b9b1b7; line-height:1.9; font-size:14px; }
.final-letter .signature { font-family:var(--serif); font-size:27px; color:var(--text); margin-top:30px; }
.final-letter .signature span { font-family:var(--sans); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.18em; }
.final-glow { position:absolute; width:55vmin; height:55vmin; border-radius:50%; background:rgba(217,180,124,.08); filter:blur(70px); pointer-events:none; }

.nav-controls {
    position: fixed; z-index: 40; bottom: 25px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:18px;
}
.nav-controls button {
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.02);
    color:var(--text); border:1px solid var(--line);
}
.nav-controls button:hover { border-color:rgba(217,180,124,.5); color:var(--accent); }
.nav-controls button:disabled { opacity:.2; cursor:not-allowed; }
#screenCount { color:#6e6870; font-size:9px; letter-spacing:.18em; }
.toast-message {
    position:fixed; z-index:60; left:50%; bottom:82px; transform:translate(-50%, 12px);
    opacity:0; pointer-events:none; background:#eee7dd; color:#171319; padding:12px 18px;
    font-size:11px; box-shadow:0 12px 35px rgba(0,0,0,.35); transition:.25s;
}
.toast-message.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 900px) {
    .topbar { padding:0 18px; }
    .progress-wrap { width:45vw; }
    .screen { padding:95px 6vw 82px; overflow-y:auto; }
    .story-grid { grid-template-columns:1fr; gap:28px; height:auto; }
    .story-copy { max-height:none; overflow:visible; }
    .story-copy h2 { font-size:55px; }
    .memory-stack { height:55vh; min-height:360px; }
    .memory-photo { width:62%; }
    .memory-photo img { max-height:330px; }
    .options { grid-template-columns:1fr; }
    .nav-controls { bottom:14px; }
}
@media (max-width: 600px) {
    .brand-mark { font-size:22px; }
    .sound-btn { width:34px; height:34px; }
    .hero-screen h1 { font-size:76px; }
    .story-copy h2 { font-size:48px; }
    .story-copy p { font-size:13px; }
    .memory-stack { height:47vh; min-height:300px; }
    .memory-photo { width:69%; border-width:5px; }
    .memory-photo figcaption { font-size:12px; padding:6px; }
    .big-counter span { font-size:150px; }
    .quiz-card h3 { font-size:30px; }
    .final-content h2 { font-size:64px; }
}


/* Magical birthday finale */
.final-screen { isolation:isolate; }
.final-stars{position:absolute;inset:0;pointer-events:none;opacity:.7;background-image:radial-gradient(circle,rgba(255,255,255,.65) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(217,180,124,.55) 0 1px,transparent 1.5px);background-size:97px 113px,151px 139px;background-position:10px 30px,40px 80px;animation:starDrift 18s linear infinite}
@keyframes starDrift{to{background-position:160px 190px,-120px -80px}}
.final-content{position:relative;z-index:3}
.final-content.reveal-ready{animation:finalRise 1.35s cubic-bezier(.22,1,.36,1)}
@keyframes finalRise{from{opacity:0;transform:translateY(25px) scale(.985);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.magic-seal{width:62px;height:62px;border:1px solid rgba(217,180,124,.55);border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;color:var(--accent);box-shadow:0 0 55px rgba(217,180,124,.14);animation:sealPulse 3.5s ease-in-out infinite}
.magic-seal span{font-size:18px;animation:heartBeat 1.8s ease-in-out infinite}
@keyframes sealPulse{50%{box-shadow:0 0 85px rgba(217,180,124,.28);transform:scale(1.04)}}
@keyframes heartBeat{50%{transform:scale(1.18)}}
.final-letter .opening-line{font-family:var(--serif);font-size:23px;color:#e6ddd5;line-height:1.45}
.center-heart{text-align:center;font-family:var(--serif);font-size:31px!important;color:var(--accent)!important;letter-spacing:.18em}
.center-heart span{color:var(--text);letter-spacing:.08em;font-size:15px;vertical-align:middle}
.final-actions{display:flex;gap:10px;justify-content:center;margin-top:25px;flex-wrap:wrap}
.celebration-message{max-width:580px;margin:24px auto 0;padding:22px;border:1px solid rgba(217,180,124,.35);background:rgba(217,180,124,.055);opacity:0;transform:translateY(12px);transition:.6s cubic-bezier(.22,1,.36,1);pointer-events:none}
.celebration-message.show{opacity:1;transform:none}
.celebration-message .celebration-kicker{display:block;text-transform:uppercase;letter-spacing:.2em;font-size:9px;color:var(--accent);margin-bottom:8px}
.celebration-message strong{display:block;font:500 28px/1.05 var(--serif)}
.celebration-message small{display:block;margin-top:10px;color:var(--muted)}
.magic-particle{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(217,180,124,.8);box-shadow:0 0 10px rgba(217,180,124,.7);pointer-events:none;z-index:2;animation:magicFloat var(--duration) ease-out var(--delay) forwards}
@keyframes magicFloat{0%{opacity:0;transform:translate3d(0,20px,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(1.6)}}
.floating-heart{position:absolute;color:rgba(217,180,124,.72);font-family:var(--serif);font-size:18px;pointer-events:none;z-index:2;opacity:0;animation:heartFloat 4.8s ease-out var(--delay) forwards}
@keyframes heartFloat{0%{opacity:0;transform:translate3d(0,10px,0) scale(.5) rotate(0)}12%{opacity:.85}100%{opacity:0;transform:translate3d(var(--hx),var(--hy),0) scale(1.3) rotate(25deg)}}

/* Cinematic v3 layer */
.intro-loader {
    position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
    background: #08070b; opacity: 1; visibility: visible;
    transition: opacity 1s cubic-bezier(.22,1,.36,1), visibility 1s;
}
.intro-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-loader-inner { text-align:center; position:relative; padding:30px; }
.intro-orbit { width:110px; height:110px; margin:0 auto 35px; border:1px solid rgba(217,180,124,.2); border-radius:50%; animation:introSpin 8s linear infinite; position:relative; }
.intro-orbit:before { content:""; position:absolute; inset:14px; border:1px solid rgba(217,180,124,.09); border-radius:50%; }
.intro-orbit span { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--accent); top:-3px; left:50%; box-shadow:0 0 25px rgba(217,180,124,.8); }
@keyframes introSpin { to { transform:rotate(360deg); } }
.intro-kicker { color:var(--accent); font-size:9px; text-transform:uppercase; letter-spacing:.28em; }
.intro-title { font:500 clamp(50px,8vw,88px)/.9 var(--serif); margin-top:10px; }
.intro-title em { color:var(--accent); font-style:italic; font-weight:400; }
.intro-line { width:150px; height:1px; background:var(--line); margin:25px auto 15px; overflow:hidden; }
.intro-line span { display:block; width:100%; height:100%; background:var(--accent); transform:translateX(-100%); animation:introLine 1.8s ease-in-out infinite; }
@keyframes introLine { 50%,100% { transform:translateX(100%); } }
.intro-status { color:#766f78; font-size:10px; letter-spacing:.08em; min-height:16px; }

.sound-cluster { position:relative; }
.sound-popover { position:absolute; top:52px; right:0; width:235px; padding:15px; background:rgba(14,12,18,.94); border:1px solid var(--line); box-shadow:0 20px 55px rgba(0,0,0,.45); opacity:0; transform:translateY(-8px); pointer-events:none; transition:.25s ease; backdrop-filter:blur(12px); }
.sound-popover.open { opacity:1; transform:none; pointer-events:auto; }
.sound-popover > span { display:block; color:var(--text); font-size:10px; text-transform:uppercase; letter-spacing:.16em; margin-bottom:12px; }
.sound-popover input { width:100%; accent-color:var(--accent); }
.sound-popover small { display:block; margin-top:9px; color:#716a72; font-size:9px; line-height:1.5; }

.screen.active.enter-right, .screen.active.enter-left { animation-duration:1s; }
@keyframes inRight { from { opacity:0; transform:translate3d(45px,0,0) scale(.985); filter:blur(7px); } 55% { opacity:1; } to { opacity:1; transform:none; filter:none; } }
@keyframes inLeft { from { opacity:0; transform:translate3d(-45px,0,0) scale(.985); filter:blur(7px); } 55% { opacity:1; } to { opacity:1; transform:none; filter:none; } }
.story-screen .story-copy > * { animation:copyRise .85s both; }
.story-screen.enter-right .story-copy > * { animation-delay:calc(var(--photo-delay, 0ms) + 80ms); }
@keyframes copyRise { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:none; } }
.memory-photo { opacity:0; transition:opacity .8s ease, transform 1s cubic-bezier(.22,1,.36,1), filter 1s ease; }
.memory-photo.photo-in { opacity:1; }
.memory-photo:hover { filter:brightness(1.05); transform:translateY(-5px) rotate(0deg) scale(1.02); z-index:8; }

.cinematic-montage { position:relative; height:min(72vh,680px); min-height:460px; width:min(100%,620px); overflow:hidden; background:#09080c; border:1px solid rgba(244,238,230,.12); box-shadow:0 35px 90px rgba(0,0,0,.55); }
.cinematic-montage:after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top,rgba(5,4,7,.82),transparent 35%,rgba(5,4,7,.18)); z-index:4; }
.montage-frame { position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.08); transition:opacity 1.25s ease, transform 5s cubic-bezier(.2,.7,.2,1); }
.montage-frame.active { opacity:1; transform:scale(1); }
.montage-frame img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9) contrast(1.04); }
.montage-frame:nth-of-type(2n) img { object-position:center 40%; }
.montage-vignette { position:absolute; inset:0; z-index:5; pointer-events:none; box-shadow:inset 0 0 130px rgba(0,0,0,.55); }
.montage-progress { position:absolute; left:25px; right:25px; top:25px; height:1px; background:rgba(255,255,255,.2); z-index:7; }
.montage-progress span { display:block; width:0; height:100%; background:var(--accent); }
.montage-caption { position:absolute; left:28px; bottom:28px; z-index:7; text-align:left; }
.montage-caption span { display:block; color:rgba(244,238,230,.65); font-size:9px; text-transform:uppercase; letter-spacing:.22em; margin-bottom:7px; }
.montage-caption strong { font:500 clamp(34px,5vw,58px)/.85 var(--serif); }

/* Results vault */
.results-page { overflow:auto; min-height:100vh; background:radial-gradient(circle at 50% 0,rgba(217,180,124,.09),transparent 38%),var(--bg); }
.results-shell { width:min(1000px,92vw); margin:0 auto; padding:70px 0; }
.results-lock { max-width:480px; margin:12vh auto; text-align:center; }
.results-lock h1, .results-head h1 { font:500 clamp(54px,7vw,88px)/.9 var(--serif); margin:8px 0 14px; }
.results-lock p { color:var(--muted); margin-bottom:28px; }
.results-lock form { text-align:left; }
.results-lock label { display:block; color:#a49ca4; font-size:10px; text-transform:uppercase; letter-spacing:.15em; margin-bottom:8px; }
.results-lock input[type=password] { width:100%; padding:14px 15px; background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--text); outline:none; margin-bottom:12px; }
.results-lock input:focus { border-color:rgba(217,180,124,.55); }
.results-lock .primary-btn { width:100%; justify-content:center; }
.private-note { display:block; margin-top:15px; color:#615b62; font-size:9px; }
.result-error { padding:10px 12px; margin:0 0 15px; border:1px solid rgba(190,90,90,.35); color:#d9aaaa; font-size:11px; }
.results-head { display:flex; align-items:end; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:25px; margin-bottom:25px; }
.completion-card { display:flex; justify-content:space-between; gap:20px; padding:15px 18px; border:1px solid var(--line); margin-bottom:15px; font-size:10px; }
.completion-card span { color:var(--accent); text-transform:uppercase; letter-spacing:.18em; }
.completion-card strong { color:#8d858e; font-weight:400; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.answer-card { padding:22px; border:1px solid var(--line); background:rgba(255,255,255,.018); }
.answer-q { color:var(--accent); font-size:9px; text-transform:uppercase; letter-spacing:.2em; }
.answer-card h2 { font:500 27px/1.05 var(--serif); margin:9px 0 17px; }
.answer-card p { color:#b4acb4; font-size:13px; line-height:1.75; white-space:normal; }
.empty-results { padding:50px 20px; border:1px solid var(--line); text-align:center; }
.empty-results strong { display:block; font:500 40px var(--serif); }
.empty-results span { color:var(--muted); font-size:12px; }
.private-error { display:grid; place-items:center; min-height:100vh; text-align:center; }
.private-error > div { padding:30px; }
.private-error p { color:#aaa0a8; margin:20px 0 5px; }
.private-error small { color:#625c63; }

@media (max-width: 900px) {
    .cinematic-montage { width:100%; height:58vh; min-height:390px; }
    .story-grid { gap:22px; }
}
@media (max-width: 600px) {
    .topbar { height:65px; }
    .progress-wrap { width:47vw; }
    .sound-popover { right:-6px; width:220px; }
    .screen { padding:82px 5vw 76px; }
    .hero-screen h1 { font-size:68px; }
    .hero-sub { max-width:340px; font-size:13px; }
    .memory-stack { height:52vh; min-height:330px; margin-top:4px; }
    .memory-photo { width:78%; }
    .memory-photo:nth-child(1) { top:0; left:0; transform:rotate(-4deg); }
    .memory-photo:nth-child(2) { top:13%; right:0; transform:rotate(4deg); }
    .memory-photo:nth-child(3) { bottom:2%; left:8%; transform:rotate(-2deg); }
    .memory-photo:nth-child(4) { bottom:0; right:4%; transform:rotate(4deg); }
    .memory-photo:nth-child(n+5) { display:none; }
    .cinematic-montage { height:52vh; min-height:360px; margin-top:4px; }
    .montage-caption { left:20px; bottom:20px; }
    .montage-progress { left:18px; right:18px; top:18px; }
    .story-copy h2 { margin-bottom:18px; }
    .story-copy blockquote { margin:18px 0 20px; }
    .story-copy .ghost-btn { padding:11px 15px; }
    .final-content { max-height:76vh; }
    .final-letter p { font-size:13px; line-height:1.78; }
    .result-grid { grid-template-columns:1fr; }
    .results-shell { padding:35px 0; }
    .results-head { align-items:start; flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}