.listing {
  min-height: 100vh;
  padding: clamp(2rem, 6vw, 5rem);
  background:
    radial-gradient(
      48rem 24rem at 100% 0%,
      color-mix(in srgb, var(--color-accent) 22%, transparent),
      transparent 60%
    ),
    var(--color-bg-deep);
}

.listing-head {
  max-width: 40rem;
  margin-bottom: var(--space-7);
}

.eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-accent);
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.listing-head h1 {
  margin: 0 0 var(--space-3);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: 0.04em;
}

.listing-head p {
  margin: 0;
  color: var(--color-ink-dim);
  font-size: 1.05rem;
  line-height: 1.7;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-5);
}

.card {
  display: block;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  min-height: 11rem;
}

.card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-line));
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.card time {
  color: var(--color-ink-dim);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.theme-pill {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-accent);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card h2 {
  margin: 0 0 var(--space-3);
  font-size: 1.25rem;
  letter-spacing: 0.03em;
}

.card p {
  margin: 0;
  color: var(--color-ink-dim);
  line-height: 1.6;
}

.empty {
  color: var(--color-ink-dim);
}