/* Home page book covers that open on hover or keyboard focus to show a two-page spread from inside.
   js/book-open-20261021.js adds .is-open for a mouse, pen or keyboard, after the spread image has loaded, and on phones
   and tablets opens the books of the band on screen by itself, one after another (it marks that band .bk-auto).
   Only transforms and opacity change. While a book is open, the other books of its row shrink and slide aside
   (.bk-aside), so the open spread covers none of them. */
.bk{position:relative;z-index:0;display:grid;gap:8px;text-decoration:none;color:inherit;text-align:center;-webkit-tap-highlight-color:transparent;outline:none}
.bk.is-open{z-index:10}
/* only what is drawn takes the pointer: a book that slid aside is tapped and hovered where it is seen, never through the
   empty box of the neighbour it now sits over (the label's padding keeps the book and its label one target) */
.bk{pointer-events:none}
.bk-book,.bk-label{pointer-events:auto}
.bk.bk-aside .bk-label{pointer-events:none}
.tb-home-covers .bk{gap:0}
.bk .bk-label{padding-top:8px}
.bk-book{position:relative;display:block;aspect-ratio:2/3;perspective:1800px;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.bk-cover{position:absolute;inset:0;z-index:2;transform-origin:0 50%;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.3,.65,.12,1)}
.bk-front,.bk-back{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.bk .bk-front{display:block;width:100%;height:100%;aspect-ratio:2/3;object-fit:cover;border-radius:1px 3px 3px 1px;box-shadow:0 1px 1px rgba(0,0,0,.2),0 10px 24px rgba(0,0,0,.16);transform:none;transition:opacity .3s ease}
.bk:hover .bk-front{transform:none}
.bk-page{display:block;background-color:#f7f4ed;background-image:var(--bk-img,none);background-size:200% 100%;background-repeat:no-repeat}
.bk-back{transform:rotateY(180deg);background-position:0 0;border-radius:3px 0 0 3px;box-shadow:-6px 14px 26px rgba(0,0,0,.22)}
.bk-right{position:absolute;inset:0;z-index:1;background-position:100% 0;border-radius:0 3px 3px 0;opacity:0;transition:opacity .25s ease .15s;box-shadow:6px 14px 26px rgba(0,0,0,.22)}
/* the gutter: a soft shade on both sides of the fold */
.bk-back::after,.bk-right::after{content:"";position:absolute;top:0;bottom:0;width:14%;pointer-events:none}
.bk-back::after{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.16))}
.bk-right::after{left:0;background:linear-gradient(270deg,transparent,rgba(0,0,0,.16))}
.bk.is-open .bk-book{transform:translateX(var(--bk-shift,50%)) translateY(-4px)}
.bk-book{transform-origin:0 50%}
.bk.bk-aside .bk-book{transform:translateX(var(--bk-nx,0)) scale(var(--bk-ns,1))}
.bk .bk-label{transition:opacity .35s ease}
.bk.bk-aside .bk-label{opacity:0}
.bk.is-open .bk-cover{transform:rotateY(-178deg)}
.bk.is-open .bk-right{opacity:1;transition-delay:0s}
/* the open book, once the cover has turned (js adds .bk-flat): the left page drawn flat, as sharp as the right page */
.bk.is-open.bk-flat .bk-cover{transform:none;transition:none}
.bk.is-open.bk-flat .bk-front{visibility:hidden}
.bk.is-open.bk-flat .bk-back{transform:translateX(-100%)}
.bk.bk-snap .bk-cover,.bk.bk-snap .bk-front{transition:none!important}
.bk:focus-visible .bk-front,.bk.is-open:focus-visible .bk-right{outline:2px solid var(--tbh-accent,#c2452d);outline-offset:3px}
/* in the phone loop the open book's label follows it to the middle of its spread */
.bk-auto .bk .bk-label{transition:opacity .35s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.bk-auto .bk.is-open .bk-label{transform:translateX(calc(var(--bk-shift,50%) - 50%))}
/* books that are still in preparation open on a plain endpaper */
.bk-coming .bk-page{background:var(--bk-paper,#efe7d6)}
.bk-coming .bk-right{display:grid;place-content:center;gap:6px;padding:12%;text-align:center}
.bk .bk-note{font:400 clamp(18px,2vw,26px)/1.05 'Instrument Serif',Georgia,serif;color:#2a2620}
.bk .bk-note small{display:block;margin-top:8px;font:600 10px/1.4 'Schibsted Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b6457}
.bk-coming .bk-front{filter:saturate(.92)}
@media (prefers-reduced-motion:reduce){
  .bk-book,.bk-cover{transition:none}
  .bk.is-open .bk-book{transform:translateX(var(--bk-shift,50%))}
  .bk.bk-aside .bk-book{transform:translateX(var(--bk-nx,0)) scale(var(--bk-ns,1))}
  .bk.is-open .bk-cover{transform:none}
  .bk-back{transform:translateX(-100%);-webkit-backface-visibility:visible;backface-visibility:visible;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
  .bk.is-open .bk-back{visibility:visible;transition:opacity .3s ease}
  .bk.is-open .bk-front{opacity:0}
  .bk.is-open .bk-back,.bk.is-open .bk-right{opacity:1}
}

/* The bands on white, like the collection (owner, 2026-10-19: no cream page or section backgrounds), divided by a hairline */
.tb-home,.tb-home.tb-retell,.tb-home.tb-custom{--tbh-bg:#fff;--tbh-line:#e3e1db;background:#fff;overflow-x:clip}
.tb-home .tb-home-inner{border-top:1px solid var(--tbh-line);padding-top:clamp(48px,7vw,96px)}
.tb-home{padding-top:0!important}
/* the shipping line (css/shipping-note-20261020.css) under the prices of the printed books, in the band's own type */
.tb-home-copy .ship-note{justify-self:start;margin:4px 0 0;font-size:12.5px;line-height:1.4}
.edition-copy .ship-note{margin:14px 0 4px;font-size:12.5px;line-height:1.4}

/* The illustrated family retellings, in the layout of the Five Books of Moses band */
.tb-home.tb-retell{--tbh-fg:#1d1b17;--tbh-muted:#625b4e;--tbh-accent:#8a3b22}
.tb-retell .tb-home-covers .bk-item{margin:0;padding:0}
.tb-state{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;border:1px solid currentColor;font-size:10px;letter-spacing:.12em}
.tb-state.on-sale{background:var(--tbh-fg);border-color:var(--tbh-fg);color:var(--tbh-bg)}
.tb-retell-note{grid-column:1/-1;font:13px/1.6 'Schibsted Grotesk',sans-serif;color:var(--tbh-muted);max-width:70ch}
.tb-retell .tb-home-btn{cursor:pointer}
.tb-home-covers .bk span.bk-label{font:600 11px 'Schibsted Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--tbh-muted)}
/* the band reuses the Genesis link; undo the old section's styles for it */
#genesis-book.tb-retell .tb-home-btn{display:inline-flex;width:auto;min-width:0;margin:0;padding:11px 22px;border:1px solid var(--tbh-fg);box-shadow:none;font:600 14px 'Schibsted Grotesk',sans-serif;letter-spacing:normal;cursor:pointer}

/* The New Testament series band (wine accent) and the Custom band, in the same layout */
.tb-home.tb-nt{--tbh-accent:#7a2430}
.tb-home.tb-custom{--tbh-fg:#161616;--tbh-muted:#5a5954;--tbh-accent:#2f6f8f}
.tb-nt .tb-home-covers .bk-item,.tb-custom .tb-home-covers .bk-item{margin:0;padding:0}
.tb-custom .bk-coming .bk-page{background:#f7f4ed}
.tb-custom .bk-coming .bk-front{filter:none}

/* Phones: prices in plain words that fit one line, a little more air around the covers */
@media (max-width:520px){
  .tb-home{padding-bottom:52px!important}
  .tb-home .tb-home-inner{padding-top:48px;gap:26px}
  .tb-home-copy{gap:12px}
  .tb-home h2{font-size:clamp(36px,10.4vw,44px)}
  .tb-home-lede{font-size:15.5px;line-height:1.55}
  .tb-home-price{font:600 13.5px/1.45 'Schibsted Grotesk',sans-serif;letter-spacing:.01em;text-transform:none;color:var(--tbh-fg);text-wrap:balance}
  .tb-home-actions{gap:10px;padding-top:4px}
  .tb-home-btn{min-height:48px;padding:12px 24px}
  .tb-home-covers{gap:12px 10px}
  .tb-home-covers .bk span.bk-label{font-size:10.5px;letter-spacing:.1em}
  .tb-state{font-size:9.5px;padding:2px 6px}
  .bk-label .tb-state{display:table;margin:5px auto 0}
}