.hero {
  background:
    linear-gradient(90deg, #faf8f4 0%, #faf8f4 46%, #faf8f4eb 56%, transparent 75%),
    url('/assets/hero-svetlana-hq.jpg') calc(100% + 70px) center / auto 100% no-repeat,
    #faf8f4;
  image-rendering: auto;
}

.about-photo {
  background:
    url('/assets/about-svetlana-original.jpg') center 43% / cover no-repeat,
    #ddd8d0;
  image-rendering: auto;
}

@media (max-width: 900px) {
  .hero {
    height: auto;
    min-height: 0;
    background: #faf8f4;
  }

  .hero-inner {
    height: auto;
  }

  .hero-copy {
    width: 100%;
    padding: 44px 0 34px;
  }

  .hero::after {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    /* Use the lossless cleaned source on phones and tablets. The desktop
       background above intentionally stays on the existing JPG. */
    background: url('/assets/hero-svetlana-clean-v3.png') center / cover no-repeat;
    image-rendering: auto;
  }
}

@media (max-width: 600px) {
  .hero-copy {
    padding: 28px 0 24px;
  }

  .hero .actions {
    gap: 10px;
    margin-top: 22px;
  }

  .about-photo {
    /* Mobile-only lossless source prevents JPEG ringing in hair and skin. */
    background-image: url('/assets/about-svetlana-clean-v3.png');
    background-position: center 43%;
    background-size: cover;
  }
}