/* Styles for /reading (layouts/reading/list.html).
 *
 * The coder theme is a git submodule, so its stylesheet cannot carry
 * site-specific rules; the theme's own extension point is the `custom_css`
 * param in config.toml, which serves plain CSS out of static/. Rules here are
 * scoped under `.reading` so nothing leaks into the other list pages, and they
 * lean on the theme's existing `.list` geometry rather than restating it:
 * `.list ul li .date` is a 20rem right-aligned column with a 3rem gutter, which
 * is where the 23rem indent below comes from.
 */

.reading .reading-month h2 {
  margin: 2.4rem 0 0.8rem 0;
  font-size: 2rem;
}

.reading .source {
  margin-left: 0.8rem;
  opacity: 0.7;
  font-size: 1.4rem;
}

/* The excerpt is a subtitle under the entry, aligned with the title column and
 * capped at two lines. Full text stays reachable through the title attribute
 * the template sets, so nothing is lost to the clamp. */
.reading .excerpt {
  margin: 0.4rem 0 0 23rem;
  font-size: 1.5rem;
  line-height: 2.2rem;
  opacity: 0.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  /* Below 768px the theme drops `.date` to its own line, so the indent that
   * lines the excerpt up with the title on desktop would just be dead space. */
  .reading .excerpt {
    margin-left: 0;
  }
}