/* Keep the gallery's desktop compositions on smaller screens.
   Process projects use larger two-column steps; all media stays contained. */
@media (max-width: 1000px) {
  .portfolio .work-chapter:not(:where(.chapter-tonal, .compact-chapter)) > .chapter-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 7.1vw;
    gap: clamp(1px, .21vw, 3px);
  }
  .portfolio .work-chapter:not(:where(.chapter-tonal, .compact-chapter)) > .chapter-grid > .tile {
    grid-column: var(--column, span 4);
    grid-row: var(--row, span 5);
    aspect-ratio: auto;
    align-self: stretch;
    width: 100%;
    margin: 0;
  }
  .portfolio .chapter-coastal-sweats > .chapter-grid {
    gap: clamp(1px, .35vw, 5px);
  }
  .portfolio .chapter-tonal > .chapter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-auto-rows: auto;
    align-items: center;
  }
  .portfolio .chapter-tonal > .chapter-grid > .tile,
  .portfolio .chapter-tonal > .chapter-grid > .tile.is-lead {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: var(--media-ratio);
    align-self: center;
  }
  .portfolio .chapter-tonal > .chapter-grid > .tile.is-film {
    grid-column: auto;
    grid-row: auto;
    width: 80%;
    aspect-ratio: var(--media-ratio);
    justify-self: center;
    align-self: center;
  }
  .portfolio .chapter-violet-shoot > .chapter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(2px, .56vw, 8px);
    row-gap: clamp(4px, 1.11vw, 16px);
    padding: 1.67vw 4vw 2.36vw;
  }
  .chapter-violet-shoot .xo-panel {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    min-height: 13.2vw;
  }
  .chapter-violet-shoot .xo-panel svg {
    width: calc(100% - 2vw);
    height: calc(100% - 2vw);
  }

  .campaign-case {
    --flow-media-height: clamp(180px, 58vw, 440px);
    --flow-gap: clamp(24px, 6vw, 48px);
    --flow-row-gap: 64px;
    padding-inline: clamp(12px, 2.78vw, 28px);
  }
  .campaign-flow,
  .campaign-flow--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--flow-row-gap) var(--flow-gap);
    max-width: none;
    margin: 0;
  }
  .flow-label {
    gap: 8px;
    min-height: 56px;
    height: 56px;
    margin-bottom: 16px;
  }
  .flow-label h4 { font-size: 16px; }
  .campaign-case .flow-media {
    width: 100%;
    height: var(--flow-media-height);
    max-width: none;
    aspect-ratio: auto;
    margin: 0;
  }
  .campaign-case .flow-media a,
  .campaign-case .flow-media img {
    height: 100%;
    max-height: none;
  }
  .flow-arrow {
    position: absolute;
    left: calc(100% + 2px);
    top: calc(72px + var(--flow-media-height) / 2 - 15px);
    width: calc(var(--flow-gap) - 4px);
    height: 30px;
    transform: none;
    margin: 0;
  }
  /* Continue from the first pair to the second row in reading order. */
  .campaign-step:nth-child(2) > .flow-arrow {
    left: calc(var(--flow-gap) / -2 - 18px);
    top: calc(100% + (var(--flow-row-gap) - 30px) / 2);
    width: 36px;
    transform: rotate(90deg);
  }
  .campaign-film { padding-bottom: 0; }
}

@media (max-width: 640px) {
  /* Compact film buttons leave the complete frame and image number visible. */
  .portfolio .tile-index { inset: 5px auto auto 5px; }
  .portfolio .tile .film-marker {
    inset: 5px 5px auto auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    max-width: none;
    padding: 0;
    font-size: 0;
  }
  .portfolio .tile .film-marker::after { content: "▶"; font-size: 12px; }

  /* Each numbered heading stays with its image or video in the 2-column grid. */
  .flow-label {
    gap: 4px;
    flex-direction: column;
    align-items: flex-start;
  }
  .flow-label > span,
  .flow-label h4 { font-size: 14px; line-height: 1.2; }
  .flow-label h4 { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
  .seo-stage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .seo-stage-grid:has(figure:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
  .seo-stage-grid img { aspect-ratio: 3 / 4; object-fit: contain; }
}