:root{
  --bookW: min(1100px, 96vw);
  --bookH: calc(var(--bookW) * 0.62); /* ~3:2 */
  --radius: 16px;
  --paper: #fcfbfa;
  --ink: #000000;
  --flipMs: 680ms;
  --pagePad: 10px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color:#0b0b0d;
  color:#fff;
  min-height:100svh;
  display:grid;
  place-items:center;
}

/* Gate */
.gate{
  width: min(920px, 94vw);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
}
.gateTop{ display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.gateTitle{ min-width:240px; }
.gateH1{ font-weight:750; letter-spacing:.2px; }
.gateSub{ font-size:13px; color:rgba(255,255,255,.78); margin-top:4px; }
.barWrap{ flex:1; min-width:260px; background: rgba(255,255,255,.08); border-radius:999px; overflow:hidden; height:12px; }
.bar{ height:100%; width:0%; background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.95)); transition: width 180ms linear; }
.gateBtn{
  border:0; border-radius:12px; padding:10px 14px;
  font-weight:650; cursor:pointer;
  background: rgba(255,255,255,.92); color:#111;
}
.gateBtn[disabled]{ opacity:.45; cursor:not-allowed; }
.gateHint{ margin-top:12px; font-size:13px; color:rgba(255,255,255,.78); }


/* Scene + Book */
.scene{ width: var(--bookW); height: var(--bookH); perspective: 1600px; position:relative; }
.book{ width:100%; height:100%; position:relative; transform-style: preserve-3d; }

/* Cover pages: full-bleed image */
.coverPage{
  height: 100%;
  display: block;              /* ignore the normal grid layout */
}

.coverFullBleed{
  position: relative;
  height: 100%;
  width: 100%;
  margin-left: 0px;
  margin-top: 0px;
  border-radius: 14px;         /* slightly tighter than page radius */
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.16),
    0 10px 24px rgba(0,0,0,.18);
}

.coverFullBleed img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional: subtle cover sheen */
.coverFullBleed::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.18), transparent 35%, rgba(0,0,0,.18));
  opacity:.35;
  pointer-events:none;
}
.blankFill{
  height: 100%;
  width: 100%;
  border-radius: 14px;
  background: #0b0b0d; /* match your site background */
}

.cover{
  position:absolute; inset:0;
  border-radius: calc(var(--radius) + 10px);
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  transform: translateZ(-8px);
}
.spine{
  position:absolute;
  top:10px; bottom:10px;
  left:50%;
  width:18px;
  transform: translateX(-50%);
  border-radius:10px;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.12), rgba(0,0,0,.35));
  box-shadow: inset 0 0 18px rgba(0,0,0,.45);
  z-index: 60;
  pointer-events:none;
}

/* Stacks (page thickness illusion) */
.stack{
  position:absolute;
  top:10px; bottom:10px;
  width: calc((var(--bookW) - 20px)/2);
  pointer-events:none;
  z-index: 40;
  opacity: .35;
}
.leftStack{ left:10px; }
.rightStack{ left: calc(50% + 0px); }
/* Stronger “sheet stack” look */
/* Stacks (page thickness illusion) */
.stack{
  position:absolute;
  top:10px; bottom:10px;
  width: calc((var(--bookW) - 20px)/2);
  pointer-events:none;
  z-index: 40;
  opacity: .35;
}
.leftStack{ left:10px; }
.rightStack{ left: calc(50% + 0px); }

/* Stronger “sheet edge” effect */
.leftStack::before{
  box-shadow:
    -1px 1px 0 rgba(0,0,0,.06),
    -2px 2px 0 rgba(0,0,0,.05),
    -3px 3px 0 rgba(0,0,0,.04),
    -4px 4px 0 rgba(0,0,0,.035),
    -5px 5px 0 rgba(0,0,0,.03),
    -6px 6px 0 rgba(0,0,0,.025),
    0 18px 40px rgba(0,0,0,.18);
}
.stack::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  background: rgba(247,243,234,.95);

  /* Visible stacked edges + your existing drop shadow */
  box-shadow:
    1px 1px 0 rgba(0,0,0,.06),
    2px 2px 0 rgba(0,0,0,.05),
    3px 3px 0 rgba(0,0,0,.04),
    4px 4px 0 rgba(0,0,0,.035),
    5px 5px 0 rgba(0,0,0,.03),
    6px 6px 0 rgba(0,0,0,.025),
    0 18px 40px rgba(0,0,0,.18);
  opacity:.60;
}

.stack::after{
  content:"";
  position:absolute; inset:0;
  border-radius: var(--radius);
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.06) 0px,
    rgba(0,0,0,.06) 1px,
    rgba(255,255,255,0) 3px,
    rgba(255,255,255,0) 6px
  );
  opacity:.60; /* slightly reduced */
  mix-blend-mode:multiply;
}

