@charset "UTF-8";

.dp-doc {
  display: grid;
  gap: var(--dp-s7);
}

.dp-doc > * { min-width: 0; }
@media (min-width: 1024px) {
  .dp-doc {
    grid-template-columns: 15rem 1fr;
    gap: var(--dp-s8);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .dp-doc__toc {
    position: sticky;

    top: calc(var(--dp-header-h, 7.5rem) + var(--dp-s7));
  }
}

.dp-doc__toc-title {
  padding-bottom: var(--dp-s3);
  border-bottom: 1px solid var(--dp-ink);
  color: var(--dp-ink);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  letter-spacing: .08em;
}

.dp-doc__toc ol {
  display: grid;
  gap: var(--dp-s3);
  margin-top: var(--dp-s4);
  counter-reset: toc;
}
.dp-doc__toc li {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 1.6em 1fr;
  align-items: baseline;
}

.dp-doc__toc li::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--dp-mute);
  font-family: var(--dp-font-num);
  font-size: var(--wp--preset--font-size--sm);
}
.dp-doc__toc a {
  color: var(--dp-mute);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.7;
  text-decoration: none;
}
.dp-doc__toc a:hover { color: var(--dp-accent-d); }

.dp-doc__updated {
  margin-top: var(--dp-s6);
  padding-top: var(--dp-s4);
  border-top: var(--dp-border);
  color: var(--dp-mute);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.8;
}
.dp-doc__updated time {
  color: var(--dp-ink);
  font-family: var(--dp-font-num);
}

.dp-doc__body { max-width: var(--dp-w-prose); }

.dp-doc__body > h2:first-child { margin-top: 0; }