.characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.character-card {
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border: 2px solid #d4d4d4;
  border-radius: 15px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}
.character-banner { height: 96px; background:#e0e0e0; overflow:hidden; }
.character-banner img { width:100%; height:100%; object-fit:cover; }
.character-row { display:flex; align-items:center; gap:10px; padding:12px; }
.character-avatar { width:56px; height:56px; border-radius:50%; background:#ddd; overflow:hidden; }
.character-avatar img { width:100%; height:100%; object-fit:cover; }
.character-info h3 { margin:0; font-size:1rem; }
.character-info p { margin:2px 0 0; color:#666; font-size:0.85rem; }

/* Skeuomorphic project card styles reused for character posts */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  width: 100%;
}
.project-card {
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border: 2px solid #d4d4d4;
  border-radius: 15px;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.project-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.project-thumb { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background-color: #e0e0e0; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.project-card:hover .project-thumb img { transform: scale(1.05); }
.project-card-info { padding: 12px; text-align: left; flex-grow: 1; display: flex; flex-direction: column; }
.project-card-info h3 { font-size: 1.1rem; margin: 0 0 4px; line-height: 1.3; }

