/* Project hero — 1920 × 1080 image, darkening towards the bottom, 140px serif title pinned to the bottom-left gutter.
   With a hero video the image stays underneath as the poster and the video covers it once it plays. */
.arc-project-hero { position: relative; height: clamp(520px, 56.25vw, 1080px); overflow: hidden; background: var(--arc-ink); color: var(--arc-white); }
.arc-project-hero__media { position: absolute; inset: 0; animation: arcMask 1.3s var(--arc-ease) both; }
.arc-project-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; animation: arcDrift 18s ease-in-out infinite alternate; }
.arc-project-hero--video .arc-project-hero__media img { animation: none; }
.arc-project-hero__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.arc-project-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .62) 60%, rgba(0, 0, 0, .7) 100%); }
.arc-project-hero__title { position: absolute; left: var(--arc-gutter); right: var(--arc-gutter); bottom: 56px; margin: 0; max-width: 1200px; font-family: var(--arc-font-serif); font-weight: 300; font-size: clamp(48px, 7.3vw, 140px); line-height: .98; color: inherit; animation: arcRise 1.1s .4s ease both; }

@media (max-width: 767.98px) {
  .arc-project-hero { height: auto; min-height: 480px; display: flex; align-items: flex-end; }
  .arc-project-hero__media img { animation: none; }
  .arc-project-hero__title { position: relative; left: auto; right: auto; bottom: auto; padding: 200px var(--arc-gutter) 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .arc-project-hero__video { display: none; }
  .arc-project-hero__media, .arc-project-hero__media img, .arc-project-hero__title { animation: none; }
}