/* ============================================================================
   Blog: the index listing and the post page.

   Loaded after legal.css, and deliberately thin. A post IS a document, so it
   reuses .doc, .doc__head, .prose and .callout wholesale. Everything here is
   either the single column variant of the document layout, or the two things a
   document does not have: a list of posts, and an end of post invitation.
   ========================================================================== */

/* ---------- post page: one column, no rail ---------- */

/* legal.css puts a table of contents rail beside the prose. A post has no
   sections worth a rail, so the grid collapses to one column. Left aligned, not
   centred: the header above it (eyebrow, title, standfirst) is ranged left, and
   a centred body would break that edge halfway down the page. */
.doc__body--post {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
}

/* Slightly narrower than the legal measure. Those pages are reference material
   people scan; an essay is read start to finish, where a shorter line helps. */
.post__prose { max-width: 62ch; }

/* main.css sets em { font-style: normal } because the display face uses <em> as
   a colour accent. Inside running prose an emphasis mark should read as one. */
.post__prose em { font-style: italic; }

.prose__rule {
  border: 0;
  border-top: 1px solid var(--outline-variant);
  max-width: 62ch;
  margin: 2.75rem 0;
}

.post__prose > h2 { margin-top: 2.9rem; }
.post__prose > h3 { margin-top: 2rem; }
.post__prose > :first-child { margin-top: 0; }

/* ---------- end of post ---------- */

.post__end {
  max-width: 62ch;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--outline-variant);
  border-radius: .875rem;
  background: color-mix(in srgb, var(--alabaster) 3%, transparent);
}

.post__end-lead {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--alabaster);
  max-width: 46ch;
}

.post__end-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.5rem;
}

.post__cta {
  display: inline-block;
  padding: .72rem 1.4rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--onyx);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.post__cta:hover { opacity: .88; }
.post__cta:active { transform: scale(.985); }

.post__back {
  font-size: .92rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.post__back:hover { color: var(--alabaster); border-bottom-color: var(--outline-variant); }

/* ---------- index listing ---------- */

.post-list {
  list-style: none;
  margin: 0;
  padding: clamp(2.5rem, 7vh, 4rem) 0 clamp(4rem, 10vh, 7rem);
  max-width: 62ch;
  /* No border-top here: .doc__head already draws the rule under the masthead,
     and a second one at 62ch stacks on it for part of the width. */
}

.post-list__item + .post-list__item { border-top: 1px solid var(--outline-variant); }

.post-list__link {
  display: block;
  padding: 2rem 0;
  text-decoration: none;
  color: inherit;
}

.post-list__eyebrow { display: block; color: var(--slate-2); }

.post-list__title {
  margin-top: .7rem;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.018em;
  font-weight: 500;
  color: var(--white);
  transition: color .35s var(--ease);
}

.post-list__link:hover .post-list__title { color: var(--slate-2); }

.post-list__blurb {
  margin-top: .75rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 54ch;
}

.post-list__meta { display: block; margin-top: 1.1rem; color: var(--slate-2); }

.post-list__empty { color: var(--muted); padding: 3rem 0; }

@media (prefers-reduced-motion: reduce) {
  .post__cta, .post__back, .post-list__title { transition: none; }
  .post__cta:active { transform: none; }
}

@media print {
  .post__end { display: none !important; }
}