.lbk {
  position: absolute;
  z-index: var(--z);
  padding: 0;
  transform: rotate(var(--rot));
  filter: drop-shadow(5px 12px 10px rgba(0, 0, 0, .55));
  transition: transform .35s cubic-bezier(.3, 1.4, .6, 1), filter .3s;
}
.lbk:hover,
.lbk:focus-visible {
  z-index: 60;
  transform: translateY(-16px) rotate(calc(var(--rot) * .3)) scale(1.03);
  filter: drop-shadow(8px 26px 18px rgba(0, 0, 0, .6));
  outline: none;
}

.lbk-cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: 3px 6px 6px 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.bk-cloth {
  container-type: inline-size;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0) 7%, rgba(255, 255, 255, .07) 9%, transparent 14%),
    radial-gradient(120% 80% at 70% 20%, rgba(255, 255, 255, .08), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 4px),
    var(--c);
}

.bk-photo { position: absolute; inset: 0; z-index: 2; }
.bk-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.bk-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 5%, rgba(255, 255, 255, .12) 6.5%, transparent 10%),
    linear-gradient(120deg, rgba(255, 255, 255, .1), transparent 35%);
}
.bk-rule {
  position: absolute;
  top: 6%;
  left: 13%;
  right: 7%;
  height: 6px;
  border-top: 1.5px solid #D4AF37;
  border-bottom: 1.5px solid #D4AF37;
  opacity: .8;
}
.bk-rule.bottom { top: auto; bottom: 6%; }

.bk-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5cqi;
  width: 74%;
  margin-left: 5%;
  padding: 10cqi 6cqi;
  background: var(--p);
  color: #2C1D11;
  text-align: center;
  box-shadow: inset 0 0 0 1.5cqi var(--p), inset 0 0 0 calc(1.5cqi + 1px) rgba(44, 29, 17, .5), 0 1px 2px rgba(0, 0, 0, .25);
}
.bk-label-title {
  font-family: var(--serif);
  font-size: 10cqi;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.bk-label-line { width: 40%; height: 1px; background: rgba(44, 29, 17, .6); }
.bk-label-author { font-size: 4.2cqi; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }

.bk-foil {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4cqi;
  width: 76%;
  margin-left: 5%;
  padding: 12cqi 6cqi;
  text-align: center;
}
.bk-foil::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(212, 175, 55, .7);
  border-radius: 2px;
}
.bk-foil-title,
.bk-foil-orn,
.bk-foil-author {
  background: linear-gradient(135deg, #F5DA8A, #C99A35 50%, #9A7020);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bk-foil-title {
  font-family: var(--serif);
  font-size: 10.5cqi;
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
}
.bk-foil-orn { font-size: 7cqi; }
.bk-foil-author { font-size: 4.2cqi; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

.bk-x {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F3ECDD;
  color: #2C1D11;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.bk-x .icon { font-size: 22px; }