.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. The width below
   is what the 32rem height cap resolves to for this photograph's shape, capped
   at the column width. */
.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; }