:root {
  --ink: #cfc9bd;
  --bright: #efe8da;
  --dim: #6d685f;
  --faint: #3a3730;
  --ghost: #0b0b0b;
  --carbon: #7d8798;
  --bg: #000;
  --serif: "IM Fell English", Georgia, serif;
  --mono: "Courier Prime", "Courier New", monospace;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--serif);
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #1b1b1b; color: var(--bright); }
p { margin: 0 0 1.1em; }

/* film grain */
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 90; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); }
  40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); }
  80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); }
}

#stage { position: relative; min-height: 100vh; opacity: 0; transition: opacity 1.1s ease; }
#stage.on { opacity: 1; }

.line { opacity: 0; transition: opacity 2.4s ease; font-size: clamp(17px, 2.1vw, 22px); line-height: 1.7; }
.line.on { opacity: 1; }
.quiet { color: var(--dim); }
.mono { font-family: var(--mono); }

/* exits look like every other word */
.x { color: inherit; text-decoration: none; cursor: default; transition: letter-spacing 1.4s ease, color 1.4s ease; }
.x:hover { letter-spacing: .06em; color: var(--bright); cursor: pointer; }
.x:focus-visible { outline: 1px dotted #333; outline-offset: 4px; }

/* Sable is always struck through */
.sable { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: #8a8478; }
a.x.sable:hover { text-decoration-color: var(--bright); }

/* hidden ink */
.ghost { color: var(--ghost); }

/* images */
.plate { position: relative; width: min(440px, 78vw); opacity: 0; transition: opacity 4s ease; }
.plate.on { opacity: .84; }
.plate img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.05) brightness(.9); }
.plate::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 70px 30px #000; pointer-events: none; }

/* generic layouts */
.col { position: relative; padding: 18vh 10vw 22vh; max-width: 980px; }
.col.narrow { max-width: 760px; }
.offset { position: absolute; left: 9vw; top: 12vh; width: min(440px, 78vw); }
.offset .text { margin-top: 5vh; max-width: 32em; }
.right-plate { display: flex; gap: 6vw; align-items: flex-start; flex-wrap: wrap; padding: 14vh 8vw 20vh; }
.right-plate .text { max-width: 30em; flex: 1 1 320px; }

.corner-exit {
  position: fixed; right: 11vw; bottom: 9vh;
  font-family: var(--mono); font-size: 14px; letter-spacing: .25em; color: var(--dim);
  opacity: 0; transition: opacity 5s ease;
}
.corner-exit.on { opacity: 1; }

/* typed documents */
.paper {
  font-family: var(--mono); font-size: clamp(14px, 1.5vw, 16px); line-height: 1.75;
  border: 1px solid #1d1c19; padding: 2.4em 2.6em; max-width: 36em; color: #bdb7aa;
}
.paper .head { color: var(--dim); letter-spacing: .12em; text-transform: uppercase; font-size: .85em; margin-bottom: 1.6em; }

