.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; }