/* ————————————————————————————————————————————————
   hall.css: the candlelit hall — CSS 3D corridor,
   alcoves, spines, doors, poem, reading room, last alcove
   ———————————————————————————————————————————————— */

.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: transparent;
}

.stage__sky {
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(42, 51, 116, 0.35) 0%, rgba(12, 17, 51, 0) 55%),
    radial-gradient(90% 70% at 50% 105%, rgba(28, 36, 92, 0.5) 0%, rgba(8, 11, 32, 0) 60%);
}

.stage__persp {
  position: absolute;
  inset: 0;
  perspective: var(--persp, 1150px);
  perspective-origin: 50% 46%;
}

.world {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.wgroup {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
}

.wgroup > * { position: absolute; left: 0; top: 0; }

/* ——— corridor surfaces ——— */

.wall {
  width: var(--bayd, 1900px);
  height: var(--hallh, 1440px);
  background:
    /* candle pools at eye height */
    radial-gradient(34% 30% at 26% 55%, rgba(230, 188, 92, 0.17) 0%, rgba(230, 188, 92, 0) 100%),
    radial-gradient(30% 26% at 74% 52%, rgba(230, 188, 92, 0.12) 0%, rgba(230, 188, 92, 0) 100%),
    /* shelf boards */
    repeating-linear-gradient(180deg,
      rgba(8, 11, 32, 0) 0px, rgba(8, 11, 32, 0) 150px,
      rgba(230, 188, 92, 0.05) 150px, rgba(230, 188, 92, 0.05) 153px,
      rgba(5, 7, 22, 0.55) 153px, rgba(5, 7, 22, 0.55) 161px,
      rgba(8, 11, 32, 0) 161px, rgba(8, 11, 32, 0) 164px),
    /* massed spines, two interfering rhythms */
    repeating-linear-gradient(90deg,
      rgba(26, 33, 82, 0.5) 0px, rgba(26, 33, 82, 0.5) 11px,
      rgba(11, 15, 46, 0.62) 11px, rgba(11, 15, 46, 0.62) 21px,
      rgba(32, 40, 96, 0.4) 21px, rgba(32, 40, 96, 0.4) 29px,
      rgba(8, 11, 34, 0.66) 29px, rgba(8, 11, 34, 0.66) 41px),
    repeating-linear-gradient(90deg,
      rgba(230, 188, 92, 0.05) 0px, rgba(230, 188, 92, 0.05) 2px,
      rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 67px),
    linear-gradient(180deg, #090D28 0%, #10163E 44%, #0D1236 62%, #080B20 100%);
}

.wall::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 40% at 50% 54%, rgba(230, 188, 92, 0.10) 0%, rgba(230, 188, 92, 0) 100%);
  opacity: 0.5;
  animation: candle 7.4s ease-in-out infinite alternate;
  animation-delay: var(--fd, 0s);
}

@keyframes candle {
  0%   { opacity: 0.32; }
  38%  { opacity: 0.62; }
  62%  { opacity: 0.4; }
  100% { opacity: 0.58; }
}

