:root {
  /* compliance phrase: creates legal-literary archive interrupted by computational evidence labels. Interface accent:** from Google Fonts */
  --navy: #071426;
  --steel: #162A46;
  --silver: #C7CCD6;
  --parchment: #F2E7CF;
  --ink: #0B0B0E;
  --red: #A33A2B;
  --gold: #D9A441;
  --sage: #7C8F65;
  --slate: #8A92A0;
  --metal-dark: #7F8794;
  --metal-light: #EEF1F4;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--parchment);
  font-family: "Libre Baskerville", Georgia, serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .17;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(242,231,207,.32) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 70%, rgba(11,11,14,.5) 0 1px, transparent 1.5px),
    repeating-linear-gradient(98deg, transparent 0 9px, rgba(199,204,214,.08) 10px 11px);
  background-size: 34px 34px, 27px 27px, 100% 100%;
  mix-blend-mode: overlay;
}

.docket-strip {
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 60;
  display: flex;
  gap: 6px;
  padding: 8px;
  background: var(--parchment);
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(-.7deg);
}

.docket-strip a {
  color: var(--ink);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 5px 7px;
  border: 2px solid var(--ink);
  background: var(--silver);
  transition: background .2s steps(2), color .2s steps(2);
}

.docket-strip a.active { background: var(--red); color: var(--parchment); }

.chapter {
  position: relative;
  min-height: 100vh;
  padding: clamp(86px, 10vw, 132px) clamp(22px, 5vw, 72px) 58px;
  overflow: hidden;
  border-bottom: 5px solid var(--ink);
}

.chapter::before {
  content: attr(data-chapter);
  position: absolute;
  right: 3vw;
  top: 6vh;
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(4rem, 13vw, 12rem);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 2px rgba(199,204,214,.22);
}

h1, h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  line-height: .84;
  letter-spacing: -.045em;
}

h1 { font-size: clamp(4.2rem, 15vw, 13rem); color: var(--navy); }
h2 { font-size: clamp(3.4rem, 10vw, 9rem); }

