/* Public title pages (web/blog/build-titles.mjs). Typographic cards: no poster art. */
.title-card {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding-top: var(--space-6);
  margin-bottom: var(--space-6);
}
.title-card__art {
  flex: none;
  width: 120px;
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--title-color), oklch(0.2 0.03 275));
  color: #fff;
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  box-shadow: 0 16px 32px -16px rgb(0 0 0 / 0.8);
}
.title-card__text {
  min-width: 0;
}
.title-card__text .post__title {
  margin-top: var(--space-2);
}
.title-card__native {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}
.title-card__save {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-4);
  padding: 0 18px;
  border-radius: var(--radius-full);
  background: var(--color-primary-ink);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.title-card__save:hover {
  background: var(--color-primary-ink-hover);
  color: #fff;
}
@media (max-width: 520px) {
  .title-card__art {
    width: 84px;
    font-size: 2rem;
  }
}
.title-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.title-facts div {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.title-facts dt {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}
.title-facts dd {
  margin: 2px 0 0;
  font-weight: var(--font-weight-semibold);
}
.title-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2) var(--space-5);
  padding: 0;
  list-style: none;
}
.title-list a {
  font-weight: var(--font-weight-semibold);
}
.title-list span {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}