/* ═══════════════════════════════════════════════════════════════════════════
   ilmbee · The Library (homepage)
   ───────────────────────────────────────────────────────────────────────────
   A honey-wood bookcase holding all 100 books face-out, one labelled section
   per theme, and the quick preview a book opens into. Built by library.js
   from catalogue.js. Everything that moves animates transform or opacity
   only, so it runs on the compositor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════ BOOKCASE ═══════════ */
.case{
  --rows:2;
  --bw:clamp(104px,6.2vw + 72px,150px);      /* book width                          */
  --bh:calc(var(--bw) * 1.4167);             /* true page shape, 312x442            */
  --gap:clamp(14px,1.3vw,22px);
  --head:clamp(22px,2vw,28px);               /* room above a book, for the lift     */
  --plank:clamp(12px,1vw,15px);
  --rowH:calc(var(--head) + var(--bh) + var(--plank));
  --padX:clamp(18px,1.8vw,28px);
  --rail:clamp(46px,4vw,56px);
  --post:clamp(12px,1vw,16px);
  --wood-hi:#E6BC7E;
  --wood:#B77D43;
  --wood-lo:#83542A;
  --wood-dk:#5B381A;
  --back-hi:#4B301B;
  --back:#35220F;
  --back-lo:#231509;
  position:relative;
  z-index:1;
  margin-top:clamp(40px,5vw,60px);
}
@media (min-width:760px) and (min-height:860px){ .case{--rows:3} }

.case__fallback{text-align:center}
.case__fallback a{color:var(--gold-400);font-weight:700}

/* The scroller. Native horizontal scroll: swipe on touch, trackpads and
   shift-wheel work for free; library.js adds mouse drag and the arrows. */
.case__viewport{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding-bottom:30px;                       /* the bookcase's floor shadow         */
  cursor:grab;
  -webkit-user-select:none;
  user-select:none;
}
.case__viewport::-webkit-scrollbar{display:none}
.case__viewport.is-dragging{cursor:grabbing}
.case__viewport.is-dragging .shelfbook{pointer-events:none}

.case__track{
  position:relative;
  display:flex;
  align-items:stretch;
  width:max-content;
  padding-inline:max(var(--gutter,20px),calc(50vw - 600px));
}

/* Edge fades: the bookcase recedes into the dark room at both ends. */
.case__frame{position:relative}
.case__frame::before,.case__frame::after{
  content:"";
  position:absolute;
  top:0;bottom:30px;
  width:clamp(28px,6vw,90px);
  z-index:2;
  pointer-events:none;
}
.case__frame::before{left:0;background:linear-gradient(90deg,var(--navy-900),rgba(11,18,41,0))}
.case__frame::after{right:0;background:linear-gradient(270deg,var(--navy-900),rgba(11,18,41,0))}

/* ── Uprights: the bookcase's vertical boards ── */
.case__post{
  flex:none;
  width:var(--post);
  position:relative;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,0) 35%,rgba(0,0,0,.28)),
    linear-gradient(180deg,var(--wood) 0%,var(--wood-lo) 100%);
  box-shadow:0 18px 30px -12px rgba(0,0,0,.6);
}
.case__post--end{width:calc(var(--post) * 1.4)}

/* ── A bay: one theme's section ── */
.bay{
  position:relative;
  flex:none;
  display:flex;
  flex-direction:column;
}
.bay__rail{
  position:relative;
  height:var(--rail);
  display:grid;
  place-items:center;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18) 0,rgba(255,255,255,0) 22%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 2px,rgba(0,0,0,0) 2px 11px),
    linear-gradient(180deg,var(--wood) 0%,var(--wood-lo) 100%);
  box-shadow:inset 0 -4px 0 var(--wood-dk);
}
/* Brass nameplate, the section label */
.bay__plate{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:5px 16px 6px;
  border-radius:4px;
  background:linear-gradient(180deg,#F4DC9C 0%,#D6AF57 46%,#B98A34 100%);
  color:#3A2608;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -1px 0 rgba(0,0,0,.25) inset,0 3px 6px rgba(0,0,0,.35);
  font-family:var(--font-display);
  font-weight:700;
  font-size:.92rem;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,244,210,.6);
}
.bay__plate small{font-family:var(--font-ui);font-weight:700;font-size:.7rem;opacity:.72}
.bay__plate::before,.bay__plate::after{          /* the two screws */
  content:"";
  position:absolute;
  top:50%;
  width:4px;height:4px;
  margin-top:-2px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff3cf,#8a6420);
}
.bay__plate::before{left:5px}
.bay__plate::after{right:5px}

