:root {
  /* IBM Plex Mono sparingly for ledger fragments and codes; Interaction centers on lantern-revealed hidden ink. */
  --soot: #0B0A08;
  --bone: #E8D8B8;
  --blue: #263C73;
  --gold: #F2B84B;
  --cyan: #34B6B4;
  --red: #C92A2A;
  --oxblood: #5B1F1B;
  --poster-font: "Bebas Neue", "Impact", "Arial Narrow", sans-serif;
  --serif-font: "Fraunces", Georgia, "Times New Roman", serif;
  --mono-font: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --marker-font: "Permanent Marker", "Comic Sans MS", cursive;
  --lamp-x: 50vw;
  --lamp-y: 45vh;
  --route-dash: 1;
  --route-offset: 1;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--soot); }

body {
  margin: 0;
  color: var(--bone);
  background: var(--soot);
  font-family: var(--serif-font);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0/78px 34px,
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0/100% 34px,
    radial-gradient(circle at 18% 16%, rgba(91,31,27,.75), transparent 34%),
    linear-gradient(180deg, #0B0A08 0%, #130b08 54%, #0B0A08 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .24;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 18% 27%, rgba(232,216,184,.15) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 59%, rgba(242,184,75,.11) 0 1px, transparent 1.5px),
    radial-gradient(circle at 41% 82%, rgba(52,182,180,.09) 0 1px, transparent 1.5px);
  background-size: 31px 37px, 43px 47px, 67px 59px;
  animation: grit 1.1s steps(2) infinite;
}

.lantern-mask {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    radial-gradient(circle 180px at var(--lamp-x) var(--lamp-y), rgba(242,184,75,.30), rgba(242,184,75,.10) 38%, transparent 70%),
    radial-gradient(circle 260px at var(--lamp-x) var(--lamp-y), rgba(52,182,180,.14), transparent 72%);
  mix-blend-mode: screen;
  filter: blur(.2px);
}

.global-bars {
  position: fixed;
  inset: -20% -10%;
  z-index: 8;
  pointer-events: none;
  opacity: .34;
  transform: rotate(-9deg);
  transition: opacity .8s ease, transform 1.2s ease;
}

.bar-shadow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(0,0,0,.82) 59px 84px, transparent 85px 134px);
}

body.route-complete .global-bars { opacity: .08; transform: rotate(-3deg) translateX(5vw); }

.wall-nav {
  position: fixed;
  z-index: 40;
  left: clamp(14px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
}

.wall-nav button {
  width: 62px;
  min-height: 62px;
  border: 1px solid rgba(232,216,184,.22);
  color: var(--bone);
  background: rgba(11,10,8,.72);
  font-family: var(--mono-font);
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transform: rotate(-3deg);
  box-shadow: 0 8px 20px rgba(0,0,0,.45), inset 0 0 18px rgba(91,31,27,.4);
}

.wall-nav button:nth-child(even) { transform: rotate(4deg); }
.wall-nav span { display: block; color: var(--gold); font-size: 1.35rem; }
.wall-nav b { display: block; font-size: .55rem; font-weight: 600; }
.wall-nav button.active { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 28px rgba(52,182,180,.24); }

#mural { position: relative; isolation: isolate; }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  overflow: hidden;
  padding: clamp(72px, 9vw, 130px) clamp(24px, 7vw, 120px);
  background:
    linear-gradient(90deg, rgba(91,31,27,.22) 1px, transparent 1px) 0 0/72px 34px,
    linear-gradient(rgba(232,216,184,.035) 1px, transparent 1px) 0 0/100% 34px;
}

.scene::before {
  content: attr(data-chapter);
  position: absolute;
  right: 4vw;
  top: 3vh;
  font-family: var(--mono-font);
  font-size: clamp(4rem, 17vw, 18rem);
  color: rgba(232,216,184,.035);
  line-height: .8;
}

.route-svg {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 500vh;
  pointer-events: none;
  overflow: visible;
  mix-blend-mode: screen;
}

