/* A small kraft-paper name strip over a cut piece of black paper. */
@media screen {
  .hero .preacher-label {
    position: relative;
    z-index: 0;
    isolation: isolate;
    width: fit-content;
    max-width: calc(100% - 10px);
    padding: 0.2em 0.52em 0.26em;
    color: #21170f;
    background: transparent;
    border: 0;
    box-shadow: none;
    line-height: 1.12;
    text-shadow: 0 1px 0 #fff1d33b;
    transform: none;
  }

  .hero .preacher-label::before,
  .hero .preacher-label::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .hero .preacher-label::before {
    z-index: -1;
    background:
      repeating-linear-gradient(8deg, transparent 0 5px, #57341806 5px 6px),
      repeating-linear-gradient(96deg, transparent 0 9px, #fff3d70b 9px 10px),
      linear-gradient(115deg, #d7aa71, #c7975f 48%, #c18c51);
    clip-path: polygon(1% 4%, 13% 2%, 26% 4%, 43% 1%, 59% 3%, 76% 0, 91% 3%, 99% 2%, 100% 18%, 99% 42%, 100% 64%, 99% 98%, 85% 97%, 68% 100%, 47% 97%, 28% 100%, 14% 98%, 0 99%, 1% 73%, 0 51%, 1% 26%);
  }

  .hero .preacher-label::after {
    z-index: -2;
    background: linear-gradient(110deg, #171815, #24231e);
    clip-path: polygon(0 2%, 19% 0, 40% 2%, 63% 0, 82% 3%, 100% 1%, 99% 35%, 100% 71%, 98% 99%, 75% 97%, 55% 100%, 31% 98%, 13% 100%, 1% 97%, 0 62%, 1% 29%);
    transform: translate(6px, 6px) rotate(-0.9deg);
  }
}

@media screen and (max-width: 640px) {
  .hero .preacher-label {
    padding-inline: 0.45em;
  }
}

@media (forced-colors: active) {
  .hero .preacher-label {
    color: CanvasText;
    background: Canvas;
    border: 1px solid CanvasText;
    text-shadow: none;
  }
  .hero .preacher-label::before,
  .hero .preacher-label::after {
    display: none;
  }
}