/* graphic-novel-book.css — the immersive two-page FLIP reader (StPageFlip).
   Book-first experience; the accessible plain-text reader lives at <Book>/read/.
   Per-book identity: Paradise = warm parchment/ink · Abyss = cold charcoal/silver.
   Constant light Control Deck header (site rule). */

:root{
  --gnb-deck-h:52px; --gnb-player-h:56px;
  --gnb-display:'Oswald',system-ui,sans-serif;
  --gnb-serif:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gnb-fancy:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gnb-label:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body.gnb-page{
  font-family:var(--gnb-serif);overflow:hidden;               /* fixed viewport — the book, not a scroll */
  background:var(--gnb-desk);color:var(--gnb-page-ink);
}
/* the "desk" the book rests on + the page palettes */
body[data-book="paradise"]{--gnb-desk:#26221b;--gnb-page:#f4efe4;--gnb-page-ink:#241f18;
  --gnb-dim:#6d6455;--gnb-accent:#7a5a2e;--gnb-rule:#d8cfbe;--gnb-scrim:rgba(20,16,10,.55)}
body[data-book="abyss"]{--gnb-desk:#080a0e;--gnb-page:#14181f;--gnb-page-ink:#e6e9f0;
  --gnb-dim:#8792a3;--gnb-accent:#c0c0c0;--gnb-rule:#2a3340;--gnb-scrim:rgba(3,5,9,.62)}

a{color:inherit}
img{max-width:100%;display:block}

/* ---- Control Deck (constant light) with the persistent band/chapter marker ---- */
.gnb-deck{position:fixed;top:0;left:0;right:0;height:var(--gnb-deck-h);z-index:40;
  display:flex;align-items:center;gap:16px;padding:0 clamp(14px,3vw,32px);
  background:#fff;color:#0c0b0a;border-bottom:2px solid #0c0b0a}
.gnb-deck a{text-decoration:none;font-family:var(--gnb-label);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#0c0b0a;white-space:nowrap;transition:opacity .15s}
.gnb-deck a:hover{opacity:.6}
.gnb-marker{margin:0 auto;display:flex;align-items:baseline;gap:12px;min-width:0}
.gnb-marker-band{font-family:var(--gnb-label);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:#8a8a8a}
.gnb-marker-chap{font-family:var(--gnb-display);font-weight:500;font-size:15px;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Stage (fills the space between deck and player) ---- */
.gnb-stage{position:fixed;top:var(--gnb-deck-h);bottom:var(--gnb-player-h);left:0;right:0;
  display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,26px);
  padding:clamp(10px,2.2vh,28px) clamp(8px,2vw,24px)}
.flipbook{margin:0 auto;filter:drop-shadow(0 24px 50px rgba(0,0,0,.55))}
.gnb-nav{flex:none;width:clamp(38px,4vw,52px);height:clamp(38px,4vw,52px);border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;
  font-size:26px;line-height:1;cursor:pointer;transition:background .15s,transform .12s}
.gnb-nav:hover{background:rgba(255,255,255,.16);transform:scale(1.06)}
.gnb-nav:disabled{opacity:.25;cursor:default;transform:none}

/* ---- Pages (StPageFlip leaves) ---- */
.page{background:var(--gnb-page);color:var(--gnb-page-ink);overflow:hidden}
.page-cover{background:#05070A}

/* cover face */
.gnb-coverface{position:relative;width:100%;height:100%;background-size:cover;background-position:center;
  display:flex;align-items:flex-end}
.gnb-cover-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,7,10,.1),rgba(5,7,10,.55) 55%,rgba(5,7,10,.95))}
.gnb-cover-meta{position:relative;z-index:2;padding:clamp(18px,4vw,34px);color:#fff}
.gnb-cover-kicker{font-family:var(--gnb-label);font-weight:700;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:#d8d8d8}
.gnb-cover-title{font-family:var(--gnb-display);font-weight:600;line-height:.98;text-transform:uppercase;
  font-size:clamp(28px,4vw,54px);letter-spacing:.005em;margin:.2em 0 .3em}
.gnb-cover-line{font-family:var(--gnb-fancy);font-style:italic;font-size:clamp(14px,1.5vw,18px);
  line-height:1.45;color:#eef0f3;max-width:34ch;margin:0 0 1em}
.gnb-cover-hint{font-family:var(--gnb-label);font-weight:600;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:#c9c9c9;margin:0}

/* plate (left) face — full-bleed band art */
.gnb-plateface{position:relative;background-size:cover;background-position:center}
.gnb-plate-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,var(--gnb-scrim))}
.gnb-face-label{position:absolute;left:0;bottom:0;z-index:2;
  font-family:var(--gnb-label);font-weight:700;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gnb-page);background:var(--gnb-accent);padding:6px 12px}

/* title + seam faces */
.gnb-titleface,.gnb-seamface{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:clamp(20px,4vw,44px)}
.gnb-seamface{background:
  radial-gradient(120% 80% at 50% 50%,color-mix(in srgb,var(--gnb-accent) 12%,transparent),transparent 70%),var(--gnb-page)}
.gnb-face-mid h2{font-family:var(--gnb-display);font-weight:500;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(24px,3vw,38px);margin:.2em 0}
.gnb-face-mid p{font-family:var(--gnb-fancy);font-style:italic;color:var(--gnb-dim);margin:0}
.gnb-titleface .gnb-face-label,.gnb-seamface .gnb-face-label{position:static;align-self:center;margin-bottom:14px;
  background:none;color:var(--gnb-dim);padding:0}
.gnb-face-foot{position:absolute;bottom:clamp(16px,3vw,30px);font-family:var(--gnb-label);font-weight:600;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gnb-dim)}

/* full-spread band plate — one wide image split across the two leaves */
.gnb-p-plate{position:relative;background-size:200% 100%;background-repeat:no-repeat;background-color:#05070A}
.gnb-p-plate.plate-left{background-position:left center}
.gnb-p-plate.plate-right{background-position:right center}
.gnb-p-blank{background:var(--gnb-page)}

/* image-led chapter opener — main image + Band · Chapter № · title · summary */
.gnb-p-intro{position:relative;overflow:hidden;background-color:#05070A}
.gnb-intro-img{position:absolute;inset:0;background-size:cover;background-position:center}
.gnb-intro-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,7,10,.15),rgba(5,7,10,.5) 52%,rgba(5,7,10,.95))}
.gnb-intro-meta{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,4.5vw,44px);color:#fff}
.gnb-intro-band{font-family:var(--gnb-label);font-weight:700;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gnb-accent)}
.gnb-intro-num{font-family:var(--gnb-label);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#cfd3da;margin-top:8px}
.gnb-intro-title{font-family:var(--gnb-display);font-weight:600;line-height:1.04;text-transform:uppercase;
  font-size:clamp(28px,3.8vw,46px);letter-spacing:.005em;margin:.28em 0 .42em}
body[data-book="paradise"] .gnb-intro-title{font-family:var(--gnb-fancy);text-transform:none;font-weight:500}
.gnb-intro-sum{font-family:var(--gnb-fancy);font-style:italic;font-size:clamp(15px,1.5vw,18px);
  line-height:1.5;color:#e9ebef;max-width:38ch;margin:0}
/* Center seam opener — no image, uses the page palette, centered */
.gnb-p-seamintro{background:
  radial-gradient(120% 80% at 50% 40%,color-mix(in srgb,var(--gnb-accent) 14%,transparent),transparent 70%),var(--gnb-page)}
.gnb-p-seamintro .gnb-intro-scrim{display:none}
.gnb-p-seamintro .gnb-intro-meta{position:absolute;inset:0;color:var(--gnb-page-ink);
  display:flex;flex-direction:column;justify-content:center;text-align:center;padding:clamp(28px,5vw,52px)}
.gnb-p-seamintro .gnb-intro-num{color:var(--gnb-dim)}
.gnb-p-seamintro .gnb-intro-sum{color:var(--gnb-dim);margin:0 auto}

/* inline panel figure — placed at its anchor sentence; natural aspect (set per-image inline), no crop */
.gnb-inlinefig{margin:1.3em 0 1.4em;break-inside:avoid}
.gnb-inlinefig-img{width:100%;background-size:cover;background-position:center;
  border:1px solid var(--gnb-rule);background-color:var(--gnb-card);
  max-height:var(--gnb-imgcap,48vh)}   /* cap tall panels to ~half a page → text always shares the page */
.gnb-inlinefig-cap{font-family:var(--gnb-label);font-weight:600;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gnb-dim);margin-top:8px;text-align:center}

/* chapter-break page — keeps the full-page opener on the left; a quiet palette divider, not blank */
.gnb-p-break{background:
  radial-gradient(120% 80% at 50% 50%,color-mix(in srgb,var(--gnb-accent) 7%,transparent),transparent 70%),var(--gnb-page)}
.gnb-p-break::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:1px;
  transform:translate(-50%,-50%);background:var(--gnb-accent);opacity:.4}

/* paginated text leaf — sized to fit; never scrolls (the paginator guarantees fit) */
.gnb-p-text{padding:0}
.gnb-textinner{height:100%;overflow:hidden;position:relative;
  padding:clamp(22px,3.2vw,42px) clamp(20px,3vw,38px) 32px}
.gnb-seamtext{text-align:center}
.gnb-chaphead{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--gnb-rule);
  padding-bottom:14px;margin-bottom:18px}
.gnb-num{font-family:var(--gnb-label);font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--gnb-accent)}
.gnb-chaptitle{font-family:var(--gnb-display);font-weight:500;line-height:1.04;letter-spacing:.01em;
  font-size:clamp(20px,2.4vw,30px);margin:0}