.mono-label, .checksum, .snippet, .map-label, .warning-tag, .metal-tag, .candle-note {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.paper-block {
  color: var(--ink);
  background: var(--parchment);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  background-image: linear-gradient(90deg, rgba(11,11,14,.05) 1px, transparent 1px), linear-gradient(rgba(11,11,14,.04) 1px, transparent 1px);
  background-size: 29px 29px;
}

.summons {
  background:
    linear-gradient(90deg, rgba(217,164,65,.18) 0 2px, transparent 2px 11%),
    linear-gradient(180deg, var(--navy) 0 58%, var(--steel) 58% 100%);
}

.grid-ruler.vertical {
  position: absolute;
  left: 19%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: repeating-linear-gradient(to bottom, var(--silver) 0 18px, transparent 18px 33px);
  opacity: .55;
}

.hero-ledger {
  width: min(850px, 75vw);
  min-height: 58vh;
  padding: clamp(22px, 4vw, 44px);
  transform: rotate(-1.6deg);
  clip-path: polygon(0 0, 96% 0, 100% 8%, 97% 100%, 3% 97%, 0 88%);
}

.hero-ledger .mono-label { color: var(--red); font-size: clamp(.65rem, 1.2vw, .9rem); }
.torn-subtitle { width: min(480px, 88%); font-size: clamp(1rem, 1.8vw, 1.35rem); line-height: 1.55; }

.moon-seal {
  position: absolute;
  right: -58px;
  top: 7vh;
  width: clamp(190px, 28vw, 360px);
  filter: drop-shadow(9px 9px 0 var(--ink));
  transform-origin: 51% 48%;
}

.moon-seal text { font: 700 13px "IBM Plex Mono", monospace; fill: var(--navy); letter-spacing: 2px; }

.stamp {
  display: inline-block;
  border: 5px solid currentColor;
  color: var(--red);
  padding: 9px 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(1.1rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: .12em;
  transform: rotate(8deg);
  box-shadow: 5px 5px 0 var(--ink);
}

.summons .stamp { position: absolute; left: 58%; bottom: 18%; }
.candle-note { position: absolute; right: 15%; bottom: 11%; color: var(--gold); font-size: .8rem; }

.field { background: var(--parchment); color: var(--ink); }
.field h2 { position: absolute; left: 7%; top: 14%; color: var(--steel); transform: rotate(1deg); }
.pasture-line { position: absolute; left: 0; right: 0; bottom: 23%; height: 7px; background: var(--sage); box-shadow: 0 -14px 0 rgba(124,143,101,.24); }
.note-card { position: absolute; padding: 24px; width: min(370px, 82vw); font-size: .95rem; line-height: 1.6; }
.note-a { left: 43%; top: 26%; transform: rotate(-1.2deg); }
.note-b { left: 12%; bottom: 14%; transform: rotate(1.4deg); }

.herb-glass {
  position: absolute;
  right: 9%;
  bottom: 8%;
  width: 210px;
  height: 430px;
  padding: 34px;
  border: 4px solid var(--ink);
  background: rgba(242,231,207,.58);
  box-shadow: 8px 8px 0 var(--ink), inset 0 0 0 10px rgba(199,204,214,.28);
}
.herb-glass svg, .pressed-card svg { width: 100%; height: 100%; fill: none; stroke: var(--sage); stroke-width: 5; stroke-linecap: round; }
.herb-glass ellipse { fill: rgba(124,143,101,.2); }
.snippet { position: absolute; border: 3px solid var(--ink); background: var(--silver); color: var(--navy); padding: 8px 11px; font-size: .75rem; box-shadow: 5px 5px 0 var(--ink); }
.s1 { left: 20%; top: 39%; transform: rotate(-4deg); }
.s2 { right: 34%; bottom: 29%; transform: rotate(3deg); }
.s3 { left: 56%; bottom: 13%; transform: rotate(-1deg); background: var(--red); color: var(--parchment); }

.engine { background: var(--navy); color: var(--parchment); }
.engine h2 { position: relative; z-index: 2; width: 60%; color: var(--parchment); }
.machine-panel {
  position: relative;
  width: min(900px, 88vw);
  margin: -2vh 0 0 19%;
  min-height: 500px;
  background: var(--steel);
  border: 4px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  padding: 25px;
  transform: rotate(.8deg);
}
.checksum { color: var(--silver); font-size: .8rem; }
.circuit { width: 100%; height: 260px; margin-top: 16px; background: rgba(7,20,38,.72); border: 3px solid var(--ink); }
.trace { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: square; stroke-dasharray: 18 14; animation: tracePulse 1.8s steps(5) infinite; }
.t2 { animation-delay: .25s; }.t3 { animation-delay: .5s; }
.nodes circle { fill: var(--red); stroke: var(--parchment); stroke-width: 4; animation: nodeBlink 1.2s steps(2) infinite; }
.transcript { display: grid; grid-template-columns: 1fr 1fr 220px; gap: 14px; align-items: end; }
.transcript p { margin: 0; padding: 14px; background: var(--parchment); color: var(--ink); border: 3px solid var(--ink); }
.redacted { position: relative; font-family: "IBM Plex Mono", monospace; font-weight: 700; overflow: hidden; }
.redacted::before { content: ""; position: absolute; inset: 35% 7% 31%; background: var(--ink); animation: redactSlide 3s steps(3) infinite; }
.redacted::after { content: attr(data-ghost); position: absolute; left: 18px; top: 19px; color: var(--red); opacity: .48; transform: translate(4px, 4px); }
.verdict-switch { margin-top: 20px; border: 3px solid var(--ink); background: var(--silver); color: var(--ink); font: 700 .82rem "IBM Plex Mono", monospace; padding: 12px 16px; box-shadow: 6px 6px 0 var(--ink); cursor: pointer; }
.verdict-switch span { display: inline-block; width: 38px; height: 12px; margin-right: 12px; background: var(--red); border: 2px solid var(--ink); transform: skewX(-22deg) translateY(2px); transition: transform .16s steps(2), background .16s steps(2); }
.verdict-switch.thrown span { transform: skewX(22deg) translate(20px, 2px); background: var(--sage); }
.engine .stamp { position: absolute; right: 7%; top: 22%; color: var(--gold); }
.warning-tag { position: absolute; left: 8%; bottom: 11%; max-width: 330px; padding: 14px; border: 3px solid var(--red); color: var(--red); background: var(--parchment); box-shadow: 6px 6px 0 var(--ink); }

.village-map { background: var(--steel); }
.village-map h2 { position: absolute; left: 9%; top: 11%; color: var(--silver); z-index: 2; }
.map-board { position: absolute; right: 4%; bottom: 9%; width: min(900px, 83vw); height: 62vh; background: var(--parchment); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); transform: rotate(-.9deg); }
.map-board svg { width: 100%; height: 100%; }
.river { fill: none; stroke: var(--steel); stroke-width: 11; opacity: .72; }
.fence { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: square; }
.route { fill: none; stroke: var(--gold); stroke-width: 6; stroke-dasharray: 10 12; animation: tracePulse 2.5s steps(6) infinite; }
.rumor-nodes circle { fill: var(--sage); stroke: var(--ink); stroke-width: 5; }
.map-label { position: absolute; background: var(--silver); color: var(--ink); border: 3px solid var(--ink); padding: 8px; font-size: .7rem; }
.ml1 { left: 13%; bottom: 19%; }.ml2 { right: 13%; top: 13%; }.ml3 { left: 43%; top: 57%; background: var(--red); color: var(--parchment); }
.map-copy { position: absolute; left: 7%; bottom: 13%; width: min(350px, 74vw); padding: 21px; line-height: 1.65; transform: rotate(1.2deg); z-index: 3; }

.bloom { background: var(--parchment); color: var(--ink); }
.bloom h2 { color: var(--navy); transform: rotate(-1deg); }
.bloom-collage { position: relative; height: 68vh; margin-top: -3vh; }
.wax-stamp { position: absolute; left: 50%; top: 9%; width: 180px; height: 180px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: var(--parchment); border: 5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); font: 700 1.2rem "IBM Plex Mono", monospace; letter-spacing: .08em; transform: rotate(12deg); }
.metal-tag { position: absolute; right: 8%; top: 27%; padding: 16px 22px; color: var(--navy); background: linear-gradient(105deg, #7F8794, #EEF1F4 42%, #8A92A0 48%, #C7CCD6); border: 4px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); transform: rotate(-3deg); }
.pressed-card { position: absolute; width: 220px; height: 400px; padding: 32px; background: rgba(242,231,207,.8); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink), inset 0 0 0 12px rgba(199,204,214,.3); }
.pc1 { left: 19%; top: 9%; transform: rotate(-8deg); }.pc2 { left: 36%; top: 21%; transform: rotate(6deg); }
.marginalia { position: absolute; right: 19%; bottom: 7%; width: min(420px, 80vw); font-size: 1.2rem; line-height: 1.7; border-left: 6px solid var(--red); padding-left: 20px; }

.dawn { background: var(--parchment); color: var(--ink); }
.dawn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(199,204,214,.82), rgba(124,143,101,.45) 62%, rgba(242,231,207,.05)); pointer-events: none; }
.dawn h2 { position: relative; z-index: 3; color: var(--navy); margin-left: 11%; }
.unlock-panel { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--steel); border: 4px solid var(--ink); transition: transform 1.3s cubic-bezier(.2,.8,.1,1); z-index: 2; }
.unlock-panel.left { left: 0; transform: translateX(var(--unlock-left, 0)); }
.unlock-panel.right { right: 0; transform: translateX(var(--unlock-right, 0)); }
.final-inscription { position: relative; z-index: 3; margin: 5vh 0 0 43%; display: inline-block; font-family: "IBM Plex Mono", monospace; font-weight: 700; font-size: clamp(1.2rem, 3vw, 2.6rem); color: var(--red); border-bottom: 5px solid var(--ink); }
.dawn-copy { position: relative; z-index: 3; width: min(480px, 82vw); margin: 8vh 0 0 18%; padding: 24px; line-height: 1.7; transform: rotate(-.8deg); }
.moth { position: absolute; z-index: 4; width: 34px; height: 22px; border-radius: 50% 50% 12% 12%; border: 3px solid var(--ink); background: var(--gold); animation: mothDrift 6s ease-in-out infinite; }
.moth::before, .moth::after { content: ""; position: absolute; top: -9px; width: 20px; height: 24px; border: 3px solid var(--ink); background: var(--silver); }
.moth::before { left: -18px; border-radius: 80% 10%; transform: rotate(-25deg); }.moth::after { right: -18px; border-radius: 10% 80%; transform: rotate(25deg); }
.m1 { right: 17%; top: 22%; }.m2 { left: 14%; bottom: 20%; animation-delay: -2s; }

