/* 07 — DOSSIER
   A carbon copy in a file. Courier throughout, uneven ink, a
   photostat of the print, a paperclip. One red ribbon accent,
   nowhere else. */

.sys-dossier {
  --ground: #F2EEE6;
  --ink: #23201B;
  --ink-soft: rgba(35, 32, 27, .66);
  --red: #B3382C;

  --pad-x: 88px;
  --pad-y: 86px;

  --setup-font: 'Courier Prime', 'Courier New', monospace;
  --setup-size: 40px;
  --setup-lh: 1.5;
  --setup-weight: 400;
  --setup-measure: 880px;

  --cue-font: 'Courier Prime', 'Courier New', monospace;
  --cue-size: 36px;
  --cue-weight: 700;

  --letter-font: 'Courier Prime', 'Courier New', monospace;
  --letter-size: 36px;
  --letter-lh: 1.56;
  --letter-gap: 30px;
  --letter-measure: 900px;
  --sheet-pad-x: 92px;
  --sheet-pad-y: 110px;
  --date-size: 36px;
  --date-color: var(--red);

  --after-font: 'Courier Prime', 'Courier New', monospace;
  --after-size: 44px;
  --after-lh: 1.5;
  --after-gap: 44px;

  --blank-hi: #CCC4B4; --blank-mid: #8A8172; --blank-lo: #2C2822;
}

.sys-dossier {
  background-color: #F2EEE6;
  background-image: var(--grain-url);
  background-size: 220px 220px;
  background-blend-mode: multiply;
}

/* photostat: blown-out high contrast, filed slightly crooked */
.sys-dossier .photo {
  left: 138px; right: 138px; top: 672px; height: 490px;
  transform: rotate(-1.3deg);
  box-shadow: 0 16px 34px rgba(35, 32, 27, .26);
}
.sys-dossier .photo img.p-a { filter: grayscale(1) contrast(2.7) brightness(1.22); }
.sys-dossier .photo .tex {
  display: block;
  background-image: var(--grain-url);
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: .34;
}

/* the paperclip */
.sys-dossier .cover-media .deco::before {
  content: "";
  position: absolute;
  left: 158px; top: 626px;
  width: 44px; height: 116px;
  border: 5px solid rgba(70, 72, 78, .72);
  border-radius: 24px;
  transform: rotate(-16deg);
  z-index: 2;
}
.sys-dossier .cover-media .deco::after {
  content: "";
  position: absolute;
  left: 171px; top: 646px;
  width: 20px; height: 82px;
  border: 5px solid rgba(70, 72, 78, .55);
  border-radius: 14px;
  transform: rotate(-16deg);
  z-index: 2;
}

.sys-dossier .cover-cue { --cue-color: var(--red); }

/* uneven ink, the way a typewriter ribbon runs dry */
.sys-dossier .letter-body > .blk:nth-child(2n)   { opacity: .93; }
.sys-dossier .letter-body > .blk:nth-child(3n+1) { opacity: .97; }

.sys-dossier .letter-sheet .deco::before {
  content: "";
  position: absolute;
  left: 92px; right: 92px; top: 66px;
  height: 1px;
  background: rgba(35, 32, 27, .22);
}
.sys-dossier .blk-sig { color: rgba(35, 32, 27, .82); }