body[data-book="paradise"] .gnb-chaptitle{font-family:var(--gnb-fancy);font-weight:500;text-transform:none}
.gnb-prose{font-size:clamp(15px,1.15vw,17px);line-height:1.66}
.gnb-prose > p{margin:0 0 1em}
/* drop-cap only on a chapter's opening page (not continuation pages) */
.gnb-p-text:not(.gnb-cont) .gnb-prose > p:first-of-type::first-letter{font-family:var(--gnb-display);font-weight:600;
  float:left;font-size:3.2em;line-height:.72;padding:.05em .09em 0 0;color:var(--gnb-accent)}
body[data-book="paradise"] .gnb-p-text:not(.gnb-cont) .gnb-prose > p:first-of-type::first-letter{font-family:var(--gnb-fancy)}
.gnb-folio{position:absolute;left:0;right:0;bottom:10px;text-align:center;
  font-family:var(--gnb-label);font-weight:600;font-size:10px;letter-spacing:.2em;color:var(--gnb-dim)}
.gnb-cross{display:inline-block;margin-top:14px;font-family:var(--gnb-label);font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gnb-accent);text-decoration:none;
  border:1px solid var(--gnb-accent);padding:9px 14px}
.gnb-cross:hover{background:var(--gnb-accent);color:var(--gnb-page)}

