#letters-page {
  margin-top: 2rem;
  max-width: 48rem;
}

h1 {
  margin: 0 0 1.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.letters-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.letters-list__letter {
  padding: 1rem 0;
  border-top: 1px solid currentColor;
}

.letter__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  color: inherit;
}

.letters-note {
  margin: 0 0 1.5rem;
  max-width: 34rem;
  opacity: 0.7;
}

/* The tower's own count is dimmer than the writer's date, because the letter
   is the writer's act and the shelving is only ours. */
.letter__shelved { opacity: 0.7; }
.letter__line { flex-basis: 100%; }
.letter__paper { margin-top: 1rem; }
.letter__paper p { margin: 0 0 1rem; }
.letter__sign { text-align: right; }
.letter__note,
.letters-list__loading,
.letters-list__empty { opacity: 0.7; }