@media (max-width: 60rem) {
  .page-body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    top: 0;
    order: 2;
  }
}

@media (max-width: 45rem) {
  .site-header {
    grid-template-columns: 1fr;
    gap: 0.625rem;
    position: sticky;
  }

  .nav { order: 3; }
  .search { order: 2; }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  #search-input { width: 100%; }
  .search-results { width: 100%; right: auto; }
}