/* book-page.css — prerendered /book/{slug}/ pages. Loaded after style.css,
   only by those pages. Mobile-first; desktop layout from 900px.
   2026-10-17: the book page is a marketing page. One action ("Listen free")
   opens the player; nothing plays here. Hero with the first line and a
   pitch, a sticky section bar, "Inside the book" with tier headings, a
   "How to listen" ladder, the opening as plain text, cover shelves and a
   closing call to action. js/book-page.js adds the signed-in states, the
   inline unlock, Save/Share and tier re-splits. */

/* One reading serif: the same face as the player's read-along (style.css .book-page). */
.bp2 { --bp-gutter: 18px; --bp-max: 1180px; overflow-x: clip; --read-font: var(--font-display); }
.bp2 *, .bp2 *::before, .bp2 *::after { box-sizing: border-box; }
.bp2-wrap { max-width: var(--bp-max); margin: 0 auto; padding: 0 var(--bp-gutter); position: relative; }
.bp2-eyebrow { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 6px; }

/* ── Hero ─────────────────────────────────────────────────────── */
.bp2-hero { position: relative; padding: 16px 0 34px; isolation: isolate; overflow: hidden; }
.bp2-hero-bg {
  position: absolute; inset: -80px -80px 0; z-index: -2;
  background-position: 20% 30%; background-size: cover;
  filter: blur(80px) saturate(1.25); opacity: .34; transform: scale(1.1);
  /* Fade the glow out on its own: in desktop Chrome the ::after gradient
     didn't always paint over the blurred layer's edges, leaving a lighter
     band above the section bar and down the right side. */
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 88%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 45%, transparent 88%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.bp2-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,19,16,.25), var(--bg) 82%); }
.bp2-crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .8rem; color: var(--text-3); margin: 0 0 16px; }
.bp2-crumbs a { color: var(--text-3); }
.bp2-crumbs a:hover { color: var(--accent); }
.bp2-crumbs [aria-current] { color: var(--text-2); }
.bp2-crumbs [aria-hidden] { opacity: .6; }

.bp2-welcome {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: .82rem; color: var(--text-2); line-height: 1.4;
  background: rgba(31,26,21,.85); border: 1px solid var(--border);
  padding: 8px 14px 8px 8px; border-radius: 14px; margin: 0 0 18px;
}
.bp2-welcome[hidden] { display: none; }
.bp2-welcome b { background: var(--accent); color: #171310; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }

/* Phones: cover beside the title so the Listen button sits higher. */
.bp2-grid { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; grid-template-areas: "cover head" "main main"; align-items: end; }
.bp2-cover-wrap { grid-area: cover; }
.bp2-head { grid-area: head; min-width: 0; }
.bp2-main { grid-area: main; min-width: 0; }
.bp2-cover {
  width: 112px; aspect-ratio: 2 / 3; height: auto; border-radius: 6px; display: block;
  object-fit: cover; background: var(--surface);
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
}
.bp2-kicker { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 6px; }
.bp2-kicker a { color: inherit; }
.bp2 h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.012em; font-size: clamp(1.6rem, 6.4vw, 4rem); line-height: 1.04; margin: 0; color: var(--text); text-wrap: balance; }
.bp2-sub { font-family: var(--read-font); font-style: italic; color: var(--text-2); font-size: 1rem; margin: 6px 0 0; }
.bp2-by { font-family: var(--font-display); font-size: 1.02rem; color: var(--text-2); margin: 8px 0 0; }
.bp2-by a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; }
.bp2-by a:hover { color: var(--accent); text-decoration-color: currentColor; }
.bp2-tr { font-size: .92em; }

.bp2-meta { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--text-2); font-size: .86rem; }
.bp2-meta li { display: inline-flex; align-items: center; gap: 7px; }
.bp2-meta svg { color: var(--text-3); flex: none; }
.bp2-meta b { color: var(--text); font-weight: 600; }

.bp2-access { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .88rem; color: var(--text-2); line-height: 1.45; }
.bp2-access a { color: var(--accent); font-weight: 600; }
.bp2-access[hidden] { display: none; }

