.prologue-open{overflow:hidden}
.prologue{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#130c10;color:#f5e6cf;overflow:hidden}
.prologue::backdrop{background:#130c10}
.prologue video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:1;transition:opacity 1.15s ease}
.prologue-grain{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#130b13b3,transparent 23%,transparent 82%,#180a163b);box-shadow:inset 0 0 8vw #16070d33}
/* A single compressed still dissolves into the archival footage. */
.prologue.title-passage video{opacity:0}
.prologue-title-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;background:#141316;transition:opacity 1.15s ease}
.prologue-title-scene.is-visible{opacity:1}
.prologue-estate-image{position:absolute;inset:-3%;background:url('assets/title-estate.webp') center center/cover}

.prologue-candle-glow{position:absolute;inset:0;background:radial-gradient(ellipse at center,#08090d24,transparent 64%)}
.prologue-title-frame{position:absolute;inset:10% 11% 19%;border:1px solid #e7e1d140;outline:1px solid #e7e1d116;outline-offset:8px}
.prologue-title-frame::before,.prologue-title-frame::after{content:"";position:absolute;width:28px;height:28px;border-color:#e7e1d175;border-style:solid}
.prologue-title-frame::before{top:-1px;left:-1px;border-width:1px 0 0 1px;transform:translate(-5px,-5px)}
.prologue-title-frame::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0;transform:translate(5px,5px)}
.prologue-title-frame>span{position:absolute;left:calc(50% - 23px);top:-24px;width:46px;height:46px;display:grid;place-items:center;font-family:var(--serif);font-size:1.8rem;font-style:italic;background:#2c1520e6;color:#e9e0d2;border:1px solid #c6b1a366;transform:rotate(-3deg)}
.prologue-card{position:absolute;inset:16% 13% 24%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;opacity:1;transition:opacity .45s ease}
.prologue-card[hidden]{display:none}
.prologue-card>p:first-child{font-family:var(--serif);font-style:normal;font-size:clamp(.8rem,1.15vw,1rem);letter-spacing:.24em;color:#ded8cc;margin:0 0 30px;text-shadow:0 2px 12px #1a0a12}
.prologue-card h2{font-family:var(--serif);font-style:italic;font-size:clamp(2.7rem,5.8vw,5.7rem);line-height:1.1;margin:0;max-width:18ch;font-weight:500;letter-spacing:-.025em;color:#f7f1e8;text-wrap:balance;text-shadow:0 2px 4px #13091099,0 4px 28px #130910}
.prologue-card>p:last-child{font-family:var(--serif);font-size:1.3rem;color:#d9c3a6;margin-top:26px}
.prologue-card>p:empty{display:none}
/* The ink reveals across each line; no per-frame JavaScript or animated blur. */
.prologue-card.card-leaving{opacity:0}
.ghost-written-line{display:block;animation:ghost-ink-write 1.25s cubic-bezier(.2,.5,.35,1) var(--ink-delay,0s) both}
@keyframes ghost-ink-write{0%{opacity:0;clip-path:inset(-.2em 100% -.25em -.12em)}20%{opacity:.65}100%{opacity:1;clip-path:inset(-.2em -.12em -.25em -.12em)}}
.prologue-controls{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:max(32px,env(safe-area-inset-left));right:max(32px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;gap:24px}
.prologue-controls button{font-family:var(--serif);font-size:1.0625rem;min-height:48px;padding:10px 2px;text-shadow:0 1px 8px #170b10;color:#e0cfb9}
.prologue-controls button:last-child{text-align:right;border-bottom:1px solid #d9bb924a}
.prologue-controls button span{margin-left:14px}
#prologue-sound{display:grid;place-items:center;min-width:48px;padding:10px;border:1px solid #d9bb9255;border-radius:50%;background:#21101966}
#prologue-sound svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#prologue-sound .sound-muted,#prologue-sound .sound-play{display:none}
#prologue-sound[data-sound="off"] .sound-waves,#prologue-sound[data-sound="play"] .sound-speaker,#prologue-sound[data-sound="play"] .sound-waves{display:none}
#prologue-sound[data-sound="off"] .sound-muted,#prologue-sound[data-sound="play"] .sound-play{display:block}
#prologue-sound:focus-visible{outline:2px solid #f5e6cf;outline-offset:4px}
.prologue-progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:#d9bb9222}
.prologue-progress>span{display:block;height:100%;width:0;background:#d9bb9299;transition:width .25s linear}
.replay-prologue{display:block;min-height:48px}
.prologue-personal{isolation:isolate;inset:16% 8% 23%}
.prologue-personal::before{content:"";position:absolute;inset:-15% -8%;z-index:-1;background:radial-gradient(ellipse,#3b182467 5%,#22121b40 48%,transparent 78%)}
.prologue-personal h2{font-family:var(--script);font-style:normal;font-weight:400;font-size:clamp(4rem,9vw,8.5rem);max-width:18ch;line-height:1.17;letter-spacing:0;overflow-wrap:anywhere;text-shadow:0 3px 25px #190a11}
.prologue-personal>p:last-child{font-size:clamp(1.4rem,2.8vw,2rem);font-style:italic;color:#f0dfc7;margin-top:18px}

.prologue-personal.long-name h2{font-family:var(--serif);font-style:italic;font-size:clamp(1.7rem,4vw,3.5rem);max-width:24ch}
#letter-salutation{overflow-wrap:anywhere}
.prologue-date{inset:10% 8% auto;min-height:0}
.prologue-date>p:first-child{font-size:.95rem;letter-spacing:.2em;text-shadow:0 2px 10px #170b10;margin:0}
.prologue-finale h2{max-width:13ch;font-size:clamp(3.3rem,6.5vw,6.5rem)}
.prologue-finale>p:last-child{font-family:var(--script);font-size:2.6rem;color:#e3c49e;margin-top:24px}
@media(max-width:700px){.prologue-card{inset:17% 10% 24%}.prologue-card h2{font-size:clamp(2.65rem,9.5vw,4rem)}.prologue-card>p:first-child{font-size:.78rem;letter-spacing:.19em;margin-bottom:25px}.prologue-title-frame{inset:11% 6% 20%}.prologue-estate-image{background-position:4% center}.prologue-personal{inset:15% 8% 23%}.prologue-personal h2{font-size:clamp(4rem,17vw,6.5rem)}.prologue-personal.long-name h2{font-size:clamp(1.7rem,6.5vw,2.6rem)}.prologue-finale h2{font-size:clamp(3rem,11vw,4.5rem)}.prologue-controls{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));gap:18px}.prologue-controls button{font-size:1rem}.prologue-controls button span{margin-left:8px}.prologue-date{inset:10% 8% auto}}
@media(max-height:500px){.prologue-card{inset:13% 10% 25%}.prologue-card h2{font-size:2.5rem}.prologue-card>p:first-child{margin-bottom:12px;font-size:.75rem}.prologue-card>p:last-child{margin-top:10px}.prologue-personal h2{font-size:3.5rem}.prologue-title-frame{inset:10% 8% 20%}.prologue-title-frame>span{top:-17px;height:34px;width:34px;left:calc(50% - 17px);font-size:1.35rem}.prologue-controls{bottom:8px}.prologue-date{inset:9% 8% auto}}
@media(prefers-reduced-motion:reduce){.ghost-written-line{animation:none}.prologue video,.prologue-card,.prologue-progress>span,.prologue-title-scene{transition:none}}
.prologue-controls{flex-wrap:wrap;gap:12px}
.prologue-caption{inset:auto 8% 21%;padding:18px 0}
.prologue-caption h2{font-size:clamp(2rem,4.8vw,4.1rem);max-width:24ch;line-height:1.18}
.prologue-caption>p:first-child{margin-bottom:16px;font-size:.875rem;letter-spacing:.15em}
.caption-passage .prologue-grain{background:linear-gradient(0deg,#10080ded 8%,#10080dd1 38%,#10080d25 75%)}
.prologue-finale>p:last-child{font:italic clamp(1.15rem,2.7vw,1.6rem)/1.4 var(--serif);max-width:29ch}
.prologue-card:not(.prologue-personal) .ghost-written-line{animation-duration:.65s}
@media(max-width:700px){.prologue-caption{inset:auto 8% 22%}.prologue-caption h2{font-size:clamp(1.8rem,7.5vw,3rem)}.prologue-caption>p:first-child{font-size:.875rem;letter-spacing:.09em}.prologue-finale h2{font-size:clamp(2.7rem,10vw,4rem)}}
@media(max-height:500px){.prologue-caption{inset:11% 10% 25%}.prologue-caption h2{font-size:1.8rem}.prologue-caption>p:first-child{margin-bottom:8px}}