/* Full-bleed, consistently framed split banners on all interior pages. */
 .site-page-banner {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: clamp(240px, 25vw, 460px);
  border: 8px solid #090909;
  background: #fff;
  color: #121212;
  overflow: hidden;
}
.site-page-banner__image {
  min-width: 0;
  overflow: hidden;
  background: #111;
  border-right: 8px solid #090909;
}
.site-page-banner__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
}
.site-page-banner__copy {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(1.35rem, 3.5vw, 3.5rem);
}
.site-page-banner__eyebrow {
  margin: 0 0 1rem;
  font: 700 clamp(.63rem,.8vw,.78rem)/1.4 system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #08727a;
}
.site-page-banner__copy h1 {
  margin: 0;
  font: 400 clamp(1.8rem,3vw,3.35rem)/1.17 Georgia, 'Times New Roman', serif;
  letter-spacing: .035em;
  text-transform: lowercase;
  color: #161616;
  text-wrap: balance;
}
.site-page-banner__subtitle {
  margin: 1rem 0 0;
  max-width: 44ch;
  font: 400 clamp(.9rem,1.18vw,1.13rem)/1.6 system-ui, sans-serif;
  color: #3a3a3a;
}
@media (max-width: 700px) {
  .site-page-banner { grid-template-columns: minmax(0, 1fr); min-height: 0; width: 100%; border: 5px solid #090909; }
  .site-page-banner__image { height: clamp(180px, 52vw, 320px); border-right: 0; border-bottom: 5px solid #090909; }
  .site-page-banner__copy { padding: 1.7rem 1.1rem 2rem; }
  .site-page-banner__eyebrow { margin-bottom: .65rem; }
  .site-page-banner__subtitle { margin-top: .7rem; }
}

/* Header parent should never constrain the full-width frame. */
header:has(> .site-page-banner) {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}
.site-page-banner__image img {
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
@media (min-width: 701px) {
  .site-page-banner__image { min-height: 100%; }
  .site-page-banner__image img { position: absolute; inset: 0; }
  .site-page-banner__image { position: relative; }
}