/* 03 — BROADSHEET
   Newsprint. The setup is a front-page deck, the photograph is the
   page's one picture, ruled top and bottom. The letter is set as
   body copy: justified, drop cap, hairline rule above. */

.sys-broadsheet {
  --ground: #EDE6D6;
  --ink: #17140F;
  --ink-soft: rgba(23, 20, 15, .66);
  --rule: rgba(23, 20, 15, .42);

  --pad-x: 76px;
  --pad-y: 76px;

  --setup-font: 'Playfair Display', Georgia, serif;
  --setup-size: 47px;
  --setup-lh: 1.22;
  --setup-weight: 500;
  --setup-track: -.6px;
  --setup-measure: 900px;

  --cue-font: 'Old Standard TT', Georgia, serif;
  --cue-size: 38px;
  --cue-style: italic;

  --letter-font: 'Old Standard TT', Georgia, serif;
  --letter-size: 37px;
  --letter-lh: 1.56;
  --letter-gap: 26px;
  --letter-measure: 868px;
  --sheet-pad-x: 88px;
  --sheet-pad-y: 104px;

  --after-font: 'Old Standard TT', Georgia, serif;
  --after-size: 47px;
  --after-lh: 1.42;

  --blank-hi: #CFC6B1; --blank-mid: #7E7668; --blank-lo: #17140F;
}

.sys-broadsheet {
  background-color: #EDE6D6;
  background-image: var(--grain-url);
  background-blend-mode: multiply;
}
.sys-broadsheet.cover, .sys-broadsheet.letter { background-size: 220px 220px; }

/* halftone: hard grayscale, then a dot screen multiplied over it */
.sys-broadsheet .photo {
  left: 76px; right: 76px; bottom: 168px; height: 572px;
}
.sys-broadsheet .photo img.p-a { filter: grayscale(1) contrast(1.42) brightness(1.06); }
.sys-broadsheet .photo .tex {
  display: block;
  background-image: radial-gradient(circle at 50% 50%, rgba(23, 20, 15, .55) 1.3px, transparent 1.6px);
  background-size: 6px 6px;
  mix-blend-mode: multiply;
  opacity: .85;
}
.sys-broadsheet .cover-media .deco::before,
.sys-broadsheet .cover-media .deco::after {
  content: "";
  position: absolute;
  left: 76px; right: 76px;
  height: 2px;
  background: var(--rule);
}
.sys-broadsheet .cover-media .deco::before { bottom: 762px; }
.sys-broadsheet .cover-media .deco::after  { bottom: 146px; }

.sys-broadsheet .letter-body {
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}
.sys-broadsheet .letter-body .blk-sig,
.sys-broadsheet .letter-body .blk-date,
.sys-broadsheet .letter-body .blk-sal { text-align: left; hyphens: none; }

.sys-broadsheet .letter-sheet .deco::before {
  content: "";
  position: absolute;
  left: 88px; right: 88px; top: 72px;
  height: 3px;
  background: var(--ink);
}

/* drop cap on the opening paragraph of the first page only */
.sys-broadsheet .letter-body > .blk-p:first-child::first-letter {
  float: left;
  font-size: 118px;
  line-height: .82;
  padding: 8px 14px 0 0;
  font-weight: 700;
}