.bp2-ctas { display: flex; gap: 10px; align-items: center; margin-top: 18px; scroll-margin-top: 140px; }
.bp2-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; max-width: 100%;
  height: 54px; padding: 0 26px 0 8px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: #1b140d; font: inherit; font-weight: 650; font-size: 1.02rem;
  text-decoration: none; box-shadow: 0 10px 28px -10px rgba(201,162,106,.6); transition: transform .1s, filter .15s;
}
.bp2-cta:hover { filter: brightness(1.05); text-decoration: none; color: #1b140d; }
.bp2-cta:active { transform: scale(.98); }
.bp2-cta:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.bp2-cta-ic { width: 38px; height: 38px; border-radius: 50%; background: #1b140d; color: var(--accent); display: grid; place-items: center; flex: none; }
.bp2-cta-ic svg { width: 16px; height: 16px; margin-left: 2px; }
.bp2-cta-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bp2-ctas > .bp2-cta { flex: 1 1 auto; }
.bp2-icon {
  width: 54px; height: 54px; flex: none; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(23,19,16,.4); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: border-color .15s, color .15s;
}
.bp2-icon:hover { border-color: var(--accent-dim); color: var(--accent); }
.bp2-icon:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.bp2-icon[aria-pressed="true"] { color: var(--accent); border-color: rgba(201,162,106,.5); }
.bp2-icon[aria-pressed="true"] svg { fill: currentColor; }
.bp2-icon.is-done { color: var(--success); }
.bp2-under { margin: 10px 0 0; font-size: .8rem; color: var(--text-3); }
.bp2-under[hidden] { display: none; }

.bp2-quote { margin: 24px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--accent); }
.bp2-quote blockquote { margin: 0; font-family: var(--read-font); font-style: italic; font-size: 1.2rem; line-height: 1.38; color: var(--text); }
.bp2-quote blockquote::before { content: "“"; }
.bp2-quote blockquote::after { content: "”"; }
.bp2-quote figcaption { margin-top: 6px; font-size: .74rem; color: var(--text-3); }
.bp2-pitch { font-family: var(--read-font); font-size: 1.02rem; line-height: 1.62; color: var(--text-2); margin: 16px 0 0; max-width: 62ch; }

/* ── Section bar (sticky; the site nav scrolls away on these pages) ── */
.bp2-tabs {
  position: sticky; top: 0; z-index: 50;
  background: rgba(23,19,16,.97);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.bp2-tabs .bp2-wrap { display: flex; align-items: center; gap: 20px; height: 52px; }
.bp2-tabs-id { display: none; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--text); white-space: nowrap; padding-right: 20px; border-right: 1px solid var(--border); max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.bp2-tabs-id img { width: 22px; height: 33px; border-radius: 2px; object-fit: cover; flex: none; }
.bp2-tabs-links { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; height: 100%; flex: 1; min-width: 0; }
.bp2-tabs-links::-webkit-scrollbar { display: none; }
.bp2-tabs-links a { display: flex; align-items: center; white-space: nowrap; font-size: .88rem; color: var(--text-2); height: 100%; border-bottom: 2px solid transparent; }
.bp2-tabs-links a:hover { color: var(--text); }
.bp2-tabs-links a.is-on { color: var(--text); border-bottom-color: var(--accent); }
.bp2-cta-sm { display: none; height: 38px; font-size: .9rem; padding: 0 16px 0 5px; gap: 8px; box-shadow: none; flex: none; }
.bp2-cta-sm .bp2-cta-ic { width: 28px; height: 28px; }
.bp2-cta-sm .bp2-cta-ic svg { width: 12px; height: 12px; }
.bp2 section[id], .bp2 [id="about"] { scroll-margin-top: 72px; }

/* Phones: the bar's Listen button floats at the bottom instead. */
.bp2-tabs.show-cta .bp2-cta-sm {
  display: inline-flex; position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom));
  height: 52px; font-size: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.55); z-index: 60;
}
.bp2-tabs.show-cta .bp2-cta-sm .bp2-cta-ic { width: 36px; height: 36px; }
body:has(.bp2-tabs.show-cta) .gp-footer { padding-bottom: 90px; }
/* One call to action at a time: hide it while a chapter's sign-up is open. */
.bp2:has(.bp2-unlock) .bp2-tabs.show-cta .bp2-cta-sm { display: none; }

