/* ===================================================================
   Memos & History Bits — sub-collection pages (memo-collection.php,
   shared by all 15 named collections under the hub, page 495).
   Built entirely on the --df-* tokens from homepage-redesign.css
   (loaded first as a dependency), same as every other redesigned page.
   =================================================================== */

.df-doc-controls {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0 40px;
}

.df-doc-search {
  flex: 1;
  min-width: 200px;
  max-width: 380px;
  background: var(--df-panel);
  border: 1px solid var(--df-border);
  color: var(--df-text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  padding: 11px 14px;
  border-radius: 6px;
  outline: none;
}
.df-doc-search::placeholder {
  color: var(--df-dim);
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}
.df-doc-search:focus { border-color: var(--df-accent); }

.df-doc-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.df-doc-filter {
  background: none;
  border: 1px solid var(--df-chip-border);
  color: var(--df-muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.df-doc-filter.is-active { color: var(--df-accent); border-color: var(--df-accent); background: var(--df-pill-bg); }
.df-doc-filter:hover:not(.is-active) { color: var(--df-text); }

.df-doc-decade { margin-bottom: 44px; }
.df-doc-decade-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--df-border);
}
.df-doc-decade-label { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 21px; color: var(--df-text); }
.df-doc-decade-blurb { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .04em; color: var(--df-muted); }

.df-doc-list { display: flex; flex-direction: column; gap: 14px; }
.df-doc-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--df-panel);
  border: 1px solid var(--df-border);
  border-radius: 8px;
  padding: 18px;
}
.df-doc-thumb { width: 96px; height: 96px; flex-shrink: 0; border-radius: 5px; object-fit: cover; }
.df-doc-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--df-img-bg);
  color: var(--df-dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px dashed var(--df-line);
}
.df-doc-body { flex: 1; min-width: 0; }
.df-doc-meta {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--df-accent);
  margin-bottom: 8px;
}
.df-shell .df-doc-title {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--df-text);
  text-decoration: none;
  margin-bottom: 6px;
  line-height: 1.3;
}
.df-doc-title:hover { color: var(--df-accent); }
.df-doc-excerpt { font-size: 13.5px; line-height: 1.55; color: var(--df-text2); margin: 0 0 10px; }
.df-shell .df-doc-more {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--df-accent);
  text-decoration: none;
  font-weight: 600;
}
.df-doc-more:hover { text-decoration: underline; }

.df-doc-empty-state,
.df-doc-empty-collection {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--df-muted);
  text-align: center;
  padding: 40px 0;
}

@media (max-width: 600px) {
  .df-doc-card { flex-direction: column; }
  .df-doc-thumb { width: 100%; height: 160px; }
}