@keyframes tracePulse { 0% { stroke-dashoffset: 80; opacity: .35; } 50% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .55; } }
@keyframes nodeBlink { 0%, 45% { fill: var(--red); } 46%, 100% { fill: var(--gold); } }
@keyframes redactSlide { 0%, 20% { transform: translateX(-110%); } 45%, 72% { transform: translateX(0); } 100% { transform: translateX(115%); } }
@keyframes mothDrift { 0%, 100% { transform: translate(0,0) rotate(-8deg); } 50% { transform: translate(38px,-25px) rotate(12deg); } }

@media (max-width: 760px) {
  .docket-strip { left: 8px; right: 8px; overflow-x: auto; }
  .hero-ledger { width: 92vw; }
  .moon-seal { top: 55vh; right: -80px; }
  .field h2, .village-map h2 { position: relative; left: auto; top: auto; }
  .note-card, .herb-glass, .snippet, .map-board, .map-copy, .pressed-card, .wax-stamp, .metal-tag, .marginalia { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 22px 0; }
  .machine-panel { margin: 24px 0 0; min-height: auto; }
  .transcript { grid-template-columns: 1fr; }
  .map-board { width: 100%; height: 430px; }
  .bloom-collage { height: auto; }
  .engine h2 { width: auto; }
  .summons .stamp, .engine .stamp, .warning-tag { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-top: 24px; }
}