/* The photo mounted on the card: a print with its corners tucked into slits cut in the paper.
   Used on the letter, the code page and the inner pages. */
.still-life {
  width: 100%;
  position: relative;
}
.still-life--compact {
  max-width: 470px;
  margin: 0 auto;
}
.still-life__image {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  /* How far each corner of the print is tucked behind the card. Cut by hand, so no two match. */
  --slit-tl: 27px;
  --slit-tr: 31px;
  --slit-br: 25px;
  --slit-bl: 29px;
  /* The print's white border. */
  --margin: 8px;
  /* Set by hand, so never quite square. The print, its shadow and its cuts all turn by this. */
  --tilt: 0.8deg;
}
.still-life--compact .still-life__image {
  --slit-tl: 30px;
  --slit-tr: 26px;
  --slit-br: 29px;
  --slit-bl: 25px;
  --tilt: -0.7deg;
}
/* A photographic print on its own paper, so it is not blended into the card. Its corners pass
   under the card through the slits, so the card shows where they were. */
.still-life__print {
  position: absolute;
  inset: 0;
  padding: var(--margin);
  background: #fbf8f3;
  rotate: var(--tilt);
  clip-path: polygon(
    var(--slit-tl) 0,
    calc(100% - var(--slit-tr)) 0,
    100% var(--slit-tr),
    100% calc(100% - var(--slit-br)),
    calc(100% - var(--slit-br)) 100%,
    var(--slit-bl) 100%,
    0 calc(100% - var(--slit-bl)),
    0 var(--slit-tl)
  );
}
.still-life__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(0.96);
}
/* The print rests on the card, lit from the upper left, so it shades the card below and to its
   right. The shade fades out toward each slit, where the print dips under the card. */
.still-life__shadow {
  position: absolute;
  inset: 0;
  rotate: var(--tilt);
  pointer-events: none;
}
.still-life__shadow::before,
.still-life__shadow::after {
  content: '';
  position: absolute;
}
.still-life__shadow::before {
  top: 100%;
  left: calc(var(--slit-bl) + 2px);
  right: calc(var(--slit-br) - 2px);
  height: 5px;
  background: linear-gradient(#39112b2e, #39112b00);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.still-life__shadow::after {
  top: max(var(--slit-tl), var(--slit-tr));
  bottom: max(var(--slit-bl), var(--slit-br));
  left: 0;
  right: -3px;
  background: linear-gradient(90deg, #39112b00 calc(100% - 3px), #39112b22);
  mask-image: linear-gradient(transparent, #000 30%, #000 85%, transparent);
}
/* The right corners are mirrored rather than rotated, so each cut keeps the light on the same side. */
.still-life__corners {
  position: absolute;
  inset: 0;
  rotate: var(--tilt);
  pointer-events: none;
}
.still-life__corner {
  /* The artwork's cut spans 36.4 of its 44 units and starts 4 units in, so its box is scaled
     from the slit and pushed out to let the cut overshoot the print. */
  position: absolute;
  width: calc(var(--slit) * 44 / 36.4);
  height: calc(var(--slit) * 44 / 36.4);
  --overshoot: calc(var(--slit) * -4 / 36.4);
}
.still-life__corner--tl {
  --slit: var(--slit-tl);
  top: var(--overshoot);
  left: var(--overshoot);
}
.still-life__corner--tr {
  --slit: var(--slit-tr);
  top: var(--overshoot);
  right: var(--overshoot);
  scale: -1 1;
}
.still-life__corner--br {
  --slit: var(--slit-br);
  bottom: var(--overshoot);
  right: var(--overshoot);
  scale: -1 1;
}
.still-life__corner--bl {
  --slit: var(--slit-bl);
  bottom: var(--overshoot);
  left: var(--overshoot);
}

@media (max-width: 760px) {
  .still-life--compact {
    max-width: 330px;
  }
  .still-life__image {
    --slit-tl: 19.5px;
    --slit-tr: 22.5px;
    --slit-br: 18px;
    --slit-bl: 21px;
    --margin: 5px;
  }
  .still-life--compact .still-life__image {
    --slit-tl: 22px;
    --slit-tr: 19px;
    --slit-br: 21px;
    --slit-bl: 18px;
  }
}