:root {
  /* DESIGN.md typography tokens: IBM Plex Sans Condensed** for exhibit labels; Space Grotesk** for body copy. */
  --ink: #080713;
  --parchment: #F1E8D2;
  --verdict-red: #D94A5A;
  --violet: #6B4CFF;
  --brass: #C79A3B;
  --chalk-blue: #BFD7EA;
  --display: "Cormorant Garamond", serif;
  --body: "Space Grotesk", sans-serif;
  --condensed: "IBM Plex Sans Condensed", sans-serif;
  --inter: "Inter", sans-serif;
  --design-condensed-token: "Condensed**";
  --design-grotesk-token: "Grotesk**";
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--parchment); overflow: hidden; }

body { font-family: var(--body); }

button { font: inherit; color: inherit; }

.theatre {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 118%, rgba(191, 215, 234, 0.16), transparent 44%),
    radial-gradient(circle at 28% 18%, rgba(107, 76, 255, 0.28), transparent 34%),
    radial-gradient(circle at 76% 22%, rgba(217, 74, 90, 0.13), transparent 30%),
    linear-gradient(180deg, #080713 0%, #111024 48%, #080713 100%);
}

.skygrain {
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image:
    linear-gradient(rgba(241, 232, 210, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 215, 234, .025) 1px, transparent 1px);
  background-size: 27px 27px, 41px 41px;
  pointer-events: none;
}

.spotlight { position: absolute; border-radius: 50%; filter: blur(22px); pointer-events: none; mix-blend-mode: screen; }
.spotlight-violet { width: 52vw; height: 76vh; left: 24vw; top: -18vh; background: radial-gradient(circle, rgba(107,76,255,.34), transparent 62%); transform: rotate(-12deg); }
.spotlight-blue { width: 42vw; height: 48vh; left: 8vw; bottom: -8vh; background: radial-gradient(circle, rgba(191,215,234,.18), transparent 68%); }

.tribunal-floor {
  position: absolute;
  left: 50%;
  bottom: -38vh;
  width: 120vmin;
  height: 120vmin;
  transform: translateX(-50%) rotate(var(--floor-rotation, 0deg));
  transition: transform 900ms cubic-bezier(.2,.84,.19,1);
}

.floor-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(191, 215, 234, .46); inset: 8%; box-shadow: inset 0 0 52px rgba(107,76,255,.08); }
.ring-two { inset: 23%; border-color: rgba(241, 232, 210, .24); }
.ring-three { inset: 38%; border-color: rgba(199, 154, 59, .42); border-style: solid; }
.chalk-axis { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: linear-gradient(transparent, rgba(191,215,234,.45), transparent); transform-origin: center; }
.axis-b { transform: rotate(60deg); }
.axis-c { transform: rotate(-60deg); }
.moot-compass { position: absolute; inset: 44%; border: 1px solid rgba(241,232,210,.22); border-radius: 50%; font-family: var(--condensed); text-transform: uppercase; letter-spacing: .15em; font-size: 1.4vmin; color: rgba(191,215,234,.7); }
.moot-compass span { position: absolute; }
.moot-compass span:nth-child(1) { top: -2.2em; left: 50%; transform: translateX(-50%); }
.moot-compass span:nth-child(2) { right: -5.2em; top: 50%; transform: translateY(-50%) rotate(90deg); }
.moot-compass span:nth-child(3) { bottom: -2.2em; left: 50%; transform: translateX(-50%) rotate(180deg); }
.moot-compass span:nth-child(4) { left: -3.7em; top: 50%; transform: translateY(-50%) rotate(-90deg); }

.docket-card {
  position: absolute;
  z-index: 8;
  left: clamp(22px, 5vw, 72px);
  top: clamp(20px, 6vh, 70px);
  width: min(430px, calc(100vw - 44px));
  padding: 28px 30px 30px;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(241,232,210,.96), rgba(191,215,234,.86));
  border: 1px solid rgba(199,154,59,.65);
  box-shadow: 0 28px 70px rgba(0,0,0,.42), 12px 12px 0 rgba(217,74,90,.26);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
  transition: transform 800ms cubic-bezier(.2,.84,.19,1), opacity 800ms ease;
}

