@media (max-width: 900px){
  .hero{
    padding:56px 0 48px;
    gap:32px;
  }
  .hero > div:first-child{ order:1; }
  .hero-art{ order:2; margin:0 auto; }
}

@media (max-width: 1100px){
  .bio-grid{ grid-template-columns:1fr; gap:40px; }
  section{ padding:64px 0; }
  .nav-links{ gap:20px; font-size:13.5px; }
  .section-head{ align-items:flex-start; }
  footer .wrap{ flex-direction:column; align-items:center; text-align:center; }
  footer p{ margin-inline:auto; }

  .card{ width:calc((100% - 22px) / 2); }
}

@media (max-width: 600px){
  .nav{ flex-wrap:wrap; justify-content:center; }
  .logo{ margin:0 auto; }
  .nav-links{ justify-content:center; width:100%; gap:clamp(22px, 5.8vw, 34px); }
  .nav-links a{ width:clamp(42px, 10vw, 48px); height:clamp(42px, 10vw, 48px); }
  .nav-links .icon{ width:clamp(18px, 4.3vw, 22px); height:clamp(18px, 4.3vw, 22px); }
}

@media (max-width: 360px){
  .nav{ padding:14px var(--gutter); gap:10px; }
  .logo img{ height:34px; }
  .logo-text{ font-size:20px; }
  .nav-links{ gap:clamp(14px, 4.2vw, 22px); }
  .nav-links a{ width:40px; height:40px; }
  .nav-links .icon{ width:18px; height:18px; }
  .hero{ padding:48px 0 40px; }
}

@media (max-width: 320px){
  .nav{ justify-content:center; }
  .logo{ width:100%; justify-content:center; }
  .logo a{ justify-content:center; }
  .nav-links{ width:100%; justify-content:center; gap:10px; }
}

@media (max-width:480px){
  .btn-row{ flex-direction:column; align-self:stretch; }
  .btn{ justify-content:center; }

  .card{ width:100%; }
  .carousel-track{ gap:16px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}