/* The marks sit outside the type so all twelve share the same baseline. */
.signature-treatment {
  --mark: #dedbd5;
  --hairline: linear-gradient(var(--mark), var(--mark));
  --side-space: 12px;
  display: inline-block;
  position: relative;
  vertical-align: top;
  white-space: nowrap;
}
.signature-treatment::before,
.signature-treatment::after {
  content: "";
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  background-repeat: no-repeat;
}
[data-treatment="rectangle"]::before,
[data-treatment="rounded-frame"]::before,
[data-treatment="offset-frame"]::before {
  inset: -7px calc(-1 * var(--side-space));
  border: 1px solid var(--mark);
}
[data-treatment="rectangle"]::before { border-color: white; }
[data-treatment="rounded-frame"]::before { border-radius: 999px; }
[data-treatment="crop-marks"]::before {
  inset: -7px calc(-1 * var(--side-space));
  background-image: var(--hairline), var(--hairline), var(--hairline), var(--hairline),
                    var(--hairline), var(--hairline), var(--hairline), var(--hairline);
  background-position: top left, top left, top right, top right,
                       bottom left, bottom left, bottom right, bottom right;
  background-size: 9px 1px, 1px 6px, 9px 1px, 1px 6px,
                   9px 1px, 1px 6px, 9px 1px, 1px 6px;
}
[data-treatment="side-brackets"]::before,
[data-treatment="side-brackets"]::after {
  top: 1px;
  bottom: 1px;
  width: 4px;
  border-block: 1px solid var(--mark);
}
[data-treatment="side-brackets"]::before { right: calc(100% + 8px); border-left: 1px solid var(--mark); }
[data-treatment="side-brackets"]::after { left: calc(100% + 8px); border-right: 1px solid var(--mark); }
[data-treatment="fine-underline"]::after {
  inset: auto 0 -6px;
  height: 1px;
  background: linear-gradient(90deg, #fff 0 10%, #88847d 10% 100%);
}
[data-treatment="diamond"]::before {
  width: 60px;
  height: 1px;
  top: calc(100% + 6px);
  left: calc(50% - 30px);
  background: linear-gradient(90deg, #96928c 0 39%, transparent 39% 61%, #96928c 61%);
}
[data-treatment="diamond"]::after {
  width: 5px;
  height: 5px;
  top: calc(100% + 4px);
  left: calc(50% - 2.5px);
  background: var(--mark);
  transform: rotate(45deg);
}
[data-treatment="offset-frame"]::after {
  inset: -3px -16px -11px -8px;
  border-right: 1px solid #939089;
  border-bottom: 1px solid #939089;
}
[data-treatment="splice-marks"]::before,
[data-treatment="splice-marks"]::after {
  width: 5px;
  height: 11px;
  top: calc(50% - 5.5px);
  border-inline: 1px solid var(--mark);
  transform: skewX(-24deg);
}
[data-treatment="splice-marks"]::before { right: calc(100% + 9px); }
[data-treatment="splice-marks"]::after { left: calc(100% + 9px); }
[data-treatment="center-tick"]::before {
  left: calc(50% - 26px);
  top: -9px;
  width: 52px;
  height: 5px;
  background-image: var(--hairline), var(--hairline);
  background-size: 100% 1px, 1px 5px;
  background-position: top center;
}
[data-treatment="perforations"]::before,
[data-treatment="perforations"]::after {
  --hole: linear-gradient(90deg, transparent 0 1px, #dfdcd6 1px 5px, transparent 5px);
  width: 6px;
  height: 17px;
  top: calc(50% - 8.5px);
  background-image: var(--hole), var(--hole), var(--hole);
  background-size: 6px 3px;
  background-position: top center, center, bottom center;
}
[data-treatment="perforations"]::before { right: calc(100% + 8px); }
[data-treatment="perforations"]::after { left: calc(100% + 8px); }
[data-treatment="opposing-corners"]::before,
[data-treatment="opposing-corners"]::after {
  width: 23%;
  height: 8px;
}
[data-treatment="opposing-corners"]::before {
  left: calc(-1 * var(--side-space));
  top: -7px;
  border-left: 1px solid var(--mark);
  border-top: 1px solid var(--mark);
}
[data-treatment="opposing-corners"]::after {
  right: calc(-1 * var(--side-space));
  bottom: -7px;
  border-right: 1px solid var(--mark);
  border-bottom: 1px solid var(--mark);
}
[data-treatment="crosshairs"]::before,
[data-treatment="crosshairs"]::after {
  width: 9px;
  height: 9px;
  top: calc(50% - 4.5px);
  background-image: var(--hairline), var(--hairline);
  background-size: 9px 1px, 1px 9px;
  background-position: center;
}
[data-treatment="crosshairs"]::before { right: calc(100% + 8px); }
[data-treatment="crosshairs"]::after { left: calc(100% + 8px); }