/* 02 — INK & PEN
   Laid writing paper. One face, EB Garamond, throughout.
   The photograph is redrawn as a pen tracing in the same ink
   the letter is written in. */

.sys-ink {
  --paper: #F4EFE4;
  --ground: var(--paper);
  --ink: #1C2440;
  --ink-soft: rgba(28, 36, 64, .62);

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

  --setup-font: 'EB Garamond', Georgia, serif;
  --setup-size: 46px;
  --setup-lh: 1.42;
  --setup-weight: 400;
  --setup-measure: 740px;

  --cue-font: 'EB Garamond', Georgia, serif;
  --cue-size: 40px;
  --cue-style: italic;

  --letter-font: 'EB Garamond', Georgia, serif;
  --letter-size: 41px;
  --letter-lh: 1.5;
  --letter-gap: 30px;
  --letter-measure: 800px;
  --sheet-pad-x: 150px;
  --sheet-pad-y: 112px;
  --sal-style: italic;
  --date-style: italic;
  --sig-style: italic;

  --after-font: 'EB Garamond', Georgia, serif;
  --after-size: 47px;
  --after-lh: 1.44;
  --after-gap: 44px;

  --blank-hi: #CFC6B4; --blank-mid: #7C7E8C; --blank-lo: #1C2440;
}

/* laid paper: fine vertical laid lines, wider horizontal chain lines */
.sys-ink {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(90deg, rgba(28, 36, 64, .030) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgba(28, 36, 64, .026) 0 1px, transparent 1px 62px);
}

/* photo → pen tracing: an offset copy differenced against the original
   gives the edges; the filter chain inverts them into ink on paper. */
/* no stacking context here, so the photo's multiply blends with the
   paper itself and the tracing's white ground drops away */
.sys-ink .cover-media { z-index: auto; }

.sys-ink .photo {
  left: 104px; right: 104px; bottom: 150px; height: 558px;
  isolation: auto;
  mix-blend-mode: multiply;
  opacity: .96;
}
.sys-ink .photo img.p-a { filter: url(#trace); }
.sys-ink .photo.is-blank { mix-blend-mode: normal; opacity: .68; }

.sys-ink .cover-setup { padding-bottom: 0; }

.sys-ink.letter {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(90deg, rgba(28, 36, 64, .030) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgba(28, 36, 64, .026) 0 1px, transparent 1px 62px);
}
/* the margin rule every sheet of writing paper has */
.sys-ink .letter-sheet .deco::before {
  content: "";
  position: absolute;
  left: 112px; top: 0; bottom: 0; width: 1px;
  width: 2px;
  background: rgba(150, 62, 62, .34);
}

.sys-ink .blk-sig { color: rgba(28, 36, 64, .78); }