:root{
  --bg-1: #1A1A1A;
  --bg-2: #3E2723;
  --paper: #f4e4bc;
  --paper-ink: #33261d;
  --paper-accent: #5D4037;
  --gold: #d7b46a;
  --shadow: rgba(0,0,0,0.45);
  --shadow-strong: rgba(0,0,0,0.65);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  font-family:'Merriweather', 'Crimson Text', serif;
  background: radial-gradient(120% 120% at 50% 50%, #2a1f1d 0%, rgba(42,31,29,0) 55%), linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color:var(--paper-ink);
  position:relative;
  overflow:hidden;
}

.scene-vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 220px 140px #0b0807;
  z-index:1;
}
.scene-light{
  position:fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(40% 30% at 50% 15%, rgba(255,224,179,0.25), transparent 60%);
  mix-blend-mode:screen;
  z-index:0;
}

.lector-shell{
  max-width:1200px;
  margin:0 auto;
  padding:48px 22px 64px;
  position:relative;
  z-index:2;
}

.lector-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
  color:#e9ddc5;
}
.lector-header h1{
  margin:4px 0 2px;
  font-family:'Crimson Text', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing:0.6px;
}
.lector-header .crumb{margin:0; color:#d7c7a4; letter-spacing:1px; text-transform:uppercase; font-size:0.8rem;}
.lector-header .sub{margin:0; color:#c2b69a; font-size:0.95rem;}
.nav-hints{display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; color:#d3c4a4; font-size:0.85rem;}
.hint{padding:4px 8px; border:1px solid rgba(215,180,106,0.4); border-radius:12px;}

.book-stage{
  position:relative;
  margin-top:32px;
  height:70vh;
  min-height:520px;
  background: radial-gradient(60% 80% at 50% 40%, rgba(0,0,0,0.3), transparent 65%);
  border-radius:24px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

#book{
  width:900px;
  max-width:100%;
  height:90%;
}

.nav-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid rgba(215,180,106,0.45);
  background: linear-gradient(140deg, rgba(215,180,106,0.35), rgba(93,64,55,0.15));
  color:#f2e6cf;
  font-size:28px;
  cursor:pointer;
  box-shadow:0 18px 38px rgba(0,0,0,0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.nav-arrow:hover{transform:translateY(-50%) scale(1.05); box-shadow:0 22px 50px rgba(0,0,0,0.55); filter:drop-shadow(0 0 6px rgba(215,180,106,0.7));}
.nav-arrow:active{transform:translateY(-50%) scale(0.96);} 
.nav-arrow.left{left:18px;}
.nav-arrow.right{right:18px;}

/* PageFlip overrides to inject texture and drop cap */
.page{
  background: var(--paper);
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.08) 0%, transparent 16%, transparent 84%, rgba(0,0,0,0.08) 100%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18), transparent 60%),
    var(--noise);
  box-shadow: inset 0 0 35px rgba(0,0,0,0.18), 0 18px 38px rgba(0,0,0,0.32);
  color: var(--paper-ink);
  font-size: 18px;
  line-height: 1.7;
  padding: 32px 36px;
  overflow-y:auto;
}
.page::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0.18), rgba(0,0,0,0));
  opacity:0.3;
  pointer-events:none;
}
.page .page-content{position:relative; z-index:1;}
.page p{margin:0 0 14px 0;}
.page p:first-of-type::first-letter{
  float:left;
  font-size:3.8rem;
  line-height:1;
  padding-right:10px;
  color:var(--paper-accent);
  font-family:'Crimson Text', serif;
}
.page h2{
  font-family:'Crimson Text', serif;
  margin:0 0 10px 0;
  font-size:1.4rem;
  color:var(--paper-accent);
}

/* Spine shadow for spread view */
.stf__wrapper{
  filter: drop-shadow(0 28px 48px rgba(0,0,0,0.55));
}
.stf__page-shadow{
  box-shadow: inset 0 0 28px rgba(0,0,0,0.22);
}

@media (max-width: 900px){
  .book-stage{height:72vh;}
  .nav-arrow{width:44px; height:44px; font-size:24px;}
}
@media (max-width: 640px){
  .lector-header{flex-direction:column; align-items:flex-start;}
  .book-stage{height:78vh; min-height:520px;}
  #book{height:100%;}
  .nav-arrow.left{left:8px;} .nav-arrow.right{right:8px;}
}