:root {
  --ink: #15110E;
  --vellum: #F2E3BF;
  --cinnabar: #B8432F;
  --verdigris: #2F7D6D;
  --saffron: #D89A2B;
  --plum: #3B2446;
  --chalk: #FFF7E2;
  --display: 'Cormorant Garamond', serif;
  --text: 'Spectral', serif;
  --accent: 'Unbounded', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--chalk);
  background:
    radial-gradient(circle at 18% 8%, rgba(216, 154, 43, .18), transparent 24rem),
    radial-gradient(circle at 78% 25%, rgba(59, 36, 70, .72), transparent 31rem),
    linear-gradient(180deg, var(--ink), #21120f 28%, var(--plum) 53%, #18100d 100%);
  font-family: var(--text);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(45deg, rgba(255, 247, 226, .06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 247, 226, .04) 25%, transparent 25%),
    radial-gradient(circle, rgba(242, 227, 191, .18) 1px, transparent 1.5px);
  background-size: 74px 74px, 74px 74px, 9px 9px;
  mix-blend-mode: screen;
}

.smoke {
  position: fixed;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 247, 226, .08), transparent 62%);
  filter: blur(18px);
  pointer-events: none;
  animation: smokeDrift 17s ease-in-out infinite alternate;
  z-index: 1;
}

.smoke-one { left: -12vw; top: 6vh; }
.smoke-two { right: -18vw; top: 48vh; animation-delay: -7s; }

.legend-charm {
  position: fixed;
  z-index: 10;
  top: 1rem;
  right: 1rem;
  display: grid;
  gap: .42rem;
  padding: .9rem .82rem;
  color: var(--ink);
  background: rgba(242, 227, 191, .86);
  border: 2px solid var(--saffron);
  border-radius: 999px 999px 28px 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.36), inset 0 0 0 1px rgba(184,67,47,.45);
  text-align: center;
  transform: rotate(2deg);
}

.legend-charm span,
.route-label,
.wax-seal,
.trace-button,
.taboo-mark,
.loose-threads span,
.witness-orbit span {
  font-family: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.legend-charm span { color: var(--cinnabar); font-size: .52rem; }
.legend-charm a { color: var(--ink); text-decoration: none; font: 500 .58rem var(--accent); }

.quest-map { position: relative; z-index: 2; }

.route-thread {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 620vh;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.route-thread path {
  fill: none;
  stroke: var(--saffron);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 18 18;
  filter: drop-shadow(0 0 10px rgba(216,154,43,.35));
}

.route-thread .thread-shadow {
  stroke: var(--verdigris);
  stroke-width: 2;
  stroke-dasharray: none;
  opacity: .38;
}

.room {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) minmax(280px, 1080px) minmax(1rem, 1fr);
  align-items: center;
  padding: 6rem 0;
  isolation: isolate;
}

.room > * { grid-column: 2; }

.hero-room { background: radial-gradient(ellipse at center, rgba(59,36,70,.38), transparent 62%); }

.vellum-title,
.artifact {
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255,247,226,.72), transparent 36%),
    radial-gradient(circle at 20% 18%, rgba(216,154,43,.16), transparent 18rem),
    var(--vellum);
  border: 2px solid rgba(21,17,14,.58);
  box-shadow: 0 28px 80px rgba(0,0,0,.42), inset 0 0 0 9px rgba(255,247,226,.28);
  clip-path: polygon(2% 4%, 94% 0, 100% 91%, 85% 100%, 0 95%);
}

.vellum-title {
  width: min(760px, 76vw);
  margin: auto;
  padding: 3rem 3.2rem;
  text-align: center;
  transform: rotate(-2deg);
}

h1, h2 { font-family: var(--display); line-height: .9; margin: 0; }
h1 { font-size: clamp(4.8rem, 13vw, 13rem); color: var(--plum); }
h2 { font-size: clamp(3.2rem, 7vw, 7.5rem); color: var(--plum); }
p { font-size: clamp(1.04rem, 1.5vw, 1.34rem); line-height: 1.62; }

.route-label { color: var(--verdigris); font-size: .68rem; margin: 0 0 1rem; }
.field-note { max-width: 34rem; margin: 1rem auto 0; }

