* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: #f2f2f2; }
body { color: #000; font-family: "Times New Roman", Times, serif; }

.letter-wrap { width: min(100%, 816px); margin: 0 auto; padding: 24px 0; }

.page {
  position: relative;
  width: 816px;
  min-height: 1056px;
  margin: 0 auto 24px;
  background: #fff;
  box-shadow: 0 3px 18px rgba(0,0,0,.12);
  overflow: hidden;
}

.letter-logo { position: absolute; top: 112px; left: 0; width: 100%; text-align: center; }
.letter-logo img { width: 178px; height: auto; display: inline-block; }

.letter-content {
  position: relative;
  margin-left: 96px;
  width: 624px;
  padding-top: 239px;
  font-size: 21.333px;
  line-height: 1.282;
  letter-spacing: -0.03px;
}

.page-two-content { padding-top: 95px; }

p { margin: 0 0 24px; }
.directors { line-height: 1.275; margin-bottom: 24px; }
.signature {
  font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  margin-top: -4px;
  margin-bottom: 20px;
}

@media (max-width: 860px) {
  .letter-wrap { padding: 0; width: 100%; }
  .page { width: 100%; min-height: auto; margin-bottom: 0; box-shadow: none; overflow: visible; }
  .letter-logo { position: static; padding-top: 70px; margin-bottom: 64px; }
  .letter-content, .page-two-content { width: auto; margin: 0; padding: 0 9.375% 60px; font-size: clamp(18px, 2.6vw, 21.333px); }
  .page-two-content { padding-top: 70px; }
}

@media print {
  @page { size: 8.5in 11in; margin: 0; }
  html, body { background: #fff; }
  .letter-wrap { width: auto; padding: 0; }
  .page { width: 8.5in; min-height: 11in; margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
  .page:last-child { break-after: auto; page-break-after: auto; }
}