/* 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: start; }
  /* Header, status line, hero and the fold-away blocks run the full width; the cards sit in two columns. */
  main > nav, main > p, main > header, main > details, main > h1, main > .stage, main > .legend, main > button { grid-column: 1 / -1; }
  main > section:has(#timeline) { grid-column: 2; grid-row: 3 / span 4; }
  main > section:not(:has(#timeline)) { grid-column: 1; }
  .hero { padding: 1.75rem 2rem 1.4rem; }
  .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; }
}