/* Blog: inline table of contents (cluster bl-). */
:root{
  --bl-ink:#111214;
  --bl-body:rgba(17,18,20,.62);
  --bl-muted:rgba(17,18,20,.5);
  --bl-line:#e2ddd4;
  --bl-milk-2:#f7f3ec;
  --bl-orange:#FF6A00;
  --bl-orange-text:#B84A00;
}
.bl-toc{
  margin:0 0 32px;
  padding:20px 24px;
  border:1px solid var(--bl-line);
  border-radius:4px;
  background:var(--bl-milk-2);
  font-family:'Roboto',sans-serif;
}
.bl-toc__summary{
  display:flex;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  list-style:none;
  outline:none;
}
.bl-toc__summary::-webkit-details-marker{display:none}
.bl-toc__summary::after{
  content:'';
  position:absolute;
  right:24px;
  top:26px;
  width:9px;
  height:9px;
  border-right:2px solid var(--bl-ink);
  border-bottom:2px solid var(--bl-ink);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.bl-toc{position:relative}
.bl-toc[open] .bl-toc__summary::after{transform:rotate(225deg);top:30px}
.bl-toc__summary:focus-visible{outline:2px solid var(--bl-orange);outline-offset:3px}
.bl-toc__eyebrow{
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bl-orange);
}
.bl-toc__title{
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  color:var(--bl-ink);
}
.bl-toc__list{
  margin:16px 0 0;
  padding:0 0 0 22px;
  counter-reset:bl-toc;
  list-style:none;
}
.bl-toc__item{
  counter-increment:bl-toc;
  position:relative;
  margin:0 0 8px;
  font-size:15px;
  line-height:1.5;
}
.bl-toc__item::before{
  content:counter(bl-toc,decimal-leading-zero);
  position:absolute;
  left:-22px;
  top:.15em;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--bl-muted);
}
.bl-toc__link{
  color:var(--bl-ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.bl-toc__link:hover,.bl-toc__link:focus-visible{
  color:var(--bl-orange-text);
  border-bottom-color:var(--bl-orange);
  outline:none;
}
@media (max-width:600px){
  .bl-toc{padding:16px 18px}
  .bl-toc__summary::after{right:18px}
}
@media (prefers-reduced-motion:reduce){
  .bl-toc__summary::after,.bl-toc__link{transition:none}
}