.docket-card.is-filed { transform: translate(-8vw, 64vh) rotate(-13deg); opacity: .42; }
.docket-number, .scene-meta, .exhibit-label, .procedural-note, .chapter-dot { font-family: var(--condensed); text-transform: uppercase; letter-spacing: .16em; }
.docket-number { color: var(--verdict-red); font-size: 13px; font-weight: 700; }
.docket-card h1 { font-family: var(--display); margin: 8px 0 6px; font-size: clamp(72px, 10vw, 120px); line-height: .78; font-weight: 600; letter-spacing: -.06em; }
.docket-card p { margin: 0 0 24px; font-size: 16px; line-height: 1.48; }

.stamp-button {
  position: relative;
  border: 2px solid var(--verdict-red);
  background: transparent;
  color: var(--verdict-red);
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  padding: 13px 17px;
  cursor: pointer;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 rgba(217,74,90,.18);
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
.stamp-button:hover { transform: rotate(1deg) translateY(-2px); background: var(--verdict-red); color: var(--parchment); }
.stamp-button.is-stamped::after { content: "STAMPED"; position: absolute; inset: -18px -12px auto auto; color: var(--verdict-red); border: 2px solid var(--verdict-red); padding: 4px 8px; transform: rotate(14deg); opacity: .8; }

.chamber { position: absolute; inset: 0; perspective: 1100px; transform-style: preserve-3d; }
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 40px, -120px) rotateY(16deg) scale(.94);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.84,.19,1);
}
.scene.is-active { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0) rotateY(0deg) scale(1); }
.scene-meta { position: absolute; top: 24px; right: 30px; color: var(--chalk-blue); font-size: 13px; opacity: .82; }

.argument-card {
  position: absolute;
  z-index: 4;
  right: clamp(22px, 9vw, 132px);
  top: 24vh;
  width: min(520px, 48vw);
  padding: clamp(26px, 4vw, 48px);
  background: rgba(8, 7, 19, .72);
  border: 1px solid rgba(191,215,234,.34);
  box-shadow: 0 30px 90px rgba(0,0,0,.5), inset 0 0 0 1px rgba(241,232,210,.06);
  backdrop-filter: blur(8px);
}
.clipped-card { clip-path: polygon(0 0, 92% 0, 100% 9%, 100% 100%, 8% 100%, 0 91%); }
.narrow-card { right: auto; left: 15vw; width: min(430px, 42vw); top: 28vh; border-color: rgba(199,154,59,.52); }
.tall-card { right: 12vw; top: 17vh; width: min(460px, 44vw); min-height: 54vh; border-color: rgba(107,76,255,.68); }
.gallery-card { left: 50%; top: 18vh; transform: translateX(-50%); width: min(650px, 62vw); text-align: center; }
.cloud-card { left: 10vw; right: auto; top: 25vh; width: min(500px, 45vw); border-color: rgba(191,215,234,.58); }
.final-card { left: 50%; top: 22vh; transform: translateX(-50%); width: min(700px, 70vw); text-align: center; border-color: rgba(217,74,90,.5); }
.exhibit-label { display: block; margin-bottom: 18px; color: var(--brass); font-size: 12px; }
.argument-card h2 { font-family: var(--display); margin: 0 0 16px; font-size: clamp(46px, 7vw, 94px); line-height: .86; font-weight: 500; letter-spacing: -.035em; color: var(--parchment); }
.argument-card p { margin: 0; color: rgba(241,232,210,.82); font-size: clamp(16px, 1.7vw, 22px); line-height: 1.55; }

