:root {
  --deep: #16070B;
  --burgundy: #4A0F1F;
  --blood: #7B1E2F;
  --bone: #E8DDC7;
  --brass: #B08A4A;
  --green: #7DFFB2;
  --violet: #332B45;
  /* Micro-label font: Roboto Condense Condensed** from Google Fonts for clause IDs. */
  --display: "Oswald", "Roboto Condensed", Impact, sans-serif;
  --serif: "Libre Baskerville", Georgia, serif;
  --micro: "Roboto Condensed", Arial Narrow, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--deep);
  color: var(--bone);
  font-family: var(--serif);
}

.marble-field,
.scan-veil,
.archive-spine {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.marble-field {
  z-index: -3;
  background:
    radial-gradient(circle at 50% 18%, rgba(176, 138, 74, .09), transparent 18rem),
    radial-gradient(circle at 14% 72%, rgba(123, 30, 47, .34), transparent 22rem),
    radial-gradient(circle at 82% 56%, rgba(51, 43, 69, .42), transparent 24rem),
    linear-gradient(116deg, transparent 0 39%, rgba(232, 221, 199, .11) 39.25%, transparent 39.9% 58%, rgba(176, 138, 74, .09) 58.2%, transparent 58.7%),
    linear-gradient(64deg, transparent 0 23%, rgba(232, 221, 199, .08) 23.15%, transparent 23.7% 66%, rgba(125, 255, 178, .045) 66.25%, transparent 66.9%),
    linear-gradient(155deg, var(--deep), #0d0407 45%, var(--burgundy));
}

.marble-field::before,
.marble-field::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    repeating-linear-gradient(104deg, transparent 0 74px, rgba(232, 221, 199, .08) 75px, transparent 77px),
    repeating-linear-gradient(37deg, transparent 0 118px, rgba(123, 30, 47, .18) 119px, transparent 123px);
  mix-blend-mode: screen;
  opacity: .32;
  transform: rotate(-3deg);
}

.marble-field::after {
  opacity: .16;
  filter: blur(6px);
  transform: rotate(7deg) scale(1.1);
}

.scan-veil {
  z-index: 20;
  height: 16vh;
  background: linear-gradient(to bottom, transparent, rgba(125, 255, 178, .22), transparent);
  box-shadow: 0 0 70px rgba(125, 255, 178, .18);
  transform: translateY(-120%);
  animation: scanPass 6.5s ease-in-out 1s infinite;
  opacity: .6;
}

.archive-spine {
  z-index: -1;
  width: 1px;
  left: 50%;
  right: auto;
  background: linear-gradient(to bottom, transparent, rgba(176, 138, 74, .4), rgba(125, 255, 178, .25), rgba(176, 138, 74, .25), transparent);
}

.chamber {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 8vh 5vw;
  isolation: isolate;
}

.chamber::before {
  content: attr(data-chamber);
  position: absolute;
  top: 7vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--micro);
  color: rgba(125, 255, 178, .52);
  letter-spacing: .45em;
  font-size: .8rem;
}

.evidence-panel {
  position: relative;
  width: min(760px, 88vw);
  padding: clamp(2rem, 5vw, 4.6rem);
  background:
    linear-gradient(135deg, rgba(232, 221, 199, .07), transparent 30%),
    radial-gradient(circle at 50% 0, rgba(176, 138, 74, .18), transparent 48%),
    linear-gradient(145deg, rgba(74, 15, 31, .88), rgba(22, 7, 11, .92));
  border: 1px solid rgba(176, 138, 74, .42);
  box-shadow: 0 42px 95px rgba(0, 0, 0, .56), inset 0 0 0 1px rgba(232, 221, 199, .07), inset 0 -30px 70px rgba(22, 7, 11, .65);
  transform: translateY(42px) scale(.975);
  opacity: 0;
  transition: opacity .8s ease, transform .8s cubic-bezier(.18, 1.3, .32, 1);
}

.chamber.active .evidence-panel,
.threshold.active .decree-iris,
.threshold.active .threshold-note,
.city.active .city-caption {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.decree-iris {
  width: min(640px, 86vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  opacity: 0;
  transform: translateY(50px) scale(.96);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2, 1.35, .26, 1);
}

.iris-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(176, 138, 74, .46);
  box-shadow: inset 0 0 44px rgba(22, 7, 11, .8), 0 0 55px rgba(125, 255, 178, .06);
}

.ring-a { inset: 2%; animation: rotateSeal 42s linear infinite; }
.ring-b { inset: 13%; border-style: dashed; border-color: rgba(232, 221, 199, .28); animation: rotateSeal 34s linear infinite reverse; }
.ring-c { inset: 25%; border-color: rgba(123, 30, 47, .78); animation: pulseIris 5s ease-in-out infinite; }

