/* ==========================================================================
   book.css — styles specific to book.html
   Reuses the same atmospheric background + ember canvas as the Home page,
   restyled around a story intro (drop cap) and a formats/buy panel.
   ========================================================================== */

.book-section{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
}

/* ---------- background (same imagery + motion language as Home) ---------- */
.book-bg{
  position:absolute; inset:-6% -6%;
  background-image:url('../assets/hero-bg.jpg');
  background-size:cover;
  background-position:center 55%;
  z-index:-3;
  animation:book-kenburns 46s ease-in-out infinite alternate;
  filter:saturate(1.05) contrast(1.05);
}
@keyframes book-kenburns{
  0%{ transform:scale(1.06) translate(0,0); }
  100%{ transform:scale(1.16) translate(-2%, -1.5%); }
}
.book-scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(100deg, rgba(10,7,6,.94) 0%, rgba(12,8,7,.9) 40%, rgba(14,9,8,.6) 65%, rgba(10,7,6,.4) 100%),
    linear-gradient(to top, rgba(8,6,5,.9) 0%, rgba(8,6,5,.35) 30%, rgba(8,6,5,.5) 100%);
}
.book-vignette{
  position:absolute; inset:0; z-index:-1;
  box-shadow:inset 0 0 220px 60px rgba(5,3,3,.85);
}

.book-content{
  position:relative; z-index:2;
  width:100%;
  padding-top:170px;
  padding-bottom:110px;
}

/* ---------- layout ---------- */
.book-grid{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:.8fr 1.2fr;
  gap:90px; align-items:start;
}

.book-cover-wrap{
  position:relative;
  display:flex; justify-content:center;
  perspective:1400px;
  padding-top:20px;
}
.book-cover-wrap::before{
  content:'';
  position:absolute; inset:6% 8%;
  background:radial-gradient(closest-side, rgba(224,105,47,.35), transparent 70%);
  filter:blur(50px);
  z-index:0;
}
.book-cover-wrap img{
  position:relative; z-index:1;
  width:min(380px, 82%);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.65));
  transform:rotateY(-14deg) rotateX(2deg);
  transition:transform .4s ease;
  will-change:transform;
}

.book-copy .eyebrow{margin-bottom:16px; display:block;}
.book-copy h2{
  font-style:italic;
  font-size:clamp(34px, 4vw, 52px);
  line-height:1.1;
  margin-bottom:22px;
  color:var(--gold-soft);
}
.book-copy .rule{
  width:64px; height:2px;
  background:var(--ember);
  margin-bottom:30px;
}
.book-copy p{color:var(--parchment-dim); margin:0 0 20px; max-width:62ch;}

/* ---------- drop cap intro paragraph ---------- */
.book-copy p.dropcap::first-letter{
  float:left;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:600;
  font-size:78px;
  line-height:.78;
  padding:4px 12px 0 0;
  color:var(--gold);
  filter:drop-shadow(0 2px 14px rgba(201,165,103,.25));
}

/* ---------- formats ---------- */
.formats-label{margin-top:44px; margin-bottom:20px; display:block;}
.formats-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.format-card{
  background:rgba(36,29,25,.55);
  border:1px solid rgba(201,165,103,.22);
  border-radius:3px;
  padding:28px 16px 24px;
  text-align:center;
  backdrop-filter:blur(8px);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.format-card:hover{
  transform:translateY(-4px);
  border-color:rgba(201,165,103,.5);
  background:rgba(36,29,25,.75);
}
.format-card h3{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:500;
  font-size:22px;
  color:var(--parchment);
  margin-bottom:18px;
}


/* ---------- responsive ---------- */
@media (max-width:900px){
  .book-grid{grid-template-columns:1fr; gap:50px;}
  .book-content{padding-top:130px;}
  .formats-grid{grid-template-columns:1fr 1fr 1fr; gap:12px;}
}
@media (max-width:560px){
  .book-cover-wrap img{transform:none;}
  .formats-grid{grid-template-columns:1fr;}
  .book-copy p.dropcap::first-letter{font-size:58px;}
}

@media (prefers-reduced-motion: reduce){
  .book-bg{animation:none;}
}



.book-cover-wrap {
    margin-top: 100px;
}

.format-card .btn {
    display: flex;
    align-items: center;
   
    text-align: center;
    font-weight: 900;
}



.btn-small {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}





.book-subtitle {
  display: block;
  font-size: clamp(24px, 3vw, 48px);
  line-height: 1.1;
  margin-top: 20px;
  font-style: italic;
  font-weight: 400;

  background: linear-gradient(
    180deg,
    #f4e3bd 0%,
    var(--gold) 55%,
    #a97c3f 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}