/* Homepage only: the opening instrument (text, map, time). */
.opening { padding-block: var(--space-7) var(--space-8); }
.opening .grid { row-gap: var(--space-5); align-items: start; }
.opening-text { display: grid; gap: var(--space-5); align-content: start; padding-top: var(--space-4); }
.asof { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.asof-lab { margin-top: var(--space-2); margin-bottom: calc(-1 * var(--space-2)); }
.asof .serif-date { font-size: clamp(36px, 4.1vw, 56px); line-height: 1.08; margin-bottom: var(--space-2); }
.asof .legend { margin-top: var(--space-2); row-gap: var(--space-2); }

.opening-map { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: var(--gutter); align-items: start; }
.opening-map #map { width: min(100%, 580px, max(400px, calc((100vh - 270px) * 0.914))); min-width: 280px; justify-self: center; }
.opening-rail { align-self: end; padding-bottom: var(--space-5); display: grid; gap: var(--space-2); }
.opening-rail .chips { flex-direction: column; align-items: flex-start; }
.opening-time { margin-top: var(--space-2); }

.money-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-5); }
.money-head .small { max-width: 52ch; }

@media (max-width: 1100px) {
  .opening-map { grid-template-columns: minmax(0, 1fr); }
  .opening-rail { padding-bottom: 0; }
  .opening-rail .chips { flex-direction: row; }
}
@media (max-width: 900px) {
  .opening { padding-block: var(--space-5) var(--space-7); }
  /* Phone order: title, intro, year, what to show, legend, map, then the date directly above the scrubber. */
  .opening-text, .asof { display: contents; }
  .opening .grid { row-gap: var(--space-4); }
  .opening .grid > *, .opening-text > *, .asof > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
  .opening-text > h1 { order: 1; }
  .opening-text > .lede { order: 2; }
  .asof > :nth-child(1) { order: 3; }
  .asof > :nth-child(4) { order: 4; }
  .asof > :nth-child(5) { order: 5; }
  .opening-map { order: 6; }
  .asof > :nth-child(2) { order: 7; margin-bottom: calc(-1 * var(--space-3)); }
  .asof > :nth-child(3) { order: 8; }
  .opening-time { order: 9; }
  .opening-map #map { width: min(100%, 520px); }
}