/* The founder letter. One measure for the prose; the block itself fills
   whatever column the page gives it, so it never reads as a short column
   sitting under a wide one. */
.letter-body,
.letter-signoff,
.letter-name {
  max-width: 62ch;
}

.letter-body {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

.letter-signoff {
  margin: var(--space-5) 0 0;
  font-size: var(--text-md);
  color: var(--ink-soft);
}

.letter-sign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
}

/* Painted, not drawn. The png is a mask, so the ink is currentColor and
   the mark is right on a white page, on the dark band, and in dark mode,
   with no inversion to get backwards. Width is the asset's aspect ratio at
   this height. */
.letter-mark {
  display: block;
  width: 121px;
  height: 64px;
  margin: 0 0 var(--space-2) -4px;
  background-color: currentColor;
  color: var(--ink);
  opacity: 0.86;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.letter-name {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.letter.is-dark .letter-body,
.letter.is-dark .letter-signoff { color: #A8B6C6; }
.letter.is-dark .letter-name    { color: #A8B6C6; }
.letter.is-dark .letter-mark    { color: #F2F7FB; opacity: 0.92; }
.letter.is-dark a               { color: #7FC4F0; }

/* The email link takes the brand blue rather than the theme's bare <a>
   colour, which lands on a dull olive-grey against this ground. It is the
   only link in the letter and the only thing in it to click. */
.letter-body a {
  color: #2C7FBF;
  text-decoration-color: rgba(44, 127, 191, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .letter-body a {
    color: #7FC4F0;
    text-decoration-color: rgba(127, 196, 240, 0.4);
  }
}

:root[data-theme="dark"] .letter-body a {
  color: #7FC4F0;
  text-decoration-color: rgba(127, 196, 240, 0.4);
}

/* In dark mode the letter sits on the page ground, so the mark takes the
   page's own ink rather than the light-mode value. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .letter-mark { color: var(--ink); }
}

:root[data-theme="dark"] .letter-mark { color: var(--ink); }