:root {
  --linen-vellum: #F4EBDD;
  --candle-cream: #FFF6D8;
  --butler-black: #171312;
  --oxblood-seal: #7B2432;
  --brass-bell: #B88A3B;
  --moonlit-blue: #27384F;
  --lavender-starch: #C9BED8;
  --polished-silver: #C8CED3;
  --title-font: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --body-font: "Libre Baskerville", Baskerville, Georgia, serif;
  --label-font: Fraunces, "Iowan Old Style", Georgia, serif;
  --mono-font: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--butler-black);
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 246, 216, .95), transparent 26rem),
    radial-gradient(circle at 82% 78%, rgba(201, 190, 216, .45), transparent 28rem),
    linear-gradient(115deg, #e4d8c7, var(--linen-vellum) 42%, #d8cbb8);
  font-family: var(--body-font);
}

body::before,
body::after,
.paper-grain {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

body::before {
  background:
    linear-gradient(90deg, rgba(123,36,50,.09) 1px, transparent 1px),
    linear-gradient(rgba(39,56,79,.045) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  mix-blend-mode: multiply;
}

body::after {
  background:
    radial-gradient(circle at 48% 0%, rgba(255,246,216,.52), transparent 30%),
    radial-gradient(circle at 50% 105%, rgba(23,19,18,.22), transparent 34%);
}

.paper-grain {
  opacity: .25;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(23,19,18,.18) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(97deg, rgba(123,36,50,.05) 0 1px, transparent 1px 11px);
  z-index: 2;
}

.manual-gate {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(255,246,216,.85), rgba(23,19,18,.66)),
    linear-gradient(135deg, var(--moonlit-blue), var(--butler-black));
  transition: transform 1.2s cubic-bezier(.76,0,.24,1), opacity 1s ease, visibility 1s ease;
}

.manual-gate.opened {
  transform: translateY(-110%) rotateX(8deg);
  opacity: 0;
  visibility: hidden;
}

.closed-manual {
  position: relative;
  width: min(88vw, 620px);
  min-height: 76vh;
  border: 2px solid var(--brass-bell);
  border-radius: 9px 26px 26px 9px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 4rem 3rem;
  background:
    linear-gradient(90deg, rgba(123,36,50,.25), transparent 5%, transparent 95%, rgba(23,19,18,.24)),
    repeating-linear-gradient(0deg, rgba(255,246,216,.08) 0 2px, transparent 2px 7px),
    var(--linen-vellum);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 24px 0 38px rgba(123,36,50,.12), inset -18px 0 40px rgba(255,246,216,.55);
  overflow: hidden;
}

.closed-manual::before {
  content: "";
  position: absolute;
  inset: 1.3rem;
  border: 1px solid rgba(123,36,50,.45);
  outline: 8px double rgba(184,138,59,.35);
}

.cover-clasp {
  position: absolute;
  right: -8px;
  top: 45%;
  width: 70px;
  height: 44px;
  background: linear-gradient(135deg, #d9b66d, var(--brass-bell));
  border: 1px solid var(--butler-black);
  border-radius: 20px 0 0 20px;
  box-shadow: inset 8px 0 13px rgba(255,246,216,.35);
}

.cover-lines {
  position: absolute;
  left: 44px;
  top: 0;
  bottom: 0;
  width: 6px;
  border-left: 1px solid rgba(123,36,50,.55);
  border-right: 1px solid rgba(123,36,50,.28);
}

.handbell {
  position: relative;
  width: 104px;
  height: 100px;
  margin-bottom: 1.5rem;
  animation: bellTremble 1.8s infinite ease-in-out;
}

.bell-dome,
.bell-mouth,
.bell-stem { position: absolute; left: 50%; transform: translateX(-50%); }
.bell-stem { top: 4px; width: 22px; height: 32px; border-radius: 14px 14px 5px 5px; background: var(--brass-bell); }
.bell-dome { bottom: 24px; width: 74px; height: 58px; border-radius: 70px 70px 16px 16px; background: radial-gradient(circle at 35% 20%, var(--candle-cream), var(--brass-bell) 44%, #76551e); border: 2px solid var(--butler-black); }
.bell-mouth { bottom: 15px; width: 92px; height: 18px; border-radius: 50%; background: #5d3c13; border: 2px solid var(--butler-black); }

.catalog-number,
.mono-tag,
.tiny-catalog-numbers {
  font-family: var(--mono-font);
  letter-spacing: .18em;
  font-size: .68rem;
  color: var(--moonlit-blue);
}

h1, h2 { font-family: var(--title-font); font-weight: 500; }

h1 {
  font-size: clamp(4rem, 13vw, 9rem);
  line-height: .82;
  margin: .5rem 0;
  color: var(--oxblood-seal);
  text-shadow: 0 2px 0 rgba(255,246,216,.9);
}

.cover-stamp,
.inventory-label {
  font-family: var(--label-font);
  color: var(--oxblood-seal);
  text-transform: uppercase;
  letter-spacing: .11em;
}

.unlatch-button {
  position: relative;
  z-index: 2;
  margin-top: 2rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--oxblood-seal);
  border-radius: 999px;
  background: var(--candle-cream);
  color: var(--oxblood-seal);
  font-family: var(--label-font);
  letter-spacing: .06em;
  cursor: pointer;
  box-shadow: 0 8px 0 rgba(123,36,50,.16);
}

.bell-cord {
  position: fixed;
  right: clamp(14px, 3vw, 42px);
  top: 0;
  bottom: 0;
  z-index: 12;
  width: 84px;
  pointer-events: none;
}

.cord-rail,
.room-medallions,
.small-bell { pointer-events: auto; }

.cord-line {
  position: absolute;
  top: 0;
  left: 39px;
  width: 6px;
  height: 100vh;
  background: repeating-linear-gradient(0deg, var(--brass-bell) 0 11px, #7b5a21 11px 18px);
  box-shadow: 0 0 0 1px rgba(23,19,18,.45), 0 0 22px rgba(255,246,216,.4);
  transform-origin: top;
}

.bell-cord.ringing .cord-line { animation: cordSway .72s ease; }

.cord-tassel {
  position: absolute;
  right: 21px;
  bottom: 24px;
  width: 42px;
  height: 72px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cord-tassel::before,
.cord-tassel::after,
.cord-tassel span {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--oxblood-seal);
}

.cord-tassel::before { top: 0; width: 28px; height: 22px; border-radius: 50%; }
.cord-tassel::after { top: 18px; width: 34px; height: 50px; border-radius: 0 0 22px 22px; clip-path: polygon(0 0,100% 0,88% 100%,70% 62%,54% 100%,39% 62%,20% 100%); }
.cord-tassel span { top: 11px; width: 46px; height: 1px; background: var(--brass-bell); }

.room-medallions {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: grid;
  gap: .62rem;
}

.medallion {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--brass-bell);
  background: var(--linen-vellum);
  color: var(--moonlit-blue);
  font-family: var(--mono-font);
  font-size: .66rem;
  cursor: pointer;
  box-shadow: inset 0 0 0 4px rgba(255,246,216,.72), 0 5px 18px rgba(23,19,18,.18);
  transition: transform .3s ease, background .3s ease, color .3s ease;
}

.medallion.active {
  transform: scale(1.18) rotate(-8deg);
  background: var(--oxblood-seal);
  color: var(--candle-cream);
}

.small-bell {
  position: absolute;
  top: 34px;
  right: 16px;
  width: 52px;
  height: 42px;
  border-radius: 50% 50% 12px 12px;
  border: 1px solid var(--butler-black);
  background: radial-gradient(circle at 32% 18%, var(--candle-cream), var(--brass-bell) 50%, #6d4d17);
  transform-origin: top center;
}

.bell-cord.ringing .small-bell { animation: ringBell .75s ease; }

.codex { position: relative; z-index: 3; }

.room-chapter {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem) clamp(5rem, 9vw, 8rem) clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem);
  position: relative;
  isolation: isolate;
}

.room-chapter::before {
  content: attr(data-sigil);
  position: absolute;
  left: 4vw;
  top: 8vh;
  font-family: var(--title-font);
  font-size: clamp(5rem, 15vw, 14rem);
  color: rgba(123,36,50,.055);
  z-index: -1;
}

.chapter-spread {
  width: min(1180px, 100%);
  min-height: min(76vh, 760px);
  display: grid;
  grid-template-columns: minmax(160px, .62fr) minmax(280px, 1.2fr) minmax(260px, .9fr);
  gap: clamp(1rem, 3vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 4rem);
  position: relative;
  border: 1px solid rgba(123,36,50,.28);
  background:
    linear-gradient(90deg, rgba(23,19,18,.08), transparent 8%, rgba(184,138,59,.12) 50%, transparent 52%, rgba(255,246,216,.42)),
    radial-gradient(circle at 74% 18%, rgba(255,246,216,.72), transparent 27rem),
    rgba(244,235,221,.84);
  box-shadow: 0 24px 70px rgba(39,56,79,.22), inset 0 0 0 10px rgba(255,246,216,.33);
}

.chapter-spread::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(184,138,59,.35);
  pointer-events: none;
}

.chapter-spread.reverse { grid-template-columns: minmax(260px, .9fr) minmax(280px, 1.2fr) minmax(160px, .62fr); }
.chapter-spread.reverse .quest-margin { grid-column: 3; }
.chapter-spread.reverse .engraved-vignette { grid-column: 2; grid-row: 1; }
.chapter-spread.reverse .chapter-copy { grid-column: 1; grid-row: 1; }

.quest-margin {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  border-left: 1px dashed rgba(123,36,50,.45);
  border-right: 1px dashed rgba(123,36,50,.25);
}

.quest-margin ol {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  font-size: .82rem;
  line-height: 1.8;
  color: rgba(23,19,18,.78);
}

.engraved-vignette {
  position: relative;
  min-height: 460px;
  border: 1px solid rgba(39,56,79,.42);
  border-radius: 48% 52% 4% 4% / 7% 7% 4% 4%;
  background:
    repeating-linear-gradient(112deg, rgba(23,19,18,.08) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 50% 35%, rgba(255,246,216,.85), transparent 48%),
    linear-gradient(180deg, rgba(201,190,216,.5), rgba(244,235,221,.75));
  overflow: hidden;
  box-shadow: inset 0 0 0 10px rgba(200,206,211,.24), inset 0 -50px 70px rgba(39,56,79,.16);
}

.engraved-vignette::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(123,36,50,.26);
  border-radius: inherit;
}

.chapter-copy { max-width: 31rem; }
.folio { font-family: var(--mono-font); color: var(--brass-bell); letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; }
.chapter-copy h2 { margin: .2rem 0 1rem; font-size: clamp(3.2rem, 8vw, 7rem); line-height: .82; color: var(--oxblood-seal); }
.chapter-copy p { font-size: clamp(1rem, 1.45vw, 1.24rem); line-height: 1.82; }
.poetic-instruction { color: var(--moonlit-blue); font-style: italic; border-top: 1px solid rgba(184,138,59,.45); padding-top: 1rem; }

.inventory-label { display: inline-block; font-size: .76rem; border: 1px solid rgba(123,36,50,.42); padding: .5rem .65rem; background: rgba(255,246,216,.45); width: fit-content; }

.door-arch { position: absolute; width: 54%; height: 78%; left: 23%; bottom: 0; border: 3px double var(--moonlit-blue); border-bottom: 0; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, rgba(39,56,79,.9), rgba(23,19,18,.82)); }
.hanging-bell { position: absolute; top: 22%; left: 50%; width: 88px; height: 70px; transform: translateX(-50%); }
.hanging-bell::before { content: ""; position: absolute; left: 41px; top: -90px; width: 3px; height: 100px; background: var(--brass-bell); }
.hanging-bell span { display: block; width: 88px; height: 64px; border-radius: 50% 50% 18px 18px; background: radial-gradient(circle at 32% 22%, var(--candle-cream), var(--brass-bell) 52%, #71531d); border: 2px solid var(--butler-black); }
.active .artifact-bell { animation: bellTremble 1.15s ease-in-out infinite; }

.key-ring { position: absolute; right: 17%; bottom: 18%; width: 115px; height: 115px; border: 4px solid var(--brass-bell); border-radius: 50%; }
.key-ring i { position: absolute; left: 50%; top: 50%; width: 12px; height: 90px; background: var(--brass-bell); transform-origin: top; border-radius: 8px; }
.key-ring i:nth-child(1) { transform: rotate(-26deg); }
.key-ring i:nth-child(2) { transform: rotate(7deg); }
.key-ring i:nth-child(3) { transform: rotate(37deg); }

.linen-press { position: absolute; left: 18%; top: 20%; width: 56%; height: 56%; border: 3px double var(--moonlit-blue); background: rgba(255,246,216,.38); }
.linen-press span { display: block; height: 23%; margin: 8% 9%; background: repeating-linear-gradient(0deg, var(--lavender-starch), var(--lavender-starch) 7px, var(--linen-vellum) 7px, var(--linen-vellum) 14px); border: 1px solid rgba(39,56,79,.25); transform: translateX(-18px); opacity: 0; transition: transform .7s ease, opacity .7s ease; }
.active .linen-press span { transform: translateX(0); opacity: 1; }
.active .linen-press span:nth-child(2) { transition-delay: .15s; }
.active .linen-press span:nth-child(3) { transition-delay: .3s; }
.origami-napkin { position: absolute; right: 17%; bottom: 18%; width: 100px; height: 82px; background: linear-gradient(135deg, var(--candle-cream) 0 50%, var(--lavender-starch) 50%); clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 74%); filter: drop-shadow(0 10px 12px rgba(39,56,79,.24)); }
.moon-window { position: absolute; right: 13%; top: 13%; width: 92px; height: 92px; border-radius: 50%; background: var(--polished-silver); box-shadow: inset -18px 0 0 var(--moonlit-blue), 0 0 32px var(--candle-cream); }

.silver-tray { position: absolute; left: 21%; top: 33%; width: 58%; height: 32%; border-radius: 50%; background: radial-gradient(ellipse at 45% 45%, var(--candle-cream), var(--polished-silver) 45%, #8e969e 80%); border: 5px double var(--moonlit-blue); box-shadow: 0 20px 28px rgba(23,19,18,.18); }
.silver-tray span { position: absolute; border-radius: 50%; border: 1px solid var(--moonlit-blue); background: rgba(255,246,216,.55); }
.silver-tray span:nth-child(1) { width: 34px; height: 34px; left: 22%; top: 32%; }
.silver-tray span:nth-child(2) { width: 48px; height: 48px; left: 43%; top: 18%; }
.silver-tray span:nth-child(3) { width: 22px; height: 22px; right: 20%; top: 44%; }
.pantry-shelves { position: absolute; inset: 12% 13% auto 13%; height: 120px; border-bottom: 3px solid var(--brass-bell); }
.pantry-shelves i { position: relative; display: inline-block; width: 42px; height: 68px; margin: 35px 10px 0; border: 1px solid var(--moonlit-blue); border-radius: 18px 18px 5px 5px; background: rgba(255,246,216,.55); }
.wax-seal { position: absolute; right: 20%; bottom: 16%; width: 82px; height: 82px; display: grid; place-items: center; border-radius: 50%; background: var(--oxblood-seal); color: var(--candle-cream); font-size: 2rem; box-shadow: 0 0 0 8px rgba(123,36,50,.16); }

.stair-runner { position: absolute; left: 18%; bottom: 0; width: 64%; height: 84%; background: repeating-linear-gradient(18deg, transparent 0 32px, rgba(123,36,50,.18) 32px 35px), linear-gradient(130deg, transparent 0 34%, var(--oxblood-seal) 35% 45%, transparent 46%); clip-path: polygon(20% 0,80% 0,68% 25%,86% 25%,72% 52%,92% 52%,58% 100%,20% 100%,52% 52%,35% 52%,50% 25%,34% 25%); opacity: .72; }
.oval-mirror { position: absolute; right: 15%; top: 13%; width: 170px; height: 242px; border-radius: 50%; border: 8px double var(--brass-bell); background: linear-gradient(135deg, rgba(200,206,211,.95), rgba(39,56,79,.72)); box-shadow: inset 0 0 34px rgba(255,246,216,.55); }
.oval-mirror span { position: absolute; inset: 28px; border-radius: 50%; background: radial-gradient(circle at 45% 32%, var(--candle-cream), transparent 22%), radial-gradient(circle at 54% 60%, var(--lavender-starch), transparent 36%); opacity: 0; transition: opacity 1s ease; }
.active .oval-mirror span { opacity: 1; }
.turning-key { position: absolute; left: 22%; top: 25%; width: 108px; height: 28px; background: var(--brass-bell); border-radius: 16px; transform-origin: 78% 50%; }
.turning-key::before { content: ""; position: absolute; left: -28px; top: -21px; width: 62px; height: 62px; border: 9px solid var(--brass-bell); border-radius: 50%; background: transparent; }
.turning-key::after { content: ""; position: absolute; right: -21px; bottom: -18px; width: 24px; height: 44px; background: var(--brass-bell); clip-path: polygon(0 0,100% 0,100% 35%,55% 35%,55% 62%,100% 62%,100% 100%,0 100%); }
.active .turning-key { animation: keyTurn 2s ease-in-out infinite; }

.book-shelves { position: absolute; inset: 16% 14% 20%; border: 3px double var(--moonlit-blue); display: flex; align-items: end; gap: 10px; padding: 24px; background: rgba(39,56,79,.13); }
.book-shelves i { flex: 1; height: var(--h, 70%); background: linear-gradient(90deg, var(--oxblood-seal), #9d6658); border: 1px solid rgba(23,19,18,.5); }
.book-shelves i:nth-child(2) { --h: 88%; background: var(--moonlit-blue); }
.book-shelves i:nth-child(3) { --h: 62%; background: var(--brass-bell); }
.book-shelves i:nth-child(4) { --h: 76%; background: var(--lavender-starch); }
.book-shelves i:nth-child(5) { --h: 92%; background: var(--oxblood-seal); }
.broom-comet { position: absolute; right: 13%; bottom: 13%; width: 180px; height: 24px; background: var(--brass-bell); transform: rotate(-22deg); border-radius: 999px; }
.broom-comet::after { content: ""; position: absolute; right: -70px; top: -28px; width: 86px; height: 78px; background: repeating-linear-gradient(90deg, #6f4f1c 0 4px, var(--brass-bell) 4px 8px); clip-path: polygon(0 10%,100% 0,72% 100%,0 76%); }
.active .broom-comet::after { animation: bristleGlow 1.4s ease-in-out infinite; }
.written-annotation { position: absolute; left: 16%; bottom: 17%; font-family: var(--title-font); font-size: 2rem; color: var(--oxblood-seal); width: 0; white-space: nowrap; overflow: hidden; }
.active .written-annotation { animation: inkWrite 2.4s steps(17) forwards; }

.dawn-window { position: absolute; inset: 14% 22% 24%; border: 6px double var(--brass-bell); background: linear-gradient(180deg, var(--candle-cream), #f5d98c 54%, var(--linen-vellum)); overflow: hidden; }
.dawn-window span { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--moonlit-blue); transition: transform 1.5s cubic-bezier(.76,0,.24,1); }
.dawn-window span:first-child { left: 0; }
.dawn-window span:nth-child(2) { right: 0; }
.active .dawn-window span:first-child { transform: translateX(-102%); }
.active .dawn-window span:nth-child(2) { transform: translateX(102%); }
.soap-bubbles i { position: absolute; border-radius: 50%; border: 1px solid var(--polished-silver); background: radial-gradient(circle at 35% 28%, var(--candle-cream), rgba(200,206,211,.22)); animation: floatBubble 4s ease-in-out infinite; }
.soap-bubbles i:nth-child(1) { left: 18%; bottom: 18%; width: 64px; height: 64px; }
.soap-bubbles i:nth-child(2) { left: 31%; bottom: 24%; width: 42px; height: 42px; animation-delay: .7s; }
.soap-bubbles i:nth-child(3) { right: 23%; bottom: 16%; width: 82px; height: 82px; animation-delay: 1.2s; }
.lace-hem { position: absolute; left: 8%; right: 8%; bottom: 7%; height: 34px; background: radial-gradient(circle at 17px 0, transparent 16px, var(--lavender-starch) 17px 18px, transparent 19px) 0 0 / 34px 34px repeat-x; border-top: 1px solid var(--lavender-starch); }

.dust-constellation span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--candle-cream); box-shadow: 0 0 12px var(--candle-cream); opacity: .42; }
.dust-constellation span:nth-child(1) { left: 24%; top: 20%; }
.dust-constellation span:nth-child(2) { left: 35%; top: 38%; }
.dust-constellation span:nth-child(3) { right: 26%; top: 27%; }
.dust-constellation span:nth-child(4) { right: 34%; bottom: 30%; }
.dust-constellation span:nth-child(5) { left: 48%; bottom: 19%; }
.active .dust-constellation span { animation: moteDrift 3.8s ease-in-out infinite; }
.active .dust-constellation span:nth-child(2) { animation-delay: .35s; }
.active .dust-constellation span:nth-child(3) { animation-delay: .7s; }
.active .dust-constellation span:nth-child(4) { animation-delay: 1.05s; }
.active .dust-constellation span:nth-child(5) { animation-delay: 1.4s; }

@keyframes bellTremble { 0%,100%{ transform: rotate(0deg); } 20%{ transform: rotate(4deg); } 40%{ transform: rotate(-3deg); } 60%{ transform: rotate(2deg); } }
@keyframes cordSway { 0%,100%{ transform: rotate(0deg); } 25%{ transform: rotate(3deg); } 55%{ transform: rotate(-2deg); } }
@keyframes ringBell { 0%,100%{ transform: rotate(0deg); } 20%{ transform: rotate(14deg); } 42%{ transform: rotate(-12deg); } 70%{ transform: rotate(7deg); } }
@keyframes keyTurn { 0%,100%{ transform: rotate(0deg); } 50%{ transform: rotate(36deg); } }
@keyframes inkWrite { from{ width: 0; } to{ width: 15rem; } }
@keyframes bristleGlow { 0%,100%{ filter: drop-shadow(0 0 0 var(--candle-cream)); } 50%{ filter: drop-shadow(0 0 18px var(--candle-cream)); } }
@keyframes floatBubble { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-24px); } }
@keyframes moteDrift { 0%,100%{ transform: translate(0,0) scale(1); opacity: .36; } 50%{ transform: translate(13px,-21px) scale(1.5); opacity: .95; } }

@media (max-width: 900px) {
  .room-chapter { padding: 5rem 5rem 3rem 1rem; }
  .chapter-spread,
  .chapter-spread.reverse { grid-template-columns: 1fr; }
  .chapter-spread.reverse .quest-margin,
  .chapter-spread.reverse .engraved-vignette,
  .chapter-spread.reverse .chapter-copy { grid-column: auto; grid-row: auto; }
  .quest-margin { order: 3; }
  .engraved-vignette { min-height: 360px; }
  .bell-cord { right: 4px; transform: scale(.82); transform-origin: right center; }
}