/* Louder staged variant, 24 October 2026. Not integrated into the live Site. */
.at-motif-zone { position: relative; isolation: isolate; }
.at-motif-clip {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  z-index: 0; user-select: none; mix-blend-mode: multiply;
}
.at-motif {
  display: block; position: absolute; width: min(50vw, 680px); height: auto;
  max-width: none; opacity: .125; filter: grayscale(1);
  mask-image: radial-gradient(ellipse at center, #000 38%, transparent 73%);
  pointer-events: none;
}
.at-motif--peony { top: -10%; right: -10%; transform: rotate(-12deg); }
.at-motif--crane { bottom: -23%; right: -5%; width: min(43vw, 560px); }
.at-motif--pine { top: -15%; right: -4%; width: min(34vw, 430px); opacity: .10; }
.at-motif-content { position: relative; z-index: 1; }
/* Use on prose only where the live page lacks an opaque reading surface. */
.at-motif-reading { background: var(--at-reading-surface, #f4f0e7); }
/* Add this modifier to the decorative wrapper on an existing dark panel. */
.at-motif-clip--light { mix-blend-mode: screen; }
.at-motif-clip--light .at-motif { filter: grayscale(1) invert(1); opacity: .12; }
@media (max-width: 640px) {
  .at-motif { opacity: .08; width: 280px; }
  .at-motif--peony { right: -140px; top: 4%; }
  .at-motif--crane { right: -145px; bottom: -12%; width: 270px; }
  .at-motif--pine { right: -145px; top: -8%; width: 250px; opacity: .065; }
  .at-motif-clip--light .at-motif { opacity: .08; }
}
@media print, (prefers-contrast: more), (forced-colors: active) {
  .at-motif-clip { display: none; }
}