/* Shelves: the back panel, lit from above, darkened under each board */
.bay__shelves{
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--cols,4),var(--bw));  /* --cols set per section by library.js */
  grid-template-rows:repeat(var(--rows),var(--rowH));
  column-gap:var(--gap);
  padding-inline:var(--padX);
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 30px,rgba(0,0,0,0) var(--rowH)),
    radial-gradient(70% 36% at 50% 0%,rgba(255,206,130,.2),rgba(255,206,130,0) 72%),
    linear-gradient(90deg,var(--back-lo) 0%,var(--back) 10%,var(--back-hi) 50%,var(--back) 90%,var(--back-lo) 100%);
}
.plank{
  position:absolute;
  left:0;right:0;
  top:calc(var(--rowH) * (var(--r) + 1) - var(--plank));
  height:var(--plank);
  z-index:1;
  background:
    linear-gradient(180deg,var(--wood-hi) 0,var(--wood) 30%,var(--wood-lo) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 6px 10px rgba(0,0,0,.45);
}
.plank--3{display:none}
@media (min-width:760px) and (min-height:860px){ .plank--3{display:block} }
.bay__base{
  height:clamp(14px,1.4vw,20px);
  background:linear-gradient(180deg,var(--wood-lo),var(--wood-dk));
  box-shadow:0 22px 34px -10px rgba(0,0,0,.7);
}

/* ── A book ── */
.shelfbook{
  position:relative;
  z-index:2;
  align-self:end;
  width:var(--bw);
  height:var(--bh);
  margin:0 0 var(--plank);
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  perspective:900px;
  -webkit-tap-highlight-color:transparent;
}
.shelfbook__body{
  position:absolute;
  inset:0;
  border-radius:2px 5px 5px 2px;
  overflow:hidden;
  transform-origin:50% 88%;
  background:#e9e2d0;
  /* the page block showing along the fore-edge and foot */
  box-shadow:
    1px 0 0 #F4ECD8,
    2px 1px 0 #D9CBAB,
    3px 1px 0 #F1E7D0,
    4px 2px 0 #CDBD9C,
    0 12px 16px -8px rgba(0,0,0,.7);
  transition:transform .5s cubic-bezier(.2,.85,.25,1.15);
}
.shelfbook__cover{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  -webkit-user-drag:none;
}
.shelfbook__body::before{                             /* hinge of a hardcover */
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;
  width:9%;
  background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(255,255,255,.14) 55%,rgba(255,255,255,0));
}
.shelfbook__body::after{                              /* sheen */
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(112deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 34%);
  opacity:.55;
  transition:opacity .42s var(--ease-out);
}
.shelfbook::before{                                   /* its shadow on the back panel */
  content:"";
  position:absolute;
  left:-4%;right:7%;top:5%;bottom:3%;
  z-index:-1;
  border-radius:4px;
  background:rgba(0,0,0,.62);
  filter:blur(8px);
  transform:translate(-5px,-4px);
  transition:transform .5s var(--ease-out),opacity .5s var(--ease-out);
}
.shelfbook::after{                                    /* contact shadow on the board */
  content:"";
  position:absolute;
  left:4%;right:-4%;bottom:-4px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0));
  transition:transform .42s var(--ease-out),opacity .42s var(--ease-out);
}
.shelfbook__tag{
  position:absolute;
  left:50%;
  bottom:calc(100% + 34px);                /* clears the book once it is lifted */
  z-index:3;
  width:max-content;
  max-width:210px;
  padding:7px 11px;
  border-radius:10px;
  background:var(--cream-50);
  color:var(--navy-800);
  font:600 .78rem/1.25 var(--font-ui);
  text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.4);
  opacity:0;
  transform:translate(-50%,8px);
  pointer-events:none;
  transition:opacity .2s ease,transform .3s var(--ease-out);
}
.shelfbook__tag b{color:var(--gold-700);margin-right:5px;font-weight:800}
.shelfbook__tag::after{
  content:"";
  position:absolute;
  left:50%;top:100%;
  margin-left:-6px;
  border:6px solid transparent;
  border-top-color:var(--cream-50);
}
/* Hover takes the book off the rack: it comes forward and up, its top
   tipping toward you as if lifted by the top edge; its shadow falls away
   from the back panel and the board it stood on. */
