/* A collection's page (collection-site.ts), on top of site.css: the books, each linked to its own page, and the render
   of the books together. A file, never inline: book pages run a CSP without 'unsafe-inline'. */
/* The hero picture is the books together (a wide render: the collection's cover), not one portrait cover. It runs the
   full width above the title on a phone, and across both columns above the title and the buying block on a wider
   screen. This file loads after site.css on collection pages only, so these rules replace the book page's hero grid. */
.hero { grid-template-columns:minmax(0, 1fr); grid-template-areas:"cover" "title" "buy"; align-items:start; gap:18px 16px; }
.hero .cover { border-radius:4px; }
@media (min-width: 761px) {
  .hero { grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); grid-template-areas:"cover cover" "title buy"; gap:32px 56px; align-items:start; }
  .hero-title { align-self:start; padding-top:0; }
  .hero-buy { align-self:start; padding-top:4px; }
}
.books { padding:28px 0 8px; border-top:1px solid var(--rule); }
.books h2 { font:500 clamp(28px, 4vw, 40px)/1.1 "Cormorant Garamond", Georgia, serif; margin:.2em 0 .8em; }
.book-cards { list-style:none; margin:0; padding:0; display:grid; gap:24px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
.book-card { display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start; background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:16px; }
.book-card img { width:96px; height:auto; display:block; border-radius:2px; box-shadow:0 6px 18px rgba(0,0,0,.45); }
.book-card h3 { font:600 22px/1.15 "Cormorant Garamond", Georgia, serif; margin:0 0 4px; }
.book-card h3 a { color:var(--ink); text-decoration:none; }
.book-card h3 a:hover, .book-card h3 a:focus-visible { text-decoration:underline; }
.book-card p { margin:0 0 8px; font-size:16px; }
.book-card .byline { color:var(--muted); font-style:italic; }
.book-card .book-subtitle { color:var(--muted); }
.together { margin:0 0 20px; }
.together img { display:block; width:100%; height:auto; border-radius:6px; }
@media (max-width: 480px) {
  .book-card { grid-template-columns:72px 1fr; gap:12px; padding:12px; }
  .book-card img { width:72px; }
}
/* The saving against the books' own prices (collection-site.ts compareAt; generated, never typed): on each format
   card, under the ebook add-on, and in the hero. The struck figure is the sum of the books' own prices. */
.card-anchor, .addon-anchor { display:block; font-size:15px; line-height:1.5; color:var(--muted); }
.card-anchor s, .addon-anchor s, .hero-anchor s { color:var(--muted); text-decoration-thickness:1px; }
.card-anchor b, .addon-anchor b { font-weight:400; color:var(--ink); background:rgba(201, 164, 92, .18); padding:0 5px; margin-left:4px; white-space:nowrap; }
.addon-anchor { margin-top:4px; }
.hero-anchor { margin:-4px 0 12px; font-size:17px; line-height:1.45; color:var(--ink); }
.hero-anchor b { font-weight:400; color:var(--accent); }
.checkout .card-anchor, .checkout .addon-anchor, .checkout .card-anchor s, .checkout .addon-anchor s { color:var(--paper-muted); }
.checkout .card-anchor b, .checkout .addon-anchor b { color:var(--wine); background:#f3e6c8; }
/* Selling points under the hero (as a book page's listing.usps; the rules of sell.css, which collection pages don't load). */
.usps-cta { margin:22px 0 0; }
.usps-cta .btn.wide { max-width:520px; }
.usp-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; }
.usp-list li { background:var(--panel); border:1px solid var(--rule); border-top:2px solid var(--accent); padding:16px 18px 14px; }
.usp-list h3 { font:600 22px/1.15 "Cormorant Garamond", serif; color:var(--ink); margin:0 0 6px; }
.usp-list p { margin:0; font-size:17px; line-height:1.5; color:var(--muted); }
.usps h2 { font:500 clamp(28px, 4vw, 40px)/1.1 "Cormorant Garamond", Georgia, serif; margin:.2em 0 .8em; }
@media (min-width: 761px) {
  .usp-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
  .usp-list h3 { font-size:25px; }
}
/* The next set up, under the format cards: its extra cost per format and what each added book costs at that price. */
.stepup { margin:22px 0 0; padding:16px 18px 12px; background:var(--panel); border:1px solid var(--accent); }
.stepup-pitch { margin:0 0 8px; font:italic 500 21px/1.25 "Cormorant Garamond", serif; color:var(--ink); }
.stepup-diffs { list-style:none; margin:0 0 6px; padding:0; display:grid; gap:4px; font-size:16px; line-height:1.45; color:var(--muted); }
.stepup-diffs b { font-weight:400; color:var(--accent); }
.stepup .small { margin:6px 0 0; }
/* A smaller set inside this one, set beside it: both prices and the price per book (only where this set is less). */
.compare { margin:22px 0 0; padding:14px 18px 10px; background:var(--panel); border:1px solid var(--rule); }
.compare-pitch { margin:0 0 8px; font:italic 500 20px/1.25 "Cormorant Garamond", serif; color:var(--ink); }
.compare-rows { list-style:none; margin:0 0 6px; padding:0; display:grid; gap:4px; font-size:16px; line-height:1.45; color:var(--muted); }
.compare-rows b { font-weight:600; color:var(--ink); }
.compare .small { margin:6px 0 0; }
/* A collection's title can be long ("Eleven Classics of Terror: The Whole Shelf"): let it wrap in the sticky bar
   rather than run under the button on a phone. */
.sticky-text .nw:first-child { white-space:normal; }