.lectern { position: absolute; z-index: 5; left: 47%; bottom: 18vh; width: 120px; height: 190px; transform: translateX(-50%); transition: transform 800ms cubic-bezier(.2,.84,.19,1); }
.lectern::before { content: ""; position: absolute; left: 17px; top: 40px; width: 86px; height: 86px; background: linear-gradient(145deg, rgba(241,232,210,.92), rgba(199,154,59,.72)); clip-path: polygon(0 18%, 100% 0, 88% 100%, 11% 100%); box-shadow: 0 18px 45px rgba(0,0,0,.4); }
.lectern::after { content: ""; position: absolute; left: 52px; top: 117px; width: 15px; height: 66px; background: var(--brass); box-shadow: -30px 67px 0 -4px var(--chalk-blue), 30px 67px 0 -4px var(--chalk-blue); }
.lectern-red::before { border-top: 7px solid var(--verdict-red); }
.lectern-gold { left: 68%; transform: translateX(-50%) rotate(8deg); }
.lectern-violet { left: 28%; bottom: 15vh; transform: translateX(-50%) rotate(-8deg); }
.lectern-violet::before { border-top: 7px solid var(--violet); }
.microphone { position: absolute; left: 54px; top: 2px; width: 10px; height: 48px; border-left: 2px solid var(--chalk-blue); transform: rotate(-22deg); }
.microphone::after { content: ""; position: absolute; left: -8px; top: -9px; width: 18px; height: 11px; border-radius: 50%; background: var(--chalk-blue); }
.nameplate { position: absolute; z-index: 2; left: 28px; top: 70px; width: 64px; padding: 4px 0; text-align: center; font-family: var(--condensed); color: var(--ink); background: var(--brass); font-size: 13px; font-weight: 700; letter-spacing: .12em; }

.speech-bubble { position: absolute; padding: 15px 18px; border: 1px solid rgba(241,232,210,.6); border-radius: 24px 24px 24px 4px; color: var(--ink); background: var(--chalk-blue); font-family: var(--inter); font-weight: 700; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.bubble-left { left: 18vw; top: 22vh; transform: rotate(-7deg); }
.bubble-right { right: 18vw; bottom: 18vh; transform: rotate(6deg); background: var(--verdict-red); color: var(--parchment); }

.redaction-stack { position: absolute; right: 14vw; top: 22vh; width: 320px; transform: rotate(-6deg); }
.redaction-stack i { display: block; height: 24px; margin: 24px 0; background: var(--ink); border: 1px solid rgba(241,232,210,.2); box-shadow: 12px 12px 0 rgba(217,74,90,.34); }
.punctuation-confetti { position: absolute; inset: 10vh 8vw auto auto; width: 50vw; height: 70vh; pointer-events: none; }
.punctuation-confetti b { position: absolute; font-family: var(--display); color: var(--brass); font-size: clamp(44px, 8vw, 112px); animation: drift 5.8s ease-in-out infinite alternate; }
.punctuation-confetti b:nth-child(1){left:5%;top:14%;color:var(--verdict-red)} .punctuation-confetti b:nth-child(2){left:34%;top:4%;animation-delay:.4s} .punctuation-confetti b:nth-child(3){left:55%;top:30%;color:var(--chalk-blue);animation-delay:.8s} .punctuation-confetti b:nth-child(4){left:20%;top:57%;color:var(--violet);animation-delay:1.1s} .punctuation-confetti b:nth-child(5){left:78%;top:62%;animation-delay:.2s} .punctuation-confetti b:nth-child(6){left:70%;top:8%;color:var(--parchment);animation-delay:1.5s}
@keyframes drift { from { transform: translateY(-8px) rotate(-8deg); opacity: .45; } to { transform: translateY(18px) rotate(12deg); opacity: .95; } }

.gallery-rail { position: absolute; left: 14vw; right: 14vw; bottom: 22vh; height: 80px; border-top: 2px solid rgba(199,154,59,.72); }
.gallery-rail span, .balcony span { display: inline-block; width: 26px; height: 34px; margin: 20px 14px 0; background: linear-gradient(var(--chalk-blue), var(--parchment)); clip-path: polygon(50% 0,100% 34%,83% 100%,17% 100%,0 34%); opacity: .65; }
.folded-brief { position: absolute; left: 12vw; top: 28vh; padding: 48px 28px; color: var(--ink); background: var(--parchment); font-family: var(--condensed); letter-spacing: .18em; box-shadow: 12px 12px 0 rgba(191,215,234,.24); transform: rotate(-12deg); }
.folded-brief::after { content: ""; position: absolute; right: 0; top: 0; border-left: 34px solid transparent; border-bottom: 34px solid rgba(199,154,59,.62); }

.cloud-witness { position: absolute; right: 13vw; top: 18vh; width: 360px; height: 180px; filter: drop-shadow(0 24px 38px rgba(191,215,234,.22)); animation: hoverCloud 4.7s ease-in-out infinite alternate; }
.cloud-witness span { position: absolute; background: rgba(191,215,234,.82); border-radius: 50%; }
.cloud-witness span:nth-child(1){width:190px;height:110px;left:0;top:54px} .cloud-witness span:nth-child(2){width:170px;height:140px;left:95px;top:16px;background:rgba(241,232,210,.8)} .cloud-witness span:nth-child(3){width:150px;height:95px;left:220px;top:68px}
@keyframes hoverCloud { to { transform: translateY(20px) translateX(-12px); } }
.chalk-arrow { position: absolute; right: 36vw; bottom: 24vh; font-size: 120px; color: var(--chalk-blue); transform: rotate(-19deg); opacity: .72; }
.secondary-stamp { margin-top: 28px; color: var(--chalk-blue); border-color: var(--chalk-blue); box-shadow: 4px 4px 0 rgba(191,215,234,.18); }
.secondary-stamp:hover { background: var(--chalk-blue); color: var(--ink); }

.balcony { position: absolute; z-index: 2; top: 11vh; width: 82px; min-height: 70vh; border-inline: 1px solid rgba(241,232,210,.13); opacity: .7; }
.balcony-left { left: 0; } .balcony-right { right: 0; }
.balcony span { display: block; margin: 34px auto; transform: scale(.72); }

.chapter-rail { position: absolute; z-index: 10; right: clamp(18px, 3vw, 42px); top: 50%; transform: translateY(-50%); display: grid; gap: 13px; }
.chapter-dot { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(191,215,234,.45); background: rgba(8,7,19,.45); color: var(--chalk-blue); cursor: pointer; transition: transform 220ms ease, background 220ms ease, color 220ms ease, border-color 220ms ease; }
.chapter-dot span { font-size: 12px; }
.chapter-dot.is-active { transform: translateX(-10px) rotate(-12deg); background: var(--parchment); color: var(--ink); border-color: var(--brass); }
.procedural-note { position: absolute; z-index: 9; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 22px; align-items: center; color: rgba(241,232,210,.74); font-size: 12px; white-space: nowrap; }
.procedural-note span { color: var(--chalk-blue); }
.procedural-note em { font-style: normal; color: rgba(241,232,210,.42); }

@media (max-width: 820px) {
  html, body { overflow: auto; }
  .theatre { min-height: 100svh; overflow: hidden; }
  .docket-card { position: relative; left: 18px; top: 18px; margin-bottom: 30vh; width: calc(100vw - 36px); }
  .scene-meta { top: 160px; right: 20px; }
  .argument-card, .narrow-card, .tall-card, .gallery-card, .cloud-card, .final-card { left: 22px; right: 22px; top: 36vh; width: auto; transform: none; padding: 24px; }
  .argument-card h2 { font-size: 48px; }
  .lectern { left: 50%; bottom: 10vh; opacity: .72; }
  .chapter-rail { right: 12px; gap: 8px; }
  .chapter-dot { width: 38px; height: 38px; }
  .procedural-note { left: 18px; right: 18px; transform: none; justify-content: space-between; white-space: normal; }
  .balcony, .speech-bubble, .redaction-stack, .gallery-rail, .folded-brief, .cloud-witness, .chalk-arrow { opacity: .35; }
}