/* Shared footnote styles for history.croton.news
   Canonical pattern: <sup class="fn-ref"><a href="#fn-N" id="fnref-N-{hash6}">[N]</a></sup>
   Footnote: <li id="fn-N">...<a class="fn-back" href="#fnref-N-{hash6}">↩</a></li>
*/

sup.fn-ref {
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}
sup.fn-ref a {
  color: var(--accent);
  text-decoration: none;
  padding: 0 2px;
  border-radius: 2px;
}
sup.fn-ref a:hover {
  background: var(--accent);
  color: #fff;
}

.story-footnotes {
  margin-top: 48px;
  padding: 24px 28px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font: 14px/1.6 var(--sans);
  color: var(--ink-2);
}
.story-footnotes h3 {
  font: 900 16px/1.2 var(--serif);
  color: var(--ink);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.story-footnotes ol {
  margin: 0;
  padding-left: 22px;
  list-style-position: outside;
}
.story-footnotes li {
  margin-bottom: 10px;
  padding-left: 2px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.story-footnotes li .fn-cite {
  color: var(--ink);
  font-weight: 600;
}
.story-footnotes li .fn-preview {
  color: var(--ink-3);
  font-style: italic;
}
.story-footnotes li a.fn-chunk-link {
  color: var(--accent);
  text-decoration: none;
}
.story-footnotes li a.fn-chunk-link:hover {
  text-decoration: underline;
}
.story-footnotes li a.fn-back {
  color: var(--ink-4);
  text-decoration: none;
  margin-left: 4px;
  font-size: 11px;
}
.story-footnotes li a.fn-back:hover { color: var(--accent); }
.story-footnotes li:target {
  background: #fff3d0;
  padding: 4px 6px;
  margin-left: -6px;
  border-radius: 3px;
}