/* ============================================================
   Letters series — base.
   Fixes the artboard and the brief's structure. Systems change
   only the look: type, colour, paper, texture, photo treatment.

   STRUCTURE THAT NEVER MOVES
   - Cover : setup top-left, cue bottom-right, nothing else.
   - Letter: the words, nothing added.
   - After : pure black, white text.
   ============================================================ */

:root {
  --slide-w: 1080px;
  --slide-h: 1350px;

  /* defaults a system may override */
  --pad-x: 88px;
  --pad-y: 84px;

  --ground: #F4EFE7;
  --ink: #241F1B;
  --ink-soft: rgba(36, 31, 27, .68);
  --rule: rgba(36, 31, 27, .18);

  --setup-font: Georgia, serif;
  --setup-size: 44px;
  --setup-lh: 1.44;
  --setup-weight: 400;
  --setup-track: 0;
  --setup-measure: 700px;

  --cue-font: var(--setup-font);
  --cue-size: 38px;
  --cue-weight: 400;
  --cue-style: normal;
  --cue-track: 0;

  --letter-font: Georgia, serif;
  --letter-size: 38px;
  --letter-lh: 1.5;
  --letter-gap: 30px;          /* space between paragraphs */
  --letter-measure: 840px;
  --sheet-pad-x: 120px;
  --sheet-pad-y: 110px;
  --list-gap: calc(var(--letter-gap) * .62);
  --sig-gap:  calc(var(--letter-gap) * 1.45);
  --ps-gap:   calc(var(--letter-gap) * 1.3);

  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");

  --after-font: Georgia, serif;
  --after-size: 46px;
  --after-lh: 1.42;
  --after-gap: 44px;
  --after-weight: 400;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ──────────────────────────── artboard ──────────────────────────── */

.slide {
  position: relative;
  width: var(--slide-w);
  height: var(--slide-h);
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

/* ──────────────────────────── cover ──────────────────────────── */

.cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--pad-y) var(--pad-x);
}

.cover-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* the photo element itself; systems position + treat it */
.photo {
  position: absolute;
  overflow: hidden;
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* fallback when a photograph is missing: an archival, over-exposed
   print. Designed, not a grey box. */
.photo.is-blank img { display: none; }
.photo.is-blank {
  background-color: var(--blank-mid, #8B7466);
  background-image:
    var(--grain-url),
    repeating-linear-gradient(94deg,
      rgba(255, 255, 255, .045) 0 2px, transparent 2px 9px);
  background-size: 220px 220px, auto;
  background-blend-mode: overlay, normal;
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, .34),
    inset 0 0 0 1px rgba(0, 0, 0, .10);
}
.photo.is-blank .p-b, .photo.is-blank i { display: none !important; }

.cover-setup {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  max-width: var(--setup-measure);
  font-family: var(--setup-font);
  font-size: var(--setup-size);
  line-height: var(--setup-lh);
  font-weight: var(--setup-weight);
  letter-spacing: var(--setup-track);
  color: var(--setup-color, var(--ink));
  text-wrap: pretty;
}
.cover-setup p { margin: 0; }
.cover-setup p + p { margin-top: 0.6em; }

.cover-cue {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  align-self: flex-end;
  text-align: right;
  font-family: var(--cue-font);
  font-size: var(--cue-size);
  font-weight: var(--cue-weight);
  font-style: var(--cue-style);
  letter-spacing: var(--cue-track);
  color: var(--cue-color, var(--ink-soft));
}

/* ──────────────────────────── letter ──────────────────────────── */

.letter {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.letter-sheet {
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--sheet-pad-y) var(--sheet-pad-x) var(--sheet-pad-b, var(--sheet-pad-y));
  display: flex;
  flex-direction: column;
  background: var(--sheet-bg, transparent);
}

.letter-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: var(--letter-justify, center);
  width: 100%;
  max-width: var(--letter-measure);
  font-family: var(--letter-font);
  font-size: var(--letter-size);
  line-height: var(--letter-lh);
  color: var(--letter-color, var(--ink));
  text-wrap: pretty;
  hyphens: none;
}

.letter-body > * + * { margin-top: var(--letter-gap); }

.blk-date {
  font-size: var(--date-size, calc(var(--letter-size) * .82));
  color: var(--date-color, var(--ink-soft));
  font-style: var(--date-style, normal);
  letter-spacing: var(--date-track, 0);
}

.blk-sal {
  font-style: var(--sal-style, normal);
  font-weight: var(--sal-weight, inherit);
}

.blk-list { list-style: none; }
.blk-list li {
  display: flex;
  gap: .6em;
}
.blk-list li + li { margin-top: var(--list-gap); }
.blk-list .num {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--date-color, var(--ink-soft));
}

.blk-sig {
  font-style: var(--sig-style, normal);
  margin-top: var(--sig-gap) !important;
}
.blk-sig span { display: block; }

.blk-ps {
  font-size: calc(var(--letter-size) * .9);
  color: var(--ps-color, var(--ink-soft));
  margin-top: var(--ps-gap) !important;
}

.letter-body > :first-child { margin-top: 0 !important; }

/* photo layers — systems opt in; inert by default */
.photo { isolation: isolate; }
.photo img.p-b { position: absolute; inset: 0; display: none; }
.photo i { position: absolute; inset: 0; display: none; pointer-events: none; }

/* cover deco layer (tape, frame, scrim) — systems opt in */
.cover-media .deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.letter-sheet .deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* the pale letter behind the cover — System 10 only */
.cover-ghost { display: none; }

/* The closing cue on the last letter slide. It is always in the flow, on
   every page, so every page loses the same height to it and the words can
   never run underneath. Only the last page makes it visible. */
.letter-cue {
  flex: 0 0 auto;
  align-self: flex-end;
  text-align: right;
  margin-top: 34px;
  visibility: hidden;
  font-family: var(--cue-font);
  font-size: var(--cue-size);
  font-weight: var(--cue-weight);
  font-style: var(--cue-style);
  letter-spacing: var(--cue-track);
  color: var(--cue-color, var(--ink-soft));
}
.letter-cue.on { visibility: visible; }
.letter-sheet.no-cue .letter-cue { display: none; }

/* continuation pages get no marker — the brief allows nothing added */

/* ──────────────────────────── after ──────────────────────────── */

.after-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; display: none; }
.after-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.after-media .veil { position: absolute; inset: 0; }
.after .after-body { position: relative; z-index: 1; }


/* The after slide is pure black in every system, always. A system that
   paints paper on .slide must never reach this one. */
.slide.after {
  background: #000 !important;
  background-image: none !important;
  box-shadow: none !important;
}

.after {
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--after-pad-y, 140px) var(--after-pad-x, 104px);
}

.after-body {
  max-width: var(--after-measure, 830px);
  font-family: var(--after-font);
  font-size: var(--after-size);
  line-height: var(--after-lh);
  font-weight: var(--after-weight);
  letter-spacing: var(--after-track, 0);
  color: #fff;
  text-wrap: pretty;
}
.after-body > p + p { margin-top: var(--after-gap); }

/* series label: hidden unless a system styles it */
.cover-series { display: none; }

/* A passage from a separate letter gets a full blank line above it, so two
   letters are never presented as one continuous text. */
.letter-body > .blk-new-letter { margin-top: calc(var(--letter-lh) * 1.5) !important; }

/* "Translated from …" sits in the empty top margin, left, above where the
   letter begins. Absolutely placed, so the letter's first line does not move. */
.letter-note {
  position: absolute;
  left: var(--sheet-pad-x);
  top: 62px;
  white-space: nowrap;
}