/* Edge drawings for /vs-hiring (public/vs/edges.js): the home page's engravings in the margins,
   cropped by the screen edge and fading out before the text, plus two bands of cells. The
   drawings sit under the article so they never touch the words' contrast. */
main.legal{position:relative;z-index:1}
.rl8-fw{position:relative;z-index:1}
.vs-plates{position:absolute;inset:0 0 auto 0;overflow:hidden;pointer-events:none;z-index:0}
.vs-plate{position:absolute;width:min(46vw,640px);color:var(--mute);opacity:.75}
.vs-plate.l{left:calc(-1 * min(23vw,320px))}
.vs-plate.r{right:calc(-1 * min(23vw,320px))}
/* fade toward the text, so a line never runs into a word */
.vs-plate.l{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 92%);mask-image:linear-gradient(90deg,#000 45%,transparent 92%)}
.vs-plate.r{-webkit-mask-image:linear-gradient(270deg,#000 45%,transparent 92%);mask-image:linear-gradient(270deg,#000 45%,transparent 92%)}
.vs-plate svg,.vs-plate-inline svg{display:block;width:100%;height:auto}
/* the rope knot is a small drawing (the logo's knot), so it stays small and mostly on screen */
.vs-plate.small{width:260px}
.vs-plate.l.small{left:-70px}
.vs-plates .pa-f,.vs-plate-inline .pa-f{fill:var(--acc);stroke:none}
.vs-plates .pa-s,.vs-plate-inline .pa-s{stroke:var(--acc)}
.vs-plates .rope-body,.vs-plates .rope-gap,.vs-plate-inline .rope-body,.vs-plate-inline .rope-gap{stroke:var(--bg)}
.vs-plates .rope-run,.vs-plate-inline .rope-run{stroke:var(--acc);stroke-dasharray:7 93;animation:vsrun 7s linear infinite}
.vs-plates .g-cw,.vs-plate-inline .g-cw{animation:vsspin calc(60s / var(--k)) linear infinite}
.vs-plates .g-ccw,.vs-plate-inline .g-ccw{animation:vsspin calc(60s / var(--k)) linear infinite reverse}
.vs-plates .bal,.vs-plate-inline .bal{animation:vsbal 1.4s cubic-bezier(.45,0,.55,1) infinite alternate}
.vs-plates .mod,.vs-plate-inline .mod{animation:vsmod 7s cubic-bezier(.22,.68,.24,1) infinite}
@keyframes vsspin{to{rotate:360deg}}
@keyframes vsbal{from{rotate:-30deg}to{rotate:30deg}}
@keyframes vsmod{0%{translate:0 -110px;opacity:0}14%{opacity:1}42%,86%{translate:0 0;opacity:1}100%{translate:0 0;opacity:0}}
@keyframes vsrun{to{stroke-dashoffset:-100}}
/* a phone has no margin: the drawing goes in the flow above its heading, cropped at the edge */
.vs-plate-inline{display:none}
@media (max-width:1000px){
  .vs-plates{display:none}
  /* full width and clipped, so the drawing can hang off the screen edge without a sideways scroll */
  .vs-plate-inline{display:block;width:100vw;margin:40px calc(50% - 50vw) -24px;overflow:hidden;color:var(--mute);opacity:.7;pointer-events:none}
  .vs-plate-inline svg{width:78vw}
  .vs-plate-inline.l svg{margin-left:-24vw;-webkit-mask-image:linear-gradient(90deg,#000 50%,transparent 95%);mask-image:linear-gradient(90deg,#000 50%,transparent 95%)}
  .vs-plate-inline.small svg{width:40vw}
  .vs-plate-inline.l.small svg{margin-left:-8vw}
  .vs-plate-inline.r svg{margin-left:46vw;-webkit-mask-image:linear-gradient(270deg,#000 50%,transparent 95%);mask-image:linear-gradient(270deg,#000 50%,transparent 95%)}
}
.edge-seam{pointer-events:none;width:100vw;margin:52px calc(50% - 50vw) -30px;height:39px}
.edge-seam svg{display:block;width:100%;height:100%}
body.page-vs main.legal article h2.after-seam{border-top:0}
@media (prefers-reduced-motion:reduce){.vs-plates *,.vs-plate-inline *{animation:none!important}}