.photo-hero {
  height: calc(100svh - 5.3rem);
  min-height: 650px;
  position: relative;
  color: #fff;
  overflow: hidden;
}
.photo-hero > img {
  position: absolute;
  inset: 0;
  object-position: center 42%;
}
.photo-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(20, 14, 12, 0.84),
      rgba(20, 14, 12, 0.46) 40%,
      rgba(20, 14, 12, 0.06) 72%
    ),
    linear-gradient(0deg, rgba(20, 14, 12, 0.45), transparent 45%);
}
.photo-hero-copy {
  position: absolute;
  z-index: 2;
  left: max(5vw, calc((100vw - 1180px) / 2));
  bottom: 12%;
  width: min(760px, 88vw);
}
.photo-hero-copy h1 {
  font-size: clamp(4rem, 9vw, 8.5rem);
}
.photo-hero-copy p:not(.eyebrow) {
  font-size: clamp(1rem, 2vw, 1.3rem);
  max-width: 540px;
}
.photo-hero .eyebrow,
.image-cta .eyebrow {
  color: #f5b9a5;
}
.btn.light {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}
.btn.light:hover {
  background: #fff;
  color: var(--ink);
}
.scroll-note {
  position: absolute;
  right: 4vw;
  bottom: 3rem;
  z-index: 2;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.portfolio-intro {
  text-align: center;
}
.portfolio-intro .lede {
  font: 500 clamp(1.4rem, 2.6vw, 2.2rem) / 1.4 var(--serif);
  max-width: 850px;
  margin: auto;
}
.cinema-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: min(43vw, 680px);
  gap: 0.5rem;
  background: var(--ink);
  padding: 0.5rem;
}
.cinema-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.cinema-grid .cinema-wide {
  grid-column: span 2;
  height: min(58vw, 850px);
}
.cinema-grid img {
  transition: transform 0.8s ease;
}
.cinema-grid figure:hover img {
  transform: scale(1.015);
}
.full-bleed-break {
  height: min(75vh, 850px);
  position: relative;
  color: #fff;
}
.full-bleed-break:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 14, 12, 0.7), transparent 65%);
}
.full-bleed-break blockquote {
  position: absolute;
  z-index: 2;
  left: 6vw;
  bottom: 10%;
  font: 500 clamp(2.5rem, 6vw, 6rem) / 1.08 var(--serif);
  max-width: 700px;
  margin: 0;
}
.image-cta {
  position: relative;
  min-height: 680px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
}
.image-cta > img {
  position: absolute;
  inset: 0;
  opacity: 0.48;
}
.image-cta:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(20, 14, 12, 0.2), rgba(20, 14, 12, 0.72));
}
.image-cta > div {
  position: relative;
  z-index: 2;
}
.image-cta .eyebrow {
  margin-bottom: 1rem;
}
@media (max-width: 700px) {
  .photo-hero {
    min-height: 720px;
  }
  .photo-hero-shade {
    background: linear-gradient(
      0deg,
      rgba(20, 14, 12, 0.82),
      rgba(20, 14, 12, 0.05) 80%
    );
  }
  .photo-hero-copy {
    bottom: 10%;
  }
  .photo-hero-copy h1 {
    font-size: clamp(3.5rem, 17vw, 5.6rem);
  }
  .scroll-note {
    display: none;
  }
  .cinema-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 70vw;
  }
  .cinema-grid .cinema-wide {
    grid-column: auto;
    height: 70vw;
  }
  .image-cta {
    min-height: 580px;
  }
}