.portrait-quote {
  --art-shift: 0px;
  --portrait-shift: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background: #251545;
  color: var(--porcelain);
}

.portrait-quote-art {
  position: absolute;
  z-index: -2;
  inset: -100px -5%;
  transform: translate3d(0, var(--art-shift), 0);
}

.portrait-quote-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .68;
  filter: saturate(.7);
}

.portrait-quote::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #0d0e3500 18%, #0d0e3545 50%, #0d0e35c4 100%);
  pointer-events: none;
}

.portrait-quote-layout {
  display: grid;
  grid-template-columns: .46fr .54fr;
  gap: 68px;
  align-items: center;
  min-height: 730px;
}

.portrait-quote-media {
  width: calc(100% + 115px);
  height: 735px;
  margin-left: -90px;
  margin-bottom: -58px;
  align-self: end;
  transform: translate3d(0, var(--portrait-shift), 0);
}

.portrait-quote-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

.portrait-quote-content {
  position: relative;
  padding-block: 92px 98px;
}

.portrait-quote blockquote {
  margin: 0;
}

.portrait-quote blockquote p {
  font-family: var(--serif);
  font-size: clamp(46px, 4.55vw, 72px);
  line-height: 1.16;
  letter-spacing: -.035em;
  max-width: 11em;
}

.portrait-quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 37px;
  padding-left: 3px;
  font-size: 18px;
  line-height: 1.5;
}

.portrait-quote figcaption span:last-child {
  color: var(--lavender);
  font-size: 15px;
}

.about-story {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 112px;
  align-items: start;
}

.about-story-heading h2 {
  max-width: 18ch;
}

.about-story .about-copy {
  padding-top: 4px;
}

.about-story .text-link {
  margin-top: 19px;
}

@media (min-width: 1600px) {
  .portrait-quote-layout { min-height: 790px; }
  .portrait-quote-media { height: 810px; width: calc(100% + 145px); margin-left: -115px; }
}

@media (max-width: 1150px) {
  .portrait-quote-layout { gap: 36px; min-height: 650px; }
  .portrait-quote-media { height: 660px; width: calc(100% + 100px); margin-left: -72px; }
  .portrait-quote-content { padding-block: 80px; }
  .portrait-quote blockquote p { font-size: clamp(39px, 4.6vw, 53px); }
  .about-story { gap: 65px; }
}

@media (min-width: 761px) and (max-width: 920px) {
  .portrait-quote-layout { min-height: 560px; }
  .portrait-quote-media { height: 580px; }
  .portrait-quote-content { padding-block: 72px; }
}

@media (max-width: 760px) {
  .portrait-quote::after { background: linear-gradient(180deg, #0d0e35c4 0%, #0d0e3540 55%, #0d0e3500 100%); }
  .portrait-quote-art { inset: -60px -35%; }
  .portrait-quote-layout { display: flex; flex-direction: column-reverse; gap: 0; min-height: 0; }
  .portrait-quote-content { width: 100%; padding: 59px 4px 31px; }
  .portrait-quote blockquote p { font-size: clamp(33px, 8.7vw, 52px); line-height: 1.17; }
  .portrait-quote figcaption { margin-top: 26px; font-size: 17px; }
  .portrait-quote figcaption span:last-child { font-size: 14px; }
  .portrait-quote-media { width: 112%; height: auto; aspect-ratio: 862 / 963; max-width: 565px; margin: 0 -6% -39px; align-self: center; }
  .portrait-quote-media img { width: 100%; height: auto; }
  .about-story { display: block; }
  .about-story-heading h2 { font-size: 39px; max-width: 20ch; }
  .about-story .about-copy { padding-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .portrait-quote-art, .portrait-quote-media { transform: none !important; }
}

@media print {
  .portrait-quote { background: white; color: black; break-inside: avoid; }
  .portrait-quote-art, .portrait-quote-media, .portrait-quote::after { display: none; }
  .portrait-quote-layout { display: block; min-height: 0; }
  .portrait-quote-content { padding-block: 24px; }
  .portrait-quote blockquote p { font-size: 32px; }
  .portrait-quote figcaption span:last-child { color: black; }
  .about-story { display: block; }
}