/* BOOKS (4 Oct 2026, crank W9). Rides on .library and .q-head from site.css; the cards are the Moonshots .blk grammar
   from .hx-doors (glass, 2px colour rule, outline number, pointer glow, tilt), widened into a shop card: the cover
   left as a real book turned a little on its spine, the facts right. Colours: the five innovators (--bc). */
.bk-body{--disp:"Jost",Futura,"Century Gothic",sans-serif;--mono2:"IBM Plex Mono",ui-monospace,Menlo,monospace;--sans2:"IBM Plex Sans",-apple-system,system-ui,sans-serif;--serif2:"Gelasio",Georgia,serif}
.bk-count{margin:0 0 16px;font:500 11px var(--mono2);letter-spacing:.18em;text-transform:uppercase;color:#8f8b84}
.bk-count b{font:600 13px var(--mono2);color:#f2efe8;letter-spacing:0}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,540px),1fr));gap:clamp(16px,1.6vw,26px);max-width:1320px}

.bk-card{position:relative;isolation:isolate;display:grid;grid-template-columns:clamp(132px,33%,200px) minmax(0,1fr);grid-template-areas:"cover head" "cover main";
  column-gap:clamp(18px,2vw,28px);align-content:start;padding:24px 24px 22px;border-radius:22px;overflow:hidden;color:#f2efe8;
  background:radial-gradient(130% 90% at 0% 0%,rgba(var(--bc),.20),transparent 52%),radial-gradient(90% 70% at 100% 115%,rgba(var(--bc),.11),transparent 62%),linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.015) 42%,rgba(0,0,0,.28)),rgba(12,13,16,.74);
  border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.5),0 26px 50px -30px rgba(0,0,0,.95);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s;
  animation:blk-rise .75s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 70ms)}
.bk-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;background:linear-gradient(90deg,rgb(var(--bc)),rgba(var(--bc),.35) 45%,transparent 80%);box-shadow:0 0 18px rgba(var(--bc),.6)}
.bk-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(140deg,rgba(var(--bc),.95),rgba(255,255,255,.18) 38%,transparent 60%,rgba(var(--bc),.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s}
.bk-card:hover{--ty:-4px;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 34px 64px -30px rgba(var(--bc),.55),0 0 0 1px rgba(var(--bc),.12)}
.bk-card:hover::after,.bk-card:focus-within::after{opacity:1}
.bk-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(380px circle at var(--mx,30%) var(--my,0%),rgba(var(--bc),.22),transparent 62%),linear-gradient(115deg,transparent 30%,rgba(255,140,210,.05) 42%,rgba(130,220,255,.07) 50%,rgba(170,255,180,.05) 58%,transparent 70%)}
.bk-card:hover .bk-glow{opacity:1}
.bk-n{position:absolute;left:16px;bottom:-34px;z-index:-1;pointer-events:none;font:700 156px/1 var(--disp);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(var(--bc),.24);transition:transform .7s cubic-bezier(.2,.8,.2,1),-webkit-text-stroke-color .45s}
.bk-card:hover .bk-n{transform:translateY(-8px);-webkit-text-stroke-color:rgba(var(--bc),.5)}

/* the cover: a book on a desk, turned a little on its spine; it turns towards the pointer (books.js sets --by) */
.bk-cover{grid-area:cover;position:relative;align-self:start;perspective:900px;padding:4px 0 10px 4px}
.bk-book{position:relative;aspect-ratio:2/3;border-radius:2px 6px 6px 2px;overflow:hidden;background:#111;transform-origin:left center;
  transform:rotateY(var(--by,-12deg));transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .5s;
  box-shadow:1px 0 0 rgba(255,255,255,.10),14px 20px 34px -10px rgba(0,0,0,.85),2px 3px 6px rgba(0,0,0,.5),0 34px 60px -34px rgba(var(--bc),.7)}
.bk-book img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .5s}
.bk-book::before{content:"";position:absolute;inset:0 auto 0 0;width:9%;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.16) 38%,rgba(0,0,0,.22) 62%,transparent)}
.bk-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 48%,transparent 62%);
  background-size:260% 100%;background-position:var(--mx,100%) 0;opacity:.6;mix-blend-mode:screen;transition:opacity .5s}
.bk-card:hover .bk-book{box-shadow:1px 0 0 rgba(255,255,255,.12),18px 26px 40px -10px rgba(0,0,0,.9),2px 3px 6px rgba(0,0,0,.5),0 40px 70px -30px rgba(var(--bc),.9)}
.bk-card.is-locked .bk-book img{filter:grayscale(.7) brightness(.55) contrast(.92)}
.bk-card.is-locked .bk-sheen{opacity:.25}
.bk-lock{position:absolute;left:50%;top:46%;z-index:3;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;translate:-50% -50%;
  background:rgba(5,6,31,.82);border:1px solid rgba(var(--bc),.6);color:rgb(var(--bc));box-shadow:0 0 24px -4px rgba(var(--bc),.7)}
