/* Directory spreads */
.guide {
  padding-block: clamp(3.75rem, 6.5vw, 6.5rem) clamp(4rem, 7vw, 7rem);
  scroll-margin-top: 1rem;
}
.guide .section-index,
.dispatch .section-index,
.footer-main .eyebrow,
.modal-meta {
  color: #6c5844;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.guide .section-index span,
.dispatch .section-index span {
  color: #985337;
  letter-spacing: .06em;
}
.guide .section-index i,
.dispatch .section-index i {
  width: 2.3rem;
  border-color: #ad977a;
}
.guide-head {
  gap: 2rem;
  margin: 1.25rem 0 clamp(1.8rem, 3.1vw, 3rem);
}
.guide h2,
.dispatch h2 {
  color: #493c31;
  font-size: clamp(3rem, 5vw, 5.1rem);
  line-height: .99;
  letter-spacing: -.045em;
}
.guide h2 span,
.dispatch h2 em {
  color: #9b5238;
}
.guide-head p {
  max-width: 35rem;
  margin-top: .65rem;
  color: #60594f;
  line-height: 1.55;
}
:is(.guide, .collection-shelf) .search {
  width: min(100%, 16rem);
  min-height: 2.85rem;
  border: 0;
  border-bottom: 1px solid #9e9d8a;
  border-radius: 0;
  padding: .5rem .12rem;
  gap: .8rem;
  color: #515b46;
  background: transparent;
}
.search input { width: 100%; }
.search input::placeholder { color: #68695a; opacity: 1; }
.guide .filterline {
  gap: .35rem 1.5rem;
  padding: 0;
  border-block-color: #cec9b9;
}
.categories {
  gap: clamp(.7rem, 2.45vw, 2.5rem);
}
.categories :is(button, .partner-tab),
.categories button[aria-pressed=true],
.categories button:hover:not([aria-pressed=true]) {
  position: relative;
  min-height: 3.2rem;
  margin: 0;
  padding: .6rem .04rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #5d5a50;
}
.categories .partner-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  white-space: nowrap;
}
.categories .partner-tab img { width: .87rem; height: .87rem; }
.categories .partner-tab span { font-size: .85em; }
.categories button[aria-pressed=true] {
  color: #3c4a32;
  font-weight: 650;
}
.categories :is(button, .partner-tab)::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: transparent;
}
.categories button[aria-pressed=true]::after { background: #4f5c40; }
.categories .partner-tab:hover::after,
.categories button:hover:not([aria-pressed=true])::after { background: #b3b49d; }
.location { color: #4d5545; }
.location > span { inset-block-start: 50%; transform: translateY(-55%); }
.results-meta {
  flex-wrap: wrap;
  gap: .25rem .8rem;
  margin-block: 1rem 1.25rem;
  color: #686355;
  font-size: .78rem;
}
#count { color: #4c5141; font-weight: 600; }
.cards {
  column-gap: clamp(1.2rem, 2.5vw, 2.4rem);
  row-gap: 2rem;
}
.card {
  padding-bottom: 1.05rem;
  border-bottom: 1px solid #cfc9b8;
}
.card-visual {
  aspect-ratio: 1.55;
  background: #e8e3d8;
  border-radius: .22rem;
}
.card img { display: block; }
.card .below { padding: 1.13rem 0 0; }
.card .meta {
  color: #865035;
  font-size: .75rem;
  font-weight: 550;
  letter-spacing: .065em;
}
.card-title { margin: .48rem 0 .36rem; }
.card h3 {
  font-size: clamp(1.85rem, 2.5vw, 2.55rem);
  color: #473c31;
  letter-spacing: -.035em;
  text-wrap: pretty;
}
.card-title svg { color: #526047; }
.card p {
  max-width: 39ch;
  color: #625b50;
  font-size: .95rem;
  line-height: 1.55;
}
.card:focus-visible h3,
.card:hover h3 { color: #894c35; }
.empty {
  padding: clamp(1.5rem,4vw,3rem);
  background: #eeece1;
  border-block: 1px solid #d0cdbd;
}
.empty button {
  min-height: 2.75rem;
  padding: .5rem 1rem;
  border-color: #9fa48f;
  border-radius: .2rem;
  color: #44503a;
  background: transparent;
}

/* An archive print in a pale sage spread */
.dispatch {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.25rem, 7.2vw, 7.3rem);
  padding-block: clamp(3.1rem, 6.3vw, 6.1rem);
}
.dispatch::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #e8e9da;
  box-shadow: 0 0 0 100vmax #e8e9da;
  clip-path: inset(0 -100vmax);
}
.dispatch-print {
  position: relative;
  min-height: 0;
  aspect-ratio: 1.56;
  padding: clamp(1.35rem, 2.45vw, 2.6rem);
  gap: .7rem;
  border-radius: .18rem;
  background: #414d3a;
  color: #e2d6ad;
  box-shadow: 0 .6rem 1.15rem -.8rem #32352476;
}
.dispatch-print::before {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 1px solid #d4d3aa5e;
  pointer-events: none;
}
.print-top,
.print-bottom span {
  font-size: clamp(.65rem, .78vw, .78rem);
  line-height: 1.4;
  letter-spacing: .105em;
}
.print-top,
.print-bottom { color: #ece7cc; border-color: #c9c8a44a; }
.stadium-art { flex: 1 1 0; width: 88%; min-height: 5.7rem; height: 0; }
.print-bottom i { font-size: clamp(1.4rem, 2.4vw, 2.35rem); line-height: 1; }
.dispatch h2 { margin-block: 1.65rem .9rem; }
.dispatch-text p { max-width: 36ch; color: #54594b; line-height: 1.7; }
.dispatch .text-link {
  min-height: 2.75rem;
  margin-top: 1.1rem;
  color: #3f4b37;
  border-color: #8e967b;
}
.dispatch .text-link:hover { border-color: currentColor; }

/* Colophon and reading panels */
footer {
  color: #514537;
  background: #f0e9d9;
  border-color: #d1c8b5;
}
.footer-main {
  grid-template-columns: minmax(0, 2.25fr) repeat(2, minmax(0, 1fr));
  padding-block: clamp(2.65rem, 4.6vw, 4.8rem) clamp(2.35rem, 3.7vw, 3.6rem);
}
.footer-main .wordmark img { width: clamp(9rem, 13vw, 12rem); }
.footer-main p {
  margin-top: 1.05rem;
  max-width: 22ch;
  color: #675640;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
}
.footer-main > div > a:not(.wordmark) {
  display: table;
  margin-top: .3rem;
  padding-block: .32rem;
  font-size: .9rem;
}
.footline { flex-wrap: wrap; gap: .3rem 1rem; color: #665b4b; border-color: #cfc5b4; }
dialog {
  width: min(38rem, calc(100% - 2rem));
  border: 1px solid #bfb7a4;
  border-radius: .45rem;
  color: #493c31;
  background: #fcf9f1;
}
dialog::backdrop { background: rgb(42 43 32 / 64%); }
#close-dialog {
  border-color: #c7bca6;
  background: #faf6eb;
  color: #494e3d;
}
#close-dialog:hover { background: #e9ebdf; }
.modal-copy {
  padding: clamp(1.6rem, 4.5vw, 2.45rem) clamp(1.3rem, 5vw, 3.1rem) clamp(1.8rem, 4.8vw, 2.9rem);
}
.modal-copy.text-only { padding-top: 3.85rem; }
.modal-copy h2 {
  font-size: clamp(2.55rem, 5vw, 3.55rem);
  margin-block: 1.05rem .75rem;
}
.modal-copy h3 { color: #50553e; font-style: italic; }
.modal-copy p,
.modal-copy li { color: #594f44; line-height: 1.72; }
.modal-copy .notice {
  border-color: #d1c9b8;
  font-size: .83rem;
  color: #675e50;
}
@media (max-width: 45rem) {
  .guide-head { margin-bottom: 1.5rem; }
  .guide .search { width: 100%; max-width: 28rem; }
  .guide .filterline { gap: 0 .75rem; }
  .categories { column-gap: 1.12rem; }
  .categories :is(button, .partner-tab) { min-height: 2.8rem; font-size: .84rem; }
  .dispatch {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.85rem;
  }
  .dispatch-print { max-width: 31rem; width: 100%; }
  .dispatch-text p { max-width: 44ch; }
  .dispatch h2 { margin-block: 1.2rem .65rem; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 36rem) {
  .card-visual { aspect-ratio: 1.65; }
  .results-meta { margin-block: .9rem 1.05rem; }
}
@media (max-width: 26rem) {
  .guide .filterline { flex-direction: column; align-items: flex-start; }
  .categories { width: 100%; column-gap: clamp(.4rem, 3.5vw, 1.05rem); }
  .categories :is(button, .partner-tab),
  .categories button[aria-pressed=true],
  .categories button:hover:not([aria-pressed=true]) { min-height: 2.75rem; }
  .dispatch-print { padding: 1.1rem; gap: .55rem; }
  .print-top, .print-bottom { gap: .35rem; }
}
@media (max-width: 55rem) {
  .dispatch-print { min-height: 13rem; }
}