/* Landing pages under /books/, /library/, /holidays/ … (tools/gen_landing_pages.py).
   Builds on v2.css and sponsor.css; only the pieces those two lack are here. */

.lp-head { max-width: var(--wide); margin: 0 auto clamp(1.8rem, 4vw, 2.8rem); }

/* a flat cover as the hero plate (comics, single covers) */
.s-hero__plate.lp-flat { align-self: center; overflow: visible; padding: clamp(1rem, 3vw, 2rem) 0; }
.s-hero__plate.lp-flat img {
  width: min(100%, 22rem); margin: 0 auto; border-radius: 3px;
  -webkit-mask-image: none; mask-image: none;
  box-shadow: 0 34px 60px -28px rgba(0, 0, 0, .8);
}

/* inside pages */
.lp-inside { padding: clamp(3rem, 7vw, 5.5rem) var(--gut); border-top: 1px solid var(--rule); }
.lp-inside .pages { padding: 0; }
.pages__row.lp-pages--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; margin: 0 auto; }
@media (max-width: 40rem) { .pages__row.lp-pages--2 { grid-template-columns: 1fr; } }

/* volume list */
.lp-vols { padding: clamp(3rem, 7vw, 5.5rem) var(--gut); border-top: 1px solid var(--rule); }
.lp-vols__list { max-width: var(--wide); margin: 0 auto; padding: 0; list-style: none; display: grid; gap: 0; }
.lp-vol {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start; padding: clamp(1.4rem, 3vw, 2rem) 0; border-top: 1px solid var(--rule);
}
.lp-vol:last-child { border-bottom: 1px solid var(--rule); }
.lp-vol > div:only-child { grid-column: 1 / -1; }
@media (max-width: 34rem) { .lp-vol { grid-template-columns: 1fr; } .lp-vol__cover img { width: 8rem; } }
.lp-vol__cover { margin: 0; }
.lp-vol__cover img { border-radius: 2px; box-shadow: 0 18px 34px -18px rgba(36, 20, 23, .6); }
.lp-vol h3 { margin: 0 0 .3rem; font: 700 1.35rem/1.25 var(--display); }
.lp-vol__fmt {
  margin: 0 0 .8rem; font: 400 .68rem/1.4 var(--util);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.lp-vol p { margin: 0 0 .9rem; font-weight: 300; color: var(--ink-mid); max-width: 70ch; }
.lp-vol__links { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.1rem !important; }

/* cards linking to the work pages */
.lp-cards { padding: clamp(3rem, 7vw, 5.5rem) var(--gut); border-top: 1px solid var(--rule); background: var(--paper-2); }
.lp-cards + .lp-cards { border-top: 0; padding-top: 0; }
.lp-cards__grid {
  max-width: var(--wide); margin: 0 auto; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: clamp(1rem, 2.5vw, 1.8rem);
}
.lp-cards__grid a {
  display: block; height: 100%; padding: 1.2rem 1.2rem 1.5rem; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); transition: border-color .2s ease, transform .2s ease;
}
.lp-cards__grid a:hover { border-color: var(--gold); transform: translateY(-2px); }
.lp-cards__grid figure { margin: 0 0 1rem; }
.lp-cards__grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.lp-cards__grid .he { margin: 0; font-size: 1.15rem; color: var(--burgundy); }
.lp-cards__grid h3 { margin: .2rem 0 .3rem; font: 700 1.2rem/1.2 var(--display); }
.lp-card__ed { margin: 0; font: 400 .66rem/1.5 var(--util); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.lp-card__go { margin: .9rem 0 0; font: 500 .72rem/1 var(--util); letter-spacing: .14em; text-transform: uppercase; color: var(--burgundy); }

/* single note block (e.g. "coming") */
.lp-note { padding: clamp(3rem, 7vw, 5rem) var(--gut); border-top: 1px solid var(--rule); max-width: calc(var(--wide) + 2 * var(--gut)); margin: 0 auto; }
.lp-note p:last-child { margin: 1.6rem 0 0; }

/* nonprofit line above the footer */
.lp-about { padding: clamp(2.5rem, 6vw, 4rem) var(--gut); border-top: 1px solid var(--rule); max-width: calc(var(--wide) + 2 * var(--gut)); margin: 0 auto; }
.lp-about p:last-child { margin: 0; font-weight: 300; color: var(--ink-mid); max-width: 72ch; }