.floor {
  width: calc(var(--hallw, 940px) * 1.7);
  height: var(--bayd, 1900px);
  background:
    linear-gradient(90deg, rgba(8, 11, 32, 0) 20%, rgba(230, 188, 92, 0.065) 49%, rgba(230, 188, 92, 0.065) 51%, rgba(8, 11, 32, 0) 80%),
    radial-gradient(60% 60% at 50% 50%, rgba(28, 36, 92, 0.5) 0%, rgba(10, 14, 40, 0.2) 100%),
    linear-gradient(180deg, #0A0E2A 0%, #0C1133 100%);
}

.ceil {
  width: calc(var(--hallw, 940px) * 1.7);
  height: var(--bayd, 1900px);
  background:
    radial-gradient(40% 50% at 50% 50%, rgba(42, 51, 116, 0.34) 0%, rgba(8, 11, 32, 0) 100%),
    linear-gradient(180deg, #080B20 0%, #0A0E2C 100%);
  opacity: 0.9;
}

/* ——— the doors ——— */

.door {
  width: 480px;
  height: 1560px;
  top: 0;
  border-radius: 240px 240px 0 0;
  background:
    linear-gradient(180deg, rgba(230, 188, 92, 0.07) 0%, rgba(230, 188, 92, 0) 22%),
    repeating-linear-gradient(90deg,
      rgba(26, 33, 82, 0.65) 0px, rgba(26, 33, 82, 0.65) 14px,
      rgba(12, 16, 46, 0.8) 14px, rgba(12, 16, 46, 0.8) 26px,
      rgba(34, 42, 100, 0.55) 26px, rgba(34, 42, 100, 0.55) 37px,
      rgba(9, 12, 36, 0.85) 37px, rgba(9, 12, 36, 0.85) 52px),
    repeating-linear-gradient(180deg,
      rgba(8, 11, 32, 0) 0px, rgba(8, 11, 32, 0) 186px,
      rgba(230, 188, 92, 0.06) 186px, rgba(230, 188, 92, 0.06) 189px,
      rgba(5, 7, 22, 0.6) 189px, rgba(5, 7, 22, 0.6) 198px),
    linear-gradient(180deg, #0D1238 0%, #10153E 55%, #090C28 100%);
  box-shadow: 0 40px 120px rgba(4, 6, 18, 0.8);
}

.door--l {
  transform: translate(-50%, -50%) translate3d(calc(-240px - var(--dt, 0) * 400px), 0, calc(var(--dt, 0) * 60px)) rotateY(calc(var(--dt, 0) * 34deg));
}
.door--r {
  transform: translate(-50%, -50%) translate3d(calc(240px + var(--dt, 0) * 400px), 0, calc(var(--dt, 0) * 60px)) rotateY(calc(var(--dt, 0) * -34deg));
}
.door--l::after, .door--r::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(230, 188, 92, 0.5), rgba(230, 188, 92, 0.12) 70%, rgba(230, 188, 92, 0));
  filter: blur(0.4px);
}
.door--l::after { right: 0; }
.door--r::after { left: 0; }

.door__spill {
  width: 34px;
  height: 1240px;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(230, 188, 92, 0.0) 6%, rgba(230, 188, 92, 0.3) 32%, rgba(246, 213, 92, 0.4) 52%, rgba(230, 188, 92, 0.26) 72%, rgba(230, 188, 92, 0) 94%);
  filter: blur(16px);
  opacity: 0.14;
}

.lintel {
  transform: translate(-50%, -50%) translate3d(0, -496px, 40px);
  white-space: nowrap;
  font: 300 1.05rem/1 var(--sans);
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(230, 188, 92, 0.4);
  opacity: calc(0.9 - var(--dt, 0) * 0.9);
}

/* ——— poem and plaque billboards ——— */

.poemline {
  transform: translate(-50%, -50%) translate3d(0, -30px, 0);
  width: max-content;
  max-width: 84vw;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.7rem, 3.2vw, 3rem);
  line-height: 1.4;
  color: var(--ink);
  text-shadow: 0 0 34px rgba(230, 188, 92, 0.22), 0 2px 24px rgba(8, 11, 32, 0.8);
}

.plaque {
  transform: translate(-50%, -50%) translate3d(0, -30px, 0);
  width: min(84vw, 640px);
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  text-align: center;
}
.plaque__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--ink2);
}
.plaque__honesty {
  font: 300 0.86rem/1.6 var(--sans);
  letter-spacing: 0.16em;
  color: var(--ink3);
}

/* ——— alcoves ——— */

.niche {
  position: relative;
  width: min(78vw, 540px);
  padding: clamp(2rem, 4vh, 3.2rem) clamp(1.4rem, 3vw, 2.6rem) 2rem;
  border-radius: 270px 270px 10px 10px;
  text-align: center;
  background:
    radial-gradient(130% 80% at 50% 96%, rgba(230, 188, 92, 0.14) 0%, rgba(230, 188, 92, 0) 55%),
    radial-gradient(120% 100% at 50% 0%, rgba(42, 51, 116, 0.5) 0%, rgba(21, 28, 71, 0.2) 60%),
    linear-gradient(180deg, #0E1440 0%, #141B4E 58%, #0C1136 100%);
  border: 1px solid rgba(230, 188, 92, 0.17);
  box-shadow:
    0 46px 110px rgba(4, 6, 18, 0.75),
    inset 0 -50px 90px rgba(230, 188, 92, 0.05),
    inset 0 30px 60px rgba(8, 11, 32, 0.55);
}
.niche::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 262px 262px 8px 8px;
  border: 1px solid rgba(230, 188, 92, 0.22);
  pointer-events: none;
}

.alcove__num {
  font: 300 0.7rem/1 var(--sans);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--goldui);
  padding-left: 0.5em;
  margin-bottom: 1.2rem;
}

.alcove__q {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 4.2vw, 2.3rem);
  line-height: 1.25;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(230, 188, 92, 0.3);
  text-wrap: balance;
  padding-inline: 0.25em;
  margin-bottom: 0.6rem;
}

