/* Kingfish Data landing page. Tokens and chrome come from kingfish.css. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--kf-paper);
  color: var(--kf-ink);
  font: 400 1rem/1.6 var(--kf-font-sans);
}

.home {
  flex: 1;
  width: 100%;
  max-width: var(--kf-max);
  margin: 0 auto;
  padding: 3.5rem clamp(12px, 3vw, 28px) 1rem;
  outline: none;
}

.home__head {
  max-width: var(--kf-measure);
  margin-bottom: 2.5rem;
}

.home__head h1 {
  margin: 0;
  font: 700 clamp(2.25rem, 6vw, var(--kf-text-display)) / 1.1 var(--kf-font-display);
  color: var(--kf-bayou);
}

.home__lede {
  margin: 0.75rem 0 0;
  font: 400 var(--kf-text-lede) / 1.5 var(--kf-font-serif);
  color: var(--kf-ink);
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1.25rem;
}

/* Story-card treatment: hairline border, 4px radius, no lift or shadow. */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--kf-light);
  border-radius: var(--kf-radius-sm);
  background: var(--kf-paper);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.card:hover {
  border-color: var(--kf-bayou);
}

.card__name {
  margin: 0 0 0.4rem;
  font: 600 var(--kf-text-h3) / 1.3 var(--kf-font-serif);
  color: var(--kf-ink);
}

.card:hover .card__name {
  color: var(--kf-bayou);
}

.card__tagline {
  flex: 1;
  margin: 0;
  color: var(--kf-fog);
  font-size: var(--kf-text-small);
}

.card__path {
  margin-top: 1rem;
  font: 400 var(--kf-text-micro) / 1.4 var(--kf-font-mono);
  color: var(--kf-bayou);
}