/* Reconciliation for the thirteen standalone pages.
   Loaded only by them, after assets/site.css.

   Those pages were written against the retired Espin Local palette, where
   marigold was a LIGHT amber that took dark text and sky was a LIGHT blue used
   on dark bands. Aliasing marigold onto the signage system's dark action red
   inverted every one of those pairings at once: 28 strings that had passed the
   contrast gate for months stopped passing, every one of them dark type on a
   now dark fill or a now dark accent on a dark band.

   So the aliases preserve lightness instead (marigold becomes ochre, sky stays
   a light blue) and this file does the one thing that mapping cannot: it turns
   the surfaces that are actually ACTIONS red, with the white type a dark fill
   needs. Red stays the only thing on this site you can click.

   Measured, not judged: white on the action red 6.65, ink on it 2.42.
   The selector list is harvested from the pages themselves rather than typed,
   so a button that exists only inside chat.js is in it too. */

.btn,
.btn-primary,
.button,
.cta,
.fill,
.skip-link,
#ec-btn,
#ec-form button,
.svc-list li .nudge button:hover {
  background: #B32217;
  color: #fff;
  border-color: #B32217;
}
.btn:hover,
.btn-primary:hover,
.button:hover,
.cta:hover,
.fill:hover,
#ec-btn:hover,
#ec-form button:hover {
  background: #8E1A11;
  color: #fff;
  border-color: #8E1A11;
}

/* The display register. These pages set their own h1 and h2 with no
   font-stretch and no uppercase, so they opened in the prose width this site
   reserves for prose while the index opened in condensed caps. That single
   difference is what a visitor reads as "a different site" without being able
   to say why. h3 is left alone: on editor-demo and front-desk-demo it labels
   controls inside a demo UI, where capitals would be wrong. */
h1, h2 {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.02;
}
h1 { font-stretch: 80%; }
h2 { font-stretch: 82%; }

/* The same measure for the nineteen pages that are not templated: their prose
   is written straight into the markup with no container cap, and it was where
   the 155-character lines were. */
main p, main li, main dd { max-width: 72ch; }

/* The opening block, in two columns.
   Eight of these pages open with a four-line h1 and a paragraph stacked in the
   left two thirds, leaving 460px of the container empty for the whole height of
   the fold while the templated pages fill that column. Same treatment as the
   templated sections: the heading takes one column and the sentence that
   follows it takes the other, sharing a bottom baseline. */
main .wrap.hero-pad:has(> h1:first-child){
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(28px, 3.4vw, 64px);
  align-content: start;
}
main .wrap.hero-pad:has(> h1:first-child) > *{ grid-column: 1 / -1; min-width: 0; }
main .wrap.hero-pad > h1:first-child{ grid-column: 1; margin-bottom: 0; }
main .wrap.hero-pad > h1:first-child + p{
  grid-column: 2;
  align-self: end;
  margin-bottom: 0;
  max-width: 46ch;
}
main .wrap.hero-pad > h1:first-child + p + *{ margin-top: clamp(26px, 3vw, 44px); }
@media (max-width: 860px){
  main .wrap.hero-pad:has(> h1:first-child){ grid-template-columns: minmax(0, 1fr); }
  main .wrap.hero-pad > h1:first-child{ grid-column: 1 / -1; margin-bottom: 14px; }
  main .wrap.hero-pad > h1:first-child + p{ grid-column: 1 / -1; max-width: 64ch; }
}