/* The stories remain visible before JavaScript and on small screens. */
.free-reads-page .reads-grid { max-width: 1050px; }
.free-read-card {
  display: grid;
  grid-template-columns: minmax(135px, 200px) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 42px);
  padding: clamp(22px, 4vw, 38px);
  align-items: start;
}
.free-read-cover { width: 100%; max-width: 200px; aspect-ratio: 874 / 1240; object-fit: cover; border-radius: 5px; box-shadow: 0 12px 28px rgba(0, 0, 0, .2); }
.free-read-copy { min-width: 0; }
.free-read-copy h2 { margin-bottom: 14px; font-size: clamp(1.45rem, 3vw, 1.85rem); }
.free-read-copy .read-card-excerpt { white-space: pre-line; }
.free-read-copy .read-card-excerpt summary { cursor: pointer; color: var(--color-text); font-style: normal; min-height: 24px; }
.free-read-copy .read-card-excerpt p { margin-top: 14px; margin-bottom: 0; }
.free-read-copy .btn { width: auto; min-height: 46px; }
.free-read-note { font-size: .875rem; color: var(--color-text-muted); font-style: italic; }
.free-reads-empty { padding: 40px 20px; text-align: center; color: var(--color-text-muted); }
.free-read-card--no-cover { grid-template-columns: 1fr; }
@media (max-width: 560px) {
  .free-read-card { grid-template-columns: 1fr; gap: 24px; }
  .free-read-cover { width: 150px; justify-self: center; }
  .free-read-copy .btn { width: 100%; }
  .free-read-copy h2 { font-size: 1.45rem; }
  .free-read-copy .read-card-meta { flex-wrap: wrap; gap: 8px 18px; }
}