.archive-page__spacer {
  height: var(--theme-header-height);
}

.archive-page {
  padding: var(--theme-section-padding);
  background: var(--brand-color-light);
  color: var(--brand-color-dark);
}

.archive-page__header {
  display: none;
}

.archive-page__title {
  padding-top: 2rem;
  text-align: center;
}

.archive-page .news-grid {
  margin-top: 2rem;
}

/* Own tier for the archive page's news-grid specifically (does not
   touch .object-grid or .news-grid elsewhere, e.g. front-page.php's
   news section, single.php/single-object.php's related-news widget —
   only this .archive-page-scoped selector, at higher specificity than
   brand-grid.css's shared "<=768px: 1 column" rule, so it wins
   regardless of source order). 2 columns below 1024px instead of
   collapsing straight to 1. */
@media (width <= 1024px) {
  .archive-page .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* .news-card/.news-card--featured default to col-2 (span 2 of the
     base 6-col template) and only drop to span 1 at news-card.css's
     own <=768px tier — between 769-1024px they'd otherwise still
     request span 2, which is full-width in this 2-column template
     (1 per row), not the 2-per-row this is meant to produce. Scoped to
     .archive-page so front-page.php's own news section and the
     single-page related-news widget (same shared news-card.css) are
     unaffected — those weren't asked for and still collapse at their
     existing <=768px tier. */
  .archive-page .news-card {
    grid-column: span 1;
    margin-left: 0;
  }

  /* Full-width hero card, alone in its own row, instead of blending
     into the 2-up grid as a regular card — same treatment as the
     <=640px single-column tier needs (it's alone in its row there
     too), not the "auto, let it stretch against a sibling" approach a
     span-1 featured card would need. An aspect-ratio is required here
     for the same reason news-card.css's own <=768px rule needs one:
     the card's media/body are position: absolute, so it has no
     intrinsic height of its own to fall back on once nothing forces
     one — see that rule's comment for the full explanation. Square,
     matching news-card.css's own featured-card value, not the
     landscape 16/9 the rest of this grid's media uses. */
  .archive-page .news-card--featured {
    grid-column: span 2;
    aspect-ratio: 1 / 1;
  }

  /* Title reads too large once cards are down to half the viewport
     (2 columns) or less. Scoped to .archive-page like the rest of this
     block — front-page.php's own news section and the related-news
     widget weren't asked for and keep their existing size. */
  .archive-page .news-card__title {
    font-size: clamp(1rem, 3vw, 1.4rem);
  }
}

/* Back to 1 column on phones — the 2-column tier above is for
   tablet/narrow-desktop widths (641-1024px), not all the way down.
   Later in source than the <=1024px block above, so at a phone width
   (where both conditions are true) this one wins. Featured card's own
   grid-column must drop back to span 1 here too — the <=1024px tier
   above sets it to span 2 (full-width hero), and in a single explicit
   column, span 2 would force an implicit second track into existence
   and pull every other span-1 card into a 2-column flow alongside it
   (the exact bug already found/fixed once on archive-object.php's
   featured cards — one item asking for more columns than exist breaks
   the stack for everyone, not just itself). aspect-ratio stays square
   either way — alone in its row at both span 1 (1 col) and span 2
   (2 col) here, so it never had a sibling to stretch against. */
@media (width <= 640px) {
  .archive-page .news-grid {
    grid-template-columns: 1fr;
  }

  .archive-page .news-card--featured {
    grid-column: span 1;
  }
}

/* Not sticky — .archive-page's containing block spans the whole
   (often very long, e.g. 80 posts on archive.php) list, so a
   bottom-anchored sticky element stays pinned near the viewport
   bottom for the entire scroll instead of only appearing once you
   reach the true end of the list, overlapping every post along the
   way. archive-object__pagination (the working convention elsewhere
   on the site) is plain in-flow — matching that here instead. */
.archive-page__pagination {
  view-transition-name: archive-page-pagination;
}

.archive-page__pagination ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: var(--theme-space-lg) 0 0;
  padding: 0;
}

.archive-page__pagination a,
.archive-page__pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  min-width: 2.75em;
  padding: 0.5em 0.75em;
  border: 1px solid #000;
  color: var(--brand-color-dark);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 500;
}

.archive-page__pagination a:hover {
  border-color: var(--theme-color-accent);
  color: var(--theme-color-accent);
}

.archive-page__pagination .current {
  background: var(--theme-color-accent);
  border-color: var(--theme-color-accent);
  color: var(--brand-color-contrast);
}