/* ==========================================================================
   Image credits: /image-credits. A compact, newspaper-style listing of every
   photograph's author, licence and source, grouped by where it is used.
   Class prefix: ic- (tokens from site.css).
   ========================================================================== */

.ic-head { padding: var(--s-5) 0 var(--s-4); background: var(--paper); border-bottom: 1px solid var(--line); }
.ic-crumbs ol {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin: 0 0 var(--s-3); padding: 0; list-style: none;
  font-size: 0.8rem; letter-spacing: 0.04em; color: var(--muted);
}
.ic-crumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--accent-soft); }
.ic-crumbs a { color: var(--muted); }
.ic-crumbs a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.ic-crumbs [aria-current] { color: var(--ink); }
.ic-title {
  margin: 0 0 0.3em;
  font-family: var(--font-serif); font-size: clamp(2.3rem, 4.6vw, 3.6rem); font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.05; color: var(--ink);
}
.ic-lede {
  max-width: 60ch; margin: 0;
  font-family: var(--font-serif); font-size: clamp(1.15rem, 1.6vw, 1.32rem); line-height: 1.5; color: var(--text);
}
.ic-note { max-width: 70ch; margin: var(--s-2) 0 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }

.ic-body { padding: var(--s-4) 0 var(--s-5); background: var(--mist); }

/* ------------------------------------------------------- Section index */

.ic-index { margin: 0 0 var(--s-4); }
.ic-index ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ic-index a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.85rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink); font-size: 0.88rem; font-weight: 500; text-decoration: none;
}
.ic-index a:hover { border-color: var(--accent); color: var(--accent-dark); }
.ic-count { font-size: 0.76rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Sections */

.ic-section { margin: 0 0 var(--s-4); padding-top: var(--s-2); border-top: 2px solid var(--ink); scroll-margin-top: calc(var(--header-h) + 1rem); }
.ic-h2 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-serif); font-size: clamp(1.45rem, 2.2vw, 1.85rem); font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
}
.ic-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4);
  margin: 0; padding: 0; list-style: none;
}
.ic-item {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0.9rem; align-items: start;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.ic-item:target { background: linear-gradient(90deg, rgba(110, 66, 166, 0.09), transparent 85%); box-shadow: -0.6rem 0 0 rgba(110, 66, 166, 0.09); }

.ic-thumb {
  display: block; width: 76px; height: 57px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.ic-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ic-thumb-blank { display: flex; align-items: center; justify-content: center; color: var(--accent-soft); }

.ic-text { min-width: 0; }
.ic-text p { margin: 0; }
.ic-subject { font-family: var(--font-serif); font-size: 1.06rem; line-height: 1.32; color: var(--ink); overflow-wrap: anywhere; }
.ic-subject a { color: var(--ink); text-decoration: none; }
.ic-subject a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.ic-date { font-family: var(--font); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.ic-date::before { content: "\2014\00a0"; color: var(--accent-soft); }
.ic-attrib { margin-top: 0.3rem !important; font-size: 0.84rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.ic-attrib a { color: var(--accent-dark); text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 2px; }
.ic-attrib a:hover { text-decoration-color: currentColor; }
.ic-author { color: var(--text); font-weight: 500; }
.ic-src { white-space: nowrap; }
.ic-nums { color: var(--muted); font-weight: 400; }
.ic-sep { margin: 0 0.4em; color: var(--accent-soft); }
.ic-changes { margin-top: 0.15rem !important; font-size: 0.78rem; color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------- Empty, foot */

.ic-empty { max-width: 34rem; margin: var(--s-3) 0 var(--s-4); padding: var(--s-4) var(--s-3); background: var(--paper); border: 1px solid var(--line); text-align: center; }
.ic-empty-icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; margin-bottom: var(--s-1); border-radius: 50%; background: var(--mist); color: var(--accent); }
.ic-empty h2 { margin: 0 0 0.4rem; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; color: var(--ink); }
.ic-empty p { margin: 0; color: var(--muted); }
.ic-contact { margin: var(--s-3) 0 0; font-size: 0.9rem; color: var(--muted); }
.ic-contact a { color: var(--accent-dark); }

@media (max-width: 900px) {
  .ic-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .ic-head { padding: var(--s-4) 0 var(--s-3); }
  .ic-item { grid-template-columns: 60px minmax(0, 1fr); gap: 0.75rem; }
  .ic-thumb { width: 60px; height: 45px; }
  .ic-index a { padding: 0.4rem 0.7rem; font-size: 0.84rem; }
}
@media print {
  .ic-index, .ic-thumb { display: none; }
  .ic-item { grid-template-columns: minmax(0, 1fr); break-inside: avoid; }
  .ic-body { background: none; }
}