/* Town pages (/towns, /towns/<town>). Same tokens as site.css; rules: DESIGN.md. */
.towns { width: 100%; }
.towns .crumbs { margin-bottom: var(--s3); }
.towns .crumbs a { color: var(--muted); }
.towns .container > .panel, .towns .panel { margin-bottom: var(--s5); }
.towns .page-head p + p { margin-top: var(--s3); }
.towns .page-head { max-width: 72ch; }
.town-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.town-cta .form-hint { margin: 0; }
.panel-head > .label:first-child { color: var(--red); }  /* view numbers only, as on the report */
.town-list { margin: 0 0 var(--s3); padding-left: 1.25rem; }
.town-list li { margin-bottom: var(--s2); max-width: 72ch; }
.town-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 var(--s5); }
.town-grid a { display: inline-flex; align-items: center; min-height: 44px; }
.town-sample { margin: 0 0 var(--s4); }
.town-sample img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); background: var(--page); }
.town-sample figcaption { margin-top: var(--s2); }
.towns > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
    .town-cta .btn { width: 100%; }
}
.state-head { margin: var(--s6, 2rem) 0 var(--s3, 0.75rem); }