/* Wizket storybook — page-turn engine adapted from the sketchbook; all classes wk-prefixed */
/* overflow:clip (not hidden): the section is then not a scroll container, so nothing can ever nudge the book sideways */
.wk{--pg:7%;position:relative;padding:clamp(72px,11vh,130px) 0 clamp(64px,9vh,110px);background:var(--bg);color:var(--text);overflow:hidden;overflow:clip;transition:background-color .5s}
.wk *{box-sizing:border-box}
.wk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wk-kicker{margin:0 0 clamp(20px,3vh,36px);text-align:center;font:500 11px/1 Inter,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.wk-kicker i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:1px}
.wk-wrap{display:grid;justify-items:center;gap:22px;width:100%}
.wk-stage{-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;width:100%;position:relative;touch-action:pan-y;padding-inline:clamp(0px,2vw,24px)}
.wk-arrow{flex:none;padding:8px 4px;border:0;background:none;color:var(--muted);cursor:pointer;transition:color .2s;z-index:8}
.wk-arrow:hover{color:var(--text)}
.wk-3d{position:relative;flex:1 1;min-width:0;max-width:1120px;perspective:1750px;perspective-origin:50% 46%;-webkit-perspective:1750px;-webkit-perspective-origin:50% 46%;will-change:transform;transform:translateZ(0)}
/* ^ its own layer from the start: Safari re-anchors the perspective when the first 3D layer (the curl) appears, which shifted the book left on every turn */
.wk-tilt{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.wk-book{position:relative;width:100%;aspect-ratio:1760/1080;transform-style:preserve-3d}
/* the cast shadows live in the same preserve-3d context as the book: push them behind it, or iOS Safari depth-sorts them over the pages (a big black smudge) */
.wk-cast{position:absolute;pointer-events:none;left:6%;right:6%;top:20%;bottom:0;transform:translateZ(-3px);filter:blur(28px);opacity:calc(1 - var(--shade,0)*.4);background:radial-gradient(50% 50% at 50% 58%,rgba(0,0,0,.45),rgba(0,0,0,0) 74%)}
/* no lone shadow blob while the pages are still being drawn */
.wk-tilt:not(:has(.wk-full)) .wk-cast{opacity:0}
.wk-cast.c{left:10%;right:10%;top:62%;bottom:4%;filter:blur(10px);background:radial-gradient(50% 44% at 50% 42%,rgba(0,0,0,.5),rgba(0,0,0,0) 78%)}
.wk-full{position:absolute;inset:0}.wk-full img{width:100%;height:auto;display:block}
.wk-half{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;overflow-x:clip;overflow-y:visible}  /* older Safari has no clip: it keeps hidden */
.wk-half.left{left:0}.wk-half.right{left:50%}
.wk-half-img{width:200%;max-width:none;height:auto;display:block}.wk-half-img.right{margin-left:-100%}
.wkgs{position:absolute;top:var(--pg);bottom:var(--pg);width:46%;pointer-events:none;opacity:calc(var(--shade,0)*.7)}
.wkgs.left{right:0;background:linear-gradient(270deg,rgba(0,0,0,.34),transparent 82%)}
.wkgs.right{left:0;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 82%)}
/* The curl is a row of flat sibling strips, each placed in 3D by storybook.js (applyTurn). They used to be nested ten deep
   (strip inside strip); iOS Safari mis-sorts and tears deep preserve-3d chains, which showed as grey slats and seams. */
