/* Wide screens only: phones and narrow windows keep the single column from style.css. */
@media (min-width: 64rem) {
  .foot, main { max-width: 76rem; padding-top: 1.75rem; padding-bottom: 2.5rem; }
  body > main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; align-items: stretch; }
  /* Header, status line, hero and the fold-away blocks run the full width; the cards sit in two columns. */
  /* Everything spans the full width unless it is a card; cards flow two to a row and stretch to equal height. */
  main > * { grid-column: 1 / -1; }
  main > section { grid-column: auto; }
  main > section:has(#history) { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hero { padding: 1.25rem 1.5rem 1rem; }
  .hero #reason { font-size: 1.25rem; max-width: 48rem; }
  main > section { padding: 1.25rem 1.5rem; }
  .tl li { font-size: .8rem; height: 8rem; }
  .stage { width: auto; left: 0; transform: none; }
  #globe { height: max(34rem, calc(100vh - 15rem)); }
  .legend, main > p.muted { max-width: 64rem; }
}
@media (min-width: 90rem) {
  html { font-size: 112.5%; }
  .foot, main { max-width: 88rem; }
}