/* Плейн під усім контентом (строчка позаду, контент зверху) */
.stitch-plane{
z-index: 1;
  position: absolute;
  top: 0; left: 0; width: 100%;
  height: 0;                 /* виставляє JS */
  z-index: 0;                /* контент вище */
  pointer-events: none;
}

/* Шар з хаотичною лінією від низу hero-image до низу сторінки */
.chaos-layer{
  position: absolute;
  left: 0; right: 0; top: 0; height: 0;  /* виставляє JS */
  pointer-events: none;
}

.chaos-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Власне «нитка-стіжки» */
.chaos-path{
  fill: none;
  stroke: var(--thread-color, #9d5248);
  stroke-width: var(--thread-width, 3px);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* Стіжки: довжина / проміжок */
  stroke-dasharray: var(--stitch-dash-len, 18px) var(--stitch-gap-len, 12px);
}

/* Налаштування */
:root{
  --thread-color: #9d5248;
  --thread-width: 3px;
  --stitch-dash-len: 18px;
  --stitch-gap-len: 12px;

  --edge-margin: 24px;
  --no-go-center: 620px;   /* ширина центральної «заборони» у фазі 2 */
  --avoid-pad-x: 36px;     /* буфер навколо чутливих елементів */
  --avoid-pad-y: 24px;

  /* петлі */
  --loop-r-min: 14px;
  --loop-r-max: 32px;
}

/* (не обов'язково) якщо треба, щоб крізь main було видно нитку */
main{ background: transparent !important; }