/* 04 — PAPER CUT
   Ink navy ground, torn cream paper laid over it, two strips of tape.
   The loudest cover in the set. The letter is one large torn sheet,
   slightly off square, as if it had been placed down by hand. */

.sys-papercut {
  --navy: #1B2233;
  --cream: #F6EFE2;
  --ground: var(--navy);
  --ink: #1F2530;
  --ink-soft: rgba(31, 37, 48, .66);

  --pad-x: 0px;
  --pad-y: 0px;

  --setup-font: 'Fraunces', Georgia, serif;
  --setup-size: 45px;
  --setup-lh: 1.34;
  --setup-weight: 400;
  --setup-measure: 660px;

  --cue-font: 'Fraunces', Georgia, serif;
  --cue-size: 36px;
  --cue-weight: 500;

  --letter-font: 'Libre Caslon Text', Georgia, serif;
  --letter-size: 36px;
  --letter-lh: 1.54;
  --letter-gap: 28px;
  --letter-measure: 790px;
  --sheet-pad-x: 128px;
  --sheet-pad-y: 124px;

  --after-font: 'Fraunces', Georgia, serif;
  --after-size: 46px;
  --after-lh: 1.42;
  --after-weight: 400;

  --blank-hi: #C6BBA6; --blank-mid: #5A6478; --blank-lo: #10151F;
}

.sys-papercut.cover { background: #1B2233; padding: 0; }

/* the photograph, torn out */
.sys-papercut .photo {
  left: 322px; right: 54px; top: 556px; height: 590px;
  background: var(--cream);
  padding: 22px;
  clip-path: polygon(
    0.0% 1.18%, 8.33% 1.46%, 16.67% 2.4%, 25.0% 1.21%, 33.33% 1.32%, 41.67% 1.53%,
    50.0% 0.48%, 58.33% 1.33%, 66.67% 1.64%, 75.0% 2.06%, 83.33% 0.24%, 91.67% 0.79%,
    100.0% 0.24%, 98.38% 10.0%, 98.61% 20.0%, 99.92% 30.0%, 98.04% 40.0%, 98.07% 50.0%,
    98.69% 60.0%, 98.77% 70.0%, 99.69% 80.0%, 99.97% 90.0%, 100.0% 98.63%, 91.67% 99.85%,
    83.33% 99.51%, 75.0% 99.37%, 66.67% 99.92%, 58.33% 98.79%, 50.0% 98.85%, 41.67% 97.81%,
    33.33% 98.65%, 25.0% 98.34%, 16.67% 98.7%, 8.33% 98.28%, 0.0% 98.81%, 0.56% 90.0%,
    2.0% 80.0%, 1.99% 70.0%, 1.68% 60.0%, 1.42% 50.0%, 0.63% 40.0%, 0.46% 30.0%,
    0.58% 20.0%, 0.14% 10.0%
  );
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .46));
}
.sys-papercut .photo img { width: 100%; height: 100%; }
.sys-papercut .photo img.p-a { filter: grayscale(.25) contrast(1.06) saturate(.9); }

/* the setup, on a torn scrap, top left */
.sys-papercut .cover-setup {
  margin: 74px 0 0 58px;
  padding: 58px 64px 64px 60px;
  background: var(--cream);
  color: #1F2530;
  transform: rotate(-1.1deg);
  clip-path: polygon(
    0.0% 2.22%, 9.09% 2.28%, 18.18% 2.14%, 27.27% 0.2%, 36.36% 1.42%, 45.45% 1.02%,
    54.55% 1.27%, 63.64% 0.31%, 72.73% 0.46%, 81.82% 1.07%, 90.91% 0.53%, 100.0% 1.09%,
    99.96% 12.5%, 99.85% 25.0%, 98.72% 37.5%, 99.24% 50.0%, 99.08% 62.5%, 98.68% 75.0%,
    99.35% 87.5%, 100.0% 99.86%, 90.91% 98.12%, 81.82% 98.59%, 72.73% 98.42%, 63.64% 98.51%,
    54.55% 97.67%, 45.45% 99.13%, 36.36% 98.18%, 27.27% 99.12%, 18.18% 98.63%, 9.09% 98.41%,
    0.0% 99.25%, 0.15% 87.5%, 0.85% 75.0%, 1.29% 62.5%, 1.06% 50.0%, 0.81% 37.5%,
    1.16% 25.0%, 0.33% 12.5%
  );
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
  z-index: 3;
}

