body {
  font-family: 'DM Mono', monospace;
  color: #111111;
}

.zg-header h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  font-weight: 400;
  color: #111111;
}

.zg-header p {
  font-size: 12px;
  color: #888888;
  letter-spacing: 0.04em;
}

.zg-card {
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.zg-card:hover {
  border-color: rgba(0,0,0,0.4);
}

.zg-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: #f5f5f5;
  overflow: hidden;
  display: block;
}

.zg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s;
}

.zg-thumb:hover img {
  opacity: 0.85;
}

.zg-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #aaaaaa;
  letter-spacing: 0.08em;
}

.zg-title {
  font-family: 'DM Serif Display', serif;
  font-size: 16px;
  font-weight: 400;
  color: #111111;
}

.card-body,
.card-footer {
  font-family: 'Times New Roman', Times, serif;
}

.zg-btn {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
}

.zg-notable-badge {
  font-size: 10px;
  letter-spacing: 0.04em;
}