/* The descent, the creatures, the death band, the signal and the mast. */
.descent {
  padding-block: var(--section-gap-s) var(--section-gap);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.descent-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl) var(--gap-columns);
  align-items: center;
}
.descent-copy {
  display: grid;
  gap: var(--space-lg);
}
.depths {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}
.depths li {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr);
  column-gap: var(--space-md);
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.depths .depth-no {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  color: var(--color-accent);
}
.depths b {
  color: var(--color-ink);
}
.depths span:not(.depth-no) {
  color: var(--color-ink-2);
}
.endings {
  color: var(--color-display);
}
.descent-shot .frame {
  aspect-ratio: 16 / 9;
}
.descent-shot img {
  object-position: 60% 50%;
}

.creatures {
  padding-block: var(--section-gap) var(--section-gap-s);
}
.register {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-columns);
}
.creature {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  min-height: 280px;
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-paper-2);
}
.creature-glyph {
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--glyph, var(--color-ink));
}
.creature p {
  color: var(--color-ink-2);
}
.catalogue {
  display: flex;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
  color: var(--color-ink-2);
}
.catalogue strong {
  margin-right: var(--space-xs);
  font-size: var(--text-3xl);
  font-weight: 400;
}

.death {
  padding-block: var(--section-gap-s);
  background: var(--color-paper-3);
  color: var(--color-ink);
}
.death .container {
  display: grid;
  gap: var(--space-lg);
}
.statement {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  line-height: 1.08;
  color: var(--color-display);
  text-wrap: balance;
}
.death p:not(.statement) {
  max-width: 60ch;
  font-size: var(--text-lead);
  color: var(--color-ink-2);
}

.signal {
  padding-block: var(--section-gap-l) var(--section-gap);
}
.signal-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: calc(var(--gap-columns) * 3);
  row-gap: var(--space-xl);
  align-items: start;
}
.signal-copy {
  display: grid;
  gap: var(--space-lg);
  font-size: var(--text-lead);
}
.next {
  color: var(--color-ink-2);
}
.fill {
  padding: 0 0.25em;
  border: 1px dashed var(--color-rule-strong);
  color: var(--color-muted);
}

.mast {
  padding-block: var(--space-3xl) var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.mast-mark {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7.4vw, 7rem);
  line-height: 1;
  color: var(--color-rule-strong);
  white-space: nowrap;
}
.mast-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  color: var(--color-ink-2);
}
.mast a {
  color: var(--color-ink);
}

@media (max-width: 60rem) {
  .descent-grid,
  .signal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .register {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}