/* 01 — SEESAW HOUSE
   The brand baseline. Beige paper gradient, Lexend for our voice,
   Source Serif for theirs. The photo is a warm duotone band the
   setup sits above. */

.sys-house {
  --ground: #F3E6DA;
  --ink: #2A122A;
  --ink-soft: rgba(42, 18, 42, .62);

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

  --setup-font: 'Lexend', sans-serif;
  --setup-size: 46px;
  --setup-lh: 1.38;
  --setup-weight: 500;
  --setup-track: -.5px;
  --setup-measure: 740px;

  --cue-font: 'Lexend', sans-serif;
  --cue-size: 38px;
  --cue-weight: 300;
  --cue-track: -.2px;

  /* The inside is a ruled page. Everything vertical is a multiple of the
     56px rule pitch, so every line of the letter sits on a rule. */
  --rule-pitch: 56px;
  --letter-font: 'Source Serif 4', Georgia, serif;
  --letter-size: 38px;
  --letter-lh: var(--rule-pitch);
  --letter-gap: var(--rule-pitch);
  --list-gap: 0px;
  --sig-gap: var(--rule-pitch);
  --ps-gap: var(--rule-pitch);
  --date-size: 38px;
  --letter-measure: 830px;
  --sheet-pad-x: 118px;
  --sheet-pad-y: 116px;
  --letter-justify: flex-start;

  --after-font: 'Lexend', sans-serif;
  --after-size: 45px;
  --after-lh: 1.44;
  --after-weight: 300;
  --after-gap: 46px;
  --after-track: -.3px;

  --blank-hi: #E0C9BC; --blank-mid: #8D6B72; --blank-lo: #2A122A;
}

.sys-house.cover {
  background: linear-gradient(162deg, #F6EBE0 0%, #EEDCD2 46%, #E2CDC4 100%);
}

/* The photograph dissolves into the paper.

   Why the old fade failed: Toshio's picture is bright sky where it meets
   the paper, so fading it in is light into light and the seam vanishes.
   Most portraits are near-black at that edge, and fading dark over pale
   paper leaves a grey smudge band however long the fade runs. Length was
   never the problem; brightness was.

   So every photograph now does what Toshio's sky does. The top of the
   picture is first lifted toward the paper colour (the .tex layer below),
   and then faded in on an eased curve rather than a straight ramp. The
   picture arrives as mist and resolves into a face. Both distances are set
   per post from the height of the band, in render.js. */
.sys-house .photo {
  left: 0; right: 0; bottom: 0;
  top: var(--photo-top, 567px);
  height: auto;
  --f: var(--photo-fade, 300px);
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0)   0,
    rgba(0, 0, 0, .03) calc(var(--f) * .12),
    rgba(0, 0, 0, .10) calc(var(--f) * .24),
    rgba(0, 0, 0, .23) calc(var(--f) * .36),
    rgba(0, 0, 0, .41) calc(var(--f) * .48),
    rgba(0, 0, 0, .60) calc(var(--f) * .60),
    rgba(0, 0, 0, .77) calc(var(--f) * .72),
    rgba(0, 0, 0, .90) calc(var(--f) * .84),
    rgba(0, 0, 0, .97) calc(var(--f) * .94),
    #000               var(--f));
  mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0)   0,
    rgba(0, 0, 0, .03) calc(var(--f) * .12),
    rgba(0, 0, 0, .10) calc(var(--f) * .24),
    rgba(0, 0, 0, .23) calc(var(--f) * .36),
    rgba(0, 0, 0, .41) calc(var(--f) * .48),
    rgba(0, 0, 0, .60) calc(var(--f) * .60),
    rgba(0, 0, 0, .77) calc(var(--f) * .72),
    rgba(0, 0, 0, .90) calc(var(--f) * .84),
    rgba(0, 0, 0, .97) calc(var(--f) * .94),
    #000               var(--f));
}

/* The lift. Paper colour blended with lighten, at an alpha that eases out
   over the top half of the band.

   With lighten and partial alpha, a pixel darker than the paper is mixed
   toward it and a pixel lighter than the paper is left alone. A soft mix,
   never a clip, so shapes survive. (Opaque mid-tones clipped every shadow
   flat and erased faces.)

   It is gone by half-way. A tail that ran the full height removed the
   seam but reached the faces and turned them milky. The seam has to
   dissolve in the top third; the subject has to arrive at full contrast.
   The eased S-curve plus the shared grain is what keeps the end of the
   lift from reading as a line. */
.sys-house .photo .tex {
  display: block;
  background: linear-gradient(to bottom,
    rgba(238, 221, 211, 1.000) 0%,
    rgba(238, 221, 211, 0.930) 6%,
    rgba(238, 221, 211, 0.780) 12%,
    rgba(238, 221, 211, 0.580) 18%,
    rgba(238, 221, 211, 0.380) 24%,
    rgba(238, 221, 211, 0.210) 30%,
    rgba(238, 221, 211, 0.090) 36%,
    rgba(238, 221, 211, 0.025) 44%,
    rgba(238, 221, 211, 0.000) 52%);
  mix-blend-mode: lighten;
}
/* a short band crops to the middle of a portrait, which is the neck.
   Favour the upper third, where faces are. */
