/* A cut paper sheet, matching the story's existing paper text panels. */
.connection .copy {
  --accent: #a34226;
  isolation: isolate;
  background: transparent;
}

.connection .copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34px -32px -32px;
  background: url('assets/reading-paper.svg') center / 100% 100% no-repeat;
  transform: rotate(-.7deg);
  filter: drop-shadow(8px 14px 16px #4d321f30);
  pointer-events: none;
}

@media (min-width: 801px) {
  /* Keep the reply slip below the paper instead of covering its lettering. */
  .connection .slip-ai {
    bottom: 9%;
    right: 20%;
  }
}

@media (max-width: 800px) {
  .connection .copy::before {
    inset: -18px -17px -20px;
    transform: rotate(-.4deg);
    filter: drop-shadow(4px 8px 10px #4d321f26);
  }
}

/* The static reading layout already separates the image and paragraphs. */
body.reduced .connection .copy::before {
  display: none;
}