/* ==========================================================================
   responsive.css — breakpoint overrides
   --------------------------------------------------------------------------
   REBUILT FILE — see the note at the top of styles.css. Breakpoints match
   the ones referenced elsewhere in the codebase (767px in the JS modules,
   768/560px used in sections.css).
   ========================================================================== */

@media (max-width: 1024px) {
  .project { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }

  body.menu-open .nav {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: var(--bg);
    padding: 6.5rem var(--gutter) 2rem;
  }
  body.menu-open .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  body.menu-open .nav__link { font-size: 1.5rem; }
}

@media (max-width: 767px) {
  .hero { padding-top: 5.5rem; min-height: auto; padding-bottom: 4rem; }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .hero-orb { width: 80vw; opacity: 0.35; }

  .about__grid { grid-template-columns: 1fr; }
  .about__detail { font-size: 0.9rem; }

  .section { padding-block: 3.5rem; }
}

@media (max-width: 560px) {
  .shell { padding-inline: 1.1rem; }
  .contact__links { flex-direction: column; align-items: stretch; }
  .contact__links a { text-align: center; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
}