.bound-work{--binding-ink:var(--cin-bone,var(--bone));--binding-ground:var(--cin-surface,var(--raised));--binding-quiet:var(--cin-dim,var(--dim));--binding-accent:var(--cin-gold,var(--gold));display:flex;flex-direction:column;width:150px;max-width:100%;color:var(--binding-ink);text-align:left;gap:14px}.bound-work-stage{height:208px;display:flex;align-items:flex-end;justify-content:center;perspective:800px;position:relative}.bound-work-stage:after{content:"";position:absolute;bottom:-5px;left:-15px;right:-15px;height:7px;border-top:1px solid color-mix(in srgb,var(--binding-ink) 28%,transparent);background:linear-gradient(var(--binding-ground),color-mix(in srgb,var(--binding-ink) 16%,var(--binding-ground)));box-shadow:0 5px 7px #0002;z-index:-1}.bound-work-object{width:136px;height:198px;position:relative;transform:rotateY(-14deg);transform-style:preserve-3d;transition:transform .18s ease}.bound-work-cover{display:block;position:absolute;inset:0 7px 0 0;overflow:hidden;border:1px solid color-mix(in srgb,var(--binding-tint) 65%,var(--binding-ink));border-radius:2px 5px 5px 2px;background:linear-gradient(110deg,color-mix(in srgb,var(--binding-tint) 38%,var(--binding-ground)),color-mix(in srgb,var(--binding-tint) 18%,var(--binding-ground)));box-shadow:2px 6px 7px #0003,inset 1px 0 0 #fff3}.bound-work-typography{position:absolute;inset:16px 13px 12px 18px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;text-align:center;border-block:1px solid color-mix(in srgb,var(--binding-ink) 28%,transparent);padding-block:12px;font:500 18px/1.18 var(--cin-display,Crimson,Georgia,serif);overflow:hidden;overflow-wrap:anywhere}.bound-work-typography>span{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.bound-work-typography small{font:10px/1.2 var(--cin-body,Instrument,system-ui,sans-serif)}.bound-work-art{position:absolute!important;inset:0;display:block;width:100%;height:100%}.bound-work-art[data-image-state=failed]{display:none}.bound-work-seam{position:absolute;inset:0 auto 0 0;width:12px;background:linear-gradient(90deg,#0004,#fff2 45%,#0003 65%,transparent);pointer-events:none}.bound-work-pages{position:absolute;inset:4px 0 4px auto;width:12px;border:1px solid #a99b83;border-radius:0 4px 4px 0;background:repeating-linear-gradient(0deg,#d9d0be 0 1px,#f2ead8 1px 3px);box-shadow:3px 5px 7px #0002;transform:skewY(5deg)}.bound-work-spine{display:none;position:absolute;inset:0;width:52px;background:linear-gradient(90deg,color-mix(in srgb,var(--binding-tint) 22%,var(--binding-ground)),color-mix(in srgb,var(--binding-tint) 46%,var(--binding-ground)) 24%,color-mix(in srgb,var(--binding-tint) 20%,var(--binding-ground)));border:1px solid color-mix(in srgb,var(--binding-ink) 25%,var(--binding-tint));border-radius:3px 5px 2px 2px;box-shadow:4px 4px 6px #0003,inset 4px 0 3px #0002;flex-direction:column;align-items:center;justify-content:space-between;padding:16px 8px;gap:14px}.bound-work-spine>span{writing-mode:vertical-rl;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:17px/1.1 var(--cin-display,Crimson,Georgia,serif);flex:1;min-height:0}.bound-work-spine:before{content:"";position:absolute;inset:12px 5px auto;height:3px;border-block:1px solid #fff2;pointer-events:none}.bound-work-caption{display:flex;flex-direction:column;gap:5px;min-width:0;font-family:var(--cin-body,Instrument,system-ui,sans-serif)}.bound-work-caption strong{font-size:15px;font-weight:500;line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bound-work-caption small{font-size:12px;color:var(--binding-quiet);overflow-wrap:anywhere}.bound-work-open{font-size:12px;color:var(--binding-accent);margin-top:3px}@media(min-width:800px){.bound-work-row>:not(:first-child) .bound-work-object{width:52px;transform:rotateY(-6deg)}.bound-work-row>:not(:first-child) .bound-work-cover,.bound-work-row>:not(:first-child) .bound-work-pages{display:none}.bound-work-row>:not(:first-child) .bound-work-spine{display:flex}}@media(hover:hover) and (prefers-reduced-motion:no-preference){a:hover>.bound-work .bound-work-object,button:hover>.bound-work .bound-work-object{transform:rotateY(-8deg) translateY(-4px)}}a:focus-visible>.bound-work .bound-work-object,button:focus-visible>.bound-work .bound-work-object{outline:2px solid var(--binding-accent);outline-offset:5px}@media(max-width:480px){.bound-work{width:132px}.bound-work-stage{height:190px}.bound-work-object{width:120px;height:180px}.bound-work-typography{font-size:16px}}@media(prefers-reduced-motion:reduce){.bound-work-object{transition:none}}