/* The letter occupies the stage. The house index stays behind one quiet control. */
main{min-height:100svh}
.house-index-toggle{position:fixed;right:max(23px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));width:48px;height:48px;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#130b12b3;border:1px solid #b9a28530;border-radius:50%;backdrop-filter:none}
.house-index-toggle>span{display:block;width:20px;height:1px;background:#dcc9ad;transition:width .3s ease}
.house-index-toggle[hidden],.initiation-exits [hidden]{display:none!important}
.house-index-toggle>span:nth-child(2){width:14px;align-self:flex-end;margin-right:13px}.house-index-toggle:hover>span:nth-child(2){width:20px}
.house-index-open{overflow:hidden}
.house-index{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,calc(100vw - 20px));height:100dvh;max-height:none;max-width:none;overflow-y:auto;padding:85px 43px 35px;background:radial-gradient(ellipse at 110% 20%,#4b20302b,transparent 75%),linear-gradient(115deg,#1c0f17,#0b080c);color:#eadfcb;border:0;border-left:1px solid #b3987950;box-shadow:-25px 0 90px #0007}
.house-index::backdrop{background:#050307ad;backdrop-filter:none}
.house-index[open]{animation:house-index-arrives .55s cubic-bezier(.16,.7,.24,1) both}
.house-index-close{position:absolute;right:24px;top:20px;min-width:48px;min-height:48px;font-family:var(--serif);font-size:2.2rem;color:#d8c2a7}
.house-index>.eyebrow{font-family:var(--print);font-size:.875rem;letter-spacing:.16em;color:#bca58c}
.house-index h2{font-family:var(--serif);font-size:3.8rem;line-height:1;letter-spacing:-.03em;margin:25px 0 40px}
.house-index h2 em{font-family:var(--script);font-weight:400;font-style:normal;letter-spacing:0;color:#d5b599}
.house-index nav{border-bottom:1px solid #ba9e7529}
.house-index nav button{width:100%;display:flex;gap:21px;align-items:baseline;text-align:left;border-top:1px solid #ba9e7529;min-height:64px;padding:17px 0;font-family:var(--serif);font-size:1.4rem;line-height:1.35;color:#deccb4}
.house-index nav button:hover{color:#fff4df}.house-index nav button>span{font-size:.875rem;width:18px;color:#a98776;font-family:var(--print)}
.house-index-settings{display:flex;justify-content:space-between;gap:20px;margin-top:24px}.house-index-settings>button{font-family:var(--serif);font-size:1rem;min-height:48px;padding:10px 0;color:#bda78e}
.house-index-note{font-family:var(--serif);font-size:.9375rem;line-height:1.7;color:#a28c7c;margin:24px 0 0}
.letter-view{padding-top:80px;padding-bottom:45px;min-height:100svh}
.letter-view>.replay-prologue{margin:20px auto 0;min-height:48px;font-family:var(--serif);font-size:1rem!important;letter-spacing:.025em;color:#b5a08a}
.initiation-view{padding-top:calc(86px + env(safe-area-inset-top))}
.initiation-view .chapter-panel h2{scroll-margin-top:calc(90px + env(safe-area-inset-top))}
.view:not(.letter-view):not(.initiation-view){padding-top:85px}
@keyframes house-index-arrives{from{transform:translateX(100%);opacity:.5}to{transform:translateX(0);opacity:1}}
@media(max-width:700px){.house-index-toggle{right:max(15px,env(safe-area-inset-right));top:max(13px,env(safe-area-inset-top))}.house-index{padding:79px 28px 32px}.house-index h2{font-size:3.4rem;margin-bottom:32px}.house-index nav button{font-size:1.3rem;min-height:61px}.letter-view{padding-top:77px;padding-bottom:35px}.initiation-view{padding-top:calc(76px + env(safe-area-inset-top))}.view:not(.letter-view):not(.initiation-view){padding-top:77px}}
@media(prefers-reduced-motion:reduce){.house-index[open]{animation:none}}


body[data-page="initiation"] .house-index-toggle{top:calc(7px + env(safe-area-inset-top));right:max(13px,env(safe-area-inset-right));width:44px;height:44px;background:transparent;border-color:transparent;backdrop-filter:none}

/* The first riddle arrives as a second enclosure slipping out of the letter. */
.story-transition:not([hidden]){pointer-events:auto}
.enclosure-opening-art{display:none}
.story-transition.correspondence-opening{padding-bottom:12vh;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#41222be8 0,#140b12f5 55%,#080509fc 100%)}
.correspondence-opening .transition-chapter{margin-bottom:17px;font-family:var(--print);font-size:.8rem;letter-spacing:.2em}
.correspondence-opening #transition-line{max-width:16ch;font-size:clamp(2.15rem,4vw,3.3rem);line-height:1.15}
.correspondence-opening .transition-rule{display:none}
.correspondence-opening .enclosure-opening-art{display:block;position:relative;flex:none;width:min(270px,65vw);height:175px;margin-top:62px;perspective:950px;animation:enclosure-lifts 4.2s cubic-bezier(.2,.65,.3,1) both;filter:none}
.enclosure-back-paper{position:absolute;inset:0;background:linear-gradient(150deg,#dbc8a9,#bfa482);border:1px solid #a68b69;transform:rotate(-3deg);box-shadow:inset 0 0 20px #6c3e2529}
.enclosure-insert{position:absolute;inset:10px 18px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;background:linear-gradient(115deg,#f0e5ce,#deccae);border:1px solid #b99f7966;color:#593b30;box-shadow:0 2px 10px #3d21181f;transform-origin:center bottom;animation:enclosure-slips-out 4.2s cubic-bezier(.22,.65,.3,1) both}
.enclosure-insert>span{font-family:var(--print);font-size:.65rem;letter-spacing:.15em;color:#886849}
.enclosure-insert>i{font-family:var(--serif);font-size:1.35rem;line-height:1.15;font-weight:400}
.enclosure-insert>b{font-family:var(--script);font-size:1.5rem;font-weight:400;line-height:1}
.enclosure-fold{position:absolute;inset:0;background:linear-gradient(32deg,#d7c1a1 0%,#e9d9bd 47%,#bda17d 49%,#ebdcc3 51%,#d4bd9a 100%);clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%);box-shadow:inset 0 -1px #9e7d51}
.enclosure-seal{position:absolute;left:calc(50% - 23px);top:57px;width:46px;height:46px;display:grid;place-items:center;border-radius:48% 44% 50% 43%;border:3px double #ae6b68;background:radial-gradient(circle at 40% 35%,#702936,#3c1020 80%);box-shadow:1px 3px 6px #34101966;color:#c78b80;font-family:var(--serif);font-size:1.6rem;text-shadow:0 1px #2a0c13}
.enclosure-arrival .chapter-paper{animation:riddle-paper-arrives 1.6s cubic-bezier(.16,.7,.24,1) both;transform-origin:center top}
.enclosure-arrival .riddle-verse,.enclosure-arrival .riddle-answer-row,.enclosure-arrival .answer-label{animation:riddle-ink-arrives 1.1s .65s both}
@keyframes enclosure-lifts{0%{opacity:0;transform:translateY(35px) rotate(-5deg) scale(.88)}25%{opacity:1;transform:translateY(0) rotate(-2deg) scale(1)}78%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:1;transform:translateY(7px) rotate(1deg)}}
@keyframes enclosure-slips-out{0%,28%{transform:translateY(0) rotate(0)}75%,100%{transform:translateY(-75px) rotate(3deg)}}
@keyframes riddle-paper-arrives{from{opacity:0;transform:perspective(1200px) rotateX(-9deg) translateY(42px) scale(.96)}to{opacity:1;transform:perspective(1200px) rotateX(0) translateY(0) scale(1)}}
@keyframes riddle-ink-arrives{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:600px){.story-transition.correspondence-opening{padding-top:25px;padding-bottom:45px}.correspondence-opening .transition-chapter{margin-bottom:9px}.correspondence-opening #transition-line{font-size:2rem;max-width:25ch}.correspondence-opening .enclosure-opening-art{width:210px;height:135px;margin-top:48px}.enclosure-insert{gap:7px;padding:10px}.enclosure-insert>i{font-size:1.1rem}.enclosure-seal{top:40px}.correspondence-opening #skip-transition{bottom:14px}}
@media(prefers-reduced-motion:reduce){.enclosure-opening-art,.enclosure-insert,.enclosure-arrival .chapter-paper,.enclosure-arrival .riddle-verse,.enclosure-arrival .riddle-answer-row,.enclosure-arrival .answer-label{animation:none!important}}

/* Read the message at rest, then dissolve gently into the next page. */
.story-transition.arriving{animation:story-veil-in .9s ease both}
.story-transition.departing{animation:story-veil-out .9s ease both}
.story-transition p{animation:story-words-in .8s .2s ease both;filter:none}
.story-transition .transition-chapter{animation:story-words-in .75s .1s ease both}
.story-transition .transition-rule{animation:rule-draws 1.6s .3s ease both}
.view{animation:story-page-in .75s ease-out}
.view.exiting{animation:story-page-out .9s ease both}
.scene-changing .scene>video,.scene-changing .scene>img{filter:none;transform:scale(1.025)}
@keyframes story-veil-in{from{opacity:0}to{opacity:1}}
@keyframes story-veil-out{from{opacity:1}to{opacity:0}}
@keyframes story-words-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@keyframes story-page-in{from{opacity:0}to{opacity:1}}
@keyframes story-page-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.view,.view.exiting,.story-transition.arriving,.story-transition.departing,.story-transition p,.story-transition .transition-chapter{animation:none!important}}

/* Keep large reading surfaces out of filter render passes. */
.scene>img,.scene-changing .scene>img{transform:none;filter:none;transition:none}
.letter-paper.letter-unfolding{animation:story-page-in 1s ease-out}
.letter-unfolding .handwritten p{animation-name:story-words-in;animation-duration:.7s}
.chapter-panel.page-arriving,.programme-page.page-arriving{animation:story-page-in .75s ease-out}
.chapter-panel.page-leaving,.programme-page.page-leaving{animation:story-page-out .45s ease-out both}
.ink-awakens{animation:story-page-in .5s ease-out}
.role-awakening{animation:story-page-in 1.2s ease-out}
@media(prefers-reduced-motion:reduce){.letter-paper.letter-unfolding,.letter-unfolding .handwritten p,.chapter-panel.page-arriving,.programme-page.page-arriving,.chapter-panel.page-leaving,.programme-page.page-leaving,.ink-awakens,.role-awakening{animation:none!important}}

/* The host can reach the desk even while a film or page transition is open. */
.is-host .house-index-toggle{z-index:120;background:#130b12e8;border:1px solid #b9a28560}
.host-admin-link{display:flex;align-items:center;min-height:52px;margin-top:20px;padding:12px 16px;color:#f0dbc0;border:1px solid #ae8c6959;text-decoration:none;font-family:var(--serif);font-size:1.25rem;background:#54233455}
.host-admin-link[hidden]{display:none!important}

.opening-cinema .house-index-toggle{position:fixed;left:auto;bottom:auto;transform:none;padding:0;right:max(20px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top))}
body:not(.is-host) .house-index-toggle,body:not(.is-host) #house-index{display:none!important}
.guest-session{max-width:900px;margin:48px auto 0;padding:22px 0;border-top:1px solid #b89a702e;text-align:center;color:#cdbba4;font:1rem/1.6 var(--serif)}
.guest-session[hidden]{display:none}
.guest-session .account-index{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 24px;margin:8px 0 0;padding:0;border:0}
.guest-session .account-index>[hidden]{display:none}
.guest-session .text-link{min-height:44px;font-size:1rem;text-underline-offset:5px}
.guest-session .text-link:hover{color:#fff0d9}
.guest-session .text-link:focus-visible{outline:2px solid #d8bd91;outline-offset:4px}

/* Completed guests move forward; old enclosure links are no longer available. */
.sealed-route{display:none!important}
.correspondence-sealed .account-index>[data-go=guestbook]{display:none}
.correspondence-sealed #welcome-line{pointer-events:none}