/* flashlight */
.dark-field { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.dark-field .frag { position: absolute; font-size: clamp(15px, 1.7vw, 19px); white-space: nowrap; }
.torch {
  position: fixed; inset: 0; pointer-events: none; z-index: 20;
  background: radial-gradient(circle at var(--tx, -500px) var(--ty, -500px),
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 70px, rgba(0,0,0,.94) 135px, #000 190px);
}

/* walden */
.book { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.85; max-width: 34em; margin: 0 auto; padding: 18vh 8vw 24vh; text-align: justify; hyphens: auto; }
.book .folio { text-align: center; color: var(--dim); font-style: italic; margin-bottom: 3em; letter-spacing: .1em; }

/* footnotes */
sup a.fn { color: var(--dim); text-decoration: none; cursor: pointer; font-family: var(--mono); font-size: .75em; padding: 0 2px; }
sup a.fn:hover { color: var(--bright); }
.footnotes { margin-top: 150vh; max-width: 36em; font-family: var(--mono); font-size: 14px; line-height: 1.75; color: #9d978b; position: relative; }
.footnotes .fnote { margin-bottom: 2.4em; transition: color 1.5s ease; }
.footnotes .fnote.flash { color: var(--bright); }
.fnote.margin {
  position: absolute; left: calc(100% + 7vw); top: -10vh; height: 46vh;
  writing-mode: vertical-rl; transform: rotate(180deg);
}

/* thursday */
.days { display: flex; flex-direction: column; gap: 6vh; padding: 10vh 0 10vh 22vw; font-size: clamp(18px, 2.2vw, 24px); }

/* stairwell */
.stair { padding: 14vh 0 30vh 6vw; }
.stair .step { margin-bottom: 26vh; white-space: nowrap; }

/* hallway */
.hall-top { height: 30vh; padding: 12vh 10vw 0; opacity: 0; transition: opacity 4s ease; pointer-events: none; }
.hall-top.on { opacity: 1; pointer-events: auto; }
.corridor .w { height: 88vh; display: flex; align-items: center; justify-content: center; font-size: clamp(20px, 2.6vw, 30px); }

/* doors */
.doors { display: flex; gap: clamp(14px, 3vw, 40px); margin: 9vh 0 6vh; flex-wrap: wrap; }
.door {
  width: clamp(54px, 8vw, 92px); height: clamp(110px, 17vw, 190px);
  border: 1px solid #2a2824; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 18%; font-family: var(--mono); font-size: 13px; letter-spacing: .2em;
  color: var(--dim); text-decoration: none; transition: border-color 1.4s ease;
}
.door:hover { border-color: #4a463f; cursor: pointer; }
.door.blank { border-color: #101010; }
.door.blank:hover { border-color: #1e1e1e; }

/* acrostic */
.cap { cursor: default; transition: color 1s ease; }
.cap.lit { color: #fff6e2; }

/* manuscript */
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; padding: 20vh 8vw 22vh; max-width: 1150px; }
.columns .colm { font-family: var(--mono); font-size: clamp(13px, 1.4vw, 15px); line-height: 1.9; color: #b1ab9f; }
.mirror { transform: scaleX(-1); }
.face { display: inline-block; transform: scaleX(-1); }
@media (max-width: 700px) { .columns { grid-template-columns: 1fr; } }

/* typing */
.typeline {
  margin-top: 8vh; min-height: 2.2em; font-family: var(--mono); letter-spacing: .4em;
  font-size: clamp(18px, 2.4vw, 26px); color: var(--bright); cursor: text;
}
.typeline .caret { display: inline-block; width: .6em; border-bottom: 1px solid var(--faint); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.typeline .ch { display: inline-block; transition: transform 1.6s ease-in, opacity 1.6s ease-in; }
.typeline .ch.fall { opacity: 0; }
.typeline.glow { text-shadow: 0 0 12px rgba(255,240,210,.5); }
.ghost-input { position: absolute; left: -9999px; top: 0; opacity: 0; width: 1px; height: 1px; }
.telegram { font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; font-size: clamp(13px, 1.4vw, 15px); border: 1px solid #1d1c19; padding: 1.6em 2em; max-width: 34em; color: #bdb7aa; margin-bottom: 7vh; }

/* ledger */
.ledger { border-collapse: collapse; font-family: var(--mono); font-size: clamp(13px, 1.5vw, 16px); color: #b5afa3; margin: 4vh 0 6vh; }
.ledger td, .ledger th { padding: .65em 2.2em .65em 0; border-bottom: 1px solid #141412; text-align: left; font-weight: normal; }
.ledger th { color: var(--dim); letter-spacing: .12em; text-transform: uppercase; font-size: .8em; }

/* bridge */
.bridge-svg { width: min(820px, 92vw); height: auto; display: block; margin: 4vh 0; }
.bridge-svg text { fill: #a8a296; font-family: var(--serif); font-size: 14px; }
.blackout { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 40; transition: opacity .35s ease; }
.blackout.on { opacity: .985; }
.whisper { font-family: var(--mono); font-size: 13px; color: var(--dim); min-height: 1.5em; margin-top: 2em; opacity: 0; transition: opacity 1.2s ease; }
.whisper.on { opacity: 1; }

/* desk */
.sheet { font-family: var(--mono); font-size: clamp(14px, 1.5vw, 16px); line-height: 1.9; color: #c4beb1; max-width: 38em; min-height: 60vh; border-left: 1px solid #161513; padding-left: 2.2em; }
.sheet .head { color: var(--dim); letter-spacing: .1em; margin-bottom: 2.4em; }
.sheet .typed div { min-height: 1.9em; }
.sheet .cursor { display: inline-block; width: .55em; height: 1em; background: #4a463f; vertical-align: -2px; animation: blink 1s steps(2) infinite; }

/* carbon */
.original { font-family: var(--mono); font-size: clamp(14px, 1.5vw, 16px); line-height: 1.9; color: #c4beb1; max-width: 36em; }
.carbon-copy {
  font-family: var(--mono); font-size: clamp(14px, 1.5vw, 16px); line-height: 1.9; color: var(--carbon);
  max-width: 36em; margin-top: 10vh; transform: rotate(-.6deg) translateX(6px); filter: blur(.35px); opacity: .8;
}

/* upside down */
.inverted { display: block; transform: rotate(180deg); text-align: right; margin-top: 140vh; font-size: clamp(17px, 2vw, 21px); }

/* no */
.no { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font-size: clamp(26px, 4.6vw, 48px); font-style: italic; text-align: center; width: 80vw; }

/* hint */
.hint-mark { position: fixed; left: 22px; bottom: 20px; z-index: 95; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #121212; background: transparent; cursor: pointer; transition: border-color 6s ease; padding: 0; }
.hint-mark.ready { border-color: #3a3730; }
.hint-text { position: fixed; left: 56px; bottom: 21px; z-index: 95; font-family: var(--mono); font-size: 13px; color: #8d877b; letter-spacing: .05em; opacity: 0; transition: opacity 1.5s ease; pointer-events: none; max-width: 75vw; }
.hint-text.on { opacity: 1; }

@media (max-width: 640px) {
  .offset { left: 6vw; top: 8vh; }
  .corner-exit { right: 8vw; bottom: 12vh; }
  .days { padding-left: 12vw; }
  .fnote.margin { position: static; writing-mode: horizontal-tb; transform: none; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }