:root {
  --void: #0a0a0f;
  --slab: #12121a;
  --magenta: #f72585;
  --violet: #7209b5;
  --indigo: #3a0ca3;
  --azure: #4361ee;
  --cyan: #4cc9f0;
  --aqua: #00f5d4;
  --spectral: #e0e0ff;
  --ghost: #b0b0cc;
  --vein: #2a2a3d;
  --holo: linear-gradient(135deg, #f72585, #7209b5, #3a0ca3, #4361ee, #4cc9f0);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 8%, rgba(114, 9, 181, 0.18), transparent 28vw),
    radial-gradient(circle at 88% 22%, rgba(67, 97, 238, 0.12), transparent 34vw),
    linear-gradient(180deg, #0a0a0f 0%, #0d0d14 45%, #0a0a0f 100%);
  color: var(--ghost);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.875rem, 1.2vw, 1.05rem);
  line-height: 1.75;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}

@keyframes docketPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(76, 201, 240, 0.7), 0 0 28px rgba(247, 37, 133, 0.35); }
  50% { box-shadow: 0 0 22px rgba(76, 201, 240, 0.85), 0 0 36px rgba(247, 37, 133, 0.48); }
}

.entablature,
.footer-entablature {
  height: 48px;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(42, 42, 61, 0.85) 6px 12px),
    linear-gradient(180deg, rgba(18, 18, 26, 0.96), rgba(10, 10, 15, 0.78));
}

.entablature {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  border-bottom: 1px solid rgba(114, 9, 181, 0.45);
  backdrop-filter: blur(12px);
}

.docket-line {
  position: fixed;
  left: 24px;
  top: 70px;
  bottom: 28px;
  width: 1px;
  z-index: 30;
  background: rgba(114, 9, 181, 0.6);
}

.waypoint {
  position: absolute;
  left: -3px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--violet);
  border-radius: 50%;
  background: var(--void);
  transition: background 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}

.waypoint:nth-child(1) { top: 4%; }
.waypoint:nth-child(2) { top: 27%; }
.waypoint:nth-child(3) { top: 50%; }
.waypoint:nth-child(4) { top: 73%; }
.waypoint:nth-child(5) { top: 96%; }

.waypoint.active {
  background: var(--holo);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(76, 201, 240, 0.7), 0 0 28px rgba(247, 37, 133, 0.35);
  animation: docketPulse 1800ms ease-in-out infinite;
}

.quest-shell {
  padding-top: 48px;
}

.masonry-zone {
  padding: 120px clamp(20px, 4vw, 72px) 90px 64px;
}

.evidence-zone {
  padding-top: 80px;
  padding-bottom: 80px;
}

.verdict-zone {
  padding-top: 48px;
  padding-bottom: 72px;
}

.masonry-grid {
  column-count: 3;
  column-gap: 12px;
  max-width: 1540px;
  margin: 0 auto;
}

.slab {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 12px;
  padding: 28px;
  break-inside: avoid;
  overflow: hidden;
  background:
    radial-gradient(ellipse at var(--vein-x, 40%) var(--vein-y, 40%), rgba(42, 42, 61, 0.16), transparent 34%),
    radial-gradient(ellipse at calc(var(--vein-x, 40%) + 24%) calc(var(--vein-y, 40%) + 18%), rgba(42, 42, 61, 0.10), transparent 28%),
    linear-gradient(145deg, rgba(18, 18, 26, 0.98), rgba(10, 10, 15, 0.98));
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, rgba(58, 12, 163, 0.35), rgba(0, 245, 212, 0.35)) 1;
  color: var(--ghost);
  isolation: isolate;
}

.slab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(118deg, transparent 0 32%, rgba(42, 42, 61, 0.12) 33%, transparent 34% 100%),
    linear-gradient(54deg, transparent 0 58%, rgba(42, 42, 61, 0.08) 59%, transparent 60% 100%);
  opacity: 0.55;
}

.slab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: conic-gradient(from 90deg at var(--cursor-x, 50%) var(--cursor-y, 50%), #f72585, #7209b5, #3a0ca3, #4361ee, #4cc9f0, #f72585);
  transition: opacity 260ms var(--ease);
  mix-blend-mode: screen;
}

