/* ============================================================
   THE AI AUDITOR — the book that opens itself

   Was a 200vh pinned scroll-scrub. Two problems with that on the home
   page: it held the visitor still for two full screens, and at scrub
   position 0 the book lies almost flat, which reads as a big empty band
   with an odd dark wedge in it rather than as a book.

   Now it is an ordinary section that opens once, on entry, driven by
   CSS transitions on a single .open class. No pin, no scroll handler,
   no blank space, and every animated property is transform/opacity so
   the compositor owns the whole thing.
   ============================================================ */
.bkx{position:relative;background:var(--ivory);
  padding:clamp(76px,11vh,132px) 0 clamp(30px,4vh,54px);overflow:hidden}
.bkx-stage{perspective:2400px;perspective-origin:50% 44%;
  width:100%;display:flex;justify-content:center;align-items:center;
  min-height:min(74vh,600px)}

/* The book tilts back and lifts to face the reader.

   No scale() in this transition, deliberately. A composited layer is
   rasterised once at its starting size, so animating scale(.9) -> 1
   means the browser blows a 90% raster up to 100% and the cover art
   stays soft afterwards. Rotation alone re-rasterises cleanly, so the
   printed cover reads sharp at rest. */
.bkx-book{position:relative;transform-style:preserve-3d;
  height:min(66vh,540px);aspect-ratio:1880/1360;width:auto;max-width:94vw;
  transform:rotateX(44deg) rotateZ(-4deg);
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.bkx.open .bkx-book{transform:rotateX(0deg) rotateZ(0deg)}

.bkx-spread{position:absolute;left:50%;top:0;width:50%;height:100%;
  border-radius:0 6px 6px 0;overflow:hidden;background:#fbf9f4;
  box-shadow:0 34px 30px -28px rgba(12,26,24,.58)}
/* gutter shading down the bound edge, which is what sells the fold */
.bkx-spread::after{content:"";position:absolute;left:0;top:0;bottom:0;width:38px;
  pointer-events:none;background:linear-gradient(90deg,rgba(20,40,38,.16),transparent)}
.bkx-page{padding:clamp(18px,2.1vw,36px);display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease .95s,transform .8s var(--ease) .95s}
.bkx.open .bkx-page{opacity:1;transform:none}

.bkx-k{font-family:var(--disp);font-size:clamp(9px,.85vw,11px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--teal-deep)}
.bkx-tag{font-size:clamp(11px,1vw,14px);color:var(--ink-soft);margin-top:12px;line-height:1.5}
.bkx-rule{width:44px;height:3px;border-radius:2px;background:var(--amber);margin:clamp(14px,2vw,24px) 0}
.bkx-by{font-family:var(--serif);font-weight:650;font-size:clamp(12px,1.15vw,17px);color:var(--ink);
  line-height:1.25;margin-top:10px}
.bkx-by span{display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(8.5px,.78vw,11px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mut);margin-top:3px}

.bkx-lead{font-family:var(--serif);font-weight:700;font-size:clamp(15px,1.35vw,24px);letter-spacing:-.02em;
  line-height:1.24;color:var(--teal-deep)}
.bkx-right p:not(.bkx-lead){font-size:clamp(11.5px,.92vw,15px);color:var(--ink-soft);
  line-height:1.68;margin-top:clamp(10px,1.4vw,18px)}
/* Flex-wrap put the third figure on its own line, which pushed it past the
   bottom of the page and clipped it against .bkx-spread's overflow:hidden.
   A three-column grid cannot wrap, so all three always fit. */
/* "40-70%" and "90%" were running together and reading as one figure.
   Splitting a numeric range across two lines looks worse than the problem,
   so the separation is done with air and a hairline instead: a wider gap,
   and a rule down the left of every column after the first. */
.bkx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);margin-top:clamp(12px,1.8vw,22px);
  padding-top:clamp(10px,1.4vw,18px);border-top:1px solid rgba(28,59,56,.12)}
