/* Site05 / 20261013-s5-effects02-material. Owned figures only. No independent CSS clock. */
.s5-artpiece {
  --s5-plum: #3a173e;
  --s5-ink: #28152e;
  --s5-gold: #ddb77c;
  --s5-ivory: #fcf3df;
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 80% 16%, #785079 0, transparent 58%),
    linear-gradient(140deg, #28152e, #4d2850 55%, #241524);
  border: 1px solid #dbc1a34d;
  border-radius: 4px 38px 4px 18px;
  box-shadow: 0 18px 34px #351c341a;
}
.s5-artpiece .s5-stage {
  position: absolute;
  inset: 0;
  min-width: 0;
  overflow: hidden;
}
.s5-artpiece :is(.s5-primary, .s5-secondary, .s5-tertiary) {
  position: absolute;
  overflow: hidden;
  background: #dfd0bc;
  border: 1px solid #ebc991a3;
  box-shadow: 0 10px 20px #180e2145;
}
.s5-artpiece .s5-art-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.s5-artpiece .s5-primary {
  left: 5%;
  top: 8%;
  width: 57%;
  height: 78%;
  border-radius: 3px 30px 3px 3px;
  z-index: 2;
}
.s5-artpiece .s5-secondary {
  right: 4%;
  bottom: 5%;
  width: 29%;
  height: 25%;
  border-radius: 15px 2px 2px 2px;
  z-index: 3;
}
.s5-artpiece .s5-tertiary {
  left: 10%;
  bottom: 3%;
  width: 24%;
  height: 17%;
  border-width: 3px;
  z-index: 3;
}
.s5-artpiece .s5-canvas {
  display: block;
  position: absolute;
  right: -4%;
  top: 1%;
  width: 56%;
  height: auto;
  aspect-ratio: 1;
  z-index: 4;
  opacity: 0;
}
.s5-artpiece[data-s5-ready='true'] .s5-canvas {
  opacity: 1;
}
.s5-artpiece[data-s5-renderer='fallback'] .s5-canvas {
  opacity: 0;
}
.s5-artpiece .s5-hairline {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 2%;
  height: 1px;
  background: #deb98078;
  z-index: 1;
}
.s5-artpiece[data-s5-layout='sampling'] {
  background: linear-gradient(160deg, #f2e4d2, #c8aab8);
  border-radius: 28px 3px 28px 3px;
}
.s5-artpiece[data-s5-layout='sampling'] .s5-primary {
  left: 24%;
  top: 6%;
  width: 72%;
  height: 66%;
  border-radius: 28px 2px 2px 2px;
}
.s5-artpiece[data-s5-layout='sampling'] .s5-secondary {
  right: 4%;
  bottom: 6%;
  width: 33%;
  height: 24%;
}
.s5-artpiece[data-s5-layout='sampling'] .s5-tertiary {
  left: 39%;
  bottom: 7%;
  width: 21%;
  height: 20%;
}
.s5-artpiece[data-s5-layout='sampling'] .s5-canvas {
  left: -2%;
  right: auto;
  top: 35%;
  width: 52%;
}
.s5-artpiece[data-s5-layout='ornament'] {
  background: linear-gradient(145deg, #482649, #251326);
  border-radius: 36px 3px 3px 3px;
}
.s5-artpiece[data-s5-layout='ornament'] .s5-primary {
  left: 6%;
  top: 7%;
  width: 59%;
  height: 69%;
  border-radius: 29px 29px 3px 3px;
}
.s5-artpiece[data-s5-layout='ornament'] .s5-secondary {
  right: 5%;
  bottom: 7%;
  width: 37%;
  height: 25%;
}
.s5-artpiece[data-s5-layout='ornament'] .s5-tertiary {
  left: 8%;
  bottom: 5%;
  width: 32%;
  height: 22%;
}
.s5-artpiece[data-s5-layout='ornament'] .s5-canvas {
  right: -4%;
  top: 7%;
  width: 57%;
}
.s5-artpiece[data-s5-layout='field'] {
  background: #e5d8ce;
  border-radius: 3px 3px 38px 3px;
}
.s5-artpiece[data-s5-layout='field'] .s5-primary {
  left: 4%;
  top: 9%;
  width: 53%;
  height: 83%;
  border-radius: 2px 30px 2px 2px;
}
.s5-artpiece[data-s5-layout='field'] .s5-secondary {
  right: 4%;
  bottom: 5%;
  width: 36%;
  height: 24%;
}
.s5-artpiece[data-s5-layout='field'] .s5-tertiary {
  right: 6%;
  left: auto;
  top: 5%;
  bottom: auto;
  width: 19%;
  height: 16%;
}
.s5-artpiece[data-s5-layout='field'] .s5-canvas {
  right: -3%;
  top: 18%;
  width: 58%;
}
.s5-artpiece[data-s5-layout='sculpture'] {
  background: radial-gradient(ellipse at 21% 25%, #754f76, #28162d 65%);
  border-radius: 3px 36px 3px 36px;
}
.s5-artpiece[data-s5-layout='sculpture'] .s5-primary {
  left: 34%;
  top: 7%;
  width: 62%;
  height: 73%;
  border-radius: 2px 30px 2px 2px;
}
.s5-artpiece[data-s5-layout='sculpture'] .s5-secondary {
  right: 4%;
  bottom: 5%;
  width: 30%;
  height: 20%;
}
.s5-artpiece[data-s5-layout='sculpture'] .s5-tertiary {
  left: 30%;
  bottom: 5%;
  width: 31%;
  height: 23%;
}
.s5-artpiece[data-s5-layout='sculpture'] .s5-canvas {
  left: -5%;
  right: auto;
  top: 17%;
  width: 57%;
}
.s5-artpiece[data-s5-layout='construction'] {
  background: linear-gradient(130deg, #efe2d0, #c8aebb);
  border-radius: 36px 3px 36px 3px;
}
.s5-artpiece[data-s5-layout='construction'] .s5-primary {
  left: 5%;
  top: 6%;
  width: 74%;
  height: 60%;
  border-radius: 3px 28px 3px 3px;
}
.s5-artpiece[data-s5-layout='construction'] .s5-secondary {
  left: 5%;
  right: auto;
  bottom: 7%;
  width: 30%;
  height: 29%;
}
.s5-artpiece[data-s5-layout='construction'] .s5-tertiary {
  left: 37%;
  bottom: 8%;
  width: 18%;
  height: 23%;
}
.s5-artpiece[data-s5-layout='construction'] .s5-canvas {
  right: -8%;
  top: 26%;
  width: 67%;
}
.s5-artpiece[data-s5-layout='print'] {
  background: #2e1934;
  border-radius: 26px 26px 3px 3px;
}
.s5-artpiece[data-s5-layout='print'] .s5-primary {
  left: 4%;
  top: 8%;
  width: 66%;
  height: 70%;
  border-radius: 2px 26px 2px 2px;
}
.s5-artpiece[data-s5-layout='print'] .s5-secondary {
  left: 5%;
  right: auto;
  bottom: 6%;
  width: 32%;
  height: 24%;
}
.s5-artpiece[data-s5-layout='print'] .s5-tertiary {
  left: 40%;
  bottom: 7%;
  width: 21%;
  height: 22%;
}
.s5-artpiece[data-s5-layout='print'] .s5-canvas {
  right: -3%;
  top: 32%;
  width: 53%;
}
/* Framing is presentation only: all new-technique counts come from the renderers. */
.s5-artpiece[data-s5-effect='thickness-glass'] .s5-primary {
  border-radius: 40% 4px 4px 4px;
}
.s5-artpiece[data-s5-effect='enamel-cellwork'] .s5-primary {
  top: 5%;
  height: 86%;
}
.s5-artpiece[data-s5-effect='aperture-diffraction'] .s5-primary {
  width: 66%;
  top: 12%;
  height: 72%;
}
.s5-artpiece[data-s5-effect='droste-medallion'] .s5-canvas {
  width: 54%;
  top: 35%;
  left: -3%;
}
.s5-artpiece[data-s5-effect='lenticular-weave'] .s5-canvas {
  top: 38%;
  left: 0%;
  width: 54%;
}
.s5-artpiece[data-s5-effect='spherical-chart'] .s5-canvas {
  width: 57%;
  left: 0%;
  top: 32%;
}
.s5-artpiece[data-s5-effect='guilloche-rosette'] .s5-canvas {
  width: 63%;
  right: -8%;
}
.s5-artpiece[data-s5-effect='hilbert-ribbon'] .s5-canvas {
  width: 49%;
  right: 0%;
  top: 4%;
}
.s5-artpiece[data-s5-effect='lsystem-grove'] .s5-canvas {
  width: 60%;
  right: -2%;
  top: 0%;
}
.s5-artpiece[data-s5-effect='curl-flow-strokes'] .s5-canvas {
  top: 15%;
}
.s5-artpiece[data-s5-effect='chladni-plate'] .s5-canvas {
  width: 55%;
  right: 0%;
  top: 22%;
}
.s5-artpiece[data-s5-effect='dla-crystal'] .s5-canvas {
  width: 63%;
  top: 10%;
}
.s5-artpiece[data-s5-effect='torus-knot'] .s5-canvas {
  width: 62%;
  left: -3%;
  top: 10%;
}
.s5-artpiece[data-s5-effect='helicoid-ramp'] .s5-canvas {
  width: 60%;
  left: -2%;
  top: 1%;
}
.s5-artpiece[data-s5-effect='superquadric-gem'] .s5-canvas {
  top: 8%;
}
.s5-artpiece[data-s5-effect='metaball-union'] .s5-canvas {
  width: 63%;
  top: 6%;
}
.s5-artpiece[data-s5-effect='pantograph-linkage'] .s5-canvas {
  width: 66%;
  right: -5%;
  top: 28%;
}
.s5-artpiece[data-s5-effect='catenary-mobile'] .s5-canvas {
  width: 64%;
  right: -5%;
  top: 24%;
}
.s5-artpiece[data-s5-effect='contour-atlas'] .s5-canvas {
  right: 0%;
  top: 28%;
  width: 56%;
}
.s5-artpiece[data-s5-effect='distance-inktrap'] .s5-canvas {
  top: 28%;
  width: 56%;
}
/* Six screenshot-evidenced material repairs. Reserve a separate inset column:
   primary right edge 72.5%; canvas left edge 73%. Photos also paint above it.
   This replaces the old 56%-wide panel overlapping the architectural subject. */
.s5-artpiece[data-s5-layout='material'] .s5-primary {
  left: 4.5%;
  top: 6.5%;
  width: 68%;
  height: 82%;
  border-radius: 3px 25px 3px 3px;
}
.s5-artpiece[data-s5-layout='material'] .s5-secondary {
  right: 3%;
  bottom: 6%;
  width: 21%;
  height: 22%;
  border-radius: 14px 2px 2px 2px;
}
.s5-artpiece[data-s5-layout='material'] .s5-tertiary {
  left: 9%;
  bottom: 3%;
  width: 19%;
  height: 15%;
}
.s5-artpiece[data-s5-layout='material'] .s5-canvas {
  left: auto;
  right: 2%;
  top: 8.5%;
  width: 25%;
  height: auto;
  z-index: 1;
}
@media (max-width: 760px), (any-pointer: coarse) {
  .s5-artpiece {
    box-shadow: 0 8px 18px #351c3417;
    border-radius: 3px 24px 3px 15px;
  }
  .s5-artpiece .s5-tertiary {
    border-width: 2px;
  }
  .s5-artpiece :is(.s5-primary, .s5-secondary) {
    box-shadow: 0 5px 10px #180e2138;
  }
}
@media (prefers-reduced-motion: reduce) {
  .s5-artpiece,
  .s5-artpiece * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  .s5-artpiece {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .s5-artpiece .s5-canvas,
  .s5-artpiece .s5-hairline {
    display: none;
  }
  .s5-artpiece :is(.s5-primary, .s5-secondary, .s5-tertiary) {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}

/* Screenshot-evidenced field repairs: reserve a separate ornament column.
   No changes to the other three field mechanisms or to the shared clock. */
.s5-artpiece:is([data-s5-effect='reaction-enamel'], [data-s5-effect='domain-marble'], [data-s5-effect='chladni-plate']) .s5-primary {
  left: 4%; top: 8%; width: 66%; height: 83%;
}
.s5-artpiece:is([data-s5-effect='reaction-enamel'], [data-s5-effect='domain-marble'], [data-s5-effect='chladni-plate']) .s5-secondary {
  right: 3%; bottom: 5%; width: 23%; height: 22%;
}
.s5-artpiece:is([data-s5-effect='reaction-enamel'], [data-s5-effect='domain-marble'], [data-s5-effect='chladni-plate']) .s5-canvas {
  left: auto; right: 2%; top: 22%; width: 26%; z-index: 1;
}

/* FAQ metaballs keep their transparent field in the left inset, clear of
   the primary photo starting at 34%. No other sculpture layout changes. */
.s5-artpiece[data-s5-effect='metaball-union'] .s5-canvas {
  left: 1%; right: auto; top: 16%; width: 32%; z-index: 1;
}
/* The 16:9 desktop chapter clipped the taller Enneper canvas at its bottom.
   Keep the already complete phone/coarse composition unchanged. */
@media (min-width: 761px) and (any-pointer: fine) and (not (any-pointer: coarse)) {
  .s5-artpiece[data-s5-effect='enneper-surface'] .s5-canvas {
    left: 0%; right: auto; top: 16%; width: 34%;
  }
}
/* Miura alone receives a separate right column: photo ends at 67%, canvas
   starts at 68%. The existing automatic fold renderer is untouched. */
.s5-artpiece[data-s5-effect='miura-sheet'] .s5-primary {
  width: 62%;
}
.s5-artpiece[data-s5-effect='miura-sheet'] .s5-canvas {
  left: auto; right: 2%; top: 28%; width: 30%; z-index: 1;
}

/* The care ink contour is a small separate ornament, not an opaque overlay. */
.s5-artpiece[data-s5-effect='distance-inktrap'] .s5-primary {
  left: 4%; top: 8%; width: 66%; height: 83%;
}
.s5-artpiece[data-s5-effect='distance-inktrap'] .s5-secondary {
  right: 3%; bottom: 5%; width: 23%; height: 22%;
}
.s5-artpiece[data-s5-effect='distance-inktrap'] .s5-canvas {
  left: auto; right: 2%; top: 22%; width: 26%; z-index: 1;
}