.production {
  grid-column: 1 / -1;
  padding: clamp(4rem, 6.5vw, 6.5rem) 0;
  background: var(--yellow);
  color: var(--ink);
}

.production-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 4.5vw, 4rem);
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.production-subtitle {
  max-width: 26rem;
  margin: 1.2rem 0 1.6rem;
  color: var(--ink);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.025em;
}

.production-copy p {
  max-width: 34rem;
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.65;
}

.production-copy .production-dates-intro { margin: 1.4rem 0 0; }

.production-posters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.65rem, 1.3vw, 1.15rem);
  width: 100%;
  max-width: 40rem;
  justify-self: end;
}

.production-poster {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

.production-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.production-poster--jeremy img { object-position: 60% center; }
.production-date-list .date-main { min-width: 0; }
.production-date-list .date-show { max-width: 100%; white-space: normal; line-height: 1.3; }

@media (min-width: 901px) and (max-width: 1180px) {
  .production-date-list .date-venue { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

@media (max-width: 900px) {
  .production-grid { grid-template-columns: 1fr; gap: 2rem; }
  .production-posters { max-width: 34rem; justify-self: start; }
}

@media (max-width: 640px) {
  .production { padding: 3rem 0 3.5rem; }
  .production-grid { gap: 1.5rem; margin-bottom: 1.8rem; }
  .production-subtitle { margin: 1rem 0 1.2rem; font-size: 1.2rem; }
  .production-posters { gap: .65rem; }
}

@media (max-width: 380px) {
  .production-date-list .date-card { grid-template-columns: 2.2rem minmax(0, 1fr) auto; column-gap: .4rem; }
  .production-date-list .ticket-link { min-width: 5.25rem; padding-inline: .4rem; }
}

/* Align the desktop text block with the existing poster height. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .production-grid { align-items: stretch; }
  .production-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .production-title {
    font-size: clamp(2.8rem, 4vw, 3.7rem);
    line-height: .9;
  }
  .production-subtitle {
    max-width: none;
    margin: .75rem 0 .9rem;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.3;
  }
  .production-copy p {
    max-width: none;
    margin-bottom: .65rem;
    font-size: 1rem;
    line-height: 1.5;
  }
  .production-copy .production-dates-intro { margin: .65rem 0 0; }
  .production-posters { align-self: center; }
}