.county-evidence { padding-block: clamp(2.5rem, 5vw, 5rem); scroll-margin-top: 7rem; }
.county-evidence__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "heading heading" "photo story";
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 0;
  align-items: start;
}
.county-evidence__layout--no-photo { grid-template-areas: "heading heading" "story story"; }
.county-evidence__heading { grid-area: heading; }
.county-evidence__photo { grid-area: photo; }
.county-evidence__story { grid-area: story; }
.county-evidence__story, .county-evidence__preparation { min-width: 0; }
.county-evidence__heading { max-width: 30ch; margin: 0 0 1.5rem; font-size: clamp(1.8rem, 3vw, 2.75rem); line-height: 1.15; }
.county-evidence__story p { max-width: 68ch; margin: 0 0 1rem; line-height: 1.65; }
.county-evidence__preparation { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid currentColor; }
.county-evidence__preparation h3 { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.35; }
.county-evidence__preparation ul { margin: 0; padding-left: 1.25rem; list-style: disc; }
.county-evidence__preparation li { margin: 0 0 1rem; padding-left: .25rem; line-height: 1.6; }
@media (max-width: 760px) {
  .county-evidence__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "photo" "story"; row-gap: 1.75rem; }
  .county-evidence__layout--no-photo { grid-template-areas: "heading" "story"; }
}

.county-evidence__photo { margin: 0; width: fit-content; max-width: 100%; }
/* The box is sized from the photograph's own dimensions, passed in as --photo-w
   and --photo-h, so it is reserved before the image downloads. With `width: auto`
   and `height: auto` the used width is 0 until the image has loaded, and the
   width and height attributes cannot supply an aspect ratio without one definite
   dimension, so the section jumped when the photograph arrived. */
.county-evidence__photo img {
  display: block;
  width: calc(32rem * var(--photo-w, 3) / var(--photo-h, 4));
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--photo-w, 3) / var(--photo-h, 4);
  border-radius: var(--radius-lg, 0.75rem);
}
/* width:0 + min-width:100% keeps the caption out of the figure's max-content
   width, so `width: fit-content` above sizes the figure to the photograph
   rather than to a single long line of caption text. */
.county-evidence__photo figcaption { width: 0; min-width: 100%; margin-top: 0.65rem; font-size: 0.9rem; line-height: 1.5; }

/* Intrinsic job-photo ratios, kept in the external stylesheet for CSP. */
.county-evidence__photo--810x1080 { --photo-w: 810; --photo-h: 1080; }