.collection-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-bottom: 0;
  border-bottom: 2px solid var(--forest-dark);
  isolation: isolate;
  background-position: center;
  background-size: cover;
}

.collection-cover::after {
  position: absolute;
  z-index: 7;
  inset: 0;
  background-image: linear-gradient(transparent 65%, rgba(0, 0, 0, 0.13)), url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  content: "";
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cover-edition {
  position: absolute;
  z-index: 8;
  top: 22px;
  left: 22px;
  padding: 7px 9px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.cover-apollo {
  background-color: #18213e;
  color: #fff2cf;
}

.cover-orbit {
  position: absolute;
  top: 23%;
  left: -20%;
  width: 140%;
  height: 58%;
  border: 2px solid #ffbb4f;
  border-radius: 50%;
  transform: rotate(-19deg);
}

.cover-moon {
  position: absolute;
  right: 10%;
  bottom: 11%;
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f4dba0;
  box-shadow: inset -34px -8px 0 #d06a42;
}

.cover-module {
  position: absolute;
  z-index: 3;
  top: 39%;
  left: 31%;
  width: 25%;
  height: 22%;
  clip-path: polygon(24% 0, 76% 0, 91% 58%, 68% 58%, 83% 100%, 66% 100%, 50% 67%, 34% 100%, 17% 100%, 32% 58%, 9% 58%);
  background: #fff2cf;
}

.cover-ai {
  background-color: #c7ff49;
  color: #122019;
}

.cover-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(18, 32, 25, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 32, 25, 0.16) 1px, transparent 1px);
  background-size: 36px 36px;
}

.cover-node {
  position: absolute;
  z-index: 3;
  border: 3px solid #122019;
  border-radius: 50%;
  background: #ff704c;
  box-shadow: 0 0 0 18px rgba(18, 32, 25, 0.1);
}

.cover-node::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  height: 3px;
  transform-origin: left;
  background: #122019;
  content: "";
}

.node-one { top: 25%; left: 18%; width: 58px; height: 58px; }
.node-one::after { transform: rotate(25deg); }
.node-two { top: 50%; right: 20%; width: 94px; height: 94px; background: #2e4cff; }
.node-two::after { width: 130px; transform: rotate(118deg); }
.node-three { bottom: 13%; left: 24%; width: 40px; height: 40px; background: #fff8e5; }

.cover-mac {
  background-color: #f3d4bc;
  color: #4d2f2b;
}

.cover-computer {
  position: absolute;
  top: 22%;
  left: 18%;
  width: 64%;
  height: 48%;
  border: 3px solid #4d2f2b;
  border-radius: 18px 18px 5px 5px;
  background: #e6d8c4;
  box-shadow: 18px 20px 0 #ff6b49;
}

.cover-computer::before {
  position: absolute;
  top: 13%;
  right: 13%;
  left: 13%;
  height: 54%;
  border: 3px solid #4d2f2b;
  border-radius: 6px;
  background: #203d34;
  content: "";
}

.cover-computer i {
  position: absolute;
  right: 18%;
  bottom: 9%;
  width: 14%;
  height: 5%;
  border-radius: 50%;
  background: #4d2f2b;
}

.cover-cursor {
  position: absolute;
  z-index: 4;
  top: 36%;
  left: 43%;
  width: 38px;
  height: 58px;
  clip-path: polygon(0 0, 100% 66%, 58% 69%, 75% 100%, 55% 100%, 39% 73%, 0 100%);
  background: var(--acid);
}

.cover-genome {
  background-color: #45286f;
  color: #ffe9cb;
}

.cover-dna {
  position: absolute;
  top: 15%;
  width: 22%;
  height: 74%;
  border-right: 8px solid #ff704c;
  border-left: 8px solid #7ff3d1;
  border-radius: 50%;
}

.cover-dna::after {
  position: absolute;
  inset: 5% -15%;
  background: repeating-linear-gradient(to bottom, transparent 0 24px, #ffe9cb 25px 29px, transparent 30px 45px);
  content: "";
}

.dna-one { left: 13%; transform: rotate(12deg); }
.dna-two { left: 39%; transform: rotate(-8deg); }
.dna-three { right: 10%; transform: rotate(17deg); }

.cover-climate {
  background-color: #9de1e7;
  color: #173b3d;
}

.cover-sun {
  position: absolute;
  top: 15%;
  right: 13%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff6946;
  box-shadow: 0 0 0 22px rgba(255, 201, 74, 0.48);
}

.cover-horizon {
  position: absolute;
  left: -10%;
  width: 120%;
  border-radius: 50% 50% 0 0;
}

.horizon-one { bottom: -20%; height: 62%; background: #143f31; }
.horizon-two { z-index: 2; bottom: -26%; height: 50%; background: #d8ff67; transform: rotate(7deg); }
.horizon-three { z-index: 3; bottom: -39%; height: 53%; background: #2e4cff; transform: rotate(-5deg); }

.cover-unix {
  background-color: #171717;
  color: #d8ff67;
}

.cover-terminal {
  position: absolute;
  top: 25%;
  left: 15%;
  color: #d8ff67;
  font-family: var(--mono);
  font-size: 84px;
  font-weight: 900;
  letter-spacing: -0.16em;
}

.cover-branch {
  position: absolute;
  top: 50%;
  left: 25%;
  width: 58%;
  height: 28%;
  border-bottom: 5px solid #ff6946;
  border-left: 5px solid #ff6946;
  border-radius: 0 0 0 30px;
}

.cover-branch::after {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff6946;
  content: "";
}

.branch-two {
  top: 57%;
  left: 42%;
  width: 35%;
  height: 18%;
  transform: scaleY(-1);
  border-color: #2e4cff;
}

.branch-two::after { background: #2e4cff; }

.collection-type {
  margin-bottom: 8px !important;
  color: #7a8580 !important;
  font-size: 9px !important;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.collection-copy h3 {
  margin-bottom: 10px;
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 800;
}

.collection-copy {
  padding: 24px;
}

.collection-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: #69736f;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}