.bk-lock svg,.bk-rule svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the facts */
.bk-head{grid-area:head;min-width:0}
.bk-k{display:flex;align-items:center;gap:10px;margin:2px 0 12px;font:500 10.5px/1 var(--mono2);letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--bc),.95)}
.bk-k b{font:500 10.5px/1 var(--mono2);letter-spacing:.2em;padding:6px 10px 6px 11px;border-radius:999px;background:rgba(var(--bc),.14);color:rgb(var(--bc));box-shadow:inset 0 0 0 1px rgba(var(--bc),.38),0 0 16px -4px rgba(var(--bc),.5)}
.bk-head h3{margin:0;font:600 clamp(25px,2.3vw,32px)/1.05 var(--disp);letter-spacing:.005em;color:#fff;overflow-wrap:anywhere}
.bk-sub{margin:6px 0 0;font:italic 400 17px/1.35 var(--serif2);color:#e2ddd2}
.bk-by{margin:10px 0 0;font:500 14px/1.4 var(--sans2);color:#d8d3c8}
.bk-by span{color:#8f8b84;font-weight:400}
.bk-by span.bl{display:block;margin-top:2px;font-size:13px}
.bk-main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:14px;padding-top:14px}
.bk-syn{margin:0;font:400 15px/1.6 var(--sans2);color:#c9c4ba}
.bk-note{margin:-4px 0 0;font:500 12.5px/1.45 var(--sans2);color:rgba(var(--bc),.95)}
.bk-line{margin:0;padding-left:14px;border-left:2px solid rgba(var(--bc),.7);font:italic 400 17px/1.45 var(--serif2);color:#e6e1d6}

/* the product details strip */
.bk-spec{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));column-gap:16px;margin:0}
.bk-spec>div{min-width:0;padding:10px 0 4px;border-top:1px solid rgba(255,255,255,.08)}
.bk-spec dt{font:500 9.5px/1 var(--mono2);letter-spacing:.18em;text-transform:uppercase;color:#7d7a74}
.bk-spec dd{margin:6px 0 0;font:500 13px/1.35 var(--sans2);color:#e6e1d6}

.bk-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.bk-buy{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 16px;border-radius:999px;text-decoration:none;font:600 13.5px var(--sans2);color:#fff;
  background:rgba(var(--bc),.16);border:1px solid rgba(var(--bc),.55);transition:background .25s,box-shadow .25s}
.bk-buy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.bk-buy:hover,.bk-buy:focus-visible{background:rgba(var(--bc),.3);box-shadow:0 0 22px -6px rgba(var(--bc),.8)}
.bk-buy:hover svg{transform:translate(2px,-2px)}
.bk-in{padding:6px 0;border:0;background:none;cursor:pointer;font:500 11px var(--mono2);letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--bc));border-bottom:1px solid rgba(var(--bc),.4)}
.bk-in:hover{border-bottom-color:rgb(var(--bc))}
.bk-inside{margin:0;padding:14px 16px;list-style:none;display:grid;gap:8px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.07);
  font:400 13.5px/1.5 var(--sans2);color:#c9c4ba;animation:bk-open .4s cubic-bezier(.2,.8,.2,1)}
.bk-inside[hidden]{display:none}
@keyframes bk-open{from{opacity:0;transform:translateY(-6px)}}

/* the lock */
.bk-gate{display:grid;gap:9px;padding:14px 16px;border-radius:14px;background:rgba(5,6,31,.5);border:1px dashed rgba(var(--bc),.42)}
.bk-rule{display:flex;align-items:center;gap:9px;margin:0;font:600 14.5px/1.35 var(--sans2);color:#fff}
.bk-rule svg{flex:none;color:rgb(var(--bc))}
.bk-hid{margin:0;font:400 13.5px/1.45 var(--sans2);color:#8f8b84}
.bk-bar{position:relative;display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.bk-bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,rgba(var(--bc),.55),rgb(var(--bc)));box-shadow:0 0 12px rgba(var(--bc),.55)}
.bk-left{font:500 12px var(--mono2);color:#a9a59d}
.bk-join{justify-self:start;font:600 13.5px var(--sans2);color:rgb(var(--bc));text-decoration:none;border-bottom:1px solid rgba(var(--bc),.45)}
.bk-join:hover{border-bottom-color:rgb(var(--bc))}
.bk-fine{max-width:760px;margin:26px 0 0;font:14px/1.55 var(--sans2);color:#8f8b84}

/* the Merch room's pointer to this room (the snippet is in builds/W9/REGISTER.md) */
.bk-xlink{margin:14px 0 0;font:14px/1.5 "IBM Plex Sans",sans-serif;color:#8f8b84}
.bk-xlink a{color:#e6e1d6;text-decoration:none;border-bottom:1px solid rgba(227,200,120,.45)}
.bk-xlink a:hover{border-bottom-color:rgb(227,200,120)}

@media (max-width:620px){
  .bk-card{grid-template-columns:104px minmax(0,1fr);grid-template-areas:"cover head" "main main";column-gap:16px;padding:20px 18px 18px}
  .bk-cover{padding:2px 0 0 2px}
  .bk-book{--by:-8deg}
  .bk-head h3{font-size:23px}
  .bk-sub{font-size:15px}
  .bk-by{font-size:13px;margin-top:8px}
  .bk-k{margin-bottom:10px}
  .bk-n{font-size:112px;left:auto;right:10px;bottom:auto;top:-22px;-webkit-text-stroke-color:rgba(var(--bc),.16)}
  .bk-k{letter-spacing:.14em;gap:8px;white-space:nowrap}
  .bk-main{padding-top:18px}
  .bk-spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk-spec dd{overflow-wrap:anywhere}
}
@media (hover:none){.bk-book{transition:none}}
@media (prefers-reduced-motion:reduce){.bk-card,.bk-inside{animation:none}.bk-card,.bk-book,.bk-n{transition:none}}

/* the fourth book: a closed cover with one big question mark, in the fifth innovator's purple */
.bk-q{display:grid;place-items:center;aspect-ratio:2/3;border-radius:3px 8px 8px 3px;overflow:hidden;position:relative;
  background:radial-gradient(120% 90% at 30% 20%,rgba(150,80,225,.55),rgba(40,18,80,.95) 55%,#0b0620);
  box-shadow:inset 6px 0 10px rgba(0,0,0,.45),0 18px 40px rgba(0,0,0,.5),0 0 40px rgba(150,80,225,.25)}
.bk-q>span:first-child{font:600 clamp(64px,9vw,120px)/1 Jost,system-ui,sans-serif;color:rgba(242,239,230,.92);
  text-shadow:0 0 28px rgba(150,80,225,.9),0 0 2px #fff}
@media (prefers-reduced-motion:no-preference){.bk-q>span:first-child{animation:bk-q 4.5s ease-in-out infinite}}
@keyframes bk-q{50%{text-shadow:0 0 44px rgba(150,80,225,1),0 0 4px #fff}}
.bk-mystery h3{font-size:clamp(40px,5vw,64px);line-height:1}

/* the Amazon store chooser: a glass sheet in the book's own colour, your store first */
button.bk-buy{font:inherit;cursor:pointer}
.bk-amz{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100vh - 32px);overflow:auto;border:0;padding:0;background:transparent;color:#f2efe8;max-width:min(440px,calc(100vw - 32px));width:100%}
.bk-amz::backdrop{background:rgba(3,4,18,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bk-amz-in{position:relative;padding:22px;border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 70% at 0% 0%,rgba(var(--bc),.22),transparent 60%),linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 45%,rgba(0,0,0,.3)),rgba(12,13,24,.92);
  border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 80px -30px rgba(0,0,0,.9)}
.bk-amz-in::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,rgb(var(--bc)),rgba(var(--bc),.3) 50%,transparent);box-shadow:0 0 16px rgba(var(--bc),.6)}
.bk-amz-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff;font:20px/1 Arial,sans-serif;cursor:pointer}
.bk-amz-head{display:flex;gap:14px;align-items:center;margin:0 36px 16px 0}
.bk-amz-head img{width:60px;height:90px;object-fit:cover;border-radius:3px 6px 6px 3px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.bk-amz-k{margin:0;font:500 10px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--bc))}
.bk-amz h3{margin:4px 0 2px;font:700 20px/1.15 Arial,"Helvetica Neue",sans-serif;color:#fff}
.bk-amz-s{margin:0;font:13px/1.35 "IBM Plex Sans",Arial,sans-serif;color:#bdb9b0}
.bk-amz-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bk-amz-list a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;text-decoration:none;color:#f2efe8;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:background .2s,border-color .2s,transform .2s}
.bk-amz-list a:hover,.bk-amz-list a:focus-visible{background:rgba(var(--bc),.14);border-color:rgba(var(--bc),.5);transform:translateX(2px);outline:none}
.bk-amz-list a.is-mine{border-color:rgba(var(--bc),.55);background:rgba(var(--bc),.12)}
.bk-amz-f{font-size:22px;line-height:1}
.bk-amz-n{flex:1;display:grid}.bk-amz-n b{font:700 15px Arial,"Helvetica Neue",sans-serif}.bk-amz-n small{font:12px "IBM Plex Mono",ui-monospace,monospace;color:#9a968e}
.bk-amz-you{font:600 10px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#12131a;background:rgb(var(--bc));padding:4px 8px;border-radius:999px}
.bk-amz-list svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.bk-amz-fine{margin:14px 2px 0;font:12px/1.5 "IBM Plex Sans",Arial,sans-serif;color:#8f8b84}
@media (prefers-reduced-motion:no-preference){.bk-amz[open] .bk-amz-in{animation:bk-amz-in .28s cubic-bezier(.2,.8,.2,1)}}
@keyframes bk-amz-in{from{opacity:0;transform:translateY(10px) scale(.98)}}

.bk-buy.bk-read{background:rgba(var(--bc),.9);color:#14110a}.bk-buy.bk-read:hover{background:rgb(var(--bc))}