@layer layout {
  .container{width:min(calc(100% - (2 * var(--page-gutter))),var(--content-max));margin-inline:auto}
  .narrow{max-width:var(--content-narrow)}
  .section{padding-block:clamp(4rem,10vw,9rem)}
  .section-heading{display:grid;gap:var(--space-3);margin-bottom:var(--space-7)}
  /* align-items:start so cards of differing natural height sit on their
     own baseline instead of stretching to the tallest in the row. */
  .project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2.5rem,5vw,4.5rem) clamp(1rem,3vw,3rem);align-items:start}
  .project-card{grid-column:span 6}
  .project-card:nth-child(3n){grid-column:3 / span 8}
  .project-detail__header{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-6);align-items:end;margin-bottom:var(--space-6)}
  /* Year and title were sitting flush against each other. */
  .project-detail__header > div{display:grid;gap:var(--space-2)}
  .project-detail__hero{width:100%;max-height:88vh;object-fit:contain}
  .project-detail__copy{margin:var(--space-7) auto 0;max-width:var(--content-narrow)}
  .project-detail__gallery{display:grid;gap:clamp(1.5rem,4vw,3.5rem);margin-top:var(--space-7)}
  .project-detail__gallery figure{margin:0}
  .project-detail__gallery img{width:100%;max-height:88vh;object-fit:contain;display:block}
  @media(max-width:760px){
    .project-grid{grid-template-columns:1fr}
    .project-card,.project-card:nth-child(3n){grid-column:auto}
    .project-detail__header{grid-template-columns:1fr}
  }
}