/* Archived note sits between the nav and the article. Blog neighbors sit
   between the article and the footer. tabi absolutely positions aside on
   wide screens, so the note is a div, not an aside. */
body > header {
  order: 0;
}

.archived-banner {
  position: static;
  order: 1;
  box-sizing: border-box;
  width: min(100%, calc(var(--max-layout-width) - 12rem));
  margin: 1.25rem auto 0;
}

body > .content {
  order: 2;
}

.blog-neighbors {
  order: 3;
  box-sizing: border-box;
  width: min(100%, calc(var(--max-layout-width) - 12rem));
  margin-inline: auto;
}

body > footer {
  order: 4;
}

.home-section {
  margin-top: 4rem;
}

.tool-card__topic {
  margin: 0 0 0.4rem;
  color: var(--meta-color);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tool-card__slot {
  margin: 0.8rem 0 0;
}

.tool-card__soon {
  color: var(--meta-color);
}

.cards .card.tool-card .card-info {
  padding-block-start: 24px;
}

.cards .card.tool-card:hover .tool-card__topic,
.cards .card.tool-card:hover .tool-card__soon,
.cards .card.tool-card:hover .card-info a {
  color: var(--hover-color);
}

.youtube-embed iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Homepage tools strip: one line of tool names plus a link to all tools. */
.home-tools-line {
  margin: 0.5rem 0 0;
  color: var(--meta-color);
}

.home-tools-line a {
  color: var(--text-color);
  text-decoration: none;
}

.home-tools-line a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.home-tools-sep {
  color: var(--meta-color);
}