/* Cappao uses the shared Vesuvya case-study layout. */
.cappao-page .project-reference .headline-wrap {
  width: min(calc(100% - 48px), 840px);
  aspect-ratio: auto;
  overflow: visible;
}

.cappao-page #project-title {
  margin: 0;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.cappao-page .case-study-logo {
  display: block;
  width: auto;
  max-width: min(100%, 320px);
  height: auto;
  max-height: 140px;
  margin-inline: auto;
  object-fit: contain;
  filter: brightness(0);
}

.vne-page .case-study-logo {
  max-width: min(100%, 220px);
  max-height: 96px;
}

/* Frame the Civò logo without the transparent margins of the shared asset. */
.civo-page #project-title {
  position: relative;
  width: min(100%, 246px);
  aspect-ratio: 1218 / 692;
  margin-inline: auto;
  overflow: hidden;
}

.civo-page .case-study-logo {
  position: absolute;
  width: calc(100% * 2000 / 1218);
  max-width: none;
  max-height: none;
  left: calc(-100% * 391 / 1218);
  top: calc(-100% * 639 / 692);
}

.cappao-page #project-title span {
  display: block;
  margin-top: 12px;
  font-size: clamp(22px, 3vw, 34px);
  font-style: italic;
  letter-spacing: -.02em;
}

.cappao-page .photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cappao-page .project-story {
  gap: clamp(32px, 7vw, 96px);
  padding-bottom: 70px;
}

.cappao-page .project-story p {
  line-height: 1.5;
}

@media (max-width: 720px) {
  /* Keep every supplied asset reachable on small screens. */
  .cappao-page .project-reference .photo-strip {
    position: relative;
    left: auto;
    width: 100%;
    padding: 12px 22px;
    overflow-x: auto;
    transform: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 22px;
  }

  .cappao-page .photo-card {
    flex: 0 0 min(68vw, 300px);
    height: auto;
    aspect-ratio: 9 / 16;
    transform: none;
    scroll-snap-align: center;
  }

  .cappao-page .project-story {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 48px;
  }

  .cappao-page .project-story-result {
    padding-top: 0;
    text-align: left;
  }
}