/* The King's Library (page-library.php, js/ks-library.js). */
/* The card and the reader are added to <body>, outside .ksl, so they carry the colours too. */
.ksl,.ksl-dlg,.kslr{--ksl-navy:#063A61;--ksl-deep:#04273F;--ksl-gold:#c8993a;--ksl-cream:#FAF6F0;--ksl-ink:#5F5848}
.ksl-wrap{max-width:1320px;margin:0 auto}

/* The whole page is one dark reading room: the title sits in it, under a warm lamp glow,
   above the shelves. */
.ksl{color:#fff;background:radial-gradient(ellipse 70% 900px at 50% 0,rgba(232,186,110,.2),transparent 70%),
  radial-gradient(ellipse 60% 40% at 50% 100%,rgba(0,0,0,.45),transparent 70%),
  linear-gradient(180deg,#10293c 0,#0d2638 420px,#0a1d2c 60%,#08161f 100%)}

/* ---- hero ---------------------------------------------------------------------- */
.ksl-hero{padding:100px clamp(18px,5vw,72px) 0;background:none}
.ksl-hero-text{max-width:820px;margin:clamp(36px,5vw,64px) auto 0;text-align:center}
.ksl-hero .ks-crumbs a{color:rgba(255,255,255,.62)}
.ksl-hero .ks-crumbs a:hover{color:#e2b65c}
.ksl-hero .ks-crumbs [aria-current="page"]{color:#fff}
/* styles.css gives every page-top section bottom padding on phones; here the room follows straight on */
@media (max-width:767.98px){main>section.ksl-hero.ks-lead-section{padding-bottom:0 !important}}
.ksl-hero .ks-eyebrow--gold{color:#e2b65c}
.ksl-h1{font-family:var(--ks-display);font-weight:700;font-size:clamp(36px,5.4vw,70px);line-height:1.04;letter-spacing:-.02em;color:#fff;margin:18px 0 0}
.ksl-h1 em{font-style:italic;color:#e2b65c}
.ksl-lead{font-size:clamp(16.5px,1.55vw,19px);line-height:1.8;color:rgba(255,255,255,.76);margin:22px auto 0;max-width:40em}
.ksl-stats{display:flex;justify-content:center;gap:28px;margin-top:26px;font-size:14px;letter-spacing:.04em;color:rgba(255,255,255,.6)}
.ksl-stats strong{font-family:var(--ks-display);font-size:28px;color:#fff;margin-inline-end:6px;letter-spacing:0}

/* ---- the reading room ---------------------------------------------------------- */
.ksl-room{position:relative;padding:clamp(40px,5vw,64px) clamp(14px,4vw,64px) clamp(70px,8vw,120px);color:#fff;overflow:hidden}
.ksl-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 clamp(30px,4vw,48px)}
.ksl-chip{font:inherit;font-size:14px;font-weight:700;padding:10px 18px;border-radius:999px;cursor:pointer;
  color:rgba(255,255,255,.82);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);transition:background .25s,color .25s,border-color .25s}
.ksl-chip:hover{background:rgba(255,255,255,.12)}
.ksl-chip.is-on{background:var(--ksl-gold);border-color:var(--ksl-gold);color:#062033}
.ksl-chip:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ksl-empty{text-align:center;font-size:18px;color:rgba(255,255,255,.75);padding:60px 0}

/* The bookcase: an oak cabinet exactly as wide as its columns of books (6, 5, 4, 3 or 2 a
   row, by screen width), with sides, a top and a base (::after) that the boards run into.
   Every grid row is one shelf: the board, its shadow and the light above it are background
   tiles one row tall, painted inside the frame (content box), so a board runs from side to
   side even when the last row is not full. ::before lays wood grain over the boards only (a
   mask with the same row tiles). --base is where the books stand. */
.ksl-shelf{--bh:230px;--pad:30px;--col:200px;--cols:6;--side:22px;--crown:18px;--plinth:26px;
  --base:calc(var(--pad) + var(--bh));--row:calc(var(--base) + 112px);
  position:relative;list-style:none;margin:0 auto;padding:var(--crown) var(--side) var(--plinth);width:max-content;max-width:100%;
  display:grid;grid-template-columns:repeat(var(--cols),var(--col));grid-auto-rows:var(--row);
  border-radius:6px;background-color:#0d2131;box-shadow:0 50px 90px -40px rgba(0,0,0,.8);
  background-image:
    linear-gradient(to bottom,transparent 0,transparent calc(var(--base) - 9px),
      #5e3c20 calc(var(--base) - 9px),#9a6d3f calc(var(--base) - 3px),#c9a06a calc(var(--base) + 1px),
      #f5dcab calc(var(--base) + 1px),#f5dcab calc(var(--base) + 2px),
      #c48f57 calc(var(--base) + 3px),#a8743f calc(var(--base) + 12px),#80532f calc(var(--base) + 21px),#5a391f calc(var(--base) + 24px),
      rgba(0,0,0,.55) calc(var(--base) + 24px),rgba(0,0,0,.2) calc(var(--base) + 40px),rgba(0,0,0,0) calc(var(--base) + 72px),transparent 100%),
    linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) calc(var(--base) - 70px),rgba(0,0,0,.28) calc(var(--base) - 9px),transparent calc(var(--base) - 9px)),
    radial-gradient(ellipse 62% 58% at 50% 42%,rgba(255,206,140,.12),rgba(255,206,140,0) 70%);
  background-size:100% var(--row);background-repeat:repeat-y;background-origin:content-box;background-clip:content-box}
.ksl-shelf::before{content:"";position:absolute;inset:var(--crown) var(--side) var(--plinth);pointer-events:none;mix-blend-mode:multiply;opacity:.6;
  background:linear-gradient(90deg,rgba(40,22,8,.55),rgba(40,22,8,0) 14px,rgba(40,22,8,0) calc(100% - 14px),rgba(40,22,8,.55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='48'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .45' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .22 0 0 0 0 .1 0 0 0 1.4 -.45'/%3E%3C/filter%3E%3Crect width='480' height='48' filter='url(%23w)'/%3E%3C/svg%3E") 0 0/480px 48px;
  -webkit-mask:linear-gradient(to bottom,transparent 0,transparent calc(var(--base) - 9px),#000 calc(var(--base) - 9px),#000 calc(var(--base) + 24px),transparent calc(var(--base) + 24px)) 0 0/100% var(--row) repeat-y;
          mask:linear-gradient(to bottom,transparent 0,transparent calc(var(--base) - 9px),#000 calc(var(--base) - 9px),#000 calc(var(--base) + 24px),transparent calc(var(--base) + 24px)) 0 0/100% var(--row) repeat-y}
.ksl-shelf::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:6px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0)) var(--side) 0/26px 100% no-repeat,
    linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,0)) calc(100% - var(--side)) 0/26px 100% no-repeat,
    linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0)) 0 var(--crown)/100% 30px no-repeat,
    repeating-linear-gradient(90deg,rgba(40,22,8,.12) 0 1px,rgba(40,22,8,0) 1px 5px) 0 0/var(--side) 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(40,22,8,.12) 0 1px,rgba(40,22,8,0) 1px 5px) 100% 0/var(--side) 100% no-repeat,
    linear-gradient(90deg,#3a2312,#7d5230 22%,#a8743f 60%,#5c391d) 0 0/var(--side) 100% no-repeat,
    linear-gradient(270deg,#3a2312,#7d5230 22%,#a8743f 60%,#5c391d) 100% 0/var(--side) 100% no-repeat,
    linear-gradient(180deg,#e2bd85,#b98450 22%,#93613a 70%,#5c391d) 0 0/100% var(--crown) no-repeat,
    linear-gradient(180deg,#f0cf98 0,#c48f57 2px,#8a5a32 60%,#4a2d16) 0 100%/100% var(--plinth) no-repeat}
.ksl-item{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:var(--pad) 8px 0;min-width:0}
.ksl-item[hidden]{display:none}
.ksl-caption{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;margin-top:36px;max-width:100%;padding:0 4px}
.ksl-cap-title{font-family:var(--ks-display);font-weight:600;font-size:15.5px;line-height:1.25;color:#fff;transition:color .3s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ksl-cap-author{font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.62);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ksl-book:hover+.ksl-caption .ksl-cap-title,.ksl-book:focus-visible+.ksl-caption .ksl-cap-title{color:#f1d6a0}

/* ---- a 3D book ------------------------------------------------------------------- */
/* On the shelf a mouse tilts the book towards the pointer (js sets --tx/--tilt and the
   sheen's --gx/--gy); touch screens and reduced motion just get the plain lift. */
.ksl-book{--w:calc(var(--bh) * var(--ratio));--ry:26deg;--rx:0deg;--lift:0px;--pull:0px;position:relative;display:block;width:var(--w);height:var(--bh);
  perspective:1100px;perspective-origin:50% 40%;color:inherit;text-decoration:none;outline:none;cursor:pointer;flex:none}
.ksl-book::after{content:"";position:absolute;left:-5%;right:-12%;bottom:-5px;height:13px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.72),rgba(0,0,0,0));transition:opacity .5s,transform .5s;z-index:-1}
.ksl-book.is-out{opacity:0}
.ksl-obj{position:absolute;inset:0;display:block;transform-style:preserve-3d;
  transform:translate3d(0,var(--lift),var(--pull)) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ksl-shelf .ksl-book:hover,.ksl-shelf .ksl-book:focus-visible{--ry:calc(9deg + var(--tx,0deg));--rx:var(--tilt,0deg);--lift:-16px;--pull:16px}
.ksl-shelf .ksl-book:hover::after,.ksl-shelf .ksl-book:focus-visible::after{opacity:.45;transform:scale(.88)}
.ksl-book:focus-visible .ksl-front{outline:3px solid var(--ksl-gold);outline-offset:4px}
.ksl-face{position:absolute;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ksl-front,.ksl-back{inset:0;background:var(--tone);overflow:hidden;border-radius:1px 4px 4px 1px}
.ksl-front{transform:translateZ(calc(var(--depth) / 2));box-shadow:0 18px 40px -14px rgba(0,0,0,.65)}
.ksl-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the hinge crease, light from the top left, a little shade at the foot */
.ksl-front::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.38) 0,rgba(255,255,255,.22) 1.8%,rgba(0,0,0,.09) 3.8%,rgba(255,255,255,.05) 6%,transparent 10%),
             linear-gradient(118deg,rgba(255,255,255,.17),transparent 36%),
             linear-gradient(to top,rgba(0,0,0,.16),transparent 22%)}
/* the sheen that follows the pointer */
.ksl-front::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(circle at var(--gx,32%) var(--gy,22%),rgba(255,255,255,.3),rgba(255,255,255,0) 58%)}
.ksl-shelf .ksl-book:hover .ksl-front::before{opacity:1}
.ksl-back{transform:rotateY(180deg) translateZ(calc(var(--depth) / 2));filter:brightness(.8)}
.ksl-spine{top:0;bottom:0;width:var(--depth);left:calc(50% - var(--depth) / 2);background:var(--tone) center/100% 100% no-repeat;
  transform:rotateY(-90deg) translateZ(calc(var(--w) / 2));overflow:hidden}
/* a rounded spine: dark where it meets the boards, lit across the middle */
.ksl-spine::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.08) 22%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.04) 62%,rgba(0,0,0,.38))}
.ksl-spine>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);white-space:nowrap;
  font-family:var(--ks-display);font-size:11px;font-weight:600;color:rgba(255,255,255,.9);max-width:calc(var(--bh) - 24px);overflow:hidden;text-overflow:ellipsis}
