/* A portrait scene that dissolves into the page, with the subject kept clear. */
.about-hero.about-hero-scene {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  min-height: clamp(740px, 50vw, 960px);
  margin: -146px 0 0;
  padding: 146px 0 0;
  overflow: hidden;
  overflow: clip;
  background: #000;
}
.about-scene-art {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.about-scene-art > img {
  position: absolute;
  top: 0;
  right: clamp(-230px, -6vw, -60px);
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  filter: saturate(.82);
}
.about-scene-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #000 0%, #000f 24%, #000a 39%, #0003 56%, transparent 73%),
    linear-gradient(180deg, #0004 0%, transparent 25%, transparent 64%, #000a 85%, #000 100%);
  pointer-events: none;
  z-index: 1;
}
.about-hero-layout {
  position: relative;
  width: calc(100% - var(--gutter) * 2);
  padding: 64px 0 100px;
  z-index: 2;
}
.about-hero-scene .about-hero-copy { max-width: min(56%, 820px); }
.about-hero-scene .about-hero-copy > .eyebrow { margin-bottom: 34px; color: var(--accent); }
.about-hero-scene h1 { font-size: clamp(78px, 7.2vw, 142px); line-height: 1.04; letter-spacing: -.015em; }
.about-hero-scene .about-hero-copy > .serif { max-width: 500px; margin-top: 30px; font-size: clamp(23px, 1.9vw, 30px); }
.about-hero-scene + .page-prose { padding-top: clamp(24px, 3vw, 52px); }
.about-hero-scene + .page-prose.prose > p:first-child { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }

@media (min-width: 810px) and (max-width: 1199px) {
  .about-hero.about-hero-scene { min-height: 0; padding-top: 0; }
  .about-scene-art { height: 800px; mask-image: linear-gradient(#000 75%, transparent 100%); -webkit-mask-image: linear-gradient(#000 75%, transparent 100%); }
  .about-scene-art > img { right: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
  .about-scene-shade { background: linear-gradient(180deg, #0005 0%, transparent 24%, #0001 43%, #000b 68%, #000 89%); }
  .about-hero-layout { padding: 500px 0 72px; }
  .about-hero-scene .about-hero-copy { max-width: 100%; text-align: center; }
  .about-hero-scene .about-hero-copy > .eyebrow { margin-bottom: 24px; }
  .about-hero-scene h1 { font-size: clamp(90px, 10vw, 118px); }
  .about-hero-scene .about-hero-copy > .serif { margin: 26px auto 0; }
}

@media (max-width: 809px) {
  .about-hero.about-hero-scene { min-height: 0; margin-top: -105px; padding-top: 0; }
  .about-scene-art { height: clamp(520px, 110vw, 720px); mask-image: linear-gradient(#000 75%, transparent 100%); -webkit-mask-image: linear-gradient(#000 75%, transparent 100%); }
  .about-scene-art > img { right: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .about-scene-shade { background: linear-gradient(180deg, #0005 0%, transparent 20%, #0001 38%, #000b 62%, #000 82%); }
  .about-hero-layout { padding: clamp(355px, 70vw, 490px) 0 42px; }
  .about-hero-scene .about-hero-copy { max-width: 100%; text-align: center; }
  .about-hero-scene .about-hero-copy > .eyebrow { margin: 0 0 20px; font-size: 8px; }
  .about-hero-scene h1 { font-size: clamp(62px, 14vw, 96px); }
  .about-hero-scene .about-hero-copy > .serif { max-width: 360px; margin: 23px auto 0; font-size: 22px; }
  .about-hero-scene + .page-prose { padding-top: 24px; }
}