/* Consistent hand-inked outlines for every decorative section transition. */

/* Scallops use a cream centre with a proper ink ring. */
.section-divider--scallop::before {
  background: radial-gradient(circle at 21px 0,
    var(--cream) 0 18px,
    var(--ink) 18.5px 22px,
    transparent 22.5px) 0 0 / 42px 34px repeat-x;
}

/* The dark ticket shape is its own outline; a solid lower shadow sharpens it. */
.section-divider--notch::before {
  filter: drop-shadow(0 4px 0 var(--ink));
}

/* Keep the entire tilted border inside its band, including the far-left end. */
.section-divider--tilt::before {
  top: -48px;
  height: 74px;
  border-bottom: 4px solid var(--ink);
}

/* Give clipped shapes extra room so their ink shadows are never cut off. */
.section-divider--pennant {
  height: 64px;
}

.section-divider--pennant::before {
  bottom: 6px;
  filter: drop-shadow(0 4px 0 var(--ink));
}

.section-divider--fold {
  height: 74px;
}

.section-divider--fold::before {
  bottom: 6px;
  filter: drop-shadow(0 4px 0 var(--ink));
}

/* Existing large cathedral curves now share the same ink treatment. */
.arch-crown path {
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill;
}

@media (max-width: 700px) {
  .section-divider--scallop::before {
    background: radial-gradient(circle at 14px 0,
      var(--cream) 0 11.5px,
      var(--ink) 12px 15px,
      transparent 15.5px) 0 0 / 28px 24px repeat-x;
  }

  .section-divider--tilt::before {
    top: -35px;
    height: 55px;
    border-bottom-width: 3px;
  }

  .section-divider--pennant { height: 46px; }
  .section-divider--pennant::before { bottom: 6px; filter: drop-shadow(0 3px 0 var(--ink)); }

  .section-divider--fold { height: 50px; }
  .section-divider--fold::before { bottom: 6px; filter: drop-shadow(0 3px 0 var(--ink)); }

  .arch-crown path { stroke-width: 2.5; }
}