@media screen and (max-width: 1024px) {
  .hero-grid,
  .about-grid,
  .skills-grid,
  .projects-grid,
  .contact-panel {
    grid-template-columns: 1fr;
  }

  .hero-card {
    max-width: 620px;
  }

  .contact-links {
    justify-items: start;
    text-align: left;
  }
}

@media screen and (max-width: 820px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .mobile-menu {
    display: grid;
    gap: 12px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    padding: 0;
    transition: max-height 180ms ease, opacity 180ms ease, padding 180ms ease;
  }

  .mobile-menu.is-open {
    max-height: 240px;
    opacity: 1;
    padding: 0 0 18px;
    pointer-events: auto;
  }

  .hero,
  .section {
    padding: 68px 0;
  }

  .hero h1 {
    max-width: 14ch;
  }
}

@media screen and (max-width: 620px) {
  .container {
    width: min(calc(100% - 20px), var(--container));
  }

  .header-inner {
    min-height: 70px;
  }

  .hero,
  .section {
    padding: 56px 0;
  }

  .hero-text,
  .panel p,
  .contact-text {
    font-size: 0.98rem;
  }

  .hero-summary {
    grid-template-columns: 1fr;
  }

  .profile-photo {
    height: 340px;
  }

  .panel,
  .project-content,
  .hero-card {
    padding: 20px;
  }

  .button {
    width: 100%;
  }
}