/* ============================================================
   M.A. Knights — Books page, Fantasy Tavern treatment
   Unlike the homepage (parchment page, wood hero), this page runs
   the other way: the wood-panel texture continues straight down
   from the nav bar as the page background, and every block of
   content sits on top of it as its own parchment card.

   Scoped to books.html only via body.books-page — doesn't touch
   style.css's .card/.btn etc, which stay as-is on other pages.
   Colours are hardcoded (see tavern-nav-footer.css for why).
   ============================================================ */

body.books-page{
  background:#241a10 url('/assets/img/wood-texture.jpg') 0 0/220px repeat;
}

/* ---------- Page title band ---------- */
.bk-title{ padding:40px 56px 22px; }
.bk-title-inner{ max-width:1100px; margin:0 auto; }
.bk-kicker{
  color:#e7a53f; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; margin-bottom:10px;
}
.bk-title h1{
  font-family:'Playfair Display', Georgia, serif; color:#f5ead6; font-size:40px;
  margin:0 0 12px; font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.bk-title p{ color:rgba(245,234,214,.78); font-size:16px; line-height:1.7; max-width:60ch; margin:0; }

/* A recessed wood-panel "plaque" behind the title and each series heading —
   plain text was getting lost against the busy wood grain, so these get a
   darker inset panel, a hairline amber border, and a thin brass-inlay bar
   on top, the same way a sign would be set into a tavern wall. */
.bk-title-inner, .bk-series-heading-inner{
  position:relative;
  padding:28px 36px;
  background:linear-gradient(180deg, rgba(15,10,6,.66), rgba(15,10,6,.46));
  border:1px solid rgba(231,165,63,.32);
  border-radius:8px;
  box-shadow:0 20px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.bk-title-inner::before, .bk-series-heading-inner::before{
  content:""; position:absolute; top:0; left:28px; right:28px; height:2px;
  background:linear-gradient(90deg, transparent, #e7a53f 20%, #e7a53f 80%, transparent);
  opacity:.8;
}

/* ---------- Section rhythm ---------- */
.bk-section{ padding:26px 56px; }
.bk-section-inner{ max-width:1100px; margin:0 auto; }
.bk-sep{ border:0; border-top:1px solid rgba(245,234,214,.14); margin:8px 0 34px; max-width:1100px; margin-left:auto; margin-right:auto; }

/* ---------- Base parchment card ---------- */
.bk-card{
  background:#fbf3e4 url('/assets/img/parchment-texture.jpg') 0 0/300px repeat;
  border-radius:6px; box-shadow:0 22px 44px rgba(0,0,0,.4);
  position:relative; color:#1a1108;
}
.bk-card h2, .bk-card h3{ font-family:'Playfair Display', Georgia, serif; color:#1a1108; margin-top:0; }
.bk-card p{ color:#6b5744; line-height:1.7; }
.bk-card .note{ color:#6b5744; font-size:13px; }

/* Torn-paper edge, take four. Take three fixed the squashed-flat jaggedness,
   but two things were still off: (1) the strip's "solid" side was a flat
   baked colour, which read as a smooth patch against the noisy parchment
   grain — a straight edge in disguise. Now it's masked over the box's own
   real parchment-texture background instead of a flat fill, so there's no
   seam to see. (2) it bled ~1.5% past the box on each side, leaving stray
   ragged bits floating past the corners — now flush with the box width.
   Applied to every parchment box: .bk-card, the Patreon serial cards (their
   wax seal moved to a real .bk-seal element so ::before/::after are free),
   and the book-grid tiles (smaller strip so it doesn't overwhelm them). */
.bk-card::before, .bk-card::after,
.bk-quest-card::before, .bk-quest-card::after,
.bk-book::before, .bk-book::after{
  content:""; position:absolute; left:0; right:0;
  background:#fbf3e4 url('/assets/img/parchment-texture.jpg') 0 0/300px repeat;
  -webkit-mask-image:url('/assets/img/torn-edge-strip.png');
  mask-image:url('/assets/img/torn-edge-strip.png');
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  pointer-events:none;
}
.bk-card::before, .bk-quest-card::before{ top:-16px; height:30px; }
.bk-card::after, .bk-quest-card::after{ bottom:-16px; height:30px; transform:scaleY(-1); }
.bk-quest-card::before, .bk-quest-card::after{ background-color:#f5ead6; }
.bk-book::before{ top:-9px; height:16px; }
.bk-book::after{ bottom:-9px; height:16px; transform:scaleY(-1); }

/* ---------- Two-column hero row: prequel card + cast poster ---------- */
.bk-grid-2{ display:grid; grid-template-columns:1.15fr .85fr; gap:30px; align-items:stretch; }

.bk-feature{ padding:30px; display:grid; grid-template-columns:200px 1fr; gap:26px; align-items:center; }
.bk-feature img.bk-cover{ width:100%; border-radius:6px; box-shadow:0 14px 28px rgba(0,0,0,.35); display:block; }
.bk-feature h2, .bk-feature h3{ font-size:24px; margin:0 0 10px; }
.bk-feature p{ margin:0 0 18px; font-size:15px; }
.bk-feature .btn-row{ display:flex; gap:10px; flex-wrap:wrap; }

.bk-poster-card{ padding:14px; display:flex; flex-direction:column; }
.bk-poster-card img{ width:100%; border-radius:6px; display:block; }
.bk-poster-card figcaption{ margin:12px 4px 4px; font-size:13px; color:#6b5744; text-align:center; }

/* ---------- Series title ---------- */
.bk-series-heading{ padding:30px 56px 6px; }
.bk-series-heading-inner{ max-width:1100px; margin:0 auto; }
.bk-series-heading h2{
  font-family:'Playfair Display', Georgia, serif; color:#f5ead6; font-size:28px; margin:0 0 8px;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.bk-series-heading p{ color:rgba(245,234,214,.72); font-size:15px; margin:0; }

/* ---------- Book grid ---------- */
.bk-book-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.bk-book{
  position:relative;
  background:#fbf3e4 url('/assets/img/parchment-texture.jpg') 0 0/300px repeat;
  border-radius:8px; padding:12px; text-align:center; text-decoration:none;
  color:#1a1108; box-shadow:0 14px 26px rgba(0,0,0,.32); display:block; transition:transform .15s ease;
}
.bk-book:hover{ transform:translateY(-4px); }
.bk-book img{ width:100%; border-radius:4px; display:block; margin-bottom:10px; box-shadow:0 4px 10px rgba(0,0,0,.2); }
.bk-book strong{ display:block; font-family:'Playfair Display', Georgia, serif; font-size:13px; color:#1a1108; }
.bk-book span{ display:block; font-size:11px; color:#6b5744; margin-top:3px; line-height:1.4; }

/* ---------- Two-up cards (Wilfred Bumblethump / How it works) ---------- */
.bk-pair{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.bk-pair .bk-card{ padding:28px; }
.bk-pair .how-icon{ display:block; width:60px; height:auto; margin:0 auto 14px; }

/* ---------- Patreon serials ---------- */
.bk-quest-row{ display:flex; gap:26px; }
.bk-quest-card{
  position:relative; flex:1;
  background:#f5ead6 url('/assets/img/parchment-texture.jpg') 0 0/300px repeat;
  border:1px solid rgba(26,17,8,.08);
  border-radius:6px; padding:30px 28px; box-shadow:0 20px 38px rgba(0,0,0,.3); color:#1a1108;
}
.bk-seal{
  position:absolute; top:-10px; right:26px; width:24px; height:24px; border-radius:50%;
  box-shadow:0 4px 8px rgba(0,0,0,.35); z-index:1;
}
.bk-seal-warm .bk-seal{ background:radial-gradient(circle at 35% 30%, #e7a53f, #c17f24 60%, #8a5a1c 100%); }
.bk-seal-dark .bk-seal{ background:radial-gradient(circle at 35% 30%, #4a8a5c, #2a5c38 60%, #163d22 100%); }
.bk-quest-card h3{ font-size:22px; margin:6px 0 10px; }
.bk-quest-card p{ font-size:14px; margin:0 0 18px; }
.bk-tag-pill{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; margin-bottom:12px;
}
.bk-tag-warm{ background:rgba(193,127,36,.14); color:#c17f24; border:1px solid rgba(193,127,36,.35); }
.bk-tag-dark{ background:rgba(42,92,56,.14); color:#2a5c38; border:1px solid rgba(42,92,56,.35); }
.btn-support{ background:linear-gradient(180deg,#7d3245,#6b2737); color:#f5ead6; box-shadow:0 10px 22px rgba(107,39,55,.35); }
.btn-support:hover{ color:#f5ead6; filter:brightness(1.08); }

/* ---------- Closing callout ---------- */
.bk-callout{ padding:30px; text-align:center; }
.bk-callout .btn-row{ justify-content:center; }

@media (max-width: 900px){
  .bk-title{ padding:36px 20px 6px; }
  .bk-title h1{ font-size:30px; }
  .bk-section{ padding:18px 20px; }
  .bk-series-heading{ padding:30px 20px 0; }
  .bk-grid-2{ grid-template-columns:1fr; }
  .bk-feature{ grid-template-columns:1fr; text-align:center; }
  .bk-feature img.bk-cover{ max-width:180px; margin:0 auto; }
  .bk-feature .btn-row{ justify-content:center; }
  .bk-book-grid{ grid-template-columns:repeat(2,1fr); }
  .bk-pair{ grid-template-columns:1fr; }
  .bk-quest-row{ flex-direction:column; }
}