/* ===========================================================================
   The decorative-overlay system.

   This replaces the original's 1443 `data-field-*-value` attributes. Every
   piece of art is an <img class="ornament"> whose position is given by custom
   properties set inline at the call site:

     <img class="ornament" src="images/leaf-1.webp" alt=""
          style="--w: 6%; --top: 4%; --start: 22%; --rot: 217deg;">

   So there is no bespoke CSS rule per flower, and the position of a flower
   lives next to the flower — which is what makes this editable by hand.

   Units are percentages of the section, not pixels. The original pinned art
   to a 1200px artboard and then re-stated every offset for five breakpoints;
   percentages scale for free and delete the breakpoints.

   Everything here is decorative: the container is aria-hidden and each image
   has an empty alt, so screen readers skip all of it.
   =========================================================================== */

.ornaments {
  position: absolute;
  inset: 0;
  z-index: var(--z-art-behind);
  pointer-events: none;

  /* This is what lets art hang outside its section without ever producing a
     horizontal scrollbar. `clip` (unlike `hidden`) creates no scroll
     container, and clip-margin says how far past the box paint may extend
     before it is cut. */
  overflow: clip;
  overflow-clip-margin: 25%;
}

.ornament {
  position: absolute;
  display: block;
  width: var(--w, auto);
  height: auto;

  /* Logical properties, never left/right: the page is RTL, so `start` is the
     right-hand side. Using physical sides here is how RTL layouts get
     mirrored wrong. */
  inset-block-start:  var(--top,    auto);
  inset-block-end:    var(--bottom, auto);
  inset-inline-start: var(--start,  auto);
  inset-inline-end:   var(--end,    auto);

  transform: translateX(var(--shift, 0)) rotate(var(--rot, 0deg));
  opacity: var(--op, 1);
  z-index: var(--layer, 0);
}

/* Horizontally centred art (the full-width torn bands, the mandalas). Set
   --w and this keeps it centred at every width, instead of hand-computing a
   --start offset that only holds at one viewport size.

   Centred by margin rather than by a 50% inset + translate: with both insets
   pinned to 0 and `margin-inline: auto`, the box centres itself regardless of
   writing direction, so there is no RTL sign to get wrong. */
.ornament--centred {
  inset-inline: 0;
  margin-inline: auto;
}

/* Art that must sit in front of content rather than behind it: the wreath
   framing the couple photo, and the flowers overhanging the hero card.
   These are allowed to spill well past their box, so they are not clipped —
   the page-level `overflow-x: clip` is what stops them causing scroll. */
.ornaments--front {
  z-index: var(--z-art-front);
  overflow: visible;
}