.article-toc {
  display: block;
  margin: clamp(24px, 4vw, 48px) 0;
  padding: clamp(16px, 3vw, 30px);
  border: 1px solid #dedede;
  border-top: 2px solid #151515;
  background: #fafafa;
  color: #151515;
}

.article-toc .article-toc__title {
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: .12em;
}

.article-toc .article-toc__list {
  margin: 0;
  padding-inline-start: 2em;
  font-size: 14px;
  list-style-type: decimal-leading-zero;
}

.article-toc li {
  border-top: 1px solid #dedede;
}

.article-toc li::marker {
  color: #595959;
  font-variant-numeric: tabular-nums;
}

.article-toc a {
  display: block;
  padding: 9px 8px;
  color: inherit;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.article-toc a:hover,
.article-toc a:focus-visible {
  background: #ededed;
  text-decoration: underline;
}

.article-toc a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.article-columns__body {
  min-width: 0;
}

.article-contents {
  display: none;
}

@media (min-width: 900px) {
  .article-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: clamp(28px, 5vw, 64px);
  }

  .article-contents {
    display: block;
    margin-top: clamp(24px, 4vw, 48px);
  }

  .article-contents nav {
    display: block;
  }

  .article-contents h2 {
    margin: 0 0 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #151515;
    font-size: 11px;
    letter-spacing: .18em;
  }

  .article-contents ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .article-contents a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #dedede;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
}