/* Last year · "The India We Imagine": the 2026 edition in figures, five photographs and six sessions, in the
   surviving grammars. Shares .q, .q-grid, .q__title and .q__lede with questions.css and the reel with reel.css.
   Readability first: no type on photographs, nothing overlaps type. No motifs. */

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

/* ---- Photographs: square-cornered, flush, caption under in the band's quiet colour ---- */
.rc-photo {
  display: grid;
  gap: var(--sp-stack-sm);
  align-content: start;
}

.rc-photo__frame {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: clip;
}

.rc-photo__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rc-photo figcaption {
  max-width: 52ch;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--quiet);
  text-wrap: pretty;
}

/* ---- Figures: a display number over a sans line ---- */
.rc__facts dt {
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: 1;
}

.rc__facts dd {
  margin-top: var(--sp-stack-xs);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--quiet);
}

/* ---- Sessions: number · format (small), title (display), who (small) ----
   Numbered like every list in the lab (Q, S): the counter runs across a variant's lists, so R2's second
   list carries on at 04. */
.rc {
  counter-reset: session;
}

.rc__sessions li,
.rc2__sheet li {
  counter-increment: session;
}

.rc-format::before {
  content: counter(session, decimal-leading-zero) ' · ';
}

.rc-format {
  display: block;
  font-variant-numeric: tabular-nums;
  color: var(--quiet);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.rc-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-lead);
  line-height: var(--text-h3--line-height);
  text-wrap: balance;
}

.rc-who {
  display: block;
  margin-top: var(--sp-stack-xs);
  color: var(--quiet);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  text-wrap: pretty;
}

.rc__sessions {
  row-gap: var(--sp-stack-md);
  margin-top: calc(var(--sp-section) * 0.7);
}

.rc__sessions h3 {
  grid-column: 2 / 8;
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
  color: var(--loud);
}

.rc__sessions ol {
  grid-column: 2 / 8;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-stack-lg) var(--q-gap);
}

/* ================= R1 · bento, paper ================= */
.rc__intro {
  row-gap: var(--sp-stack-md);
  margin-top: var(--sp-stack-lg);
  align-items: end;
}

.rc__intro .rc__sub {
  grid-column: 2 / 5;
}

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

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

/* The date is the one long figure: it takes two columns so "14–15 Feb" holds one line. */
.rc1 .rc__facts > div:first-child {
  grid-column: 2 / 4;
}

/* Lead over four columns and two rows; two beside it; two wide ones under: paper gaps are the divider. */
.rc1__photos {
  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);
}

.rc1__photos .rc-photo--lead {
  grid-column: 1 / 5;
  grid-row: 1 / 3;
  grid-template-rows: minmax(0, 1fr) auto;
}

.rc1__photos .rc-photo--lead .rc-photo__frame {
  aspect-ratio: auto;
  height: 100%;
}

.rc1__photos .rc-photo:not(.rc-photo--lead):not(.rc-photo--wide) {
  grid-column: 5 / 7;
}

.rc1__photos .rc-photo--wide {
  grid-column: span 3;
}

.rc1__photos .rc-photo--lead figcaption {
  font-family: var(--font-display);
  font-size: var(--type-lead);
  line-height: var(--text-h3--line-height);
  color: var(--ink);
}

/* ================= R2 · programme spread, crimson =================
   Photographs and programme interleaved like a magazine spread: a pair of large photographs after the head,
   three sessions, a trio of photographs, the last three sessions. Every photograph from 2026 is here. */
.rc2__head {
  row-gap: var(--sp-stack-md);
  align-items: end;
}

.rc2__head .q__title {
  grid-column: 2 / 5;
  font-size: var(--type-display);
  line-height: var(--text-display--line-height);
}

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

.rc2__intro {
  grid-column: 5 / 8;
  display: grid;
  gap: var(--sp-stack-md);
}

.rc2__intro .q__lede,
.rc2 .rc-photo figcaption,
.rc2 .rc-format,
.rc2 .rc-who,
.rc2 .rc__facts dd {
  color: var(--palette-rose-tint);
}

.rc2__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--q-gap);
  margin-top: var(--sp-stack-sm);
}

.rc2__facts dt {
  font-size: var(--type-heading);
}

.rc2__pair,
.rc2__trio {
  row-gap: var(--sp-stack-lg);
  align-items: start;
}

.rc2__pair {
  margin-top: calc(var(--sp-section) * 0.6);
}

.rc2__pair .rc-photo:nth-child(1) { grid-column: 2 / 5; }
.rc2__pair .rc-photo:nth-child(2) { grid-column: 5 / 8; }

.rc2__trio {
  margin-block: var(--sp-stack-lg);
}

.rc2__trio .rc-photo:nth-child(1) { grid-column: 2 / 4; }
.rc2__trio .rc-photo:nth-child(2) { grid-column: 4 / 6; }
.rc2__trio .rc-photo:nth-child(3) { grid-column: 6 / 8; }

/* The sheet: one grid line per session, number + format in column one, title over three, who over two. */
.rc2__sheet {
  margin-top: calc(var(--sp-section) * 0.6);
}

.rc2__sheet h3 {
  margin-bottom: var(--sp-stack-lg);
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
  color: var(--loud);
}

.rc2__sheet h3 span {
  grid-column: 2 / 8;
}

.rc2__sheet ol {
  display: grid;
  gap: var(--sp-stack-lg);
}

.rc2__sheet li {
  align-items: baseline;
}

.rc2__sheet .rc-format {
  grid-column: 2;
}

.rc2__sheet .rc-title {
  grid-column: 3 / 6;
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
}

.rc2__sheet .rc-who {
  grid-column: 6 / 8;
  margin-top: 0;
}

