/* 方法区：三垣二十八宿以低亮度星图呈现，仅承担气韵与层次。 */
.method-copy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.method-copy > :not(.three-enclosures-labels) {
  position: relative;
  z-index: 1;
}

.method-copy::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: min(53vw, 570px);
  aspect-ratio: 1;
  right: -17%;
  bottom: -16%;
  opacity: .44;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23e5d4ba' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='280' cy='280' r='239' stroke-width='1.5' stroke-opacity='.32'/%3E%3Ccircle cx='280' cy='280' r='181' stroke-width='1' stroke-opacity='.25' stroke-dasharray='3 8'/%3E%3Cellipse cx='280' cy='282' rx='119' ry='93' stroke-width='1.4' stroke-opacity='.32'/%3E%3Cpath d='M191 274 L217 215 L285 191 L351 229 L337 297 L270 329 L208 308 Z' stroke-width='1.6' stroke-opacity='.36'/%3E%3Cpath d='M186 337 L236 376 L316 369 L364 326' stroke-width='1.3' stroke-opacity='.32'/%3E%3Cpath d='M210 194 L178 153 M350 229 L405 203 M235 377 L211 421 M316 369 L367 423' stroke-width='1.2' stroke-opacity='.26'/%3E%3C/g%3E%3Cg fill='%23e8d6bc' fill-opacity='.62'%3E%3Ccircle cx='280' cy='40' r='4'/%3E%3Ccircle cx='333' cy='47' r='3.4'/%3E%3Ccircle cx='382' cy='66' r='4'/%3E%3Ccircle cx='425' cy='98' r='3.2'/%3E%3Ccircle cx='462' cy='137' r='4.2'/%3E%3Ccircle cx='489' cy='182' r='3.3'/%3E%3Ccircle cx='511' cy='231' r='4'/%3E%3Ccircle cx='519' cy='282' r='3.2'/%3E%3Ccircle cx='510' cy='333' r='4.1'/%3E%3Ccircle cx='489' cy='381' r='3.3'/%3E%3Ccircle cx='460' cy='424' r='4'/%3E%3Ccircle cx='422' cy='462' r='3.1'/%3E%3Ccircle cx='378' cy='493' r='4.1'/%3E%3Ccircle cx='330' cy='513' r='3.2'/%3E%3Ccircle cx='280' cy='521' r='4.2'/%3E%3Ccircle cx='230' cy='513' r='3.2'/%3E%3Ccircle cx='182' cy='493' r='4.1'/%3E%3Ccircle cx='138' cy='462' r='3.1'/%3E%3Ccircle cx='100' cy='424' r='4'/%3E%3Ccircle cx='71' cy='381' r='3.3'/%3E%3Ccircle cx='50' cy='333' r='4.1'/%3E%3Ccircle cx='41' cy='282' r='3.2'/%3E%3Ccircle cx='49' cy='231' r='4'/%3E%3Ccircle cx='71' cy='182' r='3.3'/%3E%3Ccircle cx='98' cy='137' r='4.2'/%3E%3Ccircle cx='135' cy='98' r='3.2'/%3E%3Ccircle cx='178' cy='66' r='4'/%3E%3Ccircle cx='227' cy='47' r='3.4'/%3E%3C/g%3E%3Cg fill='%23cfb68d' fill-opacity='.7'%3E%3Ccircle cx='217' cy='215' r='4.5'/%3E%3Ccircle cx='285' cy='191' r='3.4'/%3E%3Ccircle cx='351' cy='229' r='4.2'/%3E%3Ccircle cx='337' cy='297' r='3.4'/%3E%3Ccircle cx='270' cy='329' r='4.3'/%3E%3Ccircle cx='208' cy='308' r='3.5'/%3E%3Ccircle cx='236' cy='376' r='4'/%3E%3Ccircle cx='316' cy='369' r='3.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.three-enclosures-labels {
  position: absolute !important;
  z-index: 0 !important;
  width: min(53vw, 570px);
  aspect-ratio: 1;
  right: -17%;
  bottom: -16%;
  color: rgba(229, 212, 186, .45);
  font: 11px/1.1 var(--serif);
  letter-spacing: .12em;
  pointer-events: none;
}

.three-enclosures-labels span {
  position: absolute;
  white-space: nowrap;
}

.three-enclosures-labels span:nth-child(1) { left: 45%; top: 33%; }
.three-enclosures-labels span:nth-child(2) { left: 59%; top: 55%; }
.three-enclosures-labels span:nth-child(3) { left: 25%; top: 57%; }
.three-enclosures-labels span:nth-child(4) { left: 39%; top: 8%; font-size: 9px; opacity: .8; }

@media (max-width: 840px) {
  .method-copy::after {
    width: 116vw;
    right: -48%;
    bottom: -24%;
    opacity: .3;
  }

  .three-enclosures-labels {
    width: 116vw;
    right: -48%;
    bottom: -24%;
    color: rgba(229, 212, 186, .34);
    font-size: 10px;
  }
}