/* Speakers · "Who has stood on this stage": eight headliners and twenty more names, in the two grammars that
   survived (evosoft grid, dc-dev cascade + card). Shares .q, .q-grid, .q__title, .q__lede and .q__num with
   questions.css. Readability first: no type on photographs, nothing overlaps type. No motifs. */

.sp__sub {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
  color: var(--loud);
  text-wrap: balance;
}

/* ---- The portrait card: photo, then name over role ---- */
.sp-card__link {
  display: grid;
  gap: var(--sp-stack-sm);
  align-content: start;
  height: 100%;
  color: inherit;
  text-decoration-line: none;
}

.sp-photo {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: clip;
}

.sp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--zoom, 1));
  transform-origin: var(--origin, center);
  transition: transform var(--duration-considered) var(--ease-standard);
}

.sp-card__link:hover .sp-photo img {
  transform: scale(calc(var(--zoom, 1) * 1.03));
}

.sp-caption {
  display: grid;
  gap: var(--sp-stack-xs);
}

.sp-name {
  font-family: var(--font-display);
  font-size: var(--type-lead);
  line-height: var(--text-h3--line-height);
}

.sp-card__link:hover .sp-name,
.sp-roster__link:hover .sp-name {
  text-decoration-line: underline;
  text-decoration-thickness: var(--stroke-hairline);
  text-underline-offset: 0.18em;
}

.sp-role {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--quiet);
}

/* ---- "Also on this stage": the twenty names as one running line ---- */
.sp-also {
  row-gap: var(--sp-stack-md);
  margin-top: var(--sp-stack-lg);
  align-items: baseline;
}

.sp-also h3 {
  grid-column: 2 / 4;
  font-family: var(--font-display);
  font-size: var(--type-lead);
  line-height: var(--text-h3--line-height);
  color: var(--loud);
}

.sp-also ul {
  grid-column: 4 / 8;
  font-family: var(--font-display);
  font-size: var(--type-lead);
  line-height: var(--text-h2--line-height);
  text-wrap: balance;
}

.sp-also__name {
  display: inline;
}

.sp-also__name:not(:last-child)::after {
  content: ' · ';
  color: var(--quiet);
}

/* ================= S1 · bento, paper ================= */
.sp1 .q__title {
  color: var(--foreground);
}

.sp1__intro {
  row-gap: var(--sp-stack-md);
  margin-top: var(--sp-stack-lg);
}

.sp1__intro {
  align-items: end;
}

.sp1__intro .sp__sub {
  grid-column: 2 / 5;
}

.sp1__intro .q__lede {
  grid-column: 5 / 8;
  max-width: var(--ms-md);
}

/* Six plain columns inside the gutters (no gutter tracks), so the seven auto-placed portraits never land in one. */
.sp1__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-stack-lg) var(--q-gap);
  margin-top: calc(var(--sp-section) * 0.6);
  padding-inline: var(--lay-gutter);
}

.sp1__grid ul {
  display: contents;
}

