@media (max-width:1050px){
  .site-nav{gap:.65rem}
  .site-nav a{font-size:.77rem}
  .overview-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:800px){
  .menu-toggle{display:block}
  .site-nav{
    position:absolute;left:1.25rem;right:1.25rem;top:70px;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:.6rem;background:var(--background);border:1px solid var(--border);
    border-radius:12px;box-shadow:var(--shadow)
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:.72rem;border-radius:7px}
  .site-nav a:hover{background:var(--surface)}
  .theme-toggle{margin:.5rem;width:100%}
  .hero-grid{grid-template-columns:1fr}
  .profile-wrap{order:-1;justify-content:flex-start}
  .profile-photo,.photo-placeholder{width:190px;border-radius:18px}
  .cards-grid,.skills-grid,.contact-grid{grid-template-columns:1fr}
  .footer-grid,.footer-bottom{flex-direction:column}
}
@media (max-width:520px){
  .container{width:min(var(--container),calc(100% - 1.5rem))}
  .nav-wrap{min-height:64px}
  .brand-name{font-size:.86rem}
  .brand-mark{width:36px;height:36px}
  .hero{padding-top:3.2rem}
  .section{padding:4rem 0}
  .overview-grid{grid-template-columns:1fr}
  h1{font-size:clamp(2.5rem,14vw,4rem)}
  .hero-actions .btn{width:100%}
}