/* =============================================================
   Commons World — book.css
   The /book/ landing page, rebuilt on the 4E band/card system
   (docs/plan/4E-CHARITIFY-MAPPING.md §4, W6c). Self-contained: built
   only on the design-system tokens and the .cw-band/.cw-sechead/
   .cw-card/.cw-cta-band primitives in base/layout/components.css.
   Enqueued on /book/ only (see inc/assets.php). The capture card and
   donation tiers bring their own global CSS.
   ============================================================= */

/* -------------------------------------------------------------
   Anchor offsets (sticky header) — every in-page target on this
   page clears the fixed header by the same margin.
------------------------------------------------------------- */
#get-the-book,
#commons-community,
#hidden-world,
#the-visible-world,
#formats,
#essays,
#share,
#faq {
  scroll-margin-top: calc(var(--cw-header-height) + 24px);
}

/* -------------------------------------------------------------
   S1 — HERO (navy band): eyebrow + H1 + sub + ladder list, left
   column; the gate card sits right on an elevated lighter surface
   so it reads as the page's one primary action against the navy.
------------------------------------------------------------- */
.cw-book-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 2.75rem);
  align-items: start;
}
/* Grid items default to min-width: auto, so their track's minimum size is
   set by their content's min-content/max-content size rather than shrinking
   to fit — with the long-form H1/sub copy here that silently forces the
   1fr track (and the whole hero) wider than the viewport on mobile, causing
   horizontal overflow. min-width: 0 lets the text wrap within the track
   instead (same fix already used for .cw-book-ladder__item/.cw-book-vw__body
   /.cw-chaptermap__body elsewhere in this file — this is the one spot it
   was missing). */
.cw-book-hero__pitch,
.cw-book-hero__capture {
  min-width: 0;
}
.cw-book-hero__title {
  font-size: clamp(2rem, 5.5vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0.4em 0 0;
}
.cw-book-hero__sub {
  max-width: 54ch;
  margin: clamp(1rem, 2.5vw, 1.4rem) 0 0;
  font-size: var(--cw-fs-body-lg);
  line-height: var(--cw-lh-body);
  color: var(--cw-on-dark-muted);
}

/* The gate card (.cw-capture) is itself a navy gradient — nearly the same
   colour as the .cw-band--navy it now sits on, so left alone it would blend
   into the band instead of standing out as the page's one primary action
   (the brief calls for "a lighter/elevated surface so it stands out"). A
   full re-theme to a light/cream card was considered and rejected: .cw-capture
   is a SHARED global component (components.css) with its on-dark text
   styling — eyebrow/heading/blurb/field labels/done-state — coupled
   throughout; re-theming just this instance risks low-contrast text and
   would diverge from the same card used elsewhere. Instead this gives it an
   unambiguous gold-lit boundary + a strong lift shadow, scoped to book.css /
   this hero instance only — the shared component's own background and
   on-dark text scheme (already AA-verified) are untouched. */
.cw-book-hero__capture .cw-capture {
  max-width: 520px;
  border-radius: var(--cw-radius-lg);
  border: 1px solid rgba(226, 198, 120, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 0 1px rgba(226, 198, 120, 0.12),
    0 8px 20px rgba(0, 0, 0, 0.3),
    0 40px 80px -20px rgba(0, 0, 0, 0.65),
    0 0 90px -30px rgba(216, 184, 95, 0.45);
}

@media (min-width: 860px) {
  .cw-book-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    column-gap: clamp(3rem, 6vw, 5rem);
  }
  .cw-book-hero__capture .cw-capture {
    max-width: none;
  }
}

/* -------------------------------------------------------------
   S1 — HERO: ladder list (compact 3-row list — no cover thumbnails,
   plan §4). Sits on the navy band, so the row surface is a subtle
   on-dark tint rather than the light --cw-surface used elsewhere.
------------------------------------------------------------- */
.cw-book-ladder {
  margin: clamp(1.5rem, 3.5vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
  max-width: 30rem;
}
.cw-book-ladder__item {
  min-width: 0;
}
.cw-book-ladder__link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(245, 240, 232, 0.14);
  border-radius: var(--cw-radius-md);
  background: rgba(245, 240, 232, 0.05);
  text-decoration: none;
  transition: border-color var(--cw-dur-fast) var(--cw-ease),
    background var(--cw-dur-fast) var(--cw-ease);
}
.cw-book-ladder__link:hover {
  border-color: rgba(226, 198, 120, 0.4);
  background: rgba(245, 240, 232, 0.09);
  text-decoration: none;
}
.cw-book-ladder__n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--cw-gold);
  color: var(--cw-cta-text);
  font-family: var(--cw-font-sans);
  font-size: 0.82rem;
  font-weight: 800;
}
.cw-book-ladder__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cw-book-ladder__title {
  font-family: var(--cw-font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cw-on-dark);
}
.cw-book-ladder__detail {
  font-size: 0.8rem;
  color: var(--cw-on-dark-muted);
}
.cw-book-ladder__status {
  flex: 0 0 auto;
  font-family: var(--cw-font-sans);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cw-gold-soft);
  white-space: nowrap;
}

