/* JCGB internal-page title system. Scoped to explicitly opted-in JCGB views. */
body.journal-body main.jcgbx.jcgb-page-title-system {
  padding-top: 0;
}

body.journal-body main.jcgbx.jcgb-page-title-system > .jc-hero {
  padding-top: clamp(2.4rem, 5.5vw, 4.2rem);
}

body.journal-body main.jcgbx.jcgb-page-title-system > .jc-breadcrumbs {
  padding-top: calc(clamp(2.4rem, 5.5vw, 4.2rem) + .55rem);
  padding-bottom: 0;
}

body.journal-body main.jcgbx.jcgb-page-title-system > .jc-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--faint);
  font-size: .86rem;
  line-height: 1.35;
}

body.journal-body main.jcgbx.jcgb-page-title-system > .jc-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

body.journal-body main.jcgbx.jcgb-page-title-system > .jc-breadcrumbs li + li::before {
  content: "/";
  margin-inline: .55rem;
  color: var(--line-strong);
}

body.journal-body main.jcgbx.jcgb-page-title-system > .jc-breadcrumbs a {
  color: var(--accent);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

body.journal-body main.jcgbx.jcgb-page-title-system > .jc-breadcrumbs [aria-current="page"] {
  color: var(--ink);
  font-weight: 650;
}

body.journal-body main.jcgbx.jcgb-page-title-system > .jc-breadcrumbs ~ .jc-hero {
  padding-top: clamp(.9rem, 1.8vw, 1.25rem);
}

body.journal-body main.jcgbx.jcgb-page-title-system > .jc-hero .jc-eyebrow,
body.journal-body main.jcgbx.jcgb-page-title-system > .jc-hero .jc-kicker {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: .72rem !important;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.65 !important;
  text-transform: uppercase;
}

body.journal-body main.jcgbx.jcgb-page-title-system > .jc-hero .jc-eyebrow::before,
body.journal-body main.jcgbx.jcgb-page-title-system > .jc-hero .jc-kicker::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.6rem;
  height: 1px;
  background: var(--accent);
}

body.journal-body main.jcgbx.jcgb-page-title-system > .jc-hero h1 {
  margin-top: .9rem;
  font-size: clamp(2.1rem, 4vw, 3.15rem);
  line-height: 1.06;
}

@media (max-width: 900px) {
  body.journal-body main.jcgbx.jcgb-page-title-system {
    padding-top: calc(
      var(--oap-header-offset, 70px)
      + var(--oap-journal-menu-height, 0px)
      - 70px
      + 1rem
    );
  }

  body.journal-body main.jcgbx.jcgb-page-title-system > .jc-breadcrumbs {
    padding-top: 0;
  }
}