/*
 * Solid divider outlines.
 *
 * Each clipped divider is built from two real shapes: an ink silhouette and
 * an inset colour layer. Unlike a drop shadow, the outline lives inside the
 * divider band and cannot be clipped off at the section boundary.
 */
.section-divider__shape {
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.section-divider--notch::before,
.section-divider--notch .section-divider__shape {
  clip-path: polygon(0 0, 31% 0, 37% 100%, 63% 100%, 69% 0, 100% 0);
}

.section-divider--notch::before {
  z-index: 0;
  background: var(--ink);
  filter: none;
}

.section-divider--notch .section-divider__shape {
  inset: 0 0 5px;
  background: var(--ink-2);
}

.section-divider--tilt::before,
.section-divider--tilt .section-divider__shape {
  left: -4%;
  width: 108%;
  height: 74px;
  border: 0;
  transform: rotate(-1.35deg);
  transform-origin: 50% 100%;
}

.section-divider--tilt::before {
  top: -48px;
  z-index: 0;
  background: var(--ink);
}

.section-divider--tilt .section-divider__shape {
  top: -53px;
  background: var(--yellow-band);
}

.section-divider--pennant::before,
.section-divider--pennant .section-divider__shape {
  clip-path: polygon(0 0, 100% 0, 100% 14%, 58% 14%, 50% 100%, 42% 14%, 0 14%);
}

.section-divider--pennant::before {
  inset: 0;
  z-index: 0;
  background: var(--ink);
  filter: none;
}

.section-divider--pennant .section-divider__shape {
  inset: 0 0 5px;
  background: var(--brand);
}

.section-divider--pennant::after,
.section-divider--fold::after {
  z-index: 2;
}

.section-divider--fold::before,
.section-divider--fold .section-divider__shape {
  clip-path: polygon(0 0, 100% 0, 100% 16%, 74% 100%, 43% 42%, 0 84%);
}

.section-divider--fold::before {
  inset: 0;
  z-index: 0;
  background: var(--ink);
  filter: none;
}

.section-divider--fold .section-divider__shape {
  inset: 0 0 5px;
  background: var(--blue);
}

/* The large SVG curves also get an inside-safe hand-inked edge. */
.arch-crown {
  filter: drop-shadow(0 4px 0 var(--ink));
}

.arch-crown path {
  stroke: var(--ink);
  stroke-width: 3px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill;
}

@media (max-width: 700px) {
  .section-divider--notch::before,
  .section-divider--notch .section-divider__shape {
    clip-path: polygon(0 0, 22% 0, 30% 100%, 70% 100%, 78% 0, 100% 0);
  }

  .section-divider--notch .section-divider__shape { bottom: 4px; }

  .section-divider--tilt::before,
  .section-divider--tilt .section-divider__shape {
    height: 55px;
    transform: rotate(-.9deg);
  }

  .section-divider--tilt::before { top: -35px; }
  .section-divider--tilt .section-divider__shape { top: -39px; }

  .section-divider--pennant::before,
  .section-divider--pennant .section-divider__shape {
    clip-path: polygon(0 0, 100% 0, 100% 13%, 64% 13%, 50% 100%, 36% 13%, 0 13%);
  }

  .section-divider--pennant .section-divider__shape { bottom: 4px; }

  .section-divider--fold::before,
  .section-divider--fold .section-divider__shape {
    clip-path: polygon(0 0, 100% 0, 100% 18%, 74% 100%, 39% 40%, 0 80%);
  }

  .section-divider--fold .section-divider__shape { bottom: 4px; }
  .arch-crown { filter: drop-shadow(0 3px 0 var(--ink)); }
  .arch-crown path { stroke-width: 2.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .section-divider--tilt .section-divider__shape { transform: none; }
}