/* 人物自述区：半幅罗盘作为宋式纸本暗纹，而非功能性读数图。 */
.profile-film {
  isolation: isolate;
  overflow: hidden;
}

.profile-film > * {
  position: relative;
  z-index: 1;
}

.profile-film::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: min(50vw, 620px);
  aspect-ratio: 1;
  right: -18vw;
  top: 50%;
  transform: translateY(-50%) rotate(-9deg);
  border: 1px solid rgba(116, 88, 66, .32);
  border-radius: 50%;
  opacity: .72;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 13%, rgba(140, 57, 46, .17) 13.2% 13.55%, transparent 13.9% 27%, rgba(116, 88, 66, .21) 27.2% 27.55%, transparent 27.9% 40%, rgba(140, 57, 46, .16) 40.2% 40.55%, transparent 40.9% 49.2%, rgba(116, 88, 66, .23) 49.45% 49.8%, transparent 50%),
    repeating-conic-gradient(from -7.5deg, transparent 0deg 14.1deg, rgba(116, 88, 66, .21) 14.3deg 14.85deg, transparent 15deg);
  box-shadow: inset 0 0 0 20px rgba(246, 239, 227, .12);
}

.profile-copy {
  position: relative;
  z-index: 2;
}

.compass-characters {
  position: absolute !important;
  z-index: 0 !important;
  width: min(50vw, 620px);
  aspect-ratio: 1;
  right: -18vw;
  top: 50%;
  transform: translateY(-50%) rotate(-9deg);
  pointer-events: none;
  color: rgba(116, 88, 66, .46);
  font: 20px/1 var(--serif);
}

.compass-characters i {
  position: absolute;
  font-style: normal;
}

.compass-characters i:nth-child(1) { left: 48%; top: 4%; }
.compass-characters i:nth-child(2) { left: 77%; top: 18%; }
.compass-characters i:nth-child(3) { left: 91%; top: 47%; }
.compass-characters i:nth-child(4) { left: 77%; top: 76%; }
.compass-characters i:nth-child(5) { left: 48%; top: 90%; }
.compass-characters i:nth-child(6) { left: 19%; top: 76%; }
.compass-characters i:nth-child(7) { left: 5%; top: 47%; }
.compass-characters i:nth-child(8) { left: 19%; top: 18%; }

/* 案例标题区：北斗七星仅作星图暗纹，不承载文字信息。 */
.cases-head {
  position: relative;
  isolation: isolate;
}

.cases-head > * {
  position: relative;
  z-index: 1;
}

.cases-head::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: min(43vw, 440px);
  aspect-ratio: 1.15;
  right: -3%;
  top: 48%;
  transform: translateY(-50%) rotate(-7deg);
  pointer-events: none;
  opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 400'%3E%3Cg fill='none' stroke='%23745842' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M76 252 L138 211 L202 235 L255 178 L320 205 L373 129 L413 91' stroke-width='2.2' stroke-opacity='.28'/%3E%3Cpath d='M255 178 L286 259 M202 235 L172 320' stroke-width='1.1' stroke-opacity='.18'/%3E%3Ccircle cx='76' cy='252' r='7' fill='%238c392e' fill-opacity='.22' stroke='%23745842' stroke-opacity='.18'/%3E%3Ccircle cx='138' cy='211' r='6' fill='%238c392e' fill-opacity='.23' stroke='%23745842' stroke-opacity='.18'/%3E%3Ccircle cx='202' cy='235' r='8' fill='%238c392e' fill-opacity='.25' stroke='%23745842' stroke-opacity='.2'/%3E%3Ccircle cx='255' cy='178' r='6' fill='%238c392e' fill-opacity='.22' stroke='%23745842' stroke-opacity='.18'/%3E%3Ccircle cx='320' cy='205' r='8' fill='%238c392e' fill-opacity='.25' stroke='%23745842' stroke-opacity='.2'/%3E%3Ccircle cx='373' cy='129' r='7' fill='%238c392e' fill-opacity='.23' stroke='%23745842' stroke-opacity='.18'/%3E%3Ccircle cx='413' cy='91' r='9' fill='%238c392e' fill-opacity='.28' stroke='%23745842' stroke-opacity='.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 840px) {
  .profile-film::after {
    width: 92vw;
    right: -57vw;
    top: 35%;
    opacity: .5;
  }

  .compass-characters {
    width: 92vw;
    right: -57vw;
    top: 35%;
    color: rgba(116, 88, 66, .38);
    font-size: 17px;
  }

  .cases-head::after {
    width: 74vw;
    right: -20%;
    top: 48%;
    opacity: .42;
  }
}