.wordmark {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--display);
  color: var(--bone);
  font-size: clamp(2.4rem, 10vw, 8.5rem);
  line-height: .86;
  letter-spacing: -.035em;
  text-align: center;
  text-shadow: 0 8px 0 rgba(22, 7, 11, .85), 0 0 28px rgba(176, 138, 74, .2);
}

.wordmark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(-70px) scaleY(1.18);
}

.wordmark.entered span { animation: typeDrop .74s cubic-bezier(.16, 1.42, .28, 1) forwards; }
.wordmark span:nth-child(2) { animation-delay: .04s; }
.wordmark span:nth-child(3) { animation-delay: .08s; }
.wordmark span:nth-child(4) { animation-delay: .12s; }
.wordmark span:nth-child(5) { animation-delay: .16s; }
.wordmark span:nth-child(6) { animation-delay: .2s; }
.wordmark span:nth-child(7) { animation-delay: .24s; }
.wordmark span:nth-child(8) { animation-delay: .28s; }
.wordmark span:nth-child(9) { animation-delay: .32s; }
.wordmark span:nth-child(10) { animation-delay: .36s; }
.wordmark span:nth-child(11) { animation-delay: .4s; }
.wordmark span:nth-child(12) { animation-delay: .44s; }
.wordmark span:nth-child(13) { animation-delay: .48s; }
.wordmark span:nth-child(14) { animation-delay: .52s; }
.wordmark span:nth-child(15) { animation-delay: .56s; }

.threshold-note,
.city-caption {
  position: absolute;
  bottom: 10vh;
  width: min(720px, 84vw);
  text-align: center;
  color: rgba(232, 221, 199, .76);
  line-height: 1.8;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease .4s, transform .8s ease .4s;
}

.orbital-labels span,
.holo-label,
.checkpoint {
  font-family: var(--micro);
  color: var(--green);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(125, 255, 178, .46);
}

.orbital-labels span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: .72rem;
  opacity: .68;
  animation: labelDrift 6s ease-in-out infinite alternate;
}
.orbital-labels span:nth-child(1) { transform: translate(-21rem, -12rem) rotate(-8deg); }
.orbital-labels span:nth-child(2) { transform: translate(13rem, -15rem) rotate(7deg); animation-delay: -1s; }
.orbital-labels span:nth-child(3) { transform: translate(-18rem, 13rem) rotate(9deg); animation-delay: -2s; }
.orbital-labels span:nth-child(4) { transform: translate(14rem, 12rem) rotate(-6deg); animation-delay: -3s; }

.leaf-vine,
.creeping-leaves span {
  position: absolute;
  background: rgba(40, 61, 42, .88);
  filter: drop-shadow(0 0 10px rgba(125, 255, 178, .13));
}

.leaf-vine { width: 37%; height: 3px; border-radius: 999px; transform-origin: left center; }
.vine-a { left: 18%; top: 66%; transform: rotate(-24deg); animation: vineGrow 8s ease-in-out infinite alternate; }
.vine-b { right: 14%; top: 35%; transform: rotate(158deg); animation: vineGrow 7s ease-in-out -1.5s infinite alternate; }
.leaf-vine::before, .leaf-vine::after, .creeping-leaves span::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 10px;
  border-radius: 100% 0 100% 0;
  background: rgba(48, 75, 48, .95);
}
.leaf-vine::before { left: 35%; top: -11px; transform: rotate(28deg); }
.leaf-vine::after { left: 68%; top: 2px; transform: rotate(208deg); }

.kicker {
  margin: 0 0 .9rem;
  font-family: var(--micro);
  color: var(--brass);
  letter-spacing: .32em;
  text-transform: uppercase;
  font-size: .82rem;
}

h2 {
  margin: 0 0 1.4rem;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 6vw, 5rem);
  line-height: .95;
  color: var(--bone);
}

.serif-fragment, blockquote, .footnote-text {
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.85;
  color: rgba(232, 221, 199, .82);
}

.brass-ruler {
  position: absolute;
  left: 7%;
  right: 7%;
  height: 12px;
  background: repeating-linear-gradient(90deg, rgba(176, 138, 74, .72) 0 1px, transparent 1px 20px), linear-gradient(var(--brass), var(--brass));
  opacity: .5;
}
.brass-ruler.top { top: 22px; }
.brass-ruler.bottom { bottom: 22px; }

.holo-label { position: absolute; top: 50%; font-size: .72rem; opacity: .72; animation: flicker 3s linear infinite; }
.holo-label.left { left: 8vw; transform: rotate(-90deg); }
.holo-label.right { right: 8vw; transform: rotate(90deg); }

.clause-stack, .drawer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2rem;
}

