/* ══════════════════════════════════════════════════════════════════════════
   CLEAN GREEN — secondary-page hero pattern ("plate").

   Problem: full-bleed illustration is a homepage-only device. On inner pages
   it either dominates the page (edge-to-edge at hero weight) or, cropped to
   a short band, cuts the artwork in half. Neither reads as engineered.

   Fix: on every inner page the H1 + lede lead; the illustration follows as a
   contained, bordered PLATE — shown WHOLE (object-fit:contain, no cropping,
   no letterboxing), capped at a calmer width so it visibly supports the copy
   instead of competing with it. Square corners (data/plate, per brand.md —
   only cards get 22px), no drop shadow (a plate rests on the paper, it does
   not lift off it), vector registration marks pinned to two corners so it
   still reads as the same engineered family as the homepage chapters.

   Markup shape — works with NO markup changes on every page in this set,
   because it targets the classes already in place:
     <figure class="chapter">…<img>…</figure>            (top-level pages)
     <div class="regionart"><img></div>                    (coverage/*.html)
     <div class="herofig"><img></div>                      (industries/*.html)
   Drop-in: token fallbacks cover both the shared clean-green.css tokens
   (--ink/--lift/--mono) and the older self-contained templates' own tokens
   (--carbon/--line/--mono), so one file works across both generations.
   ══════════════════════════════════════════════════════════════════════════ */

.chapter, .regionart, .herofig {
  position: relative;
  max-width: 880px;
  margin: 28px auto;
  border: 1.5px solid var(--ink, var(--carbon, #0B0B0C));
  border-radius: 0;                 /* plate, not card — square by spec */
  background: #EDEDEA;
  overflow: hidden;
  box-shadow: none;                 /* a plate rests on the paper, no lift */
}
.chapter img, .regionart img, .herofig img,
.chapter video {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;              /* whole image — never cropped */
}

/* vector registration marks, pinned to two corners — pure CSS, no markup */
.chapter::before, .regionart::before, .herofig::before,
.chapter::after,  .regionart::after,  .herofig::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  pointer-events: none;
  opacity: .8;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 2v18M2 11h18' stroke='%230B0B0C' stroke-width='1.4'/%3E%3C/svg%3E");
}
.chapter::before, .regionart::before, .herofig::before { top: 12px; left: 12px; }
.chapter::after,  .regionart::after,  .herofig::after  { bottom: 12px; right: 12px; }

/* existing full-bleed chapter captions still read fine on a contained plate */
.chapter .caption { color: rgba(11, 11, 12, .62); }

@media (max-width: 900px) {
  .chapter, .regionart, .herofig {
    max-width: 100%;
    margin: 22px 16px;
  }
}
@media (max-width: 600px) {
  .chapter, .regionart, .herofig {
    margin: 16px 12px;
  }
  .chapter::before, .regionart::before, .herofig::before,
  .chapter::after,  .regionart::after,  .herofig::after {
    display: none;                  /* corners too tight for marks at this size */
  }
}