@media (hover:hover) and (pointer:fine){
  .shelfbook:hover{z-index:4}
  .shelfbook:hover .shelfbook__body{transform:translateY(-12px) scale(1.09) rotateX(-7deg)}
  .shelfbook:active .shelfbook__body{transform:translateY(-16px) scale(1.12) rotateX(-9deg)}
  .shelfbook:hover .shelfbook__body::after{opacity:1}
  .shelfbook:hover::before{transform:translate(0,14px) scale(1.06);opacity:.5}
  .shelfbook:hover::after{transform:scale(.7);opacity:.25}
  .shelfbook:hover .shelfbook__tag{opacity:1;transform:translate(-50%,0)}
}
.shelfbook:focus{outline:none}
.shelfbook:focus-visible{z-index:4}
.shelfbook:focus-visible::before{transform:translate(0,14px) scale(1.06);opacity:.5}
.shelfbook:focus-visible .shelfbook__body{
  transform:translateY(-12px) scale(1.09) rotateX(-7deg);
  box-shadow:0 0 0 3px var(--navy-900),0 0 0 6px var(--gold-400),0 14px 20px -8px rgba(0,0,0,.7);
}
.shelfbook:focus-visible .shelfbook__tag{opacity:1;transform:translate(-50%,0)}
.shelfbook.is-away{visibility:hidden}

/* Books settle onto the shelves the first time the bookcase is seen */
.js .case .shelfbook{opacity:0}
.js .case.is-in .shelfbook{animation:shelfIn .7s var(--ease-out) both;animation-delay:calc(min(var(--k),16) * 45ms + .15s)}
@keyframes shelfIn{
  from{opacity:0;transform:translateY(-26px)}
  to{opacity:1;transform:none}
}

/* ── Decor that fills the spare spaces ── */
.decor{
  position:relative;
  z-index:2;
  align-self:end;
  width:var(--bw);
  height:var(--bh);
  margin-bottom:var(--plank);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
}
.decor svg{width:78%;height:auto;display:block;filter:drop-shadow(0 8px 8px rgba(0,0,0,.45))}

