/* Device-specific layout refinements loaded after the main design system. */
@media (max-width: 1080px) and (min-width: 801px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(290px, .72fr); gap: 36px; }
  .hero h1 { font-size: clamp(3.8rem, 6.5vw, 5.2rem); }
  .portrait-stage { width: 350px; height: 420px; }
  .about-layout, .skills-layout, .credentials-grid, .contact { gap: 60px; }
  .project-body { padding: 30px; }
  .project-visual { padding: 28px; }
}

@media (max-width: 800px) {
  .navbar { min-height: 56px; }
  .nav-links a { padding: 5px 0; }
  .hero-copy { max-width: 590px; }
  .project-footer { align-items: flex-start; flex-direction: column; }
  .project-tags { max-width: 100%; }
  .footer-contacts { flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 530px) {
  .hero { width: min(100% - 28px, 1200px); }
  .hero-buttons { gap: 9px; }
  .text-button { width: 100%; padding-left: 1px; }
  .portrait-stage { margin-top: -9px; }
  .facts article { min-height: 104px; }
  .filter-bar { overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter { white-space: nowrap; }
  .contact-details a:first-child { overflow-wrap: anywhere; }
  .footer-main > .footer-contacts { width: 100%; justify-content: flex-start; gap: 9px 15px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 360px) {
  .section, .navbar, footer { width: min(100% - 24px, 1200px); }
  .hero h1 { font-size: 3.05rem; }
  .hero-buttons .button { width: 100%; }
  .project-body, .contact-form { padding: 19px; }
  .contact h2 { font-size: 2.65rem; }
}