:root {
  /* IBM Plex Mono** from Google Fonts sparingly for coordinate labels */
  --velvet: #130A2A;
  --sapphire: #153A6B;
  --emerald: #0F6B55;
  --amethyst: #6E2FA3;
  --ruby: #9D1E4D;
  --gold: #E0B95B;
  --opal: #F4E6C3;
  --ink: #07040F;
  --font-main: "Commissioner", Inter, system-ui, sans-serif;
  --font-ceremony: "Cormorant Garamond", Cormorant, Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  color: var(--opal);
  font-family: var(--font-main);
  background:
    radial-gradient(circle at 18% 8%, rgba(110, 47, 163, 0.38), transparent 34rem),
    radial-gradient(circle at 84% 22%, rgba(157, 30, 77, 0.22), transparent 30rem),
    linear-gradient(180deg, var(--ink) 0%, var(--velvet) 26%, #0c061b 62%, var(--ink) 100%);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.fixed-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.survey-grid {
  position: absolute;
  inset: -10%;
  opacity: 0.26;
  transform: perspective(900px) rotateX(58deg) translateY(-10%);
  background-image:
    linear-gradient(rgba(244, 230, 195, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 230, 195, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 80%);
}

.grid-secondary {
  opacity: 0.14;
  transform: perspective(900px) rotateX(62deg) rotateZ(-8deg) translateY(8%);
  background-size: 144px 144px;
}

.jewel-glint {
  position: absolute;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 185, 91, 0.65), rgba(224, 185, 91, 0.08) 34%, transparent 68%);
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: glintFloat 9s ease-in-out infinite alternate;
}
.glint-a { left: 9%; top: 18%; }
.glint-b { right: 12%; top: 44%; animation-delay: -3s; background: radial-gradient(circle, rgba(15, 107, 85, 0.62), transparent 68%); }
.glint-c { left: 52%; bottom: 9%; animation-delay: -6s; background: radial-gradient(circle, rgba(157, 30, 77, 0.5), transparent 68%); }

.chamber-index {
  position: fixed;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 0.9rem;
}

.index-seal {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  color: rgba(244, 230, 195, 0.54);
  background: rgba(7, 4, 15, 0.56);
  border: 1px solid rgba(224, 185, 91, 0.32);
  clip-path: polygon(50% 0, 86% 14%, 100% 50%, 86% 86%, 50% 100%, 14% 86%, 0 50%, 14% 14%);
  transition: transform 0.4s ease, color 0.4s ease, background 0.4s ease;
}
.index-seal span { font-family: var(--font-mono); font-size: 0.7rem; }
.index-seal.active, .index-seal:hover { transform: rotate(22deg) scale(1.1); color: var(--gold); background: rgba(19, 10, 42, 0.9); }

.continuity-paths {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 500vh;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.route, .map-line, .grand-rosette svg * {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.route {
  stroke-width: 5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 9px rgba(224, 185, 91, 0.45));
}
.route-gold { stroke: var(--gold); }
.route-ruby { stroke: rgba(157, 30, 77, 0.86); }
.route-emerald { stroke: rgba(15, 107, 85, 0.86); }
.route-branch { stroke-width: 3; opacity: 0.72; }

.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 8rem clamp(1.5rem, 6vw, 7rem);
  isolation: isolate;
  overflow: hidden;
  z-index: 1;
}
.scene::before {
  content: "";
  position: absolute;
  inset: 7vh 5vw;
  border: 1px solid rgba(244, 230, 195, 0.08);
  background: linear-gradient(135deg, rgba(244, 230, 195, 0.035), transparent 40%, rgba(224, 185, 91, 0.025));
  clip-path: polygon(2% 0, 100% 0, 96% 92%, 76% 100%, 0 98%, 0 9%);
  z-index: -1;
}