.ksl-edge{top:3px;bottom:3px;width:calc(var(--depth) - 2px);left:calc(50% - var(--depth) / 2 + 1px);
  transform:rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px));
  background:linear-gradient(90deg,rgba(0,0,0,.24),rgba(0,0,0,0) 24%,rgba(0,0,0,0) 76%,rgba(0,0,0,.24)),
    linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,0) 26%,rgba(0,0,0,0) 70%,rgba(0,0,0,.14)),
    repeating-linear-gradient(90deg,#f7f1e5 0 1px,#e2d8c4 1px 2px),#efe7d6}
.ksl-top{left:1px;right:3px;height:var(--depth);top:calc(50% - var(--depth) / 2);
  transform:rotateX(90deg) translateZ(calc(var(--bh) / 2 - 1px));
  background:linear-gradient(0deg,rgba(0,0,0,.22),rgba(0,0,0,0) 26%,rgba(0,0,0,0) 74%,rgba(0,0,0,.22)),repeating-linear-gradient(0deg,#f7f1e5 0 1px,#e2d8c4 1px 2px)}
.ksl-plain{position:absolute;inset:14% 10%;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--ks-display);font-weight:600;font-size:16px;line-height:1.25;color:#fff}
/* Kurdish and Arabic books bind on the right: spine on the right, page edges on the left. */
.ksl-book[data-dir="rtl"]{--ry:-26deg}
.ksl-shelf .ksl-book[data-dir="rtl"]:hover,.ksl-shelf .ksl-book[data-dir="rtl"]:focus-visible{--ry:calc(-9deg + var(--tx,0deg))}
.ksl-book[data-dir="rtl"] .ksl-spine{transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}
.ksl-book[data-dir="rtl"] .ksl-edge{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2 - 3px))}
.ksl-book[data-dir="rtl"] .ksl-front{border-radius:4px 1px 1px 4px}
.ksl-book[data-dir="rtl"] .ksl-front::after{background:linear-gradient(270deg,rgba(0,0,0,.38) 0,rgba(255,255,255,.22) 1.8%,rgba(0,0,0,.09) 3.8%,rgba(255,255,255,.05) 6%,transparent 10%),
  linear-gradient(242deg,rgba(255,255,255,.17),transparent 36%),linear-gradient(to top,rgba(0,0,0,.16),transparent 22%)}

/* The book that flies between the shelf and the details card (js/ks-library.js, flight()). */
.ksl-flyer{position:fixed;z-index:100002;pointer-events:none;margin:0;transform-origin:0 0;will-change:transform}
.ksl-flyer::after{display:none}

/* Books arrive on the shelf one by one, and again after a language filter. */
@keyframes kslArrive{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.ksl-room.is-ready .ksl-item{animation:kslArrive .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms)}

@media (max-width:1359.98px){.ksl-shelf{--cols:5}}
@media (max-width:1139.98px){.ksl-shelf{--cols:4}}
@media (max-width:919.98px){.ksl-shelf{--cols:3}}
@media (max-width:767.98px){
  .ksl-shelf{--bh:176px;--pad:24px;--side:12px;--crown:12px;--plinth:18px;width:auto;grid-template-columns:repeat(2,minmax(0,1fr));--row:calc(var(--base) + 100px)}
  .ksl-caption{margin-top:32px}
  .ksl-cap-title{font-size:14px}
  .ksl-book{--ry:20deg}
  .ksl-book[data-dir="rtl"]{--ry:-20deg}
}

/* The card and the reader sit above the WordPress admin bar (z-index 99999), so logged-in
   staff can still reach the close button. */
/* ---- details card ------------------------------------------------------------------ */
.ksl-dlg{outline:none;position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);
  background:rgba(4,16,26,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s}
.ksl-dlg.is-open{opacity:1}
.ksl-card{position:relative;width:min(980px,100%);max-height:calc(100dvh - 24px);overflow:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,4vw,52px);align-items:center;padding:clamp(26px,4vw,52px);border-radius:24px;color:#2c2a26;
  background:linear-gradient(160deg,#fffdf8,#f6efe2);box-shadow:0 60px 120px -40px rgba(0,0,0,.7);transform:translateY(18px) scale(.98);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.ksl-dlg.is-open .ksl-card{transform:none}
.ksl-card-stage{display:flex;flex-direction:column;align-items:center;gap:16px}
.ksl-card-stage .ksl-book{--bh:min(380px,52vh);--ry:-18deg;cursor:default}
.ksl-card-stage .ksl-book[data-dir="rtl"]{--ry:18deg}
.ksl-card-stage .ksl-book:hover{--lift:0px}
.ksl-card-stage .ksl-book.is-turned{--ry:-198deg}
.ksl-card-stage .ksl-book[data-dir="rtl"].is-turned{--ry:198deg}
/* While the book flies in from the shelf: the card itself does not slide, and its own book
   waits hidden where the flying one will land. */
.ksl-dlg.is-flying .ksl-card{transform:none;transition:none}
.ksl-card-stage .ksl-book.is-hidden{visibility:hidden}
.ksl-turn{font:inherit;font-size:13px;font-weight:700;color:var(--ksl-navy);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px}
.ksl-turn:hover{background:rgba(6,58,97,.08)}
.ksl-card-meta{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ksl-gold)}
.ksl-card h2{font-family:var(--ks-display);font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.01em;color:var(--ksl-navy);margin:10px 0 0}
.ksl-card .ksl-by{font-size:16px;color:#3f3b34;margin:12px 0 0}
.ksl-card .ksl-credits{font-size:13.5px;color:#7a7263;margin:6px 0 0}
.ksl-card .ksl-desc{font-size:15.5px;line-height:1.75;color:var(--ksl-ink);margin:18px 0 0;max-height:13.5em;overflow:auto;white-space:pre-line}
.ksl-facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;font-size:13.5px;color:#6b6353}
.ksl-facts b{color:var(--ksl-navy)}
.ksl-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ksl-btn{font:inherit;font-size:15px;font-weight:800;display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:999px;cursor:pointer;text-decoration:none;border:1px solid transparent;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s}
.ksl-btn svg{width:18px;height:18px;flex:none}
.ksl-btn small{font-weight:600;opacity:.7}
.ksl-btn--gold{background:var(--ksl-gold);color:#062033;box-shadow:0 16px 34px -16px rgba(200,153,58,.95)}
.ksl-btn--gold:hover{transform:translateY(-2px)}
.ksl-btn--ghost{background:transparent;color:var(--ksl-navy);border-color:rgba(6,58,97,.25)}
.ksl-btn--ghost:hover{background:rgba(6,58,97,.06)}
.ksl-btn--link{background:none;padding:14px 6px;color:#6b6353;font-weight:700}
.ksl-x{position:absolute;top:14px;inset-inline-end:14px;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;font-size:18px;color:var(--ksl-navy);background:rgba(6,58,97,.07)}
.ksl-x:hover{background:rgba(6,58,97,.14)}
@media (max-width:767.98px){
  .ksl-card{grid-template-columns:1fr;text-align:center;padding-top:44px}
  .ksl-card-stage .ksl-book{--bh:min(250px,34vh)}
  .ksl-actions,.ksl-facts{justify-content:center}
}

/* ---- the reader ------------------------------------------------------------------------ */
.kslr{outline:none;position:fixed;inset:0;z-index:100001;display:flex;flex-direction:column;color:#fff;opacity:0;transition:opacity .35s;
  background:radial-gradient(ellipse 80% 70% at 50% 45%,#1d3346 0%,#0c1822 60%,#060d13 100%)}
.kslr.is-open{opacity:1}
.kslr-bar{display:flex;align-items:center;gap:10px;padding:12px clamp(12px,2.5vw,26px);min-height:62px}
.kslr-title{flex:1;min-width:0;font-family:var(--ks-display);font-weight:600;font-size:clamp(15px,1.6vw,19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kslr-title small{display:block;font-family:inherit;font-weight:400;font-size:12.5px;color:rgba(255,255,255,.6);font-family:var(--ks-body,inherit)}
.kslr-ib{flex:none;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);text-decoration:none;transition:background .2s}
.kslr-ib:hover{background:rgba(255,255,255,.16)}
.kslr-ib:focus-visible,.kslr-nav:focus-visible{outline:2px solid var(--ksl-gold,#c8993a);outline-offset:2px}
.kslr-ib svg{width:20px;height:20px}
.kslr-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;perspective:2400px}
.kslr-book{position:relative;transition:transform .7s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.kslr-stage[data-dir="rtl"] .kslr-book{transform:scaleX(-1) translateX(var(--shift,0px))}
.kslr-stage[data-dir="ltr"] .kslr-book{transform:translateX(var(--shift,0px))}
.kslr-stage[data-dir="rtl"] canvas{transform:scaleX(-1)}
.kslr-page,.kslr-leaf>div{position:absolute;top:0;background:#fbf8f1;overflow:hidden}
.kslr-page canvas,.kslr-leaf canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.kslr-page.l{left:0;box-shadow:-18px 24px 50px -20px rgba(0,0,0,.7);border-radius:3px 0 0 3px}
.kslr-page.r{box-shadow:18px 24px 50px -20px rgba(0,0,0,.7);border-radius:0 3px 3px 0}
/* Gutter shadows. A leaf's faces carry the class of the side they lie on when flat (l/r),
   so a turning page looks exactly like the flat page it leaves or becomes. */
.kslr-page.l::after,.kslr-page.r::after,.kslr-leaf .l::after,.kslr-leaf .r::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2}
.kslr-page.l::after,.kslr-leaf .l::after{background:linear-gradient(270deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.08) 4%,transparent 12%)}
.kslr-page.r::after,.kslr-leaf .r::after{background:linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.08) 4%,transparent 12%)}
.kslr-single .kslr-page.r::after,.kslr-single .kslr-leaf .r::after{background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 6%)}
.kslr-page.is-cover::after,.kslr-leaf .is-cover::after{background:linear-gradient(90deg,rgba(0,0,0,.25) 0,rgba(255,255,255,.12) 2%,transparent 7%)}
.kslr-page.l.is-cover::after,.kslr-leaf .l.is-cover::after{background:linear-gradient(270deg,rgba(0,0,0,.25) 0,rgba(255,255,255,.12) 2%,transparent 7%)}
.kslr-leaf .l{border-radius:3px 0 0 3px}
.kslr-leaf .r{border-radius:0 3px 3px 0}
/* The page block at the book's outer edges (two-page view); js/ks-library.js sets the widths. */
.kslr-book::before,.kslr-book::after{content:"";position:absolute;top:3px;bottom:3px;pointer-events:none;
  box-shadow:0 22px 44px -20px rgba(0,0,0,.7);transition:width .3s}
.kslr-book::before{right:100%;width:var(--sl,0px);border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 70%),repeating-linear-gradient(90deg,#f1ebdf 0 1px,#d8cdb8 1px 2px)}
.kslr-book::after{left:100%;width:var(--sr,0px);border-radius:0 3px 3px 0;
  background:linear-gradient(270deg,rgba(0,0,0,.28),rgba(0,0,0,0) 70%),repeating-linear-gradient(90deg,#f1ebdf 0 1px,#d8cdb8 1px 2px)}
.kslr-single .kslr-book::before,.kslr-single .kslr-book::after{display:none}
/* An empty slot (beside the lone front or back cover) shows nothing at all. */
.kslr-page.l.is-empty,.kslr-page.r.is-empty{background:transparent;box-shadow:none}
.kslr-page.is-empty::after{display:none}
.kslr-retry{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;font:inherit;font-size:14px;font-weight:700;color:#5F5848;background:#fbf8f1;border:0;cursor:pointer}
.kslr-leaf{position:absolute;top:0;transform-style:preserve-3d;z-index:5;pointer-events:none}
.kslr-leaf>div{inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kslr-leaf .f{transform:rotateY(0deg)}   /* Safari hides a face's backface reliably only when the face has a 3D transform */
.kslr-leaf .b{transform:rotateY(180deg)}
/* Light and shadow on a turning leaf, driven frame by frame from js/ks-library.js (turn()).
   Each layer starts and ends at opacity 0. "r" faces have the spine on their left. */
.kslr-leaf .shade,.kslr-leaf .gloss,.kslr-cast{position:absolute;inset:0;pointer-events:none;opacity:0}
.kslr-leaf .shade,.kslr-leaf .gloss{z-index:3}
.kslr-leaf .r .shade{background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.14) 45%,rgba(0,0,0,.38))}
.kslr-leaf .l .shade{background:linear-gradient(270deg,rgba(0,0,0,.04),rgba(0,0,0,.14) 45%,rgba(0,0,0,.38))}
.kslr-leaf .r .gloss.edge{background:linear-gradient(90deg,rgba(255,255,255,0) 55%,rgba(255,255,255,.45))}
.kslr-leaf .l .gloss.edge{background:linear-gradient(270deg,rgba(255,255,255,0) 55%,rgba(255,255,255,.45))}
.kslr-leaf .gloss.sweep{right:auto;width:55%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.42) 50%,rgba(255,255,255,0))}
.kslr-leaf .l .gloss.sweep{left:auto;right:0}
.kslr-cast{z-index:4}
.kslr-cast.r{transform-origin:left center;background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 45%,rgba(0,0,0,0))}
.kslr-cast.l{transform-origin:right center;background:linear-gradient(270deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 45%,rgba(0,0,0,0))}
.kslr-spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}
.kslr-spin::before{content:"";width:28px;height:28px;border-radius:50%;border:3px solid rgba(6,58,97,.15);border-top-color:#c8993a;animation:kslSpin .9s linear infinite}
@keyframes kslSpin{to{transform:rotate(360deg)}}
.kslr-nav{position:absolute;top:50%;z-index:8;width:54px;height:54px;margin-top:-27px;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s}
.kslr-nav:hover{background:rgba(255,255,255,.2)}
.kslr-nav[disabled]{opacity:.25;cursor:default}
.kslr-nav svg{width:22px;height:22px}
.kslr-nav.prev{left:clamp(8px,2vw,28px)}
.kslr-nav.next{right:clamp(8px,2vw,28px)}
.kslr-foot{display:flex;align-items:center;gap:16px;padding:10px clamp(16px,3vw,40px) 18px}
.kslr-count{flex:none;font-size:13.5px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.75);min-width:7.5em;text-align:center}
.kslr-range{flex:1;accent-color:#c8993a;height:22px;cursor:pointer}
.kslr-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;font-size:16px;color:rgba(255,255,255,.85);z-index:9}
.kslr-msg[hidden]{display:none}
.kslr-toast{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);background:#fff;color:#062033;font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:10}
.kslr-toast.is-on{opacity:1}
@media (max-width:767.98px){
  .kslr-nav{width:44px;height:44px;margin-top:-22px;background:rgba(0,0,0,.35)}
  .kslr-bar .kslr-hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ksl-obj,.kslr-book,.kslr-book::before,.kslr-book::after,.ksl-card,.ksl-dlg,.kslr,.ksl-front::before,.ksl-cap-title{transition:none !important}
  .ksl-room.is-ready .ksl-item{animation:none}
}
html.ksl-lock,html.ksl-lock body{overflow:hidden}
/* Keep the scrollbar's space while locked, so the shelf does not shift under the card (the
   kept strip is painted dark like the backdrop). */
html.ksl-lock{scrollbar-gutter:stable;background:#04101a}