:root {
  color-scheme: light;
  --background: #f7f6f5;
  --text: #111110;
  font-family: "Newsreader", Georgia, serif;
  font-optical-sizing: auto;
  color: var(--text);
  background: var(--background);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { min-height: 100%; overflow-y: auto; }
body { min-height: 100%; margin: 0; isolation: isolate; }
img { display: block; max-width: 100%; }

body::before,
body::after {
  content: "";
  position: fixed;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  border-inline: 1px solid rgb(17 17 16 / 6%);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

body::before { width: min(840px, calc(100% - 16px)); }
body::after { width: 84%; }

.page-shell {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 64px;
}

.page-grid {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
}

.intro-letter {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 616px);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 24px;
}

.letter-header {
  flex: none;
  margin-bottom: 24px;
}

h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.letter-image {
  position: relative;
  flex: none;
  width: 100%;
  margin: 0 0 24px;
}

.letter-image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 30%;
  width: 100%;
  height: auto;
}


.letter-body {
  flex: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.letter-body p { margin: 0 0 12px; }
.letter-body p:last-child { margin-bottom: 0; }
.letter-body strong { font-weight: 500; }
.letter-body ul { margin: 0 0 16px; padding-left: 1.25em; }
.letter-body li + li { margin-top: 4px; }
.signature { margin-top: 16px; }

@media (max-width: 1100px) {
  .page-shell { padding-inline: 40px; }
  body::after { display: none; }
}

@media (max-width: 767px) {
  .page-shell { padding-inline: 24px; }
  h1 { font-size: 24px; }
  .letter-header { margin-bottom: 20px; }
  .letter-image { margin-bottom: 20px; }
  .letter-body { font-size: 14px; line-height: 1.45; }
}

@media (min-width: 768px) and (max-height: 1000px) {
  .letter-header, .letter-image { margin-bottom: 16px; }
  .letter-body { font-size: 14px; line-height: 1.35; }
  .letter-body p { margin-bottom: 8px; }
  .signature { margin-top: 12px; }
}

@media (max-height: 700px) {
  .intro-letter { padding-block: 16px; }
  .letter-header { margin-bottom: 16px; }
  .letter-image { margin-bottom: 16px; }
  .letter-body { font-size: 14px; line-height: 1.4; }
  .letter-body p { margin-bottom: 10px; }
}

@media (max-width: 360px) and (max-height: 700px) {
  .page-shell { padding-inline: 16px; }
  .intro-letter { padding-block: 12px; }
  h1 { font-size: 22px; }
  .letter-header, .letter-image { margin-bottom: 12px; }
  .letter-body { font-size: 13px; line-height: 1.35; }
  .letter-body p { margin-bottom: 8px; }
  .signature { margin-top: 10px; }
}

@media (max-width: 360px) and (max-height: 620px) {
  .intro-letter { padding-block: 8px; }
  .letter-header, .letter-image { margin-bottom: 8px; }
  .letter-body { font-size: 12.5px; line-height: 1.3; }
  .letter-body p { margin-bottom: 6px; }
  .signature { margin-top: 8px; }
}

@media (min-width: 600px) and (max-height: 450px) {
  .page-shell { padding-inline: 24px; }
  h1 { font-size: 24px; }
  .letter-body { font-size: 13px; line-height: 1.4; }
  .letter-body p { margin-bottom: 8px; }
  .signature { margin-top: 10px; }
}