/* Spread */
.spread{
  position:absolute; inset:10px;
  border-radius: var(--radius);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1fr 1fr;
  z-index: 50;
}
.pageBase{
  position:relative;
  background: var(--paper);
  color: var(--ink);
  overflow:hidden;
}
.pageBaseLeft{
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
  box-shadow: inset -10px 0 26px rgba(0,0,0,.10);
}
.pageBaseRight{
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  box-shadow: inset 10px 0 26px rgba(0,0,0,.10);
}

/* Subtle paper lighting */
.pageBase::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(600px 260px at 20% 15%, rgba(255,255,255,.32), transparent 60%),
    radial-gradient(600px 260px at 80% 85%, rgba(0,0,0,.10), transparent 55%);
  mix-blend-mode: multiply;
  opacity:.55;
  pointer-events:none;
}

/* Corner grab affordance */
.pageCorner{
  position:absolute;
  width: 56px; height: 56px;
  bottom: 10px;
  z-index: 120;
  cursor:pointer;
}
.pageCornerNext{
  right: 10px;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  background: linear-gradient(135deg, rgba(0,0,0,.18), rgba(255,255,255,.22));
}
.pageCornerPrev{
  left: 10px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  background: linear-gradient(225deg, rgba(0,0,0,.18), rgba(255,255,255,.22));
}
.pageCorner::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60px 60px at 80% 80%, rgba(255,255,255,.35), transparent 55%);
  opacity:.65;
}

/* Content container */
.pageContent{
  position:absolute; inset:0;
  padding: var(--pagePad);
  overflow:hidden;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}
/* Basic typography defaults (pages can override with inline styles if needed) */
.pageContent h2{ margin:0 0 8px; font-size:22px; }
.pageContent p{ margin:0 0 12px; line-height:1.55; font-size:15px; }
.subTitle{ font-size:12px; opacity:.7; margin-bottom:10px; }
.photoBlock img{ width:100%; height:auto; display:block; border-radius: 12px; }
.photoBlock figcaption{ font-size:12px; opacity:.7; margin-top:6px; }
.embed{
  position:relative; width:100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(0,0,0,.08);
}
.embed iframe, .embed video{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* Layout system: 4 templates */
.page{ height:100%; display:grid; gap:12px; grid-template-rows:auto 1fr auto; }

.slotFooter{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.slotFooter button{
  border:0; border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  background: rgba(0,0,0,.08);
}
.slotFooter button:hover{ background: rgba(0,0,0,.12); }

.layoutA{
  grid-template-columns: 1.35fr 0.65fr;
  grid-template-areas:
    "slotHeader slotHeader"
    "slotBody   slotAside"
    "slotFooter slotFooter";
}
.layoutA .slotHeader{ grid-area:slotHeader; }
.layoutA .slotBody{ grid-area:slotBody; }
.layoutA .slotAside{ grid-area:slotAside; }
.layoutA .slotFooter{ grid-area:slotFooter; }

.layoutB{
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "slotHeader slotHeader"
    "slotAside  slotAside"
    "slotBody   slotBody"
    "slotFooter slotFooter";
  grid-template-rows:auto auto 1fr auto;
}
.layoutB .slotHeader{ grid-area:slotHeader; }
.layoutB .slotAside{ grid-area:slotAside; }
.layoutB .slotBody{ grid-area:slotBody; column-count: 2; column-gap: 18px; }
.layoutB .slotFooter{ grid-area:slotFooter; }

.layoutC{
  grid-template-columns: 1fr;
  grid-template-areas:
    "slotHeader"
    "slotMedia"
    "slotBody"
    "slotFooter";
  grid-template-rows:auto auto 1fr auto;
}
.layoutC .slotHeader{ grid-area:slotHeader; }
.layoutC .slotMedia{ grid-area:slotMedia; }
.layoutC .slotBody{ grid-area:slotBody; }
.layoutC .slotFooter{ grid-area:slotFooter; }

.layoutD{
  grid-template-columns: 1fr;
  grid-template-areas:
    "slotHeader"
    "slotBody"
    "slotFooter";
}
.layoutD .slotHeader{ grid-area:slotHeader; }
.layoutD .slotBody{ grid-area:slotBody; display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.layoutD .slotFooter{ grid-area:slotFooter; }

.tile{ border-radius:12px; overflow:hidden; position:relative; }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile .cap{
  position:absolute; left:10px; right:10px; bottom:10px;
  font-size:12px; color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* Flip elements (two-sided "sheet") */
.pageFlip{
  position:absolute;
  top:10px; bottom:10px;
  width: calc((var(--bookW) - 20px)/2);
  overflow:hidden;
  border-radius: var(--radius);
  transform-style: preserve-3d;
  z-index: 90;
  pointer-events:none;
  display:none;
  --shade: 0;
  --highlight: 0;
}
.pageFlip .face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  background: var(--paper);
}
.pageFlipR{
  left: calc(50% + 0px);
  transform-origin: left center;
  transform: rotateY(0deg);
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.pageFlipR .frontFace{ transform: rotateY(0deg); }
.pageFlipR .backFace{ transform: rotateY(180deg); filter: saturate(.98) contrast(.98); }

.pageFlipL{
  left: 10px;
  transform-origin: right center;
  transform: rotateY(0deg);
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.pageFlipL .frontFace{ transform: rotateY(0deg); }
.pageFlipL .backFace{ transform: rotateY(-180deg); filter: saturate(.98) contrast(.98); }

/* Curl overlays (dynamic opacity via CSS vars) */
.curl{ position:absolute; inset:0; pointer-events:none; }
.curl::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.28), transparent 40%, rgba(0,0,0,.18));
  opacity: var(--shade);
}
.curl::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(240px 90% at 0% 50%, rgba(255,255,255,.28), transparent 65%);
  opacity: var(--highlight);
}

/* Turn states */
.book.turningR .pageFlipR{
  transition: transform var(--flipMs) cubic-bezier(.2,.8,.2,1);
  transform: rotateY(-180deg);
}
.book.turningL .pageFlipL{
  transition: transform var(--flipMs) cubic-bezier(.2,.8,.2,1);
  transform: rotateY(180deg);
}

/* Nav buttons */
.nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 130;
  border: 0;
  width: 46px; height:46px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color:#111;
  font-size: 28px;
  line-height: 46px;
  text-align:center;
  cursor:pointer;
  user-select:none;
}
.nav:active{ transform: translateY(-50%) scale(.98); }
.nav.prev{ left: -58px; }
.nav.next{ right: -58px; }
.nav:disabled{ opacity:.45; cursor:not-allowed; }

