.portrait-effect {
  margin: 0;
}

.portrait-effect__image {
  position: relative;
  overflow: hidden;
  background: var(--bg-body);
}

@media (prefers-color-scheme: dark) {
  html:not(.light) .portrait-effect__image {
    background: #000;
  }
}

.portrait-effect__image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  cursor: default;
}

.portrait-effect__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease;
  touch-action: pan-y;
}

.portrait-effect__image.is-loading img,
.portrait-effect__image.is-ready img {
  visibility: hidden;
}

.portrait-effect__image.is-ready .portrait-effect__canvas {
  opacity: 1;
}

.portrait-effect:has(.portrait-effect__no-script) .portrait-effect__image.is-loading img {
  visibility: visible;
}

@media (max-width: 1199px) {
  body:has(.portrait-effect) {
    position: relative;
    isolation: isolate;
  }

  body:has(.portrait-effect) .single > h1:first-child {
    /* Reserve the hero below the nav, keeping the title at its top.
       The nav occupies about 4.1rem including its bottom margin. */
    min-height: max(6rem, calc(70svh - var(--p-sides-y) - 4.1rem));
    margin-bottom: 0;
  }

  .portrait-effect__image {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 75svh;
    opacity: 0.7;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, #000 65%, transparent);
  }

  .portrait-effect__image img {
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 1200px) {
  body:has(.portrait-effect) {
    position: relative;
    isolation: isolate;
  }

  /* Paint the body's scrolling borders above the fixed background. */
  body:has(.portrait-effect)::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--stripe-size)) 0;
    z-index: 0;
    border-block: var(--stripe-size) solid var(--c-primary);
    pointer-events: none;
  }

  body:has(.portrait-effect) .page-wrapper {
    max-width: min(65vw, 60rem);
  }

  .portrait-effect__image {
    position: fixed;
    top: 0;
    right: 0;
    z-index: -1;
    width: 70vw;
    height: 100vh;
    opacity: 0.7;
    pointer-events: none;
    mask-image: linear-gradient(to right, transparent, #000 45%);
  }

  .portrait-effect__image img {
    height: 100%;
    object-fit: cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portrait-effect__canvas {
    transition: none;
  }
}