.atrium { min-height: 112vh; place-items: center; text-align: center; }
.hero-core { position: relative; z-index: 6; max-width: 74rem; }
.mono-kicker {
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 1.1vw, 0.86rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
h1, h2 { margin: 0; font-family: var(--font-main); line-height: 0.92; }
h1 {
  font-size: clamp(4.1rem, 13vw, 14rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--opal);
  text-shadow: 0 0 2px var(--gold), 0 0 38px rgba(224, 185, 91, 0.26), 0 24px 70px rgba(7, 4, 15, 0.84);
}
h2 {
  font-size: clamp(2.8rem, 6vw, 7.4rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  max-width: 13ch;
}
p { font-weight: 300; line-height: 1.75; font-size: clamp(1rem, 1.4vw, 1.32rem); }
.ceremonial, .quote {
  margin: 1.6rem auto 0;
  max-width: 52rem;
  font-family: var(--font-ceremony);
  font-size: clamp(1.45rem, 2.4vw, 2.5rem);
  line-height: 1.25;
  color: rgba(244, 230, 195, 0.9);
}

.grand-rosette {
  position: absolute;
  width: min(74vw, 48rem);
  aspect-ratio: 1;
  z-index: 2;
  opacity: 0.72;
  animation: rosetteTurn 42s linear infinite;
}
.grand-rosette svg { width: 100%; height: 100%; overflow: visible; }
.grand-rosette polygon, .grand-rosette circle { stroke: rgba(224, 185, 91, 0.75); stroke-width: 1.6; }
.grand-rosette line { stroke: rgba(244, 230, 195, 0.22); stroke-width: 1; }

.collage-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.artifact {
  position: absolute;
  display: grid;
  place-items: center;
  color: rgba(19, 10, 42, 0.72);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(244, 230, 195, 0.88), rgba(224, 185, 91, 0.2));
  border: 1px solid rgba(224, 185, 91, 0.38);
  box-shadow: 0 1.3rem 4rem rgba(7, 4, 15, 0.48);
  mix-blend-mode: screen;
}
.ballot-edge { left: 13%; top: 21%; width: 12rem; height: 16rem; clip-path: polygon(0 0, 92% 0, 100% 16%, 88% 100%, 0 94%); transform: rotate(-12deg); }
.vellum-map { right: 11%; top: 18%; width: 18rem; height: 12rem; clip-path: polygon(8% 0, 100% 10%, 91% 100%, 0 80%); transform: rotate(9deg); background-image: linear-gradient(rgba(21, 58, 107, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 58, 107, 0.16) 1px, transparent 1px), linear-gradient(135deg, rgba(244, 230, 195, 0.72), rgba(110, 47, 163, 0.22)); background-size: 24px 24px, 24px 24px, auto; }
.wax-orbit { right: 23%; bottom: 18%; width: 10rem; height: 10rem; border-radius: 50%; background: radial-gradient(circle, rgba(157, 30, 77, 0.88), rgba(19, 10, 42, 0.45)); color: var(--opal); transform: rotate(18deg); }
.assembly-chart { left: 20%; bottom: 16%; width: 16rem; height: 10rem; clip-path: polygon(0 12%, 100% 0, 94% 100%, 10% 86%); transform: rotate(7deg); background-image: radial-gradient(circle at 20% 30%, rgba(19, 10, 42, 0.38) 0 5px, transparent 6px), radial-gradient(circle at 50% 45%, rgba(19, 10, 42, 0.28) 0 5px, transparent 6px), radial-gradient(circle at 78% 35%, rgba(19, 10, 42, 0.34) 0 5px, transparent 6px), linear-gradient(135deg, rgba(244, 230, 195, 0.8), rgba(15, 107, 85, 0.2)); }
.scroll-inscription { position: absolute; bottom: 3.5rem; left: 50%; transform: translateX(-50%); z-index: 7; font-family: var(--font-ceremony); color: rgba(224, 185, 91, 0.75); font-size: 1.2rem; font-style: italic; }

.voices { background: radial-gradient(circle at 78% 50%, rgba(21, 58, 107, 0.36), transparent 33rem); }
.borders { background: radial-gradient(circle at 24% 52%, rgba(15, 107, 85, 0.28), transparent 35rem); }
.futures { background: radial-gradient(circle at 50% 52%, rgba(110, 47, 163, 0.34), transparent 37rem); }
.table { background: radial-gradient(circle at 50% 56%, rgba(224, 185, 91, 0.16), transparent 39rem); }

.scene-copy { position: relative; z-index: 8; max-width: 44rem; }
.scene-copy p:not(.mono-kicker):not(.quote) { max-width: 38rem; color: rgba(244, 230, 195, 0.74); }
.left-island { margin-left: 4vw; }
.right-island { justify-self: end; margin-right: 6vw; }
.center-island { justify-self: center; text-align: center; }
.center-island h2 { margin: auto; }

.voice-constellation {
  position: absolute;
  right: 10vw;
  top: 18vh;
  width: min(44vw, 37rem);
  aspect-ratio: 1;
  z-index: 6;
  border: 1px solid rgba(224, 185, 91, 0.18);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 230, 195, 0.04), transparent 65%);
}
.voice-constellation::before, .voice-constellation::after { content: ""; position: absolute; inset: 16%; border: 1px solid rgba(244, 230, 195, 0.12); border-radius: 50%; }
.voice-constellation::after { inset: 31%; }
.jewel-node {
  position: absolute;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(244, 230, 195, 0.62);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 22px currentColor;
  transition: transform 0.35s ease, filter 0.35s ease;
}
.jewel-node:hover { transform: scale(1.48); filter: brightness(1.45); }
.node-ruby { left: 18%; top: 28%; color: var(--ruby); background: var(--ruby); }
.node-topaz { right: 26%; top: 12%; color: var(--gold); background: var(--gold); }
.node-emerald { right: 13%; bottom: 30%; color: var(--emerald); background: var(--emerald); }
.node-amethyst { left: 40%; bottom: 10%; color: var(--amethyst); background: var(--amethyst); }
.node-sapphire { left: 8%; bottom: 42%; color: var(--sapphire); background: var(--sapphire); }
.whisper-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0.8rem 1rem; font-family: var(--font-ceremony); font-size: 1.5rem; color: var(--gold); text-align: center; min-width: 15rem; }

