/* 09 — EDITORIAL
   Text led. The setup is the largest thing on the page and the
   photograph is reduced to a stamp, hard black and white. */

.sys-editorial {
  --ground: #FAF7F2;
  --ink: #16130F;
  --ink-soft: rgba(22, 19, 15, .58);

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

  --setup-font: 'Instrument Serif', Georgia, serif;
  --setup-size: 68px;
  --setup-lh: 1.14;
  --setup-weight: 400;
  --setup-track: -1.2px;
  --setup-measure: 830px;

  --cue-font: 'Newsreader', Georgia, serif;
  --cue-size: 36px;
  --cue-style: italic;

  --letter-font: 'Newsreader', Georgia, serif;
  --letter-size: 38px;
  --letter-lh: 1.58;
  --letter-gap: 30px;
  --letter-measure: 800px;
  --sheet-pad-x: 130px;
  --sheet-pad-y: 120px;

  --after-font: 'Instrument Serif', Georgia, serif;
  --after-size: 52px;
  --after-lh: 1.3;
  --after-gap: 42px;
  --after-track: -.6px;

  --blank-hi: #D8D2C8; --blank-mid: #8A8378; --blank-lo: #1A1713;
}

.sys-editorial.cover { background: #FAF7F2; }

/* the stamp: hard threshold, small, low left */
.sys-editorial .photo {
  left: 88px; bottom: 92px;
  width: 312px; height: 382px;
}
.sys-editorial .photo img.p-a {
  filter: grayscale(1) contrast(2.35) brightness(1.06);
}
.sys-editorial .photo .tex {
  display: block;
  background-image: var(--grain-url);
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: .12;
}

.sys-editorial .cover-cue { padding-bottom: 12px; }

.sys-editorial.letter { background: #FAF7F2; }
.sys-editorial .blk-sig { color: rgba(22, 19, 15, .72); }
.sys-editorial .blk-sal { font-style: italic; }