.directory {
  --dir-ink: #183d34;
  --dir-muted: #52675d;
  --dir-rule: #d7d9c9;
  --dir-paper: #fffef9;
  --dir-accent: #ab4426;
  margin-block: clamp(3.3rem, 7vw, 6rem);
  color: var(--dir-ink);
  scroll-margin-top: 1rem;
}

.directory [hidden] { display: none !important; }
.directory *,
.directory *::before,
.directory *::after { box-sizing: border-box; }

.directory-heading { margin-block-end: 1.6rem; }
.directory-heading .kicker,
.venue-city,
.day-label,
.price-label {
  font-family: system-ui, sans-serif;
  font-size: .69rem;
  font-weight: 750;
  letter-spacing: .095em;
  line-height: 1.4;
  text-transform: uppercase;
}
.directory-heading .kicker { margin: 0 0 .65rem; color: var(--dir-accent); }
.directory-heading h2 {
  margin: 0;
  font: 500 clamp(2.25rem, 4.9vw, 4.1rem)/1.06 Georgia, serif;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.directory-heading p:not(.kicker) {
  margin: .75rem 0 0;
  max-width: 65ch;
  color: var(--dir-muted);
  line-height: 1.55;
}

.directory .filters {
  display: grid;
  gap: 1rem 1.5rem;
  padding: clamp(1rem, 2.7vw, 1.5rem);
  background: #f1f3e7;
  border: 1px solid #ccd4c5;
  border-radius: 1rem;
}
.filter-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: .9rem;
}
.filter-search,
.filter-city {
  display: grid;
  gap: .35rem;
  min-width: 0;
  font: 700 .81rem/1.4 system-ui, sans-serif;
}
.filter-fields input,
.filter-fields select {
  min-width: 0;
  width: 100%;
  min-height: 2.85rem;
  padding: .55rem .8rem;
  border: 1px solid #9daea0;
  border-radius: .45rem;
  background-color: var(--dir-paper);
  font: 400 1rem/1.4 system-ui, sans-serif;
  color: var(--dir-ink);
}
.filter-fields input::placeholder { color: #667168; opacity: 1; }
.filter-days {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.filter-days legend {
  padding: 0;
  margin-bottom: .35rem;
  font: 700 .81rem/1.4 system-ui, sans-serif;
}
.filter-days label { position: relative; cursor: pointer; }
.filter-days input {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.filter-days label span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: .4rem 1rem;
  border: 1px solid #aebbae;
  border-radius: 100px;
  background: var(--dir-paper);
  color: var(--dir-ink);
  font: 650 .84rem/1.2 system-ui, sans-serif;
}
.filter-days input:checked + span {
  border-color: var(--dir-ink);
  background: var(--dir-ink);
  color: var(--dir-paper);
}
.filter-days input:focus-visible + span,
.directory :where(a, button, input, select, summary):focus-visible {
  outline: 3px solid #ad522b;
  outline-offset: 3px;
}
.filter-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .15rem 1.15rem;
  border-top: 1px solid var(--dir-rule);
  padding-top: .6rem;
}
.filter-check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.5rem;
  font: 560 .84rem/1.35 system-ui, sans-serif;
  cursor: pointer;
}
.filter-check input {
  flex-shrink: 0;
  width: 1.08rem;
  height: 1.08rem;
  margin: 0;
  accent-color: var(--dir-ink);
}
.filter-reset {
  justify-self: start;
  min-height: 2.5rem;
  border: 0;
  padding: .25rem .05rem;
  background: transparent;
  font: 650 .84rem/1.3 system-ui, sans-serif;
  color: var(--dir-accent);
  text-decoration: underline;
  text-underline-offset: .22em;
  cursor: pointer;
}
.filter-options .filter-reset { margin-inline-start: auto; }
.results-meta {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 1.45rem 0 .9rem;
}
.results-meta::after { content: ""; flex: 1; height: 1px; background: var(--dir-rule); }
.result-count { margin: 0; font: 700 .85rem/1.35 system-ui, sans-serif; }