/* -------------------------------------------------------------
   STICKY MOBILE DOWNLOAD CTA — slides in once past the hero form
   (toggled by main.js); hidden entirely on desktop.
------------------------------------------------------------- */
.cw-book-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 0.6rem clamp(0.85rem, 4vw, 1.25rem);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 29, 51, 0.97);
  box-shadow: 0 -10px 28px rgba(11, 29, 51, 0.2);
  transform: translateY(130%);
  transition: transform 0.32s var(--cw-ease, ease);
  will-change: transform;
}
.cw-book-sticky.is-visible {
  transform: translateY(0);
}
.cw-book-sticky__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 640px;
  margin-inline: auto;
}
.cw-book-sticky__label {
  font-family: var(--cw-font-heading);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--cw-on-dark);
}
.cw-book-sticky .cw-btn {
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (min-width: 860px) {
  .cw-book-sticky {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cw-book-sticky {
    transition: none;
  }
  .cw-book-ladder__link {
    transition: none;
  }
}

/* -------------------------------------------------------------
   S2/S3 — PER-BOOK SHOWCASE (Commons Community / The Hidden World /
   The Visible World). Cover + copy, two-zone grid on desktop. Lives
   inside a .cw-band--white (CC) / .cw-band--tint (HW --reverse, VW).
   4F (docs/plan/4F-POLISH.md §F2): the inside[] chapter-list zone is
   retired — each showcase now closes with a conversion link + a
   "Read the opening" <details> preview instead (see .cw-book-preview
   below), so the grid is back to a plain two-column cover/body split.
------------------------------------------------------------- */
.cw-book-showcase__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}
.cw-book-showcase__cover {
  margin: 0 auto;
  width: min(56%, 260px);
}
.cw-book-showcase__cover-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px 6px 6px 4px;
  box-shadow:
    0 0 0 1px rgba(20, 40, 68, 0.08),
    0 18px 30px -10px rgba(11, 29, 51, 0.26);
}
.cw-book-showcase__body {
  text-align: left;
}
.cw-book-showcase__title {
  margin-top: 0.35em;
}
.cw-book-showcase__subtitle {
  margin-top: 0.35rem;
  font-family: var(--cw-font-heading);
  font-size: var(--cw-fs-body-lg);
  font-style: italic;
  color: var(--cw-text-muted);
}
.cw-book-showcase__epigraph {
  margin: 1.25rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--cw-gold-border);
}
.cw-book-showcase__epigraph p {
  margin: 0;
  font-family: var(--cw-font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--cw-heading);
}
.cw-book-showcase__role {
  margin-top: 1.1rem;
  font-size: var(--cw-fs-body);
  line-height: var(--cw-lh-body);
  color: var(--cw-text);
}
.cw-book-showcase__pitch {
  margin-top: 0.75rem;
  font-family: var(--cw-font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cw-heading);
}
/* Chip row (CC "Start here" / VW "In print 2027") + the conversion link
   under the pitch — shared across all three showcases. */
