/* Wspólna oprawa grzbietów: kreator i publiczna biblioteka. */
/* Introligatorskie oprawy: ręcznie tłoczona skóra, mosiądz i pergaminowe etykiety. */
.book-spine{
  --book-height:245px;--book-width:98px;--tilt:0deg;
  --cover-dark:#200e0e;--cover-base:#61251f;--cover-glow:#9a4c3b;
  --gilt:#c8a06a;--gilt-bright:#f3d59b;--gilt-shadow:#694825;
  --leather-shadow:#100a08;
  position:relative;isolation:isolate;
  width:var(--book-width);height:var(--book-height);
  flex:none;display:block;overflow:hidden;
  padding:0;margin:0;
  border:1px solid #9e794a;border-left:7px solid #1b0f0c;
  border-right:3px solid #2a120d;border-radius:7px 7px 3px 3px;
  background:
    radial-gradient(ellipse at 37% 5%,#ffffff20,transparent 27%),
    linear-gradient(90deg,#120909 0%,var(--cover-dark) 9%,var(--cover-glow) 32%,var(--cover-base) 53%,var(--cover-dark) 98%);
  color:#f2dbab;
  box-shadow:
    inset 2px 0 0 #c09a6573,inset 9px 0 8px #05030295,
    inset -4px 0 8px #000b,inset 0 0 0 1px #f6d99b29,
    2px 2px 0 #d6b37933,5px 5px 6px #07040396,9px 15px 18px #0009;
  transform:rotate(var(--tilt)) translateZ(0);
  transform-origin:50% 100%;
  transition:transform .3s cubic-bezier(.19,.8,.2,1),filter .25s,box-shadow .3s;
  will-change:transform;
}
.book-spine::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    repeating-linear-gradient(177deg,#f4dcb207 0 1px,transparent 2px 7px,#13080714 9px 11px),
    radial-gradient(circle at 80% 77%,#fff4db08 0 2px,transparent 3px),
    repeating-linear-gradient(91deg,transparent 0 8px,#1108050b 9px 11px);
  mix-blend-mode:screen;opacity:.72;
}
.book-spine::after{
  content:"";position:absolute;inset:5px 3px;pointer-events:none;z-index:1;
  border:1px solid #debc8088;outline:1px solid #09060570;outline-offset:1px;
  border-radius:3px 3px 1px 1px;
  box-shadow:inset 0 0 0 2px #23130973;
}
.book-spine[data-cover="forest"]{
  --cover-dark:#111e17;--cover-base:#304d38;--cover-glow:#62795a;
  --gilt:#c9b17c;--gilt-bright:#f6e3b9;
}
.book-spine[data-cover="midnight"]{
  --cover-dark:#111a28;--cover-base:#2d3f56;--cover-glow:#637993;
  --gilt:#c0ac82;--gilt-bright:#ebdbb1;
}
.book-spine[data-cover="chestnut"]{
  --cover-dark:#281407;--cover-base:#724322;--cover-glow:#b17a47;
  --gilt:#dbb477;--gilt-bright:#fae0a8;
}
.book-spine[data-finish="ironbound"]{--gilt:#b9b0a4;--gilt-bright:#eee3cc;--gilt-shadow:#5e5952}
.book-spine[data-finish="monastic"]{--gilt:#c3ad85;--gilt-bright:#ead6a9;--gilt-shadow:#726041}
.book-spine[data-finish="merchant"]{--gilt:#d5a56a;--gilt-bright:#f5d59d;--gilt-shadow:#674621}
.book-spine:hover,.book-spine:focus-visible{
  transform:translateY(-31px) rotate(0deg) scale(1.055);
  z-index:5;filter:brightness(1.13) saturate(1.09);
  box-shadow:inset 9px 0 8px #050302a9,inset -4px 0 8px #000b,
  2px 2px 0 #cfab70a0,12px 20px 27px #000e,0 0 22px #dfae4d32;
}
.book-spine.is-selected{opacity:.19;transform:translateY(-20px) rotate(0)}
.book-spine__edge{
  position:absolute;inset:0 auto 0 0;width:10px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,#100704e6,#d6b37575 35%,#1a0c0966 75%,transparent);
  box-shadow:5px 0 7px #0006;
}
.book-spine__grain{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 58% 24%,#f9eac014,transparent 34%),
    repeating-linear-gradient(23deg,transparent 0 3px,#26140b16 4px 5px,transparent 6px 11px),
    radial-gradient(circle at 21% 68%,#11080832,transparent 36%);
}
.book-spine__frame{
  position:absolute;inset:10px 8px;z-index:1;pointer-events:none;
  border:2px double var(--gilt);
  border-radius:2px;
  box-shadow:inset 0 0 0 2px #1c0b0b8c,0 0 0 2px #2b170e60;
  opacity:.9;
}
.book-spine__ridges{position:absolute;inset:0;z-index:4;pointer-events:none}
.book-spine__ridge{
  position:absolute;left:0;right:0;height:9px;
  border-top:1px solid var(--gilt-bright);
  border-bottom:2px solid #100905d9;
  background:linear-gradient(180deg,#e3c18d55 0%,#61401b93 29%,#180e0a9c 68%,#090503bd);
  box-shadow:0 3px 3px #0008,0 -1px 2px #f5d79642;
  opacity:.9;
}
.book-spine__ridge:nth-child(1){top:18px}
.book-spine__ridge:nth-child(2){top:44px}
.book-spine__ridge:nth-child(3){bottom:47px}
.book-spine__ridge:nth-child(4){bottom:19px}
.book-spine__clasps{position:absolute;inset:0;z-index:5;pointer-events:none}
.book-spine__clasp{
  position:absolute;left:1px;right:1px;height:20px;
  background:
    radial-gradient(circle at 15% 50%,#fff0bf 0 1px,#63472b 2px,transparent 3px),
    radial-gradient(circle at 86% 50%,#fff0bf 0 1px,#63472b 2px,transparent 3px),
    linear-gradient(180deg,var(--gilt-bright),var(--gilt) 19%,#6c4c2e 59%,#21140b 85%,var(--gilt));
  box-shadow:inset 0 0 0 2px #51371d7a,0 3px 6px #070403a8;
  border:1px solid #594125;
}
.book-spine__clasp:nth-child(1){top:8px}
.book-spine__clasp:nth-child(2){bottom:8px}
.book-spine__finial{
  position:absolute;left:50%;transform:translateX(-50%);
  width:19px;height:19px;display:grid;place-items:center;z-index:6;
  color:var(--gilt-bright);font-size:17px;line-height:1;
  text-shadow:0 1px #150d07,0 0 5px #000a;
  pointer-events:none;
}
.book-spine__finial::before{content:"✤"}
.book-spine__finial--top{top:8px}
.book-spine__finial--bottom{bottom:8px;transform:translateX(-50%) rotate(180deg)}
.book-spine__cartouche{
  position:absolute;inset:27px 10px 29px;display:flex;flex-direction:column;
  align-items:center;gap:1px;z-index:3;min-height:0;
  background:linear-gradient(90deg,#140e0bba,#4b3021aa 27%,#24190eae 74%,#140c0abb);
  border:1px solid var(--gilt);
  outline:1px solid #170b089c;outline-offset:2px;
  box-shadow:inset 0 0 0 2px #2a140ad9,inset 0 0 0 3px #d4ae716d,0 2px 6px #080402c2;
  color:#ecd9b2;padding:2px 5px 1px;
  pointer-events:none;
}
.book-spine__cartouche::before{
  content:"";position:absolute;inset:5px 3px;opacity:.45;
  border:1px solid var(--gilt);pointer-events:none;
}
.book-spine__rosette{position:absolute;top:5px;left:7px;font:15px/1 'Cinzel',Georgia,serif;color:var(--gilt-bright);z-index:1;text-shadow:0 2px #090604}
.book-spine__monogram{
  position:absolute;right:5px;top:3px;z-index:1;display:grid;place-items:center;flex:none;
  height:21px;width:21px;border-radius:50%;
  color:#332114;font:700 12px/1 'Cinzel',serif;
  background:radial-gradient(circle at 33% 23%,#fff2cb,var(--gilt) 53%,var(--gilt-shadow) 92%);
  border:1px solid #321a0b;
  box-shadow:inset 0 0 0 2px #d6b57a5c,0 1px 2px #0009;
  margin-top:0;
}
.book-spine__label{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:3px;position:absolute;z-index:1;top:28px;bottom:21px;left:3px;right:3px;
  min-height:0;max-height:none;width:auto;
  padding:2px 0 1px;overflow:hidden;
}
.book-spine__title,.book-spine__subtitle{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-height:100%;min-height:0;min-width:0;
  line-height:1.1;text-shadow:0 1px 2px #000,1px 1px #160c09;
}
.book-spine__title{
  color:#f6e2b7;
  font:600 11.5px/1.12 'Cinzel',Georgia,serif;
  letter-spacing:.018em;
  flex:0 1 auto;
}
.book-spine__subtitle{
  color:#d9bc8b;
  font:500 10px/1 'EB Garamond',Georgia,serif;
  letter-spacing:.01em;
  flex:0 1 auto;
}
.book-spine__divider{
  writing-mode:vertical-rl;
  font:12px/1 Georgia,serif;
  color:var(--gilt-bright);opacity:.88;
  flex:none;text-shadow:0 0 3px #000;
}
 .book-spine__year{
  position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  color:#edcf91;
  z-index:1;
  background:linear-gradient(90deg,#150c09c9,#593d20 50%,#180d09c9);
  border:1px solid var(--gilt);
  box-shadow:inset 0 0 0 1px #2b170a;
  padding:1px 4px;
  font:9px/1.4 'Cinzel',serif;
  letter-spacing:.025em;
  margin-top:auto;margin-bottom:2px;
  white-space:nowrap;
}
.book-spine[data-finish="ironbound"] .book-spine__cartouche{
  border-radius:7px 7px 1px 1px;
  background:linear-gradient(90deg,#141414cf,#414039c9,#171a17cf);
}
.book-spine[data-finish="monastic"] .book-spine__cartouche{
  background:linear-gradient(90deg,#2c2418ec,#68563bbc,#272014e8);
  border-radius:2px 2px 10px 10px;
}
.book-spine[data-finish="merchant"] .book-spine__cartouche{
  background:linear-gradient(90deg,#4b2819,#755039,#462719);
  border:2px double var(--gilt);
}
.pull-animation .book-spine{
  width:100%;height:100%;opacity:1!important;transform:none!important;filter:brightness(1.08);
  pointer-events:none;box-shadow:inset 7px 0 12px #050302a9,8px 18px 25px #000b;
}
@media(max-width:600px){
  .book-spine{width:calc(var(--book-width) * .9);min-width:78px}
  .book-spine__cartouche{left:9px;right:8px}
  .book-spine__title{font-size:11px}
  .book-spine__subtitle{font-size:9px}
}