/* ---------- the letter ---------- */

/* one isolated sheet of paper. With JavaScript the letter is set in inverse ink and blended by difference, so it
   reads as ink on white and, wherever the black floods in beneath it, as white on black, pixel for pixel. */
.letter {
  --l-ink: var(--ink);
  --l-trace: var(--t-trace);
  --l-sig: var(--sig-trace);
  --l-low: var(--t-low);
  position: relative;
  isolation: isolate;
  background: var(--paper);
}

.letter__inner {
  position: relative;
  z-index: 1;
  box-sizing: content-box;
  max-width: 21.5em;
  margin: 0 auto 0 max(0px, calc((100% - var(--measure)) / 2 - var(--gutter)));
  padding: clamp(96px, 20vh, 220px) var(--gutter) clamp(88px, 16vh, 180px);
  font-size: clamp(27px, 3.35vw, 48px);
}

.letter__body {
  position: relative;
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: -0.03em;
  color: var(--l-ink);
}
.letter__body p { text-wrap: pretty; }
.letter__body p + p { margin-top: 0.62em; }
.letter__body [data-turn] { margin-top: 1.1em; }
.letter__body .w { display: inline-block; }

/* the grey start exists only where the fill to ink is guaranteed; anywhere else every word is plain ink */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .letter__body .w { color: color-mix(in srgb, var(--l-ink) calc(var(--f, 1) * 100%), var(--l-trace)); }
}

/* ---------- signatures ---------- */

.letter__signs {
  display: flex;
  flex-wrap: wrap;
  gap: 40px clamp(48px, 8vw, 120px);
  margin-top: clamp(44px, 7vh, 72px);
  font-size: 15px;
}
.letter__pen { display: block; width: auto; height: clamp(66px, 6vw, 88px); overflow: visible; }
/* stroke in the drawing's own units (no non-scaling-stroke: with it Chrome measures pathLength dashes on screen
   and the ink stops short of the end); it renders about 1.3 to 1.7px as the signatures scale */
.letter__pen path {
  fill: none;
  stroke: var(--l-ink);
  stroke-width: 1.28;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.letter__pen .draw path { stroke-dasharray: 1 1.5; }
.letter__pen .trace path { stroke: var(--l-sig); }
.letter__sign figcaption { margin-top: 14px; line-height: 1.4; }
.letter__name { display: block; font-weight: 500; color: var(--l-ink); }
.letter__role { display: block; color: var(--l-low); }

/* ---------- the stage: black floods in under the paragraph about what we do, then white paper returns ---------- */

.letter__stage { display: none; position: absolute; inset: 0; pointer-events: none; }
.letter__view { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.letter__sheet { position: absolute; inset: 0; transform: translateY(calc(100% + 120px)); }
/* the letter's own ink, as it renders on paper (#0b0b0b), so the inverse greys stay neutral on it */
.letter__sheet--ink { background: #0b0b0b; color: #0b0b0b; }
.letter__sheet--paper { background: var(--paper); color: var(--paper); }
.letter__crest {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: clamp(40px, 7vw, 110px);
  fill: currentColor;
  transform: scaleY(0);
  transform-origin: 50% 100%;
}

/* inverse ink: each value is white minus what it shows on paper (ink #0b0b0b, trace #bfbfbf, signature trace
   #e3e3e3, role #5b5b5b), kept neutral so the same text reads as clean greys on the black */
@supports (mix-blend-mode: difference) {
  .js .letter { --l-ink: #f4f4f4; --l-trace: #404040; --l-sig: #1c1c1c; --l-low: #a4a4a4; }
  .js .letter__inner { mix-blend-mode: difference; }
  .js .letter__inner ::selection { background: #f4f4f4; color: #000000; }
  .js .letter__stage { display: block; }
  @media (prefers-contrast: more) {
    .js .letter { --l-trace: #6f6f6f; --l-low: #c0c0c0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .letter__stage { display: none; }
}

@media (forced-colors: active) {
  .js .letter__inner { mix-blend-mode: normal; }
  .js .letter__stage { display: none; }
  .js .letter { --l-ink: CanvasText; --l-trace: CanvasText; --l-sig: GrayText; --l-low: CanvasText; }
}