/* ==========================================================================
   COMPONENTS · COLOPHON — the publication footer, set in the deckle well: the
   mark, columns of furniture links, the honest "calibrated against the
   published rubric" note, and a mono imprint line. Closes the issue.
   ========================================================================== */

.op-colophon {
  background: var(--surface-sunken);
  border-top: 2px solid var(--accent);
  padding-block: var(--space-xl) var(--space-lg);
}

.op-colophon__top {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 2fr;
  gap: var(--space-xl);
}

.op-colophon__about { max-width: 38ch; }
.op-colophon__blurb {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.op-colophon__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-lg);
}
.op-colophon__heading {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}
.op-colophon__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.op-colophon__list a {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
}
.op-colophon__list a:hover { color: var(--accent); }

.op-colophon__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}
.op-colophon__note {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-style: italic;
  color: var(--text-muted);
  max-width: 52ch;
}
.op-colophon__imprint {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-muted);
}

@media (max-width: 56.25rem) {
  .op-colophon__top { grid-template-columns: 1fr; gap: var(--space-lg); }
}