/* Keep the intro, month headings, cards and footer on the same edges. */
body.spot main.wrap.spotlight-page > * {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Flat introduction, following The Wire and the video log. */
.spotlight-hero { padding-block: 24px 12px; }
.spotlight-hero__eyebrow { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 2px; }
.spotlight-hero h1 { font-size: clamp(64px, 8vw, 100px); line-height: 1; margin: 12px 0; }
.spotlight-hero__tagline { font: 30px/1.2 var(--font-px); margin: 0 0 12px; text-wrap: pretty; }
@media (max-width: 720px) {
  .spotlight-hero { padding-top: 4px; }
}

/* Reuse The Wire's section headings across the full card grid. */
main.wrap > .spotlight-section-heading {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  justify-content: flex-start;
  text-align: left;
}

/* A single window holds each spotlight's screenshot and story. */
.spotlight-grid {
  grid-template-columns: repeat(2, minmax(0, var(--win)));
  align-items: stretch;
}
.spotlight-card { display: flex; flex-direction: column; min-width: 0; }
.spotlight-card__image {
  display: flex;
  align-items: center;
  aspect-ratio: 4 / 3;
  border-bottom: var(--hair) solid var(--ink);
  background: var(--paper);
}
.spotlight-card__image img { display: block; width: 100%; }
.spotlight-card__image img[src$=".jpg"] { image-rendering: auto; }
.spotlight-card .win__body { display: flex; flex-direction: column; flex: 1; }
.spotlight-card .win__body > .specs { margin-block-start: auto; }
.spotlight-card .win__body > p:last-of-type { margin-bottom: var(--pad); }
@media (max-width: 900px) {
  main.spotlight-page { max-width: calc(var(--win) + 2 * var(--gap)); }
  .spotlight-grid { grid-template-columns: minmax(0, 1fr); }
}