.paper-stack { position: absolute; left: 7vw; bottom: 12vh; width: 20rem; height: 16rem; z-index: 4; opacity: 0.72; }
.paper { position: absolute; inset: 0; padding: 1.4rem; font-family: var(--font-mono); color: rgba(19, 10, 42, 0.72); background: rgba(244, 230, 195, 0.74); border: 1px solid rgba(224, 185, 91, 0.38); text-transform: uppercase; letter-spacing: 0.13em; }
.paper-one { transform: rotate(-9deg); clip-path: polygon(0 0, 100% 10%, 88% 100%, 8% 88%); }
.paper-two { transform: translate(3rem, 1.8rem) rotate(8deg); background: rgba(224, 185, 91, 0.34); clip-path: polygon(8% 0, 94% 5%, 100% 90%, 0 100%); }

.border-map { position: absolute; left: 7vw; width: min(54vw, 42rem); z-index: 5; filter: drop-shadow(0 0 18px rgba(224, 185, 91, 0.26)); }
.border-map svg { width: 100%; overflow: visible; }
.map-line { stroke: var(--gold); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.map-line.secondary { stroke: rgba(244, 230, 195, 0.42); stroke-width: 2; }
.coordinate-cluster { position: absolute; right: 9vw; bottom: 13vh; display: grid; gap: 0.7rem; z-index: 7; }
.coordinate-cluster span { font-family: var(--font-mono); color: rgba(244, 230, 195, 0.7); border-left: 2px solid var(--gold); padding-left: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; }

.future-gallery { position: absolute; inset: auto 7vw 7vh; display: grid; grid-template-columns: repeat(4, minmax(10rem, 1fr)); gap: 1rem; z-index: 7; }
.future-panel { min-height: 19rem; padding: 1.3rem; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(224, 185, 91, 0.28); clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 88%); box-shadow: 0 2rem 5rem rgba(7, 4, 15, 0.4); transform: translateY(var(--lift, 0)); transition: transform 0.7s ease; }
.future-panel:hover { transform: translateY(calc(var(--lift, 0) - 1.6rem)) rotate(1deg); }
.future-panel span { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: rgba(244, 230, 195, 0.76); font-size: 0.74rem; }
.future-panel strong { font-family: var(--font-ceremony); font-size: clamp(2rem, 3.2vw, 3.6rem); font-weight: 600; line-height: 0.9; }
.emerald-panel { --lift: -1.8rem; background: linear-gradient(150deg, rgba(15, 107, 85, 0.84), rgba(19, 10, 42, 0.8)); }
.ruby-panel { --lift: 1.4rem; background: linear-gradient(150deg, rgba(157, 30, 77, 0.84), rgba(19, 10, 42, 0.8)); }
.sapphire-panel { --lift: -0.6rem; background: linear-gradient(150deg, rgba(21, 58, 107, 0.9), rgba(19, 10, 42, 0.8)); }
.amethyst-panel { --lift: 2.2rem; background: linear-gradient(150deg, rgba(110, 47, 163, 0.86), rgba(19, 10, 42, 0.8)); }