.cw-book-showcase__chiprow,
.cw-book-vw__chiprow {
  margin: 0.9rem 0 0;
}
.cw-book-showcase__cta {
  margin: 1.1rem 0 0;
}

@media (min-width: 760px) {
  .cw-book-showcase__inner {
    grid-template-columns: minmax(200px, 0.62fr) minmax(0, 1.38fr);
    grid-template-areas: "cover body";
    align-items: start;
    column-gap: clamp(2rem, 4vw, 3rem);
  }
  .cw-book-showcase__cover {
    grid-area: cover;
    width: 100%;
    margin: 0;
  }
  .cw-book-showcase__body {
    grid-area: body;
  }
  .cw-book-showcase--reverse .cw-book-showcase__inner {
    grid-template-columns: minmax(0, 1.38fr) minmax(200px, 0.62fr);
    grid-template-areas: "body cover";
  }
}

/* -------------------------------------------------------------
   "Read the opening" preview panel (.cw-book-preview) — a styled
   <details> living inside the CC/HW showcase body, elevated like
   .cw-essay__toc (essays.css). Body copy is the book's genuine
   opening text, left-aligned, 62ch measure. Gold-marker summary
   pattern reused from the pillars' <details> (pillars.css
   .cw-np-pillar__summary) for a consistent disclosure language
   site-wide.
------------------------------------------------------------- */
.cw-book-preview {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: 0.15rem clamp(1.1rem, 2.5vw, 1.5rem);
  background: var(--cw-paper-tint, rgba(20, 40, 68, 0.04));
  border: 1px solid var(--cw-hairline, #d8c9a6);
  border-radius: var(--cw-radius-md);
}
.cw-book-preview__summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 0;
  font-family: var(--cw-font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--cw-gold-deep, #9f7b2b);
  cursor: pointer;
  list-style: none;
}
.cw-book-preview__summary::-webkit-details-marker {
  display: none;
}
.cw-book-preview__summary .cw-icon {
  flex: 0 0 auto;
  color: var(--cw-gold-deep, #9f7b2b);
}
.cw-book-preview__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 2px solid var(--cw-gold-deep, #9f7b2b);
  border-bottom: 2px solid var(--cw-gold-deep, #9f7b2b);
  transform: rotate(-45deg);
  transition: transform var(--cw-dur-fast) var(--cw-ease);
}
.cw-book-preview[open] > .cw-book-preview__summary::after {
  transform: rotate(45deg);
}
.cw-book-preview__summary:hover,
.cw-book-preview__summary:focus-visible {
  color: var(--cw-gold);
}
.cw-book-preview__summary:focus-visible {
  outline: 2px solid var(--cw-focus);
  outline-offset: 2px;
}
.cw-book-preview__body {
  max-width: 62ch;
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--cw-hairline, #d8c9a6);
  padding-top: 1.1rem;
}
.cw-book-preview__kicker {
  margin: 0 0 1rem;
  font-family: var(--cw-font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cw-gold-deep, #9f7b2b);
}
.cw-book-preview__body p {
  margin: 0 0 1rem;
  font-family: var(--cw-font-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cw-text);
  text-align: left;
}
.cw-book-preview__body p:last-child {
  margin-bottom: 0;
}
.cw-book-preview__close {
  font-style: italic;
  color: var(--cw-heading);
}
.cw-book-preview__close .cw-link-arrow {
  margin-left: 0.4rem;
  font-style: normal;
}
@media (prefers-reduced-motion: reduce) {
  .cw-book-preview__summary::after {
    transition: none;
  }
}
/* Print: preview content always visible regardless of [open] state. */
@media print {
  .cw-book-preview > *:not(.cw-book-preview__summary) {
    display: block !important;
  }
}

/* -------------------------------------------------------------
   VW SHOWCASE — 4F (docs/plan/4F-POLISH.md §F2) reverts VW from the
   image-band treatment back to a COVER-OBJECT: it reuses the same
   .cw-book-showcase cover/body grid as CC/HW above (cover framed at
   2:3 with the layered shadow, full colour, no grayscale/mute — the
   book-vw.php template now emits that exact markup with the
   .cw-book-showcase--vw modifier), sitting on the alternating
   .cw-band--tint context after the HW showcase. No band-image
   background-position override is needed any more — the cover is a
   contained <img>, not a full-bleed background, so the "avoid landing
   the crop on the baked-in title block" problem this block used to
   solve no longer applies. .cw-book-vw__chiprow is left-aligned like
   the CC chip via the shared rule above (not the old centred/on-dark
   band posture).
------------------------------------------------------------- */
.cw-book-showcase--vw .cw-book-showcase__pitch {
  font-weight: 500;
}

/* -------------------------------------------------------------
   S4 — WAYS TO READ IT — the section id/class is kept only as a
   scroll-margin + legacy anchor hook; the cards themselves now
   render via card.php + .cw-cards--3 (components.css owns the
   card/grid styling — nothing book-specific needed here).
------------------------------------------------------------- */

/* -------------------------------------------------------------
   S5 — ESSAYS — .cw-cards--2 of .cw-card--media; components.css
   owns the card styling. Nothing book-specific needed here.
------------------------------------------------------------- */

/* -------------------------------------------------------------
   S6 — SHARE. 4F (docs/plan/4F-POLISH.md §F2): becomes the closing
   --image band — book-cover.webp as --cw-band-img with the standard
   navy overlay (.cw-band--image, components.css) — so the heading/
   lead/buttons below need on-dark restyling scoped to this band
   (the base rules stay as-authored for any future light-context use).
------------------------------------------------------------- */
.cw-share {
  text-align: center;
}
.cw-share__lead {
  max-width: 48ch;
  margin: 0.5rem auto 1.6rem;
  font-family: var(--cw-font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.45;
  color: var(--cw-heading);
}
.cw-band--image .cw-share__lead {
  color: var(--cw-on-dark);
}
.cw-share__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  /* The template puts real whitespace (a newline + indent) between each
     <li> and its <a> — normally invisible, but that whitespace is still an
     inline text node, so it injects a font-metric baseline strut into the
     flex row. The strut lands on the FIRST flex item only (an artifact of
     how the anonymous inline box is generated), making the X <li> ~50.8px
     tall against 44px for the rest — which visibly lifts just the X circle
     ~6.7px above its siblings. font-size:0 zeroes that whitespace's box so
     every <li> is 44px tall (measured live: 0.00px spread across all four).
     Do NOT remove this — it silently reappears if this line is "cleaned
     up". Paired with the explicit .cw-share__btn .cw-icon size below, which
     is required because .cw-icon is em-sized and would otherwise collapse
     to 0×0 under font-size:0. */
  font-size: 0;
}
/* Icon-only circular share buttons — matches the essays/news share rows
   (essays.css / news.css) so the whole site shares one pattern. Labels live
   on each anchor's aria-label, so a 1-character "X" and a long "WhatsApp" no
   longer produce mismatched pill widths (the earlier min-width workaround). */
.cw-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cw-border);
  border-radius: 50%;
  color: var(--cw-navy);
  text-decoration: none;
  transition: border-color var(--cw-dur-fast) var(--cw-ease),
    color var(--cw-dur-fast) var(--cw-ease),
    background var(--cw-dur-fast) var(--cw-ease);
}
/* .cw-icon is em-sized (1.5em, base.css), so .cw-share__row's font-size:0
   above would otherwise shrink these glyphs to 0×0. book-share.php renders
   each icon via cw_icon(..., ['size' => 20]), so pin the explicit px here
   to match. */
.cw-share__btn .cw-icon {
  width: 20px;
  height: 20px;
}
.cw-share__btn:hover {
  border-color: var(--cw-gold);
  color: var(--cw-gold-deep);
  background: rgba(200, 162, 74, 0.06);
  text-decoration: none;
}
.cw-band--image .cw-share__btn {
  color: var(--cw-on-dark);
  border-color: rgba(245, 240, 232, 0.3);
  background: rgba(245, 240, 232, 0.06);
}
.cw-band--image .cw-share__btn:hover {
  border-color: var(--cw-gold);
  color: var(--cw-gold-light);
  background: rgba(245, 240, 232, 0.12);
}

/* -------------------------------------------------------------
   S7 — FAQ (book; never co-loads with about.css)
   Click-to-open accordion: <details class="cw-faq__item"><summary
   class="cw-faq__q">…</summary><div class="cw-faq__a">…</div></details>,
   all CLOSED by default (native <details>/<summary> — zero JS). The
   summary's default disclosure triangle is killed and replaced with a gold
   "+" affordance (::after) that rotates into an "×" on [open], echoing the
   45°-rotate language already used by .cw-book-preview__summary above.
------------------------------------------------------------- */
.cw-faq {
  margin: 1.5rem 0 0;
}
.cw-faq__item {
  border-top: 1px solid var(--cw-border-soft);
}
.cw-faq__item:first-child {
  border-top: 0;
}
.cw-faq__q {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--cw-font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--cw-heading);
  cursor: pointer;
  list-style: none;
  transition: color var(--cw-dur-fast) var(--cw-ease);
}
.cw-faq__q::-webkit-details-marker {
  display: none;
}
.cw-faq__q::after {
  content: "";
  position: relative;
  flex: 0 0 auto;
  width: 0.8rem;
  height: 0.8rem;
  margin-left: auto;
  background: linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 100% 2px, 2px 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--cw-gold-deep);
  /* An explicit base transform (not the "none" initial value) is required —
     verified live: without it the [open] rule's rotate(45deg) silently fails
     to apply/animate (the transition has no concrete "from" value to
     interpolate out of "none"). Mirrors .cw-book-preview__summary::after
     above, which always carries an explicit base rotate() for the same
     reason. */
  transform: rotate(0deg);
  transition: transform var(--cw-dur-fast) var(--cw-ease);
}
.cw-faq__item[open] > .cw-faq__q::after {
  transform: rotate(45deg); /* "+" -> "×" on open */
}
.cw-faq__q:hover,
.cw-faq__q:focus-visible {
  color: var(--cw-gold-deep);
}
.cw-faq__q:focus-visible {
  outline: 2px solid var(--cw-focus);
  outline-offset: 2px;
}
.cw-faq__a {
  margin: 0;
  padding: 0 0 1.4rem;
  color: var(--cw-text);
  line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
  .cw-faq__q,
  .cw-faq__q::after {
    transition: none;
  }
}

