/* One breadcrumb and banner layout for every interior page. */
.bread-crumb-banner {
  min-height: 250px;
  overflow: hidden;
  background: #fff;
  color: #0f0e12;
}

.bread-crumb-banner > .wrap {
  max-width: 1500px;
  padding-bottom: 40px;
}

.bread-crumb-banner__title {
  max-width: 1100px;
  margin: 18px 0 0;
  color: #0f0e12;
  font: 800 clamp(54px, 4vw, 124px)/.95 var(--display);
  letter-spacing: -.085em;
  overflow-wrap: break-word;
}

.bread-crumb-banner__title span:last-child { color: #a343f8; }

.bread-crumb {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 30px);
  height: 32px;
  min-width: 0;
  margin-top: 80px;
  padding-bottom: 10px;
  overflow: visible;
  background: #fff;
  isolation: isolate;
}

.bread-crumb::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -105px;
  right: -20vw;
  width: min(68vw, 1100px);
  height: 400px;
  background: radial-gradient(ellipse at 68% 52%, rgba(150, 63, 244, .18), rgba(182, 130, 251, .07) 42%, transparent 73%);
  pointer-events: none;
}

.bread-crumb__list {
  position: relative;
  z-index: 1;
  order: 0;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: clamp(14px, 1.8vw, 34px);
  width: max-content;
  max-width: calc(100% - 90px);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #68616f;
  font: 400 clamp(16px, 1vw, 28px)/1.35 var(--body);
  letter-spacing: -.035em;
}

.bread-crumb__item {
  display: flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.bread-crumb__item:not(:last-child) { flex-shrink: 0; }
.bread-crumb__item:last-child { flex: 0 1 auto; }

.bread-crumb__item + .bread-crumb__item::before {
  content: "";
  width: .34em;
  height: .34em;
  flex: 0 0 .34em;
  margin-right: clamp(14px, 1.8vw, 34px);
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  color: #68616f;
  transform: rotate(45deg);
}

.bread-crumb__link {
  color: inherit;
  text-decoration: none;
}

.bread-crumb__link:hover,
.bread-crumb__link:focus-visible,
.bread-crumb__current {
  color: #6527d9;
}

.bread-crumb__current {
  display: block;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
}

.bread-crumb__wave {
  position: relative;
  z-index: 0;
  top: -14px;
  order: 1;
  flex: 1 1 60px;
  width: auto;
  min-width: 60px;
  height: 185px;
  overflow: visible;
  pointer-events: none;
}

.bread-crumb__wave-line {
  fill: none;
  stroke: #9134ff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.bread-crumb__wave-star {
  fill: #6c16df;
  filter: drop-shadow(0 0 8px rgba(111, 25, 230, .23));
}

@media (max-width: 700px) {
  .bread-crumb-banner__title {
    margin-top: 20px;
    font-size: clamp(54px, 12vw, 82px);
  }
  .bread-crumb { gap: 10px; margin-top: 55px; }
  .bread-crumb::before { top: -25px; right: -20vw; width: 85vw; height: 170px; }
  .bread-crumb__list {
    gap: 10px;
    max-width: calc(100% - 45px);
    font-size: clamp(15px, 4vw, 20px);
  }
  .bread-crumb__item + .bread-crumb__item::before { margin-right: 10px; }
  .bread-crumb__wave {
    top: 4px;
    flex-basis: 35px;
    min-width: 35px;
    height: 110px;
  }
}