.alcove__shelf {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  min-height: 216px;
  padding: 1.6rem 0 0.9rem;
}
.alcove__shelf::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(230, 188, 92, 0.4) 0%, rgba(8, 11, 32, 0.9) 100%);
  box-shadow: 0 14px 30px rgba(4, 6, 18, 0.8);
}

.spine {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--sw, 30px);
  height: var(--sh, 178px);
  border-radius: 3px 3px 2px 2px;
  background: var(--sg, linear-gradient(180deg, #1A2152, #10163F));
  box-shadow:
    inset 1px 0 0 rgba(230, 188, 92, 0.08),
    inset -2px 0 4px rgba(4, 6, 18, 0.7),
    0 6px 16px rgba(4, 6, 18, 0.55);
  opacity: 0.62;
  filter: brightness(0.72) saturate(0.85);
  transition: opacity 0.9s var(--soft), filter 0.9s var(--soft), box-shadow 0.9s var(--soft);
  transition-delay: var(--ld, 0s);
}
.spine::before, .spine::after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  height: 1px;
  background: rgba(230, 188, 92, var(--ba, 0.4));
}
.spine::before { top: var(--b1, 14px); box-shadow: 0 3px 0 rgba(230, 188, 92, calc(var(--ba, 0.4) * 0.5)); }
.spine::after { bottom: var(--b2, 18px); }

.spine__name {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font: 300 11.5px/1 var(--sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(210, 210, 210, 0.88);
  max-height: calc(100% - 40px);
  overflow: hidden;
}

.alcove.is-near .spine {
  opacity: 1;
  filter: brightness(1.16) saturate(1);
  box-shadow:
    inset 1px 0 0 rgba(230, 188, 92, 0.18),
    inset -2px 0 4px rgba(4, 6, 18, 0.55),
    0 0 24px rgba(230, 188, 92, 0.22),
    0 6px 18px rgba(4, 6, 18, 0.6);
}

/* the awake book */
.spine--hero { --sw: 40px; }
button.spine--hero { cursor: pointer; }
.spine--hero .spine__name { color: #10143A; font-weight: 500; }
.spine--hero::before, .spine--hero::after { background: rgba(16, 20, 58, 0.55); box-shadow: none; }
.spine__aura {
  position: absolute;
  inset: -10px -12px;
  border-radius: 8px;
  box-shadow: 0 0 34px rgba(230, 188, 92, 0.0);
  pointer-events: none;
}
.alcove.is-near .spine--hero .spine__aura {
  animation: aura 3s var(--soft) infinite alternate;
}
@keyframes aura {
  from { box-shadow: 0 0 26px rgba(230, 188, 92, 0.22); }
  to   { box-shadow: 0 0 48px rgba(246, 213, 92, 0.5); }
}
.alcove.is-near .spine--hero:hover, .spine--hero:focus-visible {
  filter: brightness(1.3) saturate(1.05);
}

.spine.is-borrowed { opacity: 0 !important; transition: none !important; }

.alcove__keep {
  font: 300 0.74rem/1 var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-top: 1.3rem;
}
.alcove__epithet {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ink2);
  opacity: 0.9;
  margin-top: 0.55rem;
}
.alcove__awake {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--goldhov);
  margin-top: 0.55rem;
  opacity: 0;
  transition: opacity 1.2s var(--soft) 0.9s;
}
.alcove.is-near .alcove__awake { opacity: 1; }

.sconce {
  width: 300px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(230, 188, 92, 0.16) 0%, rgba(230, 188, 92, 0) 70%);
  filter: blur(10px);
  animation: candle 6.2s ease-in-out infinite alternate;
  animation-delay: var(--fd, 0s);
}

/* ——— the reading room ——— */

.roomglow {
  width: 2700px;
  height: 1700px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(38% 42% at 50% 58%, rgba(230, 188, 92, 0.16) 0%, rgba(230, 188, 92, 0) 60%),
    radial-gradient(55% 60% at 50% 50%, rgba(28, 36, 92, 0.65) 0%, rgba(12, 17, 51, 0) 75%);
}

.roompainting {
  width: 460px;
  padding: 12px;
  background: #0B0F30;
  border: 1px solid rgba(230, 188, 92, 0.28);
  box-shadow: 0 30px 90px rgba(4, 6, 18, 0.8), inset 0 0 40px rgba(8, 11, 32, 0.6);
}
.roompainting img {
  width: 100%;
  height: auto;
  filter: brightness(0.58) saturate(0.8) contrast(0.96);
}
.roompainting::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 30%, rgba(230, 188, 92, 0.1) 0%, rgba(8, 11, 32, 0.35) 100%);
  pointer-events: none;
}

