/* General container margins */
@media (max-width:1200px){
  section{margin:0 4rem}
}

/* Tablet */
@media (max-width:900px){
  section{margin:0 1.25rem;padding-top:8vh}
  #profile{flex-direction:column;gap:2rem}
  .section__pic-container{width:260px;height:260px}
  nav{height:12vh}
}

/* Phones */
@media (max-width:750px){
  #desktop-nav{display:none}
  #hamburger-nav{display:flex;justify-content:space-between;align-items:center;padding:0 1rem}
  .nav-links{display:none}
  .title{font-size:2.2rem}
  .section__text__p2{font-size:1.25rem}

  /* About: stack neatly (media left, text right becomes vertical) */
  .section-container{flex-direction:column}
  .about-media{margin:0 auto}
  .arrow{display:none}

  /* Experience grids wrap cleanly */
  .article-container{gap:1rem}
  article{width:100%;max-width:300px}

  /* Timeline header already stacks: ensure spacing */
  .xt__head{row-gap:.25rem}
}

/* Small phones */
@media (max-width:420px){
  .section__pic-container{width:220px;height:220px}
  .btn{width:7.2rem;padding:.9rem}
  .theme-toggle.mobile{position:relative;right:0}
}