/* Archived note sits between the nav and the article. The discuss link
   sits after the article, then blog neighbors, then the footer. The
   disclosure line is inside the article, before the body. tabi absolutely
   positions aside on wide screens, so these notes are divs, not asides. */
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;
}

.post-end {
  order: 3;
  box-sizing: border-box;
  width: min(100%, calc(var(--max-layout-width) - 12rem));
  margin-top: -2.5rem;
  margin-inline: auto;
  margin-bottom: 0.25rem;
}

.post-end p {
  margin: 0;
  font-family: var(--sans-serif-font);
  font-size: 0.95rem;
  line-height: 1.5;
}

p.post-disclosure {
  margin: 0.35rem 0 1.25rem;
  color: var(--meta-color);
  font-family: var(--sans-serif-font);
  font-size: 0.95rem;
  line-height: 1.5;
}

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

body > footer {
  order: 5;
}

@media only screen and (max-width: 1000px) {
  .post-end {
    width: min(100%, var(--normal-layout-width));
  }
}

@media only screen and (max-width: 600px) {
  .post-end {
    width: min(100%, var(--medium-layout-width));
  }
}

@media only screen and (max-width: 300px) {
  .post-end {
    width: min(100%, var(--small-layout-width));
  }
}

.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;
}

/* Quiet subscribe link under the blog title. The footer icon is the other one. */
.blog-feed-link {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
}

.blog-feed-link a {
  color: var(--primary-color);
  text-decoration: none;
}

.blog-feed-link a:hover {
  text-decoration: underline;
}

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

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

img.about-photo {
  width: 16rem;
  max-width: 100%;
  height: auto;
  margin: 0 0 1.25rem;
}

/* Optional post take (partials/my_take.html). A label plus a short summary,
   meant to read as about two lines, between the meta line and the body.
   Colors come from tabi's light/dark variables. */
article .my-take {
  margin: 0.35rem 0 1.6rem;
  border: 1px solid var(--divider-color);
  border-inline-start: 6px solid var(--primary-color);
  border-radius: 10px;
  background: var(--bg-0);
  background: color-mix(in srgb, var(--primary-color) 9%, var(--background-color));
  padding: 0.7rem 1rem 0.85rem;
  color: var(--text-color-high-contrast);
  font-family: var(--sans-serif-font);
}

article .my-take p {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 450;
  line-height: 1.45;
}

article .my-take .my-take__label {
  color: var(--primary-color);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

article .my-take .my-take__body {
  margin-top: 0.3rem;
}