.roomtext {
  transform: translate(-50%, -50%) translate3d(0, -238px, 0);
  width: min(88vw, 660px);
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  text-align: center;
}
.roomtext__kicker {
  font: 400 0.86rem/1 var(--sans);
  letter-spacing: 0.34em;
  color: var(--goldui);
  padding-left: 0.34em;
}
.roomtext__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  color: var(--ink);
}
.roomtext__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--gold);
}
.roomtext__note {
  font: 300 0.85rem/1.6 var(--sans);
  letter-spacing: 0.1em;
  color: var(--ink3);
}
.roomtext__honesty {
  font: 300 0.8rem/1.6 var(--sans);
  letter-spacing: 0.16em;
  color: var(--ink3);
  opacity: 0.9;
}

.roomtable {
  width: 940px;
  height: 620px;
  transform: translate(-50%, -50%) translate3d(0, 300px, 0) rotateX(71deg);
  border-radius: 50%;
  background:
    radial-gradient(46% 44% at 50% 46%, rgba(230, 188, 92, 0.12) 0%, rgba(230, 188, 92, 0) 62%),
    radial-gradient(ellipse at 50% 44%, #202968 0%, #151B4C 55%, #0D1238 82%);
  border: 1px solid rgba(230, 188, 92, 0.22);
  box-shadow:
    0 0 140px rgba(230, 188, 92, 0.07),
    inset 0 0 110px rgba(8, 11, 32, 0.75);
}

.candleflame {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(248, 230, 150, 0.9) 0%, rgba(230, 188, 92, 0.35) 40%, rgba(230, 188, 92, 0) 75%);
  filter: blur(2px);
  animation: candle 4.8s ease-in-out infinite alternate;
}

.cbook {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 168px;
  height: 118px;
  transform: translate(-50%, -50%) rotate(var(--rz, 0deg)) translateY(-186px);
  display: flex;
  gap: 2px;
  filter: drop-shadow(0 10px 18px rgba(4, 6, 18, 0.7));
}
.cbook__page {
  position: relative;
  flex: 1;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(230, 188, 92, 0.13) 0%, rgba(230, 188, 92, 0) 80%),
    repeating-linear-gradient(180deg,
      rgba(230, 205, 150, 0.14) 0px, rgba(230, 205, 150, 0.14) 1px,
      rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 9px),
    linear-gradient(180deg, #2E3672 0%, #232B66 100%);
  border: 1px solid rgba(230, 188, 92, 0.3);
  box-shadow: inset 0 0 16px rgba(230, 188, 92, 0.08);
}
.cbook__page--l { border-radius: 8px 2px 2px 8px; transform: perspective(300px) rotateY(7deg); }
.cbook__page--r { border-radius: 2px 8px 8px 2px; transform: perspective(300px) rotateY(-7deg); }
.cbook__page::before { content: ''; position: absolute; inset: 6px 8px; }
.cbook__glow {
  position: absolute;
  inset: -14px;
  border-radius: 12px;
  background: radial-gradient(55% 55% at 50% 50%, rgba(246, 213, 92, 0.5) 0%, rgba(230, 188, 92, 0) 72%);
  opacity: calc(0.14 + var(--amp, 0) * 0.86);
  transform: scale(calc(0.94 + var(--amp, 0) * 0.14));
  will-change: opacity, transform;
}

.roomchips { transform: translate(-50%, -50%); }
.chip {
  position: absolute;
  transform: translate(-50%, -50%) translate(var(--cx, 0px), var(--cy, 0px));
  white-space: nowrap;
  font: 400 0.7rem/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink2);
  background: rgba(8, 11, 32, 0.66);
  border: 1px solid rgba(230, 188, 92, calc(0.16 + var(--amp, 0) * 0.5));
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  opacity: calc(0.6 + var(--amp, 0) * 0.4);
}

/* shared audio player */
.player {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(100%, 460px);
  margin-top: 0.6rem;
}
.player__btn {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(230, 188, 92, 0.5);
  background: radial-gradient(120% 120% at 50% 20%, rgba(42, 51, 116, 0.6) 0%, rgba(12, 17, 51, 0.8) 100%);
  display: grid;
  place-items: center;
  transition: border-color 0.3s, box-shadow 0.4s var(--soft), transform 0.5s var(--expo);
}
.player__btn:hover {
  border-color: var(--goldhov);
  box-shadow: 0 0 26px rgba(230, 188, 92, 0.3);
  transform: scale(1.05);
}
.player__btn svg { width: 20px; height: 20px; display: block; }
.player__btn .ic-play { fill: var(--gold); }
.player__btn .ic-pause { fill: var(--gold); display: none; }
.player__btn[aria-pressed='true'] .ic-play { display: none; }
.player__btn[aria-pressed='true'] .ic-pause { display: block; }

