/* bundle-shelf — built by dev/site/build-bundles.php from: library/tokens, library/shelf, library/spine */
@charset "UTF-8";
:root {
--paper: #F7F3EA;
--paper-2: #F2E9D9;
--card: #FFFFFF;
--ink: #221F20;
--ink-2: #4A4453;
--muted: #6B6474;
--line: #E5D1AB;
--line-2: #D9C49A;
--primary: #372860;
--primary-2: #2E2354;
--primary-hero: #372860;
--primary-deep: #241A42;
--primary-soft: #ECE9F3;
--gold: #CFAD67;
--gold-2: #E5D1AB;
--gold-deep: #A18750;
--gold-ink: #EBD9A8;
--gold-text: var(--dt-gold-text);
--focus: #A18750;
--wood: #5E3D26;
--wood-2: #45291A;
--wood-hi: #7C5536;
--wood-dark: #26160C;
--brass-hi: #F2DEAA;
--brass: #CFAD67;
--brass-lo: #A5864A;
--brass-dk: #6E5A32;
--danger: #8A3A33;
--ok: #2F5D4E;
--font-ui: var(--font-sub);
--font-title: var(--font-body);
--fs-md: 1rem;
--fs-lg: 1.1875rem;
--fs-xl: clamp(1.35rem, 1.1rem + .9vw, 1.7rem);
--fs-2xl: clamp(1.7rem, 1.25rem + 1.8vw, 2.35rem);
--fs-3xl: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem);
--r-xl: 12px;
--sh-1: 0 1px 2px rgba(34, 31, 32, .06), 0 2px 6px rgba(34, 31, 32, .05);
--sh-2: 0 4px 10px rgba(28, 21, 53, .07), 0 14px 32px rgba(28, 21, 53, .12);
--sh-3: 0 22px 60px rgba(20, 14, 40, .32);
}
[data-group] { --g0: #5C5446; --g1: #4E473B; --g2: #6B6253; }
[data-group="islamic"]   { --g0: #2E5A4B; --g1: #254D3F; --g2: #386856; }
[data-group="seerah"]    { --g0: #1F5A5E; --g1: #1A4C50; --g2: #296A6E; }
[data-group="history"]   { --g0: #74302F; --g1: #622726; --g2: #853B38; }
[data-group="biography"] { --g0: #6B4428; --g1: #5A3921; --g2: #7B5232; }
[data-group="language"]  { --g0: #372860; --g1: #2E2354; --g2: #45357A; }
[data-group="thought"]   { --g0: #573A5C; --g1: #48304D; --g2: #684870; }
[data-group="society"]   { --g0: #3E4652; --g1: #333A45; --g2: #4B5462; }
[data-group="science"]   { --g0: #2C566A; --g1: #24495B; --g2: #37667C; }
[data-group="reference"] { --g0: #2B2438; --g1: #221C2E; --g2: #382F48; }
[data-group="culture"]   { --g0: #8F6A2E; --g1: #7C5B25; --g2: #A07A3A; }
[data-group="general"]   { --g0: #5C5446; --g1: #4E473B; --g2: #6B6253; }
[data-group] { --bk: var(--g0); }
[data-shade="1"] { --bk: var(--g1); }
[data-shade="2"] { --bk: var(--g2); }
[data-group] { --lth: color-mix(in srgb, var(--bk) 84%, #140C06); }
[data-group="general"] { --lth: #2C4A3B; }
[data-group="general"][data-shade="1"] { --lth: #5C2426; }
[data-group="general"][data-shade="2"] { --lth: #2E2522; }
[data-group="reference"] { --lth: #231D2E; }
@supports not (color: color-mix(in srgb, red, blue)) {
[data-group] { --lth: var(--bk); }
}
.bookcase {
--row: 268px;
--board: 20px;
--k: 1;
position: relative;
padding: 0 14px 14px;
border-radius: 10px 10px 5px 5px;
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px),
repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 17px),
linear-gradient(180deg, var(--wood-hi), var(--wood) 26%, var(--wood-2));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .22),
inset 0 -2px 0 rgba(0, 0, 0, .25),
0 22px 40px -16px rgba(38, 22, 12, .6),
0 4px 10px rgba(38, 22, 12, .22);
}
.bookcase--few { width: fit-content; min-width: min(100%, 340px); max-width: 100%; margin-inline: auto; }
.bookcase__crown {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
height: 34px;
margin-inline: -14px;
border-radius: 10px 10px 0 0;
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 11px),
linear-gradient(180deg, #8C6440, var(--wood) 60%, #4E3220);
border-bottom: 3px solid var(--wood-dark);
box-shadow: 0 3px 6px rgba(0, 0, 0, .35);
}
.bookcase__plate {
max-width: calc(100% - 40px);
padding: 1px 16px;
border-radius: 3px;
background: linear-gradient(180deg, var(--brass-hi), var(--brass) 55%, var(--brass-lo));
color: var(--dt-indigo-deep);
font-family: var(--font-display);
font-weight: 700;
font-size: .9rem;
line-height: 1.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 1px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .15);
}
.bookcase__plate::before, .bookcase__plate::after {
content: "";
display: inline-block;
width: 4px;
height: 4px;
margin: 0 7px;
border-radius: 50%;
vertical-align: middle;
background: var(--brass-dk);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.shelf {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
column-gap: 2px;
row-gap: 0;
min-height: var(--row);
margin: 0;
padding: 0 12px;
list-style: none;
overflow-x: clip;
background:
repeating-linear-gradient(180deg,
transparent 0 calc(var(--row) - var(--board)),
#A0754A calc(var(--row) - var(--board)) calc(var(--row) - var(--board) + 2px),
#7E5636 calc(var(--row) - var(--board) + 2px) calc(var(--row) - var(--board) + 5px),
#664127 calc(var(--row) - var(--board) + 5px) calc(var(--row) - 5px),
#321E10 calc(var(--row) - 5px) var(--row)),
repeating-linear-gradient(180deg,
rgba(0, 0, 0, .55) 0,
rgba(0, 0, 0, 0) 36px,
rgba(0, 0, 0, 0) calc(var(--row) - var(--board) - 14px),
rgba(0, 0, 0, .32) calc(var(--row) - var(--board)),
transparent calc(var(--row) - var(--board)) var(--row)),
repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 2px, transparent 2px 26px),
linear-gradient(90deg, #2E1B0D, #402716 10%, #452B18 50%, #402716 90%, #2E1B0D);
box-shadow: inset 12px 0 14px -10px rgba(0, 0, 0, .75), inset -12px 0 14px -10px rgba(0, 0, 0, .75);
}
.shelf__slot, .shelf__bookend { display: flex; align-items: flex-end; height: var(--row); padding-bottom: var(--board); }
.shelf__slot { transform-origin: 50% 100%; }
.shelf__slot.is-away .spine { visibility: hidden; transform: none; transition: none; }
.shelf__slot.is-back .spine { animation: spine-back .5s var(--spring); }
html.js .shelf:not(.is-in) .shelf__slot { opacity: 0; animation: failsafe-show 0s 2.5s forwards; }
.shelf.is-in .shelf__slot { animation: slot-settle .75s var(--spring) backwards; animation-delay: calc(min(var(--i, 0), 24) * 26ms); }
.shelf__bookend { margin-inline-start: 4px; }
.shelf__bookend::before {
content: "";
width: 11px;
height: calc(118px * var(--k, 1));
border-radius: 7px 7px 1px 1px;
background: linear-gradient(90deg, var(--brass-dk), var(--brass) 38%, var(--brass-hi) 50%, var(--brass-lo) 70%, var(--brass-dk));
box-shadow: 2px 0 4px rgba(0, 0, 0, .45), -1px 0 0 rgba(0, 0, 0, .3);
}
.bookcase__base { height: 6px; margin: 0 -8px -14px; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #321E10, #22140A); }
.spine-tip {
position: fixed;
z-index: 60;
top: 0;
left: 0;
width: max-content;
max-width: min(280px, calc(100vw - 24px));
padding: 10px 14px 11px;
border: 1px solid var(--dt-gold-50);
border-top: 3px solid var(--tip-c, var(--dt-gold));
border-radius: var(--r);
background: var(--dt-white);
color: var(--dt-ink);
box-shadow: var(--sh-2);
pointer-events: none;
opacity: 0;
transform: translate3d(var(--x, 0), calc(var(--y, 0) + 6px), 0);
transition: opacity .16s ease, transform .2s var(--ease);
text-align: start;
}
.spine-tip.is-on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0); }
.spine-tip::after {
content: "";
position: absolute;
top: 100%;
left: var(--ax, 50%);
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
background: var(--dt-white);
border-right: 1px solid var(--dt-gold-50);
border-bottom: 1px solid var(--dt-gold-50);
transform: rotate(45deg);
}
.spine-tip.is-below::after { top: auto; bottom: 100%; margin: 0 0 -6px -6px; transform: rotate(-135deg); }
.spine-tip__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
font-family: var(--font-body);
font-weight: 700;
font-size: 1.06rem;
line-height: 1.45;
color: var(--dt-indigo);
}
.spine-tip__author { display: block; font-size: .9375rem; color: var(--dt-ink); line-height: 1.5; }
.spine-tip__meta { display: block; margin-top: 2px; font-family: var(--font-sub); font-size: .78rem; color: var(--dt-muted); line-height: 1.5; }
.spine-tip__hint { display: block; margin-top: 4px; font-family: var(--font-sub); font-size: .75rem; color: var(--dt-gold-text); }
@media (max-width: 599px) {
.bookcase { --k: .72; --row: 197px; --board: 15px; padding: 0 8px 10px; }
.bookcase__crown { margin-inline: -8px; height: 30px; }
.shelf { padding: 0 6px; column-gap: 1px; }
.bookcase__base { margin: 0 -4px -10px; }
}
@media (min-width: 600px) and (max-width: 899px) {
.bookcase { --k: .86; --row: 233px; --board: 18px; }
}
@keyframes slot-settle {
0%   { opacity: 0; transform: translate3d(-34px, -16px, 0) rotate(-7deg); }
55%  { opacity: 1; transform: translate3d(2px, 1px, 0) rotate(.8deg); }
80%  { transform: translate3d(-1px, 0, 0) rotate(-.3deg); }
100% { opacity: 1; transform: none; }
}
@keyframes spine-back {
0%   { transform: translate3d(0, -8px, 0); }
60%  { transform: translate3d(0, 1px, 0); }
100% { transform: none; }
}
.spine {
--w: 37px;
--h: 192px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: calc(var(--w) * var(--k, 1));
height: calc(var(--h) * var(--k, 1));
padding: calc(var(--h) * var(--k, 1) * .12) 0 calc(var(--h) * var(--k, 1) * .1);
color: var(--gold-ink);
text-decoration: none;
background-color: var(--bk, #5C5446);
border-radius: 3px 3px 1px 1px;
box-shadow: inset 3px 0 4px -2px rgba(255, 255, 255, .2), inset -4px 0 5px -2px rgba(0, 0, 0, .45), 0 0 0 .5px rgba(0, 0, 0, .4);
transform-origin: 50% 100%;
transition: transform .3s var(--ease);
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.spine:hover, .spine:focus { color: var(--gold-ink); }
.spine[data-size="xs"] { --h: 150px; }
.spine[data-size="s"]  { --h: 171px; }
.spine[data-size="m"]  { --h: 192px; }
.spine[data-size="l"]  { --h: 213px; }
.spine[data-size="xl"] { --h: 234px; }
.spine[data-thick="1"] { --w: 30px; }
.spine[data-thick="2"] { --w: 37px; }
.spine[data-thick="3"] { --w: 44px; }
.spine[data-thick="4"] { --w: 52px; }
.spine[data-kind="magazine"][data-thick="1"] { --w: 20px; }
.spine[data-kind="magazine"][data-thick="2"] { --w: 23px; }
.spine[data-kind="magazine"][data-thick="3"] { --w: 26px; }
.spine[data-kind="magazine"][data-thick="4"] { --w: 29px; }
.spine__title {
flex: 1 1 auto;
min-height: 0;
max-height: 100%;
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: var(--font-title);
font-weight: 700;
font-size: clamp(10px, calc(var(--w) * var(--k, 1) * .4), 17px);
line-height: 1.2;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-block: 3px;
text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
pointer-events: none;
}
.spine__plate {
flex: none;
max-width: 84%;
min-width: 62%;
margin-top: 5px;
padding: 1px 2px;
border-radius: 2px;
background: linear-gradient(180deg, var(--brass-hi), var(--brass));
color: #2A1D08;
font: 700 10px/1.35 var(--font-ui);
text-align: center;
white-space: nowrap;
overflow: hidden;
box-shadow: 0 1px 0 rgba(0, 0, 0, .35), inset 0 0 0 .5px rgba(0, 0, 0, .25);
pointer-events: none;
}
.spine__shadow {
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 16px 20px -8px rgba(0, 0, 0, .65), 0 0 0 1px rgba(235, 217, 168, .35);
opacity: 0;
transition: opacity .3s var(--ease);
pointer-events: none;
}
.spine__ribbon {
position: absolute;
top: -12px;
left: 26%;
width: 7px;
height: 20px;
background: linear-gradient(90deg, #8E2B27, #B8423A 50%, #8E2B27);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
pointer-events: none;
}
.spine[data-binding="leather"] {
background-image:
linear-gradient(90deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .06) 16%, rgba(255, 255, 255, .15) 40%, rgba(255, 255, 255, .05) 58%, rgba(0, 0, 0, .12) 80%, rgba(0, 0, 0, .42) 100%),
radial-gradient(rgba(0, 0, 0, .09) 1px, transparent 1.2px);
background-size: auto, 4px 4px;
}
.spine[data-binding="leather"]::before, .spine[data-binding="leather"]::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 7px;
border-block: 1.5px solid var(--dt-gold);
background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(0, 0, 0, .28)), var(--bk, #5C5446);
box-shadow: 0 2px 2px rgba(0, 0, 0, .35), 0 -1px 0 rgba(255, 255, 255, .1);
pointer-events: none;
}
.spine[data-binding="leather"]::before { top: calc(var(--h) * var(--k, 1) * .045); }
.spine[data-binding="leather"]::after { bottom: calc(var(--h) * var(--k, 1) * .04); }
.spine[data-binding="paper"] {
background-image:
linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(255, 255, 255, .07) 30%, rgba(0, 0, 0, .02) 70%, rgba(0, 0, 0, .22)),
repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
border-radius: 1px;
}
.spine[data-binding="paper"]::before {
content: "";
position: absolute;
top: calc(var(--h) * var(--k, 1) * .03);
left: 17%;
right: 17%;
height: calc(var(--h) * var(--k, 1) * .06);
border-radius: 1px;
background: repeating-linear-gradient(180deg, #F6EEDA 0 3px, #DECFAB 3px 4px);
box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3);
pointer-events: none;
}
.spine[data-binding="board"] {
background-image:
linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .28)),
linear-gradient(180deg, transparent 0 7%, rgba(255, 255, 255, .13) 7% 17%, transparent 17% 84%, rgba(0, 0, 0, .14) 84% 93%, transparent 93%);
border-radius: 2px;
}
.spine[data-binding="cello"] {
background-image:
linear-gradient(90deg, rgba(0, 0, 0, .26) 0%, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .45) 32%, rgba(255, 255, 255, .1) 42%, rgba(0, 0, 0, .04) 70%, rgba(0, 0, 0, .32) 100%),
linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 30%);
}
.spine[data-binding="cello"]::before {
content: "";
position: absolute;
top: calc(var(--h) * var(--k, 1) * .05);
left: 0;
right: 0;
height: 2px;
background: rgba(235, 217, 168, .75);
pointer-events: none;
}
.spine[data-kind="magazine"] { border-radius: 1px; padding-top: calc(var(--h) * var(--k, 1) * .2); }
.spine[data-kind="magazine"]::before {
content: "";
position: absolute;
top: calc(var(--h) * var(--k, 1) * .05);
left: 0;
right: 0;
height: calc(var(--h) * var(--k, 1) * .1);
border: 0;
border-radius: 0;
background: #EBD9A8;
background: color-mix(in srgb, var(--bk, #5C5446) 30%, #F2E6C4);
box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.spine[data-kind="magazine"]::after { content: none; }
.spine[data-kind="magazine"] .spine__title { font-size: clamp(10px, calc(var(--w) * var(--k, 1) * .5), 13px); }
.spine[data-kind="magazine"] .spine__plate { writing-mode: vertical-rl; min-width: 0; max-width: none; max-height: 34%; padding: 3px 1px; font-size: 9.5px; text-overflow: clip; }
@media (hover: hover) {
.spine:hover { transform: translate3d(0, -12px, 0); }
.spine:hover .spine__shadow { opacity: 1; }
}
.spine:focus-visible { transform: translate3d(0, -12px, 0); outline: 3px solid var(--dt-gold); outline-offset: 3px; border-radius: 3px; }
.spine:focus-visible .spine__shadow { opacity: 1; }
.spine:active { transform: translate3d(0, -9px, 0); }
.spine.is-current {
transform: translate3d(0, -8px, 0);
box-shadow: inset 3px 0 4px -2px rgba(255, 255, 255, .2), inset -4px 0 5px -2px rgba(0, 0, 0, .45), 0 0 0 2px var(--dt-gold), 0 0 16px 2px rgba(207, 173, 103, .55);
}
.spine.lean-r { transform-origin: 100% 100%; transform: rotate(2.4deg); transition: transform .45s var(--spring); }
.spine.lean-l { transform-origin: 0 100%; transform: rotate(-2.4deg); transition: transform .45s var(--spring); }
@media (max-width: 599px) { .spine__plate { font-size: 9px; } }