.void-hero .hero-copy h1 {
  max-width: 820px;
  font-size: clamp(3rem, 5vw, 5rem);
  overflow-wrap: normal;
}

.void-hero .hero-copy h1 span {
  color: var(--cyan);
}

.void-graphic {
  background:
    radial-gradient(circle at 78% 35%, rgba(212, 182, 111, 0.12), transparent 35%),
    radial-gradient(circle at 22% 52%, rgba(99, 214, 198, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 38%),
    rgba(10, 13, 18, 0.84);
}

.void-graphic text {
  fill: rgba(236, 232, 220, 0.74);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-anchor: middle;
}

.scale-axis path,
.blindness-lines path,
.ai-flow {
  fill: none;
  stroke: url(#agencyLine);
  stroke-linecap: round;
  stroke-width: 2;
  stroke-dasharray: 8 13;
  animation: voidFlow 7.2s linear infinite;
}

.scale-axis text {
  fill: rgba(170, 164, 146, 0.78);
  font-size: 11px;
}

.blindness-lines path {
  opacity: 0.52;
}

.blindness-lines path:nth-child(2) {
  animation-duration: 8.8s;
  animation-direction: reverse;
}

.blindness-lines path:nth-child(3) {
  opacity: 0.34;
  animation-duration: 11s;
}

.fly-body,
.fly-head {
  fill: rgba(212, 182, 111, 0.2);
  stroke: rgba(212, 182, 111, 0.72);
  stroke-width: 1.5;
}

.fly-wing {
  fill: rgba(99, 214, 198, 0.08);
  stroke: rgba(99, 214, 198, 0.48);
  stroke-width: 1.3;
  transform-origin: center;
  animation: flyWing 0.82s ease-in-out infinite;
}

.fly-wing--right {
  animation-delay: -0.18s;
}

.fly-leg,
.fly-antenna {
  fill: none;
  stroke: rgba(236, 232, 220, 0.5);
  stroke-linecap: round;
  stroke-width: 1.3;
}

.ai-horizon {
  fill: rgba(99, 214, 198, 0.07);
  stroke: rgba(99, 214, 198, 0.44);
  stroke-width: 1.4;
  animation: aiHorizon 4.8s ease-in-out infinite;
}

.ai-orbit,
.void-ring {
  fill: none;
  stroke: rgba(99, 214, 198, 0.42);
  stroke-width: 1.4;
  stroke-dasharray: 5 10;
  transform-origin: center;
  animation: voidOrbit 14s linear infinite;
}

.ai-orbit--b {
  stroke: rgba(212, 182, 111, 0.42);
  animation-duration: 11s;
  animation-direction: reverse;
}

.ai-flow--b {
  animation-duration: 5.8s;
  animation-direction: reverse;
}

.ai-node,
.void-galaxy {
  fill: var(--gold);
  filter: drop-shadow(0 0 12px rgba(212, 182, 111, 0.52));
  animation: voidNode 3.8s ease-in-out infinite;
}

.ai-node:nth-of-type(2),
.void-galaxy:nth-of-type(2) {
  animation-delay: -0.5s;
}

.ai-node:nth-of-type(3),
.void-galaxy:nth-of-type(3) {
  animation-delay: -1s;
}

.ai-node:nth-of-type(4),
.void-galaxy:nth-of-type(4) {
  animation-delay: -1.5s;
}

.void-core {
  fill: url(#voidGlow);
  stroke: rgba(212, 182, 111, 0.2);
  stroke-width: 1.4;
  animation: voidPulse 5.6s ease-in-out infinite;
}

.void-ring {
  stroke: rgba(212, 182, 111, 0.4);
  animation-duration: 18s;
}

.void-ring--b {
  stroke: rgba(99, 214, 198, 0.28);
  animation-direction: reverse;
  animation-duration: 22s;
}

.void-ring--c {
  stroke: rgba(106, 143, 220, 0.26);
  animation-duration: 26s;
}

.void-graphic .caption {
  fill: rgba(170, 164, 146, 0.76);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-anchor: start;
}

.void-content .opening-note {
  color: rgba(236, 232, 220, 0.88);
}

.void-content a {
  color: var(--gold);
  text-decoration-color: rgba(212, 182, 111, 0.38);
  text-underline-offset: 0.18em;
}

.void-content a:hover,
.void-content a:focus-visible {
  color: var(--cyan);
  outline: none;
}

.void-thesis,
.epistemic-void,
.companion-block {
  margin: 2.1rem 0;
  border: 1px solid rgba(99, 214, 198, 0.2);
  background:
    radial-gradient(circle at 86% 12%, rgba(99, 214, 198, 0.12), transparent 34%),
    linear-gradient(90deg, rgba(212, 182, 111, 0.08), transparent),
    rgba(13, 16, 22, 0.74);
  padding: 1.25rem 1.4rem;
}

.void-thesis {
  color: var(--gold);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 780;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.epistemic-void span,
.agency-order-grid span,
.topography-matrix span,
.scale-map span {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--cyan);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.epistemic-void p,
.companion-block p {
  margin-bottom: 0;
  color: rgba(236, 232, 220, 0.78);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  line-height: 1.62;
}

.agency-order-grid,
.topography-matrix,
.scale-map {
  display: grid;
  gap: 1px;
  margin: 2rem 0;
  border: 1px solid rgba(214, 199, 150, 0.16);
  background: rgba(214, 199, 150, 0.14);
}

.agency-order-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.topography-matrix {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scale-map {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agency-order-grid section,
.topography-matrix section,
.scale-map section {
  background:
    linear-gradient(180deg, rgba(99, 214, 198, 0.045), transparent 54%),
    rgba(13, 16, 22, 0.82);
  padding: 1rem;
}

.topography-matrix section:first-child {
  border-left: 3px solid rgba(212, 182, 111, 0.72);
}

.topography-matrix section:last-child {
  border-left: 3px solid rgba(99, 214, 198, 0.68);
}

.agency-order-grid h3,
.topography-matrix h3,
.scale-map h3 {
  margin: 0 0 0.65rem;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.25;
}

.agency-order-grid p,
.topography-matrix p,
.scale-map p {
  margin-bottom: 0;
  color: rgba(236, 232, 220, 0.78);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.94rem;
  line-height: 1.62;
}

.companion-block p + p {
  margin-top: 0.85rem;
}

.companion-block p:last-child {
  color: var(--gold);
}

.related-primary {
  background:
    radial-gradient(circle at 82% 18%, rgba(99, 214, 198, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(212, 182, 111, 0.08), transparent 44%),
    rgba(13, 16, 22, 0.66);
}

.related-primary span {
  color: var(--gold);
}

@keyframes voidFlow {
  to {
    stroke-dashoffset: -52;
  }
}

@keyframes flyWing {
  50% {
    opacity: 0.42;
    transform: scaleY(0.76) rotate(4deg);
  }
}

@keyframes aiHorizon {
  50% {
    opacity: 0.58;
    transform: scale(1.04);
  }
}

@keyframes voidOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes voidNode {
  50% {
    opacity: 0.38;
    transform: scale(1.35);
  }
}

@keyframes voidPulse {
  50% {
    opacity: 0.78;
    transform: scale(1.06);
  }
}

@media (max-width: 1080px) {
  .agency-order-grid,
  .scale-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .void-hero .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(2rem, 10.5vw, 2.65rem);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .agency-order-grid,
  .topography-matrix,
  .scale-map {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .void-hero .hero-copy h1 {
    font-size: clamp(1.8rem, 9.8vw, 2.25rem);
  }
}