/* ==========================================================================
   suzannedolanart.com : p-work-index.css
   The Work archive only (src/views/pages/work-index.ts). Tokens and
   components come from site.css; nothing in here overrides them.
   ========================================================================== */

.archive__head {
  padding-top: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  padding-bottom: var(--s-8);
}
.archive__note {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}
.archive__empty { color: var(--ink-soft); }

/* round 5 (FIX-ROUND-5.md section D): one continuous grid, newest first by the curated order, 3 / 2 / 1 columns
   from site.css .grid (from 1000px / from 620px / below); the year sits in each label, so there are no year sections
   and no "Undated" heading. Round 13: the cards are photographs on the paper (no field, no cutout, no shadow), the
   label 16px under the photograph; every cell stretches to its row and the photograph stands on the cell's bottom
   edge, so within a row the photographs share one base line and the labels line up whatever their aspects. */
.archive__grid { margin: 0; align-items: stretch; }
.arch-card { margin: 0; display: flex; }
.arch-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.arch-card__link:focus-visible { outline-offset: 4px; }
.arch-card__photo {
  flex: 1 0 auto;
  display: flex;
  align-items: flex-end;
  line-height: 0;
}
.arch-card__photo .photo { display: block; width: 100%; height: auto; border-radius: 0; }
/* the paper plate for a work with no photograph (.paper-plate) is a shared component in site.css; here it keeps
   the 4:5 of a typical cover */
.arch-card__photo--missing .paper-plate { aspect-ratio: 4 / 5; height: auto; line-height: 1.5; }
.arch-card .label { margin-top: 16px; }
.arch-card__link:hover .label__title cite,
.arch-card__link:focus-visible .label__title cite {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
  text-decoration-color: var(--ink-soft);
}