/* The lead takes two columns and both rows; the seven others fill four columns; the last cell is a figure. */
.sp1__grid .sp-card--lead {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.sp1__grid .sp-card--lead .sp-name {
  font-size: var(--type-heading);
}

.sp1__figure {
  grid-column: 6;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 4 / 5;
  padding: var(--tile-pad);
  background: var(--primary);
  color: var(--primary-foreground);
}

.sp1__figure b {
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: 1;
}

.sp1__figure span {
  color: var(--palette-rose-tint);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

/* ================= S2 · film strip, Jodhpuri =================
   A real strip: large portraits in one row running off the right edge, so the fourth is cut and invites the
   scroll. Snap per portrait; the counter and the two square steps sit with the intro on the grid. */
.sp2__intro {
  row-gap: var(--sp-stack-md);
  margin-top: var(--sp-stack-lg);
  align-items: end;
}

.sp2__intro .sp__sub {
  grid-column: 2 / 5;
}

.sp2__intro .q__lede {
  grid-column: 5 / 7;
}

.sp2__intro .reel__controls {
  grid-column: 7 / 8;
}

.sp2 .reel__strip .sp-name {
  font-size: calc(var(--type-heading) * 0.82);
  white-space: nowrap;
}

/* Two lines reserved for every role, so all eight captions share their baselines. */
.sp2 .reel__strip .sp-role {
  min-height: calc(var(--text-small) * var(--text-small--line-height) * 2);
}

@media (prefers-reduced-motion: reduce) {
  .sp-photo img {
    transition: none;
  }
}

/* ================= S3 · name cascade + portrait card, crimson ================= */
.sp3__stage {
  display: grid;
  grid-template-columns: calc(var(--sp-section) * 3.3) minmax(0, 1fr);
  gap: var(--sp-stack-lg);
  width: min(100% - var(--lay-gutter) * 2, var(--lay-wide));
  margin-inline: auto;
  align-items: start;
}

.sp3__head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: end;
  margin-bottom: var(--sp-stack-lg);
}

.sp3__head h2 {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
  color: var(--loud);
}

.sp3__head .q__lede {
  max-width: var(--ms-md);
  color: var(--palette-rose-tint);
}

/* The card shows whichever name is pointed at or focused; it sits beside the names, never over them. */
.sp3__card {
  display: grid;
  gap: var(--sp-stack-md);
  padding: var(--sp-inset-md);
  background: var(--background);
  color: var(--foreground);
}

.sp3__card .sp-name {
  font-size: var(--type-heading);
}

.sp3__card .sp-role {
  color: var(--foreground);
}

.sp3__names {
  container-type: inline-size;
}

.sp3__names ol {
  font-size: 8.4cqi;
  line-height: 0.98;
}

/* The running number, as on the Q5 wall: small sans on the name's baseline. */
.sp-cascade__num {
  margin-inline-end: var(--sp-inset-sm);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  font-feature-settings: normal;
  color: var(--palette-rose-tint);
  vertical-align: baseline;
}

.sp-cascade__item {
  width: fit-content;
  white-space: nowrap;
}

.sp-cascade__link {
  color: var(--loud);
  text-decoration-line: none;
}

.sp-cascade__item.is-current .sp-cascade__link {
  color: var(--ink);
}

.sp-cascade__link:focus-visible {
  outline-offset: var(--sp-optical);
}

.sp3__names li:nth-child(1) { margin-inline-start: 0%; }
.sp3__names li:nth-child(2) { margin-inline-start: 12%; }
.sp3__names li:nth-child(3) { margin-inline-start: 24%; }
.sp3__names li:nth-child(4) { margin-inline-start: 8%; }
.sp3__names li:nth-child(5) { margin-inline-start: 20%; }
.sp3__names li:nth-child(6) { margin-inline-start: 4%; }
.sp3__names li:nth-child(7) { margin-inline-start: 0%; }
.sp3__names li:nth-child(8) { margin-inline-start: 16%; }

.sp3 .sp-also {
  width: min(100% - var(--lay-gutter) * 2, var(--lay-wide));
  margin: calc(var(--sp-section) * 0.6) auto 0;
  display: grid;
  grid-template-columns: calc(var(--sp-section) * 3.3) minmax(0, 1fr);
  column-gap: var(--sp-stack-lg);
}

.sp3 .sp-also h3,
.sp3 .sp-also ul {
  grid-column: auto;
}

.sp3 .sp-also ul {
  color: var(--palette-rose-tint);
}

.sp3 .sp-also__name:not(:last-child)::after {
  color: var(--palette-dusty-rose);
}

/* ================= S4 · feature + roster, lapis ================= */
.sp4__head {
  row-gap: var(--sp-stack-md);
  align-items: end;
}

.sp4__head .q__title {
  grid-column: 2 / 6;
  font-size: var(--type-title);
  line-height: var(--text-h1--line-height);
}

.sp4__head .q__title > span {
  display: block;
}

.sp4__head .q__lede {
  grid-column: 6 / 8;
  color: var(--palette-jodhpuri-blue);
}

.sp4__body {
  row-gap: var(--sp-stack-lg);
  margin-top: calc(var(--sp-section) * 0.6);
  align-items: start;
}

.sp4__lead {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

.sp4__lead .sp-name {
  font-size: var(--type-heading);
}

.sp4__lead .sp-role,
.sp4 .sp-role {
  color: var(--palette-jodhpuri-blue);
}

/* Seven names and the figure make four even rows of two: the figure takes the empty eighth cell. */
.sp4__roster {
  grid-column: 4 / 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-stack-lg) var(--q-gap);
}

.sp4__roster ol {
  display: contents;
}

.sp4__figure {
  display: grid;
  grid-template-columns: calc(var(--text-small) * 2.2) minmax(0, 1fr);
  align-items: baseline;
  row-gap: var(--sp-stack-xs);
}

.sp4__figure b {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h3--line-height);
  color: var(--palette-jodhpuri-blue);
}

