/* ============================================================
   THE INSIDE — six ways to present the letter itself.
   A second axis behind the Seesaw House cover. The cover never
   changes; only slide 2 does.

   Rules that hold in all six:
   - the words, nothing added
   - no line smaller than 30px on the 1080 canvas
   - it has to look like a document, not a graphic
   ============================================================ */

/* The ruled page's own furniture — rules and the rose margin — belongs to
   in-ruled alone. Every other inside starts from a blank sheet. */
.sys-house.in-book .letter-sheet .deco::before,
.sys-house.in-fold .letter-sheet .deco::before,
.sys-house.in-quiet .letter-sheet .deco::before,
.sys-house.in-airmail .letter-sheet .deco::before,
.sys-house.in-desk .letter-sheet .deco::before { display: none; }


/* ─────────────── 2. BOOK PAGE ───────────────
   A page from the printed collection the letter was published in.
   Aged stock, justified, first line of each paragraph indented,
   date and signature to the right. Dense enough that most letters
   land on a single slide. */

.sys-house.in-book.letter { background: #F1E7CB; }
.sys-house.in-book .letter-sheet {
  --sheet-bg: #F1E7CB;
  --sheet-pad-x: 100px;
  --sheet-pad-y: 92px;
}
.sys-house.in-book {
  --letter-font: 'Source Serif 4', Georgia, serif;
  --letter-size: 32px;
  --letter-lh: 42px;
  --letter-gap: 0px;
  --list-gap: 10px;
  --sig-gap: 42px;
  --ps-gap: 42px;
  --date-size: 32px;
  --letter-measure: 880px;
  --letter-justify: center;
  --letter-color: #2C2318;
  --date-color: #2C2318;
}
.sys-house.in-book .letter-body {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
/* the page is aged at the edges, the way a scanned book is */
.sys-house.in-book .letter-sheet .deco {
  left: 0; right: 0;
  background-image:
    radial-gradient(120% 85% at 50% 42%, rgba(255, 252, 238, .55) 0%, transparent 62%),
    var(--grain-url);
  background-size: cover, 220px 220px;
  background-blend-mode: normal, multiply;
  opacity: .55;
  box-shadow: inset 0 0 120px rgba(146, 118, 62, .17);
}
.sys-house.in-book .blk-date { text-align: right; hyphens: none; }
.sys-house.in-book .blk-sal  { text-align: left; hyphens: none; margin-top: 30px !important; }
.sys-house.in-book .blk-p    { text-indent: 2.4em; }
/* the first paragraph after the salutation still indents, as it does in print */
.sys-house.in-book .blk-list { margin-top: 20px !important; text-align: left; hyphens: none; }
.sys-house.in-book .blk-list + .blk-p { text-indent: 2.4em; }
.sys-house.in-book .blk-sig  { text-align: right; hyphens: none; color: #2C2318; }
.sys-house.in-book .blk-ps   { text-align: left; hyphens: none; text-indent: 0; color: #2C2318; }


/* ─────────────── 3. FOLDED SHEET ───────────────
   The letter as a thing that was folded into an envelope, carried,
   and kept. Two creases across the sheet, the panels very slightly
   different in tone. */

.sys-house.in-fold.letter { background: #FBF5EC; }
.sys-house.in-fold .letter-sheet {
  --sheet-bg: #FBF5EC;
  --sheet-pad-x: 128px;
  --sheet-pad-y: 116px;
}
.sys-house.in-fold {
  --letter-size: 34px;
  --letter-lh: 1.56;
  --letter-gap: 30px;
  --list-gap: 18px;
  --sig-gap: 44px;
  --ps-gap: 40px;
  --letter-measure: 810px;
  --letter-justify: center;
}
.sys-house.in-fold .letter-sheet .deco {
  left: 0; right: 0;
  /* each panel sits at a slightly different angle to the light */
  background-image: linear-gradient(to bottom,
    rgba(150, 118, 66, .055) 0%,
    rgba(150, 118, 66, .010) 32%,
    rgba(150, 118, 66, .075) 34%,
    rgba(150, 118, 66, .016) 65%,
    rgba(150, 118, 66, .090) 68%,
    rgba(150, 118, 66, .030) 100%);
}
/* the two creases themselves: a shadow with a lit edge above it */
.sys-house.in-fold .letter-sheet .deco::before,
.sys-house.in-fold .letter-sheet .deco::after {
  content: "";
  position: absolute;
  left: 0; right: 0; height: 12px;
  background: linear-gradient(to bottom,
    rgba(255, 253, 247, .00) 0 2px,
    rgba(255, 253, 247, .95) 2px 5px,
    rgba(122, 94, 52, .34) 5px 7px,
    rgba(122, 94, 52, .13) 7px 9px,
    rgba(122, 94, 52, .04) 9px 12px);
}
.sys-house.in-fold .letter-sheet .deco::before { top: 450px; }
.sys-house.in-fold .letter-sheet .deco::after  { top: 900px; }


/* ─────────────── 4. QUIET TRANSCRIPTION ───────────────
   The opposite bet. Large type, wide margins, nothing on the page
   but the words. Costs slides, buys legibility. */

.sys-house.in-quiet.letter { background: #FBF6EE; }
.sys-house.in-quiet .letter-sheet {
  --sheet-bg: #FBF6EE;
  --sheet-pad-x: 158px;
  --sheet-pad-y: 140px;
}
.sys-house.in-quiet {
  --letter-size: 41px;
  --letter-lh: 1.6;
  --letter-gap: 42px;
  --list-gap: 24px;
  --sig-gap: 58px;
  --ps-gap: 52px;
  --letter-measure: 764px;
  --letter-justify: center;
}
.sys-house.in-quiet .letter-sheet .deco { background: none; }


/* ─────────────── 5. AIRMAIL ───────────────
   Onionskin, the chevron border, one soft crease. Most of these
   letters crossed a distance to arrive, or never did. */

.sys-house.in-airmail.letter { background: #F7F4EA; }
.sys-house.in-airmail .letter-sheet {
  --sheet-bg: #F7F4EA;
  --sheet-pad-x: 140px;
  --sheet-pad-y: 132px;
}
.sys-house.in-airmail {
  --letter-size: 34px;
  --letter-lh: 1.58;
  --letter-gap: 30px;
  --list-gap: 18px;
  --sig-gap: 46px;
  --ps-gap: 40px;
  --letter-measure: 790px;
  --letter-justify: center;
  --letter-color: #21303F;
  --ink-soft: rgba(33, 48, 63, .62);
}
.sys-house.in-airmail .blk-sig,
.sys-house.in-airmail .blk-date,
.sys-house.in-airmail .blk-ps { color: rgba(33, 48, 63, .72); }

.sys-house.in-airmail .letter-sheet .deco {
  left: 0; right: 0;
  /* the red and blue chevrons, only on the perimeter */
  background-image: repeating-linear-gradient(
    -45deg,
    #A8382E 0 13px,
    #F7F4EA 13px 26px,
    #1F4C78 26px 39px,
    #F7F4EA 39px 52px);
  padding: 0;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: border-box, content-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-clip: border-box, content-box;
  mask-composite: exclude;
  border: 19px solid transparent;
}
.sys-house.in-airmail .letter-sheet .deco::after {
  content: "";
  position: absolute;
  left: 19px; right: 19px; top: 668px; height: 6px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, .8) 0 2px,
    rgba(40, 60, 80, .13) 2px 4px,
    rgba(40, 60, 80, .05) 4px 6px);
}


/* ─────────────── 6. SHEET ON THE DESK ───────────────
   The cover's own beige carries through, and the letter is a cream
   sheet lying on it. The outside and the inside become one place. */

.sys-house.in-desk.letter {
  background: linear-gradient(162deg, #F6EBE0 0%, #EEDCD2 46%, #E2CDC4 100%);
}
.sys-house.in-desk .letter-sheet {
  --sheet-bg: #FCF7EF;
  position: absolute;
  inset: 60px;
  width: auto; height: auto;
  --sheet-pad-x: 92px;
  --sheet-pad-y: 96px;
  transform: rotate(-.55deg);
  box-shadow:
    0 2px 5px rgba(64, 34, 50, .10),
    0 20px 46px rgba(64, 34, 50, .20),
    0 44px 90px rgba(64, 34, 50, .10);
}
.sys-house.in-desk {
  --letter-size: 34px;
  --letter-lh: 1.58;
  --letter-gap: 30px;
  --list-gap: 18px;
  --sig-gap: 46px;
  --ps-gap: 40px;
  --letter-measure: 796px;
  --letter-justify: center;
}
.sys-house.in-desk .letter-sheet .deco {
  left: 0; right: 0;
  background-image: var(--grain-url);
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: .05;
}


/* ─────────────── 2b. BOOK PAGE, LARGER ───────────────
   Every typographic decision of the book page kept, set four points
   bigger. The two longest letters run onto a second sheet, which is
   what the brief asks for: more slides rather than smaller words. */

.sys-house.in-booklg.letter { background: #EEE3C5; }
.sys-house.in-booklg .letter-sheet {
  --sheet-bg: #EEE3C5;
  --sheet-pad-x: 100px;
  --sheet-pad-y: 140px;   /* clears Instagram's slide counter, top right */
  --sheet-pad-b: 72px;
}
.sys-house.in-booklg {
  --letter-font: 'EB Garamond', 'Source Serif 4', Georgia, serif;
  --letter-size: 36px;
  --letter-lh: 48px;
  --letter-gap: 22px;   /* half a line: each paragraph reads as its own thought */
  --list-gap: 4px;
  --sig-gap: 36px;
  --ps-gap: 36px;
  --date-size: 36px;
  --letter-measure: 888px;
  --letter-justify: flex-start;   /* every page opens on the same line, like a book */
  --letter-color: #2A2117;
  --date-color: #2A2117;
}
/* Left aligned, not justified. At phone size justification opens uneven
   gaps between words that the eye trips over. Ragged right reads faster. */
.sys-house.in-booklg .letter-body {
  text-align: left;
  hyphens: none;
}
/* A page in an open book: the sheet lifts toward the light in the middle,
   falls into the gutter along the right edge, and the paper grain sits
   on top of both. One cue, not a costume. */
.sys-house.in-booklg .letter-sheet .deco {
  left: 0; right: 0;
  background-image:
    linear-gradient(to right, transparent 0 84%, rgba(110, 84, 40, .12) 94%, rgba(110, 84, 40, .42) 100%),
    radial-gradient(110% 80% at 46% 44%, rgba(255, 251, 236, .60) 0%, transparent 64%),
    var(--grain-url);
  background-size: cover, cover, 220px 220px;
  background-blend-mode: normal, normal, multiply;
  opacity: .9;
}
.sys-house.in-booklg .letter-sheet .deco::before { display: none; }
/* the opening line sits where reading starts, on the left */
.sys-house.in-booklg .blk-date { text-align: left; hyphens: none; }
.sys-house.in-booklg .blk-sal  { text-align: left; hyphens: none; margin-top: 22px !important; font-weight: 400; }
/* space between paragraphs already marks them; an indent too is noise */
.sys-house.in-booklg .blk-p    { text-indent: 0; }
.sys-house.in-booklg .blk-list { margin-top: 22px !important; text-align: left; hyphens: none; }
.sys-house.in-booklg .blk-sig  { text-align: right; hyphens: none; color: #2A2117; }
.sys-house.in-booklg .blk-ps   { text-align: left; hyphens: none; text-indent: 0; color: #2A2117; }

/* On the book page the cue speaks in the book's own voice: a small italic
   foot line in faded ink, no card, no tilt. It nudges without competing
   with the signature above it. */
.sys-house.in-booklg .letter-cue {
  font-family: 'EB Garamond', 'Source Serif 4', Georgia, serif;
  font-size: 36px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  color: #2A2117;
  background: none;
  padding: 0;
  border-radius: 0;
  transform: none;
  box-shadow: none;
  margin-top: 20px;
}

/* The two shortest letters, Mandela and Cohen, sit in a third of the page at
   the standard size. A few points larger reads more comfortably on a phone.
   Still a letter on a page, not a quote filling the slide. */
.sys-house.in-booklg.post-mandela,
.sys-house.in-booklg.post-cohen {
  --letter-size: 42px;
  --letter-lh: 57px;
  --letter-gap: 28px;
  --sig-gap: 44px;
  --date-size: 42px;
}
.sys-house.in-booklg.post-mandela .blk-sal,
.sys-house.in-booklg.post-cohen .blk-sal { margin-top: 28px !important; }

/* the translation note: the cue's faded italic, a size smaller, so it reads
   as a quiet heading note and never as the letter's first line */
.sys-house.in-booklg .letter-note {
  font-family: 'EB Garamond', 'Source Serif 4', Georgia, serif;
  font-size: 31px;
  font-style: italic;
  font-weight: 500;
  line-height: 40px;
  color: #2A2117;
}