/* style.css - the one stylesheet every BookCove page uses. */

/* The whole page: a readable column of serif text. */
body {
  font-family: Georgia, serif;
  max-width: 40em;
  margin: 2em auto;
  padding: 0 1em;
  line-height: 1.6;
  color: #222;
  background: #fff;
}

a         { color: #1a4f8b; }
a:visited { color: #5a3a7a; }

h1 { margin-bottom: 0.2em; line-height: 1.2; }
h2 { margin-top: 1.6em; }

ul { padding-left: 1.2em; }

/* "BookCove > W. C. Tuttle" line at the top of story and author pages. */
.crumbs {
  font-size: 0.9em;
  color: #555;
  margin: 0 0 1.5em;
}

/* Quieter text: the "Transcribed from" line, notes, keys, blurbs. */
.source, .notes, .key, .blurb { color: #555; }
.key { font-size: 0.9em; }

/* Letter to returning readers on the home page. */
.letter {
  border-left: 3px solid #ccc;
  padding-left: 1em;
  margin: 1.5em 0 2em;
}

/* Row of magazine covers under the title on the home page.
   Covers vary a little in shape, so each is trimmed to the same 2:3 box. */
.cover-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5em;
  margin: 1em 0 1.5em;
}
.cover-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid #ccc;
}
.cover-strip a:hover img { border-color: #1a4f8b; }

/* ---- Story landing pages (showbook.php) ---- */

.by { margin-top: 0; font-size: 1.2em; }

.cover {
  float: right;
  width: 12em;
  margin: 0 0 1em 1.5em;
  border: 1px solid #ccc;
}

/* ---- Author and grouping pages ---- */

/* A list of stories: <li><a ...>Title</a> <span class="year">1923</span>
   <span class="wt">nv</span></li> */
.stories li { margin: 0.25em 0; }

/* The italic line under each section heading. */
.tagline { font-style: italic; color: #555; margin: -0.6em 0 0.6em; }

/* Series groups inside a list: a name, then its own short list. */
.stories .group { margin-top: 0.6em; }
.stories ul     { padding-left: 1.2em; margin: 0.2em 0; }
.stories .by { color: #555; font-size: 0.9em; }
/* A few lines about one story, under it in the list (Off the Trail). */
.stories .pick { margin: 0.2em 0 1.1em; color: #555; }
.year       { color: #555; }
.wt         { color: #555; font-size: 0.85em; }

/* ---- Narrow screens (phones) ---- */

@media (max-width: 30em) {
  .cover { float: none; display: block; margin: 0 auto 1em; }
  /* Four covers on a phone; six would be too small to make out. */
  .cover-strip { grid-template-columns: repeat(4, 1fr); }
  .cover-strip a:nth-child(n+5) { display: none; }
}