.legacy-open {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--s-8)) var(--gutter) var(--s-8);
  text-align: center;
}

.legacy-open__body {
  max-width: 640px;
}

.legacy-open__body .measure {
  margin-inline: auto;
}

.legacy-open__seal {
  display: block;
  width: 56px;
  margin: 0 auto var(--s-6);
}

.legacy-open__seal img {
  width: 100%;
  height: auto;
}

.legacy-open__title {
  max-width: 11ch;
  margin-inline: auto;
  font: 400 clamp(52px, 7.4vw, 108px)/1.02 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ivory);
}

.legacy-open__body > :nth-child(2) {
  --reveal-delay: var(--reveal-delay-1);
}

.legacy-open__word {
  --reveal-delay: calc(var(--reveal-delay-2) + var(--i) * var(--reveal-word-step));

  display: inline-block;
}

.legacy-open__cue {
  position: absolute;
  bottom: var(--s-7);
  left: 50%;
  display: grid;
  justify-items: center;
  color: var(--gold);
  transform: translateX(-50%);
}

.legacy-open__cue svg {
  width: 12px;
  height: auto;
}

.legacy-numeral {
  margin-bottom: 0;
}

.stack > .legacy-numeral + * {
  margin-top: var(--s-4);
}

.stack > [data-reveal]:nth-child(2) {
  --reveal-delay: var(--reveal-delay-1);
}

.stack > [data-reveal]:nth-child(3) {
  --reveal-delay: var(--reveal-delay-2);
}

.stack > [data-reveal]:nth-child(4) {
  --reveal-delay: var(--reveal-delay-3);
}

.legacy-open__body > [data-reveal]:nth-child(4) {
  --reveal-delay: calc(var(--reveal-delay-2) + var(--words) * var(--reveal-word-step));
}

.legacy-chapter {
  max-width: 640px;
  margin-inline: auto;
}

.legacy-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: var(--s-7) var(--gap);
}

.legacy-split__media {
  grid-column: 1 / span 6;
}

.legacy-split__text {
  grid-column: 8 / span 5;
}

.legacy-split--reverse .legacy-split__media {
  grid-column: 7 / span 6;
  order: 2;
}

.legacy-split--reverse .legacy-split__text {
  grid-column: 1 / span 5;
  order: 1;
}

.legacy-frame {
  position: relative;
  max-width: 620px;
  overflow: hidden;
  background: var(--ink-2);
}

.legacy-split--reverse .legacy-frame {
  margin-left: auto;
}

.legacy-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transform: scale(1.02);
}

.legacy-frame--2x3 {
  aspect-ratio: 2 / 3;
}

.legacy-frame--4x5 {
  aspect-ratio: 4 / 5;
}

@media (width <= 899px) {
  .legacy-split__media,
  .legacy-split__text,
  .legacy-split--reverse .legacy-split__media,
  .legacy-split--reverse .legacy-split__text {
    grid-column: 1 / -1;
    order: 0;
  }

  .legacy-frame {
    max-width: none;
  }
}

.stack > .legacy-pullquote {
  max-width: 24ch;
  margin: var(--s-7) 0 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}

.legacy-becoming {
  max-width: 26ch;
  margin: var(--s-4) auto 0;
  text-wrap: balance;
}

.legacy-becoming[data-reveal] {
  --reveal-delay: var(--reveal-delay-1);
}

.legacy-belief {
  max-width: 34ch;
  margin: 0 auto;
  text-wrap: balance;
}

.legacy-mark {
  display: block;
  width: 18px;
  margin: var(--s-7) auto 0;
  color: var(--fg-accent);
}

.legacy-mark svg {
  display: block;
  width: 100%;
  height: auto;
}

.legacy-closing {
  max-width: 18ch;
  margin-inline: auto;
  font-style: italic;
  color: var(--ivory);
  text-wrap: balance;
}