.gallery-hero { position: relative; min-block-size: 78svh; display: grid; align-items: end; }
.gallery-hero__media { position: absolute; inset: 0; }
.gallery-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.gallery-hero__copy {
  position: relative; padding-block-end: var(--space-12);
  color: var(--warm-white); text-shadow: 0 1px 40px rgb(18 17 16 / 45%);
}
.gallery-hero__copy .display, .gallery-hero__copy .statement, .gallery-hero__copy .lede { color: inherit; }
.gallery-hero__copy .label { color: var(--rose-light); }

/* Two equal columns, one ratio, one gap. Every frame is the same size and
   larger than before, at the client's request. */
.gallery-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
  margin: var(--space-8) auto; max-inline-size: var(--wrap);
  padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
}
.gallery-grid__item { margin: 0; }
.gallery-grid__item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }

/* The strands of the show. A description list because that is what it is:
   a term and its explanation. */
.strands {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-8); margin-block: var(--space-8) 0;
}
/* Each strand is an icon, a display-scale term and its description. The term
   carries the heading face at a larger size with open tracking, so the six
   read as titles rather than as a list of bold words. */
.strands dt {
  font-family: var(--font-heading);
  font-size: clamp(1.1875rem, 1.6vw, 1.4375rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin-block-end: var(--space-3);
}
.strands dd {
  margin: 0; color: var(--neutral);
  font-size: 0.9375rem; line-height: 1.7;
}

/* The icon sits above its term. --rose-deep on the page's warm-white ground
   measures 3.88:1, which clears the 3:1 WCAG asks of non-text contrast
   (1.4.11) - the right bar here, since these are graphics rather than text.
   They are decorative, but an invisible icon is just noise in the layout. */
.strands__icon {
  display: block;
  margin-block-end: var(--space-3);
  color: var(--rose-deep);
}
.strands__icon svg { display: inline-block; vertical-align: middle; }

/* Arabic sets the heading face for both roles, and the Latin tracking works
   against Arabic letterforms. */
[dir="rtl"] .strands dt { letter-spacing: 0; }

/* Closing call to action over a photograph. The scrim is navy rather than
   black so it belongs to the same palette as the panels on the home page. */
.final-cta--image { position: relative; overflow: hidden; }
.final-cta__media { position: absolute; inset: 0; }
.final-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.final-cta--image::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--navy) 72%, transparent);
}
.final-cta--image > .wrap { position: relative; z-index: 1; }

.timeline { list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 6rem 1fr auto; gap: var(--space-6);
  align-items: baseline; padding-block: var(--space-6);
  border-block-start: 1px solid var(--hairline);
}
.timeline li:last-child { border-block-end: 1px solid var(--hairline); }
.timeline__year { font-family: var(--font-heading); font-size: 1.5rem; color: var(--rose); }


@media (max-width: 60rem) {
  .gallery-grid { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 4.5rem 1fr; }
}

/* Centred prose, per the client. */
.strands :is(dt, dd) { text-align: center; }