.hero { margin: 0; background: var(--brand-olive-lt); }
.hero img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}
.hero .credit { padding: 4px var(--uni_margin); }

.credit {
  font-size: 11px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.detail-head { padding: 16px var(--uni_margin) 4px; }
.detail-title { font-size: 26px; }
.detail-sci { margin: 2px 0 0; font-style: italic; color: var(--text-muted); }
.detail-sub { margin: 2px 0 0; color: var(--text-muted); font-size: 14px; }

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 12px var(--uni_margin);
  padding: 12px 14px;
  background: var(--surface-raised);
  border-radius: var(--radius);
  font-size: 14px;
}
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.facts--refs dd { font-weight: 400; font-family: ui-monospace, monospace; font-size: 13px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 var(--uni_margin);
}
.gallery-item { margin: 0; background: var(--surface-raised); border-radius: var(--radius); overflow: hidden; }
.gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-item .credit { padding: 4px 8px 6px; }
.gallery-item--audio { grid-column: 1 / -1; padding-top: 8px; }
.gallery-item--audio audio { width: 100%; }