/* The version footer. Shared by every page — current and archived.
   Each site version themes it by defining these on :root in its own
   stylesheet: --archive-bg, --archive-fg, --archive-muted, --archive-accent,
   --archive-line, --archive-tint, --archive-display, --archive-label.
   The values below are the fallbacks. */

.archive {
  padding: 5rem 1.5rem 6rem;
  background: var(--archive-bg, #1c0910);
  color: var(--archive-fg, #fffaf5);
}

.archive__inner {
  max-width: 54rem;
  margin: 0 auto;
}

.archive__eyebrow {
  margin: 0;
  color: var(--archive-accent, #f1cd72);
  font-family: var(--archive-label, inherit);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.archive__lede {
  max-width: 34rem;
  margin: 0.9rem 0 2.6rem;
  color: var(--archive-muted, rgb(255 250 245 / 0.62));
  font-family: var(--archive-display, Georgia, serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-style: italic;
  line-height: 1.45;
}

.archive__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--archive-line, rgb(255 250 245 / 0.16));
  list-style: none;
}

.archive__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: 0 1.4rem;
  padding: 1.5rem 1rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--archive-line, rgb(255 250 245 / 0.16));
  color: inherit;
  text-decoration: none;
  transition: background 220ms ease, padding-left 220ms ease;
}

a.archive__item:hover,
a.archive__item:focus-visible {
  padding-left: 1.25rem;
  background: var(--archive-tint, rgb(255 250 245 / 0.05));
}

.archive__id {
  color: var(--archive-muted, rgb(255 250 245 / 0.62));
  font-family: var(--archive-label, inherit);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

a.archive__item:hover .archive__id,
a.archive__item:focus-visible .archive__id {
  color: var(--archive-accent, #f1cd72);
}

.archive__text {
  display: block;
  min-width: 0;
}

.archive__title {
  display: block;
  font-family: var(--archive-display, Georgia, serif);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.2;
}

.archive__note {
  display: block;
  margin-top: 0.4rem;
  color: var(--archive-muted, rgb(255 250 245 / 0.62));
  font-family: var(--archive-label, inherit);
  font-size: 0.86rem;
  line-height: 1.5;
}

.archive__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  font-family: var(--archive-label, inherit);
  text-align: right;
  white-space: nowrap;
}

.archive__shipped {
  color: var(--archive-muted, rgb(255 250 245 / 0.62));
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.archive__badge {
  color: var(--archive-muted, rgb(255 250 245 / 0.62));
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.is-here .archive__badge {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--archive-badge-bg, var(--archive-accent, #f1cd72));
  color: var(--archive-badge-fg, var(--archive-bg, #1c0910));
}

a.archive__item:hover .archive__badge,
a.archive__item:focus-visible .archive__badge {
  color: var(--archive-accent, #f1cd72);
}

@media (max-width: 640px) {
  .archive {
    padding: 4rem 1.25rem 4.5rem;
  }

  .archive__item {
    grid-template-columns: 2.75rem 1fr;
    gap: 0 1rem;
    padding-right: 0;
  }

  .archive__meta {
    flex-direction: row;
    grid-column: 2;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive__item { transition: none; }
}