/* 10 — DOCUMENT
   The cover is the letter itself, set pale across the whole sheet,
   with the setup laid over it on a solid card. Slide two is the same
   sheet at full ink. You read the page twice: once as texture,
   once as words. */

.sys-document {
  --paper: #E9DFC8;
  --ground: var(--paper);
  --ink: #1E1910;
  --ink-soft: rgba(43, 36, 26, .62);

  --pad-x: 82px;
  --pad-y: 84px;

  --setup-font: 'Lexend', sans-serif;
  --setup-size: 42px;
  --setup-lh: 1.4;
  --setup-weight: 400;
  --setup-track: -.4px;
  --setup-measure: 540px;
  --setup-color: #F4ECD9;

  --cue-font: 'Lexend', sans-serif;
  --cue-size: 36px;
  --cue-weight: 400;

  --letter-font: 'Cormorant Garamond', Georgia, serif;
  --letter-size: 45px;
  --letter-lh: 1.44;
  --letter-gap: 30px;
  --letter-measure: 830px;
  --sheet-pad-x: 128px;
  --sheet-pad-y: 116px;

  --after-font: 'Cormorant Garamond', Georgia, serif;
  --after-size: 52px;
  --after-lh: 1.38;
  --after-gap: 42px;
  --after-weight: 500;

  --blank-hi: #CBBB9C; --blank-mid: #8B7A5C; --blank-lo: #2B241A;
}

.sys-document {
  background-color: var(--paper);
  background-image:
    var(--grain-url),
    radial-gradient(128% 96% at 50% 46%, rgba(255, 252, 240, .5) 0%, transparent 58%);
  background-size: 220px 220px, cover;
  background-blend-mode: multiply, normal;
}
.sys-document.cover::after,
.sys-document.letter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 130px rgba(88, 68, 38, .22);
}

/* the letter, pale, filling the sheet */
.sys-document .cover-ghost {
  display: block;
  position: absolute;
  inset: 78px 88px;
  z-index: 1;
  overflow: hidden;
}
.sys-document .ghost-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 35px;
  line-height: 1.5;
  color: rgba(43, 36, 26, .34);
}
.sys-document .ghost-body > * + * { margin-top: 24px; }
.sys-document .ghost-body .blk-list { list-style: none; }
.sys-document .ghost-body .blk-list li { display: flex; gap: .6em; }
.sys-document .ghost-body .blk-sig span { display: block; }

/* the photograph, faded, tucked low left behind everything */
.sys-document .photo {
  right: 84px; top: 88px;
  width: 262px; height: 318px;
  opacity: .58;
  z-index: 2;
  overflow: visible;
  box-shadow: 0 0 40px 26px #E9DFC8;
}
.sys-document .photo img { position: relative; }
.sys-document .photo img.p-a { filter: grayscale(1) sepia(.42) contrast(1.06); }

/* the setup, on a solid card of ink */
.sys-document .cover-setup {
  padding: 46px 52px 50px;
  background: #2B241A;
  color: #F4ECD9;
  z-index: 2;
  box-shadow: 0 16px 42px rgba(43, 36, 26, .34);
}
.sys-document .cover-cue { z-index: 2; }

.sys-document .letter-sheet { --sheet-bg: transparent; }
.sys-document .letter-body { font-weight: 500; }
.sys-document .blk-sig { color: rgba(43, 36, 26, .78); }
.sys-document .blk-date { letter-spacing: .4px; }