/* SLITZ flipbook reader — embedded, in-page. Light editorial palette to match
   the site (see :root in style.css) rather than a black lightbox, so opening
   the reader doesn't feel like leaving the page. */

.fb{background:var(--paper-2,#faf8f5);border:1px solid var(--line,#ececea);border-radius:3px;
  padding:22px;margin:32px 0}
.fb-bar{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.fb-title{font-weight:800;font-size:14px;letter-spacing:.02em;color:var(--ink,#1c1c1e);flex:1}
.fb-page-input{width:52px;text-align:center;border:1px solid var(--line-2,#e2ded8);border-radius:2px;
  padding:6px 4px;font-size:12.5px;font-family:inherit}
.fb-count{font-size:12px;color:var(--grey,#8a8a8f);white-space:nowrap}
.fb-btn{border:1px solid var(--line-2,#e2ded8);background:#fff;border-radius:2px;padding:7px 12px;
  font-size:12px;font-weight:700;cursor:pointer;color:var(--ink,#1c1c1e);transition:border-color .15s}
.fb-btn:hover{border-color:var(--hot,#ff043f)}

.fb-progress{height:2px;background:var(--line,#ececea);border-radius:2px;overflow:hidden;margin-bottom:16px}
.fb-progress-bar{height:100%;width:0;background:var(--hot,#ff043f);transition:width .2s}

.fb-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  perspective:2600px;min-height:200px}
.fb-nav{background:#fff;border:1px solid var(--line-2,#e2ded8);border-radius:50%;width:40px;height:40px;
  flex:0 0 40px;font-size:18px;line-height:1;cursor:pointer;color:var(--ink,#1c1c1e);
  display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.fb-nav:hover{border-color:var(--hot,#ff043f);color:var(--hot,#ff043f)}
.fb-nav:disabled{opacity:.3;cursor:default}
.fb-nav:disabled:hover{border-color:var(--line-2,#e2ded8);color:var(--ink,#1c1c1e)}

/* ONE width throughout - the cover is a normal spread with an empty left half,
   not a narrower box. A width change mid-turn fought the page animation and
   made the turn read as a jump.

   preserve-3d is required HERE, not only on the leaf: perspective on .fb-stage
   reaches direct children only, and the leaf is a grandchild - without this the
   rotation flattens into a horizontal squash with no depth. */
.fb-book{position:relative;flex:1 1 auto;max-width:1040px;aspect-ratio:1320/854.4;
  transform-style:preserve-3d}

.fb-leaf{position:absolute;top:0;height:100%;width:50%}
.fb-leaf>canvas{width:100%;height:100%;display:block;background:#f2efea}
.fb-half-left{left:0}
.fb-half-right{left:50%}

/* the gutter shadow, so two facing pages read as one bound book */
.fb-book::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:20px;margin-left:-10px;
  z-index:5;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.20),transparent 42%,transparent 58%,rgba(0,0,0,.20))}

/* ---- the turning leaf: two real faces ---------------------------------
   Forward hinges at the LEFT edge (the spine) and swings right-to-left;
   backward hinges at the RIGHT edge and swings the other way. Getting the
   hinge edge backwards is exactly what makes a page turn look wrong. */
.fb-turning{transform-style:preserve-3d;z-index:6;will-change:transform}
.fb-turning.turn-fwd{transform-origin:left center}
.fb-turning.turn-back{transform-origin:right center}
.fb-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;box-shadow:0 0 26px rgba(0,0,0,.28)}
.fb-face>canvas{width:100%;height:100%;display:block;background:#f2efea}
.fb-face-back{transform:rotateY(180deg)}

.fb-turning.turn-fwd.turning{animation:fbFwd .62s cubic-bezier(.42,0,.30,1) forwards}
.fb-turning.turn-back.turning{animation:fbBack .62s cubic-bezier(.42,0,.30,1) forwards}
@keyframes fbFwd{from{transform:rotateY(0deg)}to{transform:rotateY(-180deg)}}
@keyframes fbBack{from{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}

/* a moving sheen so the leaf reads as paper catching light, not a flat plane */
.fb-shade{position:absolute;inset:0;opacity:0;pointer-events:none}
.fb-face-front .fb-shade{background:linear-gradient(90deg,transparent 40%,rgba(0,0,0,.42))}
.fb-face-back .fb-shade{background:linear-gradient(90deg,rgba(0,0,0,.42),transparent 60%)}
.fb-turning.turning .fb-shade{animation:fbShade .62s cubic-bezier(.42,0,.30,1) forwards}
@keyframes fbShade{0%{opacity:0}50%{opacity:.85}100%{opacity:0}}


/* clickable link hotspots overlaid on a page image - see paintLinks() */
/* links ride ABOVE the page-turn hit zones (z7) - otherwise a link near the
   page edge turns the page instead of opening. The wrap itself is click-through
   so everything that isn't an anchor still reaches the hit zones and zoom. */
.fb-links{position:absolute;inset:0;z-index:8;pointer-events:none}
.fb-links a{position:absolute;display:block;border-radius:1px;pointer-events:auto;
  background:transparent;transition:background .12s,box-shadow .12s}
.fb-links a:hover,
.fb-links a:focus-visible{background:rgba(255,4,63,.20);
  box-shadow:0 0 0 1.5px rgba(255,4,63,.75)}
.fb-turning .fb-links{display:none}   /* never clickable mid-turn */

.fb-hit{position:absolute;top:0;bottom:0;width:20%;cursor:pointer;z-index:7;background:transparent}
.fb-hit.left{left:0}
.fb-hit.right{right:0}

.fb-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#6b6560;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.fb-loading .dot{width:6px;height:6px;border-radius:50%;background:var(--hot,#ff043f);margin-left:8px;
  display:inline-block;animation:fbPulse 1s ease-in-out infinite}
@keyframes fbPulse{0%,100%{opacity:.25}50%{opacity:1}}

/* Fullscreen: size from the SPREAD ratio (1320/854.4 = 1.545). Sizing it from
   the single-page ratio made the box too tall for its contents and left thick
   black bands above and below the pages. Height drives width via aspect-ratio. */
.fb.is-fullscreen{position:fixed;inset:0;z-index:999;margin:0;border-radius:0;border:none;
  display:flex;flex-direction:column;padding:16px;background:var(--paper-2,#faf8f5)}
.fb.is-fullscreen .fb-stage{flex:1}
.fb.is-fullscreen .fb-book{flex:0 0 auto;width:auto;max-width:none;
  height:min(86vh, calc(94vw / 1.545))}

@media (max-width:640px){
  .fb{padding:14px}
  .fb-nav{width:34px;height:34px;flex-basis:34px;font-size:15px}
  .fb-title{font-size:12.5px}
}

@media (prefers-reduced-motion: reduce){
  .fb-turning.turn-fwd.turning,
  .fb-turning.turn-back.turning,
  .fb-turning.turning .fb-shade{animation-duration:.01s}
}

/* ---- zoom overlay: one page, near full-size, scrollable ---- */
.fb-zoomer{position:fixed;inset:0;z-index:1000;display:none;flex-direction:column;
  background:rgba(20,19,22,.94)}
.fb-zoomer.show{display:flex}
.fb-zoomer-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;
  background:rgba(20,19,22,.9)}
.fb-zoomer-n{font-family:inherit;font-weight:700;font-size:12.5px;color:#fff;flex:1}
.fb-zoomer-bar .fb-btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.fb-zoomer-bar .fb-btn:hover{border-color:var(--hot,#ff043f)}
.fb-zoomer-scroll{flex:1;overflow-y:auto;padding:14px 0 40px;cursor:zoom-out}
.fb-zoomer-page{position:relative;width:min(1100px,96vw);margin:0 auto;cursor:default}
.fb-zoomer-page img{width:100%;display:block;background:#f2efea}
.fb-zoomer-page .fb-links{display:block}
@media (prefers-reduced-motion: no-preference){
  .fb-zoomer.show .fb-zoomer-page{animation:fbZoomIn .18s ease-out}
  @keyframes fbZoomIn{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}}
}
/* the page middle now zooms - tell the cursor */
.fb-leaf>canvas{cursor:zoom-in}