/* ── Arrows, progress, hint ── */
.case__arrow{
  position:absolute;
  top:calc(var(--rail) + (var(--rowH) * var(--rows)) / 2);
  z-index:3;
  width:46px;height:46px;
  margin-top:-23px;
  display:grid;place-items:center;
  border:0;
  border-radius:50%;
  background:var(--cream-50);
  color:var(--navy-800);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  cursor:pointer;
  transition:opacity .25s ease,transform .25s var(--ease-out),background-color .2s ease;
}
.case__arrow:hover{background:#fff;transform:scale(1.06)}
.case__arrow:focus-visible{outline:3px solid var(--gold-400);outline-offset:3px}
.case__arrow svg{width:18px;height:18px}
.case__arrow--prev{left:clamp(8px,2vw,28px)}
.case__arrow--next{right:clamp(8px,2vw,28px)}
.case__arrow[disabled]{opacity:0;pointer-events:none;transform:scale(.85)}
@media (hover:none){ .case__arrow{display:none} }

.case__foot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-top:4px;
}
.case__progress{
  position:relative;
  width:min(420px,62vw);
  height:4px;
  border-radius:4px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.case__progress i{
  position:absolute;
  left:0;top:0;
  height:100%;
  width:100%;
  border-radius:4px;
  background:var(--gold-500);
  transform-origin:0 50%;
  will-change:transform;
}
.case__hint{
  margin:0;
  padding-inline:var(--gutter,20px);
  font-size:var(--fs-sm);
  color:rgba(255,255,255,.62);
  text-align:center;
}
.chip__n{
  margin-left:7px;
  font-size:.72em;
  font-weight:700;
  opacity:.6;
}
.chip.is-active .chip__n{opacity:.75}

/* ═══════════ THE COVER TICKER ═══════════
   All 100 covers drifting past in two rows, a lead-in to pricing. Reuses the
   site's .marquee (it pauses on hover); library.js fills it from the
   catalogue and any cover opens the same quick preview. */
.covers{
  position:relative;
  overflow:hidden;
  padding-block:clamp(64px,8vw,104px) clamp(20px,3vw,36px);
  background:var(--navy-900);
  color:rgba(255,255,255,.72);
}
.covers__head{text-align:center;margin-bottom:clamp(30px,4vw,46px)}
.covers__title{
  margin:.35em 0 0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--fs-h2);
  line-height:1.05;
  letter-spacing:-.02em;
  color:#fff;
}
.covers__title .u-gold{color:var(--gold-500)}
.covers .marquee{margin-top:0}
.covers__hint{margin:clamp(22px,3vw,30px) 0 0;text-align:center;font-size:var(--fs-sm);color:rgba(255,255,255,.62)}
.tick{
  flex:none;
  position:relative;
  width:clamp(118px,10vw + 40px,164px);
  aspect-ratio:312/442;
  padding:0;
  border:0;
  border-radius:3px 6px 6px 3px;
  background:none;
  cursor:pointer;
  transition:transform .35s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.tick__img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  border-radius:inherit;
  background:#1A2549;
  box-shadow:1px 0 0 #F4ECD8,3px 1px 0 #D9CBAB,5px 2px 0 #CDBD9C,0 18px 26px -12px rgba(0,0,0,.8);
  -webkit-user-drag:none;
}
.tick::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(112deg,rgba(255,255,255,.22),rgba(255,255,255,0) 36%);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){ .tick:hover{transform:translateY(-10px) scale(1.05)} }
.tick:focus{outline:none}
.tick:focus-visible{outline:3px solid var(--gold-400);outline-offset:4px}
.tick.is-away{visibility:hidden}
/* The site's marquee pauses on :focus-within, which would leave this band
   frozen after a preview returns focus to the cover a mouse user clicked.
   Here it pauses on hover and on keyboard focus only. */
.covers .marquee:focus-within .marquee__row{animation-play-state:running}
.covers .marquee:hover .marquee__row,
.covers .marquee:has(.tick:focus-visible) .marquee__row{animation-play-state:paused}
html.pv-open .covers .marquee .marquee__row{animation-play-state:paused!important}

/* ═══════════ QUICK PREVIEW ═══════════ */
.pv{position:fixed;inset:0;z-index:1200;display:none}
.pv.is-open{display:block}
.pv__scrim{
  position:absolute;inset:0;
  background:rgba(6,10,26,.78);
  opacity:0;
  transition:opacity .32s ease;
}
.pv.is-in .pv__scrim{opacity:1}

.pv__panel{
  position:absolute;
  left:50%;top:50%;
  width:min(1100px,94vw);
  max-height:min(92vh,880px);
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);
  border-radius:24px;
  overflow:hidden;
  background:var(--cream-50);
  box-shadow:0 40px 110px rgba(0,0,0,.55);
  opacity:0;
  transform:translate(-50%,-47%) scale(.985);
  transition:opacity .32s ease,transform .5s var(--ease-out);
}
.pv.is-in .pv__panel,.pv--fly .pv__panel{opacity:1;transform:translate(-50%,-50%)}
.pv--fly:not(.is-in) .pv__panel{opacity:0}          /* the flying cover lands on a panel that is already in place */
.pv.is-closing .pv__panel{opacity:0;transform:translate(-50%,-48%) scale(.985);transition-duration:.22s,.3s}
.pv.is-closing .pv__scrim{opacity:0;transition-duration:.3s}

.pv__close{
  position:absolute;
  top:14px;right:14px;
  z-index:6;
  width:42px;height:42px;
  display:grid;place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(20,28,61,.08);
  color:var(--navy-800);
  cursor:pointer;
  transition:background-color .2s ease,transform .2s var(--ease-out);
}
.pv__close:hover{background:rgba(20,28,61,.14);transform:rotate(90deg)}
.pv__close:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px}
.pv__close svg{width:18px;height:18px}

