.basj-wrap {
  --basj-paper: #EFEEE7;
  --basj-ink: #22201C;
  --basj-ink-soft: #5B564C;
  --basj-rule: #D9D5C9;
  --basj-blue: #2B3A55;
  --basj-card-bg: #FAF9F5;
  --basj-danger: #8C3B2E;
  max-width: 880px;
  margin: 0 auto;
  color: var(--basj-ink);
  line-height: 1.55;
}
.basj-wrap *, .basj-wrap *::before, .basj-wrap *::after { box-sizing: border-box; }
.basj-wrap img { max-width: 100%; }

.basj-lede { font-size: 1.1rem; max-width: 68ch; }
.basj-pull-quote {
  font-size: 1.2rem; font-style: italic; margin: 24px 0; padding: 2px 0 2px 20px;
  border-left: 3px solid var(--basj-blue); max-width: 60ch;
}
.basj-pull-quote cite { display: block; margin-top: 8px; font-size: 0.85rem; font-style: normal; color: var(--basj-ink-soft); }

.basj-stats {
  display: flex; flex-wrap: wrap; gap: 24px;
  border-top: 1px solid var(--basj-rule); border-bottom: 1px solid var(--basj-rule);
  padding: 16px 0; margin: 24px 0;
}
.basj-stat { display: flex; flex-direction: column; }
.basj-stat-num { font-size: 1.6rem; line-height: 1; font-weight: 600; }
.basj-stat-label { color: var(--basj-ink-soft); font-size: 0.85rem; margin-top: 4px; }

.basj-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.basj-filter {
  padding: 6px 14px; border: 1px solid var(--basj-rule); border-radius: 999px;
  font-size: 0.85rem; text-decoration: none; color: var(--basj-ink-soft);
}
.basj-filter.active, .basj-filter:hover { color: var(--basj-ink); border-color: var(--basj-blue); }

.basj-empty {
  border: 1px dashed var(--basj-rule); border-radius: 3px;
  padding: 36px 20px; text-align: center; color: var(--basj-ink-soft);
}
.basj-empty p { margin: 0 0 14px; }

.basj-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.basj-card {
  background: var(--basj-card-bg); border: 1px solid var(--basj-rule); border-radius: 3px;
  overflow: hidden; display: block; text-decoration: none; color: inherit;
}
.basj-card:hover { border-color: var(--basj-blue); }
.basj-card-photo { aspect-ratio: 4 / 3; background: var(--basj-rule); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.basj-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.basj-silhouette { width: 46%; color: var(--basj-ink-soft); }
.basj-card-body { padding: 14px 16px 18px; }
.basj-card-name { font-size: 1.1rem; margin: 0 0 2px; line-height: 1.3; }
.basj-card-descriptor { color: var(--basj-ink-soft); font-size: 0.88rem; margin: 0 0 8px; }
.basj-card-tag {
  display: inline-block; font-size: 0.72rem; color: var(--basj-blue);
  border: 1px solid var(--basj-rule); border-radius: 999px; padding: 2px 10px; margin: 0 0 8px;
}
.basj-card-excerpt { font-size: 0.9rem; margin: 0; }

.basj-btn {
  display: inline-block; padding: 9px 16px; border-radius: 3px; text-decoration: none;
  font-size: 0.92rem; border: 1px solid var(--basj-rule); color: var(--basj-ink);
}
.basj-btn-primary { background: var(--basj-blue); border-color: var(--basj-blue); color: #fff; }

.basj-single .basj-detail-head { display: flex; gap: 20px; align-items: center; margin-bottom: 28px; flex-wrap: wrap; }
.basj-detail-photo {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--basj-rule);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.basj-detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.basj-detail-photo svg { width: 50%; color: var(--basj-ink-soft); }
.basj-detail-name { font-size: 1.7rem; margin: 0 0 4px; line-height: 1.2; }
.basj-detail-descriptor { color: var(--basj-ink-soft); margin: 0; }
.basj-detail-block { margin-bottom: 24px; }
.basj-detail-block h2 { font-size: 1.05rem; margin: 0 0 8px; color: var(--basj-blue); }
.basj-freeform { max-width: 68ch; white-space: pre-wrap; margin: 0; }
.basj-detail-record { border-top: 1px solid var(--basj-rule); padding-top: 18px; }
.basj-detail-record h2 { font-size: 0.8rem; color: var(--basj-ink-soft); margin: 0 0 12px; text-transform: none; }
.basj-detail-record dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.basj-detail-record dt { color: var(--basj-ink-soft); font-size: 0.85rem; }
.basj-detail-record dd { margin: 0; font-size: 0.9rem; }
.basj-back { margin-top: 24px; }

@media (max-width: 560px) {
  .basj-gallery { grid-template-columns: 1fr 1fr; }
  .basj-card-body { padding: 10px 12px 14px; }
}