/* The essay's contents, in the left margin beside the column.

   At rest it is one short line per section, the section being read longer
   and brighter. Pointing at the lines (or tabbing into them) opens the
   section names, one after another; leaving folds them back to lines at
   once. Built by toc.js from the essay's own headings. Motion is opacity
   and a small slide; solid colours only. It needs the margin: below the
   width that leaves room for it, it is not shown. */
.essay-toc {
  position: fixed;
  z-index: 20;
  top: calc(var(--fx-edge) * 2 + 50px + 48px + 4px);
  left: calc(50% - 400px - 236px);
  transition: opacity 0.2s;
}
.essay-toc[data-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}
.essay-toc__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  width: 36px;
  transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.essay-toc__list li {
  margin: 0;
}
.essay-toc .essay-toc__item {
  position: relative;
  display: flex;
  align-items: center;
  height: 8px;
  padding: 0 8px;
  margin: 0 -8px;
  border-radius: 6px;
  color: var(--ink-faint);
  text-decoration: none;
  transition: height 0.24s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.15s, color 0.15s;
}
.essay-toc__line {
  display: block;
  width: 12px;
  height: 1px;
  background: var(--ink-faint);
  transition: width 0.2s, background-color 0.2s, opacity 0.12s;
}
.essay-toc__item[aria-current="true"] .essay-toc__line {
  width: 22px;
  background: var(--ink);
}
.essay-toc__label {
  position: absolute;
  left: 8px;
  right: 8px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.12s, transform 0.12s;
  transition-delay: 0s;
  pointer-events: none;
}
.essay-toc:hover .essay-toc__list,
.essay-toc:focus-within .essay-toc__list {
  width: 220px;
}
.essay-toc:hover .essay-toc__item,
.essay-toc:focus-within .essay-toc__item {
  height: 28px;
}
.essay-toc:hover .essay-toc__line,
.essay-toc:focus-within .essay-toc__line {
  opacity: 0;
}
.essay-toc:hover .essay-toc__label,
.essay-toc:focus-within .essay-toc__label {
  opacity: 1;
  transform: none;
  transition: opacity 0.26s, transform 0.26s;
  transition-delay: calc(var(--i) * 24ms + 60ms);
}
.essay-toc .essay-toc__item[aria-current="true"] {
  color: var(--ink);
}
.essay-toc .essay-toc__item:hover,
.essay-toc .essay-toc__item:focus-visible {
  color: var(--ink);
  background: var(--surface-1);
  text-decoration: none;
  outline: none;
}
.wrap section h2 {
  scroll-margin-top: calc(var(--fx-edge) + var(--fx-nav-h) + 32px);
}

/* The margin has to hold the open names (220px) clear of the column. */
@media (max-width: 1300px) {
  .essay-toc {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .essay-toc,
  .essay-toc__list,
  .essay-toc .essay-toc__item,
  .essay-toc__line,
  .essay-toc__label,
  .essay-toc:hover .essay-toc__label,
  .essay-toc:focus-within .essay-toc__label {
    transition: none;
  }
}