/*
  RESPONSIVE
  ----------
  One breakpoint at 980px: below that, every two-column grid stacks
  into a single column and the nav links hide (add a burger menu here
  if you need one — it's not wired up yet).
*/
@media (max-width: 980px) {
  .wrap,
  nav {
    padding-left: 24px;
    padding-right: 24px;
  }

  .nav-links {
    display: none;
  }

  .hero-grid,
  .tool-grid,
  .project-top {
    grid-template-columns: 1fr;
  }

  .chart-cards {
    grid-template-columns: 1fr;
  }

  .stat-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 18px;
  }

  .chapter {
    grid-template-columns: 60px 1fr;
    row-gap: 6px;
  }
  .chapter h3 {
    grid-column: 2;
  }

  .skill-cards {
    grid-template-columns: 1fr 1fr;
  }

  section.block {
    padding: 70px 0;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .section-head .side {
    text-align: left;
  }
}