/* 05 — DIARY
   The cover is the outside of the book: leather, a pasted label, a
   pasted print held by photo corners. The letter is the inside:
   ruled cream pages, the text sitting exactly on the rules. */

.sys-diary {
  --leather: #3B2A22;
  --page: #F7F1E4;
  --ground: var(--leather);
  --ink: #2C231C;
  --ink-soft: rgba(44, 35, 28, .66);

  --pad-x: 78px;
  --pad-y: 80px;

  --setup-font: 'Libre Baskerville', Georgia, serif;
  --setup-size: 40px;
  --setup-lh: 1.46;
  --setup-measure: 640px;

  --cue-font: 'Libre Baskerville', Georgia, serif;
  --cue-size: 34px;
  --cue-style: italic;

  /* rhythm: everything is a multiple of the 54px rule pitch */
  --letter-font: 'Libre Baskerville', Georgia, serif;
  --letter-size: 36px;
  --letter-lh: 54px;
  --letter-gap: 54px;
  --list-gap: 0px;
  --sig-gap: 54px;
  --ps-gap: 54px;
  --date-size: 36px;
  --letter-measure: 820px;
  --letter-justify: flex-start;
  --sheet-pad-x: 120px;
  --sheet-pad-y: 108px;

  --after-font: 'Libre Baskerville', Georgia, serif;
  --after-size: 44px;
  --after-lh: 1.46;
  --after-gap: 42px;

  --blank-hi: #C4AE95; --blank-mid: #7A5E4B; --blank-lo: #241811;
}

.sys-diary.cover {
  background-color: #3B2A22;
  background-image:
    var(--grain-url),
    repeating-linear-gradient(112deg, rgba(0,0,0,.10) 0 2px, transparent 2px 7px),
    radial-gradient(135% 95% at 22% 10%, rgba(255, 228, 196, .16) 0%, transparent 58%),
    radial-gradient(120% 90% at 82% 96%, rgba(0, 0, 0, .40) 0%, transparent 62%);
  background-size: 220px 220px, auto, cover, cover;
  background-blend-mode: overlay, normal, normal, normal;
}

/* the pasted print, with corners */
.sys-diary .photo {
  left: 236px; right: 128px; top: 622px; height: 516px;
  background: #FCF8F0;
  padding: 26px 26px 78px;
  transform: rotate(-1.6deg);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}
.sys-diary .photo img.p-a { filter: sepia(.18) contrast(1.04) saturate(.94); }

.sys-diary .cover-media .deco::before,
.sys-diary .cover-media .deco::after {
  content: "";
  position: absolute;
  width: 62px; height: 62px;
  background: linear-gradient(135deg, rgba(28, 20, 15, .88) 50%, transparent 50%);
  z-index: 2;
}
.sys-diary .cover-media .deco::before { left: 222px; top: 610px; transform: rotate(-1.6deg); }
.sys-diary .cover-media .deco::after  {
  right: 116px; top: 1076px;
  background: linear-gradient(-45deg, rgba(28, 20, 15, .88) 50%, transparent 50%);
  transform: rotate(-1.6deg);
}

/* the setup, written on a pasted label */
.sys-diary .cover-setup {
  padding: 48px 54px 52px;
  background: #EFE6D3;
  color: #2C231C;
  transform: rotate(.5deg);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .4);
  z-index: 3;
}
.sys-diary .cover-cue {
  color: #E8D6BC;
  z-index: 3;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

/* the inside: ruled pages */
.sys-diary.letter { background: var(--page); }
.sys-diary .letter-sheet { --sheet-bg: var(--page); }
.sys-diary .letter-body {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 52px,
    rgba(44, 35, 28, .16) 52px 53px,
    transparent 53px 54px
  );
}
.sys-diary .letter-sheet .deco::before {
  content: "";
  position: absolute;
  left: 92px; top: 0; bottom: 0; width: 1px;
  background: rgba(160, 70, 60, .26);
}
.sys-diary .blk-sig { color: rgba(44, 35, 28, .78); }