:root {
  /* Interface labels: **IBM Plex Mono** from Google Fonts for docket IDs */
  --parchment: #F4E9D1;
  --vellum: #D8C39A;
  --ink: #5A3B25;
  --brass: #B88746;
  --oxide: #8F2D24;
  --olive: #62694A;
  --glass: #B9CAD0;
  --brown: #231812;
  --display: "Bebas Neue", Impact, sans-serif;
  --editorial: "Cormorant Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--brown);
  background:
    radial-gradient(circle at 14% 8%, rgba(184, 135, 70, .24), transparent 30rem),
    radial-gradient(circle at 84% 18%, rgba(185, 202, 208, .46), transparent 24rem),
    linear-gradient(115deg, var(--parchment), #fff6df 44%, var(--vellum));
  font-family: var(--editorial);
  overflow-x: hidden;
}

.archive-noise {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .18;
  background-image:
    repeating-linear-gradient(0deg, rgba(35, 24, 18, .04) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(90, 59, 37, .035) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

.scanline {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, transparent, rgba(143, 45, 36, .75), rgba(185, 202, 208, .7), transparent);
  box-shadow: 0 0 28px rgba(184, 135, 70, .65);
  transform: translateY(-10px);
  pointer-events: none;
}

.chapter-tabs {
  position: fixed;
  right: 24px;
  top: 50%;
  z-index: 70;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
}

.chapter-tabs a {
  width: 38px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--ink);
  text-decoration: none;
  font: 600 11px var(--mono);
  background: rgba(244, 233, 209, .68);
  border: 1px solid rgba(90, 59, 37, .36);
  box-shadow: 0 8px 18px rgba(35, 24, 18, .12);
  transform: skewX(-7deg);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.chapter-tabs a:hover, .chapter-tabs a.active {
  transform: skewX(-7deg) translateX(-7px);
  background: var(--oxide);
  color: var(--parchment);
}

.hover-footnote {
  position: fixed;
  right: 78px;
  top: calc(50% + 104px);
  z-index: 70;
  width: 188px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(216, 195, 154, .78);
  border: 1px solid rgba(90, 59, 37, .22);
  font: 10px/1.45 var(--mono);
  opacity: .72;
}

section {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  padding: 8vh 8vw;
}

.evidence-table {
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: 7vh 7vw 10vh;
}

.docket-stamp, .mono {
  font: 600 11px/1.4 var(--mono);
  letter-spacing: .14em;
  color: var(--oxide);
  text-transform: uppercase;
}

.docket-stamp {
  position: absolute;
  top: 34px;
  left: 7vw;
  padding: 7px 10px;
  border: 1px solid rgba(143, 45, 36, .55);
  transform: rotate(-2deg);
}

.hero-rule, .baseline {
  position: absolute;
  left: 6vw;
  right: 6vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90, 59, 37, .55), transparent);
}

.hero-rule { top: 52%; }
.baseline { bottom: 18vh; }

.hero-title {
  margin: 0;
  z-index: 3;
  font-family: var(--display);
  font-size: clamp(8rem, 24vw, 21rem);
  line-height: .72;
  letter-spacing: .008em;
  color: var(--brown);
  text-transform: uppercase;
  filter: drop-shadow(10px 14px 0 rgba(184, 135, 70, .16));
  transform-origin: 19% 52%;
}

.hero-title span { display: block; transform: translateY(24px) scale(1.02); opacity: 0; }
.hero-title.stamped span { animation: stampIn .72s cubic-bezier(.2, 1.4, .38, 1) forwards; }
.hero-title.stamped span + span { animation-delay: .12s; }

