/* 咨询与规划：圆形八卦盘取意八方九位，符号以卦名、自然意象和方位解释。 */
.pathway {
  position: relative;
  overflow: hidden;
}

.section-heading {
  position: relative;
  isolation: isolate;
}

.section-heading > :not(.bagua-circle) {
  position: relative;
  z-index: 1;
}

.bagua-circle {
  position: absolute;
  z-index: 0;
  width: min(43vw, 485px);
  aspect-ratio: 1;
  right: -6%;
  top: -19%;
  border: 1px solid rgba(116, 88, 66, .3);
  border-radius: 50%;
  color: rgba(107, 78, 53, .54);
  opacity: .68;
  transform: rotate(-5deg);
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 22%, rgba(116, 88, 66, .2) 22.25% 22.6%, transparent 22.85% 39.5%, rgba(116, 88, 66, .2) 39.75% 40.1%, transparent 40.35% 49.5%, rgba(116, 88, 66, .22) 49.75% 50.1%, transparent 50%),
    repeating-conic-gradient(from -22.5deg, transparent 0deg 44.25deg, rgba(116, 88, 66, .18) 44.45deg 45deg);
}

.bagua-circle span {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 48px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.bagua-circle b {
  font: 22px/1 Georgia, var(--serif);
  font-weight: 400;
}

.bagua-circle i {
  font: 9px/1.2 var(--mono);
  font-style: normal;
  letter-spacing: .04em;
  white-space: nowrap;
}

.bagua-circle small {
  font: 8px/1 var(--mono);
  letter-spacing: .08em;
}

.bagua-qian { left: 24%; top: 16%; }
.bagua-kan { left: 50%; top: 9%; }
.bagua-gen { left: 76%; top: 16%; }
.bagua-dui { left: 10%; top: 50%; }
.bagua-zhen { left: 90%; top: 50%; }
.bagua-kun { left: 24%; top: 84%; }
.bagua-li { left: 50%; top: 91%; }
.bagua-xun { left: 76%; top: 84%; }

.bagua-circle .bagua-centre {
  left: 50%;
  top: 50%;
  color: rgba(140, 57, 46, .62);
}

.bagua-circle .bagua-centre b { font-size: 30px; }
.bagua-circle .bagua-centre i { font-size: 10px; }
.bagua-circle .bagua-centre em {
  margin-top: 2px;
  font: 8px/1 var(--mono);
  font-style: normal;
  letter-spacing: .1em;
  white-space: nowrap;
}

@media (max-width: 840px) {
  .bagua-circle {
    width: 100vw;
    right: -61vw;
    top: -3%;
    opacity: .47;
  }

  .bagua-circle b { font-size: 18px; }
  .bagua-circle i { font-size: 8px; }
  .bagua-circle small { font-size: 7px; }
  .bagua-circle .bagua-centre b { font-size: 25px; }
}