/* Supplemental rows follow the main artwork and remain fluid within its page gutters. */
/* Let the supplemental background extend through the existing outer page space. */
.page-wrapper,
.content-container {
  padding-bottom: 0;
}
.project-supplements {
  background-color: #f8f7f5;
  margin-inline: calc(-1 * clamp(40px, 11vw, 150px));
  padding: calc(clamp(24px, 3vw, 44px) + 40px) clamp(40px, 11vw, 150px);
  padding-bottom: calc(clamp(30px, 5vh, 50px) + clamp(50px, 8vh, 100px));
  display: grid;
  row-gap: clamp(72px, 10vw, 160px);
  margin-top: calc(clamp(88px, 12vw, 180px) - 20px);
}
.supplement-row {
  display: grid;
  grid-template-areas: "copy media";
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  column-gap: clamp(28px, 5vw, 88px);
  width: 86%;
  margin-inline: auto;
}
.supplement-row.supplement-row--text {
  grid-template-areas: "copy";
  grid-template-columns: minmax(0, 1fr);
}
.supplement-row--narrow {
  width: 64.5%;
}
.supplement-row--compact {
  /* Enlarge the image and center it with the label at a moderate distance. */
  --supplement-original-gap: clamp(28px, 5vw, 88px);
  grid-template-columns: max-content minmax(0, calc((100% - var(--supplement-original-gap)) * var(--supplement-media-fraction, 0.69)));
  column-gap: clamp(24px, 3.5vw, 56px);
  justify-content: center;
}
.supplement-row--reference {
  /* Preserve the reference image's half-size while closing the empty copy column. */
  --supplement-media-fraction: 0.2875;
}
.supplement-row--game {
  width: 96%;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
}
.supplement-copy {
  grid-area: copy;
  min-width: 0;
}
.supplement-copy h3 {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 2px;
}
.supplement-copy p {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.9;
  text-align: left;
  overflow-wrap: break-word;
}
.supplement-copy .supplement-meta {
  font-size: clamp(12px, 1vw, 14px);
  color: #777;
  margin-bottom: clamp(14px, 1.8vw, 24px);
}
.supplement-media {
  grid-area: media;
  min-width: 0;
  margin: 0;
}
.supplement-media img {
  display: block;
  width: 100%;
  height: auto;
}
.supplement-media--half img {
  width: 50%;
  margin-inline: auto;
}
.supplement-media--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(4px, 0.5vw, 8px);
}
.supplement-media--grid img {
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: #f4f3f0;
}
@media (max-width: 991.98px) {
  .supplement-row,
  .supplement-row--game {
    width: 100%;
    grid-template-areas: "media" "copy";
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(22px, 4vw, 36px);
  }
  .supplement-row--narrow {
    width: 90%;
  }
  .supplement-row--reference .supplement-media {
    width: 50%;
    justify-self: center;
  }
}

.supplement-copy p + p {
  margin-top: 1em;
}

.supplement-media--stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.5vw, 24px);
}

.supplement-row--top {
  align-items: start;
}

@media (min-width: 992px) {
  .supplement-row--playground-video {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr);
  }
}