:root {
  --violet: #2B203A;
  --mauve: #B98AAA;
  --parchment: #E5D4A6;
  --brass: #9A7A45;
  --coral: #D86F5F;
  --plum: #141019;
  --teal: #3F7B80;
  --commissioner: "Commissioner", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --literata: "Literata", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--parchment);
  font-family: var(--commissioner);
  background: var(--plum);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -5;
  background:
    radial-gradient(circle at 86% 78%, rgba(229, 212, 166, 0.24), transparent 22rem),
    radial-gradient(circle at 18% 18%, rgba(185, 138, 170, 0.18), transparent 24rem),
    linear-gradient(135deg, var(--plum), var(--violet) 48%, #20172e 72%, var(--plum));
}

.atmosphere, .scanlines, .horizon-grid, .candle-halo, .event-token {
  pointer-events: none;
  position: fixed;
}

.atmosphere { inset: 0; z-index: 6; mix-blend-mode: screen; }

.scanlines {
  inset: 0;
  opacity: 0.18;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(229, 212, 166, 0.18) 6px, transparent 7px);
}

.horizon-grid {
  left: -15vw;
  right: -15vw;
  bottom: -5vh;
  height: 46vh;
  opacity: 0.25;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: bottom;
  background:
    linear-gradient(rgba(154, 122, 69, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 123, 128, 0.45) 1px, transparent 1px);
  background-size: 100% 42px, 72px 100%;
}

.candle-halo {
  width: 42vmin;
  height: 42vmin;
  right: -4vmin;
  bottom: -3vmin;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(229, 212, 166, 0.58), rgba(216, 111, 95, 0.2) 35%, transparent 68%);
  filter: blur(9px);
  animation: bloom 2.8s ease-out forwards, breathe 5.5s ease-in-out infinite 2.8s;
}

.event-token {
  left: 8vw;
  top: 14vh;
  width: 18px;
  height: 18px;
  border: 2px solid var(--parchment);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--teal), 0 0 34px var(--parchment);
}

.index-tabs {
  position: fixed;
  right: 0;
  top: 18vh;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.index-tabs a {
  color: var(--plum);
  background: linear-gradient(90deg, var(--brass), var(--parchment));
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 10px 8px 10px 18px;
  border: 1px solid rgba(229, 212, 166, 0.35);
  transform: translateX(18px);
  transition: transform 300ms ease, filter 300ms ease;
  writing-mode: vertical-rl;
}

.index-tabs a:hover, .index-tabs a.active { transform: translateX(0); filter: drop-shadow(0 0 12px rgba(229, 212, 166, 0.45)); }

.plate {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
  border-bottom: 1px solid rgba(154, 122, 69, 0.32);
  background:
    linear-gradient(112deg, rgba(20, 16, 25, 0.96), rgba(43, 32, 58, 0.9) 46%, rgba(20, 16, 25, 0.92)),
    radial-gradient(circle at 22% 72%, rgba(63, 123, 128, 0.13), transparent 28rem);
}

.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background:
    linear-gradient(135deg, transparent 0 49.7%, var(--brass) 49.9% 50.1%, transparent 50.3%),
    linear-gradient(160deg, transparent 0 59%, rgba(185, 138, 170, 0.65) 59.1% 59.25%, transparent 59.4%);
}

.plate-grid {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - clamp(56px, 10vw, 144px));
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  grid-template-rows: auto 1fr;
  gap: 32px;
}

.registry-mark, .phase-label {
  position: relative;
  z-index: 3;
  width: max-content;
  color: var(--parchment);
  border: 1px solid rgba(154, 122, 69, 0.8);
  background: rgba(20, 16, 25, 0.72);
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  box-shadow: 5px 5px 0 rgba(185, 138, 170, 0.18);
}

.chapter {
  color: var(--brass);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.24em;
}

.wordmark {
  align-self: start;
  padding-top: 10vh;
}

h1, h2, p, blockquote { margin-top: 0; }

h1 {
  position: relative;
  margin-bottom: 22px;
  font-size: clamp(44px, 8vw, 124px);
  line-height: 0.78;
  font-weight: 900;
  letter-spacing: -0.08em;
  color: var(--parchment);
  text-shadow: 4px 0 0 rgba(216, 111, 95, 0.36), -5px 3px 0 rgba(63, 123, 128, 0.28), 0 0 34px rgba(185, 138, 170, 0.26);
}

h1::after {
  content: attr(data-text);
  position: absolute;
  left: 4px;
  top: 4px;
  color: rgba(185, 138, 170, 0.22);
  clip-path: polygon(0 39%, 100% 33%, 100% 48%, 0 54%);
  animation: misregister 4.8s steps(2, end) infinite;
}

