@media (max-width: 760px) {
  .site-header { padding-inline: 1.25rem; }
  .brand-mark { width: 40px; height: 40px; font-size: .8rem; }
  .brand-name { font-size: .72rem; letter-spacing: .16em; }
  .hero-image { object-position: 57% center; }
  .hero-content { margin-left: 1.25rem; margin-bottom: 7rem; }
  .hero h1 { font-size: clamp(3.35rem, 15vw, 5rem); letter-spacing: -.075em; }
  .scroll-cue { margin-left: 1.25rem; bottom: 1.5rem; }
  .section { padding: 4.75rem 1.25rem; }
  .section-intro { font-size: 1rem; }
  .project-grid { gap: 2rem .85rem; }
  .project-caption { grid-template-columns: 1.5rem 1fr; column-gap: .45rem; }
  .project-caption h3 { font-size: .9rem; }
  .project-caption p { font-size: .74rem; }
  .contact { padding: 5rem 1.25rem; }
}

@media (max-width: 390px) {
  .project-grid { grid-template-columns: 1fr; }
  .project-card, .project-card--wide { grid-column: 1; }
  .project-card--wide .project-open { aspect-ratio: 1 / 1.05; }
}