.bkx-stats > div{min-width:0}
.bkx-stats > div + div{padding-left:clamp(14px,2vw,24px);
  border-left:1px solid rgba(28,59,56,.14)}
/* nowrap kept "40-70%" on one line, which ran it into the 90% beside it.
   Letting it break after the hyphen puts 70% under 40% and gives the two
   figures clear air between them. */
.bkx-stats b{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(15px,1.5vw,26px);
  letter-spacing:-.03em;color:var(--teal-deep);line-height:1.08}
/* the labels may wrap; the figures may not */
.bkx-stats span{display:block;font-family:var(--disp);font-size:clamp(7px,.66vw,9.5px);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mut);margin-top:6px;line-height:1.35}

/* ---- the title block, below the book ---- */
.bkx-cap{max-width:640px;margin:clamp(34px,5vh,58px) auto 0;text-align:center}
.bkx-cap h2{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4vw,58px);
  letter-spacing:-.034em;line-height:1;margin-top:12px;color:var(--ink)}
.bkx-cap .bkx-tag{font-size:clamp(13px,1.1vw,17px);color:rgba(28,59,56,.80);margin-top:12px}
.bkx-cap .bkx-rule{margin:clamp(18px,2.4vw,26px) auto}
.bkx-by-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,3vw,44px)}
.bkx-cap .bkx-by{margin-top:0}

/* the jacket: hinged on the spine at the centre of the spread.
   Purely decorative, so its rotated 3D plane must never eat clicks. */
.bkx-cover{position:absolute;left:50%;top:0;width:50%;height:100%;pointer-events:none;
  transform-origin:left center;transform-style:preserve-3d;z-index:3;
  transform:rotateY(0deg);
  transition:transform 1.6s cubic-bezier(.5,.02,.24,1) .45s}
.bkx.open .bkx-cover{transform:rotateY(-176deg)}
.bkx-spread,.bkx-page,.bkx-right{pointer-events:auto}
.bkx-cover-face,.bkx-cover-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:4px 7px 7px 4px}
/* NB: paths here are relative to assets/, so it is img/... not ../img/... */
/* the printed cover, nothing over it */
.bkx-cover-face{background-image:url(img/ai-auditor-cover.jpg);
  background-size:cover;background-position:center;
  image-rendering:auto;
  box-shadow:0 28px 28px -22px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.12)}
/* The inside face is the printed cover, clean - it used to carry a 90-94%
   dark wash, which read as a murky blend rather than as the book.
   rotateY(180deg) alone is the back-face technique: paired with
   backface-visibility:hidden it presents the art the right way round once
   the jacket has swung open. An extra scaleX(-1) here was double-correcting
   and printed the title in mirror writing. */
.bkx-cover-back{border-radius:7px 4px 4px 7px;
  transform:rotateY(180deg);
  background-image:url(img/ai-auditor-cover.jpg);
  background-size:cover;background-position:center;
  box-shadow:0 28px 28px -22px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
/* The inside cover is a plain board. Its title block moved out from under
   the jacket to sit below the book, where it is read rather than glimpsed
   through a rotating 3D plane. */
.bkx-inner{display:block;width:100%;height:100%}

/* no JS, or reduced motion: present it open and still */
.bkx.no-anim .bkx-book{transform:none;transition:none}
.bkx.no-anim .bkx-cover{transform:rotateY(-176deg);transition:none}
.bkx.no-anim .bkx-page{opacity:1;transform:none;transition:none}

@media(max-width:820px){
  .bkx-stage{min-height:0}
  .bkx-book{height:auto;width:min(88vw,340px);aspect-ratio:1034/1500;max-width:none}
  .bkx-spread{left:0;width:100%;border-radius:6px}
  .bkx-spread::after{display:none}
  /* nothing to hinge against on one column: the jacket covers the whole page */
  .bkx-cover{left:0;width:100%}
}