/* A vertical editorial sequence on the site's eight-column grid. Shared chrome stays unchanged. */
.work-page { font-synthesis:none; }
.work-page .work-intro { padding-top:clamp(120px,12vw,176px); padding-bottom:clamp(24px,3vw,48px); row-gap:clamp(32px,4vw,64px); }
.work-page .work-back { grid-column:1 / -1; font-size:var(--label-size); }
.work-page .work-copy { grid-column:1 / 7; }
.work-page .work-copy h1 { font-size:var(--link-m); line-height:1.2; }
html body main .work-intro h1 > .page-link { font-size:var(--link-m); }
.work-page .work-copy p { color:white; mix-blend-mode:difference; }
.work-media { --page-gutter:clamp(20px,2.78vw,64px); display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); column-gap:clamp(14px,1.4vw,24px); row-gap:clamp(48px,7vw,112px); padding-inline:var(--page-gutter); align-items:start; }
.work-media > .work-image { grid-column:2 / 8; width:100%; margin:0; min-width:0; }
.work-media > .work-image:nth-child(3n + 2) { grid-column:3 / 8; }
.work-media > .work-image:nth-child(3n) { grid-column:2 / 6; }
.work-media > .work-image :is(img,video) { display:block; width:100%; height:auto; }
/* Portraits stay quiet within four columns, capped at 65svh without cropping. */
.work-media > .work-image.is-portrait { grid-column:3 / 7; width:min(100%,calc(65svh * var(--ar))); justify-self:center; }
.work-page .work-navigation { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; font-size:var(--label-size); }
@media (width < 768px) {
  .work-media { grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:48px; }
  .work-media > .work-image { grid-column:1 / -1; }
  .work-media > .work-image:nth-child(3n + 2) { grid-column:2 / 5; }
  .work-media > .work-image:nth-child(3n) { grid-column:1 / 4; }
  .work-media > .work-image.is-portrait { grid-column:2 / 4; }
  .work-page .work-copy { margin-top:32px; }
  .work-page .work-navigation { display:flex; }
}