.player__body { flex: 1; display: grid; gap: 0.45rem; text-align: left; }
.player__label {
  font: 400 0.82rem/1.4 var(--sans);
  letter-spacing: 0.14em;
  color: var(--ink2);
}
.player__label em { font-style: normal; color: var(--goldui); }

.player__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
}
.player__range::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--gold) calc(var(--p, 0) * 1%), rgba(202, 202, 202, 0.22) calc(var(--p, 0) * 1%));
}
.player__range::-moz-range-track {
  height: 2px;
  border-radius: 1px;
  background: rgba(202, 202, 202, 0.22);
}
.player__range::-moz-range-progress { height: 2px; background: var(--gold); }
.player__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--goldhov);
  box-shadow: 0 0 10px rgba(246, 213, 92, 0.7);
  margin-top: -3.5px;
}
.player__range::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--goldhov);
  box-shadow: 0 0 10px rgba(246, 213, 92, 0.7);
}
.player__time {
  font: 300 0.72rem/1 var(--sans);
  letter-spacing: 0.14em;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}

/* ——— the last alcove ——— */

.lastglow {
  width: 1900px;
  height: 1300px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(36% 40% at 50% 46%, rgba(159, 180, 232, 0.17) 0%, rgba(159, 180, 232, 0) 62%),
    radial-gradient(60% 60% at 50% 50%, rgba(21, 28, 71, 0.6) 0%, rgba(8, 11, 32, 0) 75%);
}

.last {
  transform: translate(-50%, -50%) translate3d(0, -16px, 0);
  width: min(88vw, 680px);
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}
.last .ovl { color: var(--cool); opacity: 0.85; }
.last__lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  color: var(--ink2);
  max-width: 34ch;
}

.ghostbook {
  position: relative;
  width: min(74vw, 480px);
  height: clamp(170px, 30vw, 240px);
  margin: 1.2rem 0 1.6rem;
  transform-style: preserve-3d;
}
.ghostbook__page {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border: 1px solid rgba(159, 180, 232, 0.55);
  background:
    radial-gradient(80% 70% at 50% 40%, rgba(52, 63, 132, 0.3) 0%, rgba(14, 19, 56, 0.42) 100%);
  box-shadow:
    inset 0 0 34px rgba(159, 180, 232, 0.1),
    0 24px 60px rgba(4, 6, 18, 0.6);
}
.ghostbook__page::after {
  content: '';
  position: absolute;
  inset: 12px 14px;
  background-image: radial-gradient(rgba(159, 180, 232, 0.3) 1px, transparent 1.6px);
  background-size: 26px 26px;
  opacity: 0.55;
}
.ghostbook__page--l { left: 0; border-radius: 10px 2px 2px 10px; transform: rotateY(16deg); transform-origin: right center; }
.ghostbook__page--r { right: 0; border-radius: 2px 10px 10px 2px; transform: rotateY(-16deg); transform-origin: left center; }
.ghostbook__gutter {
  position: absolute;
  left: 50%;
  top: 4%;
  bottom: 4%;
  width: 0;
  border-left: 1px dashed rgba(159, 180, 232, 0.5);
}
.ghostbook__ribbon {
  position: absolute;
  left: 50%;
  top: 88%;
  width: 7px;
  height: 120px;
  margin-left: -3.5px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, rgba(159, 180, 232, 0.55) 0%, rgba(159, 180, 232, 0.06) 90%);
  transform: rotate(var(--rr, 0deg));
  transform-origin: top center;
  animation: ribbonsway 6s ease-in-out infinite alternate;
  animation-delay: var(--fd, 0s);
}
@keyframes ribbonsway {
  from { transform: rotate(calc(var(--rr, 0deg) - 2deg)); }
  to   { transform: rotate(calc(var(--rr, 0deg) + 2deg)); }
}

.last__title {
  font: 500 clamp(1.9rem, 4vw, 2.9rem)/1.1 var(--sans);
  letter-spacing: 0.08em;
  color: #C9D6F5;
  text-shadow: 0 0 40px rgba(159, 180, 232, 0.35);
}
.last__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--ink2);
}
.last__detail {
  font: 300 0.9rem/1.7 var(--sans);
  letter-spacing: 0.12em;
  color: var(--ink3);
}
.last__frame {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  color: var(--gold);
  max-width: 40ch;
  margin-top: 0.4rem;
}
.last__cta {
  margin-top: 1.2rem;
  border-color: rgba(159, 180, 232, 0.6);
}
.last__cta:hover { border-color: var(--goldhov); }