:root {
  /* Interactive Restraint* Restraint:* Restraint Restraint: Restraint:: Restraint:** IntersectionObserver` with threshold of 0.15 to trigger entry animations. Text blocks enter via a subtle `translateY(30px Source Serif 4 / Space Grotesk combination (display-bold at 6% frequency (Google Fonts */
  --bg: #1c1c28;
  --black: #0a0a12;
  --indigo: #2a1f4e;
  --bone: #e8e0d4;
  --fog: #8a8494;
  --copper: #b87333;
  --teal: #3d8b8b;
  --lavender: #9b8ec4;
  --scroll-shift: 0;
}

* { box-sizing: border-box; }

html {
  scroll-snap-type: y proximity;
  background: var(--black);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--bone);
  background: color-mix(in srgb, var(--bg) calc(100% - var(--scroll-shift)), var(--indigo) var(--scroll-shift));
  font-family: "Source Serif 4", serif;
  overflow-x: hidden;
  transition: background 300ms linear;
}

.snap { scroll-snap-align: start; }

.page-rule {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 15vw;
  width: 1px;
  background: rgba(155, 142, 196, 0.2);
  z-index: 20;
  pointer-events: none;
}

.elapsed {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 30;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--fog);
}

.proclamation {
  position: relative;
  min-height: 100vh;
  background: var(--black);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.opening-line {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 10px;
  height: 100vh;
  transform: translateX(-50%);
}

.opening-line line {
  stroke: rgba(184, 115, 51, 0.5);
  stroke-width: 1;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: lineDraw 2s ease-out 500ms forwards;
}

.proclamation-type {
  position: relative;
  width: min(88vw, 1400px);
  z-index: 2;
}

.proclamation h1 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(6rem, 15vw, 14rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--bone);
}

.proclamation h1 span {
  display: block;
  opacity: 0;
  transform: translateY(1rem);
}

.martial { animation: proclamationFade 1.5s ease 2.45s forwards; }
.law { margin-left: 30vw; animation: proclamationFade 1.5s ease 2.85s forwards; }

.domain-suffix {
  margin: 2rem 0 0 30.5vw;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(0.85rem, 1.6vw, 1.2rem);
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--lavender);
  opacity: 0;
  animation: proclamationFade 1.2s ease 3.45s forwards;
}

.descent-line {
  position: absolute;
  left: calc(50% + 16vw);
  bottom: 0;
  width: 1px;
  height: 28vh;
  background: rgba(184, 115, 51, 0.5);
  transform: scaleY(0);
  transform-origin: top;
  animation: descend 1.2s ease 3.8s forwards;
}

.article {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(18rem, 2fr) minmax(7rem, 1fr);
  gap: clamp(2rem, 4vw, 5rem);
  padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 5vw, 6rem);
  border-top: 4px solid rgba(184, 115, 51, 0.4);
  align-items: start;
}

.marginal {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 300;
  font-size: clamp(0.7rem, 1.2vw, 0.85rem);
  letter-spacing: 0.06em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--fog);
  border-top: 1px solid rgba(138, 132, 148, 0.35);
  padding-top: 1rem;
}

.marginal span,
.marginal em { display: block; }
.marginal em { text-transform: none; letter-spacing: 0.03em; color: var(--lavender); }

.article-body {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.reveal.is-visible .article-body { opacity: 1; transform: translateY(0); }

.section-number {
  height: 7.5rem;
  overflow: hidden;
  font-family: "Bebas Neue", sans-serif;
  font-size: 8rem;
  line-height: 0.92;
  letter-spacing: 0.08em;
  color: var(--copper);
}

.stamp-title {
  margin: 1rem 0 2rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--bone);
}

.stamp-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.stamp-title .char.space { width: 0.25em; }
.reveal.is-visible .stamp-title .char { opacity: 1; transform: translateY(0); transition-delay: calc(var(--char-index) * 40ms); }

.article p {
  margin: 0 0 1.5rem;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
}

.dense p { max-width: 56rem; }
.sparse { padding-top: 10vh; }

.interlude {
  height: 40vh;
  display: grid;
  place-items: center;
  border-top: 4px solid rgba(184, 115, 51, 0.4);
  overflow: hidden;
}

.interlude-indigo { background: var(--indigo); }
.interlude-charcoal { background: var(--bg); }

.geometry { opacity: 0.95; }

.watching-circle {
  position: relative;
  width: 40vmin;
  height: 40vmin;
}

.outer-ring,
.inner-ring {
  position: absolute;
  border: 2px solid var(--copper);
  border-radius: 50%;
}

.outer-ring { inset: 0; }
.inner-ring { width: 38%; height: 38%; left: 37%; top: 25%; transform-origin: 35% 65%; }
.is-active .inner-ring { animation: rotate 60s linear infinite; }
.watching-circle:hover .inner-ring { animation-duration: 4s; }

.hierarchy-triangle {
  width: 34vmin;
  height: 30vmin;
  overflow: visible;
}

.side {
  fill: none;
  stroke-width: 4;
  stroke-linecap: square;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}

.side-one { stroke: var(--copper); }
.side-two { stroke: var(--lavender); }
.side-three { stroke: var(--teal); }
.is-active .side-one { animation: dashCycle 3s ease-in-out infinite alternate; }
.is-active .side-two { animation: dashCycle 5s ease-in-out infinite alternate; }
.is-active .side-three { animation: dashCycle 8s ease-in-out infinite alternate; }
.hierarchy-triangle:hover .side { animation-play-state: paused; }

.control-grid {
  display: grid;
  grid-template-columns: repeat(5, 1.5vmin);
  gap: 1.6vmin;
  padding: 2vmin;
  border: 1px solid rgba(138, 132, 148, 0.3);
}

.control-grid span {
  width: 1.5vmin;
  height: 1.5vmin;
  background: var(--teal);
  opacity: 0.2;
}

.is-active.control-grid span { animation: gridBreathe 3.4s ease-in-out infinite; animation-delay: calc(var(--grid-index) * 117ms); }
.control-grid:hover span { opacity: 1; animation-play-state: paused; }

.final-article { border-bottom: 4px solid rgba(184, 115, 51, 0.4); }

@keyframes lineDraw { to { stroke-dashoffset: 0; } }
@keyframes proclamationFade { to { opacity: 1; transform: translateY(0); } }
@keyframes descend { to { transform: scaleY(1); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes dashCycle { 0% { stroke-dashoffset: 220; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -220; } }
@keyframes gridBreathe { 0%, 100% { opacity: 0.18; } 45% { opacity: 0.9; } }

@media (max-width: 820px) {
  .page-rule { left: 1rem; }
  .law, .domain-suffix { margin-left: 18vw; }
  .article { grid-template-columns: 1fr; gap: 1.5rem; }
  .marginal.right { max-width: 18rem; }
}