/* 08 — CINEMA
   The photograph fills the frame, graded warm and grained. Type in
   white over the dark. The letter is a lit page in a dark room. */

.sys-cinema {
  --ground: #0D0C0B;
  --ink: #FFFFFF;
  --ink-soft: rgba(255, 255, 255, .78);

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

  --setup-font: 'Newsreader', Georgia, serif;
  --setup-size: 47px;
  --setup-lh: 1.36;
  --setup-weight: 400;
  --setup-measure: 780px;
  --setup-color: #FFFFFF;

  --cue-font: 'Newsreader', Georgia, serif;
  --cue-size: 38px;
  --cue-style: italic;
  --cue-color: rgba(255, 255, 255, .92);

  --letter-font: 'Newsreader', Georgia, serif;
  --letter-size: 38px;
  --letter-lh: 1.56;
  --letter-gap: 30px;
  --letter-measure: 790px;
  --sheet-pad-x: 120px;
  --sheet-pad-y: 116px;
  --letter-color: #14120F;

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

  --blank-hi: #A8967F; --blank-mid: #5B4C3E; --blank-lo: #100D0A;
}

.sys-cinema.cover { background: #0D0C0B; }

.sys-cinema .photo { inset: 0; }
.sys-cinema .photo img.p-a {
  filter: sepia(.22) saturate(1.06) contrast(1.08) brightness(.98);
}
.sys-cinema .photo .tex {
  display: block;
  background-image: var(--grain-url);
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  opacity: .28;
}

/* the grade: dark at both ends so type reads at either pole */
.sys-cinema .cover-media .deco {
  background:
    linear-gradient(to bottom,
      rgba(8, 7, 6, .93) 0%,
      rgba(8, 7, 6, .86) 30%,
      rgba(8, 7, 6, .66) 46%,
      rgba(8, 7, 6, .22) 60%,
      rgba(8, 7, 6, .72) 84%,
      rgba(8, 7, 6, .92) 100%),
    radial-gradient(118% 78% at 50% 44%, transparent 44%, rgba(8, 7, 6, .5) 100%);
}
.sys-cinema .cover-setup { text-shadow: 0 2px 20px rgba(0, 0, 0, .58); }
.sys-cinema .cover-cue   { text-shadow: 0 2px 18px rgba(0, 0, 0, .62); }

/* the letter: a lit page */
.sys-cinema.letter { background: #100E0C; }
.sys-cinema .letter-sheet {
  --sheet-bg: #F8F5EE;
  position: absolute;
  inset: 64px 76px;
  width: auto; height: auto;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .7);
}
.sys-cinema .blk-sig { color: rgba(20, 18, 15, .8); }
.sys-cinema .blk-date, .sys-cinema .blk-ps { color: rgba(20, 18, 15, .62); }
.sys-cinema .blk-list .num { color: rgba(20, 18, 15, .62); }