/* The reading table the book sits on */
.pv__stage{
  --pw:260px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:min(640px,86vh);
  padding:44px 28px 30px;
  overflow:hidden;
  background:
    radial-gradient(60% 55% at 50% 42%,rgba(214,175,87,.22),rgba(214,175,87,0) 70%),
    radial-gradient(120% 90% at 50% 40%,#1B2651 0%,#101838 60%,#0A1029 100%);
  transition:opacity .18s ease;
}
.pv__stage.is-swapping{opacity:0}

.pv__book{
  position:relative;
  width:calc(var(--pw) * 2);
  height:calc(var(--pw) * 1.4194);
  perspective:2200px;
  transform:translateX(calc(var(--pw) * -.5));     /* closed: the cover sits centred */
}
.pv__book.is-open{transform:none}
.pv__book::after{                                  /* shadow on the table */
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:-18px;
  height:28px;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));
  transform-origin:100% 50%;
  transform:scaleX(.5);                            /* closed: only under the cover */
  transition:transform .7s var(--ease-out);
}
.pv__book.is-open::after{transform:none}
.pv--single .pv__book{width:var(--pw);transform:none}
.pv--single .pv__book::after{transform:none}

.pv__page{
  position:absolute;
  top:0;
  width:var(--pw);
  height:100%;
  background:#F7F1E3;
  overflow:hidden;
}
.pv__page--l{left:0;border-radius:6px 0 0 6px}
.pv__page--r{left:var(--pw);border-radius:0 6px 6px 0}
.pv--single .pv__page--l{display:none}
.pv--single .pv__page--r{left:0;border-radius:4px 6px 6px 4px}
.pv__page[hidden]{display:none}
/* the gutter: pages curve into the binding */
.pv__page--l::after,.pv__page--r::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:14%;
  pointer-events:none;
}
.pv__page--l::after{right:0;background:linear-gradient(270deg,rgba(0,0,0,.22),rgba(0,0,0,0))}
.pv__page--r::after{left:0;background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,0))}
.pv--single .pv__page--r::after{width:6%}

.pv__leaf{
  position:absolute;
  top:0;
  width:var(--pw);
  height:100%;
  z-index:3;
  transform-style:preserve-3d;
  will-change:transform;
}
.pv__leaf--fwd{left:var(--pw);transform-origin:0 50%}
.pv__leaf--back{left:0;transform-origin:100% 50%}
.pv--single .pv__leaf{left:0;transform-origin:0 50%}
.pv__face{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#F7F1E3;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.pv__face--back{transform:rotateY(180deg)}
.pv__leaf--fwd .pv__face--front,.pv--single .pv__face--front{border-radius:0 6px 6px 0}
.pv__leaf--fwd .pv__face--back{border-radius:6px 0 0 6px}
.pv__leaf--back .pv__face--front{border-radius:6px 0 0 6px}
.pv__leaf--back .pv__face--back{border-radius:0 6px 6px 0}
.pv__shade{                                         /* light falling across a turning page */
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 60%);
  opacity:0;
  pointer-events:none;
}
.pv__img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  background:#EFE7D4 center/cover no-repeat;
}
/* The cover, with the spine hinge and a page block along the fore-edge */
.pv__cover{position:relative;width:100%;height:100%}
.pv__cover::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;
  width:8%;
  z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(255,255,255,.14) 55%,rgba(255,255,255,0));
}
.pv__book:not(.is-open) .pv__leaf--cover .pv__face--front,
.pv__closed{
  box-shadow:1px 0 0 #F4ECD8,3px 1px 0 #D9CBAB,5px 2px 0 #F1E7D0,7px 3px 0 #CDBD9C;
}
.pv__closed{
  position:absolute;
  top:0;left:var(--pw);
  width:var(--pw);height:100%;
  border-radius:3px 6px 6px 3px;
  overflow:hidden;
  z-index:3;
}
.pv--single .pv__closed{left:0}

