/* Each collection is a chapter of the same field guide. */
.pillar-collection {
  --chapter-paper: #e9ecde;
  --chapter-ink: #42513a;
  --chapter-rubric: #586348;
  --chapter-rule: #b7c1a7;
}
.collection-experiences {
  --chapter-paper: #f3e6d8; --chapter-ink: #654634;
  --chapter-rubric: #855b42; --chapter-rule: #cdb6a1;
}
.collection-communities {
  --chapter-paper: #e5ebde; --chapter-ink: #3d513d;
  --chapter-rubric: #536648; --chapter-rule: #aeba9f;
}
.collection-journal {
  --chapter-paper: #efe8d6; --chapter-ink: #5b5037;
  --chapter-rubric: #76633e; --chapter-rule: #c8b995;
}
.collection-opening {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--chapter-ink);
  background: var(--chapter-paper);
  border-block: 1px solid var(--chapter-rule);
}
.collection-breadcrumb {
  display: flex; align-items: center; gap: .6rem;
  padding-top: 1.05rem;
  font-size: .8rem; color: var(--chapter-rubric);
}
.collection-breadcrumb a { text-decoration: underline; text-underline-offset: .18rem; }
.collection-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: end;
  gap: clamp(1.4rem, 5vw, 5rem);
  padding-block: clamp(1.35rem, 3vw, 3.1rem) clamp(2rem, 3.9vw, 3.65rem);
}
.collection-identity,
.collection-overline {
  font: 600 .71rem/1.45 DM, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--chapter-rubric);
}
.collection-identity {
  display: flex; align-items: center; flex-wrap: wrap; gap: .65rem;
  margin-bottom: .85rem;
}
.collection-identity img {
  width: 2.7rem; height: 2.7rem; padding: .19rem;
  border-radius: 50%; background: #f8f2e2; border: 1px solid var(--chapter-rule);
}
.collection-headline {
  display: block;
  color: var(--chapter-ink);
  font: 400 clamp(3.15rem, 5.5vw, 5.7rem)/.97 var(--serif);
  letter-spacing: -.053em;
  text-wrap: balance;
}
.collection-word { white-space: nowrap; }
.collection-masthead > * { min-width: 0; }
:lang(id) :is(.collection-headline, .collection-intro) { overflow-wrap: anywhere; }
.collection-intro { max-width: 42ch; margin-bottom: .14rem; }
.collection-intro > p:last-child {
  font: italic clamp(1.35rem, 2.1vw, 2rem)/1.24 var(--serif);
  margin-top: .65rem;
}
.collection-shelf { padding-block: clamp(2rem, 3.7vw, 3.7rem) clamp(3.3rem, 5vw, 5rem); }
.collection-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: .8rem 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.collection-bar h2 {
  font: 400 clamp(2rem, 3.3vw, 3.1rem)/1 var(--serif);
  letter-spacing: -.04em;
  color: var(--chapter-ink);
}
.collection-disclosure,.collection-count { color: #6d6555; font-size: .78rem; }
.collection-disclosure { margin-top: .45rem; }
.collection-results-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: .2rem 1rem;
  min-height: 3.15rem; padding-block: .1rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.collection-count { flex: 1 1 auto; font-weight: 600; color: #4c5141; }
.collection-results-bar .location { margin-inline-start: auto; }
.collection-results-bar .location svg { pointer-events: none; }
.collection-clear {
  padding: .4rem .05rem;
  min-height: 2.6rem;
  border: 0; background: transparent;
  color: var(--chapter-ink); font-size: .83rem;
  text-decoration: underline; text-decoration-color: #aaa38e; text-underline-offset: .22rem;
}
.collection-list {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  list-style: none;
  gap: clamp(1.25rem, 2.35vw, 2.4rem);
  margin: 0; padding: 0;
}
.collection-record { min-width: 0; }
.collection-story {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  align-items: center; gap: clamp(.85rem, 1.65vw, 1.7rem); height: 100%;
  padding-block: .85rem;
  border-top: 1px solid var(--rule);
}
.collection-photo {
  width: 100%; min-width: 0; aspect-ratio: 1.4; overflow: hidden;
  border-radius: .18rem;
  background: var(--chapter-paper);
}
.collection-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collection-story-body { min-width: 0; }
.collection-story-body h3 {
  margin: .42rem 0 .3rem;
  color: var(--chapter-ink);
  font: 400 clamp(1.55rem, 2.3vw, 2.45rem)/1.04 var(--serif);
  letter-spacing: -.04em; text-wrap: pretty;
}
.collection-story-body > p:not(.collection-overline) {
  max-width: 39ch; color: #595246;
  font-size: .93rem; line-height: 1.52;
}
.collection-action {
  display: inline-flex; align-items: baseline; gap: .6rem;
  margin-top: .7rem; padding-bottom: .15rem;
  border-bottom: 1px solid var(--chapter-rule);
  color: var(--chapter-ink); font-weight: 500; font-size: .82rem;
}
.collection-story:hover .collection-action { border-color: var(--chapter-ink); }
.collection-lead { grid-column: 1/-1; }
.collection-lead .collection-story {
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  gap: 0; padding: 0; border: 0; background: var(--chapter-paper);
}
.collection-lead .collection-photo { aspect-ratio: 2.12; border-radius: 0; }
.collection-lead .collection-story-body { padding: clamp(1.35rem, 3.25vw, 3.2rem); }
.collection-lead h3 { font-size: clamp(2.2rem, 3.7vw, 3.9rem); }
.collection-lead .collection-action { margin-top: 1.05rem; }
.collection-experiences .collection-lead .collection-photo,
.collection-journal .collection-lead .collection-photo { order: 2; }
.collection-communities .collection-record:last-child { grid-column: 1/-1; max-width: 48rem; }
.collection-empty {
  padding: 2rem; color: var(--chapter-ink);
  background: var(--chapter-paper); border-block: 1px solid var(--chapter-rule);
}
.collection-empty h3 { margin-bottom: .35rem; font-size: 1.7rem; }
.collection-stadium {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%; align-items: center; gap: .1rem;
  padding: 5%; color: #dfcfa4; background: #42523e;
}
.collection-stadium small { font: 500 clamp(.52rem, .65vw, .72rem)/1.4 DM, Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.collection-stadium svg { flex: 1 1 0; min-height: 0; width: 82%; height: auto; stroke-width: 1.25; }
@media (max-width: 62rem) {
  .collection-story { grid-template-columns: minmax(0,1fr); }
  .collection-photo { aspect-ratio: 1.8; }
}
@media (max-width: 47rem) {
  .collection-masthead { grid-template-columns: minmax(0,1fr); gap: .9rem; }
  .collection-headline { font-size: clamp(2.8rem, 8vw, 4.1rem); }
  .collection-intro > p:last-child { margin-top: .4rem; }
  .collection-lead .collection-story { grid-template-columns: minmax(0,1fr); }
  .collection-experiences .collection-lead .collection-photo,
  .collection-journal .collection-lead .collection-photo { order: 0; }
  .collection-lead .collection-photo { aspect-ratio: 1.85; }
  .collection-story-body h3 { font-size: clamp(1.65rem, 4vw, 2rem); }
  .collection-lead h3 { font-size: clamp(2.2rem, 6.5vw, 3rem); }

  .collection-communities .collection-record:last-child { max-width: none; }
}
@media (max-width: 34rem) {
  .collection-list { grid-template-columns: minmax(0, 1fr); }
  .collection-bar { align-items: stretch; flex-direction: column; gap: .7rem; }
  .collection-shelf .collection-bar .search { width: 100%; }
  .collection-bar .search input { font-size: 1rem; }
  .collection-story { gap: .8rem; }
  .collection-photo { aspect-ratio: 1.85; }
}