.route-svg path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--route-dash);
  stroke-dashoffset: var(--route-offset);
  filter: drop-shadow(0 0 10px rgba(52,182,180,.7));
}

.route-svg .route-glow { stroke: var(--gold); stroke-width: 26; opacity: .13; filter: blur(6px); }

.wheatpaste-layer,
.torn-poster,
.ledger-scrap {
  position: relative;
  z-index: 12;
  background:
    radial-gradient(circle at 12% 20%, rgba(91,31,27,.12), transparent 30%),
    linear-gradient(135deg, rgba(232,216,184,.97), rgba(210,188,142,.96));
  color: var(--soot);
  box-shadow: 0 24px 48px rgba(0,0,0,.48), inset 0 0 45px rgba(91,31,27,.16);
  clip-path: polygon(1% 6%, 9% 2%, 17% 5%, 28% 1%, 39% 4%, 47% 0, 58% 5%, 70% 2%, 82% 7%, 94% 3%, 99% 9%, 96% 23%, 99% 38%, 95% 51%, 100% 67%, 96% 82%, 98% 96%, 86% 94%, 74% 99%, 62% 96%, 49% 100%, 36% 95%, 24% 99%, 14% 94%, 3% 97%, 5% 82%, 1% 69%, 4% 55%, 0 41%, 5% 27%);
}

.peelable { transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease; cursor: pointer; }
.peelable.peeled { transform: rotate(var(--peel-rot, -2deg)) translateY(-12px) skewX(-2deg); filter: drop-shadow(12px 24px 0 rgba(52,182,180,.18)); }

h1, h2 {
  font-family: var(--poster-font);
  text-transform: uppercase;
  letter-spacing: -.035em;
  margin: 0;
  line-height: .82;
}

h1 { font-size: clamp(5.5rem, 22vw, 19rem); color: var(--soot); text-shadow: 5px 5px 0 rgba(201,42,42,.75); }
h2 { font-size: clamp(4rem, 12vw, 12rem); }
p { font-size: clamp(1.04rem, 1.55vw, 1.5rem); line-height: 1.48; }
.fraunces { font-family: var(--serif-font); }
.mono, .stamp { font-family: var(--mono-font); text-transform: uppercase; letter-spacing: .13em; font-size: .78rem; }
.red { color: var(--red); }
.chalk-symbol { font-family: var(--marker-font); color: var(--cyan); text-shadow: 0 0 14px rgba(52,182,180,.44); }

.locked { align-items: center; padding-left: clamp(54px, 12vw, 170px); }
.title-poster { width: min(1040px, 88vw); padding: clamp(28px, 4vw, 64px); transform: rotate(-2.5deg); }
.title-poster .lead { width: min(760px, 92%); color: rgba(11,10,8,.82); }
.thick { position: absolute; inset: 0; z-index: 13; opacity: .28; transform: rotate(8deg) scale(1.2); pointer-events: none; }
.first { position: absolute; z-index: 14; left: 58vw; top: 72vh; font-size: clamp(1.3rem, 3vw, 3rem); transform: rotate(-8deg); }
.ring-a { position: absolute; right: 13vw; top: 19vh; }
.broken-ring { width: 122px; height: 122px; border: 16px solid var(--bone); border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; filter: drop-shadow(0 0 16px rgba(242,184,75,.25)); }
.door-crack { position: absolute; left: 12vw; bottom: 0; width: 8px; height: 42vh; background: linear-gradient(var(--gold), var(--cyan)); box-shadow: 0 0 42px var(--gold); transform: skewX(-9deg); }