/* ── Body: Inside the book + side ─────────────────────────────── */
.bp2-body { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 34px; }
.bp2 h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; margin: 0 0 4px; color: var(--text); letter-spacing: -.005em; }
.bp2-h2meta { color: var(--text-3); font-size: .85rem; margin: 0 0 6px; }
.bp2-chapters { list-style: none; margin: 0; padding: 0; }
.bp2-tierhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 20px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.bp2-tierhead b { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.bp2-tierhead small { font-size: .8rem; color: var(--text-3); }
.bp2-tierhead.is-free b { color: #a6c79c; }
.bp2-tierhead.is-acct b { color: var(--accent); }
.bp2-tierhead.is-prem b { color: var(--text-2); }
.bp2-ch { border-bottom: 1px solid var(--line, #2c251f); }
.bp2-ch > a, .bp2-ch > div {
  display: grid; grid-template-columns: 34px 1fr auto 14px; gap: 12px; align-items: center;
  padding: 12px 6px; color: var(--text); text-decoration: none; border-radius: 10px;
}
.bp2-ch > a:hover { background: rgba(201,162,106,.05); }
.bp2-ch > a:hover .bp2-cht { color: var(--accent); }
.bp2-ch > a:hover .bp2-char { color: var(--accent); transform: translateX(2px); }
.bp2-chn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--font-ui); color: var(--text-3); font-size: .74rem; font-variant-numeric: tabular-nums; }
.bp2-ch[data-tier="free"] .bp2-chn { border-color: rgba(166,199,156,.6); color: #a6c79c; }
.bp2-cht { font-family: var(--read-font); font-size: 1.04rem; line-height: 1.35; min-width: 0; }
.bp2-cht small { display: block; font-family: var(--font-ui); color: var(--text-3); font-size: .78rem; margin-top: 2px; line-height: 1.4; }
.bp2-cht small a { color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
.bp2-chd { color: var(--text-3); font-size: .8rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bp2-char { color: var(--text-3); font-size: .9rem; transition: transform .15s, color .15s; }
.bp2-ch.is-current > a { background: rgba(201,162,106,.07); }
.bp2-ch.is-current .bp2-cht { color: var(--accent); }
.bp2-ch.is-open > a { background: rgba(201,162,106,.06); }
.bp2-chapters.is-collapsed .bp2-x { display: none; }
.bp2-showall { margin-top: 10px; background: none; border: 0; padding: 8px 6px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--accent); cursor: pointer; }
.bp2-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 650; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.bp2-badge svg { width: 12px; height: 12px; }
.bp2-badge.free { background: rgba(127,163,119,.14); color: #a6c79c; border-color: rgba(127,163,119,.3); }
.bp2-badge.acct { background: rgba(201,162,106,.12); color: var(--accent); border-color: rgba(201,162,106,.28); }

/* Inline unlock (js/book-page.js) */
.bp2-unlock { margin: 6px 0 12px; padding: 18px 18px 16px; border-radius: 14px; border: 1px solid rgba(201,162,106,.38); background: var(--surface); animation: bp2-in .18s ease-out; }
@keyframes bp2-in { from { opacity: 0; transform: translateY(-4px); } }
.bp2-unlock h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin: 0; color: var(--text); }
.bp2-unlock p { margin: 6px 0 0; color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.bp2-unlock form, .bp2-unlock-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bp2-unlock input[type="email"] { flex: 1 1 220px; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: .92rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.bp2-unlock input[type="email"]:focus { outline: none; border-color: var(--accent); }
.bp2-unlock .btn { height: 44px; border-radius: 10px; }
.bp2-unlock .fine { font-size: .8rem; color: var(--text-3); margin-top: 10px; }
.bp2-unlock .fine a { color: var(--accent); }
.bp2-unlock-x { float: right; background: none; border: 0; color: var(--text-3); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 4px; margin: -6px -6px 0 8px; }

.bp2-side { display: flex; flex-direction: column; gap: 20px; }

/* How to listen */
.bp2-ladder { padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--r-lg, 18px); background: var(--surface); }
.bp2 .bp2-ladder h2, .bp2 .bp2-owned h2 { font-family: var(--font-ui); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
.bp2-steps { list-style: none; margin: 0; padding: 0; }
.bp2-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.bp2-steps li:last-child { border-bottom: 0; }
.bp2-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; border: 1px solid var(--border); color: var(--text-3); }
.bp2-steps li.is-done .bp2-dot { background: var(--success); border-color: var(--success); color: #13200f; }
.bp2-steps li.is-done .bp2-dot svg { width: 14px; height: 14px; }
.bp2-steps li.is-next .bp2-dot { border: 2px solid var(--accent); color: var(--accent); }
.bp2-steps small { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--success); margin-bottom: 1px; }
.bp2-steps b { display: block; font-size: .94rem; font-weight: 650; color: var(--text); }
.bp2-steps p { margin: 3px 0 0; font-size: .84rem; color: var(--text-3); line-height: 1.45; }
.bp2-steps p a { color: var(--accent); }
.bp2-ladder-cta { display: flex; justify-content: center; width: 100%; margin-top: 10px; text-decoration: none; }
.bp2-ladder-alt { display: block; text-align: center; margin-top: 10px; font-size: .84rem; color: var(--accent); }
.bp2-owned { padding: 20px 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.bp2-owned p { margin: 4px 0 14px; color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.bp2-owned .btn { width: 100%; justify-content: center; text-decoration: none; }

/* About (+ facts) */
.bp2 .about-card {
  margin: 0; padding: 20px 22px; border-radius: var(--r-lg, 18px);
  background: radial-gradient(circle at 92% 0%, var(--accent-glow, rgba(201,162,106,.16)), transparent 55%), var(--surface-hi, #2a231c);
  border: 1px solid var(--border);
}
.bp2 h2.about-kicker { font-family: var(--font-ui); display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.bp2 .about-lead { font-family: var(--read-font); font-size: .9rem; color: var(--text-3); margin: 0 0 8px; line-height: 1.6; }
.bp2 .about-text { font-family: var(--read-font); font-size: 1rem; line-height: 1.7; color: #deded8; }
.bp2 .about-text p { margin: 0; }
.bp2 .about-text p + p { margin-top: 1em; }
.bp2 .about-attr { margin: 12px 0 0; font-size: .76rem; color: var(--text-3); }
.bp2 .about-attr a { color: var(--accent-dim); }
.bp2-facts { margin: 14px 0 0; padding-top: 6px; border-top: 1px solid var(--border); font-size: .84rem; }
.bp2-facts > div { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; }
.bp2-facts dt { color: var(--text-3); }
.bp2-facts dd { margin: 0; color: var(--text-2); text-align: right; }
.bp2-about--facts { padding: 8px 20px 12px; border: 1px solid var(--border); border-radius: 14px; }
.bp2-about--facts .bp2-facts { border: 0; margin: 0; }

/* ── The opening (plain text) ─────────────────────────────────── */
.bp2-read { margin-top: 56px; max-width: 68ch; }
.bp2-read h2 { margin-bottom: 16px; }
.bp2-text { font-family: var(--read-font); font-size: 1.12rem; line-height: 1.8; color: #cfc4b1; }
.bp2-text p { margin: 0 0 1em; }
/* The chapter's own heading paragraph repeats the h2 above it. */
.bp2-text p.bp2-ph { display: none; }
.bp2-text p.bp2-first::first-letter { float: left; font-family: var(--font-display); font-weight: 600; font-size: 3.6em; line-height: .86; padding: .06em 0 0 0; margin-right: .03em; color: var(--accent); }
.bp2-text.clamped { max-height: 340px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.bp2-readcta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 8px; }
.bp2-readlisten { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.bp2-readlisten .bp2-cta-ic { width: 26px; height: 26px; background: #1b140d; }
.bp2-readlisten .bp2-cta-ic svg { width: 11px; height: 11px; }

/* ── Cover shelves ─────────────────────────────────────────────── */
.bp2-shelf { margin-top: 56px; }
.bp2-morehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.bp2-morehead a { font-size: .86rem; color: var(--accent); white-space: nowrap; font-weight: 600; }
.bp2-moregrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; }
.bp2-moregrid a { display: flex; flex-direction: column; gap: 8px; color: var(--text); text-decoration: none; }
.bp2-mc { display: block; aspect-ratio: 2/3; border-radius: 6px; overflow: hidden; background: var(--surface-hi); box-shadow: 0 12px 26px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04); transition: transform .2s ease, box-shadow .2s ease; }
.bp2-mc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp2-mc-ph { display: block; padding: 12px; font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.2; color: var(--text-2); }
.bp2-moregrid a:hover .bp2-mc { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(201,162,106,.35); }
.bp2-mm { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: .78rem; color: var(--text-3); line-height: 1.35; }
.bp2-mm b { font-weight: 500; color: var(--text-2); }

/* ── Closing call to action ───────────────────────────────────── */
.bp2-final {
  margin: 64px 0 0; padding: 24px; border-radius: 20px; border: 1px solid rgba(201,162,106,.35);
  background: radial-gradient(600px 300px at 0% 50%, rgba(155,58,46,.26), transparent 70%), var(--surface);
  display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: center;
}
.bp2-final-cover { width: 76px; aspect-ratio: 2/3; height: auto; border-radius: 4px; object-fit: cover; box-shadow: 0 14px 28px rgba(0,0,0,.5); }
.bp2 .bp2-final h2 { font-size: 1.35rem; line-height: 1.2; }
.bp2-final p { margin: 6px 0 0; color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.bp2-final > .bp2-cta { grid-column: 1 / -1; }
.bp2-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.bp2-store { display: inline-flex; flex-direction: column; justify-content: center; min-width: 132px; background: #000; color: #fff; border: 1px solid #4a4a4a; border-radius: 10px; padding: 6px 14px 7px; line-height: 1.1; }
.bp2-store small { font-size: .62rem; opacity: .8; }
.bp2-store b { font-size: 1rem; font-weight: 600; }
.bp2-store:hover { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .bp2-unlock { animation: none; } }

/* ── Tablet ───────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .bp2 { --bp-gutter: 28px; }
  .bp2-grid { grid-template-columns: 170px minmax(0, 1fr); column-gap: 24px; }
  .bp2-cover { width: 170px; }
  .bp2-by { font-size: 1.15rem; }
  .bp2-ctas > .bp2-cta { flex: 0 1 auto; }
  .bp2-quote blockquote { font-size: 1.35rem; }
  .bp2-moregrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bp2-final { grid-template-columns: 96px 1fr auto; padding: 28px 32px; gap: 26px; }
  .bp2-final-cover { width: 96px; }
  .bp2-final > .bp2-cta { grid-column: auto; }
  /* The bar has room for its own Listen button. */
  /* (blur only here: on phones it would trap the fixed Listen button) */
  .bp2-tabs { background: rgba(23,19,16,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .bp2:has(.bp2-unlock) .bp2-tabs.show-cta .bp2-cta-sm { display: inline-flex; }
  .bp2-tabs.show-cta .bp2-cta-sm { position: static; height: 38px; font-size: .9rem; box-shadow: none; }
  .bp2-tabs.show-cta .bp2-cta-sm .bp2-cta-ic { width: 28px; height: 28px; }
  body:has(.bp2-tabs.show-cta) .gp-footer { padding-bottom: 0; }
}

/* ── Desktop ──────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .bp2 { --bp-gutter: 40px; }
  .bp2-hero { padding: 26px 0 52px; }
  .bp2-grid { grid-template-columns: 320px minmax(0, 1fr); column-gap: 64px; align-items: start; grid-template-areas: "cover head" "cover main"; grid-template-rows: auto 1fr; }
  .bp2-head { margin-top: 6px; }
  .bp2-cover { width: 320px; border-radius: 8px; }
  .bp2-kicker { font-size: .7rem; }
  .bp2-by { font-size: 1.25rem; margin-top: 10px; }
  .bp2-meta { margin-top: 20px; font-size: .9rem; }
  .bp2-cta { height: 58px; font-size: 1.05rem; }
  .bp2-icon { width: 58px; height: 58px; }
  .bp2-quote { margin-top: 30px; padding-left: 20px; }
  .bp2-quote blockquote { font-size: 1.55rem; }
  .bp2-pitch { font-size: 1.1rem; margin-top: 18px; }
  .bp2-tabs .bp2-wrap { height: 58px; }
  .bp2-tabs-id { display: inline-flex; }
  .bp2-body { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; margin-top: 48px; align-items: start; }
  .bp2 h2 { font-size: 2rem; }
  .bp2-unlock { padding: 20px 22px; margin-left: 46px; }
  .bp2-moregrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
  .bp2-final { grid-template-columns: 110px 1fr auto; padding: 32px 40px; gap: 32px; margin-top: 72px; }
  .bp2-final-cover { width: 110px; }
  .bp2 .bp2-final h2 { font-size: 1.85rem; }
}

/* ── 2026-10-18 design review ─────────────────────────────────── */
/* Italic of the reading serif (the quote and subtitle). */
@font-face { font-family: 'Source Serif 4'; src: url('/fonts/SourceSerif4-Italic-latin.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }

/* Chapter rows say what they cost before the click: play (free now),
   person (free account), lock (Premium). js/book-page.js keeps data-tier
   current; .is-signed marks a signed-in reader, for whom account rows play. */
.bp2-char { font-size: 0; width: 14px; height: 14px; display: block; background: currentColor;
  -webkit-mask: var(--bp2-glyph) center / contain no-repeat; mask: var(--bp2-glyph) center / contain no-repeat;
  --bp2-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.bp2-ch[data-tier="free"] .bp2-char, .bp2-ch[data-tier="own"] .bp2-char, .bp2-chapters.is-signed .bp2-ch[data-tier="acct"] .bp2-char {
  --bp2-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5.6v12.8a1 1 0 0 0 1.5.86l10.2-6.4a1 1 0 0 0 0-1.72L9.5 4.74A1 1 0 0 0 8 5.6z'/%3E%3C/svg%3E");
  width: 11px; height: 11px; color: #a6c79c; }
.bp2-ch[data-tier="own"] .bp2-char, .bp2-chapters.is-signed .bp2-ch[data-tier="acct"] .bp2-char { color: var(--accent); }
.bp2-ch[data-tier="acct"] .bp2-char {
  --bp2-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20c.8-3.6 3.6-5.6 7-5.6s6.2 2 7 5.6'/%3E%3C/svg%3E");
  color: var(--accent); }
.bp2-ch[data-tier="prem"] .bp2-char {
  --bp2-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8.5 11V8a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E");
  color: var(--text-3); }
.bp2-ch > a:hover .bp2-char { transform: none; }
.bp2-ch[data-tier="prem"] .bp2-cht { color: var(--text-2); }
.bp2-ch[data-tier="prem"] .bp2-chn { border-style: dashed; }

/* About: about five lines, then "Read more" (js/book-page.js). */
.bp2 .about-text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.bp2 .about-text.is-clamped p + p { margin-top: 0; }
.bp2-readmore { background: none; border: 0; padding: 6px 0 0; font: inherit; font-size: .84rem; font-weight: 600; color: var(--accent); cursor: pointer; }
.bp2-readmore:hover { text-decoration: underline; }

/* Resume: label over "Ch 1 · 0:40 in". */
.bp2-cta-tx.is-2l { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.12; }
.bp2-cta-tx.is-2l small { font-size: .78rem; font-weight: 500; opacity: .8; }
.bp2-access b { color: var(--text); font-weight: 650; }

/* ── Author content (2026-10-23): portraits + life line ───────────────── */
.cp-pt { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #3a2c1f, var(--surface) 72%);
  box-shadow: inset 0 0 0 1px rgba(201,162,106,.28); color: var(--accent);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.cp-pt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-pt-lg { box-shadow: 0 0 0 1px var(--border), 0 0 0 10px var(--bg), 0 0 0 11px var(--border); }
.cp-attr { font-size: .74rem; color: var(--text-3); }
.cp-attr a { color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; }
.cp-line { list-style: none; margin: 24px 0 0; padding: 0; position: relative; height: 92px; }
.cp-line::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 2px;
  background: linear-gradient(90deg, var(--border), var(--accent-dim), var(--border)); }
.cp-tick { position: absolute; top: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.cp-tick > a, .cp-tick > em, .cp-tick > span { color: inherit; text-decoration: none; }
.cp-tick a { display: block; color: var(--text); }
.cp-tick a:hover span { color: var(--accent); }
.cp-tick em { display: block; font-style: normal; font-size: .72rem; color: var(--text-3); height: 18px; }
.cp-tick i { display: block; width: 10px; height: 10px; border-radius: 50%; margin: 6px auto 8px; background: var(--bg); border: 2px solid var(--text-3); box-sizing: border-box; }
.cp-tick-book i { border-color: var(--accent); background: var(--accent); }
.cp-tick-on i { width: 16px; height: 16px; margin-top: 3px; margin-bottom: 5px; box-shadow: 0 0 0 5px rgba(201,162,106,.22); }
.cp-tick span { display: block; width: 104px; margin: 0 auto; white-space: normal; line-height: 1.3; font-size: .76rem; color: var(--text-2); }
.cp-tick-start span { margin: 0; } .cp-tick-end span { margin: 0 0 0 auto; }
.cp-tick-book span { color: var(--text); }
.cp-tick-start { transform: none; text-align: left; } .cp-tick-start i { margin-left: 0; }
.cp-tick-end { transform: translateX(-100%); text-align: right; } .cp-tick-end i { margin-right: 0; }
.cp-line-long { height: 104px; }
.cp-line-long .cp-tick span { display: block; white-space: normal; width: 128px; line-height: 1.3; margin: 0 auto; }
.cp-line-long .cp-tick-start span { margin: 0; } .cp-line-long .cp-tick-end span { margin: 0 0 0 auto; }
@media (max-width: 760px) {
  .cp-mob-hide { display: none; }
}
.cp-chip { display: inline-flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 5px 16px 5px 5px; min-height: 44px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 999px; background: rgba(31,26,21,.7); color: var(--text); text-decoration: none; transition: border-color .15s; max-width: 100%; }
.cp-chip:hover { border-color: var(--accent-dim); color: var(--text); }
.cp-chip:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.cp-chip b { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-chip > span:not(.cp-pt) { font-size: .84rem; color: var(--text-3); white-space: nowrap; }
.cp-chip svg { color: var(--text-3); flex: none; }
.bp2-by-tr { margin-top: 8px; }
.cp-who { margin: 16px 0 0; }
.cp-who h3 { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 10px; }
.cp-who ul { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-who li { font-size: .8rem; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; background: rgba(23,19,16,.5); }
.cp-meet { margin: 72px 0 8px; padding: 36px; border: 1px solid var(--border); border-radius: var(--r-xl);
  background: radial-gradient(120% 140% at 0% 0%, rgba(201,162,106,.10), transparent 55%), var(--surface);
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: center; scroll-margin-top: 80px; }
.cp-meet h2 { font-family: var(--font-display); font-weight: 600; font-size: 2.1rem; margin: 2px 0 2px; letter-spacing: -.01em; }
.cp-life { font-size: .9rem; color: var(--text-3); margin: 0 0 14px; }
.cp-bio { font-family: var(--font-book); font-size: 1.06rem; line-height: 1.62; color: var(--text-2); margin: 0; max-width: 64ch; }
.cp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 18px; }
.cp-row > a { color: var(--accent); font-weight: 600; font-size: .92rem; }
/* The drop cap would also catch a leading "(" ("(Kept in shorthand.)"). */
.bp2-text p.bp2-first-plain::first-letter { float: none; font: inherit; color: inherit; padding: 0; margin: 0; line-height: inherit; }
@media (max-width: 760px) {
  .cp-chip { padding-right: 12px; gap: 10px; }
  .cp-chip .cp-pt { width: 32px !important; height: 32px !important; }
  .cp-chip > span:not(.cp-pt) { display: none; }
  .cp-meet { grid-template-columns: 1fr; padding: 24px 20px; gap: 18px; }
  .cp-meet > .cp-pt { width: 112px !important; height: 112px !important; }
  .cp-meet h2 { font-size: 1.6rem; }
}