.updates-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 24%);
  gap: 18px;
  margin-block: 18px;
  align-items: start;
}

.updates-detail-article,
.updates-detail-toc {
  padding: 18px;
  background: #757f4a;
}

.updates-detail-article {
  display: grid;
  gap: 18px;
}

.updates-detail-article :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre, table, dl, hr) {
  margin: 0;
}

.updates-detail-article h1 {
  color: var(--cream);
  font-size: var(--type-t1-size);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
}

.updates-detail-article :is(h2, h3, h4, h5, h6),
.updates-detail-toc > strong {
  color: var(--cream);
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

.updates-detail-article :is(p, li, blockquote, th, td, dt, dd),
.updates-detail-toc a {
  color: var(--cream);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.updates-detail-subtitle {
  color: rgb(252 252 251 / 76%);
}

.updates-detail-meta {
  display: flex;
  gap: 18px;
  color: rgb(252 252 251 / 50%);
}

.updates-detail-article :is(ul, ol) {
  display: grid;
  gap: 8px;
  padding-left: 20px;
}

.updates-detail-article blockquote {
  padding-left: 18px;
  color: rgb(252 252 251 / 68%);
  border-left: 1px solid rgb(252 252 251 / 50%);
}

.updates-detail-article a,
.updates-detail-toc a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.updates-detail-article code {
  padding-inline: 4px;
  color: var(--ink);
  background: var(--cream);
  border-radius: 4px;
}

.updates-detail-article pre { max-width: 100%; padding: 12px; overflow-x: auto; border: 1px solid rgb(252 252 251 / 28%); border-radius: var(--container-radius); background: rgb(252 252 251 / 10%); }
.updates-detail-article pre code { padding: 0; color: var(--cream); background: transparent; }
.updates-detail-article table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.updates-detail-article :is(th, td) { padding: 8px 10px; text-align: left; color: var(--cream); border: 1px solid rgb(252 252 251 / 28%); }
.updates-detail-article dl { display: grid; gap: 6px 12px; grid-template-columns: auto minmax(0, 1fr); color: var(--cream); }
.updates-detail-article :is(dt, dd) { margin: 0; }
.updates-detail-article dt { font-weight: var(--type-t2-weight); }
.updates-detail-article hr { width: 100%; border: 0; border-top: 1px solid rgb(252 252 251 / 36%); }
.updates-detail-article .task-list-item { list-style: none; }
.updates-detail-article .task-list-item-checkbox { margin-inline: -20px 8px; accent-color: var(--acid); }

.updates-detail-article .content-markdown-image { display: grid; gap: 8px; margin: 0; }
.updates-detail-article .content-markdown-image img { display: block; width: 100%; height: auto; border: var(--container-border); border-radius: var(--container-radius); }
.updates-detail-article .content-markdown-image-caption { color: rgb(252 252 251 / 68%); font-size: var(--type-t3-size); font-weight: var(--type-t3-weight); line-height: var(--type-t3-line-height); letter-spacing: var(--type-t3-letter-spacing); }

.updates-detail-toc {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 18px;
}

.updates-detail-toc nav {
  display: grid;
  gap: 10px;
}

.updates-detail-toc a[data-level="1"] { font-weight: var(--type-t2-weight); }
.updates-detail-toc a[data-level="2"] { padding-left: 8px; }
.updates-detail-toc a[data-level="3"] { padding-left: 16px; color: rgb(252 252 251 / 76%); }
.updates-detail-toc a[data-level="4"] { padding-left: 24px; color: rgb(252 252 251 / 70%); }
.updates-detail-toc a[data-level="5"] { padding-left: 32px; color: rgb(252 252 251 / 64%); }
.updates-detail-toc a[data-level="6"] { padding-left: 40px; color: rgb(252 252 251 / 58%); }

@media (min-width: 744px) and (max-width: 1023px) {
  .updates-detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 30%);
  }
}

@media (max-width: 743px) {
  .updates-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .updates-detail-article,
  .updates-detail-toc {
    padding: 14px;
  }

  .updates-detail-meta {
    flex-wrap: wrap;
    gap: 8px 14px;
  }

  .updates-detail-toc {
    position: static;
    order: -1;
  }
}