.slab:hover::after {
  opacity: 0.06;
}

.hero-slab {
  min-height: 80vh;
  padding: clamp(30px, 4vw, 58px);
  background:
    radial-gradient(ellipse at var(--vein-x) var(--vein-y), rgba(42, 42, 61, 0.24), transparent 42%),
    radial-gradient(ellipse at 80% 70%, rgba(42, 42, 61, 0.16), transparent 30%),
    linear-gradient(145deg, #0a0a0f, #12121a);
}

.short-slab { min-height: 265px; }
.medium-slab { min-height: 410px; }
.height-a { min-height: 470px; }
.height-b { min-height: 330px; }
.height-c { min-height: 245px; }
.height-d { min-height: 395px; }
.verdict-slab { min-height: 245px; border-image: linear-gradient(135deg, rgba(58, 12, 163, 0.6), rgba(0, 245, 212, 0.6), rgba(247, 37, 133, 0.6)) 1; }

.docket {
  margin: 0 92px 22px 0;
  color: var(--violet);
  font-family: "Space Mono", monospace;
  font-size: clamp(0.65rem, 0.9vw, 0.8rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.35;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  color: var(--spectral);
  font-family: "Space Mono", monospace;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

h1 {
  max-width: 9ch;
  font-size: clamp(3.5rem, 9vw, 8rem);
}

.slab h2 {
  max-width: 13ch;
  margin-right: 76px;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  line-height: 1.08;
}

p {
  max-width: 62ch;
}

.lead {
  margin-top: clamp(28px, 5vh, 58px);
  max-width: 50ch;
  color: var(--spectral);
  font-weight: 400;
}

.slab p:last-child {
  margin-bottom: 0;
}

.holo-text {
  background: var(--holo);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.bench-divider {
  height: 1px;
  margin: 0 clamp(18px, 5vw, 80px) 0 64px;
  background: linear-gradient(90deg, transparent, #f72585, #4361ee, transparent);
}

.deliberation {
  min-height: 100vh;
  padding: 110px 64px 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background:
    radial-gradient(circle at 55% 50%, rgba(58, 12, 163, 0.18), transparent 34vw),
    #0a0a0f;
}

.pronouncement {
  width: min(1080px, 88vw);
  margin: 56px auto;
  font-size: clamp(2.7rem, 7vw, 7.2rem);
  line-height: 1.02;
  color: transparent;
  text-align: left;
}

.pronouncement span {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  background: var(--holo);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.pronouncement span.visible {
  opacity: 1;
  transform: translateY(0);
}

.volute {
  position: relative;
  width: 120px;
  height: 42px;
  margin: 0 auto;
  opacity: 0.65;
}

.volute::before,
.volute::after,
.volute span {
  content: "";
  position: absolute;
  border: 1px solid rgba(114, 9, 181, 0.55);
  border-left-color: transparent;
  border-bottom-color: rgba(76, 201, 240, 0.25);
  border-radius: 50%;
}

.volute::before { width: 42px; height: 42px; left: 6px; top: 0; }
.volute::after { width: 42px; height: 42px; right: 6px; top: 0; transform: scaleX(-1); }
.volute span:nth-child(1) { width: 26px; height: 26px; left: 14px; top: 8px; }
.volute span:nth-child(2) { width: 26px; height: 26px; right: 14px; top: 8px; transform: scaleX(-1); }
.volute span:nth-child(3) { width: 72px; height: 1px; left: 24px; top: 21px; border-width: 1px 0 0; border-radius: 0; }

.seal-zone {
  min-height: 200px;
  position: relative;
  padding: 72px 64px 86px;
  text-align: center;
  background: linear-gradient(180deg, #12121a, #0a0a0f);
  border-top: 1px solid rgba(42, 42, 61, 0.9);
}

.footer-entablature {
  position: absolute;
  inset: 0 0 auto 0;
  height: 24px;
}

.seal-zone h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
}

.seal-icons {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 34px;
}

.iso-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 80px;
  height: 80px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45));
}

.iso-icon.small {
  position: relative;
  top: auto;
  right: auto;
  width: 48px;
  height: 48px;
}

.iso-icon.big {
  width: 92px;
  height: 92px;
}

.iso-icon span,
.iso-icon::before,
.iso-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.gavel span {
  width: 46px;
  height: 22px;
  top: 18px;
  left: 20px;
  background: var(--magenta);
  transform: rotateZ(-18deg) skewX(-18deg);
}

.gavel::before {
  width: 14px;
  height: 56px;
  top: 26px;
  left: 36px;
  background: var(--indigo);
  transform: rotateZ(-45deg) skewY(18deg);
}

.gavel::after {
  width: 52px;
  height: 12px;
  top: 54px;
  left: 12px;
  background: var(--violet);
  transform: rotateZ(-18deg) skewX(-18deg);
}

.scales span {
  width: 56px;
  height: 6px;
  top: 24px;
  left: 12px;
  background: var(--azure);
  transform: rotateZ(-10deg);
}

.scales::before {
  width: 8px;
  height: 54px;
  top: 18px;
  left: 36px;
  background: var(--spectral);
}

.scales::after {
  width: 62px;
  height: 26px;
  left: 9px;
  top: 42px;
  background:
    radial-gradient(ellipse at 20% 70%, var(--cyan) 0 34%, transparent 36%),
    radial-gradient(ellipse at 80% 70%, var(--cyan) 0 34%, transparent 36%),
    linear-gradient(90deg, transparent 0 48%, var(--violet) 49% 51%, transparent 52%);
}

.column span {
  width: 34px;
  height: 54px;
  top: 16px;
  left: 23px;
  background: repeating-linear-gradient(90deg, #12121a 0 5px, #2a2a3d 5px 7px);
  border-left: 1px solid var(--cyan);
  border-right: 1px solid var(--violet);
}

.column::before,
.column::after {
  width: 52px;
  height: 12px;
  left: 14px;
  background: linear-gradient(90deg, var(--indigo), var(--cyan));
  transform: skewX(-28deg);
}

.column::before { top: 8px; }
.column::after { top: 68px; }

.codex span {
  width: 58px;
  height: 42px;
  top: 23px;
  left: 10px;
  background: linear-gradient(105deg, #0a0a0f 0 48%, #7209b5 49% 52%, #0a0a0f 53% 100%);
  border: 1px solid var(--violet);
  transform: skewY(-12deg);
}

.codex::before,
.codex::after {
  width: 20px;
  height: 2px;
  background: var(--ghost);
  opacity: 0.75;
  left: 18px;
}

.codex::before { top: 36px; box-shadow: 0 8px 0 var(--ghost), 32px 0 0 var(--ghost), 32px 8px 0 var(--ghost); }
.codex::after { top: 52px; box-shadow: 32px 0 0 var(--ghost); }

.scroll span {
  width: 50px;
  height: 38px;
  top: 24px;
  left: 15px;
  background: var(--indigo);
  border: 1px solid var(--cyan);
  transform: skewY(-16deg);
}

.scroll::before {
  width: 16px;
  height: 16px;
  top: 35px;
  left: 42px;
  background: var(--magenta);
  border-radius: 50%;
}

.scroll::after {
  width: 56px;
  height: 9px;
  top: 18px;
  left: 12px;
  background: var(--violet);
  border-radius: 10px;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: var(--delay, 0ms);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal.place {
  transform: translateY(30px) scale(0.96);
}

.reveal.place.visible {
  transform: translateY(0) scale(1);
}

@media (max-width: 980px) {
  .masonry-grid {
    column-count: 2;
  }

  .masonry-zone,
  .deliberation,
  .seal-zone {
    padding-left: 56px;
  }
}

@media (max-width: 640px) {
  .docket-line {
    left: 14px;
  }

  .masonry-grid {
    column-count: 1;
  }

  .masonry-zone,
  .deliberation,
  .seal-zone {
    padding-left: 34px;
    padding-right: 16px;
  }

  .bench-divider {
    margin-left: 34px;
    margin-right: 16px;
  }

  .slab {
    padding: 24px;
  }

  .hero-slab {
    min-height: 78vh;
  }
}