@font-face {
  font-family: 'Silkscreen';
  src: url('./assets/pixel.woff2') format('woff2');
  font-display: swap;
}
:root { color-scheme: dark; --ink:#ece6d4; --muted:#b6afc4; --acid:#d7da9d; --night:#0c0b12; --pixel:'Silkscreen',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--night); color:var(--ink); font-family:Georgia,'Times New Roman',serif; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; font:inherit; }
button:disabled { cursor:default; }
button:focus-visible,a:focus-visible { outline:2px solid var(--acid); outline-offset:6px; }
[hidden] { display:none!important; }
::selection { background:#b1b778; color:#111; }
.night { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1; background:#15101f; }
.house { position:absolute; inset:0; background:url('./assets/house.png') center 53% / cover no-repeat; image-rendering:pixelated; }
.window-haunt { position:absolute; z-index:1; overflow:hidden; opacity:0; filter:drop-shadow(0 0 8px #dfe6b5); }
.window-haunt img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; filter:brightness(.6) sepia(.2); }
.window-haunt-one { left:46.7%; top:39%; width:3.2%; height:10%; animation:windowGuest 13s steps(2,end) infinite 2s; }
.window-haunt-two { left:68.4%; top:50%; width:3.5%; height:10%; animation:windowGuest 17s steps(2,end) infinite 7s; }
.window-haunt-three { left:38.7%; top:53.5%; width:3.8%; height:6%; animation:watchingEyes 11s steps(1,end) infinite 4s; }
.eyes { position:absolute; left:17%; top:33%; width:18%; height:12%; background:var(--acid); box-shadow:1.25vw 0 var(--acid),0 0 9px var(--acid),1.25vw 0 9px var(--acid); }
.window-message { position:absolute; z-index:3; top:240px; left:calc(50% + 80px); padding:7px 9px; color:#e7e6bd; background:#09080dde; border:1px solid #b4ae8644; opacity:0; font:10px/1.6 var(--pixel); white-space:nowrap; text-shadow:0 0 8px #e7e6bd; }
.door-shadow { position:absolute; z-index:1; left:50.8%; top:68%; width:4.3%; height:13%; opacity:0; background:linear-gradient(90deg,transparent,#050408 28% 70%,transparent); filter:blur(1px); animation:doorPass 19s steps(5,end) infinite 9s; }
.vignette { position:absolute; inset:0; background:linear-gradient(180deg,#08060e88 0%,#08060e22 25%,#08060e00 50%,#08060e55 74%,#08060eee 100%),linear-gradient(90deg,#08060e66,transparent 30%,transparent 70%,#08060e66); }
.grain { position:absolute; inset:0; opacity:.14; background:repeating-linear-gradient(0deg,#0008 0px,#0008 1px,transparent 1px,transparent 4px); }
.blackout { position:fixed; inset:0; z-index:20; pointer-events:none; background:#020105; opacity:0; }
.fog { position:absolute; width:160%; height:27%; left:-30%; bottom:4%; background:radial-gradient(ellipse at 35% 65%,#aaa5c42e,transparent 57%),radial-gradient(ellipse at 75% 50%,#bfc1d21e,transparent 48%); filter:blur(12px); animation:mist 26s ease-in-out infinite alternate; }
.fog-two { bottom:26%; opacity:.45; animation-duration:38s; animation-direction:alternate-reverse; }
.masthead { position:absolute; top:0; left:0; right:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:26px 38px; z-index:4; font:11px/1.8 var(--pixel); color:#d7d0de; }
.tiny-cross { color:var(--acid); font-size:18px; margin-right:12px; }
.controls { display:flex; justify-self:end; gap:20px; }
.controls button { color:inherit; border:0; border-bottom:1px solid #b8acc844; background:transparent; font:10px/1.8 var(--pixel); padding:10px 0; min-height:44px; }
.controls button:hover { color:var(--acid); }
.prologue { min-height:100svh; position:relative; display:flex; flex-direction:column; align-items:center; padding:110px 28px 58px; }
.title-block { text-align:center; text-shadow:0 4px 0 #100d19,0 0 35px #100d19; }
.overline { margin:0 0 22px; color:var(--acid); font:11px/1.8 var(--pixel); letter-spacing:2px; }
h1 { margin:0; font:clamp(28px,3.2vw,48px)/1.22 var(--pixel); letter-spacing:-1px; }
h1>span { font-size:.68em; color:#ccc4da; }
h1>em { font-style:normal; color:var(--acid); font-size:1.45em; text-shadow:3px 3px 0 #464431,6px 6px 0 #100d19; }
.tagline { font-size:19px; font-style:italic; margin:18px 0 0; color:#d2cbdc; }
.story-panel { width:min(590px,100%); margin-top:auto; padding:25px 30px 18px; background:#100e19ec; border:1px solid #777086; box-shadow:0 0 0 5px #100e1966,0 18px 70px #0008; position:relative; }
.chapter-line { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:13px; color:var(--acid); font:10px/1.7 var(--pixel); letter-spacing:1px; }
.chapter-dots { display:flex; gap:7px; }
.chapter-dots i { width:5px; height:5px; background:#55505e; }
.chapter-dots i.active { background:var(--acid); }
.narration { min-height:122px; }
.narration h2 { font-size:24px; font-weight:normal; letter-spacing:-.3px; margin:0 0 11px; }
.narration p { color:#cec8d6; margin:0; font-size:17px; line-height:1.42; white-space:pre-line; }
.story-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:24px; }
.action { display:inline-flex; justify-content:space-between; align-items:center; gap:24px; padding:15px 17px; min-height:50px; color:#15141b; background:var(--acid); border:1px solid #f2efc1; box-shadow:3px 3px 0 #626047; font:11px/1.6 var(--pixel); text-align:left; }
.action:hover { background:#f0edbd; }
.action:active { transform:translate(2px,2px); box-shadow:1px 1px 0 #626047; }
.action span { font:22px monospace; }
.whisper { max-width:160px; color:#aba2b7; font-size:14px; font-style:italic; text-align:right; }
.skip-story { display:block; width:max-content; max-width:100%; margin:19px auto 0; padding:5px; color:#b2aabb; font-size:13px; text-underline-offset:4px; }
.skip-story:hover { color:var(--ink); }
.ground-note { font:9px/1.7 var(--pixel); letter-spacing:2px; color:#9d92ac; margin:24px 0 0; text-align:center; }
.specter { position:absolute; width:65px; opacity:0; filter:drop-shadow(0 0 15px #c1cfba66); }
.specter img,.walker img,.visitor img { width:100%; image-rendering:pixelated; }
.specter-one { top:43%; left:69%; animation:haunt 19s ease-in-out infinite 2s; }
.specter-two { top:57%; left:10%; width:44px; animation:haunt 27s ease-in-out infinite 10s; }
.walker { position:absolute; bottom:4%; left:-12%; width:87px; opacity:.7; animation:crossing 40s linear infinite; }
.walker img { animation:shuffle .65s steps(2,end) infinite; filter:brightness(.7); }
.walker-two { bottom:16%; width:50px; opacity:.55; animation:crossing-back 53s linear infinite; animation-delay:-24s; }
.walker-two img { transform:scaleX(-1); }
.visitor { position:absolute; top:24%; left:70%; width:180px; opacity:0; transform:scale(.6); }
body.visited .visitor { animation:visitor 2.8s ease-out both; }
.door-light { position:absolute; bottom:16%; left:48%; width:4%; height:12%; opacity:0; background:#d7da9d; box-shadow:0 0 100px 40px #c9c58166; mix-blend-mode:screen; transition:opacity 1.5s; }
body.door-open .door-light { opacity:.35; }
body.knock .story-panel { animation:knock .3s ease-out; }
body.final-sequence .blackout { animation:finalBlack 5.1s ease-in-out both; }
body.scene-0 .house { filter:brightness(.82) saturate(.75); }
body.scene-1 .window-haunt-three { animation:letterEyes 5s steps(1,end) infinite; }
body.scene-2 .walker { opacity:.9; animation-duration:22s; }
body.scene-2 .walker-two { opacity:.78; animation-duration:31s; }
body.scene-2 .fog-one { opacity:.9; animation-duration:15s; }
body.scene-3 .window-haunt-one { animation:doubleInWindow 7s steps(3,end) infinite; }
body.scene-3 .window-haunt-two { animation:windowGuest 8s steps(2,end) infinite 1s; }
body.scene-4 .door-shadow { animation:doorWait 4s steps(2,end) infinite; }
body.scene-4 .door-light { opacity:.12; }
body.invited .window-message { animation:windowMessage 19s steps(1,end) infinite 8s; }
.invitation { padding:110px 24px 50px; min-height:100svh; }
.invite-sheet { max-width:650px; margin:0 auto; padding:48px 62px; background:#100f17f5; border:1px solid #756a7e; outline:1px solid #756a7e55; outline-offset:-10px; text-align:center; box-shadow:0 20px 100px #0009; }
.ornament { color:#9b899f; font-size:28px; margin-bottom:25px; }
.invite-sheet h2 { font:clamp(26px,3.5vw,39px)/1.35 var(--pixel); color:var(--acid); margin:0; }
.invite-sheet h2:focus { outline:none; }
.invite-lead { font-size:23px; font-style:italic; margin:22px 0; }
.invite-copy { font-size:18px; line-height:1.75; color:#c7bfd1; }
.date-block { margin:35px 0; padding:26px 0; border-top:1px solid #61566a; border-bottom:1px solid #61566a; display:flex; flex-direction:column; gap:10px; font:12px/1.7 var(--pixel); }
.date-block strong { font:23px/1.5 var(--pixel); color:var(--ink); }
.details { text-align:left; }
.details>div { padding:18px 0; border-bottom:1px solid #61566a55; }
.details dt { color:var(--acid); font:10px/1.8 var(--pixel); margin-bottom:7px; }
.details dd { margin:0; font-size:20px; line-height:1.5; }
.details small { display:block; font-size:15px; color:#b5aabd; margin-top:4px; }
.host-label { margin:35px 0 15px; color:#a99aae; font:10px var(--pixel); }
.hosts { font-size:22px; line-height:1.5; margin:0; }
.hosts span { color:#a79aaf; font-size:16px; }
.countdown { display:grid; justify-items:center; gap:1px; color:#b8aabc; font:8px/1.5 var(--pixel); letter-spacing:.5px; text-align:center; }
.countdown strong { color:var(--acid); font:10px/1.6 var(--pixel); white-space:nowrap; }
.last-line { margin:29px 0; color:#bdb2c6; font-size:16px; line-height:1.8; }
.last-line em { color:var(--ink); }
.replay { background:none; border:0; border-bottom:1px solid #756a7e; padding:12px 0; color:#b8aabc; font:9px/1.8 var(--pixel); min-height:44px; }
.bottom-ornament { margin:25px 0 0; }
.footer-note { color:#b2a3bf; text-align:center; font:9px/1.8 var(--pixel); max-width:550px; margin:30px auto 0; }
body.invited .night { filter:brightness(.65); transition:filter 1.5s; }
body.still *,body.still *::before,body.still *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
body.still .specter-one { opacity:.3; }
body.still .walker-one { left:7%; }
body.still .walker-two { left:85%; }
body.still .window-haunt-one { opacity:.45; transform:none; }
@keyframes mist { to { transform:translateX(14%); } }
@keyframes haunt { 0%,15%,70%,100% { opacity:0; transform:translate(-20px,25px); } 30%,50% { opacity:.5; } 65% { transform:translate(100px,-75px); opacity:0; } }
@keyframes crossing { from { left:-12%; } to { left:110%; } }
@keyframes crossing-back { from { left:110%; } to { left:-12%; } }
@keyframes shuffle { 50% { translate:0 -5px; rotate:3deg; } }
@keyframes visitor { 0% { opacity:0; transform:translateY(30px) scale(.6); } 22%,45% { opacity:.65; } 100% { opacity:0; transform:translateY(-35px) scale(1.2); } }
@keyframes knock { 20%,60% { transform:translateX(-3px); } 40%,80% { transform:translateX(3px); } }
@keyframes windowGuest { 0%,13%,42%,100% { opacity:0; transform:translateY(14%); } 18%,34% { opacity:.72; transform:translateY(0); } 28% { opacity:.95; transform:translateY(0) scale(1.06); } }
@keyframes watchingEyes { 0%,18%,30%,100% { opacity:0; } 19%,27% { opacity:.9; } 23% { transform:translateX(12%); } }
@keyframes doorPass { 0%,32%,48%,100% { opacity:0; transform:translateX(-45%); } 35%,44% { opacity:.7; } 47% { opacity:0; transform:translateX(65%); } }
@keyframes letterEyes { 0%,52%,70%,100% { opacity:0; } 53%,66% { opacity:.9; } }
@keyframes doubleInWindow { 0%,12%,72%,100% { opacity:0; transform:translateY(12%); } 18%,62% { opacity:.85; transform:translateY(0); } 48% { opacity:1; transform:translateY(0) scale(1.14); } }
@keyframes doorWait { 0%,25%,100% { opacity:.15; transform:translateX(-20%); } 45%,70% { opacity:.75; transform:translateX(15%); } }
@keyframes finalBlack { 0%,13% { opacity:0; } 25%,57% { opacity:1; } 78%,100% { opacity:0; } }
@keyframes windowMessage { 0%,48%,64%,100% { opacity:0; transform:translateY(5px); } 50%,61% { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation:none!important; transition:none!important; }.specter-one { opacity:.3; }.walker-one { left:7%; }.walker-two { left:85%; } }

/* On wide screens the house gets its own stage, followed by the story. */
.night { position:absolute; height:700px; z-index:0; }
.masthead,main { position:relative; z-index:1; }
.prologue { min-height:auto; display:flex; align-items:center; padding:0 38px 60px; gap:0; }
.title-block { position:absolute; top:110px; left:38px; width:360px; max-width:30vw; text-align:left; }
h1 { font-size:30px; }
.tagline { font-size:17px; }
.story-panel { width:min(700px,100%); max-width:none; margin:700px auto 0; padding:25px 32px 20px; background:#100e19f2; border-color:#77708688; box-shadow:0 8px 35px #0005; }
.narration { min-height:0; }
.narration h2 { font-size:24px; line-height:1.25; }
.narration p { font-size:17px; line-height:1.42; }
.story-actions { flex-wrap:wrap; gap:12px; margin-top:20px; }
.whisper { max-width:none; text-align:left; }
.skip-story { margin:12px 0 0; }
.ground-note { display:none; }
.house { left:0; background-size:min(1050px,100vw) auto; background-position:center top; }
.window-haunt-one { left:calc(50% - 35px); top:273px; width:34px; height:70px; }
.window-haunt-two { left:calc(50% + 193px); top:350px; width:37px; height:70px; }
.window-haunt-three { left:calc(50% - 119px); top:374px; width:40px; height:42px; }
.eyes { box-shadow:13px 0 var(--acid),0 0 9px var(--acid),13px 0 9px var(--acid); }
.door-shadow { left:calc(50% + 8px); top:476px; width:45px; height:91px; }
.door-light { left:calc(50% - 10px); bottom:auto; top:475px; width:42px; height:90px; }
body.invited .night { filter:none; }
.invitation { padding:700px 38px 40px; }
.invite-sheet { margin:0 auto; width:650px; max-width:100%; padding:48px 62px; background:#100f17f5; }
.invite-sheet h2 { font-size:27px; }
.footer-note { width:650px; max-width:100%; margin:25px auto; }
.full-legend { text-align:left; margin:25px 0; border-block:1px solid #61566a; }
.full-legend summary { cursor:pointer; color:var(--acid); padding:19px 0; font-size:18px; }
.full-legend h3 { color:var(--ink); font-size:20px; font-weight:normal; margin-bottom:10px; }
.full-legend p { color:#c7bfd1; font-size:17px; line-height:1.7; }
.controls button { font-size:12px; }
@media (max-width:1050px) {
  .masthead { padding:18px 24px; }.prologue { padding-inline:24px; }
  .title-block { left:24px; max-width:34vw; }h1 { font-size:26px; }
  .window-haunt-one { left:46.7%; top:39%; width:3.2%; height:10%; }.window-haunt-two { left:68.4%; top:50%; width:3.5%; height:10%; }
  .window-haunt-three { left:38.7%; top:53.5%; width:3.8%; height:6%; }.eyes { box-shadow:1.25vw 0 var(--acid),0 0 9px var(--acid),1.25vw 0 9px var(--acid); }
  .door-shadow { left:50.8%; top:68%; width:4.3%; height:13%; }.door-light { left:48%; top:auto; bottom:16%; width:4%; height:12%; }
}
@media (max-width:760px) {
  .masthead { position:relative; grid-template-columns:1fr auto; padding:10px 20px 8px; gap:0 12px; background:#0c0b12; }
  .edition { font-size:11px; }.controls { gap:16px; margin-left:auto; }.controls button { font-size:11px; }
  .masthead>.countdown { grid-column:1/-1; grid-row:2; min-height:34px; padding:4px 0; }
  .prologue { padding:24px 20px 35px; gap:0; }.title-block { position:static; width:100%; max-width:none; text-align:center; }
  h1 { font-size:27px; }.overline { font-size:11px; margin-bottom:14px; }.tagline { margin-top:12px; }
  .night { position:absolute; top:255px; height:410px; z-index:0; }.house { left:0; background-size:cover; background-position:center; }
  .window-haunt-one { left:44%; top:34%; width:8%; height:11%; }.window-haunt-two { left:72%; top:47%; width:8%; height:11%; }
  .window-haunt-three { left:24%; top:49%; width:9%; height:7%; }.eyes { box-shadow:3.1vw 0 var(--acid),0 0 9px var(--acid),3.1vw 0 9px var(--acid); }
  .window-message { top:78px; left:auto; right:14px; font-size:8px; }
  .door-shadow { left:47%; top:67%; width:10%; height:14%; }
  .masthead,main { position:relative; z-index:1; }.title-block { min-height:160px; }
  .story-panel { width:100%; max-width:580px; margin:410px auto 0; padding:21px 20px 18px; background:#100e19; }
  .chapter-line { align-items:flex-start; gap:10px; }
  .narration { min-height:0; }.narration p { font-size:16px; line-height:1.4; }.story-actions { justify-content:flex-start; }.ground-note { display:none; }
  .specter-one { width:45px; }.walker { width:65px; }.walker-two { width:45px; }.door-light { left:48%; }
  .invitation { padding:430px 18px 35px; }.invite-sheet { width:100%; max-width:600px; margin:auto; padding:35px 27px; background:#100f17; }
  .footer-note { width:100%; max-width:550px; margin:25px auto; }
  body.invited .night { top:75px; }
}
@media (prefers-reduced-motion:reduce) { .house { transition:none; } }