/* The reading measure is never painted by the decorative margin system. */
main:has(.radius-ambient) { overflow: clip; position: relative; }
.radius-ambient { display: none; position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.radius-ambient[data-enhanced] { display: block; }
.radius-ambient * { pointer-events: none; }
.radius-gutter {
  position: absolute; top: 0; height: 600px; width: var(--gutter, 0px);
  overflow: hidden; contain: paint; opacity: var(--ambient-opacity, 0);
  mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
}
.radius-gutter--left { left: 0; }
.radius-gutter--right { right: 0; }
.ambient-ring {
  position: absolute; left: 50%; top: 50%; width: 160px; height: 160px;
  border-radius: 50%; border: 1.5px solid #006f6660;
  box-shadow: 3px 6px 10px #75664924, inset 2px 2px 3px #fff9;
  background: radial-gradient(ellipse, #fff5d920, transparent 70%);
  transform: translate(-50%, -50%); opacity: .55;
}
.ambient-ring--shared { width: 290px; height: 290px; opacity: var(--shared, 0); transform: translate(-50%, -50%) scale(var(--shared-scale, .65)); }
.ambient-ring--public { width: 440px; height: 440px; opacity: var(--public, 0); transform: translate(-50%, -50%) scale(var(--public-scale, .7)); }
@media (max-width: 900px) {
  .ambient-ring { left: -68px; }
  .radius-gutter--right .ambient-ring { left: auto; right: -68px; transform: translate(50%, -50%); }
  .ambient-ring--shared { width: 190px; height: 190px; }
  .ambient-ring--public { width: 230px; height: 230px; }
}
.field-moment {
  --progress: 1;
  --depth: 0;
  --rx: 0deg;
  --ry: 0deg;
  --scale: 1;
  --pan-x: 0%;
  --pan-y: 0%;
  margin: 16px 0 24px;
  position: relative;
}
.field-moment__stage {
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
}
.radius-camera {
  width: min(100%, 440px);
  width: min(100%, 440px, max(180px, calc((100svh - 330px) * .8)));
}
.radius-paper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  transform-origin: 50% 51%;
}
.radius-artwork {
  display: block;
  width: 100%;
  height: auto;
  /* Feather blank margins only; title, rings and closing line stay intact. */
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(transparent, #000 1.2%, #000 98.5%, transparent);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.radius-relief, .radius-light { position: absolute; pointer-events: none; opacity: 0; }
.radius-relief {
  border-radius: 50%;
  border: 1px solid #75664936;
  background: transparent;
  box-shadow: 0 9px 12px #55452d20, inset 0 2px 2px #fff9;
}
/* Registration measured against the full 1080×1350 artwork, not a crop. */
.radius-relief--outer { left: 9.8%; top: 17%; width: 80.5%; height: 65.2%; transform: translateZ(calc(var(--depth) * 12px)); }
.radius-relief--middle { left: 22.5%; top: 28.5%; width: 55%; height: 43%; transform: translateZ(calc(var(--depth) * 27px)); }
.radius-relief--home { left: 36%; top: 39%; width: 27.5%; height: 22.5%; transform: translateZ(calc(var(--depth) * 44px)); }
.radius-light {
  left: 0;
  top: 0;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fff5d980, #fff5d930 40%, transparent 70%);
  mix-blend-mode: soft-light;
}
[data-state="active"] .field-moment__stage { perspective: 1100px; }
[data-state="active"] .radius-camera, [data-state="active"] .radius-paper { transform-style: preserve-3d; }
[data-state="active"] .radius-paper {
  transform: translate3d(var(--pan-x), var(--pan-y), 0) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--scale));
  will-change: transform;
}
[data-state="active"] .radius-relief { opacity: var(--depth); }
[data-state="active"] .radius-light { opacity: var(--depth); }
@media (prefers-reduced-motion: reduce), print {
  .radius-ambient { display: none; }
  .field-moment .field-moment__stage { perspective: none; }
  .field-moment .radius-camera, .field-moment .radius-paper { transform-style: flat; }
  .field-moment .radius-paper { transform: none !important; }
  .field-moment .radius-relief, .field-moment .radius-light { display: none; }
}