.whisper { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 8vw; background-color: #100b08; }
.side-strip { max-width: 520px; padding: 42px; transform: rotate(4deg); }
.hand-mural { position: relative; z-index: 11; width: min(530px, 74vw); height: 620px; border-left: 26px solid rgba(232,216,184,.12); }
.hand-mural span { position: absolute; bottom: 92px; width: 72px; background: var(--bone); border-radius: 44px 44px 18px 18px; opacity: .86; box-shadow: 0 0 0 12px rgba(52,182,180,.05); }
.hand-mural span:nth-child(1){ left:80px; height:260px; transform:rotate(-12deg); }
.hand-mural span:nth-child(2){ left:150px; height:350px; }
.hand-mural span:nth-child(3){ left:225px; height:390px; }
.hand-mural span:nth-child(4){ left:300px; height:315px; transform:rotate(8deg); }
.hand-mural span:nth-child(5){ left:365px; height:210px; transform:rotate(19deg); }
.hand-mural::after { content:""; position:absolute; left:130px; bottom:0; width:260px; height:210px; background:var(--bone); border-radius: 44% 48% 36% 38%; }
.symbol-wall { position: absolute; right: 8vw; bottom: 8vh; display: grid; gap: 18px; font-size: clamp(1.6rem, 4vw, 4rem); transform: rotate(-7deg); }
.lantern-halo { position: absolute; left: 10vw; top: 9vh; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(242,184,75,.45), transparent 68%); animation: breathe 3s ease-in-out infinite; }
.diagonal-shadow { position: absolute; inset: -20%; background: repeating-linear-gradient(135deg, transparent 0 90px, rgba(0,0,0,.35) 91px 150px); transform: translateX(-8vw); }