/* Meta */
.meta{
  position:absolute;
  left:0; right:0;
  bottom: -44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 13px;
  color: rgba(255,255,255,.78);
  padding: 0 6px;
}
.metaRight{ display:flex; gap:12px; align-items:center; }
.miniBtn{
  border:0;
  border-radius: 12px;
  padding: 7px 10px;
  cursor:pointer;
  background: rgba(255,255,255,.90);
  color:#111;
  font-weight:650;
  font-size: 12px;
}

/* Optional music player */
.player{
  position: fixed;
  left: 14px;
  bottom: 14px;
  width: min(420px, calc(100vw - 28px));
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  z-index: 200;
  overflow:hidden;
}
.playerHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 12px;
  gap:10px;
}
.playerTitle{
  font-weight: 650;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.toggle{
  border:0;
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  background: rgba(255,255,255,.90);
  color:#111;
  font-weight:650;
  font-size: 12px;
}
.playerBody{
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:none;
}
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row button{
  border:0; border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  background: rgba(255,255,255,.90);
  color:#111;
  font-weight:650;
  font-size: 12px;
}
.row select{
  flex:1;
  min-width: 220px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color:#fff;
  outline:none;
}
.volLabel{ 
  font-size:12px; 
  color:rgba(255,255,255,.85); 
  display:flex; 
  align-items:center; 
  gap:8px; 
}
.row input[type="range"]{ 
  width: 140px; 
}

/* --- Curved-page illusion: under-page shadow --- */
.book{
  --underShade: 0; /* 0..1 set by JS */
}

.spread::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: var(--underShade);
  transition: opacity 60ms linear;
}

/* When turning forward, the shadow “sweeps” from the spine to the outer edge */
.book.turningR .spread::before{
  background: linear-gradient(90deg,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.18) 22%,
    rgba(0,0,0,.06) 48%,
    rgba(0,0,0,0) 70%
  );
}

/* When turning backward, sweep the other way */
.book.turningL .spread::before{
  background: linear-gradient(270deg,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.18) 22%,
    rgba(0,0,0,.06) 48%,
    rgba(0,0,0,0) 70%
  );
}

/* --- Curved-page illusion: specular highlight on turning sheet --- */
.pageFlip{
  --p: 0;            /* 0..1 progress set by JS */
  --edgeAlpha: 0;    /* 0..1 set by JS */
}

/* A thin highlight strip that moves across the sheet */
.pageFlip::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 22px;
  left: calc(var(--p) * 100%);
  transform: translateX(-50%);
  pointer-events:none;
  opacity: var(--edgeAlpha);
  filter: blur(.2px);
}

/* Forward: highlight faces slightly toward the viewer */
.book.turningR .pageFlipR::after{
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%
  );
}

/* Backward: same idea, opposite direction */
.book.turningL .pageFlipL::after{
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%
  );
}

@media (prefers-reduced-motion: reduce){
  :root{ --flipMs: 0ms; }
  .book.turningR .pageFlipR, .book.turningL .pageFlipL{ transition:none; }
}