button {
  cursor: pointer;
  border: 1px solid rgba(176, 138, 74, .45);
  background: rgba(22, 7, 11, .55);
  color: var(--bone);
  font-family: var(--micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .75rem 1rem;
}

button.active, button.open, button:hover {
  color: var(--green);
  border-color: rgba(125, 255, 178, .7);
  box-shadow: 0 0 22px rgba(125, 255, 178, .12), inset 0 0 18px rgba(125, 255, 178, .08);
}

.definition-drawer {
  margin-top: 1rem;
  padding: 1rem;
  border-left: 2px solid var(--green);
  background: rgba(51, 43, 69, .35);
  color: rgba(232, 221, 199, .88);
  line-height: 1.7;
}

.city { align-content: center; gap: 2rem; }
.city-diagram {
  width: min(620px, 86vw);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 0;
  overflow: hidden;
  transform-origin: center;
}
.city-diagram::before, .city-diagram::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(176, 138, 74, .45);
}
.city-diagram::after { inset: 22%; border-style: dashed; border-color: rgba(125, 255, 178, .25); }
.seal-core { position: absolute; inset: 33%; border-radius: 50%; border: 1px solid var(--brass); box-shadow: 0 0 42px rgba(125, 255, 178, .11); }
.tower, .court, .gate, .block { position: absolute; border: 1px solid rgba(176, 138, 74, .8); }
.tower { left: 47%; top: 15%; width: 6%; height: 70%; }
.court { left: 20%; top: 55%; width: 60%; height: 14%; }
.gate { left: 30%; top: 31%; width: 40%; height: 20%; border-radius: 50% 50% 0 0; }
.block { left: 38%; top: 72%; width: 24%; height: 12%; }
.street { position: absolute; background: rgba(232, 221, 199, .28); }
.horizontal { height: 1px; left: 10%; right: 10%; }
.vertical { width: 1px; top: 10%; bottom: 10%; }
.h1 { top: 39%; } .h2 { top: 62%; } .v1 { left: 41%; } .v2 { left: 59%; }
.checkpoint { position: absolute; font-size: .64rem; opacity: .72; }
.c1 { top: 24%; left: 13%; } .c2 { top: 35%; right: 8%; } .c3 { bottom: 29%; left: 9%; } .c4 { bottom: 18%; right: 14%; }
.city-caption { position: static; }

.garden-slab { overflow: hidden; }
.crack-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent, rgba(232, 221, 199, .24), rgba(125, 255, 178, .2), transparent); transform: rotate(13deg); }
.glossary-fragments { display: grid; gap: 1rem; margin-top: 2rem; }
figure { margin: 0; padding: 1rem; background: rgba(22, 7, 11, .38); border: 1px solid rgba(176, 138, 74, .22); }
figcaption { font-family: var(--display); color: var(--brass); text-transform: uppercase; letter-spacing: .12em; }
blockquote { margin: .5rem 0 0; }
.creeping-leaves span { width: 88px; height: 3px; left: 49%; top: 54%; transform-origin: left center; animation: vineGrow 5.5s ease-in-out infinite alternate; }
.creeping-leaves span:nth-child(1) { transform: rotate(14deg); }
.creeping-leaves span:nth-child(2) { transform: rotate(-34deg); animation-delay: -.8s; }
.creeping-leaves span:nth-child(3) { transform: rotate(58deg); animation-delay: -1.6s; }
.creeping-leaves span:nth-child(4) { transform: rotate(128deg); animation-delay: -2.4s; }
.creeping-leaves span:nth-child(5) { transform: rotate(205deg); animation-delay: -3.2s; }

.reading-table { text-align: center; }
.drawer-grid { justify-content: center; }
.footnote-text { min-height: 5rem; margin: 2rem auto 0; max-width: 44rem; color: rgba(125, 255, 178, .82); }

.chapter-rail {
  position: fixed;
  right: 2vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: .6rem;
}
.chapter-rail button { width: 42px; height: 42px; padding: 0; border-radius: 50%; }

@keyframes typeDrop {
  0% { opacity: 0; transform: translateY(-70px) scaleY(1.22); }
  62% { opacity: 1; transform: translateY(10px) scaleY(.88); }
  82% { transform: translateY(-5px) scaleY(1.06); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes scanPass { 0%, 15% { transform: translateY(-120%); } 55% { transform: translateY(680%); } 100% { transform: translateY(680%); } }
@keyframes rotateSeal { to { transform: rotate(360deg); } }
@keyframes pulseIris { 50% { transform: scale(.92); border-color: rgba(125, 255, 178, .36); } }
@keyframes labelDrift { to { margin-top: 9px; margin-left: -6px; opacity: .9; } }
@keyframes flicker { 0%, 100% { opacity: .52; } 8%, 12%, 72% { opacity: .95; } 10%, 76% { opacity: .25; } }
@keyframes vineGrow { from { clip-path: inset(0 82% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 760px) {
  .holo-label { display: none; }
  .chapter-rail { right: 50%; top: auto; bottom: 1rem; transform: translateX(50%); grid-template-columns: repeat(5, 1fr); }
  .chapter-rail button { width: 34px; height: 34px; }
  .orbital-labels span { display: none; }
  .chamber { padding: 7vh 1rem; }
  .evidence-panel { width: 94vw; }
}