/* The Archive — the oeuvre's public pages (docs/oeuvre-public-spec.md
   §Design). Layered over the shared galley core: fonts.css → tokens.css →
   galley.css → this file → the manifest theme override. Every value here
   comes from a token; this file adds selectors, it does not define custom
   properties.

   The room is deliberately quiet. The work is the photograph and the
   record, so the chrome does as little as it can get away with: wide
   margins, one column of prose, and the grid as the only dense element. */

.skip-link {
  position: absolute;
  left: -10000px;
  background: var(--bg-card);
  border: 1px solid var(--ink);
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--mono);
  font-size: var(--step--2);
}
.skip-link:focus {
  left: var(--space-m);
  top: var(--space-2xs);
  z-index: 10;
}

.section { margin: var(--space-l) 0; }

/* ---- the grid ---- */

.grid {
  list-style: none;
  margin: var(--space-m) 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.card a {
  display: grid;
  gap: var(--space-2xs);
  text-decoration: none;
  color: var(--ink);
}

.card-image {
  display: block;
  background: var(--bg-accent);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A work with no photograph gets a hairline frame, not a broken-image
   placeholder: the record is still the record. */
.card-image-empty {
  border: 1px solid var(--line);
  background: transparent;
}

.card-body { display: grid; gap: 0.15rem; }
.card-title {
  font-family: var(--font-serif), serif;
  font-size: var(--step-0);
  line-height: 1.2;
}
.card a:hover .card-title,
.card a:focus-visible .card-title { color: var(--accent); }
.card-meta,
.card-medium {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.card-medium {
  /* Media strings run long; two lines is the honest budget for a card. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- browse controls ---- */

form.browse {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-s);
  margin: var(--space-m) 0 var(--space-s);
}
form.browse .browse-search { flex: 1 1 18rem; }
form.browse .browse-sort { flex: 0 1 16rem; }
form.browse button { flex: 0 0 auto; }

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-xs);
  margin: 0 0 var(--space-m);
}
.chips-count,
.chip {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
}
.chips-count { color: var(--muted); }
.chip {
  border: 1px solid var(--line);
  padding: 0.1rem 0.5rem;
  text-decoration: none;
  color: var(--muted);
}
.chip:hover,
.chip:focus-visible { border-color: var(--accent); color: var(--accent); }
.chip-clear { border-style: dashed; }

.pagination {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  border-top: 1px solid var(--line);
  padding-top: var(--space-s);
  margin-top: var(--space-l);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
}
.pagination a { text-decoration: none; }
.pagination-where { color: var(--muted); }

.empty {
  color: var(--muted);
  font-style: italic;
  margin: var(--space-l) 0;
}

/* A term page's introduction: the artist's prose about the body of work,
   set at the reading measure above the grid. */
.term-intro {
  max-width: 38rem;
  font-family: var(--font-serif), serif;
  font-size: var(--step-0);
  margin: var(--space-s) 0 var(--space-m);
}
.term-intro p { margin: 0 0 0.7rem; }
.term-intro img { max-width: 100%; height: auto; }

/* ---- front page ---- */

.archive-title { margin-top: var(--space-m); }
.all-works {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  margin-top: var(--space-l);
}
.all-works a { text-decoration: none; }

/* ---- the work page ---- */

.work { max-width: 60rem; margin: 0 auto; }

.plates { display: grid; gap: var(--space-m); margin: var(--space-s) 0 var(--space-l); }
.plate { margin: 0; }
.plate img { display: block; width: 100%; height: auto; }
.plate figcaption .credit { display: block; }

.work-head { margin-bottom: var(--space-m); }
.work-head h1 { margin: 0 0 var(--space-2xs); }
.work-subtitle {
  font-style: italic;
  color: var(--muted);
  font-size: var(--step-1);
  margin: 0 0 var(--space-2xs);
}
.work-date {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0;
}

/* The facts block is a catalogue caption: labels in the mono meta voice,
   values in the serif reading voice. */
.facts {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  gap: var(--space-2xs) var(--space-s);
  margin: var(--space-m) 0;
  padding: var(--space-s) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.facts dt {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.facts dd { margin: 0; }
.measures { list-style: none; margin: 0; padding: 0; }
.measures li { margin: 0; }

.narrative { max-width: 34rem; }
.narrative img { height: auto; }

.terms .term-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-xs);
  margin: 0 0 var(--space-2xs);
}
.terms .eyebrow { margin: 0; min-width: 7rem; }
.term {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
a.term:hover,
a.term:focus-visible { border-color: var(--accent); }

.availability {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
}

.apparatus { margin-top: var(--space-xl); }
.records { list-style: none; margin: 0; padding: 0; }
.records li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
}
.records li:last-child { border-bottom: 0; }
.rec-event {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rec-meta {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-left: var(--space-2xs);
}
.rec-note {
  display: block;
  color: var(--muted);
  font-size: var(--step--1);
}