/* ============================================================
   L'origine du thé — Pattern tokens
   青海波 · seigaiha — the "calm sea" wave motif.
   Overlapping fans of opaque discs + thin concentric rings — the
   classic blue-and-white porcelain look (cf. hollands-spoor.com,
   la-cascade.io). Authored as crisp inline-SVG data-URIs so the
   motif stays sharp at any scale and reads as true overlapping
   scallops (not flat arcs).

   Surface backdrop (paints BEHIND content, never clips). Pair with a
   surface background-color; scale the motif with --seigaiha-size
   (tile aspect ≈ 1:0.962 — height follows automatically):
     <section class="odt-seigaiha-bg"> … </section>                       (céladon)
     <section class="odt-seigaiha-bg odt-seigaiha-bg--sage"> … </section>
     <section class="odt-seigaiha-bg odt-seigaiha-bg--ivory"> … </section>   (for dark surfaces)

   Recolourable line variant — single-tone arcs follow --seigaiha-ink
   (default jade); the disc fill is dropped so any ink reads cleanly:
     <div class="odt-seigaiha" style="--seigaiha-ink:var(--clay-400)"></div>
   ============================================================ */

:root {
  --seigaiha-size: 240px;

  /* baked colourways — full porcelain wave image, ready for background-image */
  --seigaiha-celadon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27230.4%27%20height%3D%27221.7%27%20viewBox%3D%270%200%20230.4%20221.7%27%3E%3Cdefs%3E%3Cg%20id%3D%27w%27%20fill%3D%27none%27%20stroke%3D%27%238FB7A2%27%20stroke-width%3D%276%27%3E%3Ccircle%20r%3D%27106.7%27%20fill%3D%27%23F2F8F4%27%20stroke-width%3D%277%27%2F%3E%3Ccircle%20r%3D%2781%27%20stroke-width%3D%277%27%2F%3E%3Ccircle%20r%3D%2755.3%27%20stroke-width%3D%276%27%2F%3E%3Ccircle%20r%3D%2732.5%27%20stroke-width%3D%275%27%2F%3E%3Ccircle%20r%3D%2713.2%27%20stroke-width%3D%275%27%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27229.9%27%20y%3D%270.7%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27114.9%27%20y%3D%2755.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27-114.9%27%20y%3D%2755.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%270%27%20y%3D%27111.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27229.9%27%20y%3D%27111.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27114.9%27%20y%3D%27166.4%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27-114.9%27%20y%3D%27166.4%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%270%27%20y%3D%27222.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27345.1%27%20y%3D%27166.4%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27229.9%27%20y%3D%27222.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27114.9%27%20y%3D%27277.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27-114.9%27%20y%3D%27277.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27345.1%27%20y%3D%27277.2%27%2F%3E%3C%2Fsvg%3E"); /* @kind other */
  --seigaiha-sage:    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27230.4%27%20height%3D%27221.7%27%20viewBox%3D%270%200%20230.4%20221.7%27%3E%3Cdefs%3E%3Cg%20id%3D%27w%27%20fill%3D%27none%27%20stroke%3D%27%236E8E87%27%20stroke-width%3D%276%27%3E%3Ccircle%20r%3D%27106.7%27%20fill%3D%27%23E7EFEB%27%20stroke-width%3D%277%27%2F%3E%3Ccircle%20r%3D%2781%27%20stroke-width%3D%277%27%2F%3E%3Ccircle%20r%3D%2755.3%27%20stroke-width%3D%276%27%2F%3E%3Ccircle%20r%3D%2732.5%27%20stroke-width%3D%275%27%2F%3E%3Ccircle%20r%3D%2713.2%27%20stroke-width%3D%275%27%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27229.9%27%20y%3D%270.7%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27114.9%27%20y%3D%2755.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27-114.9%27%20y%3D%2755.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%270%27%20y%3D%27111.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27229.9%27%20y%3D%27111.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27114.9%27%20y%3D%27166.4%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27-114.9%27%20y%3D%27166.4%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%270%27%20y%3D%27222.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27345.1%27%20y%3D%27166.4%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27229.9%27%20y%3D%27222.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27114.9%27%20y%3D%27277.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27-114.9%27%20y%3D%27277.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27345.1%27%20y%3D%27277.2%27%2F%3E%3C%2Fsvg%3E"); /* @kind other */
  --seigaiha-ivory:   url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27230.4%27%20height%3D%27221.7%27%20viewBox%3D%270%200%20230.4%20221.7%27%3E%3Cdefs%3E%3Cg%20id%3D%27w%27%20fill%3D%27none%27%20stroke%3D%27rgba(243%2C246%2C242%2C0.5)%27%20stroke-width%3D%276%27%3E%3Ccircle%20r%3D%27106.7%27%20fill%3D%27%2333493F%27%20stroke-width%3D%277%27%2F%3E%3Ccircle%20r%3D%2781%27%20stroke-width%3D%277%27%2F%3E%3Ccircle%20r%3D%2755.3%27%20stroke-width%3D%276%27%2F%3E%3Ccircle%20r%3D%2732.5%27%20stroke-width%3D%275%27%2F%3E%3Ccircle%20r%3D%2713.2%27%20stroke-width%3D%275%27%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27229.9%27%20y%3D%270.7%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27114.9%27%20y%3D%2755.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27-114.9%27%20y%3D%2755.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%270%27%20y%3D%27111.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27229.9%27%20y%3D%27111.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27114.9%27%20y%3D%27166.4%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27-114.9%27%20y%3D%27166.4%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%270%27%20y%3D%27222.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27345.1%27%20y%3D%27166.4%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27229.9%27%20y%3D%27222.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27114.9%27%20y%3D%27277.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27-114.9%27%20y%3D%27277.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27345.1%27%20y%3D%27277.2%27%2F%3E%3C%2Fsvg%3E"); /* @kind other */

  /* monochrome line wave — used as a MASK for the recolourable block */
  --seigaiha-line:    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27230.4%27%20height%3D%27221.7%27%20viewBox%3D%270%200%20230.4%20221.7%27%3E%3Cdefs%3E%3Cg%20id%3D%27w%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%278%27%3E%3Ccircle%20r%3D%27106.7%27%20stroke-width%3D%278%27%2F%3E%3Ccircle%20r%3D%2781%27%20stroke-width%3D%278%27%2F%3E%3Ccircle%20r%3D%2755.3%27%20stroke-width%3D%277%27%2F%3E%3Ccircle%20r%3D%2732.5%27%20stroke-width%3D%276%27%2F%3E%3Ccircle%20r%3D%2713.2%27%20stroke-width%3D%276%27%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27229.9%27%20y%3D%270.7%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27114.9%27%20y%3D%2755.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27-114.9%27%20y%3D%2755.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%270%27%20y%3D%27111.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27229.9%27%20y%3D%27111.3%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27114.9%27%20y%3D%27166.4%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27-114.9%27%20y%3D%27166.4%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%270%27%20y%3D%27222.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27345.1%27%20y%3D%27166.4%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27229.9%27%20y%3D%27222.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27114.9%27%20y%3D%27277.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27-114.9%27%20y%3D%27277.2%27%2F%3E%3Cuse%20href%3D%27%23w%27%20x%3D%27345.1%27%20y%3D%27277.2%27%2F%3E%3C%2Fsvg%3E"); /* @kind other */
}

/* Surface backdrop — colourways only swap the image (no text-colour bleed). */
.odt-seigaiha-bg {
  background-image: var(--seigaiha-celadon);
  background-size: var(--seigaiha-size) calc(var(--seigaiha-size) * 0.962);
  background-repeat: repeat;
  background-position: center top;
}
.odt-seigaiha-bg--sage  { background-image: var(--seigaiha-sage); }
.odt-seigaiha-bg--ivory { background-image: var(--seigaiha-ivory); }   /* pale — for dark surfaces */

/* Recolourable line block — the ink paints through a seigaiha mask, so it
   recolours to any single hue. Override the jade default with --seigaiha-ink. */
.odt-seigaiha {
  --_ink: var(--seigaiha-ink, var(--celadon-500));
  background-color: var(--_ink);
  -webkit-mask-image: var(--seigaiha-line);
          mask-image: var(--seigaiha-line);
  -webkit-mask-size: var(--seigaiha-size) calc(var(--seigaiha-size) * 0.962);
          mask-size: var(--seigaiha-size) calc(var(--seigaiha-size) * 0.962);
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-position: center top;
          mask-position: center top;
}