h2 {
  font-size: clamp(36px, 6vw, 90px);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--parchment);
}

p { font-size: clamp(17px, 1.7vw, 24px); line-height: 1.45; color: rgba(229, 212, 166, 0.82); }

blockquote, .marginalia, .closing-law {
  font-family: var(--literata);
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1.32;
  color: var(--mauve);
}

.causality-collage {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  min-height: 68vh;
  margin-top: 6vh;
}

.threads, .branch-diagram svg, .resolution-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

svg path { fill: none; stroke: var(--brass); stroke-width: 2; stroke-dasharray: 8 10; filter: drop-shadow(0 0 6px rgba(154, 122, 69, 0.45)); }
svg path.teal { stroke: var(--teal); stroke-width: 3; }
svg path.coral { stroke: var(--coral); }
svg circle { fill: var(--plum); stroke: var(--parchment); stroke-width: 3; }
.completion-ring { fill: rgba(63, 123, 128, 0.2); stroke: var(--teal); filter: drop-shadow(0 0 18px var(--teal)); }

.event-slip, .ledger-card, .resolved-slip {
  position: absolute;
  width: 260px;
  min-height: 116px;
  padding: 16px;
  color: var(--plum);
  background: linear-gradient(135deg, rgba(229, 212, 166, 0.94), rgba(185, 138, 170, 0.72));
  border: 1px solid var(--brass);
  box-shadow: 12px 14px 0 rgba(20, 16, 25, 0.46), inset 0 0 28px rgba(154, 122, 69, 0.2);
  clip-path: polygon(0 7%, 91% 0, 100% 88%, 9% 100%);
  animation: drift 8s ease-in-out infinite;
}

.event-slip span, .event-slip strong, .event-slip em, .ledger-card b, .resolved-slip span { display: block; }
.event-slip span { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: var(--brass); }
.event-slip strong { margin: 10px 0 8px; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }
.event-slip em { font-family: var(--literata); font-style: normal; font-size: 15px; color: rgba(20, 16, 25, 0.78); }
.event-slip.conflict { background: linear-gradient(135deg, rgba(216, 111, 95, 0.92), rgba(229, 212, 166, 0.76)); animation: drift 7s ease-in-out infinite, glitch 2.4s steps(2, end) infinite; }

.slip-a { left: 4%; top: 8%; transform: rotate(-8deg); }
.slip-b { left: 38%; top: 34%; transform: rotate(5deg); animation-delay: -1.5s; }
.slip-c { right: 2%; bottom: 9%; transform: rotate(-3deg); animation-delay: -3s; }
.wax-pin { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--parchment), var(--coral) 60%, var(--brass)); box-shadow: 0 0 20px rgba(216,111,95,0.45); }
.pin-one { left: 29%; top: 28%; }
.pin-two { right: 21%; bottom: 27%; }
.crt-fragment { position: absolute; right: 10%; top: 3%; color: var(--teal); background: rgba(20, 16, 25, 0.72); border: 1px solid rgba(63, 123, 128, 0.7); padding: 18px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; transform: rotate(4deg); box-shadow: -4px 0 0 rgba(216,111,95,0.2); }

.completion-node { grid-column: 1; align-self: end; justify-self: end; display: flex; align-items: center; gap: 12px; color: var(--teal); font-size: 11px; font-weight: 900; letter-spacing: 0.18em; }
.node-ring { width: 92px; height: 92px; border: 2px solid var(--teal); border-radius: 50%; box-shadow: 0 0 40px rgba(63, 123, 128, 0.75), inset 0 0 22px rgba(229, 212, 166, 0.22); animation: pulseRing 3.2s ease-in-out infinite; }

