.industrial-article {
  --industrial-warm: 241, 213, 143;
  --industrial-cold: 111, 234, 255;
}

.industrial-article .editorial-cover {
  min-height: 110svh;
}

.industrial-article .editorial-cover h1 {
  max-width: 12ch;
  font-size: clamp(4.8rem, 10vw, 9.6rem);
  line-height: 0.8;
}

.industrial-article .editorial-cover-deck {
  max-width: 650px;
}

.industrial-particle-key {
  position: fixed;
  top: 50%;
  left: clamp(12px, 2vw, 32px);
  z-index: 72;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.industrial-particle-key span {
  display: grid;
  grid-template-columns: 18px auto;
  gap: 8px;
  align-items: center;
  color: rgba(236, 230, 218, 0.24);
  font: 700 0.52rem/1 ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 260ms ease, transform 260ms ease;
}

.industrial-particle-key span::before {
  content: "";
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

body[data-particle-layout="field"] .industrial-particle-key span:nth-child(1),
body[data-particle-layout="horizon"] .industrial-particle-key span:nth-child(2),
body[data-particle-layout="gate"] .industrial-particle-key span:nth-child(3),
body[data-particle-layout="fall"] .industrial-particle-key span:nth-child(3),
body[data-particle-layout="lattice"] .industrial-particle-key span:nth-child(4) {
  color: rgb(var(--industrial-warm));
  transform: translateX(5px);
}

.industrial-article .editorial-chapter {
  min-height: 100svh;
  isolation: isolate;
}

.industrial-article .editorial-chapter::before {
  content: "";
  position: absolute;
  inset: 13% 2% 10% 52%;
  z-index: -1;
  border: 1px solid rgba(var(--industrial-warm), 0.11);
  background:
    linear-gradient(132deg, transparent 0 38%, rgba(var(--industrial-warm), 0.055) 39% 39.4%, transparent 40% 68%, rgba(var(--industrial-cold), 0.045) 69% 69.4%, transparent 70%),
    radial-gradient(circle at 58% 46%, rgba(var(--industrial-warm), 0.07), transparent 55%);
  clip-path: polygon(8% 0, 100% 9%, 88% 100%, 0 82%);
  opacity: 0.72;
}

.industrial-article .chapter-copy {
  position: relative;
  padding: clamp(28px, 4vw, 54px);
  background: linear-gradient(105deg, rgba(2, 2, 2, 0.92), rgba(2, 2, 2, 0.64) 72%, transparent);
  box-shadow: -20px 0 70px rgba(0, 0, 0, 0.56);
  clip-path: polygon(0 0, 96% 0, 100% 14px, 100% 100%, 0 100%);
}

.industrial-article .chapter-copy em {
  color: var(--editorial-paper);
}

.industrial-interlude {
  grid-template-rows: 1fr auto;
  padding-bottom: 28px;
  background:
    radial-gradient(circle at 68% 46%, rgba(var(--industrial-warm), 0.11), transparent 24rem),
    linear-gradient(126deg, rgba(3,3,3,0.9), rgba(11,9,5,0.62) 52%, rgba(2,2,2,0.82));
}

.industrial-interlude span {
  position: relative;
  z-index: 2;
  color: rgba(236, 230, 218, 0.42);
  font: 700 0.56rem/1 ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .industrial-particle-key {
    display: none;
  }

  .industrial-article .editorial-cover {
    min-height: 100svh;
  }

  .industrial-article .editorial-cover h1 {
    max-width: 10ch;
    font-size: clamp(4.2rem, 15vw, 7.8rem);
  }

  .industrial-article .editorial-chapter::before {
    inset: 38% -12% 8% 24%;
    opacity: 0.48;
  }

  .industrial-article .chapter-copy {
    padding: 26px 0 0;
    background: linear-gradient(180deg, rgba(2,2,2,0.92), rgba(2,2,2,0.54) 76%, transparent);
    box-shadow: none;
    clip-path: none;
  }
}

@media (max-width: 620px) {
  .industrial-article .editorial-cover h1 {
    font-size: clamp(3.45rem, 16.5vw, 5.4rem);
    line-height: 0.84;
  }

  .industrial-article .editorial-chapter {
    padding-block: 92px 110px;
  }

  .industrial-article .chapter-copy {
    font-size: 1.08rem;
    line-height: 1.75;
  }

  .industrial-interlude {
    min-height: 56svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industrial-particle-key span {
    transition: none;
  }
}