.jg-flipbook{--jg-ink:#102f3c;--jg-cream:#f2eee5;--jg-gold:#bd8d3d;position:relative;isolation:isolate;overflow:hidden;width:100%;padding:clamp(32px,5vw,72px) 20px;background:radial-gradient(circle at 72% 25%,rgba(255,255,255,.8),transparent 32%),linear-gradient(140deg,#f5f1e8,#ede6d9);color:var(--jg-ink);text-align:center;font-family:Arial,Helvetica,sans-serif}.jg-flipbook *{box-sizing:border-box}.jg-heading{position:relative;z-index:2;margin-bottom:clamp(25px,4vw,50px)}.jg-kicker{display:inline-block;color:#8b692f;text-transform:uppercase;font-size:12px;line-height:1.4;letter-spacing:.22em;font-weight:700}.jg-heading h2{margin:12px 0 4px;color:var(--jg-ink);font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,6vw,84px);line-height:1;font-weight:400}.jg-heading p{margin:0;color:rgba(16,47,60,.65);font-family:Georgia,'Times New Roman',serif;font-size:clamp(16px,1.4vw,20px)}.jg-stage{position:relative;width:min(94vw,1420px);height:min(47vw,660px);min-height:330px;margin:0 auto;display:flex;align-items:center;justify-content:center;perspective:2500px}.jg-book{--page-width:min(46vw,690px);position:relative;width:var(--page-width);aspect-ratio:3/2;padding:0;border:0;background:transparent;transform-style:preserve-3d;cursor:pointer;will-change:transform;transition:transform .6s ease-in-out,filter .35s ease}.jg-book.is-closed{transform:translateX(0);filter:drop-shadow(10px 14px 12px rgba(5,24,34,.38))}.jg-book.is-open{transform:translateX(50%);filter:none}.jg-leaf{position:absolute;inset:0;display:block;transform-origin:left center;transform-style:preserve-3d;transform:translateZ(var(--leaf-z)) rotateY(0);transition:transform .7s cubic-bezier(.4,0,.2,1);will-change:transform}.jg-leaf.is-flipped{transform:translateZ(var(--leaf-z)) rotateY(-180deg)}.jg-leaf-side{position:absolute;inset:0;display:block;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#f7f2e8}.jg-front{border-radius:0 10px 10px 0}.jg-back{transform:rotateY(180deg) translateZ(.01px);border-radius:10px 0 0 10px}.jg-leaf-side img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.jg-spine-shadow{position:absolute;left:0;top:0;bottom:0;width:12%;background:linear-gradient(to right,rgba(0,0,0,.12),transparent);pointer-events:none}.jg-spine-shadow.jg-reverse{left:auto;right:0;transform:scaleX(-1)}.jg-open,.jg-close{position:absolute;z-index:200;border:0;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;cursor:pointer}.jg-open{left:50%;top:50%;transform:translate(-50%,-42%);display:flex;align-items:center;gap:16px;padding:12px 17px;border-radius:100px;color:#f9f0dc;background:rgba(6,35,50,.93);box-shadow:0 10px 28px rgba(6,25,35,.3);font-size:12px;text-transform:uppercase;letter-spacing:.15em}.jg-open b{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#c99b45;font-size:13px}.jg-open.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}.jg-close{right:3%;top:4%;padding:8px;background:transparent;color:var(--jg-ink);font-size:12px;text-transform:uppercase;letter-spacing:.15em}.jg-close.is-visible{opacity:.55;pointer-events:auto}.jg-controls{width:min(84vw,1080px);margin:2px auto 0;display:flex;justify-content:center;align-items:center;gap:28px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.45s ease .25s}.jg-controls.is-visible{opacity:1;transform:none;pointer-events:auto}.jg-arrow{width:46px;height:46px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(16,47,60,.24);color:var(--jg-ink);background:rgba(255,255,255,.32);font-size:18px;cursor:pointer;transition:.2s}.jg-arrow:hover:not(:disabled){background:var(--jg-ink);color:#fff;transform:translateY(-2px)}.jg-arrow:disabled{opacity:.25;cursor:not-allowed}.jg-progress-wrap{display:flex;align-items:center;gap:18px;width:min(52vw,580px)}.jg-count{display:flex;align-items:baseline;gap:5px;min-width:104px;font-size:12px;color:rgba(16,47,60,.55)}.jg-count strong{font-family:Georgia,serif;font-size:18px;color:var(--jg-ink);font-weight:400}.jg-progress{--progress:0%;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer}.jg-progress::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--jg-gold) var(--progress),rgba(16,47,60,.18) var(--progress))}.jg-progress::-webkit-slider-thumb{appearance:none;width:14px;height:14px;margin-top:-6px;border-radius:50%;background:var(--jg-cream);border:3px solid var(--jg-gold);box-shadow:0 1px 4px #0003}.jg-hint{margin:17px 0 0;font-size:12px;line-height:1.5;text-transform:uppercase;letter-spacing:.14em;opacity:0;transition:.4s ease .3s}.jg-hint.is-visible{opacity:.42}@media(max-width:760px){.jg-flipbook{padding-inline:10px}.jg-stage{width:100%;height:52vw;min-height:220px}.jg-book{--page-width:46vw}.jg-open{white-space:nowrap;padding:9px 12px}.jg-close{top:-6px;right:0}.jg-controls{width:100%;gap:10px;margin-top:8px}.jg-arrow{width:40px;height:40px}.jg-progress-wrap{width:100%;gap:8px}.jg-count{min-width:78px;font-size:12px}.jg-count strong{font-size:15px}}@media(prefers-reduced-motion:reduce){.jg-flipbook *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* The board sits behind the pages and exposes a narrow, warm page block when closed. */
.jg-book::before{
  content:"";
  position:absolute;
  inset:5px -7px -7px 6px;
  border:1px solid rgba(111,78,47,.35);
  border-radius:1px 11px 11px 1px;
  background:repeating-linear-gradient(180deg,#eee7da 0 2px,#d9cfbf 2px 3px,#f7f2e7 3px 5px);
  box-shadow:3px 4px 0 rgba(79,48,24,.36),8px 10px 20px rgba(40,26,14,.22);
  transform:translateZ(-8px);
  pointer-events:none;
}

.jg-leaf:first-child{transition-duration:1.05s;transition-timing-function:cubic-bezier(.35,.02,.18,1)}
.jg-leaf:first-child .jg-front{
  border:2px solid rgba(117,68,38,.58);
  border-radius:3px 12px 12px 3px;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.28),inset 7px 0 13px rgba(82,39,15,.24),inset -3px -3px 10px rgba(82,39,15,.16),3px 3px 0 rgba(111,68,39,.48);
  transform:translateZ(2px);
}
.jg-leaf:first-child .jg-front::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0 auto 0 0;
  width:5%;
  background:linear-gradient(90deg,rgba(70,35,16,.4),rgba(255,255,255,.32) 45%,transparent);
  pointer-events:none;
}
/* A selective moving gloss across the title mimics a clear spot-UV varnish. */
.jg-leaf:first-child .jg-front::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  clip-path:polygon(40% 23%,59% 23%,65% 31%,66% 43%,62% 52%,34% 52%,32% 43%,35% 30%);
  background:linear-gradient(110deg,transparent 26%,rgba(255,255,255,.09) 37%,rgba(255,255,255,.46) 48%,rgba(255,255,255,.12) 55%,transparent 68%);
  background-size:220% 100%;
  background-position:100% 0;
  mix-blend-mode:screen;
  opacity:.84;
  transition:background-position 1s ease,opacity .4s ease;
  pointer-events:none;
}
.jg-book:hover .jg-leaf:first-child .jg-front::after{background-position:0 0;opacity:1}

/* A light printed grain follows each side as it turns. */
.jg-leaf:not(:first-child) .jg-front::after,.jg-leaf .jg-back::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  background:url("paper-grain.svg") repeat;
  background-size:240px 240px;
  mix-blend-mode:multiply;
  opacity:.11;
  pointer-events:none;
}
.jg-leaf:not(:first-child) .jg-front,.jg-leaf .jg-back{
  box-shadow:inset 0 0 1px rgba(82,55,35,.38),inset 8px 0 20px rgba(94,63,40,.08);
}
@media(prefers-reduced-motion:reduce){.jg-leaf:first-child .jg-front::after{transition-duration:.01ms}}

/* Keep the whole two-page spread inside the section and leave the cover art clear. */
.jg-stage{width:100%}
@media(min-width:761px){.jg-book{--page-width:min(43vw,650px)}}
.jg-open{top:90%}