/* "On this page" sidebar for articles.
   Same pattern and type treatment as the charts sidebar (.ch-toc), fitted to
   the 940px article wrapper. Hidden below 1440px, where there is no margin to
   put it in. */

.article-toc { display: none; }

/* so an anchored heading clears the header instead of hiding under it */
.article-body h2[id],
.article-body h3[id] { scroll-margin-top: 5.5rem; }

@media (min-width: 1440px) {
  .article-toc {
    display: block;
    position: fixed;
    top: 7.5rem;
    left: calc(50% - 694px);
    width: 212px;
    z-index: 5;
    transition: opacity 0.3s ease;
  }

  .article-toc.hide { opacity: 0; pointer-events: none; }

  .article-toc b {
    display: block;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 0.6rem 0.9rem;
  }

  .article-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--rule);
  }

  .article-toc a {
    display: block;
    margin-left: -1px;
    padding: 0.38rem 0 0.38rem 0.9rem;
    border-left: 2px solid transparent;
    color: var(--text-mid);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.3;
    text-wrap: balance;
    transition: color 0.2s, border-color 0.2s;
  }

  .article-toc a:hover { color: var(--gold); }
  .article-toc a.on { color: var(--gold); border-left-color: var(--gold); }

  /* subheadings sit in from their section heading */
  .article-toc .at-h3 a {
    padding-left: 1.7rem;
    font-size: 0.88rem;
    color: var(--text-faint);
  }
  .article-toc .at-h3 a:hover,
  .article-toc .at-h3 a.on { color: var(--gold); }
}