/* Scrolling page-preview component. Vanilla, no dependencies. Shared by /book/,
   /parts/<slug>/ and /parts/. See preview.js for behaviour. */
.ss-preview{--ss-pv-ratio:900/1349;position:relative;width:100%;max-width:340px;margin:0 auto;outline:none}
.ss-preview-frame{position:relative;width:100%;aspect-ratio:var(--ss-pv-ratio);overflow:hidden;border-radius:10px;border:1px solid #DAD9D3;background:#F1F0EA;box-shadow:0 20px 44px rgba(7,59,76,.16)}
.ss-preview-track{position:absolute;inset:0 0 auto 0;will-change:transform}
.ss-preview-track img{display:block;width:100%;height:auto;max-width:none;aspect-ratio:var(--ss-pv-ratio);object-fit:cover;background:#F1F0EA}
.ss-preview-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.ss-preview-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;border:1px solid #DAD9D3;background:#FFFFFF;color:#073B4C;font-size:16px;line-height:1;cursor:pointer;padding:0}
.ss-preview-btn:hover{background:#EAF7FB;border-color:#118AB2}
.ss-preview-btn:focus-visible{outline:2px solid #118AB2;outline-offset:2px}
.ss-preview-count{font-family:'JetBrains Mono',monospace;font-size:12px;color:#5B606B;letter-spacing:.06em;white-space:nowrap}
.ss-preview-hint{font-size:11.5px;color:#8B95A7;text-align:center;margin-top:6px}

/* Static fallback: prefers-reduced-motion, or no-JS (progressive enhancement --
   JS adds the scrolling behaviour; without it this grid is still a real preview). */
.ss-preview.is-static .ss-preview-frame{aspect-ratio:auto;overflow:visible;border:none;box-shadow:none;background:none;border-radius:0}
.ss-preview.is-static .ss-preview-track{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;transform:none!important}
.ss-preview.is-static .ss-preview-track img{aspect-ratio:var(--ss-pv-ratio);border-radius:6px;border:1px solid #DAD9D3;box-shadow:0 6px 14px rgba(7,59,76,.12)}
.ss-preview.is-static .ss-preview-controls,.ss-preview.is-static .ss-preview-hint{display:none}

@media (max-width:400px){.ss-preview{max-width:272px}}

/* Booklet-stack hero image (parts index) just needs to stay inside its box */
.ss-booklet-stack{max-width:100%;height:auto;display:block}

/* Book hero: flat cover with a CSS tilt, page edge and shadow (no generated mockup) */
.ss-book3d{perspective:1400px;width:100%;max-width:330px;padding:8px 18px 18px 0}
.ss-book3d img{display:block;width:100%;height:auto;border-radius:2px 5px 5px 2px;transform:rotateY(-16deg) rotateX(2deg);transform-origin:left center;box-shadow:inset 6px 0 10px -6px rgba(0,0,0,.35),8px 1px 0 -1px #FFFFFF,9px 2px 0 -1px #E6E3DA,12px 3px 0 -1px #FFFFFF,13px 4px 0 -1px #DAD6CB,22px 26px 40px rgba(7,59,76,.28);transition:transform .5s ease}
.ss-book3d:hover img{transform:rotateY(-6deg)}
@media (prefers-reduced-motion:reduce){.ss-book3d img{transition:none}}
@media (max-width:720px){.ss-hero-img{margin-top:52px}}