/* --- tarot birth cards -------------------------------------------------------------
   The cards face up in two groups, the date's and the year's, each with its
   number underneath; then the sums, one per line, the way they would be done
   on paper. Nothing here moves: there is nothing to draw.
   ------------------------------------------------------------------------- */

.bc__groups { display: grid; gap: 2.75rem; }
@media (min-width: 52rem) {
  .bc__groups { grid-template-columns: 3fr 2fr; align-items: start; }
}

.bc__group { display: grid; gap: 1.25rem; justify-items: center; }
.bc__group h2 { text-align: center; }

.bc__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem clamp(0.75rem, 3vw, 1.5rem);
}

.bc__seat {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  width: clamp(5.25rem, 25vw, 9rem);
}

.bc__label { text-align: center; line-height: 1.2; }
.bc__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.bc__role {
  display: block;
  font-size: var(--step--1);
  color: var(--paper-mute);
}

.bc__working > h3 { margin-top: 1.75rem; }
.bc__working > h3:first-child { margin-top: 0; }

.bc__steps {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}
.bc__steps li {
  display: grid;
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
  gap: 0.2rem 1.25rem;
  padding-block: 0.55rem;
  border-top: var(--rule);
}
.bc__sum {
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bc__why { color: var(--paper-mute); font-size: var(--step--1); align-self: center; }

@media (max-width: 30rem) {
  .bc__steps li { grid-template-columns: minmax(0, 1fr); }
  .bc__sum { white-space: normal; }
}