/* pages — per-route composition. Nothing here is reused cross-page except helpers. */

.page-head { display: grid; gap: var(--space-1); }

.feed .post:nth-child(n + 4) .post__excerpt { display: none; }

.article { max-inline-size: 68ch; }

.article__head { display: grid; gap: var(--space-3); }

.article__byline {
  color: var(--text-muted);
  font-size: var(--step--1);
}

.article__author { color: var(--text); font-weight: 600; }

.related {
  max-inline-size: var(--page-max);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: var(--border-width) solid var(--border);
}

.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}

.search-form {
  display: flex;
  gap: var(--space-2);
  max-inline-size: 34rem;
}

.prose-page { max-inline-size: 68ch; }

.prose-card { padding: var(--space-6); }

.plain-list {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.plain-list li { display: grid; gap: 1px; }

.query { color: var(--text); font-weight: 600; }

/* Error page: no chrome, centred, still skip-link compatible. */
.error-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-6);
  min-block-size: 100dvh;
  max-inline-size: 44rem;
  margin-inline: auto;
  padding: var(--space-5) var(--gutter);
}

.error-page__main {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-3);
}

.error-page__main:focus-visible { outline-offset: var(--space-2); }

.error-code {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.error-page__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--step--1);
}

@media (max-width: 599px) {
  .prose-card { padding: var(--space-4); }
  .card { padding: var(--space-4); }
  .post__foot { align-items: flex-start; flex-direction: column; }
}