/* A page-level layer lets the mask flow across isolated editorial sections. */
@property --mask-a { syntax: '<number>'; inherits: false; initial-value: -.8; }
@property --mask-b { syntax: '<number>'; inherits: false; initial-value: .5; }
.margin-relief-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: clip;
  visibility: hidden;
}
.margin-relief-layer[data-ready='true'] { visibility: visible; }
.margin-relief-layer .margin-relief {
  --mask-motion: calc(var(--ornament-motion) / 100);
  width: min(calc(var(--ornament-width) * 1vw), 520px);
  height: calc(var(--ornament-height) * 1px);
  opacity: calc(var(--ornament-opacity) / 100);
  background-size: 1040px auto;
  background-repeat: repeat-y;
  z-index: auto;
  left: auto;
  right: auto;
  mask-image:
    radial-gradient(ellipse calc(70% + var(--mask-a) * var(--mask-motion) * 16%) calc(39% + var(--mask-b) * var(--mask-motion) * 9%) at calc(53% + var(--mask-b) * var(--mask-motion) * 18%) calc(27% + var(--mask-a) * var(--mask-motion) * 7%), #000 5%, transparent 83%),
    radial-gradient(ellipse calc(65% - var(--mask-b) * var(--mask-motion) * 14%) calc(42% - var(--mask-a) * var(--mask-motion) * 8%) at calc(46% - var(--mask-a) * var(--mask-motion) * 16%) calc(66% + var(--mask-b) * var(--mask-motion) * 8%), #000 8%, transparent 86%);
  animation: organic-margin calc(var(--ornament-period) * 1s) ease-in-out infinite paused;
  animation-delay: var(--mask-delay, 0s);
}
.margin-relief-layer .margin-relief[data-side='left'] { left: calc(min(var(--ornament-width) * 1vw, 520px) * -.2); }
.margin-relief-layer .margin-relief[data-side='right'] { right: calc(min(var(--ornament-width) * 1vw, 520px) * -.2); }
.margin-relief-layer .margin-relief.is-visible { animation-play-state: running; }
.margin-relief-layer[data-paused='true'] .margin-relief,
.margin-relief-layer[data-empty='true'] .margin-relief { animation-play-state: paused; }
.margin-relief-layer[data-still='true'] .margin-relief { animation: none; }
@keyframes organic-margin {
  0%, 100% { --mask-a: -.8; --mask-b: .5; }
  33% { --mask-a: .7; --mask-b: -1; }
  66% { --mask-a: 1; --mask-b: .3; }
}
@media (max-width: 640px) {
  .margin-relief-layer .margin-relief {
    width: calc(var(--ornament-width) * 1vw);
    height: calc(var(--ornament-height) * .72px);
    background-size: 820px auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .margin-relief-layer .margin-relief { animation: none; }
}

.photo-controls details { border-top: 1px solid var(--rule); margin-top: 16px; }
.photo-controls summary { min-height: 44px; cursor: pointer; padding-block: 12px; font-size: 16px; }
.photo-controls .mask-reset { color: var(--accent); }
.photo-controls .mask-help { margin-top: 0; }
.photo-controls .photo-controls-label { margin-top: 12px; }