/* The Library: a three-tier walnut case. Top tier holds the printed collection spine,
   one stack of four series covers and the author pass. The two lower tiers stay empty. */
.library{max-width:1180px}
.case{
 --bw:clamp(100px,14vw,156px);
 --bh:calc(var(--bw)*1.4189);
 --sw:calc(var(--bw)*.1236);
 --sh:calc(var(--bh)*1.117);
 --board:calc(var(--bw)*.17);
 --floor:calc(var(--bw)*.26);
 --step:calc(var(--bw)*.34);
 --pw:calc(var(--bw)*.72);
 --accent:var(--cobalt);
 position:relative;isolation:isolate;
 padding:calc(var(--bw)*.11) calc(var(--bw)*.12) calc(var(--bw)*.14);
 border-radius:3px;
 background:linear-gradient(rgba(34,16,6,.22),rgba(34,16,6,.22)),url('assets/walnut-cabinet.webp') 8% 100%/260% auto #3b2314;
 box-shadow:0 34px 52px -22px rgba(40,22,10,.55),0 3px 6px rgba(36,22,12,.3),inset 0 2px 0 rgba(255,222,176,.22),inset 0 0 0 1px rgba(0,0,0,.35);
}
.tier{
 --th:calc(var(--bh) + var(--board) + var(--floor)*.58 + 22px);
 position:relative;overflow:hidden;isolation:isolate;height:var(--th);
 background:
  linear-gradient(180deg,rgba(8,4,1,.7),rgba(8,4,1,.12) 26%,rgba(8,4,1,0) 55%),
  linear-gradient(90deg,rgba(8,4,1,.62),rgba(8,4,1,0) 8%,rgba(8,4,1,0) 92%,rgba(8,4,1,.62)),
  url('assets/walnut-cabinet.webp') var(--bx,50%) var(--by,calc(var(--th)*-.2))/auto calc(var(--th)*2.85) #2d1a0e;
}
.tier-top{--th:calc(var(--sh) + var(--board) + var(--floor)*.58 + 40px);--bx:32%}
.tier-two{--bx:68%;--by:calc(var(--th)*-1.48)}
.tier-three{--bx:46%;--by:calc(var(--th)*-1.52)}
.tier+.tier{margin-top:0}

/* Plank: a lit top surface in perspective, then the front edge, using the cabinet's own grain. */
.floor{position:absolute;left:0;right:0;bottom:var(--board);height:var(--floor);z-index:1;
 background:
  linear-gradient(180deg,rgba(6,3,1,.55) 0,rgba(6,3,1,.12) 38%,rgba(255,214,160,.1) 100%),
  url('assets/walnut-cabinet.webp') 50% 93%/118% auto #5a3a22;
 box-shadow:inset 0 1px 0 rgba(0,0,0,.5)}
.board{position:absolute;left:0;right:0;bottom:0;height:var(--board);z-index:3;display:flex;align-items:center;justify-content:center;
 background:linear-gradient(180deg,rgba(255,226,186,.22),rgba(255,226,186,0) 22%,rgba(0,0,0,0) 60%,rgba(0,0,0,.4)),url('assets/walnut-cabinet.webp') 50% 48.7%/100% auto #7a5233;
 box-shadow:0 -1px 0 rgba(255,222,176,.4),0 9px 14px rgba(0,0,0,.5)}
.board span{font-size:clamp(6.5px,.62vw,8.5px);letter-spacing:.24em;color:rgba(30,15,6,.62);text-shadow:0 1px 0 rgba(255,224,184,.24);white-space:nowrap;overflow:hidden;max-width:96%}

/* Objects stand on the floor plane, a little behind the plank's front edge. */
.tier-items{position:absolute;left:0;right:0;z-index:2;height:0;bottom:calc(var(--board) + var(--floor)*.42)}

/* The complete printed collection: 15.84 x 23.46 cm, 1.83 cm spine, true to the A5 booklets' scale. */
.collection-spine{position:absolute;bottom:0;padding:0;border:0;border-radius:1px 2px 1px 1px;cursor:pointer;
 background:url('assets/christian-couple-wrap.webp') 50.2% 0/auto 100% #0b2f66;
 box-shadow:inset 2px 0 1px rgba(255,255,255,.2),inset -3px 0 3px rgba(0,0,0,.45),4px 1px 6px rgba(0,0,0,.55)}
