/* The seam: a low ledge of the gates' marble jaali (a pierced lattice between two gold-lined
   rails), laid across every join between sections and along the foot of the page, so the
   sections read as one garden.

   Each seam is a line of no height between two sections (div.seam in index.html). The ledge
   lies across it, half over the section above and half over the one below, with a soft shadow
   on both, above everything in them (the sections make their own stacking contexts, the letter
   at 1); they show through its holes. It repeats across the card (assets/seam/garland.webp,
   made by assets-src/seam/build_seam.py so its ends meet unseen), each seam from a different
   place along it. The last one lies along the card's foot and spills onto the table.

   When a seam comes into view, a petal or two drops from it (js/seam.js). */

:root {
  /* the card's width, as base.css sets it, for sizing the seam wherever it is */
  --seam-card: min(100vw, max(75svh, 360px));
  --seam-h: min(var(--seam-card) * .13, 70px);
  /* how far words keep from a join, below it: past the ledge's lower edge */
  --seam-clear: calc(var(--seam-h) * .62);
}

html.is-tablet { --seam-card: 100vw; }

.seam {
  position: relative;
  z-index: 5;
  height: 0;
  pointer-events: none;
}

.seam-g,
.seam-p {
  position: absolute;
  left: 0;
  right: 0;
}

.seam-g {
  top: calc(var(--seam-h) / -2);
  height: var(--seam-h);
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: var(--seam-x, 50%) 0;
  filter: drop-shadow(0 calc(var(--seam-h) * .05) calc(var(--seam-h) * .06) rgba(74, 40, 40, .34));
}

/* each seam from a different place along the ledge */
.card > .seam:nth-of-type(3n + 1) { --seam-x: 18%; }
.card > .seam:nth-of-type(3n + 2) { --seam-x: 71%; }
.card > .seam:nth-of-type(3n) { --seam-x: 44%; }

/* the petals that drop from it */
.seam-p { top: 0; height: 0; }

.seam-petal {
  position: absolute;
  left: 0;
  top: 0;
  perspective: 300px;
}

.seam-petal b { display: block; transform-style: preserve-3d; }
.seam-petal img { width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgba(74, 40, 40, .28)); }

/* words close below a join keep clear of the ledge */
.ev-head { margin-top: var(--seam-clear); }
.rs-head { margin-top: var(--seam-clear); }