.letter {
  padding-inline: var(--space-medium);
  position: relative;
}

.letter__container {
  letter-spacing: var(--letter-spacing);
  margin-inline: auto;
  position: relative;
  width: min(100%, 26em);
}

.letter__container article {
  background: var(--color-white);
  box-shadow: var(--box-shadow-card);
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing);
  padding: 2.25em 2.5em;
  position: relative;
  text-wrap: pretty;
  transform: rotate(-0.4deg);
  z-index: 1;
}

.letter__container article > * + * {
  margin-top: var(--spacing, 1.5em);
}

.letter__container:before,
.letter__container:after {
  background: var(--color-white);
  box-shadow: var(--box-shadow-card-soft);
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.letter__container:before {
  transform: rotate(-1.45deg) translate(0.2%, 0.1%);
  width: 99.1%;
}

.letter__container:after {
  height: 97%;
  transform: rotate(0.3deg) translate(0.3%, 1.5%);
  width: 99.3%;
}

@media(min-width: 64em) {

  .letter__container {
    width: min(100%, 26.75em);
  }

  .letter__container article {
    padding: 3.75em 4em;
    transform: rotate(-0.8deg);
  }

  .letter__container:before {
    transform: rotate(-2.9deg) translate(0.2%, 0.1%);
  }

  .letter__container:after {
    transform: rotate(0.6deg) translate(0.3%, 1.5%);
  }

}

@media(prefers-color-scheme: dark) {

  .letter__container article,
  .letter__container:before,
  .letter__container:after {
    background: var(--color-ink-3);
  }

}

.dark .letter__container article,
.dark .letter__container:before,
.dark .letter__container:after {
  background: var(--color-ink-3);
}

.letter__signature {
  --spacing: 2.2em;
  align-items: center;
  background: url('/assets/images/general/jf-signature.svg') left top / auto 3.3em no-repeat;
  display: flex;
  font-size: var(--font-size-large);
  gap: 0.5em;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  padding-top: 4.3em;
  position: relative;
  width: 100%;
}

.letter__signature dl {
  display: flex;
  flex-direction: column;
}

.letter__signature dl dt {
  font-weight: 500;
}

.letter__signature dl dd {
  font-style: italic;
}

.letter__signature--avatar:before {
  background: url('/assets/images/general/jf-avatar.jpg') center center / cover no-repeat;
  border-radius: 100%;
  content: '';
  display: inline-flex;
  height: 3em;
  width: 3em;
}

@media(prefers-color-scheme: dark) {

  .letter__signature {
    background-image: url('/assets/images/general/jf-signature-dark.svg');
  }

}