@font-face {
  font-family: "Sjim Stift";
  src: url("assets/fonts/sjim-stift.ttf") format("truetype");
  font-display: swap;
}

.leiding-portretten { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 30px; }
.leiding-beeld { position: relative; }
.leider-portret { position: relative; }
.leiding-beeld::after, .leider-portret::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: var(--potlood, var(--potlood-grijs, #736d68));
  -webkit-mask: var(--potlood-rand) center / 100% 100% no-repeat;
  mask: var(--potlood-rand) center / 100% 100% no-repeat;
}
.leiding-beeld, .leider-portret { --lint-vlak: #b9efcf; --lint-rand: #205e3f; --lint-staart: #63bc88; }
.takleiding-label {
  position: absolute;
  top: 6%;
  left: 4%;
  z-index: 3;
  padding: 7px 16px 8px;
  background: var(--potlood, var(--potlood-grijs, #736d68));
  color: var(--papier, #fffdf7);
  font-family: "Sjim Stift", "Nunito Sans", sans-serif;
  font-size: 17px;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  transform: rotate(-4deg);
  clip-path: polygon(2% 0, 100% 5%, 97% 94%, 3% 100%, 0 52%);
  pointer-events: none;
}
.takleiding-label::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed currentColor;
  opacity: .7;
}
.jogis { --lint-vlak: #fff4a6; --lint-rand: #705414; --lint-staart: #e1c65b; }
.givers { --lint-vlak: #b8e0f4; --lint-rand: #174f6a; --lint-staart: #78b8da; }
.jin { --lint-vlak: #f3c4c1; --lint-rand: #761f1b; --lint-staart: #d98783; }
.groepsleiding { --lint-vlak: #dedbd7; --lint-rand: #49433f; --lint-staart: #aaa29b; }
.jogis .leiding-beeld, .jogis .leider-portret,
.givers .leiding-beeld, .givers .leider-portret,
.jin .leiding-beeld, .jin .leider-portret,
.groepsleiding .leiding-beeld { --lint-vlak: inherit; --lint-rand: inherit; --lint-staart: inherit; }

.totemlint {
  position: absolute;
  left: 3%;
  bottom: 6%;
  width: 94%;
  isolation: isolate;
  transform: rotate(-3deg);
  color: var(--lint-rand);
  font-family: "Sjim Stift", "Nunito Sans", sans-serif;
  font-size: 21px;
  font-weight: normal;
  line-height: 1.16;
  letter-spacing: 0;
  text-align: center;
  pointer-events: none;
}
.totemlint::before, .totemlint::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 15%;
  height: 82%;
  top: 29%;
  background: var(--lint-staart);
}
.totemlint::before { left: -3%; clip-path: polygon(0 0,100% 0,100% 100%,0 100%,22% 50%); }
.totemlint::after { right: -3%; clip-path: polygon(0 0,100% 0,78% 50%,100% 100%,0 100%); }
.totemlint > span {
  display: block;
  position: relative;
  padding: 12px 10px;
  border: 2px solid var(--lint-rand);
  background: var(--lint-vlak);
  white-space: normal;
  overflow-wrap: anywhere;
}
.totemlint > span::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--lint-rand);
  opacity: .75;
}
.leider-portret .totemlint { font-size: 17px; }
.heeft-foto .leider-portret { padding: 0; }
.leider-portret > img { min-height: 0; }