/* ==========================================================================
   Related content blocks on articles and glossary terms.

   These exist for readers, but they also fix a structural problem: before
   them, every article and glossary page had exactly one inbound link (its
   index) and no lateral paths at all, so the whole resources section was a
   flat star rather than a connected graph.
   ========================================================================== */

.rel {
  margin: 56px 0 8px;
  padding-top: 28px;
  border-top: 1px solid #e5e7ef;
}
.rel + .rel { margin-top: 32px; }

.rel-label {
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #2563EB;
  margin: 0 0 16px;
}
.rel-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rel-list a {
  display: block;
  padding: 13px 16px;
  border: 1px solid #e5e7ef;
  border-radius: 12px;
  text-decoration: none;
  color: #1e2338;
  font: 500 14.5px/1.45 Inter, system-ui, sans-serif;
  background: #fff;
  transition: border-color .16s ease, transform .16s ease;
}
.rel-list a:hover { border-color: #c9c2f6; transform: translateY(-1px); }
.rel-list a:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }

/* the term list is denser: short labels, so let them sit closer together */
.rel--terms .rel-list { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rel--terms .rel-list a { font-size: 14px; padding: 11px 14px; }

@media (max-width: 620px) {
  .rel-list { grid-template-columns: 1fr; }
}