/* Training. Tokens only. */
.training-why p {
  max-width: 36ch;
  font-family: var(--font-serif);
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.strip .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 47.99rem) { .strip .photo-grid { gap: var(--space-2); } .strip figcaption { display: none; } }

/* A normal week: frequency, not a timetable. */
.week { width: 100%; max-width: 56rem; border-collapse: collapse; }
.week tr { border-top: var(--hairline) solid var(--line); }
.week tr:last-child { border-bottom: var(--hairline) solid var(--line); }
.week th, .week td { padding: var(--space-4) var(--space-4) var(--space-4) 0; text-align: left; vertical-align: top; }
.week th {
  width: 11rem;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: var(--weight-regular);
  color: var(--ink);
}
.week__when { color: var(--ink-2); line-height: var(--leading-snug); }
.week__dots { white-space: nowrap; padding-top: calc(var(--space-4) + 0.35em); }
.week__dots span {
  display: inline-block;
  width: var(--space-3);
  height: var(--space-3);
  margin-right: var(--space-1);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-round);
}
.week__dots .on { border-color: var(--accent); background: var(--accent); }
.week__dots .gold { border-color: var(--gold); background: var(--gold); }
@media (max-width: 47.99rem) {
  .week tr { display: grid; grid-template-columns: 1fr auto; padding-block: var(--space-4); }
  .week th, .week td { padding: 0; }
  .week th { width: auto; }
  .week__when { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-1); }
  .week__dots { grid-column: 2; grid-row: 1; padding-top: 0.35em; }
}

/* Clips: posters until you press play. */
.clips__note { color: var(--ink-3); max-width: 44ch; }
.clips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) { .clips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.clips .frame { --ratio: 9 / 16; background: var(--surface); }
.clips video { width: 100%; height: 100%; object-fit: cover; }
.clips figcaption { margin-top: var(--space-2); color: var(--ink-3); font-size: var(--step-n1); }