/* Margin Notes — shared article footer (read-next + colophon).
   Injected by server.ts into any bespoke article that doesn't already hand-code
   a footer, so every essay (present and future) ends on the same bottom layer
   regardless of what the source HTML shipped with. Depends on /design/tokens.css. */

.article-footer {
  max-width: 720px;
  margin: 96px auto 0;
  padding: 0 24px 64px;
}
.article-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.article-footer__rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 40px 0;
}
.next-article__label,
.subscribe__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-bottom: 18px;
}
.next-article__link {
  display: block;
  border-bottom: none;
  color: var(--ink);
  transition: opacity 180ms var(--ease);
}
.next-article__link:hover { opacity: 0.7; }
.next-article__title {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 6px;
}
.next-article__excerpt {
  display: block;
  font-size: 15px;
  color: var(--mute-1);
}

.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 12px;
  margin-top: 56px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-1);
}
/* Some per-article styles.css (e.g. is-product) still ship a leftover
   `.article-footer .colophon { margin-top: 0 }` at specificity (0,2,0) from the
   hand-coded-footer era, which collapses the colophon against the read-next card.
   Match that specificity here (and load later) so the injected footer keeps air. */
.article-footer .colophon { margin-top: 56px; }
.colophon__tag {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--mute-1);
}
.colophon__sep { color: var(--mute-3); }
.colophon__byline {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.colophon__byline:hover { color: var(--ink); border-bottom-color: var(--ink-soft); }