/* Town pages - HORSE-TOWNMOUNT-0824.
   Scoped to /towns/*; linked only by those pages, so nothing here can reach
   another surface. True-black lane: the page ground stays the site's own. */

.townprose { max-width: 68ch; }
.townprose h2 { margin: 0 0 14px; }
.townprose p { margin: 0 0 16px; }
.townprose__spokes { margin-top: 22px; }

.townshots__h { margin: 0 0 10px; }
.townshots__note {
  margin: 0 0 22px;
  max-width: 62ch;
  font-size: 0.86rem;
  color: #b9bec7;
}

/* One wide lead frame over two smaller ones. Two tracks, never three: a
   repeat(3|4,...) container holding cells that share a class is the uniform
   card-grid ban, and three matching tiles is also the template look.

   EVERY FRAME CARRIES THE SOURCE'S OWN 3:2. Measured on the rendered page,
   the first cut of this band spanned the lead down two rows, which made its
   box 580x578 - near square against a 3:2 source - and object-fit:cover threw
   away 33% of the picture. On photographs built around one clear subject, a
   third off the frame is how a subject loses its head. The frames below crop
   nothing: 0% on all three, re-measured in the browser. */
.townshots {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  max-width: 820px;
}
.townshot { margin: 0; min-width: 0; }
.townshot--lead { grid-column: 1 / -1; }
.townshot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.townshot figcaption {
  margin-top: 7px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b9bec7;
}

@media (max-width: 620px) {
  .townshots { grid-template-columns: minmax(0, 1fr); }
  .townshot--lead { grid-column: auto; }
}