.towns { display: grid; grid-template-columns: var(--index) minmax(0, 1fr); column-gap: var(--col-gap); align-items: start; padding: clamp(44px, 5vw, 72px) max(var(--gut), env(safe-area-inset-right)) clamp(56px, 7vw, 96px) max(var(--gut), env(safe-area-inset-left)); border-top: 1px solid var(--rule); scroll-margin-top: var(--strip); }
.towns .side { position: sticky; top: calc(var(--strip) + 24px); display: grid; gap: 12px; }
.towns h2 { margin: 0; font: italic 500 clamp(30px, 2.8vw, 40px)/1.05 var(--serif); letter-spacing: -0.016em; text-wrap: balance; }
.towns .dek { max-width: 24em; margin: 0; color: color-mix(in oklab, var(--ink) 86%, var(--dim)); font: 400 16px/1.5 var(--serif); text-wrap: pretty; }
.towns .scope { display: grid; justify-items: start; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--rule); }
.towns .scope p { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.towns .scope b { color: var(--ink); font-weight: 650; }
.towns .clear { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--ground); font: 650 13.5px/1 var(--sans); cursor: pointer; transition: background-color 0.14s; }
.towns .clear:hover { background: var(--accent-ink); }
.towns .body { min-width: 0; }

.towns .atlas { columns: 4 13.5rem; column-gap: clamp(24px, 2.8vw, 48px); }
.towns .state { break-inside: avoid; padding-bottom: 32px; }
.towns .state h3 { margin: 0; }
.towns .state h3 button { padding: 0; border: 0; background: none; color: var(--ink); font: italic 500 26px/1.15 var(--serif); letter-spacing: -0.01em; text-align: left; cursor: pointer; transition: color 0.14s; }
.towns .state h3 button:hover { color: var(--accent-ink); }
.towns .sum { margin: 3px 0 8px; padding-bottom: 9px; border-bottom: 1px solid var(--rule); color: var(--dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.towns .state ul { margin: 0; padding: 0; list-style: none; }
.towns .state li { display: flex; align-items: baseline; gap: 10px; }
.towns .state li a { padding: 3px 0; font: 400 15.5px/1.35 var(--serif); text-decoration: none; }
.towns .state li a:hover { color: var(--accent-ink); text-decoration: underline 1px var(--accent); text-underline-offset: 3px; }
.towns .n { margin-left: auto; color: var(--dim); font: 500 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; }
.towns .every-place { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; color: var(--ink); font: 650 14px/1.2 var(--sans); text-decoration: none; }
.towns .every { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--ink); font: 650 14px/1.2 var(--sans); text-align: left; cursor: pointer; }
.towns :is(.every, .more, .every-place)::after { content: ""; flex: none; width: 7px; height: 7px; border: solid currentColor; border-width: 1.6px 1.6px 0 0; rotate: 45deg; transition: translate 0.16s cubic-bezier(0.22, 1, 0.36, 1); }
.towns :is(.every, .more, .every-place):hover { color: var(--accent-ink); }
.towns :is(.every, .more, .every-place):hover::after { translate: 3px 0; }

.towns .areas { columns: 3 19rem; column-gap: clamp(28px, 3vw, 56px); }
.towns .area { break-inside: avoid; margin: 0 0 30px; }
.towns .area h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.towns .area h3 a { font: 650 17px/1.2 var(--serif); letter-spacing: -0.005em; text-decoration: none; }
.towns .s2 h3 a { font-size: 19.5px; }
.towns .s3 h3 a { font-size: 22.5px; letter-spacing: -0.01em; }
.towns .s4 h3 a { font-size: 26px; letter-spacing: -0.012em; }
.towns .area h3 a:hover { color: var(--accent-ink); text-decoration: underline 1.5px var(--accent); text-underline-offset: 4px; }
.towns .runs { margin: 0; font: 400 15px/1.55 var(--serif); text-wrap: pretty; }
.towns .run { display: block; margin-bottom: 5px; }
.towns .kind { display: inline-block; margin-right: 4px; padding: 2px 7px 1px; border-radius: 4px; background: color-mix(in oklab, var(--c) 22%, var(--ground)); color: color-mix(in oklab, var(--c) 38%, var(--ink)); font: 650 10.5px/1.5 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; vertical-align: 1px; transition: background-color 0.14s; }
.towns .kind:hover { background: color-mix(in oklab, var(--c) 40%, var(--ground)); }
.towns .place { text-decoration: underline 1px color-mix(in oklab, var(--ink) 16%, transparent); text-underline-offset: 3px; transition: color 0.12s, text-decoration-color 0.12s; }
.towns .place:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }
.towns .sep { color: var(--dim); }
.towns .more { display: inline-flex; align-items: center; gap: 9px; min-height: 32px; color: var(--ink); font: 650 13px/1.3 var(--sans); text-decoration: none; }
.towns .blank { margin: 0; color: var(--dim); font: italic 400 19px/1.5 var(--serif); }

@media (max-width: 760px) {
	.towns { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
	.towns .side { position: static; }
	.towns .state li a { padding: 7px 0; font-size: 16px; }
	.towns .runs { font-size: 16px; }
	.towns .run { margin-bottom: 8px; }
	.towns .place { display: inline-block; padding: 2px 0; }
}