/*
 * Torn edge — a ripped-paper border at the bottom of a section, coloured like the section below.
 * The fibre rim is the same shape nudged up in white, so the tear reads as paper thickness.
 */

.torn-edge {
  --torn-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48 L0 17.2 L6 14.7 L18 19.8 L27 14.4 L33 16.4 L39 28.3 L48 20.3 L54 19.8 L63 14.5 L75 18.2 L97 17.1 L106 15.0 L115 17.7 L121 19.6 L137 20.8 L149 18.7 L161 17.0 L170 14.8 L186 22.8 L198 26.1 L220 18.2 L229 23.3 L235 21.6 L247 17.4 L263 19.8 L269 23.4 L275 14.6 L297 23.9 L309 21.2 L321 14.2 L330 20.1 L339 27.7 L348 18.0 L364 14.8 L386 22.8 L402 22.6 L418 23.9 L434 23.6 L443 15.5 L449 18.8 L461 22.8 L483 17.7 L492 20.9 L514 20.5 L530 23.0 L552 17.9 L558 18.8 L567 14.7 L576 15.1 L582 14.0 L588 23.5 L594 22.7 L603 20.3 L625 23.6 L641 23.9 L657 23.1 L669 21.4 L678 19.2 L700 17.6 L706 21.6 L712 21.0 L724 23.1 L733 19.3 L745 20.4 L754 22.1 L763 16.0 L769 23.9 L785 16.6 L797 18.5 L809 23.6 L818 15.0 L830 16.0 L852 22.4 L864 28.0 L870 23.1 L879 18.8 L891 14.9 L907 18.6 L913 21.2 L922 14.3 L938 28.1 L960 23.8 L972 15.6 L978 14.1 L984 19.3 L1000 23.9 L1009 14.3 L1031 16.4 L1043 19.4 L1049 23.1 L1065 20.6 L1087 18.2 L1109 15.3 L1131 14.2 L1140 20.1 L1149 15.7 L1155 19.6 L1177 19.3 L1183 28.8 L1192 16.8 L1214 24.5 L1220 18.4 L1242 20.1 L1254 18.5 L1270 19.1 L1292 22.8 L1304 23.2 L1313 28.4 L1319 17.9 L1328 18.3 L1340 21.8 L1349 23.4 L1361 15.4 L1377 16.2 L1393 22.8 L1402 15.6 L1424 18.0 L1436 17.2 L1440 18.0 L1440 48 Z'/%3E%3C/svg%3E");
  position: absolute;
  inset: auto 0 -1px;
  z-index: 1;
  height: clamp(1.25rem, 3vw, 2.75rem);
  pointer-events: none;
}
.torn-edge::before,
.torn-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--torn-shape) center / 100% 100% no-repeat;
  mask: var(--torn-shape) center / 100% 100% no-repeat;
}
.torn-edge::before {
  background: rgba(255, 255, 255, 0.75);
  transform: translateY(-3px);
}
.torn-edge::after {
  background: var(--torn-color, var(--paper));
}

.torn-edge--paper {
  --torn-color: var(--paper);
}
.torn-edge--cocoa {
  --torn-color: var(--cocoa);
}
.torn-edge--porcelain {
  --torn-color: var(--porcelain);
}
.torn-edge--ink {
  --torn-color: var(--ink);
}