/* ================= R3 · cascade + reel, lapis ================= */
.rc3 {
  --step-ground: var(--background);
  --step-ink: var(--palette-lapis-blue);
  --step-off-ground: var(--palette-jodhpuri-blue);
  --step-off-ink: var(--palette-lapis-blue);
}

.rc3__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: center;
}

.rc3__card {
  display: grid;
  gap: var(--sp-stack-lg);
  padding: var(--sp-inset-lg);
  background: var(--background);
  color: var(--palette-lapis-blue);
  --loud: var(--palette-lapis-blue);
  --quiet: var(--palette-lapis-blue);
}

.rc3__facts {
  display: grid;
  gap: var(--sp-stack-md);
}

.rc3__facts dt {
  font-size: var(--type-heading);
}

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

.rc3__words h2 {
  font-size: 19cqi;
  line-height: 0.9;
}

.rc3__words h2 > span {
  display: block;
  width: fit-content;
  white-space: nowrap;
}

.rc3__words h2 > span:nth-child(1) { margin-inline-start: 6%; }
.rc3__words h2 > span:nth-child(2) { margin-inline-start: 24%; }
.rc3__words h2 > span:nth-child(3) { margin-inline-start: 0%; }
.rc3__words h2 > span:nth-child(4) { margin-inline-start: 18%; }

.rc3__bar {
  row-gap: var(--sp-stack-md);
  margin-top: calc(var(--sp-section) * 0.7);
  align-items: end;
}

.rc3__bar .q__lede {
  grid-column: 2 / 6;
  max-width: var(--ms-md);
  color: var(--palette-jodhpuri-blue);
}

.rc3__bar .reel__controls {
  grid-column: 6 / 8;
}

/* The counter sits with its steps, not halfway across the bar. */
.rc3__bar .reel__count {
  margin-inline-end: var(--sp-inset-md);
}

.rc3__reel {
  --card-w: min(84vw, calc(var(--sp-section) * 5.2));
  margin-top: var(--sp-stack-lg);
}

.rc3 .rc-photo figcaption,
.rc3 .rc-format,
.rc3 .rc-who {
  color: var(--palette-jodhpuri-blue);
}

/* ================= R4 · numbers, Jodhpuri ================= */
.rc4__head {
  row-gap: var(--sp-stack-md);
  align-items: end;
}

.rc4__title {
  grid-column: 2 / 5;
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: var(--text-h1--line-height);
  text-wrap: balance;
}

.rc4__head .q__lede {
  grid-column: 5 / 8;
}

/* Four figures as the poster, sized from the row so "1,000+" always fits its quarter. */
.rc4__figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--q-gap);
  margin-top: calc(var(--sp-section) * 0.6);
  padding-inline: var(--lay-gutter);
  container-type: inline-size;
}

.rc4__figures dt {
  font-family: var(--font-display);
  font-size: 8.4cqi;
  line-height: 0.9;
}

.rc4__figures dd {
  max-width: 26ch;
  margin-top: var(--sp-stack-sm);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

/* Four large photographs, two to a row, each over two of the figures' four columns. */
.rc4__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-stack-lg) var(--q-gap);
  margin-top: calc(var(--sp-section) * 0.5);
  padding-inline: var(--lay-gutter);
}

/* ================= Narrow ================= */
@media (max-width: 1099px) {
  .rc__intro .rc__sub,
  .rc__intro .q__lede,
  .rc2__head .q__title,
  .rc2__intro,
  .rc3__bar .q__lede,
  .rc3__bar .reel__controls,
  .rc4__title,
  .rc4__head .q__lede {
    grid-column: 2 / 8;
  }

  .rc3__bar .reel__controls {
    justify-content: flex-start;
  }

  .rc1 .rc__facts {
    grid-template-columns: calc(var(--lay-gutter) - var(--q-gap)) repeat(2, minmax(0, 1fr)) calc(var(--lay-gutter) - var(--q-gap));
  }

  .rc1 .rc__facts > div:nth-child(n) {
    grid-column: auto / span 1;
  }

  .rc1 .rc__facts > div:nth-child(odd) {
    grid-column: 2 / span 1;
  }

  .rc1__photos .rc-photo--lead {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .rc1__photos .rc-photo--lead .rc-photo__frame {
    aspect-ratio: 3 / 2;
    height: auto;
  }

  .rc1__photos .rc-photo:not(.rc-photo--lead):not(.rc-photo--wide),
  .rc1__photos .rc-photo--wide {
    grid-column: span 3;
  }

  .rc2__trio .rc-photo:nth-child(1) { grid-column: 2 / 5; }
  .rc2__trio .rc-photo:nth-child(2) { grid-column: 5 / 8; }
  .rc2__trio .rc-photo:nth-child(3) { grid-column: 2 / 5; }

  .rc2__sheet .rc-format {
    grid-column: 2 / 8;
  }

  .rc2__sheet .rc-title {
    grid-column: 2 / 6;
  }

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

  .rc3__card {
    order: 2;
    max-width: var(--ms-sm);
  }

  .rc__sessions ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rc4__figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--sp-stack-lg);
  }

  .rc4__figures dt {
    font-size: 15cqi;
  }
}

@media (max-width: 599px) {
  .rc1__photos .rc-photo:not(.rc-photo--lead):not(.rc-photo--wide),
  .rc1__photos .rc-photo--wide {
    grid-column: 1 / -1;
  }

  .rc2__sheet .rc-title,
  .rc2__sheet .rc-who {
    grid-column: 2 / 8;
  }

  .rc2__pair .rc-photo:nth-child(n),
  .rc2__trio .rc-photo:nth-child(n) {
    grid-column: 2 / 8;
  }

  .rc__sessions ol {
    grid-template-columns: 1fr;
  }

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