/* Root landing page — page-specific rules only (shared chrome lives in /shared/base.css) */
main {
  max-width: 720px;
  margin: var(--space-10) auto;
  padding: 0 var(--space-4);
  display: grid;
  gap: var(--space-4);
}

a.card {
  display: block;
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

a.card:hover {
  border-color: var(--accent-200);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

a.card h2 {
  margin: 0 0 4px;
  font-size: var(--text-md);
  color: var(--accent);
}

a.card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

@media (max-width: 600px) {
  main {
    margin: var(--space-6) auto;
  }
}