/* =========================================================================
   Globic Press — BOOK PAGE TEMPLATE
   Used by every individual book page, loaded AFTER styles.css.
   Markup: <body class="bp-site"> ... <main id="main" class="bookpage">.
   The header, footer and cookie banner keep the site's markup (styles.css)
   but are recoloured here (section 13) to match each book's palette.

   Each book sets its own palette by overriding the --bp-* tokens on .bp-site
   in a small <style> block in that page's <head> (see CLAUDE.md §8a).
   The defaults below are the palette of "If Only the Dead Could Listen".
   Sections: 1 Tokens  2 Base  3 Hero  4 About  5 Quote band  6 Contents
             7 Timeline  8 Praise  9 Audiences  10 Author  11 Details
             12 Responsive  13 Site chrome (header, footer, cookie banner)
   ========================================================================= */

/* 1. TOKENS (override per book) ----------------------------------------- */
.bp-site {   /* tokens live on <body class="bp-site"> so header, main and footer share them */
  --bp-accent:      #B7281C;   /* title colour, eyebrows, rules (from the cover) */
  --bp-accent-dk:   #8F1E14;   /* accent hover */
  --bp-title:       #23225B;   /* headings, author name */
  --bp-ink:         #1E1915;   /* body text */
  --bp-muted:       #5C534A;   /* AA on the hero gradient */
  --bp-sand:        #F4EDE1;   /* page background */
  --bp-sand-2:      #EADFCB;   /* alternate section background */
  --bp-rule:        #D9CDB8;
  --bp-dusk:        #16110E;   /* fallback behind the quote band image */
  --bp-hero-bg:     linear-gradient(180deg, #E9DFCC 0%, #E3CFAE 62%, #D9B98F 100%);
  --bp-details-bg:   #E6D8BF;               /* publication-details panel (warm sand from the cover sky) */
  --bp-details-ink:  var(--bp-ink);         /* body text on the panel */
  --bp-details-head: var(--bp-title);       /* headings and links on the panel */
  --bp-details-hi:   var(--bp-accent-dk);   /* small labels on the panel (AA on the sand) */
  --bp-details-rule: rgba(35, 34, 91, .16); /* table / list dividers */
  --bp-footer-bg:   #16110E;   /* site footer on book pages */
  --bp-footer-ink:  #CBBFAF;   /* footer text */

  --bp-display: "Oswald", "Arial Narrow", sans-serif;
  --bp-serif:   "Libre Caslon Text", Georgia, serif;
  --bp-sans:    "Montserrat", Arial, sans-serif;
}

/* 2. BASE ------------------------------------------------------------------ */
.bookpage { font-family: var(--bp-serif); font-size: 18px; line-height: 1.65; color: var(--bp-ink); background: var(--bp-sand); }
:where(.bookpage) p { color: inherit; margin: 0 0 1em; }
:where(.bookpage) a { color: var(--bp-accent); }
:where(.bookpage) a:hover { color: var(--bp-accent-dk); }
:where(.bookpage) :is(h1, h2, h3) { font-family: var(--bp-display); font-weight: 500; line-height: 1.08; letter-spacing: 0; margin: 0; }
:where(.bookpage) h2 { font-size: clamp(30px, 4vw, 42px); color: var(--bp-title); margin-bottom: 22px; }
:where(.bookpage) h3 { font-size: 22px; color: var(--bp-title); margin-bottom: 8px; }
:where(.bookpage) section { padding: 80px 0; }
.bp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.bp-eyebrow { display: block; font: 600 13px/1.2 var(--bp-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bp-accent); margin: 0 0 14px; }
.bp-footnote { font-size: 15px; color: var(--bp-muted); }

.bp-btn {
  display: inline-block; font: 600 14px/1.2 var(--bp-sans); letter-spacing: .06em; text-decoration: none;
  padding: 13px 20px; border-radius: 2px; border: 1.5px solid var(--bp-title); color: var(--bp-title);
  background: transparent; transition: background .15s, color .15s, border-color .15s;
}
.bp-btn:hover { background: var(--bp-title); color: #fff; }
.bp-btn--primary { background: var(--bp-accent); border-color: var(--bp-accent); color: #fff; }
.bp-btn--primary:hover { background: var(--bp-accent-dk); border-color: var(--bp-accent-dk); color: #fff; }

/* 3. HERO ------------------------------------------------------------------ */
.bp-hero { background: var(--bp-hero-bg); padding: 40px 0 90px; }
.bp-crumbs { font: 500 13px var(--bp-sans); color: var(--bp-muted); padding-top: 4px; }
.bp-crumbs a { color: var(--bp-muted); text-decoration: underline; }
.bp-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; margin-top: 28px; }
.bp-author { font: 500 24px var(--bp-sans); color: var(--bp-title); margin: 0 0 10px; }
.bp-hero h1 { font-size: clamp(46px, 7vw, 86px); color: var(--bp-accent); letter-spacing: -.005em; margin-bottom: 18px; }
.bp-tagline { font-style: italic; font-size: clamp(20px, 2.4vw, 25px); color: var(--bp-title); margin-bottom: 26px; max-width: 36ch; }
.bp-lede { max-width: 56ch; margin-bottom: 28px; }
.bp-price { font: 600 15px var(--bp-sans); color: var(--bp-title); letter-spacing: .02em; margin-bottom: 16px; }
.bp-price span { color: var(--bp-muted); font-weight: 500; }
#buy { scroll-margin-top: 220px; }  /* "Buy" links land on price + buttons, clear of the sticky header */
.bp-buy { display: flex; flex-wrap: wrap; gap: 10px; }
.bp-cover { justify-self: center; position: relative; }
.bp-cover img { display: block; width: min(100%, 380px); height: auto; border-radius: 1px 3px 3px 1px;
  box-shadow: 0 2px 3px rgba(0,0,0,.18), 0 28px 50px -14px rgba(40,22,10,.55); }
.bp-cover::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3.5%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0)); }
.bp-badge { position: absolute; top: -14px; right: -14px; width: 104px; height: 104px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px 12px;
  background: var(--bp-title); color: #fff; font: 600 12px/1.25 var(--bp-sans); letter-spacing: .12em; text-transform: uppercase; }

/* 4. ABOUT ----------------------------------------------------------------- */
.bp-about-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 64px; }
.bp-hook { font-size: 24px; line-height: 1.4; font-style: italic; color: var(--bp-title); margin-bottom: 22px; }
.bp-panel { align-self: start; background: #fff; border: 1px solid var(--bp-rule); padding: 28px 28px 22px; }
.bp-panel dl { margin: 0; }
.bp-panel dt { font: 600 12px var(--bp-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--bp-accent); margin-top: 14px; }
.bp-panel dt:first-child { margin-top: 0; }
.bp-panel dd { margin: 4px 0 0; font-size: 16px; line-height: 1.5; }
.bp-panel .bp-minor { color: var(--bp-muted); }

/* 5. QUOTE BAND ------------------------------------------------------------ */
/* Each page sets its own image: .bookpage .bp-band { background-image: url("assets/img/band-<surname>-<isbn>.jpg"); } */
.bp-band { background: var(--bp-dusk) center bottom / cover no-repeat;
  min-height: 600px; display: flex; align-items: flex-start; padding: 80px 0 0; text-align: center; }
.bp-band blockquote { margin: 0 auto; max-width: 820px; padding: 0 24px; }
.bp-band p { font-style: italic; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.3; color: var(--bp-title); margin-bottom: 16px; }
.bp-band cite { font: 600 14px var(--bp-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bp-title); font-style: normal; }  /* title colour: AA on the photo */

/* 6. CONTENTS -------------------------------------------------------------- */
.bp-inside { background: #fff; }
.bp-inside-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.bp-toc { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.bp-toc li { counter-increment: t; display: grid; grid-template-columns: 44px 1fr; padding: 16px 0; border-top: 1px solid var(--bp-rule); }
.bp-toc li:last-child { border-bottom: 1px solid var(--bp-rule); }
.bp-toc li::before { content: counter(t, decimal-leading-zero); font: 500 18px var(--bp-display); color: var(--bp-accent); }
.bp-toc small { display: block; color: var(--bp-muted); font-size: 15px; line-height: 1.45; margin-top: 2px; }

/* 7. TIMELINE -------------------------------------------------------------- */
.bp-stage { background: var(--bp-sand-2); }
.bp-timeline { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.bp-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--bp-rule); }
.bp-timeline li { position: relative; padding: 0 18px 0 0; }
.bp-timeline .bp-yr { font: 500 34px var(--bp-display); color: var(--bp-title); background: var(--bp-sand-2); padding-right: 10px; position: relative; display: inline-block; }
.bp-timeline li::after { content: ""; position: absolute; left: 0; top: 62px; width: 10px; height: 10px; background: var(--bp-accent); border-radius: 50%; }
.bp-timeline p { font-size: 15.5px; line-height: 1.5; margin-top: 34px; }
.bp-castnote { margin-top: 40px; font-size: 16px; color: var(--bp-muted); max-width: 80ch; }

/* 8. PRAISE ---------------------------------------------------------------- */
.bp-quotes { columns: 3 300px; column-gap: 28px; }
.bp-q { break-inside: avoid; background: #fff; border-top: 3px solid var(--bp-accent); padding: 24px 24px 18px; margin: 0 0 28px; }
.bp-q p { font-style: italic; font-size: 17px; line-height: 1.55; margin-bottom: 12px; }
.bp-q footer { font: 600 12px/1.4 var(--bp-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--bp-title); }
.bp-q footer span { display: block; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--bp-muted); font-size: 13px; margin-top: 2px; }

/* 9. AUDIENCES ------------------------------------------------------------- */
.bp-aud { background: #fff; }
.bp-aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.bp-aud-card { padding: 36px; background: var(--bp-sand); border-left: 4px solid var(--bp-title); }
.bp-aud-card.bp-alt { border-left-color: var(--bp-accent); }
.bp-aud-card ul { margin: 0 0 18px; padding-left: 20px; }
.bp-aud-card li { margin-bottom: 6px; }

/* 10. AUTHOR --------------------------------------------------------------- */
.bp-author-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 64px; align-items: start; }
.bp-pull { margin: 0; font-family: var(--bp-display); font-weight: 400; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.1; color: var(--bp-accent); }
.bp-pull small { display: block; font: 600 13px var(--bp-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bp-title); margin-top: 16px; }

/* 11. DETAILS -------------------------------------------------------------- */
/* Colours come from the --bp-details-* tokens (light warm panel by default). */
.bp-details { background: var(--bp-details-bg); color: var(--bp-details-ink); }
.bp-details h2 { color: var(--bp-details-head); }
.bp-details .bp-eyebrow { color: var(--bp-details-hi); }
.bp-details-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; }
.bp-spec { width: 100%; border-collapse: collapse; font-size: 16px; }
.bp-spec th { text-align: left; font: 600 12px var(--bp-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--bp-details-hi);
  padding: 12px 16px 12px 0; vertical-align: top; width: 34%; border-bottom: 1px solid var(--bp-details-rule); }
.bp-spec td { padding: 12px 0; border-bottom: 1px solid var(--bp-details-rule); }
.bp-spec tr:first-child th, .bp-spec tr:first-child td { border-top: 1px solid var(--bp-details-rule); }
.bp-details a { color: var(--bp-details-head); text-decoration: underline; }
.bp-details a:hover { color: var(--bp-accent); }
.bp-details ul { list-style: none; padding: 0; margin: 0 0 26px; }
.bp-details li { padding: 10px 0; border-bottom: 1px solid var(--bp-details-rule); }
.bp-details .bp-btn { border-color: var(--bp-details-head); color: var(--bp-details-head); text-decoration: none; }
.bp-details .bp-btn:hover { background: var(--bp-details-head); color: #fff; }

/* 12. RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 860px) {
  :where(.bookpage) section { padding: 60px 0; }
  .bp-hero-grid, .bp-about-grid, .bp-inside-grid, .bp-aud-grid, .bp-author-grid, .bp-details-grid { grid-template-columns: 1fr; gap: 36px; }
  .bp-hero .bp-cover { order: -1; }
  .bp-cover img { width: min(70vw, 300px); }
  .bp-badge { width: 84px; height: 84px; font-size: 10px; right: -10px; }
  .bp-timeline { grid-template-columns: 1fr; gap: 6px; }
  .bp-timeline::before { left: 4px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .bp-timeline li { padding-left: 30px; }
  .bp-timeline li::after { top: 18px; }
  .bp-timeline .bp-yr { background: transparent; font-size: 28px; }
  .bp-timeline p { margin-top: 2px; }
  .bp-band { min-height: 540px; padding-top: 40px; }
  .bp-band p { font-size: 23px; }
}

/* 13. SITE CHROME ON BOOK PAGES ------------------------------------------- */
/* Same header/footer markup as every page, recoloured to the book's palette. */
body.bp-site { background: var(--bp-sand); }
.bp-site :focus-visible { outline-color: var(--bp-accent); }

/* Header */
.bp-site .site-header { background: rgba(244, 237, 225, .92); border-bottom-color: var(--bp-rule); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .bp-site .site-header { background: color-mix(in srgb, var(--bp-sand) 92%, transparent); }
}
/* Logo: each book page uses a recoloured copy of the header logo,
   assets/logos/logo-header-<surname>-<isbn13>.png (see CLAUDE.md §8a). */
.bp-site .nav-links a { font-family: var(--bp-sans); font-weight: 500; font-size: .95rem; color: var(--bp-title); border-radius: 2px; }
.bp-site .nav-links a:hover { background: var(--bp-sand-2); color: var(--bp-title); }
.bp-site .nav-links a[aria-current="page"] { color: var(--bp-accent); }
.bp-site .nav-toggle span { background: var(--bp-title); }

/* "Publish Your Work" (header + mobile menu) and the cookie banner's Accept button */
.bp-site .btn--primary {
  background: var(--bp-accent); color: #fff; box-shadow: none; border-radius: 2px;
  font-family: var(--bp-sans); font-weight: 600; font-size: .9rem; letter-spacing: .05em;
}
.bp-site .btn--primary:hover { background: var(--bp-accent-dk); color: #fff; transform: none; }
.bp-site .nav-links a.btn--primary, .bp-site .nav-links a.btn--primary:hover { color: #fff; background: var(--bp-accent); }
.bp-site .nav-links a.btn--primary:hover { background: var(--bp-accent-dk); }

/* Cookie banner */
.bp-site .cookie-banner { background: #fff; border-color: var(--bp-rule); border-radius: 4px; box-shadow: 0 18px 40px -16px rgba(40, 22, 10, .45); }
.bp-site .cookie-banner__text { font-family: var(--bp-sans); color: var(--bp-ink); }
.bp-site .cookie-banner__text a { color: var(--bp-accent); }
.bp-site .cookie-banner .btn--ghost { border-radius: 2px; font-family: var(--bp-sans); font-size: .9rem; color: var(--bp-title); border-color: var(--bp-rule); }
.bp-site .cookie-banner .btn--ghost:hover { border-color: var(--bp-title); color: var(--bp-title); }

/* Footer */
.bp-site .site-footer { background: var(--bp-footer-bg); color: var(--bp-footer-ink); font-family: var(--bp-sans); }
.bp-site .site-footer a { color: var(--bp-footer-ink); }
.bp-site .site-footer a:hover { color: #fff; }
.bp-site .footer-brand p, .bp-site .footer-bottom { color: color-mix(in srgb, var(--bp-footer-ink) 72%, var(--bp-footer-bg)); }
.bp-site .footer-col h4 { font-family: var(--bp-sans); color: #fff; }
.bp-site .footer-bottom { border-top-color: rgba(255, 255, 255, .1); }

@media (max-width: 900px) {
  .bp-site .nav-links { background: var(--bp-sand); border-bottom-color: var(--bp-rule); }
}