.trace-button {
  justify-self: center;
  margin-top: 2rem;
  border: 0;
  color: var(--chalk);
  background: var(--cinnabar);
  border-radius: 50%;
  width: 9.4rem;
  height: 9.4rem;
  box-shadow: 0 14px 0 #7b281f, 0 26px 45px rgba(0,0,0,.4);
  cursor: pointer;
  transition: transform .5s ease, box-shadow .5s ease;
}
.trace-button:hover, .trace-button.traced { transform: translateY(10px) rotate(-8deg); box-shadow: 0 4px 0 #7b281f, 0 16px 30px rgba(0,0,0,.45); }

.orbit-glyphs {
  position: absolute;
  width: min(76vw, 860px);
  aspect-ratio: 1;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  animation: spin 32s linear infinite;
  z-index: -1;
}
.orbit-glyphs span { position: absolute; color: var(--saffron); font-size: 2rem; filter: drop-shadow(0 0 12px rgba(216,154,43,.6)); }
.orbit-glyphs span:nth-child(1) { left: 4%; top: 48%; }
.orbit-glyphs span:nth-child(2) { left: 20%; top: 12%; }
.orbit-glyphs span:nth-child(3) { right: 25%; top: 8%; }
.orbit-glyphs span:nth-child(4) { right: 3%; top: 50%; }
.orbit-glyphs span:nth-child(5) { right: 24%; bottom: 7%; }
.orbit-glyphs span:nth-child(6) { left: 19%; bottom: 10%; }

.wax-seal {
  position: absolute;
  right: 11vw;
  bottom: 13vh;
  width: 7rem;
  height: 7rem;
  display: grid;
  place-items: center;
  border-radius: 48% 52% 44% 56%;
  background: var(--cinnabar);
  color: var(--chalk);
  font-size: .74rem;
  box-shadow: inset -10px -10px 0 rgba(0,0,0,.16), 0 18px 44px rgba(0,0,0,.4);
  animation: sealPulse 3.8s ease-in-out infinite;
}

.chapter-mark {
  position: absolute;
  left: 5vw;
  top: 12vh;
  font-family: var(--display);
  font-size: clamp(8rem, 18vw, 19rem);
  color: rgba(255,247,226,.12);
  z-index: -1;
}

.artifact { width: min(620px, 76vw); padding: 2.3rem; }
.gate-room .artifact, .mask-room .artifact, .witness-room .artifact { justify-self: start; transform: rotate(-3deg); }
.table-room .artifact, .taboo-room .artifact, .exit-room .artifact { justify-self: end; transform: rotate(2.5deg); }

.hands-stage, .seating-diagram, .mask-theater, .taboo-field, .witness-orbit, .loose-threads {
  position: absolute;
  z-index: -1;
}

.hands-stage { right: 7vw; width: 34vw; height: 42vh; display: grid; place-items: center; }
.gate-arch { width: 12rem; height: 18rem; border: 7px double var(--verdigris); border-bottom: 0; border-radius: 7rem 7rem 0 0; }
.hand { position: absolute; color: var(--saffron); font-size: clamp(4rem, 9vw, 9rem); animation: bow 2.8s ease-in-out infinite; }
.hand-left { left: 0; }
.hand-right { right: 0; animation-delay: -1.4s; }
.hesitation { position: absolute; bottom: 1rem; color: var(--chalk); font: .7rem var(--accent); letter-spacing: .12em; }

.seating-diagram { left: 8vw; top: 18vh; width: 43vw; height: 43vw; min-width: 310px; min-height: 310px; border: 2px dashed rgba(216,154,43,.55); border-radius: 50%; animation: slowTurn 42s linear infinite; }
.plate { position: absolute; display: grid; place-items: center; width: 7.2rem; height: 7.2rem; border-radius: 50%; background: var(--chalk); color: var(--ink); border: 8px double var(--verdigris); font: .64rem var(--accent); text-transform: uppercase; }
.plate-a { left: 50%; top: -3.6rem; transform: translateX(-50%); }
.plate-b { right: -3.6rem; top: 50%; transform: translateY(-50%); }
.plate-c { left: 50%; bottom: -3.6rem; transform: translateX(-50%); }
.plate-d { left: -3.6rem; top: 50%; transform: translateY(-50%); }
.table-center { position: absolute; inset: 31%; display: grid; place-items: center; border-radius: 50%; background: rgba(184,67,47,.9); }
.spoon { color: var(--chalk); font-size: 8rem; transform: rotate(45deg); }

.mask-theater { right: 8vw; display: flex; gap: 2rem; perspective: 900px; }
.mask { width: clamp(8rem, 16vw, 14rem); height: clamp(12rem, 23vw, 20rem); border: 4px solid var(--saffron); border-radius: 50% 50% 45% 45%; background: var(--vellum); color: var(--plum); cursor: pointer; transform-style: preserve-3d; transition: transform .8s ease, background .8s ease; box-shadow: 0 25px 50px rgba(0,0,0,.42); }
.mask span { display: block; font-size: clamp(4rem, 8vw, 8rem); }
.mask em { color: var(--cinnabar); font: .7rem var(--accent); text-transform: uppercase; font-style: normal; }
.mask.flipped { transform: rotateY(180deg) rotate(3deg); background: var(--plum); color: var(--chalk); }

.taboo-field { left: 7vw; bottom: 12vh; width: 45vw; height: 52vh; border-left: 4px solid var(--verdigris); border-right: 4px solid var(--verdigris); background: linear-gradient(90deg, rgba(59,36,70,.22), transparent, rgba(184,67,47,.16)); }
.taboo-mark { position: absolute; left: var(--x); top: var(--y); color: var(--chalk); background: var(--cinnabar); padding: .7rem .9rem; border-radius: 999px; font-size: .62rem; opacity: .12; transform: scale(.75) rotate(-6deg); transition: opacity .25s ease, transform .25s ease; }
.taboo-mark.revealed { opacity: 1; transform: scale(1) rotate(2deg); }

.witness-orbit { right: 9vw; width: min(44vw, 520px); aspect-ratio: 1; border: 2px dotted var(--saffron); border-radius: 50%; animation: slowTurn 38s linear infinite reverse; }
.oath-center { position: absolute; inset: 29%; display: grid; place-items: center; text-align: center; border-radius: 50%; background: var(--vellum); color: var(--plum); font: 700 2rem/1 var(--display); }
.witness-orbit span { position: absolute; color: var(--chalk); font-size: .65rem; }
.witness-orbit span:nth-of-type(1) { left: 42%; top: -1rem; }
.witness-orbit span:nth-of-type(2) { right: -2rem; top: 48%; }
.witness-orbit span:nth-of-type(3) { left: 39%; bottom: -1rem; }
.witness-orbit span:nth-of-type(4) { left: -1.4rem; top: 48%; }

.loose-threads { left: 8vw; bottom: 19vh; width: 46vw; height: 32vh; }
.loose-threads::before, .loose-threads::after { content: ""; position: absolute; inset: 50% 0 auto; height: 5px; background: var(--saffron); border-radius: 99px; transform-origin: left; }
.loose-threads::before { transform: rotate(-12deg); }
.loose-threads::after { transform: rotate(15deg); background: var(--verdigris); }
.loose-threads span { position: absolute; color: var(--ink); background: var(--chalk); padding: .7rem .9rem; border: 2px solid var(--saffron); border-radius: 999px; font-size: .65rem; }
.loose-threads span:nth-child(1) { left: 8%; top: 12%; }
.loose-threads span:nth-child(2) { right: 18%; top: 8%; }
.loose-threads span:nth-child(3) { left: 24%; bottom: 5%; }
.loose-threads span:nth-child(4) { right: 4%; bottom: 16%; }

@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes slowTurn { to { transform: rotate(360deg); } }
@keyframes bow { 50% { transform: translateY(1.2rem) rotate(10deg); } }
@keyframes sealPulse { 50% { transform: rotate(8deg) scale(1.06); } }
@keyframes smokeDrift { to { transform: translate(8vw, -4vh) scale(1.2); } }

@media (max-width: 820px) {
  .legend-charm { display: none; }
  .artifact, .vellum-title { width: 88vw; padding: 1.6rem; }
  .hands-stage, .seating-diagram, .mask-theater, .taboo-field, .witness-orbit, .loose-threads { opacity: .55; transform: scale(.82); transform-origin: center; }
  .mask-theater { right: 2vw; flex-direction: column; }
  .taboo-field, .loose-threads { width: 82vw; left: 6vw; }
}