.collection-spine:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(255,255,255,.05) 22%,rgba(0,0,0,0) 60%,rgba(0,0,0,.28))}
.collection-spine:after,.stack:after{content:"";position:absolute;left:-6%;right:-80%;bottom:-6px;height:11px;background:rgba(6,3,1,.68);filter:blur(5px);z-index:-1;pointer-events:none}
.collection-spine:hover,.collection-spine:focus-visible{filter:brightness(1.16)}

/* A collection stands as one stack: the lead in front, the others behind on one shared scale.
   shelf-layout.js sets each stack's left, width and height and each book's left, bottom, width and height inline. Depth 0 is in front. */
.stack{position:absolute;bottom:0;padding:0;border:0;background:none;cursor:pointer;overflow:visible}
.rep{position:absolute;display:block;border-radius:1px 2px 2px 1px;
 z-index:calc(10 - var(--d));background:var(--edge);
 transform:perspective(1200px) rotateY(-4deg) scale(calc(1 - var(--d)*.025));transform-origin:left bottom;
 filter:brightness(calc(1 - var(--d)*.11));transition:transform .45s,filter .3s;
 box-shadow:5px 2px 9px rgba(0,0,0,.5),1px 0 0 rgba(0,0,0,.4)}
.rep:before{content:"";position:absolute;right:100%;top:1px;bottom:0;width:calc(var(--bw)*.03);background:linear-gradient(90deg,rgba(0,0,0,.55),var(--edge));border-radius:1px 0 0 1px}
.rep-cover{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden}
.rep-cover img{display:block;width:100%;height:100%}
.rep-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(255,255,255,.06) 6%,rgba(255,255,255,0) 22%,rgba(0,0,0,0) 80%,rgba(0,0,0,.2))}
.rep.lead:after{content:"";position:absolute;left:100%;top:2px;bottom:0;width:calc(var(--bw)*.02);background:repeating-linear-gradient(180deg,#e2dccb 0 1px,#b9b19b 1px 2px)}
.stack:after{left:2%;right:0;bottom:-5px}
.stack:hover .rep,.stack:focus-visible .rep{filter:brightness(calc(1.1 - var(--d)*.09))}
.stack:focus-visible{outline:2px solid #aab6ff;outline-offset:6px;z-index:20}
.rep-placeholder .rep-cover{background:#8b7b6b;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:calc(var(--bw)*.13) calc(var(--bw)*.1);color:#f0e8dc;font-family:Georgia,serif}
.rep-placeholder .rep-cover:before{content:"";position:absolute;inset:calc(var(--bw)*.06);border:1px dashed rgba(240,232,220,.55);pointer-events:none}
.rep-placeholder small{font:600 calc(var(--bw)*.05)/1.5 'DM Sans',Arial,sans-serif;letter-spacing:.18em}
.rep-placeholder b{font-weight:400;font-size:calc(var(--bw)*.17);line-height:1.1}
.rep-placeholder i{font:italic calc(var(--bw)*.075)/1.4 Georgia,serif}

/* Author pass: hangs from the case's top rail, true to a name badge's size beside a book. */
.pass{position:absolute;top:0;right:calc(var(--bw)*.34);width:var(--pw);padding:0;border:0;background:none;z-index:6;cursor:pointer;transform-origin:50% 0}
.pass.swing{animation:sway 6s ease-in-out 1}
.pass-strap{display:block;width:calc(var(--pw)*.17);height:calc(var(--bh)*.36);margin:0 auto;background:repeating-linear-gradient(90deg,#0d0d0d 0 2px,#262626 2px 4px);box-shadow:2px 0 3px rgba(0,0,0,.5)}
.pass-clip{display:block;width:calc(var(--pw)*.1);height:calc(var(--pw)*.17);margin:-1px auto 0;border:2px solid var(--gold-library);border-radius:3px;background:linear-gradient(90deg,#8a7440,#dcc68f,#8a7440)}
.pass-card{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:-3px;padding:calc(var(--pw)*.12) calc(var(--pw)*.08) calc(var(--pw)*.08);border-radius:4px;background:linear-gradient(120deg,#fbfaf6,#e7e5de);color:#111;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),4px 10px 12px rgba(0,0,0,.5);text-align:center}
.pass-slot{position:absolute;top:calc(var(--pw)*.045);left:50%;width:22%;height:3px;margin-left:-11%;border-radius:2px;background:#9a988f;box-shadow:inset 0 1px 1px rgba(0,0,0,.4)}
.pass-photo{display:block;width:100%;aspect-ratio:7/8;overflow:hidden;background:#222}
.pass-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:grayscale(1) contrast(1.05)}
.pass-card strong{margin-top:calc(var(--pw)*.07);font:700 clamp(8.5px,calc(var(--pw)*.125),14px)/1.1 'DM Sans',Arial,sans-serif;letter-spacing:.02em}
.pass-card small{margin-top:3px;font-size:clamp(5.5px,calc(var(--pw)*.062),8px);letter-spacing:.14em;color:#555}
.pass-cta{margin-top:calc(var(--pw)*.07);padding:calc(var(--pw)*.04) calc(var(--pw)*.08);font-size:clamp(6.5px,calc(var(--pw)*.08),10px);letter-spacing:.06em;background:var(--cobalt);color:#fff;border-radius:2px;white-space:nowrap}
.pass:hover .pass-cta,.pass:focus-visible .pass-cta{background:var(--cobalt-hover)}
.pass:focus-visible{outline:2px solid #aab6ff;outline-offset:4px}
@keyframes sway{0%{transform:rotate(0)}18%{transform:rotate(-1.9deg)}42%{transform:rotate(1.6deg)}64%{transform:rotate(-.9deg)}84%{transform:rotate(.35deg)}100%{transform:rotate(0)}}

.shelf-heading{font-size:10px}
.shelf-caption{gap:20px;font-size:11px;letter-spacing:.02em;color:#66655d}

/* Series dialog. */
#group{width:min(820px,94vw);border-radius:4px;padding:38px 34px 30px}
#group h2{font:clamp(26px,4vw,38px)/1.1 Georgia,serif;margin:12px 44px 8px 0;font-weight:400}
.group-note{font-size:13px;line-height:1.7;color:#626354;margin:0 0 22px;max-width:560px}
.group-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.group-item{display:flex;flex-direction:column;gap:10px;width:100%;padding:0;border:0;background:none;text-align:left;color:var(--ink)}
.group-item .thumb{display:block;aspect-ratio:148/210;background:var(--cover) center/100% 100% no-repeat #ddd;box-shadow:3px 4px 8px rgba(23,54,81,.28),0 0 0 1px rgba(23,54,81,.12);transition:transform .25s,box-shadow .25s}
.group-item:hover .thumb,.group-item:focus-visible .thumb{transform:translateY(-4px);box-shadow:3px 9px 14px rgba(23,54,81,.3),0 0 0 1px rgba(23,54,81,.12)}
.group-item .num{font-size:10px;letter-spacing:.2em;color:#111;font-weight:700}
.group-item .name{font:14px/1.3 Georgia,serif}
.group-item .go{font-size:11px;letter-spacing:.08em;color:#111;border-bottom:2px solid var(--cobalt);align-self:flex-start;padding-bottom:2px}
.group-item[aria-disabled=true]{cursor:default}
.group-item[aria-disabled=true] .thumb{background:repeating-linear-gradient(135deg,#e9e3d8 0 8px,#f2ede3 8px 16px);border:1px dashed #a39a89;box-shadow:none;display:grid;place-items:center;color:#8a8170;font:11px 'DM Sans',Arial}
.group-item[aria-disabled=true]:hover .thumb{transform:none}
.group-item[aria-disabled=true] .name,.group-item[aria-disabled=true] .num{color:#8a8170}
.group-item[aria-disabled=true] .go{display:none}

@media(max-width:700px){
 .case{--bw:100px;--step:calc(var(--bw)*.3);--pw:calc(var(--bw)*.84);padding:12px 11px 14px}
 .pass{right:calc(var(--bw)*.1)}
 .board span{letter-spacing:.16em;font-size:5.5px}
 .shelf-caption{flex-direction:column;gap:6px}
 .shelf-caption span:last-child{max-width:none;text-align:left}
 #group{padding:34px 18px 22px;width:96vw}
 .group-list{grid-template-columns:1fr;gap:10px}
 .group-item{flex-direction:row;align-items:center;gap:14px}
 .group-item .thumb{width:54px;flex:none}
 .group-item .text{display:flex;flex-direction:column;gap:4px;flex:1}
 .group-item .go{align-self:flex-start}
}
@media(min-width:701px){.group-item .text{display:flex;flex-direction:column;gap:6px}}
@media(prefers-reduced-motion:reduce){.pass{animation:none}.rep{transition:none}.group-item .thumb{transition:none}}

.hide-sm{font-weight:400}
@media(max-width:700px){.hide-sm{display:none}}