/* UI components. The stage is a fixed 1920×1080 canvas scaled to fit the window. */
#stage { position: fixed; left: 50%; top: 50%; width: var(--stage-w); height: var(--stage-h); transform-origin: 50% 50%; }
#stage canvas { display: block; }
.layer { position: absolute; inset: 0; pointer-events: none; }

/* wordmark (top centre) */
.wordmark { position: absolute; top: 34px; left: 0; right: 0; text-align: center; color: var(--sand); text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.wordmark .ao { font: 500 22px var(--display); color: var(--amber); letter-spacing: .3em; }
.wordmark .nm { font: 600 40px var(--display); letter-spacing: .28em; padding-left: .28em; margin: 2px 0; }
.wordmark .sb { font: italic 500 21px var(--italic); color: var(--dim); }

/* the scroll: 66 books on a vertical rod, sections labelled, a glowing gem marks the current book */
.scroll { position: absolute; left: 58px; top: 150px; height: 780px; width: 260px; }
.scroll .rod { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, rgba(240,201,138,.55) 8%, rgba(240,201,138,.55) 92%, transparent); }
.scroll .tick { position: absolute; left: -3px; width: 8px; height: 1px; background: rgba(240,201,138,.45); }
.scroll .tick.major { width: 14px; }
.scroll .sec { position: absolute; left: 22px; font: 600 15px var(--display); letter-spacing: .22em; color: rgba(233,220,195,.55); transform: translateY(-50%); white-space: nowrap; }
.scroll .sec.on { color: #fff1d6; }
.scroll .gem { position: absolute; left: -7px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #fff6df, var(--amber) 45%, rgba(240,201,138,0) 72%); transform: translateY(-50%); }
.scroll .here { position: absolute; left: 176px; font: italic 600 26px var(--italic); color: var(--amber); transform: translateY(-50%); white-space: nowrap; }

/* exhibit caption (lower left) */
.caption { position: absolute; left: 330px; bottom: 150px; width: 680px; color: var(--sand); text-shadow: var(--shadow-text); }
.caption .no { font: 600 16px var(--display); letter-spacing: .45em; color: var(--amber); }
.caption h2 { font: 600 64px/1 var(--display); margin: 10px 0 14px; color: var(--ivory); }
.caption h2::first-letter { font-size: 1.35em; color: var(--amber); }
.caption p { font: italic 500 28px/1.35 var(--italic); margin: 0; color: var(--parchment); }
.caption .v { font: 500 16px var(--sans); letter-spacing: .12em; color: var(--dim); margin-top: 12px; }

/* press-and-hold ring (bottom centre) */
.hold { position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: auto; cursor: pointer; user-select: none; }
.hold svg { width: 108px; height: 108px; }
.hold .lbl { font: 600 17px var(--display); letter-spacing: .4em; padding-left: .4em; color: #fff1d6; text-shadow: 0 2px 10px #000; }

/* sensory strip: the "4D" effects, set on the lower letterbox bar */
.sensory { position: absolute; left: 0; right: 0; bottom: 104px;   /* clears the nav buttons (bottom-right) */ display: flex; justify-content: center; gap: 44px; }
.sensory div { font: 600 14px var(--display); letter-spacing: .5em; color: rgba(220,240,245,.85); display: flex; align-items: center; gap: 12px; }
.sensory div::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mist); box-shadow: 0 0 10px var(--mist); }

/* title card */
.titlecard { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000; }
.titlecard .k { font: 500 24px var(--display); letter-spacing: .7em; padding-left: .7em; color: #a58c62; margin-bottom: 8px; }
.titlecard .t { font: 600 170px var(--display); letter-spacing: .2em; padding-left: .2em; line-height: 1; text-align: center;
  background: linear-gradient(100deg, #5e3d16 0%, #c79a4e 30%, #fff1d0 46%, #e6c07a 52%, #8a6226 70%, #3e290e 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(255,190,110,.3)); }
.titlecard .t.small { font-size: 112px; letter-spacing: .12em; padding-left: .12em; }
.titlecard .rule { width: 0; height: 1px; margin: 24px 0 20px; background: linear-gradient(90deg, transparent, #e0b872, transparent); }
.titlecard .s { font: italic 500 40px var(--italic); color: #d9c49a; }

/* interactive-only controls */
.nav { position: absolute; right: 44px; bottom: 44px; display: flex; gap: 10px; pointer-events: auto; }
.nav button { font: 600 15px var(--display); letter-spacing: .3em; color: var(--sand); background: rgba(10,8,6,.5); border: 1px solid rgba(240,201,138,.35); border-radius: 24px; padding: 12px 20px; cursor: pointer; }
.nav button:hover { border-color: var(--amber); color: #fff; }
.hidden { display: none !important; }

/* story markers on the scroll (clickable) */
.scroll .dot { position: absolute; left: -2.5px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(240,201,138,.7); background: rgba(10,8,6,.6);
  transform: translateY(-50%); pointer-events: auto; cursor: pointer; }
.scroll .dot:hover { background: var(--amber); }
.loading { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font: 600 18px var(--display); letter-spacing: .5em; color: var(--sand); }