/* ==========================================================================
   BOOK DETAIL PAGE
   Tokens, type and spacing all come from nivakana.css — this file only
   lays out what is new here.
   ========================================================================== */

.bookhero{ padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem); }

.crumbs{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-size:.82rem; color:var(--ink-muted); margin-bottom:clamp(2rem,5vw,3.5rem);
}
.crumbs span[aria-hidden]{ opacity:.4; }
.crumbs [aria-current]{ color:var(--ink); font-weight:500; }

.bookhero__grid{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){
  .bookhero__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
}

/* The cover is the element the View Transition morphs from the card on the
   homepage, so it must be present and sized before the transition starts —
   hence width/height on the img and no entrance animation on the figure. */
.bookhero__cover{
  position:relative; margin:0;
  view-transition-name:book-cover;
  contain:paint;
}
.bookhero__cover img{
  display:block; width:100%; height:auto; border-radius:14px;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.08);
}
.bookhero__glow{
  position:absolute; inset:-14% -10% -18%;
  background:radial-gradient(60% 55% at 50% 55%, var(--glow,var(--accent)) 0%, transparent 70%);
  opacity:.4; filter:blur(34px); z-index:-1; pointer-events:none;
}

.specs{
  display:grid; gap:0; margin:0;
  grid-template-columns:1fr;
  border-top:1px solid rgba(20,22,22,.12);
}
@media (min-width:560px){ .specs{ grid-template-columns:1fr 1fr; } }
.spec{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.9rem 0; border-bottom:1px solid rgba(20,22,22,.12);
}
@media (min-width:560px){
  .spec:nth-child(odd){ padding-right:2rem; }
  .spec:nth-child(even){ padding-left:2rem; border-left:1px solid rgba(20,22,22,.12); }
}
.spec dt{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); margin:0; }
.spec dd{ margin:0; font-size:.92rem; text-align:right; }

.bookpage{
  margin:clamp(2rem,5vw,3rem) 0 0;
  display:grid; place-items:center;
  padding:clamp(1.5rem,5vw,3.5rem);
  background:#fff; border-radius:18px;
  box-shadow:0 24px 48px -28px rgba(0,0,0,.3);
}
.bookpage img{ width:min(100%,520px); height:auto; }

.booknav{
  display:grid; gap:1.25rem; margin-top:clamp(2rem,5vw,3rem);
  grid-template-columns:1fr;
}
@media (min-width:720px){ .booknav{ grid-template-columns:1fr 1fr; } }

.booknav__item{
  position:relative; display:grid; align-items:center; gap:1.25rem;
  grid-template-columns:72px 1fr;
  padding:1.15rem 1.35rem; border-radius:14px; text-decoration:none;
  border:1px solid rgba(20,22,22,.12); background:var(--paper); color:var(--ink);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out);
}
.booknav__item::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 120% at 10% 50%, var(--glow,var(--accent)) 0%, transparent 65%);
  opacity:0; transition:opacity var(--dur) var(--ease-out);
}
.booknav__item:hover{
  border-color:transparent; transform:translateY(-3px);
  box-shadow:0 18px 34px -20px rgba(0,0,0,.4);
}
.booknav__item:hover::before{ opacity:.16; }
.booknav__item--next{ grid-template-columns:1fr 72px; text-align:right; }
.booknav__item img{
  position:relative; width:72px; height:auto; border-radius:7px;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.5);
}
.booknav__text{ position:relative; min-width:0; }
.booknav__dir{
  display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:.3rem;
}
.booknav__t{
  display:block; font-family:var(--font-display); font-size:1.08rem; line-height:1.2;
}