:root {
  /* Style** */
  --bg: #0b1628;
  --bg-elevated: #111f36;
  --headline: #c8d6e5;
  --body: #8fa7bf;
  --dim: #4a6a8a;
  --accent: #2d5a8e;
  --accent-hover: #3a7cc2;
  --mesh-a: #162a4a;
  --mesh-b: #1a3d6b;
  --border: #1a2a4a;
  --fs-display: clamp(2.8rem, 6vw, 5.2rem);
  --fs-body: clamp(1rem, 1.2vw, 1.15rem);
  --fs-caption: clamp(0.65rem, 0.8vw, 0.75rem);
  --fs-quote: clamp(1.4rem, 2.5vw, 2rem);
  --side: clamp(4vw, 8vw, 12vw);
  --recess: clamp(15vh, 18vw, 25vh);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--body);
  font-family: "Source Sans 3", Inter, system-ui, sans-serif;
  font-size: var(--fs-body);
  font-weight: 350;
  letter-spacing: 0.005em;
  line-height: 1.72;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(200, 214, 229, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 214, 229, 0.018) 1px, transparent 1px);
  background-size: calc((100vw - (var(--side) * 2) - 264px) / 12 + 24px) 100%, 100% 100%;
  background-position: var(--side) 0;
  pointer-events: none;
  opacity: 0.42;
}

