/* Programme · "Two days, eight tracks, eight ways to take part". Round 4: every name stays visible in compact
   type and its description comes on demand (programme.js), so the band no longer grows by sixteen stacked
   entries. Round 3 (reels) and round 2 (stacked lists) are in rounds/. Shares .q, .q-grid, .q__title and
   .q__lede with questions.css. Readability first: nothing overlaps type. No motifs. */

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

/* ---- An entry: number, name, description ---- */
.pg-entry {
  display: grid;
  grid-template-columns: calc(var(--text-small) * 2.2) minmax(0, 1fr);
  align-items: baseline;
  row-gap: var(--sp-stack-xs);
}

.pg-num {
  color: var(--quiet);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-variant-numeric: tabular-nums;
}

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

.pg-desc {
  grid-column: 2;
  color: var(--quiet);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  text-wrap: pretty;
}

/* ---- A choice: a name as a button; chosen = underlined, the number shows ---- */
.pg-choice {
  display: inline;
  padding: 0;
  border-width: 0;
  border-radius: var(--r-containers);
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: start;
  text-decoration-line: underline;
  text-decoration-thickness: var(--stroke-hairline);
  text-underline-offset: 0.12em;
  text-decoration-color: transparent;
  cursor: pointer;
  transition: text-decoration-color var(--duration-quick) var(--ease-standard);
}

.pg-choice:hover,
.pg-choice[aria-pressed='true'] {
  text-decoration-color: currentColor;
}

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

.pg-choice__num {
  margin-inline-end: var(--sp-inset-xs);
  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(--quiet);
  vertical-align: 0.6em;
}

/* ---- Running line: the names as one paragraph, a quiet dot between ---- */
.pg-running {
  font-family: var(--font-display);
  text-wrap: pretty;
}

/* The dot stays with the name before it: no break between a button and its dot, though a long name may still
   wrap inside its own button. */
.pg-running__item {
  display: inline;
  white-space: nowrap;
}

.pg-running__item .pg-choice {
  white-space: normal;
}

.pg-running__item:not(:last-child)::after {
  content: '\00a0·';
  color: var(--quiet);
}

/* Each name is a button and never breaks inside, so the steps are set to let two or three names share a line. */
.pg-running--tracks {
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
}

.pg-running--formats {
  font-size: calc(var(--type-heading) * 0.82);
  line-height: var(--text-h2--line-height);
}

/* The caption: which one, then its line. The name is already on the button, so the caption leaves it out. */
.pg-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-inset-xs) var(--sp-inset-md);
  min-height: calc(var(--type-lead) * var(--text-lead--line-height) * 2);
  font-size: var(--type-lead);
  line-height: var(--text-lead--line-height);
}

.pg-caption .pg-name {
  display: none;
}

.pg-caption .pg-desc {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ================= P1 · running lines, paper ================= */
.pg__intro {
  row-gap: var(--sp-stack-md);
  margin-top: var(--sp-stack-lg);
  align-items: end;
}

.pg__intro .pg__kicker {
  grid-column: 2 / 5;
}

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

.pg1__set {
  row-gap: var(--sp-stack-md);
  margin-top: calc(var(--sp-section) * 0.55);
  align-items: baseline;
}

.pg1__label {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: 1;
}

.pg1__label b {
  font-size: var(--type-title);
}

.pg1__set .pg-running,
.pg1__set .pg-caption {
  grid-column: 3 / 8;
}

/* ================= P2 · two eights that open, lapis ================= */
.pg2__head {
  row-gap: var(--sp-stack-md);
  align-items: end;
}

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

.pg2__head .q__title > span {
  display: block;
  white-space: normal;
}

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

.pg2__sets {
  display: grid;
  gap: var(--sp-stack-md);
  margin-top: calc(var(--sp-section) * 0.5);
  padding-inline: var(--lay-gutter);
}

/* The summary is the figure: the giant 8, the word, and a plus that turns to a minus when open. */
.pg2__summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-inset-md);
  font-family: var(--font-display);
  list-style: none;
  cursor: pointer;
}

.pg2__summary::-webkit-details-marker {
  display: none;
}

.pg2__summary b {
  font-size: calc(var(--type-figure) * 1.1);
  line-height: 0.85;
}

.pg2__summary span:not(.pg2__mark) {
  font-size: var(--type-title);
  line-height: 1;
  color: var(--palette-jodhpuri-blue);
  text-decoration-line: underline;
  text-decoration-thickness: var(--stroke-hairline);
  text-underline-offset: 0.15em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--duration-quick) var(--ease-standard);
}

.pg2__summary:hover span:not(.pg2__mark) {
  text-decoration-color: currentColor;
}

.pg2__mark {
  margin-inline-start: auto;
  font-size: var(--type-title);
  line-height: 1;
}

.pg2__mark::after {
  content: '+';
}

.pg2__set[open] .pg2__mark::after {
  content: '−';
}

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

/* The open set: four to a row, each entry over two rows of the grid (subgrid) so the lines align. */
.pg2__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--q-gap);
  margin-block: var(--sp-stack-lg) var(--sp-stack-md);
}

.pg2__grid .pg-entry {
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: var(--sp-stack-xs);
  padding-bottom: var(--sp-stack-lg);
}

.pg2__grid .pg-name {
  font-size: calc(var(--type-heading) * 0.8);
  line-height: var(--text-h2--line-height);
}

.pg2 .pg-num,
.pg2 .pg-desc {
  color: var(--palette-jodhpuri-blue);
}

/* ================= P3 · cascade + running line, crimson ================= */
.pg3__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;
}

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

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

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

