/* Final bounded client-preview polish for Direction A V1. */

.hero__media,
.chapter__lead,
.chapter-frame,
.progression figure,
.work-item {
  background: var(--night-soft);
}

.hero__media img,
.chapter__lead img,
.chapter-frame img,
.progression img,
.work-item img {
  background: var(--night-soft);
  color: transparent;
}

.studio {
  padding-top: clamp(96px, 11vw, 175px);
  padding-bottom: clamp(96px, 11vw, 175px);
}

.section-head {
  padding-top: clamp(80px, 9vw, 136px);
  padding-bottom: clamp(52px, 6vw, 90px);
}

.chapter {
  padding-bottom: clamp(90px, 10vw, 155px);
}

.chapter--halloween,
.chapter--christmas {
  padding-top: clamp(90px, 10vw, 150px);
  border-top: 1px solid var(--line-light);
}

.chapter__body {
  padding-top: clamp(56px, 6vw, 96px);
}

.chapter__intro {
  min-height: 320px;
}

.chapter--fall .chapter__lead-caption {
  background: var(--night-soft);
}

.chapter--halloween .chapter__lead-caption {
  background: var(--forest);
}

.chapter--christmas .chapter__lead-caption {
  background: #11130f;
}

.fall-story,
.selected-work,
.process,
.meet,
.inquiry {
  padding-top: clamp(96px, 10.5vw, 165px);
  padding-bottom: clamp(96px, 10.5vw, 165px);
}

.work-head {
  margin-bottom: clamp(58px, 7vw, 104px);
}

.work-grid {
  gap: clamp(50px, 6vw, 94px) clamp(26px, 4vw, 64px);
}

.process__steps {
  margin-top: clamp(62px, 7vw, 104px);
}

.process__steps li {
  min-height: 300px;
}

.process__steps h3 {
  margin-top: 64px;
}

.meet__grid {
  margin-top: 40px;
}

.inquiry__form button {
  width: min(100%, 260px);
  justify-self: start;
  background: transparent;
}

.chapter-frame figcaption,
.work-item figcaption {
  color: rgba(235, 232, 223, 0.96);
}

.chapter-frame figcaption::after {
  color: var(--mist);
}

.work-item figcaption span:last-child {
  color: rgba(235, 232, 223, 0.68);
}

img[src*="halloween-jack-arrival-08"] {
  object-position: 48% 50%;
}

img[src*="halloween-jack-detail-10"] {
  object-position: 48% 48%;
}

img[src*="halloween-spider-den"] {
  object-position: 50% 42%;
}

img[src*="halloween-hedge-estate"] {
  object-position: 50% 46%;
}

img[src*="fall-statue-staircase-25"] {
  object-position: 50% 47%;
}

img[src*="christmas-arched-entry-17"],
img[src*="christmas-candlelit-procession-20"] {
  object-position: 50% 50%;
}

@media (max-width: 760px) {
  .mobile-nav {
    z-index: 4;
  }

  .studio,
  .fall-story,
  .selected-work,
  .process,
  .meet,
  .inquiry {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .section-head {
    padding-top: 72px;
    padding-bottom: 46px;
  }

  .chapter {
    padding-bottom: 76px;
  }

  .chapter--halloween,
  .chapter--christmas {
    padding-top: 64px;
  }

  .chapter__lead-caption,
  .chapter__lead--reverse .chapter__lead-caption {
    min-height: 168px;
  }

  .chapter__body,
  .chapter__body--reverse {
    gap: 40px;
    padding-top: 52px;
  }

  .chapter__intro {
    min-height: 270px;
  }

  .work-head {
    margin-bottom: 50px;
  }

  .work-grid {
    gap: 50px;
  }

  .process__steps {
    margin-top: 48px;
  }

  .process__steps li,
  .process__steps li + li {
    min-height: 228px;
  }

  .process__steps h3 {
    margin-top: 44px;
  }

  .meet__grid {
    margin-top: 32px;
  }

  .inquiry__intro > p:last-child {
    margin-top: 26px;
  }

  .inquiry__form button {
    width: 100%;
  }
}