.sp4__figure span {
  grid-column: 2;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--palette-jodhpuri-blue);
}

.sp4__lead .sp-caption {
  grid-template-columns: calc(var(--text-small) * 2.2) minmax(0, 1fr);
  align-items: baseline;
}

.sp4__lead .sp-caption .q__num {
  margin-bottom: 0;
  color: var(--palette-jodhpuri-blue);
}

.sp4__lead .sp-role {
  grid-column: 2;
}

.sp-roster__link {
  display: grid;
  grid-template-columns: calc(var(--text-small) * 2.2) minmax(0, 1fr);
  align-items: baseline;
  color: inherit;
  text-decoration-line: none;
}

.sp-roster__link .q__num {
  margin-bottom: 0;
  color: var(--palette-jodhpuri-blue);
}

.sp4__roster .sp-name {
  font-size: var(--type-heading);
}

.sp4 .sp-also {
  grid-column: 4 / 8;
  grid-row: 2;
  display: grid;
  margin-top: 0;
}

.sp4 .sp-also h3,
.sp4 .sp-also ul {
  grid-column: 1 / -1;
}

.sp4 .sp-also h3 {
  color: var(--palette-jodhpuri-blue);
}

.sp4 .sp-also__name:not(:last-child)::after {
  color: var(--palette-jodhpuri-blue);
}

/* ================= Narrow ================= */
@media (max-width: 1099px) {
  .sp1__intro .sp__sub,
  .sp1__intro .q__lede,
  .sp2__intro .sp__sub,
  .sp2__intro .q__lede,
  .sp2__intro .reel__controls,
  .sp4__head .q__title,
  .sp4__head .q__lede,
  .sp-also h3,
  .sp-also ul {
    grid-column: 2 / 8;
  }

  .sp1__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sp1__grid .sp-card--lead {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .sp1__figure {
    grid-column: auto;
    grid-row: auto;
  }

  .sp2__intro .reel__controls {
    grid-column: 2 / 8;
    justify-content: flex-start;
  }

  .sp3__stage,
  .sp3 .sp-also {
    grid-template-columns: 1fr;
  }

  .sp3__head {
    grid-template-columns: 1fr;
    row-gap: var(--sp-stack-md);
  }

  .sp3__card {
    max-width: var(--ms-xs);
  }

  .sp4__lead,
  .sp4__roster,
  .sp4 .sp-also {
    grid-column: 2 / 8;
    grid-row: auto;
  }

  .sp4__lead {
    max-width: var(--ms-xs);
  }
}

@media (max-width: 599px) {
  .sp1__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp1__grid .sp-card--lead {
    grid-column: 1 / 3;
    grid-row: auto;
  }


  .sp3__names ol {
    font-size: 9cqi;
  }

  .sp3__names li:nth-child(n) {
    margin-inline-start: 0;
    white-space: normal;
  }

  .sp4__roster {
    grid-template-columns: 1fr;
  }
}