/* The web reader: catalogue, book pages and free chapters.
   Layout only -- colours, type and the shell come from style.css. */

/* The marketing pages are a column of text; a shelf of covers is not. The
   chapter pages keep the narrow measure, which is the whole point of them. */
.wrap.wide { max-width: 1080px; }

.cards { list-style: none; padding: 0; display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.card a { display: block; text-decoration: none; }
.card img { width: 100%; height: auto; border-radius: 6px; display: block;
  box-shadow: 0 8px 24px rgb(0 0 0 / 28%); }
.card-title { display: block; margin-top: .6rem; font-weight: 600; line-height: 1.25; }
.card-author { display: block; font-size: .82rem; opacity: .62; margin-top: .15rem; }
.card-hook { font-size: .88rem; line-height: 1.45; opacity: .8; margin: .5rem 0 0; }

.book { display: grid; gap: 2rem; grid-template-columns: 300px 1fr; align-items: start;
  margin: 2rem 0 3rem; }
.book-cover { width: 300px; height: auto; border-radius: 8px;
  box-shadow: 0 12px 36px rgb(0 0 0 / 34%); }
.book-meta h1 { margin: 0 0 .3rem; line-height: 1.15; }
.byline { margin: 0 0 1rem; opacity: .66; }
.hook { font-size: 1.12rem; line-height: 1.5; margin: 0 0 1rem; }
.blurb { line-height: 1.6; opacity: .86; }
.note { font-size: .85rem; opacity: .6; }

.chapters { line-height: 2; padding-left: 1.4rem; }
.chapters .locked span { opacity: .42; }
.chapters .locked span::after { content: " · in the app"; font-size: .78rem; opacity: .7; }

/* A measure this narrow is the whole point of the page: it has to be pleasant
   enough that a stranger finishes chapter three. */
.chapter { max-width: 34rem; margin: 2rem auto 3rem; }
.chapter .kicker { font-size: .85rem; text-transform: uppercase; letter-spacing: .09em;
  opacity: .6; margin-bottom: .4rem; }
.chapter h1 { line-height: 1.2; margin: 0 0 1.6rem; }
.chapter p { font-size: 1.09rem; line-height: 1.72; margin: 0 0 1.15rem; }

.wall { max-width: 34rem; margin: 0 auto 3rem; padding: 1.8rem; border-radius: 10px;
  background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 10%); text-align: center; }
.wall-kicker { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  opacity: .6; margin: 0 0 .3rem; }
.wall h2 { margin: 0 0 .8rem; line-height: 1.25; }

.cta { display: inline-block; margin: 1rem 0 .4rem; padding: .78rem 1.5rem; border-radius: 999px;
  background: #E4783C; color: #1b0d18; font-weight: 700; text-decoration: none; }
.cta:hover { filter: brightness(1.07); }

.chapter-nav { max-width: 34rem; margin: 0 auto 4rem; display: flex;
  justify-content: space-between; gap: 1rem; }

@media (max-width: 720px) {
  .book { grid-template-columns: 1fr; }
  .book-cover { width: min(240px, 60%); }
}

/* On a phone the 170px floor plus a 2rem gap needs 372px and the content box
   is 342px, so the shelf drops to one column and nineteen books become sixteen
   screens. Most of the traffic this page is built for arrives on a phone. */
@media (max-width: 520px) {
  .cards { gap: 1.1rem 0.9rem; grid-template-columns: repeat(2, 1fr); }
  .card-hook { display: none; }
  .card-title { font-size: .95rem; }
}