/* scrollbar (webkit) inside text pages */
.gnb-textinner::-webkit-scrollbar{width:8px}
.gnb-textinner::-webkit-scrollbar-thumb{background:var(--gnb-rule);border-radius:4px}

/* ---- Player (fixed bottom) ---- */
.gnb-player{position:fixed;bottom:0;left:0;right:0;height:var(--gnb-player-h);z-index:40;
  display:flex;align-items:center;gap:14px;padding:0 clamp(14px,3vw,32px);
  background:#0b0e13;color:#e6e9f0;border-top:1px solid #2a3340}
.gnb-play{font-family:var(--gnb-label);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#0b0e13;background:var(--gnb-accent);border:0;padding:9px 18px;cursor:pointer;white-space:nowrap;
  transition:transform .12s,box-shadow .15s}
.gnb-play:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(192,192,192,.5)}
.gnb-sel-wrap{display:inline-flex;align-items:center;gap:8px}
.gnb-sel-label{font-family:var(--gnb-label);font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8792a3}
.gnb-chapsel{font-family:var(--gnb-serif);font-size:14px;color:#e6e9f0;background:#0b0e13;
  border:1px solid #2a3340;padding:6px 10px;max-width:48vw}
.gnb-now{font-family:var(--gnb-label);font-weight:600;font-size:11px;letter-spacing:.05em;color:var(--gnb-accent);
  margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}

/* ---- Mobile: single page, hide the big side arrows (swipe/buttons drive it) ---- */
@media(max-width:680px){
  :root{--gnb-deck-h:48px;--gnb-player-h:52px}
  .gnb-marker-chap{font-size:13px}
  .gnb-now{display:none}
  .gnb-nav{width:34px;height:34px;font-size:20px}
}