/* A consistent film frame lets the work lead the archive. */
.work-page .archive-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 820px) {
  .work-page .archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.work-page .project-image,
.work-page .project-card--wide .project-image,
.work-page .project-card--narrow .project-image {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.work-page .project-title {
  font-size: clamp(1.1rem, 4.7cqi, 1.6rem);
  line-height: 1.12;
}

/* Fill the thumbnail frame, keeping the main campaign title within the crop. */
#the-game-plan .project-image,
#the-game-plan .project-image > img,
#the-game-plan .project-hover-video {
  background: #03150e;
}

#the-game-plan .project-image > img,
#the-game-plan .project-hover-video {
  object-fit: cover;
}

#the-game-plan .project-image > img {
  object-position: center 45%;
}

#the-game-plan .project-open .project-image > img {
  transform: none;
}

.dialog-media img[src*="game-plan-thumbnail-v71"] {
  object-fit: contain;
  background: #03150e;
}

/* Supporting campaign assets live below the original film in the project. */
.dialog-body .game-plan-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-top: 24px;
  align-items: start;
}

.game-plan-gallery .dialog-support {
  min-width: 0;
  margin: 0;
}

.game-plan-gallery video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #03150e;
  border-radius: 14px;
}

.game-plan-gallery .game-plan-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  padding: 24px;
  object-fit: contain;
  border: 1px solid var(--line);
}

.game-plan-gallery .game-plan-logo--light { background: #fff; }
.game-plan-gallery .game-plan-logo--green { background: #005b29; }

@media (min-width: 821px) {
  .dialog-body .game-plan-gallery--motion,
  .dialog-body .game-plan-gallery--logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dialog-body .game-plan-gallery--artwork {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Shift the intact campaign image left; preserve the separate lettering layer. */
#fifa-world-cup .project-image > img:not(.project-title-art) {
  width: 120%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  transform: translateX(-16.6667%);
}

#fifa-world-cup .project-title-art--fifa {
  top: 12%;
  right: 4%;
  width: 31%;
  transform: none;
  transform-origin: right center;
}

#fifa-world-cup .project-image::before {
  content: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #fifa-world-cup .project-title-art--fifa {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transform: translate3d(12px, 3px, 0) rotate(2deg);
    transition: opacity 180ms ease, clip-path 620ms var(--ease), transform 620ms var(--ease);
  }

  #fifa-world-cup:hover .project-title-art--fifa,
  #fifa-world-cup:focus-within .project-title-art--fifa {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}

@media (max-width: 540px) {
  .work-page .project-title {
    font-size: clamp(1.1rem, 5cqi, 1.45rem);
  }
}

/* Keep the filter in document flow, clear of every project label. */
.work-page .filter-control { position: relative; top: auto; }
.work-page .archive-grid { margin-top: 0; padding-top: 80px; }
.work-page .contact-content { min-height: max(580px, 52vw); }
.work-page .contact-content .contact-portrait {
  position: absolute; width: min(50vw, 720px); aspect-ratio: 1; border-radius: 50%;
  top: 50%; left: auto; right: 0; transform: translateY(-50%);
  z-index: var(--z-image);
}
.work-page .contact-content > :not(.contact-portrait) { position: relative; z-index: var(--z-info); }
@media (min-width: 821px) {
  .work-page .contact-lead { max-width: min(40vw, 580px); }
}
@media (max-width: 820px) {
  .work-page .contact-content { min-height: 0; }
  .work-page .contact-content .contact-portrait { position: relative; inset: auto; width: min(76vw, 480px); transform: none; align-self: flex-end; margin-top: 28px; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  #fifa-world-cup .project-title-art--fifa { opacity: 1; clip-path: none; transform: none; }
}