@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .hero-wrap { padding-top: 42px; }
  .related-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  h1 { font-size: 34px; }
  .grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .legend-grid { grid-template-columns: 1fr; }
  .actions { flex-direction: column; }
  #clear-btn { width: 100%; }
  .metric-strip { grid-template-columns: 1fr; }
  .related-links-grid { grid-template-columns: 1fr; }
}