/* two strips of tape */
.sys-papercut .cover-media .deco::before,
.sys-papercut .cover-media .deco::after {
  content: "";
  position: absolute;
  width: 196px; height: 56px;
  background: linear-gradient(105deg,
    rgba(240, 233, 216, .62) 0%,
    rgba(240, 233, 216, .48) 48%,
    rgba(240, 233, 216, .66) 100%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .32);
  z-index: 4;
}
.sys-papercut .cover-media .deco::before { left: 268px; top: 526px; transform: rotate(-32deg); }
.sys-papercut .cover-media .deco::after  { right: 22px;  top: 1108px; transform: rotate(-24deg); }

.sys-papercut .cover-cue {
  margin: 0 62px 78px 0;
  padding: 24px 36px 28px;
  background: var(--cream);
  color: #1F2530;
  transform: rotate(.8deg);
  clip-path: polygon(
    0.0% 3.75%, 12.5% 0.5%, 25.0% 3.4%, 37.5% 4.63%, 50.0% 4.59%, 62.5% 2.83%,
    75.0% 3.47%, 87.5% 2.03%, 100.0% 2.9%, 99.68% 25.0%, 97.95% 50.0%, 98.2% 75.0%,
    100.0% 98.45%, 87.5% 97.92%, 75.0% 95.95%, 62.5% 97.56%, 50.0% 94.72%, 37.5% 94.66%,
    25.0% 95.39%, 12.5% 99.5%, 0.0% 99.59%, 0.87% 75.0%, 1.08% 50.0%, 2.11% 25.0%
  );
  box-shadow: 0 12px 26px rgba(0, 0, 0, .34);
  z-index: 3;
}

/* the letter: one big torn sheet, placed slightly crooked */
.sys-papercut.letter { background: #1B2233; }
.sys-papercut .letter-sheet {
  background: #FBF6EC;
  position: absolute;
  inset: 34px;
  width: auto; height: auto;
  transform: rotate(-1.05deg);
  clip-path: polygon(
    0.0% 0.37%, 5.56% 0.75%, 11.11% 0.24%, 16.67% 1.23%, 22.22% 0.35%, 27.78% 0.83%,
    33.33% 1.39%, 38.89% 0.6%, 44.44% 1.45%, 50.0% 1.1%, 55.56% 0.82%, 61.11% 0.94%,
    66.67% 0.88%, 72.22% 0.54%, 77.78% 1.5%, 83.33% 0.61%, 88.89% 1.48%, 94.44% 1.28%,
    100.0% 0.04%, 99.72% 7.14%, 99.47% 14.29%, 99.1% 21.43%, 99.8% 28.57%, 99.32% 35.71%,
    99.6% 42.86%, 99.14% 50.0%, 98.98% 57.14%, 99.16% 64.29%, 99.79% 71.43%, 99.16% 78.57%,
    99.52% 85.71%, 99.08% 92.86%, 100.0% 99.29%, 94.44% 98.64%, 88.89% 98.52%, 83.33% 98.76%,
    77.78% 98.76%, 72.22% 98.77%, 66.67% 99.11%, 61.11% 99.74%, 55.56% 98.52%, 50.0% 99.3%,
    44.44% 99.98%, 38.89% 99.35%, 33.33% 99.38%, 27.78% 99.7%, 22.22% 98.56%, 16.67% 99.83%,
    11.11% 98.64%, 5.56% 99.18%, 0.0% 99.73%, 0.39% 92.86%, 0.5% 85.71%, 0.13% 78.57%,
    0.84% 71.43%, 0.72% 64.29%, 1.08% 57.14%, 0.91% 50.0%, 0.86% 42.86%, 1.1% 35.71%,
    1.03% 28.57%, 0.71% 21.43%, 0.59% 14.29%, 0.58% 7.14%
  );
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.sys-papercut .blk-sig { color: rgba(31, 37, 48, .8); }

.sys-papercut .after-body > p:last-child { color: #fff; }