/* Closed-cover presentation only. The original spread styles remain intact. */
body:has(.cover:not([hidden])) {
  background: radial-gradient(ellipse at 46% 43%, #111214, #060708 58%, #030405);
}
.cover {
  --cover-height: clamp(420px, 65vh, 820px);
  height: var(--cover-height);
  width: calc(var(--cover-height) * .665);
  padding: 0;
  border: 0;
  border-radius: 2px 8px 4px 3px;
  background: #070809;
  color: #a9aaa6;
  transform: rotate(-3deg) skewY(.6deg);
  transform-origin: 8% 50%;
  box-shadow: 10px 26px 55px #0009, 1px 3px 0 #343431, 3px 5px 0 #151616;
  transition: transform .5s ease, box-shadow .5s ease;
  isolation: isolate;
}
.cover::before {
  inset: 0;
  border: 0;
  border-radius: inherit;
  background: #161719;
  clip-path: polygon(.4% .3%, 20% 0, 48% .4%, 74% .2%, 99% .7%, 99.7% 3%, 99.4% 31%, 100% 55%, 99.5% 82%, 99% 98.8%, 96% 99.7%, 70% 99.4%, 40% 100%, 2% 99.6%, .4% 97%, .7% 70%, 0 42%);
  z-index: -2;
}
.cover-surface {
  position: absolute;
  inset: 1px 2px 2px 1px;
  clip-path: polygon(.5% .5%, 20% .2%, 48% .6%, 74% .4%, 98.6% .8%, 99.4% 3%, 99.1% 31%, 99.7% 55%, 99.2% 82%, 98.7% 98.5%, 96% 99.3%, 70% 99.1%, 40% 99.7%, 2% 99.3%, .7% 97%, 1% 70%, .3% 42%);
  background:
    radial-gradient(ellipse at 97% 1%, #62626055, transparent 5%),
    radial-gradient(ellipse at 98% 99%, #59595140, transparent 6%),
    radial-gradient(ellipse at 3% 96%, #41423d40, transparent 7%),
    linear-gradient(92deg, #040506 0%, #1c1d1e 2%, #0a0b0c 3.5%, #17181a 5%, #08090a 8%, transparent 15%),
    radial-gradient(ellipse at 18% 30%, #1d1e20 0%, #0d0e10 40%, #060708 87%);
  z-index: -1;
  box-shadow: inset -2px 0 12px #000, inset 0 1px 2px #56565235;
}
.cover-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .29;
  background-image: url("wear.svg");
  background-size: 100% 100%;
  mix-blend-mode: screen;
}
.cover-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(96deg, transparent 0 3px, #00000016 4px, transparent 5px 9px);
  opacity: .65;
}
.cover::after {
  content: '';
  position: absolute;
  top: 4%; bottom: 3%; left: 5.5%; width: 1px;
  background: linear-gradient(transparent, #66656125 18%, #000 27%, #64625b20 42%, #000 65%, #66656125 83%, transparent);
  transform: rotate(.4deg);
}
.cover:hover {
  transform: rotate(-2.6deg) skewY(.6deg) scale(1.013);
  box-shadow: 12px 29px 62px #000b, 1px 3px 0 #393935, 3px 5px 0 #151616;
}
.cover-title {
  position: absolute;
  top: 19%; left: 13%; right: 8%;
  margin: 0;
  font-family: 'Arial Narrow', 'Bahnschrift Condensed', Arial, sans-serif;
  font-size: calc(var(--cover-height) * .095);
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: 0;
  text-align: left;
  transform: rotate(-5deg);
  text-shadow: none;
}
.title-line { display: flex; align-items: baseline; gap: .035em; }
.title-line + .title-line { margin-top: .08em; margin-left: .15em; transform: rotate(1.5deg); gap: .075em; }
.title-line > span {
  display: inline-block;
  color: transparent;
  background: repeating-linear-gradient(174deg, #b5b5ac 0 6px, #93968f 6.5px 7px, #b1b3aa 7.5px 15px);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: .35px #aaa99d70;
  transform-origin: center bottom;
}
.title-line > span:nth-child(1) { transform: rotate(-5deg) scaleX(.82) scaleY(1.04); }
.title-line > span:nth-child(2) { transform: translateY(.035em) rotate(3deg) scaleX(.86) scaleY(.96); margin-left: -.07em; }
.title-line > span:nth-child(3) { transform: translateY(-.025em) rotate(-2deg) scaleX(.8) scaleY(1.06); margin-left: -.035em; }
.title-line > span:nth-child(4) { transform: translateY(.045em) rotate(5deg) scaleX(.84) scaleY(.94); margin-left: -.065em; }
.title-line > span:nth-child(5) { transform: rotate(-4deg) scaleX(.86) scaleY(1.02); margin-left: -.04em; }
.title-line > span:nth-child(6) { transform: translateY(.015em) rotate(2deg) scaleX(.81) scaleY(1.07); margin-left: -.045em; }
.title-line > span:nth-child(7) { transform: translateY(.055em) rotate(-3deg) scaleX(.8) scaleY(.93); margin-left: -.08em; }
.cover.opening { animation: open-cover .6s ease-in forwards; }
@media (max-width: 760px) {
  .cover { --cover-height: min(65svh, 520px, 125vw); }
  .cover-title { font-size: calc(var(--cover-height) * .095); margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .cover { transition: none; } .cover.opening { animation: none; } }