.ledger { align-items: center; justify-items: end; background-color: #0B0A08; }
.ledger-scrap { width: min(920px, 88vw); padding: clamp(30px, 5vw, 70px); transform: rotate(-4deg); }
.ledger-lines { display: grid; gap: 12px; margin-top: 28px; font-family: var(--mono-font); }
.ledger-lines span { display: grid; grid-template-columns: 1fr 1.8fr 1fr; gap: 12px; padding: 12px 0; border-bottom: 2px dashed rgba(11,10,8,.35); }
.ledger-lines em { color: var(--red); font-style: normal; text-decoration: line-through; }
.ledger-lines strong { color: var(--soot); }
.ledger-lines i { color: var(--blue); font-style: normal; }
.red-stamps { position: absolute; left: 10vw; top: 18vh; display: grid; gap: 32px; font-family: var(--poster-font); font-size: clamp(3rem, 9vw, 9rem); color: var(--red); transform: rotate(12deg); opacity: .78; }
.red-stamps span { border: 8px solid currentColor; padding: .02em .16em; mix-blend-mode: screen; animation: fracture 3.5s steps(2) infinite; }
.tally-ladder { position: absolute; left: 22vw; bottom: 10vh; width: 220px; height: 270px; transform: rotate(-12deg); }
.tally-ladder i { position: absolute; width: 12px; height: 250px; background: var(--bone); }
.tally-ladder i:nth-child(1){left:30px}.tally-ladder i:nth-child(2){right:30px}.tally-ladder i:nth-child(n+3){height:10px;width:170px;left:25px}.tally-ladder i:nth-child(3){top:45px}.tally-ladder i:nth-child(4){top:125px}.tally-ladder i:nth-child(5){top:205px}

.paper-bird { width: 0; height: 0; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 62px solid var(--bone); filter: drop-shadow(0 8px 8px rgba(0,0,0,.4)); }
.bird-one { position: absolute; right: 19vw; top: 16vh; transform: rotate(-22deg); }

.rain { align-items: center; justify-items: start; background-color: #0d1218; }
.rain-lines { position: absolute; inset: -20%; opacity: .36; background: repeating-linear-gradient(105deg, transparent 0 22px, rgba(52,182,180,.22) 23px 25px); animation: rain 1s linear infinite; }
.bridge-poster { width: min(760px, 86vw); padding: 48px; transform: rotate(3deg); margin-left: 8vw; }
.river-bend { position: absolute; right: 5vw; top: 18vh; width: 46vw; height: 46vw; border: 22px solid var(--cyan); border-left-color: transparent; border-radius: 50%; opacity: .66; filter: drop-shadow(0 0 18px rgba(52,182,180,.5)); }
.key-silhouette { position: absolute; left: 57vw; bottom: 17vh; width: 230px; height: 28px; background: var(--gold); transform: rotate(-18deg); box-shadow: 0 0 25px rgba(242,184,75,.6); }
.key-silhouette::before { content:""; position:absolute; left:-70px; top:-35px; width:85px; height:85px; border:24px solid var(--gold); border-radius:50%; }
.key-silhouette::after { content:""; position:absolute; right:12px; top:28px; width:28px; height:58px; background:var(--gold); box-shadow: 46px 0 0 var(--gold); }
.arrow-one,.arrow-two { position:absolute; font-size: clamp(4rem, 12vw, 10rem); z-index:12; }
.arrow-one { right: 28vw; bottom: 14vh; transform: rotate(14deg); }
.arrow-two { right: 11vw; top: 25vh; transform: rotate(-18deg); color: var(--gold); }

.dawn-field {
  min-height: 115vh;
  align-items: center;
  justify-items: center;
  background:
    radial-gradient(circle at 70% 16%, rgba(242,184,75,.58), transparent 21%),
    linear-gradient(180deg, #0B0A08 0%, #263C73 48%, #F2B84B 138%);
}
.assembly-text { width: min(850px, 86vw); padding: 56px; transform: rotate(-1deg); text-align: left; }
.orbit-field { position: absolute; inset: 0; z-index: 11; pointer-events: none; }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(232,216,184,.24); border-radius: 50%; animation: orbit 18s linear infinite; }
.orbit span { position: absolute; left: 50%; top: -30px; }
.orbit-one { width: 520px; height: 520px; margin: -260px; }
.orbit-two { width: 760px; height: 760px; margin: -380px; animation-duration: 25s; animation-direction: reverse; }
.orbit-three { width: 980px; height: 980px; margin: -490px; animation-duration: 32s; }
.lantern-small { width: 54px; height: 72px; display:block; border: 7px solid var(--gold); border-radius: 24px 24px 10px 10px; box-shadow: 0 0 35px var(--gold); }
.assembly-hands { position: absolute; bottom: -20px; left: 0; right: 0; height: 140px; display: flex; justify-content: center; gap: clamp(18px, 5vw, 90px); z-index: 12; }
.assembly-hands i { width: 62px; height: 150px; background: var(--bone); border-radius: 34px 34px 10px 10px; transform-origin: bottom; opacity: .78; }
.assembly-hands i:nth-child(odd){ transform: rotate(-10deg); }.assembly-hands i:nth-child(even){ transform: rotate(12deg); }
.closing-mark { position: absolute; right: 7vw; bottom: 18vh; font-size: clamp(1.5rem, 4vw, 4rem); transform: rotate(-7deg); color: var(--soot); text-shadow: 0 0 18px rgba(242,184,75,.7); }

@keyframes grit { 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(-1%,1%); } }
@keyframes breathe { 0%,100%{ transform: scale(.92); opacity:.55; } 50%{ transform: scale(1.08); opacity:.9; } }
@keyframes rain { to { transform: translateY(72px); } }
@keyframes fracture { 0%,100%{ clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } 50%{ clip-path: polygon(0 0,100% 8%,94% 45%,100% 100%,0 94%,6% 50%); } }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .wall-nav { top: auto; bottom: 12px; left: 12px; right: 12px; transform: none; grid-template-columns: repeat(5, 1fr); }
  .wall-nav button { width: auto; min-height: 52px; }
  .wall-nav b { display: none; }
  .scene { padding: 84px 22px 120px; }
  .whisper { grid-template-columns: 1fr; }
  .hand-mural { height: 440px; transform: scale(.72); transform-origin: left center; }
  .ledger-lines span { grid-template-columns: 1fr; }
  .red-stamps { opacity: .28; }
  .river-bend { width: 80vw; height: 80vw; opacity: .25; }
}