.vaulted-table { position: relative; margin: auto; width: min(84vw, 58rem); aspect-ratio: 1.45; display: grid; place-items: center; z-index: 8; }
.table-ring { position: absolute; inset: 0; border: 1px solid rgba(224, 185, 91, 0.58); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(224, 185, 91, 0.14), transparent 55%); box-shadow: inset 0 0 80px rgba(224, 185, 91, 0.12), 0 0 80px rgba(7, 4, 15, 0.75); animation: tablePulse 6s ease-in-out infinite alternate; }
.table-ring::before, .table-ring::after { content: ""; position: absolute; inset: 11%; border: 1px dashed rgba(244, 230, 195, 0.2); border-radius: 50%; }
.table-ring::after { inset: 24%; border-style: solid; border-color: rgba(15, 107, 85, 0.3); }
.table-center { position: relative; max-width: 40rem; text-align: center; padding: 2rem; }
.table-center h2 { margin: auto; }
.table-center p:last-child { color: rgba(244, 230, 195, 0.76); }

[data-depth] { will-change: transform; }
.scene.in-view .map-line, .scene.in-view ~ .scene .map-line { animation: drawLine 2.8s ease forwards; }
.scene.in-view .grand-rosette polygon, .scene.in-view .grand-rosette circle { animation: drawLine 2.6s ease forwards; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes rosetteTurn { to { transform: rotate(360deg); } }
@keyframes tablePulse { from { transform: scale(0.985); } to { transform: scale(1.025); } }
@keyframes glintFloat { from { transform: translate3d(-1rem, -1rem, 0) scale(0.8); opacity: 0.35; } to { transform: translate3d(1.4rem, 1rem, 0) scale(1.15); opacity: 0.72; } }

@media (max-width: 860px) {
  .scene { padding: 6rem 1.2rem; }
  .chamber-index { right: 0.7rem; }
  .right-island, .left-island { justify-self: start; margin: 0; }
  .voice-constellation, .border-map { position: relative; width: 92vw; right: auto; left: auto; top: auto; margin-top: 3rem; }
  .paper-stack, .coordinate-cluster { display: none; }
  .future-gallery { position: relative; inset: auto; grid-template-columns: 1fr 1fr; margin-top: 3rem; }
  .future-panel { min-height: 13rem; }
  .artifact { opacity: 0.45; }
}

@media (max-width: 560px) {
  h1 { font-size: 3.2rem; }
  h2 { font-size: 2.4rem; }
  .future-gallery { grid-template-columns: 1fr; }
  .chamber-index { display: none; }
}