@keyframes stampIn {
  0% { opacity: 0; transform: translateY(-42px) scale(1.14) rotate(-1deg); filter: blur(5px); }
  68% { opacity: 1; transform: translateY(4px) scale(.985) rotate(.25deg); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.hero-narration {
  max-width: 540px;
  z-index: 4;
  margin: -7vh 0 0 1vw;
  font-size: clamp(1.35rem, 2.4vw, 2.45rem);
  line-height: 1.08;
  color: var(--ink);
}

.blob, .chapter-blob, .map-pool {
  position: absolute;
  z-index: -1;
  border-radius: 52% 48% 62% 38% / 41% 59% 36% 64%;
  filter: blur(2px);
  mix-blend-mode: multiply;
  animation: breathe 14s ease-in-out infinite alternate;
}

.blob-a {
  width: 46vw; height: 36vw; left: 8vw; top: 18vh;
  background: radial-gradient(circle at 32% 38%, rgba(184, 135, 70, .62), rgba(216, 195, 154, .22) 52%, transparent 70%);
}

.blob-b {
  width: 34vw; height: 42vw; right: 5vw; bottom: 2vh;
  background: radial-gradient(circle at 45% 35%, rgba(185, 202, 208, .74), rgba(98, 105, 74, .18) 56%, transparent 72%);
  animation-delay: -5s;
}

@keyframes breathe { to { transform: scale(1.12) rotate(8deg) translate(2vw, -1vh); } }

.floating-paper {
  position: absolute;
  padding: 18px;
  background: rgba(244, 233, 209, .76);
  border: 1px solid rgba(90, 59, 37, .22);
  box-shadow: 0 18px 42px rgba(35, 24, 18, .14);
  backdrop-filter: blur(8px);
  animation: drift 8s ease-in-out infinite alternate;
}

@keyframes drift { to { transform: translateY(-17px) rotate(var(--r, 2deg)); } }

.decree-slip { width: 250px; z-index: 5; font: 600 11px var(--mono); color: var(--ink); }
.slip-one { right: 13vw; top: 20vh; --r: -4deg; transform: rotate(4deg); }
.slip-two { left: 11vw; bottom: 17vh; --r: 5deg; transform: rotate(-5deg); }

.skeleton, .loading-clause i, .skeleton-set i {
  display: block;
  height: 10px;
  margin-top: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(216,195,154,.35), rgba(185,202,208,.75), rgba(216,195,154,.35));
  background-size: 220% 100%;
  animation: shimmer 1.8s linear infinite;
}

.short { width: 45%; } .mid { width: 68%; } .long { width: 90%; }

@keyframes shimmer { to { background-position: -220% 0; } }

.redaction, .reactive-redaction {
  display: block;
  height: 15px;
  margin: 11px 0;
  background: var(--brown);
  box-shadow: inset 0 0 0 1px rgba(244, 233, 209, .07);
  transition: filter .12s ease, transform .12s ease, background .12s ease;
}

.reactive-redaction.flicker { filter: invert(.2) sepia(1); transform: scaleX(1.03); background: var(--oxide); }

.loading-clause {
  width: min(480px, 50vw);
  position: absolute;
  right: 7vw;
  bottom: 9vh;
  opacity: 1;
  transition: opacity .8s ease, transform .8s ease;
}
.loading-clause.resolved { opacity: .18; transform: translateY(18px); }

.clock-face {
  position: absolute;
  right: 22vw;
  top: 57vh;
  width: 116px; height: 116px;
  border: 1px solid rgba(90, 59, 37, .38);
  border-radius: 50%;
  opacity: .58;
}
.clock-face span { position: absolute; left: 57px; top: 19px; width: 1px; height: 42px; background: var(--ink); transform-origin: bottom; }
.clock-face span + span { height: 31px; top: 30px; transform: rotate(84deg); background: var(--oxide); }

.chapter {
  display: grid;
  align-items: center;
  overflow: hidden;
}
.chapter::before {
  content: attr(data-chapter);
  position: absolute;
  top: 32px;
  left: 7vw;
  font: 600 11px var(--mono);
  color: var(--oxide);
  letter-spacing: .18em;
}

.glass-document {
  width: min(690px, 72vw);
  padding: clamp(28px, 5vw, 62px);
  background: linear-gradient(135deg, rgba(244, 233, 209, .72), rgba(185, 202, 208, .22));
  border: 1px solid rgba(90, 59, 37, .22);
  box-shadow: 0 24px 72px rgba(35, 24, 18, .16), inset 0 1px rgba(255,255,255,.45);
  backdrop-filter: blur(10px);
}

.tilted-left { transform: rotate(-2.2deg); margin-left: 5vw; }
.tilted-right { transform: rotate(2.4deg); margin-left: auto; margin-right: 10vw; }
.tribunal-doc { margin: auto; transform: rotate(.8deg); }
.final-doc { margin: auto; text-align: center; }

h2 {
  margin: 8px 0 18px;
  color: var(--brown);
  font: 400 clamp(5rem, 13vw, 13rem)/.76 var(--display);
  letter-spacing: .02em;
}

.editorial, blockquote {
  font: 400 clamp(1.3rem, 2.1vw, 2.1rem)/1.23 var(--editorial);
  color: var(--ink);
}
blockquote { margin: 26px 0 0; font-style: italic; color: var(--oxide); }

.chapter-blob { width: 48vw; height: 38vw; right: 4vw; bottom: 4vh; background: rgba(184, 135, 70, .28); }
.chapter-blob.olive { left: 7vw; right: auto; background: rgba(98, 105, 74, .25); }
.chapter-blob.blue { width: 55vw; height: 28vw; left: 23vw; background: rgba(185, 202, 208, .5); }
.map-pool { width: 56vw; height: 30vh; left: 5vw; bottom: 8vh; background: radial-gradient(circle, rgba(98,105,74,.3), rgba(184,135,70,.18), transparent 68%); }

.vertical-ruler {
  position: absolute;
  left: 4vw;
  top: 15vh;
  bottom: 15vh;
  border-left: 1px solid rgba(90, 59, 37, .35);
}
.vertical-ruler span { display: block; transform: rotate(-90deg) translateX(-180px); transform-origin: left top; font: 10px var(--mono); color: var(--ink); letter-spacing: .14em; }

.marginal-note { right: 11vw; top: 19vh; width: 230px; font-size: 1.3rem; font-style: italic; }
.stamp-label {
  position: absolute;
  right: 9vw;
  bottom: 16vh;
  color: rgba(143, 45, 36, .78);
  border: 4px solid currentColor;
  padding: 3px 14px;
  font: 400 clamp(3rem, 9vw, 8rem)/1 var(--display);
  transform: rotate(-8deg);
  opacity: .78;
}
.stamp-label.oxide { left: 8vw; right: auto; bottom: 12vh; color: rgba(143,45,36,.64); }

.curfew-clock { font: 400 clamp(5rem, 11vw, 11rem)/1 var(--display); color: var(--oxide); margin-top: 20px; }
.ordinance-fragment { left: 9vw; top: 23vh; width: 245px; font: 600 12px var(--mono); }
.ordinance-fragment span { height: 18px; width: 78%; margin-top: 14px; }
.paperclip { position: absolute; right: 23vw; top: 24vh; width: 44px; height: 86px; border: 5px solid var(--brass); border-left-color: transparent; border-radius: 24px; transform: rotate(18deg); opacity: .7; }

.waveform { display: flex; align-items: center; gap: 12px; height: 100px; margin-top: 28px; }
.waveform i { width: 8px; height: 38px; background: var(--oxide); opacity: .6; animation: wave 1.1s ease-in-out infinite alternate; }
.waveform i:nth-child(2n) { height: 74px; animation-delay: -.25s; background: var(--brass); }
.waveform i:nth-child(3n) { height: 20px; animation-delay: -.55s; background: var(--glass); }
@keyframes wave { to { transform: scaleY(.35); opacity: .22; } }
.index-tab { right: 14vw; top: 18vh; font: 600 11px var(--mono); transform: rotate(3deg); }
.redaction-field { position: absolute; left: 54vw; bottom: 18vh; width: 270px; height: 42px; }

.resolved-lines { display: grid; gap: 12px; justify-content: center; margin-top: 30px; }
.resolved-lines span { padding: 9px 16px; border-top: 1px solid rgba(90,59,37,.36); font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .15em; color: var(--olive); }
.closing-mark { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); font: 600 11px var(--mono); color: var(--oxide); letter-spacing: .18em; }

.clause-reveal, .glass-document, .stamp-label, .marginal-note { opacity: 0; transition: opacity .75s ease, transform .75s ease; }
.in-view .clause-reveal, .in-view .glass-document, .in-view .stamp-label, .in-view .marginal-note { opacity: 1; }
.in-view .tilted-left { transform: rotate(-2.2deg) translateY(0); }
.in-view .tilted-right { transform: rotate(2.4deg) translateY(0); }
.in-view .tribunal-doc { transform: rotate(.8deg) translateY(0); }
.in-view .final-doc { transform: translateY(0); }

@media (max-width: 760px) {
  .chapter-tabs, .hover-footnote { display: none; }
  section { padding: 8vh 6vw; }
  .hero-title { font-size: 28vw; }
  .decree-slip { width: 190px; }
  .slip-one { right: 4vw; top: 15vh; }
  .slip-two { left: 5vw; bottom: 24vh; }
  .hero-narration { margin-top: -3vh; }
  .glass-document { width: 88vw; }
  .tilted-left, .tilted-right { margin-left: auto; margin-right: auto; }
  .stamp-label { right: 5vw; bottom: 8vh; }
}