.article {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 80px 20px 120px;
}

.article--image {
  padding: 100px 20px 140px;
}

.post-header {
  margin-bottom: 24px;
  text-align: left;
}

.post-series {
  font-size: var(--fs-small);
  color: var(--color-sub);
  margin-bottom: 6px;
}

.post-title {
  font-size: var(--fs-article-title);
  font-weight: 400;
  line-height: 1.4;
}

.post-body p {
  margin: 0 0 18px;
}

.post-figure--row {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.post-figure--row figcaption {
  width: 100%;
  margin-top: 6px;
  font-size: var(--fs-meta);
  color: var(--color-sub);
  text-align: left;
}

.post-figure--row img {
  max-width: 140px;
  filter: grayscale(10%);
}

.post-figure {
  margin: 22px 0 26px;
}

.post-figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

.post-figure figcaption {
  margin-top: 6px;
  font-size: var(--fs-meta);
  color: var(--color-sub);
  text-align: left;
}

.post-next {
  margin-top: 28px;
  text-align: right;
  color: var(--color-sub);
}

.post-nav {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}

.post-nav a {
  text-decoration: none;
  color: var(--color-text);
}

.post-nav a:hover {
  text-decoration: underline;
}

.rank-title {
  font-size: var(--fs-small);
  color: var(--color-sub);
  margin-bottom: 6px;
}

.rank-list {
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.image-page {
  padding: 80px 20px 120px;
}

.single-image {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.single-image img {
  width: 100%;
  height: auto;
  display: block;
}

.single-image figcaption {
  margin-top: 8px;
  font-size: var(--fs-meta);
  color: var(--color-sub);
  text-align: left;
}