/* One responsive outer gutter for every route. */
:root{
  --site-gutter:max(32px,calc((100vw - 1480px)/2));
  --site-content-width:calc(100vw - 2 * var(--site-gutter));
}
@media(max-width:800px){:root{--site-gutter:20px}}
.detail{--closing-gutter:var(--site-gutter);--reading-width:var(--site-content-width)}
.cv{--resume-gutter:var(--site-gutter)}
body .spatial-header,
body .spatial-profile,
body .site-footer.contact-footer,
.detail .detail-brief,
.detail .next-project,
.detail .system-outcome,
.detail .leto-outcome{padding-inline:var(--site-gutter)}
.detail .detail-opening{padding-inline:0}
.detail .detail-opening>.detail-side,
.detail .detail-opening>.detail-film-title,
.detail .detail-opening>.hero-media-label,
.detail.detail-motion .detail-opening>.detail-hero-media,
.detail.detail-miele .detail-opening>.detail-hero-media{
  width:var(--site-content-width);max-width:none;margin-inline:auto;
}
.detail .detail-blocks>.detail-block{padding-inline:0}
.detail .detail-blocks .detail-block .block-copy{width:var(--site-content-width);max-width:none;margin-inline:auto}
body .contact-footer>div{width:100%;max-width:none;margin-inline:0}
.folio-index .spatial-heading{left:var(--site-gutter)}
.folio-index .spatial-status,
.folio-index .spatial-profile>button{right:var(--site-gutter)}
@media(min-width:701px){
  .folio-index .spatial-instructions{left:var(--site-gutter);right:var(--site-gutter)}
}
@media(max-width:700px){
  .folio-index .spatial-heading{width:var(--site-content-width)}
  .folio-index .spatial-instructions{left:auto;right:auto;padding-inline:var(--site-gutter)}
}