/* refs: a list of things worth a look, each with who made it and one line on why.
     <div class="refs"><ul><li><a href="…"><span class="ref-name">…</span> <span class="ref-who">…</span><span class="ref-what">…</span></a></li></ul></div> */
.refs ul { list-style: none; margin: 0; padding: 0; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); overflow: hidden; }
.refs li { padding: 14px 18px; border-top: 1px solid var(--gray-300); }
.refs li:first-child { border-top: 0; }
.refs a { text-decoration: none; color: var(--gray-1200); }
.refs a:hover .ref-name { text-decoration: underline; }
.refs .ref-name { font-weight: 500; }
.refs .ref-who { color: var(--gray-1000); }
.refs .ref-what { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--gray-1100); line-height: 1.5; }