.wkc{position:absolute;top:0;height:100%;width:calc(var(--bw,0px)*var(--span));transform-style:preserve-3d;z-index:6}
.wkc.next{left:50%}.wkc.prev{right:50%}
.wks{position:absolute;top:0;height:100%;width:calc(var(--bw,0px)*var(--span)/var(--n) + 1px);transform-style:preserve-3d}
.wkc.next .wks{left:0;transform-origin:left center}.wkc.prev .wks{right:0;left:auto;transform-origin:right center}
/* only the face that points at the viewer is painted (chosen in JS), so nothing relies on backface-visibility */
.wks.bk>.wkf.front,.wks:not(.bk)>.wkf.back{visibility:hidden}
.wkf{position:absolute;top:0;bottom:0;left:0;right:-1.1px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-repeat:no-repeat;background-size:var(--bw,0px) auto}
.wkf.back{transform:rotateY(180deg)}
.wksh,.wkgl{position:absolute;left:0;right:0;top:var(--pg);bottom:var(--pg);pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* iOS Safari ignores backface-visibility on a parent for its painted children, so the shade strips carry it too */
.wkc.next .wkf.front .wksh,.wkc.prev .wkf.back .wksh{background:linear-gradient(90deg,rgba(0,0,0,var(--a1,0)),rgba(0,0,0,var(--a2,0)))}
.wkc.next .wkf.back .wksh,.wkc.prev .wkf.front .wksh{background:linear-gradient(90deg,rgba(0,0,0,var(--a2,0)),rgba(0,0,0,var(--a1,0)))}
.wkgl{background:#fff;opacity:calc(var(--shade,0)*var(--lit,1)*var(--lit,1)*.10)}
.wk-zone{position:absolute;top:0;bottom:0;border:0;background:transparent;cursor:grab;z-index:60;-webkit-tap-highlight-color:transparent}
.wk-zone:active{cursor:grabbing}.wk-prev{left:0;width:50%}.wk-next{right:0;width:50%}
.wk-cta{position:absolute;left:53.4%;top:66%;z-index:70;display:inline-flex;align-items:center;gap:12px;padding:15px 26px;border:1px solid #171A1C;border-radius:999px;color:#171A1C;background:transparent;text-decoration:none;font:600 clamp(11px,1.15vw,14px)/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:background-color .3s,border-color .3s,color .3s}
.wk-cta:hover,.wk-cta:focus-visible,.wk-cta:active{background:var(--accent);border-color:var(--accent);color:#fff}
/* no hover shift on the button itself (moving it out from under the pointer made hover toggle = flicker); only the arrow nudges */
.wk-cta span{display:inline-block;transition:transform .3s}.wk-cta:hover span{transform:translateX(4px)}
/* the book page is white paper in BOTH themes, so the button uses fixed ink colours, not theme text colours */
.wk-cap{display:grid;justify-items:center;height:1.2em}
.wk-cap p{grid-area:1/1;margin:0;font:500 12px/1.2 Inter,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.wk-idx{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.wk-idx button{border:0;background:none;padding:8px 9px;cursor:pointer;color:var(--muted);font:500 12px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;font-variant-numeric:tabular-nums;position:relative;transition:color .2s}
.wk-idx button:hover,.wk-idx button[aria-current="true"]{color:var(--text)}
.wk-idx button[aria-current="true"]:after{content:"";position:absolute;left:50%;bottom:0;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent)}
@media (max-width:640px){.wk-wrap{width:100vw}.wk-3d{max-width:none}.wk-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:70}.wk-arrow:first-child{left:0}.wk-arrow:last-child{right:0}}

/* ---- the loupe (from the sketchbook): a brass magnifier you can pick up and drag over the page ---- */
.wk-loupe{position:absolute;left:0;top:0;width:var(--lr,262px);height:var(--lr,262px);pointer-events:none;z-index:80;opacity:0;transition:opacity .25s ease;will-change:transform}
.wk-loupe.on{opacity:1}.wk-loupe.held .wkl-ring{cursor:grabbing}
.wkl-ring{position:absolute;inset:0;border-radius:50%;pointer-events:auto;cursor:grab;padding:calc(var(--lr,262px)*.058);box-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 18px rgba(0,0,0,.22),0 26px 40px rgba(0,0,0,.18),0 48px 66px rgba(0,0,0,.12)}
.wkl-ring:before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(146deg,#fdf7e9 0%,#e6d7b4 14%,#b69d70 32%,#7d6740 50%,#cdbb92 66%,#f4ead3 80%,#9b8459 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -2px 3px rgba(70,52,26,.5);-webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,transparent 0 88.2%,#000 89.8% 100%);mask-image:radial-gradient(circle closest-side at 50% 50%,transparent 0 88.2%,#000 89.8% 100%)}
.wkl-grip{position:absolute;left:50%;top:50%;width:calc(var(--lr,262px)*.74);height:calc(var(--lr,262px)*.125);transform-origin:0 50%;transform:rotate(40deg) translate(calc(var(--lr,262px)*.33),-50%);border-radius:calc(var(--lr,262px)*.06);pointer-events:auto;cursor:grab;background:linear-gradient(180deg,rgba(255,255,255,.46) 0 13%,rgba(255,255,255,0) 44%,rgba(0,0,0,.26) 100%),linear-gradient(90deg,#d9bd82 0 14%,#a9884e 14% 20%,#6d4c2b 20% 62%,#5a3d22 62% 92%,#7a563180 92% 100%);box-shadow:0 8px 15px rgba(0,0,0,.26),0 18px 26px rgba(0,0,0,.14)}
.wkl-lens{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(52,40,22,.55),inset 0 4px 12px rgba(40,30,14,.28),inset 0 -7px 16px rgba(255,250,240,.14)}
.wkl-lens:before,.wkl-lens:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
.wkl-lens:before{z-index:1;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 54%,rgba(58,44,26,.10) 76%,rgba(46,34,16,.34) 100%);box-shadow:inset 0 0 0 2px rgba(130,162,196,.26),inset 0 0 0 4px rgba(206,158,112,.15)}
.wkl-lens:after{z-index:2;background:radial-gradient(36% 26% at 29% 19%,rgba(255,255,255,.30),rgba(255,255,255,0) 76%),radial-gradient(24% 16% at 74% 86%,rgba(255,255,255,.12),rgba(255,255,255,0) 80%),linear-gradient(150deg,rgba(255,255,255,.06) 0 18%,rgba(255,255,255,0) 42%)}
.wk-zoomwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;opacity:0}
.wk-zoominner{position:absolute;inset:0;transform-origin:0 0}
.wk-tools{display:flex;gap:6px;padding:5px;border:1px solid var(--line);border-radius:999px}
.wk-tools button{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:none;padding:8px 14px;color:var(--muted);cursor:pointer;font:500 11px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:color .2s,background-color .2s}
.wk-tools button svg{width:15px;height:15px}
.wk-tools button:hover{color:var(--text)}
.wk-tools button[aria-pressed="true"]{color:var(--text);background:var(--accent-soft)}
@media (pointer:coarse){.wk-loupe,.wk-zoomwrap,.wk-tools{display:none}}

/* phones: no big blurred, per-frame-repainted shadow layers (they starve the GPU while a page turns) */
@media (pointer:coarse){.wk-cast,.wk-cast.c{filter:none}.wk-tilt{will-change:auto}}

/* phones: the end-of-book button scaled to the (small) page, and no dark shade layers left on the paper */
@media (max-width:640px){.wk-cta{gap:6px;padding:8px 13px;font-size:9px;letter-spacing:.1em}}
@supports (-webkit-touch-callout:none){.wkgs{display:none}.wk-cast.c{display:none}}