/* Consistent editorial safety gutters: text and project photography never touch the viewport. */
.section-shell {
  padding-left: max(7.5%, 36px);
  padding-right: max(7.5%, 36px);
}
.nav, .footer {
  padding-left: max(4.5%, 28px);
  padding-right: max(4.5%, 28px);
}
.hero-topline, .hero-bottom {
  left: max(4.5%, 28px);
  right: max(4.5%, 28px);
}
.hero-copy { left: max(10%, 36px); right: max(7.5%, 36px); }
.audiences-inner { padding-left: max(7.5%, 36px); padding-right: max(7.5%, 36px); }
.desktop-explorer-wrapper { padding: 0 max(7.5%, 36px) 85px; background: #eaece5; }
.desktop-visual-catalogue { padding-left: max(7.5%, 36px); padding-right: max(7.5%, 36px); }
.desktop-explorer-casebar { margin-left: max(7.5%, 36px); margin-right: max(7.5%, 36px); }
.section-shell figure, .section-shell img, .section-shell video { max-width: 100%; }

@media (max-width: 900px) {
  .section-shell { padding-left: max(6%, 24px); padding-right: max(6%, 24px); }
  .nav, .footer, .audiences-inner { padding-left: max(6%, 24px); padding-right: max(6%, 24px); }
  .hero-copy, .hero-topline, .hero-bottom { left: max(6%, 24px); right: max(6%, 24px); }
  .mobile-project-card { padding-left: max(6%, 24px); padding-right: max(6%, 24px); }
}

@media (max-width: 420px) {
  .section-shell { padding-left: 22px; padding-right: 22px; }
  .nav, .footer, .audiences-inner { padding-left: 22px; padding-right: 22px; }
  .hero-copy, .hero-topline, .hero-bottom { left: 22px; right: 22px; }
  .mobile-project-card { padding-left: 22px; padding-right: 22px; }
  .mobile-project-card { grid-template-columns: 92px minmax(0,1fr); }
  .mobile-project-thumb { width: 92px; }
}