Having played with it a little, you can actually put the latter two steps in the same code block. For example, you can have this:
<a href="" data-featherlight="#john-bio">Learn about John</a>
<div style="display:none;">
<div id="john-bio">
<p>Insert bio here</p>
</div>
</div>
All in one code block.
As for the header injection, this is what I've got:
<link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script></link>
Seems to be working!