/* collection.css — Cascadia collection mirror.
   Its own layer per BENCH-COLLECTION-MIRROR-SPEC §5.2; reuses the house palette
   tokens from site.css (--oxblood, --gold, --green, --paper, --ink, ...).
   Covers the index card grid and the specimen detail pages. */

/* --- neutralize the global  p, li { max-width: var(--measure) }  (66ch) bleed on
   collection pages; these layouts control their own widths. --- */
.col-index p, .col-index li,
.collection-item p, .collection-item li { max-width: none; }

/* ---------- index ---------- */
.col-index h1 {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 600; letter-spacing: .01em; color: var(--oxblood);
  font-size: clamp(2rem, 4vw, 2.6rem); margin: 0 0 .25em;
}
.col-lede { max-width: 62ch; color: var(--ink-soft); }
.col-empty { color: var(--ink-soft); font-style: italic; }

.col-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px; margin: 28px 0 8px;
}
/* card frame is coloured by rarity (--rar, set inline per card) — mirrors the BENCH card */
.col-card {
  display: flex; flex-direction: column; background: var(--paper-panel);
  border: 2px solid var(--rar, #8a8a8a); border-radius: 8px; overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 8px 22px -15px var(--rar, #000);
  transition: transform .12s ease, box-shadow .12s ease;
}
.col-card:hover { transform: translateY(-3px); box-shadow: 0 13px 26px -12px var(--rar, #000); }
.col-card:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.col-card-img { aspect-ratio: 4 / 3; background: #ded7c6; overflow: hidden; border-bottom: 1px solid var(--rar, #8a8a8a); }
.col-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-card-noimg { background: repeating-linear-gradient(45deg, #ded7c6, #ded7c6 8px, #d5cdb9 8px, #d5cdb9 16px); }
.col-card-body { padding: 10px 12px 12px; }
.col-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.col-card-brand {
  font-family: "Barlow Condensed", system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 600; color: var(--oxblood); font-size: .9rem; line-height: 1.1;
}
.col-card-rarity {
  font-family: "IBM Plex Mono", monospace; font-size: .58rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: #fff; background: var(--rar, #8a8a8a); padding: 2px 7px; border-radius: 9px; white-space: nowrap;
}
.col-card-model { font-weight: 600; color: var(--ink); margin: 3px 0 5px; line-height: 1.25; }
.col-card-meta { font-family: "IBM Plex Mono", monospace; font-size: .7rem; color: var(--ink-soft); line-height: 1.4; }
.col-card-acc { font-family: "IBM Plex Mono", monospace; font-size: .68rem; color: var(--gold-dim); font-weight: 500; margin-top: 7px; }

/* plain-link fallback (crawlers / noscript / before images load) */
.col-fallback {
  list-style: none; padding: 0; margin: 26px 0 0; columns: 2;
  font-family: "IBM Plex Mono", monospace; font-size: .8rem;
}
.col-fallback a { color: var(--ink-soft); }
@media (max-width: 520px) { .col-fallback { columns: 1; } }

/* ---------- specimen detail ---------- */
.col-head { border-bottom: 2px solid var(--rar, var(--gold)); padding-bottom: 12px; margin-bottom: 22px; }
.col-topline { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.col-accession {
  font-family: "IBM Plex Mono", monospace; color: var(--gold-dim);
  letter-spacing: .14em; font-size: .85rem;
}
.col-rarity {
  font-family: "IBM Plex Mono", monospace; font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; background: var(--rar, #8a8a8a); padding: 2px 10px; border-radius: 10px;
}
.col-head h1 {
  font-family: "Barlow Condensed", system-ui, sans-serif; font-weight: 600;
  color: var(--oxblood); font-size: clamp(1.8rem, 4vw, 2.3rem); margin: .12em 0 .12em;
}
.col-sub { font-family: "IBM Plex Mono", monospace; color: var(--ink-soft); font-size: .85rem; }

.col-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin: 0 0 26px;
}
.col-photo {
  margin: 0; background: var(--paper-panel); border: 1px solid var(--gold);
  border-radius: 5px; overflow: hidden; aspect-ratio: 4 / 3;
}
.col-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.col-specs { border-collapse: collapse; margin: 0 0 24px; font-family: "IBM Plex Mono", monospace; font-size: .85rem; }
.col-specs th { text-align: left; padding: 5px 20px 5px 0; color: var(--ink-soft); font-weight: 500; white-space: nowrap; vertical-align: top; }
.col-specs td { padding: 5px 0; color: var(--ink); }

.col-condition h2 {
  font-family: "Barlow Condensed", system-ui, sans-serif; color: var(--oxblood);
  font-size: 1.3rem; letter-spacing: .01em; margin: 0 0 .35em;
}
.col-condition p { max-width: 64ch; color: var(--ink); }