.project-intro, .project-photos, .project-navigation {
  width:calc(100% - 2 * var(--gutter));
  max-width:1440px;
  margin-inline:auto;
}
.project-intro { padding-block:36px 56px; }
.project-back { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:14px; }
.project-back:hover { text-decoration:underline; }
.project-intro h1 { max-width:1000px; margin:32px 0 20px; font:500 clamp(36px,4.6vw,72px)/1.12 var(--type); letter-spacing:-.025em; }
.project-credit { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.project-photos { display:grid; gap:72px; }
.project-photo { width:100%; margin:0; }
.project-photo.is-portrait { max-width:820px; justify-self:center; }
.project-photo-pair { display:contents; }
.project-photo-frame { position:relative; background:var(--surface); }
.project-photo img { width:100%; height:auto; }
.project-photo-error { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; font-size:14px; line-height:1.5; }
.project-photo-error p { margin:0 0 16px; }
.photo-retry { min-height:44px; padding:12px 18px; background:var(--ink); color:var(--paper); }
.photo-retry:hover { background:var(--accent); }
.project-photo.is-unavailable img { visibility:hidden; }
.project-navigation { display:flex; justify-content:space-between; align-items:center; gap:48px; padding-block:88px 104px; }
.project-next { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 24px; max-width:640px; min-height:44px; }
.project-next>span { color:var(--muted); font-size:13px; }
.project-next strong { grid-column:1; font:400 clamp(24px,2.4vw,38px)/1.3 var(--caption-type); letter-spacing:-.015em; }
.project-next .icon { grid-column:2; grid-row:2; align-self:center; }
.project-next:hover strong { text-decoration:underline; text-decoration-thickness:1px; }
@media(min-width:761px) {
  /* Leave room for the fixed header, anchor offset and bottom margin. */
  .project-photo.is-portrait { max-width:min(820px, calc((100svh - 168px) * var(--photo-ratio))); }
  .project-photo-pair { display:flex; align-items:flex-start; justify-content:center; gap:clamp(24px,2.2vw,40px); }
  .project-photo-pair .project-photo { min-width:0; flex:0 1 auto; }
}
@media(max-width:760px) {
  .project-intro { padding-block:20px 32px; }
  .project-intro h1 { margin-top:24px; font-size:clamp(30px,7.8vw,48px); }
  .project-photos { width:100%; gap:36px; }
  .project-navigation { align-items:flex-start; flex-direction:column; gap:36px; padding-block:48px 64px; }
  .project-next { width:100%; }
}