/* Small painted glimpses tie the directory and collected pages to the village. */
.collection-thumbnail {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  background: #e1dac5;
  border: 1px solid #c9bea780;
  isolation: isolate;
}
.collection-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.collection-number {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 2px 5px 1px;
  background: #f6f0e4f2;
  color: #825b40;
  font-family: Cormorant, Georgia, serif;
  font-size: 13px;
  line-height: 1.2;
}
.index-item { gap: 10px; padding: 15px 0; }
.index-item > .index-thumbnail { width: 48px; height: 51px; }
.index-item-copy { min-width: 0; }
.index-item strong { display: block; font-size: 15px; line-height: 1.45; }
.index-item small { font-size: 10px; line-height: 1.6; margin-top: 4px; color: #7c705e; }
.index-item > .icon { flex: 0 0 auto; width: 12px; height: 12px; color: #98745b; }
.index-item:hover .collection-thumbnail,
.index-item:focus-visible .collection-thumbnail { border-color: #a67e5b; }
.journal-stat { gap: 8px; margin-bottom: 24px; }
.journal-stat span { color: #a99a83; border-color: #cdbfa8; }
.journal-count {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #76644c;
  font-size: 12px;
  line-height: 1.8;
  margin: 0 0 10px;
}
.journal-count span { color: #88765e; font-size: 11px; }
.journal-entry { gap: 15px; padding: 17px 0; }
.journal-entry > .journal-thumbnail { width: 76px; height: 64px; }
.journal-entry > div { min-width: 0; }
.journal-entry strong { display: block; font-size: 19px; line-height: 1.45; }
.journal-entry small { color: #7e6e58; font-size: 12px; line-height: 1.75; }
.journal-entry > .icon { flex: 0 0 auto; color: #9b7051; }
.journal-empty { padding: 24px 0 29px; margin: 10px 0 24px; }
.journal-empty > span { display: block; font-size: 52px; line-height: 1.25; color: #a38b6c; }
.journal-empty p { color: #6f5e47; margin: 13px 0 8px; font-size: 18px; }
.journal-empty small { color: #84735a; font-size: 12px; line-height: 1.95; }
.save-place > span { white-space: nowrap; }
@media (max-width: 760px) {
  .index-list { gap: 0 18px; }
  .index-item { gap: 9px; padding: 15px 0; }
  .index-item > .index-thumbnail { width: 43px; height: 50px; }
  .index-item strong { font-size: 14px; }
  .index-item small { font-size: 10px; }
  .journal-stat { gap: 6px; margin: 23px 0; }
  .journal-entry { gap: 12px; padding: 15px 0; }
  .journal-entry > .journal-thumbnail { width: 60px; height: 58px; }
  .journal-entry strong { font-size: 17px; }
  .journal-entry small { font-size: 11px; }
  .journal-count { font-size: 11px; }
  .journal-count span { font-size: 10px; }
  .journal-empty p { font-size: 17px; }
  .journal-empty small { font-size: 12px; }
  .place-open .panel-head > #place-kicker {
    font-family: var(--story);
    font-size: 17px;
    letter-spacing: .3px;
    color: #5a4c39;
    line-height: 1.45;
  }
  .place-open .story-fold { color: #81583f; font-size: 11px; padding: 10px 8px; }
}
@media (max-width: 370px) {
  .index-list { gap: 0 14px; }
  .index-item { gap: 7px; }
  .index-item > .index-thumbnail { width: 32px; height: 44px; }
  .index-item strong { font-size: 13px; }
  .index-item small { font-size: 9px; }
  .collection-number { font-size: 12px; padding-inline: 4px; }
  .place-open .panel-head > #place-kicker { font-size: 16px; }
  .place-open .story-fold { padding-inline: 6px; }
}