/* One card for both sets: which one (Format 03 of 08, Track 05 of 08), the name, and its line at the foot. */
.pg3__card {
  position: sticky;
  top: calc(var(--lab-bar-h) + var(--sp-stack-md));
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--sp-stack-md);
  min-height: calc(var(--sp-section) * 2.6);
  padding: var(--sp-inset-lg);
  background: var(--background);
  color: var(--foreground);
  --quiet: var(--foreground);
}

/* Long track names ("Health, Equity & Human Development") have to fit the card, so the name steps down
   from round 3's title size to the heading step. */
.pg3__card .pg-name {
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
}

.pg3__card .pg-desc {
  grid-column: auto;
  align-self: end;
  max-width: 30ch;
  font-size: var(--type-body);
  line-height: var(--text-body--line-height);
}

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

.pg-cascade {
  font-size: 7.4cqi;
  line-height: 1;
}

.pg-cascade li {
  width: fit-content;
  white-space: nowrap;
}

.pg-cascade .pg-choice {
  color: var(--loud);
  text-decoration-color: transparent;
}

.pg-cascade .pg-choice[aria-pressed='true'] {
  color: var(--ink);
}

.pg-cascade .pg-choice:hover {
  text-decoration-color: currentColor;
}

.pg-cascade .pg-choice__num {
  color: var(--palette-rose-tint);
  vertical-align: baseline;
}

.pg-cascade li:nth-child(1) { margin-inline-start: 0%; }
.pg-cascade li:nth-child(2) { margin-inline-start: 14%; }
.pg-cascade li:nth-child(3) { margin-inline-start: 28%; }
.pg-cascade li:nth-child(4) { margin-inline-start: 10%; }
.pg-cascade li:nth-child(5) { margin-inline-start: 22%; }
.pg-cascade li:nth-child(6) { margin-inline-start: 2%; }
.pg-cascade li:nth-child(7) { margin-inline-start: 40%; }
.pg-cascade li:nth-child(8) { margin-inline-start: 16%; }

.pg3__label {
  margin-top: var(--sp-stack-lg);
  margin-bottom: var(--sp-stack-sm);
  color: var(--palette-rose-tint);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.pg-running--quiet {
  font-size: calc(var(--type-heading) * 0.7);
  line-height: var(--text-h2--line-height);
  color: var(--palette-dusty-rose);
}

.pg-running--quiet .pg-choice[aria-pressed='true'] {
  color: var(--ink);
}

.pg-running--quiet .pg-running__item:not(:last-child)::after,
.pg-running--quiet .pg-choice__num {
  color: var(--palette-rose-tint);
}

/* ================= P4 · index that opens, Jodhpuri ================= */
.pg4__head {
  row-gap: var(--sp-stack-md);
  align-items: end;
}

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

.pg4__head .q__title > span {
  display: block;
  white-space: normal;
}

.pg4__head .q__lede {
  grid-column: 6 / 8;
}

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

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

.pg4__label {
  margin-bottom: var(--sp-stack-md);
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: 1;
}

.pg4__label b {
  font-size: var(--type-title);
}

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

/* A row: number · name · plus; open, the line drops in under the name. The gap is the only divider. */
.pg-row__summary {
  display: grid;
  grid-template-columns: calc(var(--text-small) * 2.2) minmax(0, 1fr) auto;
  align-items: baseline;
  padding-block: var(--sp-stack-xs);
  list-style: none;
  cursor: pointer;
}

.pg-row__summary::-webkit-details-marker {
  display: none;
}

.pg-row__summary .pg-name {
  font-size: calc(var(--type-heading) * 0.82);
  line-height: var(--text-h2--line-height);
  text-decoration-line: underline;
  text-decoration-thickness: var(--stroke-hairline);
  text-underline-offset: 0.15em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--duration-quick) var(--ease-standard);
}

.pg-row__summary:hover .pg-name,
.pg-row__details[open] .pg-name {
  text-decoration-color: currentColor;
}

.pg-row__mark::after {
  content: '+';
  font-family: var(--font-display);
  font-size: var(--type-lead);
}

.pg-row__details[open] .pg-row__mark::after {
  content: '−';
}

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

.pg-row__details .pg-desc {
  margin: 0 0 var(--sp-stack-sm) calc(var(--text-small) * 2.2);
  font-size: var(--type-body);
  line-height: var(--text-body--line-height);
}

/* ================= Narrow ================= */
@media (max-width: 1099px) {
  .pg__intro .pg__kicker,
  .pg__intro .q__lede,
  .pg1__label,
  .pg1__set .pg-running,
  .pg1__set .pg-caption,
  .pg2__head .q__title,
  .pg2__head .q__lede,
  .pg4__head .q__title,
  .pg4__head .q__lede,
  .pg4__col:nth-child(n) {
    grid-column: 2 / 8;
  }

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

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

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

  .pg3__card {
    position: static;
    order: 2;
    max-width: var(--ms-sm);
    min-height: 0;
    grid-template-rows: none;
  }
}

@media (max-width: 599px) {
  .pg-cascade {
    font-size: 10cqi;
  }

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

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

  .pg2__summary b {
    font-size: var(--type-figure);
  }

  .pg-running--tracks {
    font-size: calc(var(--type-heading) * 0.75);
  }

  .pg-running--formats,
  .pg-running--quiet {
    font-size: var(--type-lead);
  }

  /* On a phone most names take their own line anyway, so the line becomes a plain list, no dots. */
  .pg-running__item {
    display: block;
    white-space: normal;
  }

  .pg-running__item:not(:last-child)::after {
    content: none;
  }
}