/* ==========================
   LETTERS
   ========================== */

.letters-page,
.letter-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
  font-family: Georgia, "Times New Roman", serif;
  color: #eaeaea;
  position: relative;
  z-index: 2;
}

/* Intro */

.letters-intro h1 {
  font-size: 2.4rem;
  margin-bottom: 1.5rem;
}

.letters-intro p {
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.signature {
  margin-top: 2rem;
  font-style: italic;
  opacity: 0.9;
}

/* ==========================
   LETTER LINKS (CARDS)
   ========================== */

.letters-list {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.letter-link {
  display: block;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.15);
  text-decoration: none;
  background-color: rgba(255,255,255,0.01);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.letter-link:hover {
  border-color: rgba(255,255,255,0.35);
  background-color: rgba(255,255,255,0.04);
}

.letter-link,
.letter-link:visited,
.letter-link:hover,
.letter-link:active {
  color: inherit;
}

.letter-title {
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  color: #f2f2f2;
  margin-bottom: 0.5rem;
}

.letter-meta {
  display: block;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
/* Return to Letters */

.letters-return {
  margin-top: 3.5rem;
  font-size: 0.9rem;
}

.letters-return a {
  text-decoration: none;
  color: rgba(255,255,255,0.6);
}

.letters-return a:hover {
  color: rgba(255,255,255,0.85);
}