/* File: /css/archive-offer.css | Version: 1.0.2 | 2026-10-30: the block sets the serif itself, the home page's body being sans (.ox-home), so its title reads the same everywhere.
   1.0.1 | 2026-10-30: the home page is dark by its own class, .ox-home, not .ox-dark, so the block takes the home page's colours there (its words were dark on black).
   1.0.0 | 2026-10-30: the one way an image for sale is shown (inc-archive-offer.asp; Steve's rendering of 2026-10-30, "From the archive"): the image beside the words in a gold frame; the grid stacks them by itself in any column under about 42rem, so a phone and an article's column need no rule of their own. Its own sheet, not site.css: only the five pages that draw it load it, and they link it at one ?v=. Colours, sizes and the 44px tap height come from site.css. Each rule starts .ox-archive: an article's body sets its own h3, p and img (.article__body, one class and one element), and a single-class rule loses to it, so the block would look different in an article. */
.ox-home .ox-archive {
  --ox-ink: var(--home-ink);
  --ox-ink-dim: var(--home-dim);
  --ox-accent: var(--home-gold-bright);
}
.ox-archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem 2rem;
  align-items: center;
  margin: 2rem 0;
  padding: 1.4rem;
  border: 1px solid var(--ox-accent);
  font-family: Georgia, "Times New Roman", serif;
}
.ox-archive__media { display: block; }
.ox-archive .ox-archive__media img { display: block; width: 100%; height: auto; margin: 0; }
.ox-archive .ox-archive__eyebrow { margin: 0 0 0.5rem; color: var(--ox-accent); }
.ox-archive .ox-archive__title { margin: 0 0 0.6rem; font-size: 1.6rem; font-weight: 400; line-height: 1.2; }
.ox-archive .ox-archive__title a { color: var(--ox-ink); text-decoration: none; }
.ox-archive .ox-archive__line { margin: 0 0 0.6rem; color: var(--ox-ink); font-size: var(--fs-2xl); line-height: 1.5; }
.ox-archive .ox-archive__spec { margin: 0 0 0.8rem; color: var(--ox-ink); font-size: var(--fs-xl); }
.ox-archive .ox-archive__links { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.ox-archive .ox-archive__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--tap-min);
  color: var(--ox-ink);
  font-size: var(--fs-2xl);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.ox-archive .ox-archive__link--main { color: var(--ox-accent); font-size: var(--fs-3xl); }
.ox-archive .ox-archive__credit { margin: 0.5rem 0 0; color: var(--ox-ink-dim); font-size: var(--fs-md); line-height: 1.4; }

@media (max-width: 48rem) {
  .ox-archive { padding: 1rem; }
}