/* ============================================================
   LAYER 3 — the physical object
   ============================================================ */

.book-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 8vh, 6rem) 1.5rem;
}
.book {
  max-width: 30rem; width: 100%; text-align: center;
}
.book .wordmark { display: block; margin-bottom: clamp(3rem,9vh,5rem); }

/* the object — a matte dark cover, rendered, not photographed */
.object {
  width: 11rem; height: 16rem; margin: 0 auto 3rem;
  background: linear-gradient(150deg, #131217, #0b0a0d 60%);
  border: 1px solid var(--rule);
  border-radius: 2px 4px 4px 2px;
  box-shadow:
    -6px 0 0 -2px #060507,            /* spine shadow */
    0 30px 60px -20px #000,
    0 0 0 1px #ffffff06 inset;
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2rem 1.6rem;
  transform: rotateY(-8deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.object:hover { transform: rotateY(-3deg) rotateX(1deg) translateY(-4px); }
.object::before { /* spine highlight */
  content:''; position:absolute; left:0; top:0; bottom:0; width:6px;
  background: linear-gradient(to right, #ffffff10, transparent);
}
.object__title {
  font-family: var(--display); font-weight: 500; font-size: 1.1rem;
  line-height: 1.15; color: var(--bone); letter-spacing: 0.01em;
}
.object__mark {
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--mute);
}
.object__mark .x { color: var(--brass); }
.object__seal {
  width: 1.4rem; height: 1.4rem; border: 1px solid var(--brass);
  border-radius: 50%; margin: 0 auto;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.5rem; color: var(--brass-lit);
}

.book h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.8rem,1.5rem+1.6vw,2.4rem); line-height: 1.1;
  margin: 0 0 1.2rem; color: var(--bone);
}
.book .desc { color: var(--bone-dim); font-style: italic; margin: 0 0 0.4rem; }
.book .spec {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mute); margin: 1.6rem 0 2.4rem;
  line-height: 2;
}
.book .price {
  font-family: var(--display); font-size: 2rem; color: var(--bone);
  margin: 0 0 2rem;
}
.book .price .cur { color: var(--brass-lit); font-size: 1.2rem; vertical-align: super; }

.acquire {
  display: inline-block; border: 1px solid var(--brass); background: transparent;
  color: var(--brass-lit); font-family: var(--mono); font-size: 0.74rem;
  letter-spacing: 0.24em; text-transform: uppercase; padding: 1rem 2.4rem;
  cursor: pointer; transition: background 0.4s ease, color 0.4s ease;
}
.acquire:hover:not(:disabled) { background: var(--brass); color: var(--void); }
.acquire:disabled { border-color: var(--mute-deep); color: var(--mute); cursor: default; }

.book__msg { min-height: 1.4rem; margin-top: 1.6rem; font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-lit); }
.book__msg.err { color: #b56b6b; }

.confirm { display: none; }
.confirm.show { display: block; }
.confirm h1 { margin-bottom: 1rem; }
.confirm p { color: var(--bone-dim); margin: 0 0 1.4rem; }
.confirm .next { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.confirm .next a { color: var(--brass-lit); }

.book__back {
  margin-top: 3.5rem; font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-deep);
}
.book__back a:hover { color: var(--mute); }