.sys-house .photo img { object-position: 50% 30%; }
.sys-house .photo img.p-a { filter: grayscale(1) contrast(1.10) brightness(1.03); }
.sys-house .photo .tone-lo { display: block; background: #37193A; mix-blend-mode: lighten; }
.sys-house .photo .tone-hi { display: block; background: #EFDAC9; mix-blend-mode: multiply; }

.sys-house .cover-media .deco {
  background: linear-gradient(to top, rgba(42, 18, 42, .46) 0%, rgba(42, 18, 42, 0) 22%);
}

/* One grain over the whole cover, paper and photograph alike. A clean
   tonal ramp reads as a digital gradient; the same ramp under a shared
   print texture reads as ink on one sheet, and the seam stops being a
   place where two materials meet. Kept below the type. */
.sys-house.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grain-url);
  background-size: 240px 240px;
  mix-blend-mode: multiply;
  opacity: .085;
}
/* The cue sits over whatever the photograph happens to be doing down
   there, so it carries its own cream plate. Rotated a little and hugging
   the words, the way the brand's highlight already works, so it reads as
   a marked phrase and not as a button. */
.sys-house .cover-cue {
  --cue-color: #2A122A;
  --cue-weight: 400;
  background: #F8EFE6;
  padding: 13px 26px 17px;
  border-radius: 7px;
  transform: rotate(-1.15deg);
  box-shadow: 0 4px 14px rgba(30, 10, 28, .17);
}

/* ── Per-photograph crop ──
   The seam dissolves cleanly only when something light or detailed meets
   the paper: Toshio's sky does it naturally. These three placeholders are
   near-black at the top of the default crop, and no curve or grain can
   make a big black field dissolve into pale paper without reading as a
   gradient. So each is cropped to put hair, sky or face at the seam.
   Placeholder-specific: re-set these when final art arrives. */
.sys-house.post-mandela .photo img { object-position: 50% 10%; }
.sys-house.post-cohen   .photo img { object-position: 70% 12%; }
/* Keats: the painting is near-black everywhere but the face, so crop alone
   leaves a dark block. Zoomed until the face is the band and his hair meets
   the paper. */
.sys-house.post-keats   .photo img {
  object-position: 50% 34%;
  transform: scale(1.32);
  transform-origin: 50% 30%;
}

/* ── Post 9, Emilie to Rémi, France 2012 ──
   The only story in the series from living memory, and the only
   photograph taken in colour. The duotone flattened it into the same
   century as the other eight, so this one keeps its own colour and a
   plain modern grade. In the grid it reads as the recent one, which is
   what it is. */
.sys-house.post-emilie .photo img.p-a {
  filter: saturate(.90) contrast(1.09) brightness(1.05);
}
.sys-house.post-emilie .photo .tone-lo,
.sys-house.post-emilie .photo .tone-hi { display: none; }
/* the plum veil that grounds the other covers would tint this one, so
   it grounds in neutral instead */
.sys-house.post-emilie .cover-media .deco {
  background: linear-gradient(to top, rgba(22, 17, 20, .34) 0%, rgba(22, 17, 20, 0) 20%);
}

/* The closing cue on the last letter slide, mirroring the cover's, so the
   reader knows the ending is one swipe away. Same cream plate, same tilt. */
.sys-house .letter-cue {
  --cue-color: #2A122A;
  --cue-weight: 400;
  --cue-size: 36px;
  background: #F1E4D5;
  padding: 13px 26px 17px;
  border-radius: 7px;
  transform: rotate(-1.15deg);
  box-shadow: 0 3px 12px rgba(30, 10, 28, .10);
}
/* the cue needs room, and the ruled page counts in whole lines */
.sys-house .letter-sheet { --sheet-pad-b: 116px; }

/* the inside: a ruled page in the house cream */
.sys-house.letter { background: #FBF5EC; }
.sys-house .letter-sheet { --sheet-bg: #FBF5EC; }
.sys-house .letter-body { --letter-color: #2A122A; }
.sys-house { --sal-weight: 600; --sig-style: normal; }
.sys-house .blk-sig { color: rgba(42, 18, 42, .74); }

/* Rules run wider than the text column, the way they do on real paper.
   The offset equals the sheet's top padding, so the first rule lands
   under the first line rather than through it. */
.sys-house .letter-sheet .deco {
  left: 62px; right: 62px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--rule-pitch) - 2px),
    rgba(42, 18, 42, .20) calc(var(--rule-pitch) - 2px) calc(var(--rule-pitch) - 1px),
    transparent calc(var(--rule-pitch) - 1px) var(--rule-pitch)
  );
  background-position: 0 var(--sheet-pad-y);
}

/* the margin, in the warm rose the brand already uses */
.sys-house .letter-sheet .deco::before {
  content: "";
  position: absolute;
  left: 28px; top: 0; bottom: 0;
  width: 2px;
  background: rgba(155, 91, 106, .34);
}

.sys-house .after-body > p:last-child { color: #fff; }

/* The series name. Small, tracked capitals in a muted plum, sitting above
   the opening sentence so it frames the story without competing with it.
   Read first, but quietly: the setup is still the loudest thing here. */
.sys-house .cover-series {
  display: block;
  font-family: 'Lexend', sans-serif;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(42, 18, 42, .58);
  margin-bottom: 40px;
}