.book-mockup {
    --book-height: 280px;
    --book-depth: calc(var(--book-height) * var(--book-depth-unit, 20) / 300);
    --book-binding: var(--green);
    --book-angle: -24deg;
    position: relative;
    height: var(--book-height);
    width: calc(var(--book-height) * var(--book-ratio, .6984));
    perspective: 1100px;
    flex: 0 0 auto;
}
/* Bounded depth classes keep the component compatible with the strict CSP. */
.book-mockup--depth-8 { --book-depth-unit: 8; }
.book-mockup--depth-9 { --book-depth-unit: 9; }
.book-mockup--depth-10 { --book-depth-unit: 10; }
.book-mockup--depth-11 { --book-depth-unit: 11; }
.book-mockup--depth-12 { --book-depth-unit: 12; }
.book-mockup--depth-13 { --book-depth-unit: 13; }
.book-mockup--depth-14 { --book-depth-unit: 14; }
.book-mockup--depth-15 { --book-depth-unit: 15; }
.book-mockup--depth-16 { --book-depth-unit: 16; }
.book-mockup--depth-17 { --book-depth-unit: 17; }
.book-mockup--depth-18 { --book-depth-unit: 18; }
.book-mockup--depth-19 { --book-depth-unit: 19; }
.book-mockup--depth-20 { --book-depth-unit: 20; }
.book-mockup--depth-21 { --book-depth-unit: 21; }
.book-mockup--depth-22 { --book-depth-unit: 22; }
.book-mockup--depth-23 { --book-depth-unit: 23; }
.book-mockup--depth-24 { --book-depth-unit: 24; }
.book-mockup--depth-25 { --book-depth-unit: 25; }
.book-mockup--depth-26 { --book-depth-unit: 26; }
.book-mockup--depth-27 { --book-depth-unit: 27; }
.book-mockup--depth-28 { --book-depth-unit: 28; }
.book-mockup--depth-29 { --book-depth-unit: 29; }
.book-mockup--depth-30 { --book-depth-unit: 30; }
.book-mockup--depth-31 { --book-depth-unit: 31; }
.book-mockup--depth-32 { --book-depth-unit: 32; }
.book-mockup--depth-33 { --book-depth-unit: 33; }
.book-mockup--depth-34 { --book-depth-unit: 34; }
.book-mockup--depth-35 { --book-depth-unit: 35; }
.book-mockup--depth-36 { --book-depth-unit: 36; }
.book-mockup--depth-37 { --book-depth-unit: 37; }
.book-mockup--depth-38 { --book-depth-unit: 38; }
.book-mockup--depth-39 { --book-depth-unit: 39; }
.book-mockup--depth-40 { --book-depth-unit: 40; }
.book-mockup--depth-41 { --book-depth-unit: 41; }
.book-mockup--depth-42 { --book-depth-unit: 42; }
.book-mockup--depth-43 { --book-depth-unit: 43; }
.book-mockup--depth-44 { --book-depth-unit: 44; }
.book-mockup--sage { --book-binding: color-mix(in srgb, var(--green) 55%, var(--sage)); }
.book-mockup--plum { --book-binding: var(--ink); }
.book-mockup-object { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(var(--book-angle)); }
.book-mockup-front { position: absolute; inset: 0; transform: translateZ(calc(var(--book-depth) / 2)); border-radius: 1px 3px 3px 1px; box-shadow: 4px 8px 12px var(--shadow); backface-visibility: hidden; overflow: hidden; }
/* Printed artwork continues across the rounded binding and its recessed hinge. */
.book-mockup-front::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset-block: 0;
    left: 0;
    width: clamp(6px, calc(var(--book-height) * .05), 16px);
    pointer-events: none;
    background: linear-gradient(to right,
        rgb(255 255 255 / 28%) 0%,
        rgb(0 0 0 / 18%) 12%,
        rgb(0 0 0 / 5%) 28%,
        rgb(255 255 255 / 14%) 46%,
        rgb(0 0 0 / 8%) 66%,
        rgb(0 0 0 / 30%) 77%,
        rgb(255 255 255 / 48%) 85%,
        rgb(255 255 255 / 10%) 92%,
        transparent 100%);
}
.book-mockup-front::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), inset 0 -1px 0 rgb(0 0 0 / 10%);
    pointer-events: none;
}
.book-mockup-front > img, .book-mockup-front > .book-cover { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; box-shadow: none; }
.book-mockup-back { position: absolute; inset: 0; background: var(--book-binding); border-radius: 1px 3px 3px 1px; transform: translateZ(calc(var(--book-depth) / -2)); }
.book-mockup-spine { position: absolute; inset-block: 0; left: 0; width: var(--book-depth); transform: translateX(-50%) rotateY(-90deg); background: var(--book-binding); border-inline: 1px solid var(--shadow-strong); }
.book-mockup-pages { position: absolute; top: 3px; bottom: 3px; left: 100%; width: max(1px, calc(var(--book-depth) - 2px)); transform: translateX(-50%) rotateY(90deg); background: repeating-linear-gradient(to right, var(--spine-light) 0 2px, var(--line) 2px 3px); border-inline: 1px solid var(--shadow-strong); }
.book-mockup-front > .book-cover--text { display: flex; background: var(--book-binding); color: var(--spine-light); }
.book-mockup-front > .book-cover--text small { color: inherit; }
@media (prefers-reduced-motion: no-preference) {
    .book-mockup-object { transition: transform .25s ease; }
    a:focus-visible .book-mockup-object { transform: translateY(-6px) rotateY(-32deg); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .book-mockup:hover .book-mockup-object { transform: translateY(-6px) rotateY(-32deg); }
}