.z-left, .z-right, .contention-copy, .seal-copy { position: relative; z-index: 2; max-width: 680px; }
.z-left { margin-top: 12vh; }
.z-right { margin-left: auto; margin-top: 45vh; text-align: right; }
.branch-diagram, .resolution-map { position: absolute; inset: 12vh 7vw 8vh 14vw; z-index: 1; }
.scan-sun { fill: url(#sunFade); opacity: 0.4; stroke: none; }
.nodes circle { fill: rgba(20,16,25,0.8); }
.ledger-card { width: 285px; min-height: 95px; font-weight: 800; color: var(--violet); }
.card-one { right: 17%; top: 18%; transform: rotate(7deg); }
.card-two { left: 26%; bottom: 8%; transform: rotate(-4deg); animation-delay: -2.2s; }
.marginalia { position: absolute; right: 10vw; bottom: 11vh; max-width: 440px; }

.contention-plate { background: radial-gradient(circle at 67% 40%, rgba(216,111,95,0.18), transparent 20rem), linear-gradient(112deg, var(--plum), var(--violet)); }
.contention-copy { margin-top: 15vh; }
.collision-wall { position: absolute; right: 6vw; top: 18vh; width: min(58vw, 780px); height: 66vh; border: 1px solid rgba(154,122,69,0.62); background: rgba(20,16,25,0.36); box-shadow: inset 0 0 80px rgba(216,111,95,0.12); }
.tear { position: absolute; left: 0; right: 0; height: 28px; background: linear-gradient(90deg, transparent, rgba(216,111,95,0.72), rgba(185,138,170,0.44), transparent); animation: tearShift 2.7s steps(3, end) infinite; }
.tear-one { top: 25%; }
.tear-two { top: 61%; animation-delay: -1.1s; }
.collide-a { left: 8%; top: 12%; }
.collide-b { left: 37%; top: 34%; }
.collide-c { right: 4%; bottom: 10%; }
.warning-stamp { position: absolute; left: 8vw; bottom: 14vh; z-index: 3; color: var(--coral); border: 2px solid var(--coral); padding: 14px 20px; font-weight: 900; letter-spacing: 0.16em; transform: rotate(-6deg); box-shadow: 0 0 26px rgba(216,111,95,0.22); }

.resolved-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: resolvePath 5s ease-in-out infinite; }
.faint { opacity: 0.24; }
.resolved-slip { right: 15%; top: 30%; width: 310px; font-size: 26px; font-weight: 900; text-align: center; color: var(--plum); }

.seal-plate { display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 51%, rgba(229,212,166,0.22), transparent 22rem), linear-gradient(135deg, var(--plum), var(--violet)); }
.seal-copy { max-width: 840px; }
.final-seal { position: relative; width: 280px; height: 280px; display: grid; place-items: center; margin: 24px 0; }
.seal-ring { width: 240px; height: 240px; border-radius: 50%; border: 3px double var(--brass); display: grid; place-items: center; color: var(--parchment); font-size: 28px; font-weight: 900; letter-spacing: 0.18em; box-shadow: 0 0 50px rgba(229,212,166,0.26), inset 0 0 44px rgba(63,123,128,0.24); }
.flame { position: absolute; bottom: 53px; width: 34px; height: 70px; border-radius: 70% 30% 70% 30%; background: radial-gradient(circle at 50% 72%, var(--parchment), var(--coral) 48%, transparent 72%); transform: rotate(45deg); filter: blur(0.4px); animation: flame 1.9s ease-in-out infinite; }
.sealed-command { color: var(--plum); background: linear-gradient(90deg, var(--parchment), var(--brass)); text-decoration: none; font-weight: 900; letter-spacing: 0.18em; padding: 16px 24px; border: 1px solid var(--parchment); box-shadow: 8px 8px 0 rgba(185,138,170,0.18); }
.closing-law { max-width: 720px; color: var(--mauve); }

@keyframes bloom { to { opacity: 1; } }
@keyframes breathe { 50% { transform: scale(1.12); opacity: 0.72; } }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 12px -14px; } }
@keyframes glitch { 0%, 85%, 100% { filter: none; } 88% { filter: drop-shadow(5px 0 0 var(--coral)) drop-shadow(-6px 2px 0 var(--teal)); translate: -3px 2px; } 92% { translate: 5px -1px; } }
@keyframes misregister { 0%, 72%, 100% { transform: translate(0); } 76% { transform: translate(12px, -4px); } 80% { transform: translate(-8px, 3px); } }
@keyframes pulseRing { 50% { transform: scale(1.08); box-shadow: 0 0 58px rgba(229,212,166,0.42), inset 0 0 28px rgba(63,123,128,0.4); } }
@keyframes tearShift { 50% { transform: translateX(18px) skewX(-16deg); opacity: 0.55; } }
@keyframes resolvePath { 0% { stroke-dashoffset: 1000; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes flame { 50% { transform: rotate(45deg) scale(0.88, 1.12); filter: blur(1px) drop-shadow(0 0 16px var(--parchment)); } }

@media (max-width: 860px) {
  .index-tabs { display: none; }
  .plate { padding: 28px; }
  .plate-grid { display: block; }
  .wordmark { padding-top: 8vh; }
  .causality-collage { min-height: 62vh; margin-top: 4vh; }
  .event-slip { width: 215px; }
  .branch-diagram, .resolution-map, .collision-wall { position: relative; inset: auto; width: 100%; height: 56vh; margin-top: 28px; }
  .z-right { margin-top: 10vh; text-align: left; }
  .marginalia, .warning-stamp { position: relative; right: auto; left: auto; bottom: auto; margin-top: 24px; }
}