.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: 1rem 0 0; 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-shortcut { scroll-margin-top: 7rem; display: flex; align-items: center; min-height: 44px; margin-top: 1rem; width: fit-content; max-width: 100%; }

.county-evidence__photo { margin: 0; max-width: none; }
/* 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);
}
.county-evidence__photo figcaption { 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--675x900 { --photo-w: 675; --photo-h: 900; }
