/* SYSTEMS index links and long-form urban-metabolism stories. */
.system-grid .system-card {
  display: block;
  color: #fff;
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}
.system-grid .system-card:hover,
.system-grid .system-card:focus-visible {
  z-index: 2;
  border-color: #d8ff6a;
  transform: translateY(-5px);
}
.system-card > b {
  position: absolute;
  inset: auto 22px 20px auto;
  z-index: 3;
  color: #d8ff6a;
  font: 700 23px/1 "DM Mono", monospace;
  transition: transform .22s ease;
}
.system-card:hover > b,
.system-card:focus-visible > b { transform: translate(4px, -4px); }
.system-grid .system-card small { right: 56px; font-weight: 700; }

.system-story { --story-accent: #8eefff; }
.system-story[data-system-story="water"] { --story-accent: #8eefff; }
.system-story[data-system-story="food-air"] { --story-accent: #bfff78; }
.system-story[data-system-story="energy"] { --story-accent: #ffd36a; }
.system-story[data-system-story="materials"] { --story-accent: #d4b5ff; }
.system-story .life-story-hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 82% 42%, color-mix(in srgb, var(--story-accent) 16%, transparent), transparent 28%),
    linear-gradient(135deg, #07131f, #03070c 64%);
  background-size: 54px 54px, 54px 54px, auto, auto;
}
.system-story .life-story-orbit { border-radius: 12%; transform: rotate(45deg); }
.system-story .life-story-orbit::before { inset: 18%; border-radius: 18%; }
.system-story .life-story-orbit::after { inset: 36%; border-radius: 50%; }
.system-story .life-story-orbit i:first-child { inset: 48% -12%; border-radius: 999px; transform: rotate(-45deg); }
.system-story .life-story-orbit i:nth-child(2) { inset: -12% 48%; border-radius: 999px; transform: rotate(-45deg); }
.system-story .life-story-orbit b { transform: translate(-50%, -50%) rotate(-45deg); }
.system-story-code {
  color: #fff;
  font: 700 clamp(36px, 4.6vw, 68px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.06em;
}

@media (max-width: 650px) {
  .system-grid .system-card { min-height: 330px; }
}