/* ============================================================
   responsive.css — breakpoints (loads after style.css)
   ============================================================ */

/* ---- Tablet / small laptop ---- */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(5){grid-column:span 2}
  .grid-about{grid-template-columns:1fr; gap:2.5rem}
  .portrait{max-width:360px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:span 2}
  .cols{columns:1}
}

/* ---- Tablet portrait ---- */
@media (max-width:820px){
  .contact-grid,.split-2{grid-template-columns:1fr; gap:2.5rem}
  .defrow{grid-template-columns:1fr auto; gap:.3rem 1rem}
  .defrow .v{grid-column:1/-1}
}

/* ---- Mobile ---- */
@media (max-width:640px){
  :root{--hdr-h:64px}
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(80vw,330px); flex-direction:column;
    align-items:flex-start; justify-content:center; gap:1.5rem; padding:2rem;
    background:var(--dark-2); transform:translateX(100%); transition:transform .35s ease;
    box-shadow:-24px 0 60px rgba(0,0,0,.45);
  }
  .nav.open{transform:none}
  .nav a.navlink{font-size:1.2rem; font-family:var(--serif); opacity:.95}
  .nav .btn-outline{margin-left:0; margin-top:.5rem}
  .menu-btn{display:block}

  .cards{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:1fr}
  .stat:nth-child(5){grid-column:auto}

  .sec-head.split{flex-direction:column; align-items:flex-start}

  .pubitem{grid-template-columns:auto 1fr; gap:.4rem 1rem}
  .pubitem .yr{grid-row:1}

  .cta .wrap{flex-direction:column; align-items:flex-start}
  .foot-grid{grid-template-columns:1fr}
  .foot-brand{grid-column:auto}
  .foot-bottom{flex-direction:column; gap:.5rem}
  .tl-item{padding-left:2rem}
}

/* ---- Ultra-wide comfort ---- */
@media (min-width:1600px){
  :root{--maxw:1320px}
}