/* Page-specific only - the design system lives in css/all/cgk-site-style.css */
.banner {
  position: relative;
  min-height: clamp(320px, 40vh, 440px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--brand-deep);
  padding-block: clamp(7rem, 13vw, 10rem) clamp(2.25rem, 4vw, 3rem);
}

.banner .label { color: rgba(255,255,255,.66); }

.banner h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.16;
  letter-spacing: 0;
  color: #FFFFFF;
  margin: 1.25rem 0 0;
  max-width: 20ch;
}

.banner p.lede {
  margin-top: 1.25rem;
  max-width: 54ch;
  font-size: 1.0625rem;
  color: rgba(255,255,255,.82);
}

.filters .cat-filter { align-items: center; }
.res-count { margin-left: auto; font-size: 0.8125rem; color: var(--muted); }
.res-count b { color: var(--brand); }

@media (max-width: 700px) { .res-count { margin-left: 0; width: 100%; } }