:root {
  --paper:#fdfbf6;
  --lines:#cfd7e6;
  --ink:#241d15;
  --pin:#c0392b;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --cover-yellow:#f0c20f;
  --cover-text:#151515;
}

* { box-sizing: border-box; }
html, body { height: 100%; background: #ffffff; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #ffffff;
}

.hidden { display: none; }

.stage { 
  width: 100%; 
  display: grid; 
  place-items: center; 
  padding: 20px;
}

/* Splash (cover image) */
.splash { 
  position: fixed; 
  inset:0; 
  background: #ffffff; 
  display:grid; 
  place-items:center; 
  z-index:50; 
}

.splash .splash-cta { 
  position:fixed; 
  bottom:24px; 
  right:24px; 
  font-family:"Kalam",cursive; 
  font-size:18px; 
  color:#333; 
  opacity:.85; 
}

.flip-hint {
  position: fixed !important;
  bottom: 24px !important;
  font-family: "Kalam", cursive !important;
  font-size: 18px !important;
  color: #333 !important;
  opacity: 0.85 !important;
  z-index: 1000 !important;
  pointer-events: none !important;
  display: none !important;
}

.flip-left {
  left: 24px !important;
  right: auto !important;
}

.flip-right {
  right: 24px !important;
  left: auto !important;
}

/* Cover image splash */
.cover-image{
  width:min(70vw,460px);
  height:auto;
  display:block;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  transform:rotateX(8deg) rotateY(-12deg);
  transition:transform .3s ease, filter .3s ease;
  margin: 0;
  padding: 0;
}

.splash:hover .cover-image{ 
  transform:rotateX(6deg) rotateY(-8deg) translateY(-2px); 
}

.book-wrap { 
  position: relative; 
  width: min(100vw - 40px, 1000px); 
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.2)); 
}

#book { 
  background: transparent; 
  border-radius: 12px; 
}

/* Clean page for images */
.page {
  width: 460px; 
  height: 640px; 
  position: relative;
  background: transparent;
  border-radius: 8px; 
  box-shadow: 0 4px 20px rgba(0,0,0,.1); 
  overflow: hidden;
}

.page .pad { 
  padding: 0; 
  width: 100%;
  height: 100%;
}

.page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Two-page spread styling */
.left-page {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.right-page {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 900px) { .page { width: 340px; height: 480px; } }
@media (max-width: 720px) { .page { width: 300px; height: 420px; } }