/* Micro-structured answers (the 2 longest — 4D layered-FAQ pattern): a short
   lead line + bullets instead of a paragraph wall. Content-preserved,
   formatting-layered only. */
.cw-faq__lead {
  margin: 0 0 0.65rem;
  font-weight: 600;
  color: var(--cw-heading);
  line-height: 1.6;
}
.cw-faq__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.cw-faq__bullets li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--cw-text);
  line-height: 1.65;
}
.cw-faq__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cw-gold);
}

/* -------------------------------------------------------------
   Capture success panel — two-book list (each book renders its own
   row, with a graceful "arriving with launch" fallback when a PDF
   setting is still empty rather than a dead link).
------------------------------------------------------------- */
.cw-capture__books {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0;
  text-align: left;
}
.cw-capture__book {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cw-border-dark);
  border-radius: var(--cw-radius-md);
  background: rgba(255, 255, 255, 0.03);
}
.cw-capture__book-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cw-capture__book-title {
  font-family: var(--cw-font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-on-dark);
}
.cw-capture__book-meta {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--cw-on-dark-muted);
}
.cw-capture__book-soon {
  flex: 0 0 auto;
  font-family: var(--cw-font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-on-dark-muted);
  white-space: nowrap;
}
.cw-capture__book .cw-btn {
  flex: 0 0 auto;
}
.cw-capture__done-text--sub {
  margin-top: 1rem;
  font-size: 0.95rem;
  opacity: 0.85;
}