.stream-field {
  position: fixed;
  inset: -12vh -12vw;
  pointer-events: none;
  background:
    radial-gradient(ellipse 740px 520px at 82% 12%, rgba(26, 61, 107, 0.18), transparent 68%),
    radial-gradient(ellipse 520px 720px at 16% 74%, rgba(22, 42, 74, 0.22), transparent 64%),
    conic-gradient(from 180deg at 60% 50%, #0b1628, #111f36, #0b1628);
  filter: blur(70px);
  opacity: 0.16;
  transform: translate3d(0, calc(var(--scroll, 0) * -0.018px), 0);
}

.fixed-logotype {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 10;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--headline);
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.fixed-logotype.is-dim {
  opacity: 0.2;
}

.proceedings {
  position: relative;
  isolation: isolate;
}

.act {
  position: relative;
  min-height: 100vh;
  padding: var(--recess) 0;
}

.act::before {
  content: "";
  position: absolute;
  inset: 4vh 0;
  z-index: -1;
  opacity: 0.045;
  filter: blur(60px);
  pointer-events: none;
}

.act-filing::before {
  background:
    radial-gradient(ellipse 600px 420px at 78% 28%, #1a3d6b 0%, transparent 72%),
    radial-gradient(ellipse 420px 680px at 23% 68%, #162a4a 0%, transparent 62%);
}

.act-opening::before {
  background:
    radial-gradient(ellipse 760px 460px at 13% 28%, #1a3d6b 0%, transparent 70%),
    radial-gradient(ellipse 420px 620px at 84% 80%, #162a4a 0%, transparent 60%);
}

.act-evidence::before {
  background:
    radial-gradient(ellipse 700px 540px at 72% 54%, #162a4a 0%, transparent 66%),
    radial-gradient(ellipse 500px 440px at 30% 22%, #1a3d6b 0%, transparent 70%);
}

.act-deliberation::before {
  background:
    radial-gradient(ellipse 820px 500px at 80% 44%, #1a3d6b 0%, transparent 76%),
    radial-gradient(ellipse 360px 500px at 44% 80%, #162a4a 0%, transparent 64%);
  opacity: 0.032;
}

.act-verdict::before {
  background:
    radial-gradient(ellipse 820px 620px at 48% 76%, #1a3d6b 0%, transparent 72%),
    radial-gradient(ellipse 580px 500px at 72% 18%, #162a4a 0%, transparent 68%);
  opacity: 0.055;
}

.section-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  min-height: 60vh;
  margin-inline: var(--side);
}

.content {
  position: relative;
  z-index: 2;
  align-self: center;
}

.content-left { grid-column: 2 / span 6; }
.content-right { grid-column: 6 / span 6; }
.content-center-left { grid-column: 3 / span 6; }
.content-verdict { grid-column: 4 / span 6; text-align: center; }
.narrow { max-width: 42ch; }

h1,
h2 {
  margin: 0 0 1.8rem;
  color: var(--headline);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--fs-display);
  font-variation-settings: "opsz" 60;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}

p {
  max-width: 42ch;
  margin: 0 0 1.25rem;
}

.content-verdict p {
  margin-inline: auto;
}

.kicker,
.metadata {
  margin: 0 0 1.35rem;
  color: var(--dim);
  font-family: "DM Mono", monospace;
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.label-left {
  position: absolute;
  top: 8vh;
  grid-column: 2 / span 2;
}

.docket {
  position: absolute;
  bottom: 2vh;
  margin: 0;
}

.docket-right { grid-column: 9 / span 3; }
.docket-center { grid-column: 5 / span 4; }

.quote {
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid rgba(26, 42, 74, 0.4);
  color: var(--dim);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--fs-quote);
  font-style: italic;
  font-variation-settings: "opsz" 36;
  line-height: 1.35;
  opacity: 0.64;
}

.floating {
  transform: translate3d(0, calc(var(--scroll, 0) * var(--speed, -0.04) * 1px), 0);
  will-change: transform;
}

.hero-quote {
  position: absolute;
  right: 3vw;
  bottom: 11vh;
  width: min(28vw, 360px);
}

.quote-left {
  position: absolute;
  grid-column: 1 / span 4;
  top: 17vh;
  width: min(30vw, 390px);
}

.rule {
  height: 1px;
  margin-top: clamp(8vh, 11vw, 14vh);
  border: 0;
  background: rgba(26, 42, 74, 0.4);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.rule.is-visible {
  transform: scaleX(1);
}

hr.content-left,
hr.content-right,
hr.content-center-left {
  width: calc(((100vw - (var(--side) * 2) - 264px) / 12 * 6) + 120px);
}

hr.content-left,
hr.content-center-left { margin-left: calc(var(--side) + ((100vw - (var(--side) * 2) - 264px) / 12) + 24px); }
hr.content-right { margin-left: calc(var(--side) + (((100vw - (var(--side) * 2) - 264px) / 12 + 24px) * 5)); }

.line-animation {
  position: absolute;
  pointer-events: none;
  color: var(--accent);
  opacity: 0.58;
}

.line-animation svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.line-animation path,
.line-animation rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.gavel-drawing {
  top: 16vh;
  right: 7vw;
  width: min(28vw, 330px);
  height: 240px;
}

.gavel-arc {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: arcDraw 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gavel-head {
  opacity: 0;
  transform-origin: 170px 88px;
  animation: gavelSettle 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.scales-drawing {
  grid-column: 9 / span 3;
  top: 18vh;
  right: 0;
  width: min(28vw, 310px);
  height: 260px;
  color: var(--dim);
  opacity: 0.48;
}

.scales-beam {
  transform-origin: 140px 72px;
  animation: balance 6s ease-in-out infinite;
}

.palimpsest {
  position: absolute;
  inset: 0;
  grid-column: 7 / span 5;
  color: #6e8fad;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.1rem, 2vw, 1.75rem);
  font-style: italic;
  line-height: 1.3;
  opacity: 0.13;
}

.palimpsest span {
  position: absolute;
  white-space: nowrap;
}

.palimpsest span:nth-child(1) { top: 7%; left: 7%; }
.palimpsest span:nth-child(2) { top: 25%; left: 45%; }
.palimpsest span:nth-child(3) { top: 48%; left: 3%; }
.palimpsest span:nth-child(4) { top: 68%; left: 32%; }
.palimpsest span:nth-child(5) { top: 83%; left: 12%; }

.verdict-grid {
  min-height: 78vh;
  align-items: center;
}

.document-stream {
  position: absolute;
  inset: 20vh 0 0;
  grid-column: 2 / span 10;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.55;
}

.document-stream span {
  position: absolute;
  bottom: -18%;
  width: clamp(42px, 5vw, 76px);
  height: clamp(62px, 7vw, 106px);
  border: 1px solid rgba(74, 106, 138, 0.13);
  background: linear-gradient(180deg, rgba(45, 90, 142, 0.08), rgba(17, 31, 54, 0.015));
  animation: documentRise 12s linear infinite;
}

.document-stream span:nth-child(1) { left: 8%; animation-delay: -1s; }
.document-stream span:nth-child(2) { left: 22%; animation-delay: -6s; transform: scale(0.8); }
.document-stream span:nth-child(3) { left: 34%; animation-delay: -3s; }
.document-stream span:nth-child(4) { left: 48%; animation-delay: -9s; transform: scale(1.15); }
.document-stream span:nth-child(5) { left: 61%; animation-delay: -4.5s; transform: scale(0.72); }
.document-stream span:nth-child(6) { left: 72%; animation-delay: -11s; }
.document-stream span:nth-child(7) { left: 83%; animation-delay: -7.2s; transform: scale(0.9); }
.document-stream span:nth-child(8) { left: 92%; animation-delay: -2.4s; transform: scale(1.05); }

@keyframes arcDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes gavelSettle {
  0%, 35% { opacity: 0; transform: translate3d(-26px, -34px, 0) rotate(-15deg); }
  68% { opacity: 1; transform: translate3d(0, 0, 0) rotate(2deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes balance {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes documentRise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-1deg); }
  15%, 70% { opacity: 0.18; }
  100% { opacity: 0; transform: translate3d(0, -92vh, 0) rotate(1deg); }
}

@media (max-width: 900px) {
  :root { --side: clamp(24px, 6vw, 48px); }
  .section-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .content-left,
  .content-right,
  .content-center-left,
  .content-verdict { grid-column: 1 / -1; }
  .hero-quote,
  .quote-left,
  .label-left,
  .docket { position: relative; grid-column: 1 / -1; top: auto; bottom: auto; right: auto; width: auto; margin-top: 3rem; }
  .gavel-drawing,
  .scales-drawing { position: relative; grid-column: 2 / span 4; top: auto; right: auto; width: 100%; margin-top: 4rem; }
  .palimpsest { grid-column: 1 / -1; opacity: 0.08; }
  hr.content-left,
  hr.content-right,
  hr.content-center-left { width: calc(100vw - (var(--side) * 2)); margin-left: var(--side); }
}