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

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

.archive-object__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--theme-space-sm);
  padding: var(--theme-space-sm);
}

.archive-object__filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--theme-space-sm);
  margin-top: 0;
}

.archive-object__filter-link {
  position: relative;
  color: color-mix(in srgb, var(--brand-color-light) 60%, transparent);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 1px;
  padding-bottom: 0.25em;
  border-bottom: var(--theme-line-width) solid transparent;
}

.archive-object__filter-link::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}

.archive-object__filter-link:hover {
  color: var(--brand-color-light);
  border-bottom-color: var(--brand-color-light);
}

.archive-object__filter-link.is-active {
  color: var(--theme-color-accent);
  border-bottom-color: var(--theme-color-accent);
}

.archive-object .object-grid {
  margin-top: var(--theme-space-sm);
}

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

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

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

.archive-object .object-grid .object-card[data-featured] {
  grid-column: span 3;
  grid-row: span 2;
}

.archive-object .object-grid .object-card[data-featured] .object-card__title {
  font-size: 2rem;
}

/* Tablet/narrow-desktop tier, same layered approach as the news grid
   (assets/css/pages/archive.css): 2 columns instead of the base 6-col
   template's 3-per-row. Both featured cards drop from span 3 to span
   1 — exactly 1 of the 2 new columns each, so the pair still covers
   the whole first row together (same "2 cards = 1 row" relationship
   as desktop, just at 2-column scale) — grid-row stays span 2,
   keeping them taller/more prominent than the regular single-row cards
   below, same as desktop's proportions. Scoped to .archive-object so
   front-page.php's own objects section is unaffected — not asked for
   there. */
@media (width <= 1024px) {
  .archive-object .object-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .archive-object .object-grid .object-card {
    grid-column: span 1;
  }

  .archive-object .object-grid .object-card[data-featured] {
    grid-column: span 1;
  }

  .archive-object .object-grid .object-card__title {
    font-size: 1rem;
  }
}

/* At <=768px .object-grid is a single explicit column
   (brand-grid.css) and every .object-card is span 1 — but CSS Grid
   auto-placement flows items across however many columns actually
   exist, explicit + implicit, not per item. Leaving the first featured
   card at span 3 (unconditional, above) alone forces 3 implicit
   columns into existence, and every other span-1 card then gets
   auto-placed across all 3 of them instead of stacking — the whole
   grid silently reverts to a multi-column layout because of one card.
   Both featured cards (first unconditionally, second only on screens
   narrow enough that a second one can appear at all) need to drop to
   span 1 too, so no card ever asks for more than the single column
   that exists here. */
@media (max-width: 48rem) {
  /* The <=1024px tier above sets this to repeat(2, 1fr) at higher
     specificity than brand-grid.css's shared, unscoped "<=768px: 1fr"
     rule — since specificity wins regardless of which media query is
     narrower, that 2-column value would otherwise keep winning all the
     way down to phone widths too (both conditions are true there).
     Explicit revert back to a single column. */
  .archive-object .object-grid {
    grid-template-columns: 1fr;
  }

  .archive-object .object-grid .object-card[data-featured] {
    grid-column: span 1;
    grid-row: span 1;
  }

  .archive-object .object-grid .object-card[data-featured] .object-card__title {
    font-size: inherit;
  }
}