/* ==========================================================================
   SkyyCast Books -- editorial bookstore (pub-books-*)
   ==========================================================================

   Loaded only by the generated Books pages (scripts/build-books.js), after
   assets/sc-public.css. It extends the Public Layer; it is not a separate
   visual system:
     * same isolation contract as sc-public.css -- every rule is scoped with
       :is(#public-view, .pub-site) and a pub-books-* class; nothing targets
       :root, html, body, *, or the Dashboard's .sc-* rules;
     * --pub-* tokens and the Bricolage Grotesque font the page already loads;
       colour and imagery come from the book covers themselves;
     * no ad slots of any kind: Books pages carry no advertising.

   Sections: 1 frame + type, 2 3D book, 3 hero, 4 shelf toolbar, 5 featured,
   6 grid + cards, 7 product page, 8 category, 9 download, 10 reader.
   ========================================================================== */

/* ---- 1. Frame and editorial type ------------------------------------------ */

:is(#public-view, .pub-site) main.pub-books {
  padding: 0 0 var(--pub-space-9);
  background-color: var(--pub-bg);
  min-height: 60vh;
  overflow-x: clip;
}
:is(#public-view, .pub-site) .pub-books :is(h1, h2, h3) { font-family: var(--pub-font); }
:is(#public-view, .pub-site) .pub-books-body { padding-top: var(--pub-space-7); }

:is(#public-view, .pub-site) .pub-books-eyebrow {
  margin: 0 0 var(--pub-space-3);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pub-link);
}
:is(#public-view, .pub-site) .pub-books-display {
  margin: 0;
  font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--pub-text);
  text-wrap: balance;
}
:is(#public-view, .pub-site) .pub-books-display span { display: block; color: var(--pub-accent-secondary); }
:is(#public-view, .pub-site) .pub-books-display-sm { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
/* Sized so a real one-to-four-word product title ("The Attention Budget",
   "Own What You Merge") stays on one line at every breakpoint, including
   the narrowest phones -- measured empirically against the actual
   .pub-books-product-copy column width at each tier (see the two
   min-width overrides below), not guessed. Below 480px the column itself
   is only ~280-400px wide, far too narrow for the original clamp's
   2.5rem floor at this font weight/tracking, which is what forced the
   unwanted mid-word wrap on phones. */
:is(#public-view, .pub-site) .pub-books-title {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--pub-text);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
/* 480px is the project's own existing gutter breakpoint (assets/sc-public.css);
   reused here rather than inventing a new one. From here the column is
   wide enough to scale the title up considerably and still fit. */
@media (min-width: 480px) {
  :is(#public-view, .pub-site) .pub-books-title {
    font-size: clamp(1.625rem, 0.9rem + 5vw, 3.75rem);
  }
}
:is(#public-view, .pub-site) .pub-books-h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--pub-text);
}
:is(#public-view, .pub-site) .pub-books-subtitle {
  margin: var(--pub-space-3) 0 0;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--pub-text-secondary);
}
:is(#public-view, .pub-site) .pub-books-byline { margin: var(--pub-space-3) 0 0; font-weight: 600; color: var(--pub-text); }
:is(#public-view, .pub-site) .pub-books-lede {
  margin: var(--pub-space-4) 0 0;
  max-width: 54ch;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--pub-text-secondary);
}
:is(#public-view, .pub-site) .pub-books-meta-line {
  margin: var(--pub-space-4) 0 0;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--pub-text-muted);
}
:is(#public-view, .pub-site) .pub-books-price-lg {
  margin: var(--pub-space-5) 0 0;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--pub-text);
}
:is(#public-view, .pub-site) .pub-books-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pub-space-3);
  margin-top: var(--pub-space-5);
}
:is(#public-view, .pub-site) .pub-books-preview-btn svg { flex: 0 0 auto; }
:is(#public-view, .pub-site) .pub-books-btn-night {
  background-color: transparent;
  border-color: rgba(238, 242, 255, .32);
  color: var(--pub-night-text);
}
:is(#public-view, .pub-site) .pub-books-btn-night:hover { background-color: rgba(238, 242, 255, .08); border-color: var(--pub-night-text); color: var(--pub-night-text); }

/* Breadcrumb */
:is(#public-view, .pub-site) .pub-books-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pub-space-2);
  margin: 0 0 var(--pub-space-5);
  padding: 0;
  list-style: none;
  font-size: .875rem;
  color: var(--pub-text-muted);
}
:is(#public-view, .pub-site) .pub-books-breadcrumb li { min-width: 0; overflow-wrap: anywhere; }
:is(#public-view, .pub-site) .pub-books-breadcrumb li + li::before { content: "/"; margin-right: var(--pub-space-2); }
:is(#public-view, .pub-site) .pub-books-breadcrumb a { color: var(--pub-text-secondary); text-decoration: none; }
:is(#public-view, .pub-site) .pub-books-breadcrumb a:hover { color: var(--pub-link); text-decoration: underline; }

/* ---- 2. The 3D book --------------------------------------------------------
   Front cover (the real cover image), page block, spine and back cover built
   with CSS 3D transforms around one element. Size via --w; thickness --t. */

:is(#public-view, .pub-site) .pub-books-3d {
  --w: 170px;
  --t: calc(var(--w) * .11);
  --ry: -26deg;
  --rx: 4deg;
  position: relative;
  width: var(--w);
  aspect-ratio: 2 / 3;
  perspective: 1600px;
  flex: 0 0 auto;
  isolation: isolate;
}
:is(#public-view, .pub-site) .pub-books-3d-sm { --w: 92px; }
:is(#public-view, .pub-site) .pub-books-3d-md { --w: 168px; }
:is(#public-view, .pub-site) .pub-books-3d-lg { --w: min(220px, 44vw); }
:is(#public-view, .pub-site) .pub-books-3d-xl { --w: min(300px, 62vw); }

:is(#public-view, .pub-site) .pub-books-3d::after {
  content: "";
  position: absolute;
  left: 4%;
  right: -10%;
  bottom: -7%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11, 16, 32, .42), rgba(11, 16, 32, 0));
  filter: blur(4px);
  transform: translateX(6%);
  z-index: -1;
  transition: transform var(--pub-dur-reveal) var(--pub-ease), opacity var(--pub-dur-reveal) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-books-3d-book {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform var(--pub-dur-reveal) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-books-3d-front,
:is(#public-view, .pub-site) .pub-books-3d-gloss {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px 5px 5px 2px;
  transform: translateZ(calc(var(--t) / 2));
  backface-visibility: hidden;
}
:is(#public-view, .pub-site) .pub-books-3d-front { display: block; object-fit: cover; background-color: var(--pub-books-spine); }
:is(#public-view, .pub-site) .pub-books-3d-gloss {
  pointer-events: none;
  transform: translateZ(calc(var(--t) / 2 + .5px));
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .34) 0, rgba(255, 255, 255, .16) 2.2%, rgba(0, 0, 0, .12) 4%, rgba(0, 0, 0, 0) 7%),
    linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 38%);
}
:is(#public-view, .pub-site) .pub-books-3d-pages {
  position: absolute;
  top: 1.5%;
  height: 97%;
  width: var(--t);
  left: calc(100% - var(--t) / 2);
  transform: rotateY(90deg) translateZ(-1px);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .12)),
    repeating-linear-gradient(90deg, #FBF8F1 0 1px, #E6E0D2 1px 2px);
}
:is(#public-view, .pub-site) .pub-books-3d-spine {
  position: absolute;
  top: 0;
  height: 100%;
  width: var(--t);
  left: calc(var(--t) / -2);
  transform: rotateY(-90deg);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .3)),
    var(--pub-books-spine);
}
:is(#public-view, .pub-site) .pub-books-3d-back {
  position: absolute;
  inset: 0;
  border-radius: 2px 5px 5px 2px;
  transform: translateZ(calc(var(--t) / -2)) rotateY(180deg);
  background-color: var(--pub-books-spine);
  box-shadow: 0 30px 60px -20px rgba(11, 16, 32, .55);
  transition: box-shadow var(--pub-dur-reveal) var(--pub-ease);
}

/* Cards and product pages turn the book a little further towards the reader,
   so the front cover stays flat and readable while the page edge still shows. */
:is(#public-view, .pub-site) .pub-books-card-stage .pub-books-3d { --ry: -18deg; --rx: 3deg; }
:is(#public-view, .pub-site) .pub-books-product-art .pub-books-3d { --ry: -22deg; --rx: 3deg; }

/* Hover/focus: the book lifts a few pixels and turns slightly towards the
   reader; its shadow deepens. Vertical only -- no sideways travel. */
:is(#public-view, .pub-site) :is(.pub-books-card:hover, .pub-books-card:focus-within, .pub-books-feature-book:hover, .pub-books-feature-book:focus-visible) .pub-books-3d-book {
  transform: translateY(-5px) scale(1.01) rotateX(var(--rx)) rotateY(calc(var(--ry) + 2deg));
}
:is(#public-view, .pub-site) .pub-books-product-art .pub-books-3d:hover .pub-books-3d-book {
  transform: translateY(-5px) rotateX(calc(var(--rx) + 1deg)) rotateY(calc(var(--ry) + 2deg));
}
:is(#public-view, .pub-site) :is(.pub-books-card:hover, .pub-books-card:focus-within, .pub-books-feature-book:hover, .pub-books-feature-book:focus-visible, .pub-books-product-art .pub-books-3d:hover) .pub-books-3d-back {
  box-shadow: 0 40px 70px -22px rgba(11, 16, 32, .62);
}
:is(#public-view, .pub-site) :is(.pub-books-card:hover, .pub-books-card:focus-within, .pub-books-feature-book:hover, .pub-books-feature-book:focus-visible) .pub-books-3d::after,
:is(#public-view, .pub-site) .pub-books-product-art .pub-books-3d:hover::after { transform: translateX(6%) scaleX(1.05); opacity: .85; }

/* ---- 3. Store hero ---------------------------------------------------------- */

:is(#public-view, .pub-site) .pub-books-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--pub-space-7) var(--pub-space-8);
  background-image:
    radial-gradient(60% 70% at 78% 45%, rgba(47, 91, 255, .30), rgba(47, 91, 255, 0) 70%),
    radial-gradient(40% 50% at 70% 85%, rgba(44, 204, 228, .14), rgba(44, 204, 228, 0) 70%);
}
/* A quiet shelf line the books stand on. */
:is(#public-view, .pub-site) .pub-books-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(238, 242, 255, 0), rgba(238, 242, 255, .22), rgba(238, 242, 255, 0));
}
:is(#public-view, .pub-site) .pub-books-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pub-space-7);
  align-items: center;
}
@media (min-width: 960px) {
  :is(#public-view, .pub-site) .pub-books-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--pub-space-6); }
}
/* Below the two-column breakpoint, the hero copy was still using the
   desktop's left-aligned block -- correct once there's a visual to balance
   against on the right, but an awkward ragged-left column once everything
   stacks single-file. Center the whole copy block (and its own children,
   since several have their own max-width/margin that would otherwise keep
   them pinned left inside a centered parent) so title, paragraph, actions
   and trust list share one visual axis with the eyebrow above them. */
@media (max-width: 959.98px) {
  :is(#public-view, .pub-site) .pub-books-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  :is(#public-view, .pub-site) .pub-books-hero-copy .pub-books-breadcrumb,
  :is(#public-view, .pub-site) .pub-books-hero-copy .pub-books-eyebrow { align-self: center; }
  :is(#public-view, .pub-site) .pub-books-hero-copy .pub-books-breadcrumb ol { justify-content: center; }
  :is(#public-view, .pub-site) .pub-books-hero-copy .pub-books-lede { margin-inline: auto; }
  :is(#public-view, .pub-site) .pub-books-hero-copy .pub-books-actions { justify-content: center; }
  :is(#public-view, .pub-site) .pub-books-hero-copy .pub-books-trust { justify-content: center; }
}
:is(#public-view, .pub-site) .pub-books-hero .pub-books-breadcrumb ol { color: var(--pub-night-text-secondary); }
:is(#public-view, .pub-site) .pub-books-hero .pub-books-breadcrumb a { color: var(--pub-night-text-secondary); }
:is(#public-view, .pub-site) .pub-books-hero .pub-books-eyebrow { color: var(--pub-accent-secondary); }
:is(#public-view, .pub-site) .pub-books-hero-lede {
  margin: var(--pub-space-5) 0 0;
  max-width: 50ch;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.65;
  color: var(--pub-text-secondary);
}
:is(#public-view, .pub-site) .pub-books-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pub-space-2) var(--pub-space-5);
  margin: var(--pub-space-6) 0 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
  font-weight: 500;
  color: var(--pub-text-secondary);
}
:is(#public-view, .pub-site) .pub-books-trust li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--pub-space-2);
  border-radius: 50%;
  background-color: var(--pub-accent-secondary);
  vertical-align: middle;
}

:is(#public-view, .pub-site) .pub-books-hero-stage {
  position: relative;
  height: clamp(340px, 30vw + 180px, 520px);
  max-width: 560px;
  margin-inline: auto;
}
:is(#public-view, .pub-site) .pub-books-hero-lead {
  position: absolute;
  right: 12%;
  bottom: 8%;
  z-index: 3;
  animation: pub-books-float 2.5s ease-in-out infinite alternate;
}
/* Pointer over the hero book: the float pauses where it is. */
:is(#public-view, .pub-site) .pub-books-hero-lead:hover { animation-play-state: paused; }
:is(#public-view, .pub-site) .pub-books-hero-lead .pub-books-3d { --w: min(290px, 50vw); }
:is(#public-view, .pub-site) .pub-books-hero-second {
  position: absolute;
  left: 4%;
  bottom: 14%;
  z-index: 2;
  opacity: .92;
}
:is(#public-view, .pub-site) .pub-books-hero-second .pub-books-3d { --w: min(200px, 34vw); --ry: -34deg; }

/* Real pages from the book, floating behind it. */
:is(#public-view, .pub-site) .pub-books-float-page {
  position: absolute;
  width: 42%;
  max-width: 230px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 24px 50px -18px rgba(11, 16, 32, .55), 0 2px 6px rgba(11, 16, 32, .15);
  z-index: 1;
}
:is(#public-view, .pub-site) .pub-books-float-page-a { left: 26%; top: 0; transform: rotate(-9deg); }
:is(#public-view, .pub-site) .pub-books-float-page-b { right: 0; top: 10%; transform: rotate(8deg); }
:is(#public-view, .pub-site) .pub-books-float-page-c { right: 2%; top: 4%; transform: rotate(7deg); width: 46%; }
:is(#public-view, .pub-site) .pub-books-float-page-d { left: 52%; top: 6%; transform: rotate(8deg); width: 44%; }

/* A slow 5 px rise with a hair of rotation; alternate makes a 5 s cycle. */
@keyframes pub-books-float {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-5px) rotate(-.2deg); }
}

@media (max-width: 959.98px) {
  :is(#public-view, .pub-site) .pub-books-hero-stage { height: 360px; max-width: 420px; }
  :is(#public-view, .pub-site) .pub-books-hero-lead { right: 8%; }
  :is(#public-view, .pub-site) .pub-books-hero-lead .pub-books-3d { --w: min(210px, 46vw); }
  :is(#public-view, .pub-site) .pub-books-hero-second .pub-books-3d { --w: min(150px, 32vw); }
  :is(#public-view, .pub-site) .pub-books-float-page { width: 38%; }
}

/* ---- 4. Shelf toolbar: search + category tabs ------------------------------ */

:is(#public-view, .pub-site) .pub-books-shelf {
  position: relative;
  z-index: 2;
  padding-top: var(--pub-space-7);
}
:is(#public-view, .pub-site) .pub-books-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pub-space-5);
}
:is(#public-view, .pub-site) .pub-books-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 460px;
  color: var(--pub-text-muted);
}
:is(#public-view, .pub-site) .pub-books-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; }
:is(#public-view, .pub-site) .pub-books-search input {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--pub-space-5) 0 50px;
  border: 1px solid var(--pub-border-strong);
  border-radius: var(--pub-radius-pill);
  background-color: var(--pub-surface);
  box-shadow: var(--pub-shadow-sm);
  color: var(--pub-text);
  font-family: var(--pub-font);
  font-size: 1rem;
}
:is(#public-view, .pub-site) .pub-books-search input::placeholder { color: var(--pub-text-muted); }
:is(#public-view, .pub-site) .pub-books-search input:focus-visible { outline: none; border-color: var(--pub-accent); box-shadow: var(--pub-ring); }

:is(#public-view, .pub-site) .pub-books-tabs {
  display: flex;
  gap: var(--pub-space-1);
  margin-top: var(--pub-space-5);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--pub-border);
  overflow-x: auto;
  scrollbar-width: none;
}
:is(#public-view, .pub-site) .pub-books-tabs::-webkit-scrollbar { display: none; }
:is(#public-view, .pub-site) .pub-books-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--pub-space-2);
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 var(--pub-space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--pub-text-secondary);
  font-family: var(--pub-font);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--pub-dur) var(--pub-ease), border-color var(--pub-dur) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-books-tab:hover { color: var(--pub-text); }
:is(#public-view, .pub-site) .pub-books-tab.is-active { color: var(--pub-text); border-bottom-color: var(--pub-accent); }
:is(#public-view, .pub-site) .pub-books-tab:focus-visible { outline: none; box-shadow: var(--pub-ring); border-radius: var(--pub-radius-sm); }
:is(#public-view, .pub-site) .pub-books-tab-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--pub-radius-pill);
  background-color: var(--pub-bg-soft);
  color: var(--pub-text-muted);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
:is(#public-view, .pub-site) .pub-books-tab.is-active .pub-books-tab-count { background-color: var(--pub-accent-soft); color: var(--pub-link); }

/* ---- 5. Featured book -------------------------------------------------------- */

:is(#public-view, .pub-site) .pub-books-feature {
  margin-top: var(--pub-space-7);
  padding-block: var(--pub-space-8);
  background:
    radial-gradient(55% 80% at 22% 50%, rgba(47, 91, 255, .10), rgba(47, 91, 255, 0) 70%),
    var(--pub-bg-soft);
  border-block: 1px solid var(--pub-border);
}
:is(#public-view, .pub-site) .pub-books.is-filtering [data-books-curated] { display: none; }
:is(#public-view, .pub-site) .pub-books-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pub-space-7);
  align-items: center;
}
@media (min-width: 900px) {
  :is(#public-view, .pub-site) .pub-books-feature-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--pub-space-9); }
}
:is(#public-view, .pub-site) .pub-books-feature-art {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--pub-space-5) 0 var(--pub-space-6);
}
:is(#public-view, .pub-site) .pub-books-feature-book { position: relative; z-index: 2; display: block; border-radius: 6px; }
:is(#public-view, .pub-site) .pub-books-feature-book:focus-visible { outline: none; box-shadow: var(--pub-ring); }
:is(#public-view, .pub-site) .pub-books-feature-title {
  margin: 0;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
:is(#public-view, .pub-site) .pub-books-feature-title a { color: var(--pub-text); text-decoration: none; }
:is(#public-view, .pub-site) .pub-books-feature-title a:hover { color: var(--pub-link); }

/* ---- 6. Sections, grid and book cards -------------------------------------- */

:is(#public-view, .pub-site) .pub-books-section { margin-top: var(--pub-space-8); }
:is(#public-view, .pub-site) .pub-books-body > .pub-books-section:first-child { margin-top: 0; }
:is(#public-view, .pub-site) .pub-books-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pub-space-3);
  margin-bottom: var(--pub-space-6);
}

/* Fluid shelf: as many 240-320px columns as the available width allows, so a
   section with only one or two books never stretches a lone card across a
   whole 1/2- or 1/3-width column (the empty-looking "isolated card" effect).
   auto-fit collapses unused tracks instead of leaving hardcoded 1/2/3-column
   ghost space, and naturally falls back to one column once only one 240px
   track fits (~<480px content width). */
:is(#public-view, .pub-site) .pub-books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  gap: var(--pub-space-7) var(--pub-space-5);
}
@media (min-width: 1024px) {
  :is(#public-view, .pub-site) .pub-books-grid { gap: var(--pub-space-8) var(--pub-space-6); }
}

:is(#public-view, .pub-site) .pub-books-card { display: flex; flex-direction: column; min-width: 0; }
:is(#public-view, .pub-site) .pub-books-card[hidden] { display: none; }
:is(#public-view, .pub-site) .pub-books-card-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pub-space-7) var(--pub-space-5) var(--pub-space-6);
  border-radius: var(--pub-radius-xl);
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 75%),
    var(--pub-bg-soft);
  border: 1px solid var(--pub-border);
  transition: background-color var(--pub-dur) var(--pub-ease), border-color var(--pub-dur) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-books-card:hover .pub-books-card-stage { border-color: var(--pub-border-strong); }
:is(#public-view, .pub-site) .pub-books-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--pub-space-2);
  padding: var(--pub-space-5) var(--pub-space-1) 0;
}
:is(#public-view, .pub-site) .pub-books-kicker {
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pub-link);
}
:is(#public-view, .pub-site) .pub-books-card-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
:is(#public-view, .pub-site) .pub-books-card-title a { color: var(--pub-text); text-decoration: none; }
:is(#public-view, .pub-site) .pub-books-card-title a:hover { color: var(--pub-link); }
:is(#public-view, .pub-site) .pub-books-card-title a:focus-visible { outline: none; box-shadow: var(--pub-ring); border-radius: 4px; }
:is(#public-view, .pub-site) .pub-books-card-desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pub-text-secondary);
  overflow-wrap: anywhere;
}
:is(#public-view, .pub-site) .pub-books-card-author { margin: 0; font-size: .875rem; color: var(--pub-text-muted); }
:is(#public-view, .pub-site) .pub-books-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pub-space-3);
  margin-top: auto;
  padding-top: var(--pub-space-4);
  border-top: 1px solid var(--pub-border);
}
:is(#public-view, .pub-site) .pub-books-card-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--pub-space-2); }
:is(#public-view, .pub-site) .pub-books-price {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--pub-text);
}

/* ---- Compact horizontal "row" listing card ----------------------------
   Books shelf sections, the searchable "Results" grid and category pages
   only (.pub-books-grid--rows / .pub-books-card--row, applied by
   scripts/build-books.js). The book detail page's "Related books" grid
   keeps the original vertical .pub-books-card above, completely
   unmodified, since this redesign is scoped to listing/shelf surfaces. */
:is(#public-view, .pub-site) .pub-books-grid--rows {
  display: flex;
  flex-direction: column;
  gap: var(--pub-space-4);
}
:is(#public-view, .pub-site) .pub-books-card--row {
  flex-direction: row;
  align-items: stretch;
  gap: var(--pub-space-5);
  padding: var(--pub-space-4);
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-lg);
  background-color: var(--pub-surface);
  transition: border-color var(--pub-dur) var(--pub-ease), box-shadow var(--pub-dur) var(--pub-ease), transform var(--pub-dur) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-books-card--row:hover,
:is(#public-view, .pub-site) .pub-books-card--row:focus-within {
  border-color: var(--pub-border-strong);
  box-shadow: var(--pub-shadow-md);
  transform: translateY(-2px);
}
:is(#public-view, .pub-site) .pub-books-card--row .pub-books-card-stage {
  flex: none;
  padding: 0;
  background: none;
  border: none;
  align-items: flex-start;
}
/* The base .pub-books-card:hover rule (above) brightens the stage border;
   the row card has no stage border to brighten. */
:is(#public-view, .pub-site) .pub-books-card--row:hover .pub-books-card-stage { border-color: transparent; }
:is(#public-view, .pub-site) .pub-books-card--row .pub-books-card-body {
  padding: 0;
  justify-content: center;
  gap: var(--pub-space-1);
}
:is(#public-view, .pub-site) .pub-books-card--row .pub-books-card-title {
  font-size: 1.1875rem;
  text-wrap: balance;
}
:is(#public-view, .pub-site) .pub-books-card--row .pub-books-card-desc {
  font-size: .9375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:is(#public-view, .pub-site) .pub-books-card--row .pub-books-card-foot {
  margin-top: var(--pub-space-2);
  padding-top: var(--pub-space-3);
  border-top: 1px solid var(--pub-border);
}
@media (prefers-reduced-motion: reduce) {
  :is(#public-view, .pub-site) .pub-books-card--row:hover,
  :is(#public-view, .pub-site) .pub-books-card--row:focus-within { transform: none; }
}
/* Below 640px the row keeps its horizontal shape -- per the design brief,
   never the old full-width vertical card -- with a smaller cover, tighter
   type, and the format/pages meta + badges dropped so title, author, a
   one-line summary and the price/actions row all still fit without the
   actions wrapping away from the price. */
@media (max-width: 639.98px) {
  :is(#public-view, .pub-site) .pub-books-card--row { gap: var(--pub-space-3); padding: var(--pub-space-3); }
  :is(#public-view, .pub-site) .pub-books-card--row .pub-books-card-stage .pub-books-3d,
  :is(#public-view, .pub-site) .pub-books-card--row .pub-books-card-stage .pub-books-flat { --w: 76px; }
  :is(#public-view, .pub-site) .pub-books-card--row .pub-books-card-title { font-size: .9375rem; }
  :is(#public-view, .pub-site) .pub-books-card--row .pub-books-card-author { font-size: .8125rem; }
  :is(#public-view, .pub-site) .pub-books-card--row .pub-books-card-desc { -webkit-line-clamp: 1; font-size: .875rem; }
  :is(#public-view, .pub-site) .pub-books-card--row .pub-books-card-meta,
  :is(#public-view, .pub-site) .pub-books-card--row .pub-books-badges { display: none; }
  :is(#public-view, .pub-site) .pub-books-card--row .pub-books-card-foot { gap: var(--pub-space-2); }
  :is(#public-view, .pub-site) .pub-books-card--row .pub-books-price { font-size: 1.0625rem; }
}

/* ---- Compact "shelf" card: vertical and centered on one axis, for
   horizontally browsable curated shelves (New releases, per-category
   shelves, "You might also like") -- one editorial product object, never a
   cover-left row (that's .pub-books-card--row, used by the Results grid
   only). .pub-books-shelf-track holds one or more of these side by side
   and scrolls horizontally once there are more books than fit the
   viewport, instead of stretching a lone card across the whole section
   width. Cards are a fixed width (never stretched), so a shelf with only
   one book still reads as a deliberate product card. */
:is(#public-view, .pub-site) .pub-books-shelf-track {
  display: flex;
  align-items: stretch;
  gap: var(--pub-space-5);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--pub-space-1);
  padding-bottom: var(--pub-space-2);
}
:is(#public-view, .pub-site) .pub-books-card--shelf {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 230px;
  padding: var(--pub-space-5) var(--pub-space-4);
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-lg);
  background-color: var(--pub-surface);
  text-align: center;
  transition: border-color var(--pub-dur) var(--pub-ease), box-shadow var(--pub-dur) var(--pub-ease), transform var(--pub-dur) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-books-card--shelf:hover,
:is(#public-view, .pub-site) .pub-books-card--shelf:focus-within {
  border-color: var(--pub-border-strong);
  box-shadow: var(--pub-shadow-md);
  transform: translateY(-2px);
}
:is(#public-view, .pub-site) .pub-books-card--shelf:hover .pub-books-card-stage { border-color: transparent; }
:is(#public-view, .pub-site) .pub-books-card--shelf .pub-books-card-stage {
  padding: 0 0 var(--pub-space-4);
  background: none;
  border: none;
  justify-content: center;
}
:is(#public-view, .pub-site) .pub-books-card--shelf .pub-books-card-body {
  padding: 0;
  gap: var(--pub-space-1);
}
/* Explicit, not just inherited from the article's own text-align:center --
   sc-public.css's generic ".pub-site article p { text-align: left }" (for
   ordinary blog/article body copy) otherwise wins on specificity for any
   <p> inside this <article> card, silently pulling the kicker, author and
   description back to the left while the <h3> title (unaffected, it's not
   a <p>) stays centered. */
:is(#public-view, .pub-site) .pub-books-card--shelf .pub-books-kicker,
:is(#public-view, .pub-site) .pub-books-card--shelf .pub-books-card-author,
:is(#public-view, .pub-site) .pub-books-card--shelf .pub-books-card-desc {
  text-align: center;
}
:is(#public-view, .pub-site) .pub-books-card--shelf .pub-books-card-title { font-size: 1.0625rem; text-wrap: balance; }
:is(#public-view, .pub-site) .pub-books-card--shelf .pub-books-card-desc {
  font-size: .875rem;
  max-width: 30ch;
  margin-inline: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Deliberately omitted on the compact shelf card, unlike the row card --
   format/pages and edition badges stay on the fuller Results/row card and
   the book's own detail page. */
:is(#public-view, .pub-site) .pub-books-card--shelf .pub-books-card-meta,
:is(#public-view, .pub-site) .pub-books-card--shelf .pub-books-badges { display: none; }
:is(#public-view, .pub-site) .pub-books-card--shelf .pub-books-card-foot {
  flex-direction: column;
  justify-content: center;
  gap: var(--pub-space-2);
  margin-top: var(--pub-space-2);
  padding-top: var(--pub-space-3);
  border-top: 1px solid var(--pub-border);
}
:is(#public-view, .pub-site) .pub-books-card--shelf .pub-books-card-actions {
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
}
/* Preview and Buy read as one matched pair -- same button shape/height,
   same baseline -- rather than a bordered button next to a bare text
   link. Padding is trimmed from the shared .pub-btn default (0 20px) just
   enough that "Preview" + "Buy" reliably share one row even on the
   narrowest supported card width (230px), instead of wrapping to two
   rows the moment the icon+label text and both buttons' padding together
   are a few px over. */
:is(#public-view, .pub-site) .pub-books-card--shelf .pub-books-card-actions .pub-btn {
  flex: 1 1 0;
  padding-inline: var(--pub-space-3);
}
@media (min-width: 640px) {
  :is(#public-view, .pub-site) .pub-books-card--shelf { width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#public-view, .pub-site) .pub-books-card--shelf:hover,
  :is(#public-view, .pub-site) .pub-books-card--shelf:focus-within { transform: none; }
}

:is(#public-view, .pub-site) .pub-books-shelf-viewall {
  flex: 0 0 auto;
  align-self: baseline;
  white-space: nowrap;
  font-weight: 700;
  text-decoration: none;
}
:is(#public-view, .pub-site) .pub-books-shelf-viewall:hover { text-decoration: underline; }

:is(#public-view, .pub-site) .pub-books-empty {
  padding: var(--pub-space-6);
  border: 1px dashed var(--pub-border-strong);
  border-radius: var(--pub-radius-lg);
  color: var(--pub-text-secondary);
  text-align: center;
}

:is(#public-view, .pub-site) .pub-books-category-links { display: flex; flex-wrap: wrap; gap: var(--pub-space-3); margin: 0; padding: 0; list-style: none; }
:is(#public-view, .pub-site) .pub-books-category-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--pub-space-3);
  padding: var(--pub-space-3) var(--pub-space-5);
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-pill);
  background-color: var(--pub-surface);
  color: var(--pub-text);
  font-weight: 600;
  text-decoration: none;
}
:is(#public-view, .pub-site) .pub-books-category-links a:hover { border-color: var(--pub-accent); color: var(--pub-link); }

:is(#public-view, .pub-site) .pub-books-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pub-space-4);
  margin: 0 0 var(--pub-space-5);
  padding: 0;
  list-style: none;
  counter-reset: pub-books-step;
}
@media (min-width: 768px) {
  :is(#public-view, .pub-site) .pub-books-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
:is(#public-view, .pub-site) .pub-books-steps li {
  counter-increment: pub-books-step;
  padding: var(--pub-space-6) var(--pub-space-5);
  border-top: 2px solid var(--pub-text);
  color: var(--pub-text-secondary);
  line-height: 1.65;
}
:is(#public-view, .pub-site) .pub-books-steps li::before {
  content: "0" counter(pub-books-step);
  display: block;
  margin-bottom: var(--pub-space-3);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--pub-link);
}
:is(#public-view, .pub-site) .pub-books-steps strong { display: block; margin-bottom: var(--pub-space-1); font-size: 1.0625rem; color: var(--pub-text); }

/* ---- 7. Product page ------------------------------------------------------- */

:is(#public-view, .pub-site) .pub-books-product-hero {
  padding-block: var(--pub-space-6) var(--pub-space-8);
  background:
    radial-gradient(45% 70% at 24% 55%, rgba(47, 91, 255, .12), rgba(47, 91, 255, 0) 70%),
    linear-gradient(180deg, var(--pub-bg-soft), var(--pub-bg));
  border-bottom: 1px solid var(--pub-border);
}
:is(#public-view, .pub-site) .pub-books-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pub-space-7);
  align-items: center;
}
@media (min-width: 900px) {
  :is(#public-view, .pub-site) .pub-books-product { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--pub-space-9); }
  /* The two-column layout narrows the copy column sharply right at this
     breakpoint (it goes from the full single-column width to ~7/11 of the
     container), so the title needs a smaller, differently-scaled clamp
     here than either the <480px or 480-899px tier uses -- sized against
     the actual measured column width at 900/1024/1280/1440px so a normal
     one-to-four-word product title stays on one line without wrapping. */
  :is(#public-view, .pub-site) .pub-books-title {
    font-size: clamp(2.25rem, .5rem + 3.9vw, 4rem);
  }
}
:is(#public-view, .pub-site) .pub-books-product-art {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--pub-space-6) 0 var(--pub-space-7);
}
:is(#public-view, .pub-site) .pub-books-product-art .pub-books-3d { z-index: 2; }
:is(#public-view, .pub-site) .pub-books-product-copy { min-width: 0; }
:is(#public-view, .pub-site) .pub-books-purchase {
  margin-top: var(--pub-space-5);
  padding-top: var(--pub-space-4);
  border-top: 1px solid var(--pub-border);
}
:is(#public-view, .pub-site) .pub-books-purchase .pub-books-price-lg { margin-top: 0; }
:is(#public-view, .pub-site) .pub-books-purchase .pub-books-actions { margin-top: var(--pub-space-4); margin-bottom: var(--pub-space-4); }
:is(#public-view, .pub-site) .pub-books-purchase .pub-caption { margin: var(--pub-space-2) 0 0; max-width: 56ch; }
:is(#public-view, .pub-site) [data-books-checkout-status]:empty { display: none; }

:is(#public-view, .pub-site) .pub-books-product-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pub-space-8);
  padding-top: var(--pub-space-8);
}
@media (min-width: 1024px) {
  :is(#public-view, .pub-site) .pub-books-product-body { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--pub-space-9); align-items: start; }
  :is(#public-view, .pub-site) .pub-books-product-aside { position: sticky; top: 100px; }
}
:is(#public-view, .pub-site) .pub-books-product-main { min-width: 0; max-width: 760px; }
:is(#public-view, .pub-site) .pub-books-detail-section { margin-top: var(--pub-space-8); }
:is(#public-view, .pub-site) .pub-books-detail-section:first-child { margin-top: 0; }
:is(#public-view, .pub-site) .pub-books-detail-section > .pub-books-h2 { margin-bottom: var(--pub-space-5); }

:is(#public-view, .pub-site) .pub-books-prose { font-size: 1.1875rem; line-height: 1.75; color: var(--pub-text-secondary); }
:is(#public-view, .pub-site) .pub-books-prose p { margin: 0 0 var(--pub-space-5); max-width: 64ch; }
:is(#public-view, .pub-site) .pub-books-prose p:first-of-type { font-size: 1.3125rem; line-height: 1.6; color: var(--pub-text); }
:is(#public-view, .pub-site) .pub-books-prose strong { color: var(--pub-text); }
:is(#public-view, .pub-site) .pub-books-prose a { color: var(--pub-link); }

:is(#public-view, .pub-site) .pub-books-learn {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pub-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  :is(#public-view, .pub-site) .pub-books-learn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:is(#public-view, .pub-site) .pub-books-learn li {
  display: flex;
  gap: var(--pub-space-4);
  align-items: baseline;
  padding: var(--pub-space-5);
  border-top: 2px solid var(--pub-text);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--pub-text);
}
:is(#public-view, .pub-site) .pub-books-learn-num {
  flex: 0 0 auto;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--pub-link);
  font-variant-numeric: tabular-nums;
}

:is(#public-view, .pub-site) .pub-books-audience {
  display: grid;
  gap: var(--pub-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(#public-view, .pub-site) .pub-books-audience li {
  position: relative;
  padding: var(--pub-space-4) var(--pub-space-5) var(--pub-space-4) 52px;
  border-radius: var(--pub-radius-md);
  background-color: var(--pub-surface);
  border: 1px solid var(--pub-border);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--pub-text);
}
:is(#public-view, .pub-site) .pub-books-audience li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 1.35em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid var(--pub-accent);
  box-sizing: border-box;
}
:is(#public-view, .pub-site) .pub-books-audience-plain li { background: none; border: 0; border-bottom: 1px solid var(--pub-border); border-radius: 0; color: var(--pub-text-secondary); }

:is(#public-view, .pub-site) .pub-books-toc { border-top: 1px solid var(--pub-border); }
:is(#public-view, .pub-site) .pub-books-toc-chapter { border-bottom: 1px solid var(--pub-border); }
:is(#public-view, .pub-site) .pub-books-toc-chapter summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--pub-space-4);
  align-items: baseline;
  padding: var(--pub-space-5) var(--pub-space-2);
  cursor: pointer;
  list-style: none;
}
:is(#public-view, .pub-site) .pub-books-toc-chapter summary::-webkit-details-marker { display: none; }
:is(#public-view, .pub-site) .pub-books-toc-chapter summary::after {
  content: "+";
  grid-column: 3;
  grid-row: 1;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--pub-text-muted);
  transition: transform var(--pub-dur) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-books-toc-chapter[open] summary::after { transform: rotate(45deg); }
:is(#public-view, .pub-site) .pub-books-toc-chapter summary:focus-visible { outline: none; box-shadow: var(--pub-ring); border-radius: var(--pub-radius-sm); }
:is(#public-view, .pub-site) .pub-books-toc-num {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pub-link);
  white-space: nowrap;
}
:is(#public-view, .pub-site) .pub-books-toc-title { font-size: 1.1875rem; font-weight: 700; color: var(--pub-text); overflow-wrap: anywhere; }
:is(#public-view, .pub-site) .pub-books-toc-count { display: none; }
@media (min-width: 640px) {
  :is(#public-view, .pub-site) .pub-books-toc-chapter summary { grid-template-columns: 110px minmax(0, 1fr) auto auto; }
  :is(#public-view, .pub-site) .pub-books-toc-chapter summary::after { grid-column: 4; }
  :is(#public-view, .pub-site) .pub-books-toc-count { display: inline; font-size: .875rem; color: var(--pub-text-muted); }
}
:is(#public-view, .pub-site) .pub-books-toc-sections {
  display: grid;
  gap: var(--pub-space-2);
  margin: 0;
  padding: 0 var(--pub-space-2) var(--pub-space-5);
  list-style: none;
}
@media (min-width: 640px) {
  :is(#public-view, .pub-site) .pub-books-toc-sections { padding-left: calc(110px + var(--pub-space-4) + var(--pub-space-2)); }
}
:is(#public-view, .pub-site) .pub-books-toc-sections li { display: flex; gap: var(--pub-space-3); font-size: 1.0625rem; color: var(--pub-text-secondary); }
:is(#public-view, .pub-site) .pub-books-toc-sec-num { min-width: 2.2em; font-weight: 600; color: var(--pub-text-muted); font-variant-numeric: tabular-nums; }

/* Look inside: real preview pages as paper thumbnails. */
:is(#public-view, .pub-site) .pub-books-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pub-space-4);
}
@media (min-width: 640px) {
  :is(#public-view, .pub-site) .pub-books-pages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
:is(#public-view, .pub-site) .pub-books-page-thumb {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  box-shadow: 0 1px 2px rgba(11, 16, 32, .12), 0 12px 24px -12px rgba(11, 16, 32, .3);
  cursor: zoom-in;
  transition: transform var(--pub-dur) var(--pub-ease), box-shadow var(--pub-dur) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-books-page-thumb:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 2px 4px rgba(11, 16, 32, .12), 0 22px 36px -14px rgba(11, 16, 32, .38); }
:is(#public-view, .pub-site) .pub-books-page-thumb:focus-visible { outline: none; box-shadow: var(--pub-ring); }
:is(#public-view, .pub-site) .pub-books-page-thumb img { display: block; width: 100%; height: auto; border-radius: 3px; }

:is(#public-view, .pub-site) .pub-books-faq { border-bottom: 1px solid var(--pub-border); padding: var(--pub-space-5) 0; }
:is(#public-view, .pub-site) .pub-books-faq summary { cursor: pointer; font-size: 1.125rem; font-weight: 700; color: var(--pub-text); overflow-wrap: anywhere; }
:is(#public-view, .pub-site) .pub-books-faq summary:focus-visible { outline: none; box-shadow: var(--pub-ring); border-radius: 4px; }
:is(#public-view, .pub-site) .pub-books-faq p { margin: var(--pub-space-3) 0 0; font-size: 1.0625rem; color: var(--pub-text-secondary); line-height: 1.7; }

:is(#public-view, .pub-site) .pub-books-details-card {
  display: grid;
  gap: var(--pub-space-3);
  padding: var(--pub-space-6) var(--pub-space-5);
  border-radius: var(--pub-radius-xl);
  background-color: var(--pub-surface);
  border: 1px solid var(--pub-border);
  box-shadow: var(--pub-shadow-md);
}
:is(#public-view, .pub-site) .pub-books-details-title { margin: 0; font-size: 1.125rem; font-weight: 800; }
:is(#public-view, .pub-site) .pub-books-details { margin: 0; }
:is(#public-view, .pub-site) .pub-books-details div {
  display: flex;
  justify-content: space-between;
  gap: var(--pub-space-4);
  padding: var(--pub-space-3) 0;
  border-bottom: 1px solid var(--pub-border);
}
:is(#public-view, .pub-site) .pub-books-details dt { color: var(--pub-text-muted); }
:is(#public-view, .pub-site) .pub-books-details dd { margin: 0; font-weight: 600; color: var(--pub-text); text-align: right; overflow-wrap: anywhere; }
:is(#public-view, .pub-site) .pub-books-details-price { margin: var(--pub-space-2) 0 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; color: var(--pub-text); }
/* A book with a regular_price: current price, struck-through regular price, "N% off". */
:is(#public-view, .pub-site) .pub-books-price-was { margin-left: .2em; font-size: .52em; font-weight: 600; letter-spacing: 0; color: var(--pub-text-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
:is(#public-view, .pub-site) .pub-books-price-off { margin-left: .3em; font-size: .52em; font-weight: 700; letter-spacing: 0; color: var(--pub-link); white-space: nowrap; }
:is(#public-view, .pub-site) .pub-books-details-card .pub-books-preview-btn { justify-self: center; }

/* ---- 8. Category hero ------------------------------------------------------ */

:is(#public-view, .pub-site) .pub-books-hero-compact { padding-block: var(--pub-space-6) var(--pub-space-7); }
:is(#public-view, .pub-site) .pub-books-category-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pub-space-6);
  align-items: center;
}
@media (min-width: 900px) {
  :is(#public-view, .pub-site) .pub-books-category-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
:is(#public-view, .pub-site) .pub-books-category-spines {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--pub-space-5);
  min-height: 170px;
}
:is(#public-view, .pub-site) .pub-books-category-book .pub-books-3d { --w: 116px; }
:is(#public-view, .pub-site) .pub-books-category-book:nth-child(2) { transform: translateY(-14px); }

/* ---- 9. Download page ------------------------------------------------------ */

:is(#public-view, .pub-site) .pub-books-download .pub-books-lede { max-width: none; }
:is(#public-view, .pub-site) .pub-books-access {
  display: grid;
  gap: var(--pub-space-4);
  margin-top: var(--pub-space-6);
  padding: var(--pub-space-6);
  background-color: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-xl);
  box-shadow: var(--pub-shadow-md);
}
:is(#public-view, .pub-site) .pub-books-field { display: grid; gap: var(--pub-space-2); }
:is(#public-view, .pub-site) .pub-books-field label { font-weight: 600; color: var(--pub-text); }
:is(#public-view, .pub-site) .pub-books-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 0 var(--pub-space-4);
  border: 1px solid var(--pub-border-strong);
  border-radius: var(--pub-radius-md);
  background-color: var(--pub-surface);
  color: var(--pub-text);
  font-family: var(--pub-font);
  font-size: 1rem;
}
:is(#public-view, .pub-site) .pub-books-field input:focus-visible { outline: none; box-shadow: var(--pub-ring); border-color: var(--pub-accent); }
:is(#public-view, .pub-site) .pub-books-access .pub-btn { justify-self: start; }
:is(#public-view, .pub-site) .pub-books-access-status { margin: 0; color: var(--pub-text-secondary); }
:is(#public-view, .pub-site) .pub-books-access-status:empty { display: none; }
:is(#public-view, .pub-site) .pub-books-access-status.is-error { color: var(--pub-danger); font-weight: 600; }
:is(#public-view, .pub-site) .pub-books-access-result {
  margin-top: var(--pub-space-5);
  padding: var(--pub-space-6);
  background-color: var(--pub-surface);
  border: 1px solid var(--pub-accent);
  border-radius: var(--pub-radius-xl);
}
:is(#public-view, .pub-site) .pub-books-access-result h2 { margin: 0 0 var(--pub-space-4); }
:is(#public-view, .pub-site) .pub-books-download-item + .pub-books-download-item { margin-top: var(--pub-space-5); }
:is(#public-view, .pub-site) .pub-books-download-item h3 { margin: 0 0 var(--pub-space-3); font-size: 1.125rem; overflow-wrap: anywhere; }
:is(#public-view, .pub-site) .pub-books-download-links { display: flex; flex-wrap: wrap; gap: var(--pub-space-3); }

/* ---- 10. Preview reader ------------------------------------------------------
   A near-full-screen dialog showing real book pages. Desktop: a two-page
   spread; turning a page rotates a "leaf" 180deg about the spine in 3D.
   Narrow screens: one page at a time, swipe or buttons, with a zoom mode. */

:is(#public-view, .pub-site) .pub-books-reader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(47, 91, 255, .18), rgba(47, 91, 255, 0) 70%),
    #060914;
  color: var(--pub-night-text);
  font-family: var(--pub-font);
}
:is(#public-view, .pub-site) .pub-books-reader[hidden] { display: none; }
:is(#public-view, .pub-site) .pub-books-reader-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pub-space-4);
  padding: var(--pub-space-4) var(--pub-gutter);
}
:is(#public-view, .pub-site) .pub-books-reader-kicker { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pub-accent-secondary); }
:is(#public-view, .pub-site) .pub-books-reader-title { margin: 2px 0 0; font-size: 1.125rem; font-weight: 700; color: var(--pub-night-text); overflow-wrap: anywhere; }
:is(#public-view, .pub-site) .pub-books-reader-tools { display: flex; gap: var(--pub-space-2); }
:is(#public-view, .pub-site) .pub-books-reader-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(238, 242, 255, .22);
  border-radius: var(--pub-radius-md);
  background: rgba(238, 242, 255, .06);
  color: var(--pub-night-text);
  font-family: var(--pub-font);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}
:is(#public-view, .pub-site) .pub-books-reader-icon:hover { background: rgba(238, 242, 255, .14); }
:is(#public-view, .pub-site) .pub-books-reader-icon:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pub-night), 0 0 0 4px var(--pub-accent-secondary); }
:is(#public-view, .pub-site) .pub-books-reader-icon[aria-pressed="true"] { background: var(--pub-night-text); color: var(--pub-night); }
:is(#public-view, .pub-site) .pub-books-reader-icon:disabled { opacity: .35; cursor: default; }

:is(#public-view, .pub-site) .pub-books-reader-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: var(--pub-space-2) var(--pub-gutter);
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
:is(#public-view, .pub-site) .pub-books-reader-book {
  --page-h: min(calc(100dvh - 200px), calc((100vw - 2 * var(--pub-gutter)) / 2 * 1.4), 900px);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: var(--page-h);
  aspect-ratio: 10 / 7;
  perspective: 2600px;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55));
}
:is(#public-view, .pub-site) .pub-books-reader.is-single .pub-books-reader-book {
  --page-h: min(calc(100dvh - 200px), calc((100vw - 2 * var(--pub-gutter)) * 1.4));
  grid-template-columns: 1fr;
  aspect-ratio: 5 / 7;
}
:is(#public-view, .pub-site) .pub-books-reader-page {
  position: relative;
  overflow: hidden;
  background-color: #FDFBF6;
}
:is(#public-view, .pub-site) .pub-books-reader-page img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
:is(#public-view, .pub-site) .pub-books-reader-page.is-left { border-radius: 6px 0 0 6px; }
:is(#public-view, .pub-site) .pub-books-reader-page.is-right { border-radius: 0 6px 6px 0; }
:is(#public-view, .pub-site) .pub-books-reader.is-single .pub-books-reader-page { border-radius: 4px; }
/* The gutter: pages curve into the spine. */
:is(#public-view, .pub-site) .pub-books-reader-page.is-left::after,
:is(#public-view, .pub-site) .pub-books-reader-page.is-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  pointer-events: none;
}
:is(#public-view, .pub-site) .pub-books-reader-page.is-left::after { right: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .16)); }
:is(#public-view, .pub-site) .pub-books-reader-page.is-right::after { left: 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .12)); }
:is(#public-view, .pub-site) .pub-books-reader-page.is-blank { background: repeating-linear-gradient(180deg, #F5F1E8 0 2px, #FAF7F0 2px 4px); }
:is(#public-view, .pub-site) .pub-books-reader-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pub-space-3);
  height: 100%;
  padding: var(--pub-space-6);
  text-align: center;
  color: #2F3447;
}
:is(#public-view, .pub-site) .pub-books-reader-end strong { font-size: 1.25rem; color: #14182B; }
:is(#public-view, .pub-site) .pub-books-reader-end span { max-width: 32ch; line-height: 1.6; }
:is(#public-view, .pub-site) .pub-books-reader-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pub-space-3); margin-top: var(--pub-space-3); }

/* Mid-preview prompt: over the page area only; navigation stays usable. */
:is(#public-view, .pub-site) .pub-books-reader-stage { position: relative; }
:is(#public-view, .pub-site) .pub-books-reader-prompt {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pub-space-4);
  background: rgba(6, 9, 20, .55);
}
:is(#public-view, .pub-site) .pub-books-reader-prompt[hidden] { display: none; }
:is(#public-view, .pub-site) .pub-books-reader-prompt-card {
  width: 100%;
  max-width: 440px;
  padding: var(--pub-space-6);
  border-radius: var(--pub-radius-xl);
  background-color: var(--pub-surface);
  box-shadow: var(--pub-shadow-lg);
  color: var(--pub-text);
  text-align: center;
}
:is(#public-view, .pub-site) .pub-books-reader-prompt-card h3 { margin: 0 0 var(--pub-space-3); font-size: 1.375rem; font-weight: 800; color: var(--pub-text); }
:is(#public-view, .pub-site) .pub-books-reader-prompt-card p { margin: 0; line-height: 1.6; color: var(--pub-text-secondary); }
:is(#public-view, .pub-site) .pub-books-reader-prompt-card .pub-books-reader-actions { margin-top: var(--pub-space-5); }

/* The turning leaf. */
:is(#public-view, .pub-site) .pub-books-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(.45, .05, .25, 1);
  z-index: 5;
  pointer-events: none;
}
:is(#public-view, .pub-site) .pub-books-reader.is-single .pub-books-leaf { width: 100%; left: 0; }
:is(#public-view, .pub-site) .pub-books-leaf.is-forward { left: 50%; transform-origin: left center; }
:is(#public-view, .pub-site) .pub-books-leaf.is-backward { left: 0; transform-origin: right center; }
:is(#public-view, .pub-site) .pub-books-reader.is-single .pub-books-leaf { transform-origin: left center; }
:is(#public-view, .pub-site) .pub-books-leaf-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #FDFBF6;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
:is(#public-view, .pub-site) .pub-books-leaf-face img { display: block; width: 100%; height: 100%; object-fit: contain; }
:is(#public-view, .pub-site) .pub-books-leaf-back { transform: rotateY(180deg); }
/* Light and shadow sweep across the page while it turns. */
:is(#public-view, .pub-site) .pub-books-leaf-face::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 360ms ease-in;
  pointer-events: none;
}
:is(#public-view, .pub-site) .pub-books-leaf.is-forward .pub-books-leaf-front::after,
:is(#public-view, .pub-site) .pub-books-reader.is-single .pub-books-leaf .pub-books-leaf-front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 60%); }
:is(#public-view, .pub-site) .pub-books-leaf.is-backward .pub-books-leaf-front::after { background: linear-gradient(270deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 60%); }
:is(#public-view, .pub-site) .pub-books-leaf .pub-books-leaf-back::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .22)); }
:is(#public-view, .pub-site) .pub-books-leaf.is-turning .pub-books-leaf-face::after { opacity: 1; }
:is(#public-view, .pub-site) .pub-books-leaf.is-turning { box-shadow: 0 0 40px rgba(0, 0, 0, .25); }

:is(#public-view, .pub-site) .pub-books-reader-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pub-space-4);
  padding: var(--pub-space-4) var(--pub-gutter) var(--pub-space-5);
}
:is(#public-view, .pub-site) .pub-books-reader-count { min-width: 11ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pub-night-text-secondary); }
:is(#public-view, .pub-site) .pub-books-reader-hint { margin: 0; padding: 0 var(--pub-gutter) var(--pub-space-4); text-align: center; font-size: .8125rem; color: var(--pub-night-text-secondary); }

/* Zoom: the single page grows and the stage scrolls. */
:is(#public-view, .pub-site) .pub-books-reader.is-zoomed .pub-books-reader-stage { display: block; overflow: auto; touch-action: auto; }
:is(#public-view, .pub-site) .pub-books-reader.is-zoomed .pub-books-reader-book {
  --page-h: auto;
  height: auto;
  width: min(1100px, 190vw);
  aspect-ratio: auto;
  margin: 0 auto;
}
:is(#public-view, .pub-site) .pub-books-reader.is-zoomed.is-single .pub-books-reader-book { width: min(900px, 190vw); }
:is(#public-view, .pub-site) .pub-books-reader.is-zoomed .pub-books-reader-page img { height: auto; }

@media (max-width: 599.98px) {
  :is(#public-view, .pub-site) .pub-books-reader-nav { gap: var(--pub-space-2); }
  :is(#public-view, .pub-site) .pub-books-reader-nav .pub-books-reader-label { display: none; }
}

/* ---- Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :is(#public-view, .pub-site) .pub-books-hero-lead { animation: none; }
  :is(#public-view, .pub-site) :is(.pub-books-3d-book, .pub-books-3d::after, .pub-books-page-thumb, .pub-books-tab) { transition-duration: 1ms; }
  :is(#public-view, .pub-site) :is(.pub-books-card:hover, .pub-books-card:focus-within, .pub-books-feature-book:hover, .pub-books-feature-book:focus-visible, .pub-books-product-art .pub-books-3d:hover) .pub-books-3d-book { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
  :is(#public-view, .pub-site) :is(.pub-books-card:hover, .pub-books-card:focus-within, .pub-books-feature-book:hover, .pub-books-feature-book:focus-visible) .pub-books-3d::after,
  :is(#public-view, .pub-site) .pub-books-product-art .pub-books-3d:hover::after { transform: translateX(6%); }
  :is(#public-view, .pub-site) .pub-books-leaf { transition: none; }
}

/* ---- 11. Commercial product blocks ------------------------------------------ */

:is(#public-view, .pub-site) .pub-books-h3 { margin: 0 0 var(--pub-space-3); font-size: 1.125rem; font-weight: 800; color: var(--pub-text); }
:is(#public-view, .pub-site) .pub-books-section-intro { margin: var(--pub-space-2) 0 0; color: var(--pub-text-muted); font-size: 1rem; }
:is(#public-view, .pub-site) .pub-books-publisher { font-weight: 500; color: var(--pub-text-muted); }
:is(#public-view, .pub-site) .pub-books-promise {
  margin: var(--pub-space-4) 0 0;
  max-width: 52ch;
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--pub-text);
}

/* Freshness: edition, last update, technology version -- only when stated. */
:is(#public-view, .pub-site) .pub-books-fresh { display: flex; flex-wrap: wrap; gap: var(--pub-space-2); margin: var(--pub-space-4) 0 0; padding: 0; list-style: none; }
:is(#public-view, .pub-site) .pub-books-fresh li {
  padding: 4px 12px;
  border-radius: var(--pub-radius-pill);
  background-color: var(--pub-surface);
  border: 1px solid var(--pub-border);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--pub-text-secondary);
}
:is(#public-view, .pub-site) .pub-books-badges { display: flex; flex-wrap: wrap; gap: var(--pub-space-2); margin: var(--pub-space-1) 0 0; }
:is(#public-view, .pub-site) .pub-books-badge {
  padding: 2px 10px;
  border-radius: var(--pub-radius-pill);
  background-color: var(--pub-accent);
  color: #FFFFFF;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
}
:is(#public-view, .pub-site) .pub-books-badge-muted { background-color: var(--pub-bg-soft); color: var(--pub-text-secondary); border: 1px solid var(--pub-border); }
:is(#public-view, .pub-site) .pub-books-card-meta { margin: 0; font-size: .875rem; font-weight: 600; color: var(--pub-text-muted); }
:is(#public-view, .pub-site) .pub-books-card-author { font-weight: 600; color: var(--pub-text-secondary); }

/* Why this book: the buyer's problem, then the promise delivered. */
:is(#public-view, .pub-site) .pub-books-problem {
  margin: 0 0 var(--pub-space-5);
  padding: var(--pub-space-5);
  border-left: 4px solid var(--pub-accent);
  border-radius: 0 var(--pub-radius-md) var(--pub-radius-md) 0;
  background-color: var(--pub-accent-soft);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--pub-text);
}
:is(#public-view, .pub-site) .pub-books-problem span {
  display: block;
  margin-bottom: var(--pub-space-1);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pub-link);
}
:is(#public-view, .pub-site) .pub-books-outcomes { display: grid; gap: var(--pub-space-3); margin: var(--pub-space-5) 0 0; padding: 0; list-style: none; }
:is(#public-view, .pub-site) .pub-books-outcomes li {
  position: relative;
  padding-left: 34px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--pub-text);
}
:is(#public-view, .pub-site) .pub-books-outcomes li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .35em;
  width: 12px;
  height: 7px;
  border-left: 3px solid var(--pub-accent);
  border-bottom: 3px solid var(--pub-accent);
  transform: rotate(-45deg);
}

/* What you'll get: deliverables actually in the catalog entry. */
:is(#public-view, .pub-site) .pub-books-get {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pub-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  :is(#public-view, .pub-site) .pub-books-get { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:is(#public-view, .pub-site) .pub-books-get li {
  display: grid;
  gap: var(--pub-space-1);
  padding: var(--pub-space-4) var(--pub-space-5);
  border-radius: var(--pub-radius-md);
  background-color: var(--pub-surface);
  border: 1px solid var(--pub-border);
}
:is(#public-view, .pub-site) .pub-books-get strong { font-size: 1.0625rem; color: var(--pub-text); }
:is(#public-view, .pub-site) .pub-books-get span { font-size: .9375rem; line-height: 1.55; color: var(--pub-text-secondary); }

:is(#public-view, .pub-site) :is(.pub-books-prereq, .pub-books-updates) { margin-top: var(--pub-space-5); }
:is(#public-view, .pub-site) :is(.pub-books-prereq, .pub-books-updates) ul { margin: 0; padding-left: var(--pub-space-5); color: var(--pub-text-secondary); line-height: 1.7; }
:is(#public-view, .pub-site) .pub-books-updates time { font-weight: 600; color: var(--pub-text); margin-right: var(--pub-space-2); }

:is(#public-view, .pub-site) .pub-books-product-main .pub-books-details { max-width: 560px; }

:is(#public-view, .pub-site) .pub-books-author { display: flex; gap: var(--pub-space-5); align-items: flex-start; }
:is(#public-view, .pub-site) .pub-books-author-photo { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
:is(#public-view, .pub-site) .pub-books-author-name { margin: 0 0 var(--pub-space-2); font-size: 1.25rem; font-weight: 800; color: var(--pub-text); }
:is(#public-view, .pub-site) .pub-books-author .pub-body { margin: 0 0 var(--pub-space-2); max-width: 60ch; }

/* A book shown without the 3D mockup ("3d_mockup": false). */
:is(#public-view, .pub-site) .pub-books-flat {
  --w: 168px;
  position: relative;
  width: var(--w);
  aspect-ratio: 2 / 3;
  flex: 0 0 auto;
}
:is(#public-view, .pub-site) .pub-books-flat-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px 6px 6px 3px;
  box-shadow: 0 2px 4px rgba(11, 16, 32, .18), 0 28px 50px -22px rgba(11, 16, 32, .55);
  transition: transform var(--pub-dur-reveal) var(--pub-ease), box-shadow var(--pub-dur-reveal) var(--pub-ease);
}
:is(#public-view, .pub-site) :is(.pub-books-card:hover, .pub-books-card:focus-within) .pub-books-flat-cover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(11, 16, 32, .18), 0 36px 60px -22px rgba(11, 16, 32, .6); }
:is(#public-view, .pub-site) .pub-books-flat.pub-books-3d-sm { --w: 92px; }
:is(#public-view, .pub-site) .pub-books-flat.pub-books-3d-md { --w: 168px; }
:is(#public-view, .pub-site) .pub-books-flat.pub-books-3d-lg { --w: min(220px, 44vw); }
:is(#public-view, .pub-site) .pub-books-flat.pub-books-3d-xl { --w: min(300px, 62vw); }
:is(#public-view, .pub-site) .pub-books-hero-lead .pub-books-flat { --w: min(290px, 50vw); }
:is(#public-view, .pub-site) .pub-books-hero-second .pub-books-flat { --w: min(200px, 34vw); }
:is(#public-view, .pub-site) .pub-books-category-book .pub-books-flat { --w: 116px; }

@media (prefers-reduced-motion: reduce) {
  :is(#public-view, .pub-site) .pub-books-flat-cover { transition-duration: 1ms; }
  :is(#public-view, .pub-site) :is(.pub-books-card:hover, .pub-books-card:focus-within) .pub-books-flat-cover { transform: none; }
}

/* ---- 12. Mobile refinements (Books pages only) ------------------------------
   The mobile nav dropdown and hero 3D-book stage inherit sizing meant for
   tablet/desktop. On phones the dropdown grew taller than its seven links
   needed, the shared "Get Started" CTA (styled for a bigger touch target
   elsewhere) picked up a soft glow that clashed with the compact list above
   it, and the hero book/pages stage left excess empty space before the
   price and Buy button. Scoped to body.pub-books-page only -- the shared
   header/hero markup on every other page is untouched. */

@media (max-width: 768px) {
  /* nav.sc-links here is the shared chrome from blog/index.html; it is not
     wrapped in the :is(#public-view, .pub-site) selector below, so a plain
     class prefix already outranks it. */
  body.pub-books-page nav.sc-links { padding: 6px var(--pub-gutter) 14px; }
  body.pub-books-page nav.sc-links a:not(.sc-cta-btn) { padding: .6rem .25rem; }
  body.pub-books-page nav.sc-links .sc-cta-btn { margin: 10px 0 0; min-height: 44px; border-radius: 10px; box-shadow: none; }
  body.pub-books-page .sc-cta-btn:hover { box-shadow: none; }
}

@media (max-width: 599.98px) {
  /* The .pub-books-* rules above are scoped with :is(#public-view, .pub-site),
     which :is() specificity rules elevate to ID-level; matching that wrapper
     (instead of a plain class) keeps these overrides winning on their own
     specificity, not on being last in the file. */
  :is(#public-view, .pub-site).pub-books-page .pub-books-hero { padding-block: var(--pub-space-5) var(--pub-space-6); }
  :is(#public-view, .pub-site).pub-books-page .pub-books-hero-stage { height: 260px; max-width: 320px; }
  :is(#public-view, .pub-site).pub-books-page .pub-books-hero-lead .pub-books-3d,
  :is(#public-view, .pub-site).pub-books-page .pub-books-hero-lead .pub-books-flat { --w: min(170px, 44vw); }
  :is(#public-view, .pub-site).pub-books-page .pub-books-hero-second .pub-books-3d,
  :is(#public-view, .pub-site).pub-books-page .pub-books-hero-second .pub-books-flat { --w: min(120px, 30vw); }

  :is(#public-view, .pub-site).pub-books-page .pub-books-product-art { padding: var(--pub-space-3) 0 var(--pub-space-4); }
  :is(#public-view, .pub-site).pub-books-page .pub-books-product-art .pub-books-3d-xl,
  :is(#public-view, .pub-site).pub-books-page .pub-books-product-art .pub-books-flat.pub-books-3d-xl { --w: min(160px, 42vw); }
}