/* Blank paper and the end card */
.pv__paper{width:100%;height:100%;background:linear-gradient(90deg,#EFE7D4,#F7F1E3 20%)}
.pv__end{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;height:100%;
  padding:12%;
  text-align:center;
  background:
    radial-gradient(80% 60% at 50% 30%,rgba(214,175,87,.25),rgba(214,175,87,0) 70%),
    #FBF6EA;
  color:var(--navy-800);
}
.pv__end img{width:34%;height:auto}
.pv__end p{margin:0;font:700 clamp(.95rem,.8rem + .6vw,1.2rem)/1.3 var(--font-display)}
.pv__end small{font-size:.8rem;color:var(--navy-300)}

.pv__turns{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  gap:14px;
}
.pv__turns[hidden]{display:none}
.pv__turn{
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1.5px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,opacity .2s ease;
}
.pv__turn:hover{background:rgba(255,255,255,.14);border-color:var(--gold-500)}
.pv__turn:focus-visible{outline:3px solid var(--gold-400);outline-offset:2px}
.pv__turn[disabled]{opacity:.28;cursor:default;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.pv__turn svg{width:16px;height:16px}
.pv__count{
  min-width:120px;
  text-align:center;
  font-size:var(--fs-sm);
  font-weight:600;
  color:rgba(255,255,255,.72);
}

/* The information column */
.pv__info{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:clamp(34px,4vw,54px) clamp(26px,3vw,42px) clamp(26px,3vw,36px);
  overflow-y:auto;
  overscroll-behavior:contain;
  color:var(--navy-700);
}
.pv__eyebrow{
  margin:0;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-700);
}
.pv__title{
  margin:0;
  padding-right:30px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.7rem,1.1rem + 1.6vw,2.4rem);
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--navy-800);
}
.pv__theme{
  align-self:flex-start;
  margin:0;
  padding:6px 12px;
  border-radius:var(--r-pill);
  background:var(--gold-100);
  border:1px solid var(--gold-200);
  color:#6B5220;
  font-size:var(--fs-sm);
  font-weight:700;
}
.pv__facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin:0;
  padding:14px 0;
  list-style:none;
  border-block:1px solid rgba(20,28,61,.09);
  font-size:var(--fs-sm);
  color:var(--navy-300);
}
.pv__facts b{color:var(--navy-800);font-weight:800}
.pv__peek{
  margin:0;
  font-size:.95rem;
  line-height:1.55;
  color:#4A5273;
}
.pv__peek b{color:var(--navy-800)}
.pv__link{
  display:inline;
  padding:0;
  border:0;
  background:none;
  color:#7A5B12;
  font:inherit;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.pv__link:hover{color:var(--navy-800)}
.pv__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.pv__cta .btn{height:50px;padding-inline:24px}
.pv__browse{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid rgba(20,28,61,.09);
}
.pv__nb{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  padding:10px 12px;
  border:1px solid rgba(20,28,61,.1);
  border-radius:12px;
  background:#fff;
  color:var(--navy-800);
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease,transform .2s var(--ease-out),box-shadow .2s ease;
}
.pv__nb:hover{border-color:var(--gold-500);box-shadow:0 6px 16px rgba(20,28,61,.08);transform:translateY(-1px)}
.pv__nb:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px}
.pv__nb--next{text-align:right}
.pv__nb small{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-300)}
.pv__nb span{font-size:.85rem;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The cover flying between the shelf and the preview */
.pv__ghost{
  position:fixed;
  z-index:1300;
  border-radius:3px 6px 6px 3px;
  object-fit:cover;
  box-shadow:0 30px 60px rgba(0,0,0,.45);
  pointer-events:none;
  will-change:transform;
}

/* ── Phones and narrow windows: a full-screen sheet, one page at a time ── */
@media (max-width:859px){
  .pv__panel{
    left:0;top:0;right:0;bottom:0;
    width:auto;
    max-height:none;
    grid-template-columns:1fr;
    grid-auto-rows:max-content;
    border-radius:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateY(28px);
  }
  .pv.is-in .pv__panel,.pv--fly .pv__panel{transform:none}
  .pv.is-closing .pv__panel{transform:translateY(20px)}
  .pv__stage{min-height:0;padding:58px 20px 22px}
  .pv__close{background:rgba(255,255,255,.14);color:#fff}
  .pv__close:hover{background:rgba(255,255,255,.22)}
  .pv__info{overflow:visible;padding-top:26px}
  .pv__title{padding-right:0}
}

@media (prefers-reduced-motion:reduce){
  .shelfbook__body,.shelfbook::before,.shelfbook::after,.shelfbook__tag,.tick,.case__arrow,.pv__panel,.pv__scrim,.pv__stage,.pv__book::after{transition:none!important}
  .js .case.is-in .shelfbook{animation:none;opacity:1}
  .js .case .shelfbook{opacity:1}
}