/*
 * Organic underline utility
 *
 * Usage: <span class="underline-organic">Text, der unterstrichen wird</span>
 *
 * The span must remain inline. `box-decoration-break: clone` gives every
 * wrapped line its own background and lower padding, so the stroke never
 * measures or decorates the complete heading block. The optional `--soft`
 * modifier is a fixed second drawing; variants are deliberate, never random.
 */

.underline-organic {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: .22em;
  background-image: url('../../system/illustrations/strokes/underline-wave-01.svg');
  background-position: left calc(100% - .02em);
  background-repeat: repeat-x;
  background-size: 3.2em .28em;
  text-decoration: none;
}

.underline-organic--soft {
  background-image: url('../../system/illustrations/strokes/underline-wave-02.svg');
}