.venue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(.75rem, 1.8vw, 1.25rem);
}
.venue-card {
  min-width: 0;
  padding: clamp(1.05rem, 2.3vw, 1.65rem);
  border: 1px solid var(--dir-rule);
  border-radius: 1rem;
  background: var(--dir-paper);
  overflow-wrap: anywhere;
  scroll-margin-top: 1rem;
}
.venue-top { display: flex; align-items: center; gap: .65rem; }
.venue-number {
  display: grid;
  width: 2rem;
  height: 1.55rem;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #d2d9cd;
  border-radius: .32rem;
  background: #eff2e8;
  font: 700 .76rem/1 ui-monospace, Consolas, monospace;
}
.venue-city { color: var(--dir-muted); letter-spacing: .075em; }
.venue-name {
  margin: .7rem 0 .9rem;
  color: var(--dir-ink);
  font: 500 clamp(1.55rem, 2.45vw, 2.1rem)/1.13 Georgia, serif;
  letter-spacing: -.035em;
}
.venue-schedule {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: .88rem 0;
  border-block: 1px solid var(--dir-rule);
}
.venue-day { min-width: 0; }
.venue-day dd { margin: .3rem 0 0; }
.day-label, .price-label { color: var(--dir-muted); }
.day-hours { display: block; font: 650 .94rem/1.38 system-ui, sans-serif; }
.day-status {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  margin-top: .35rem;
  color: #52665b;
  font: 600 .72rem/1.3 system-ui, sans-serif;
}
.day-status::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.venue-day[data-state="verified"] .day-status { color: #327250; }
.venue-day[data-state="usual"] .day-status { color: #79570b; }
.venue-day[data-state="closed"] .day-status { color: #9b452c; }
.venue-day[data-state="unknown"] .day-status { color: #6e6157; }
.venue-price { margin: .9rem 0; font-size: .93rem; line-height: 1.5; }
.price-label { display: block; margin-bottom: .25rem; }
.venue-more { margin-top: .25rem; color: var(--dir-muted); font-size: .875rem; line-height: 1.5; }
.venue-more summary {
  min-height: 2.5rem;
  padding: .55rem 0;
  color: var(--dir-ink);
  font-weight: 650;
  cursor: pointer;
}
.venue-more summary::marker { color: #507264; }
.venue-address, .venue-notes { margin: .45rem 0; }
.venue-sources { display: flex; flex-wrap: wrap; gap: .1rem .85rem; padding: 0; margin: .4rem 0 .7rem; list-style: none; }
.venue-sources a { display: inline-block; padding-block: .35rem; color: var(--dir-ink); text-underline-offset: .18em; }
.venue-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-height: 2.55rem;
  max-width: 100%;
  padding: .3rem .9rem;
  margin-top: .35rem;
  border: 1px solid #a2b7a7;
  border-radius: .45rem;
  background: #f0f4ea;
  color: var(--dir-ink);
  font: 700 .84rem/1.3 system-ui, sans-serif;
  text-decoration: none;
}
.venue-action:hover { border-color: var(--dir-ink); background: #e6efdf; }
.no-results { padding: 2rem; border: 1px dashed #adbba9; border-radius: 1rem; background: #f5f5eb; }
.no-results h3 { margin: 0; font: 500 1.6rem/1.18 Georgia, serif; }
.no-results p { margin: .55rem 0; }

@media (min-width: 52rem) {
  .directory .filters { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .filter-options { grid-column: 1 / -1; }
}
@media (max-width: 44rem) {
  .venue-grid { grid-template-columns: minmax(0, 1fr); }
  .directory-heading h2 { letter-spacing: -.045em; }
}
@media (max-width: 30rem) {
  .filter-fields { grid-template-columns: minmax(0, 1fr); }
  .filter-options { align-items: flex-start; gap: 0 .75rem; }
  .filter-options .filter-reset { margin-inline-start: 0; }
  .venue-schedule { gap: .6rem; }
  .venue-card { border-radius: .8rem; }
}
@media (forced-colors: active) {
  .filter-days input:checked + span { outline: 2px solid Highlight; }
  .day-status::before { border: 1px solid currentColor; }
}