/* Beachcomber. The rest of the game's rules are still in site.css; these are the journal's
   collections and shore life, which run on under the finds as full rows of the same grid. */
.bch-journal-section {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: clamp(8px, 1.6vw, 16px); padding: 4px 2px;
  border-bottom: 1px solid rgba(117, 93, 54, .16); color: #5b543f;
}
.bch-journal-section strong { font: 850 clamp(.6rem, 1.5vw, .9rem)/1 Georgia, serif; }
.bch-journal-section span { color: rgba(91, 84, 63, .75); font-size: clamp(.42rem, .95vw, .6rem); }

.bch-set {
  grid-column: 1 / -1; display: grid; gap: clamp(3px, .7vw, 6px);
  padding: clamp(6px, 1.2vw, 11px) clamp(8px, 1.5vw, 14px);
  border: 1px solid rgba(107, 84, 52, .2); border-radius: clamp(6px, 1.2vw, 12px);
  background: rgba(255, 249, 226, .35); color: #695f49;
}
.bch-set.done { border-color: rgba(76, 124, 116, .35); background: rgba(226, 245, 228, .55); }
.bch-set-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bch-set-head strong { color: #5b543f; font: 800 clamp(.5rem, 1.2vw, .78rem)/1.2 Georgia, serif; }
.bch-set-head span { color: #46796f; font-size: clamp(.4rem, .9vw, .58rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.bch-set-thumbs { display: flex; flex-wrap: wrap; gap: clamp(3px, .7vw, 6px); }
.bch-set-thumbs canvas {
  width: clamp(28px, 5.5vw, 48px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 252, 236, .6); box-shadow: inset 0 0 0 1px rgba(107, 84, 52, .14);
}
.bch-set-line { margin: 0; color: #4f6f68; font: italic clamp(.44rem, 1vw, .64rem)/1.4 Georgia, serif; }
.bch-letter-part { margin: 0; color: #5b543f; font: clamp(.44rem, 1vw, .64rem)/1.45 Georgia, serif; }
.bch-letter-part.missing { color: rgba(91, 84, 63, .4); }