/* The blog's post rows: the Blog list, and "More from the blog" on each post.
   Reads the page's own --serif / --mono / --ink-soft / --pad-x tokens, so the
   same rows sit on the site's paper, on a post's own ground, or on the blue.
   Sizes are deliberately large: titles and bylines are meant to be read, not found. */
.posts { max-width: 1060px; margin: 0 auto; }

.post-row {
  display: block;
  padding: clamp(26px, 4vh, 42px) 0;
  border-top: 1.5px solid currentColor;
  color: inherit; text-decoration: none;
}
.post-row:last-child { border-bottom: 1.5px solid currentColor; }

.post-row-meta {
  display: block; margin-bottom: 14px;
  font-family: var(--mono); font-size: 16px; line-height: 1.5;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.post-row-title {
  display: block; max-width: 24ch;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -.015em;
}
.post-row-dek {
  display: block; max-width: 58ch; margin-top: 16px;
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55;
}
.post-row-go {
  display: inline-block; margin-top: 20px; padding-bottom: 3px;
  font-family: var(--mono); font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 2px solid currentColor;
}
.post-row-go::after { content: ' \2192'; }
.post-row:hover .post-row-title,
.post-row:focus-visible .post-row-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }

/* on a post: the other posts, then the way back to the full list */
.more-posts { padding: clamp(48px, 8vh, 96px) var(--pad-x); }
.more-in { max-width: 1060px; margin: 0 auto; }
.more-posts .posts-k {
  margin: 0 0 20px;
  font-family: var(--mono); font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
}
.more-posts .post-row-title { font-size: clamp(28px, 3.4vw, 44px); max-width: 28ch; }
.more-posts .posts-all {
  display: inline-block; margin: 26px 0 0; padding-bottom: 3px;
  font-family: var(--mono); font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
  color: inherit; text-decoration: none; border-bottom: 2px solid currentColor;
}
.more-posts .posts-all::after { content: ' \2192'; }