@media (max-width: 860px) {
  .nav { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-links { display: none; width: 100%; flex-direction: column; align-items: stretch; }
  .nav-links.open { display: flex; }
  .hero { min-height: auto; }
  .hero-search, .lookup-form { flex-direction: column; align-items: stretch; }
  .card-grid, .category-grid, .io-grid, .tool-shell, .text-columns, .footer-grid, .character-detail { grid-template-columns: 1fr; }
  .article-toc nav, .problem-grid { grid-template-columns: 1fr; }
  .article-wide { width: 100%; margin-inline: 0; }
  .filters { grid-template-columns: 1fr; }
  .link-grid { grid-template-columns: 1fr 1fr; }
  .tool-title { flex-direction: column; }
  .char-row { grid-template-columns: 52px 1fr; }
  .char-row span:nth-child(3), .char-row span:nth-child(4) { display: none; }
  dl { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: 40px; }
  .article h1 { font-size: 34px; }
  .link-grid { grid-template-columns: 1fr; }
  .big-char { font-size: 96px; }
}