/* ===================================================================
   Digital Futurist — book-reader page (1683, "Design 2000" 92-page
   scanned book). A page-by-page reader: one large current page, a
   counter, a filmstrip for context/jumping, not a photo grid - this is
   one sequential document, not an unordered set of images.
   Built on the --df-* tokens from homepage-redesign.css.
   =================================================================== */

.df-book-page { max-width:1040px; }

.df-photo-crumb {
  font-family:'IBM Plex Mono', monospace; font-size:.74rem; letter-spacing:.04em;
  color:var(--df-muted); margin-bottom:20px;
}
.df-shell .df-photo-crumb a { color:var(--df-muted); text-decoration:none; }
.df-photo-crumb a:hover { color:var(--df-accent); }
.df-photo-empty { color:var(--df-muted); font-size:.9rem; padding:20px 2px; }

.df-book-reader { margin-top:8px; }

/* ---- section labels: name the two ways to move through the book,
   so the filmstrip below reads as "jump to a page" and not as a
   second, redundant thumbnail grid ---- */
.df-book-section-label {
  font-family:'IBM Plex Mono', monospace; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--df-muted); margin:0 0 10px 2px;
}
.df-book-section-label-strip { margin-top:6px; }

/* ---- main stage: one large current page ---- */
.df-book-stage-wrap { display:flex; align-items:center; gap:6px; }
.df-book-stage {
  flex:1; min-width:0; border:1px solid var(--df-border); background:var(--df-panel);
  border-radius:6px; padding:14px; cursor:zoom-in; display:flex; justify-content:center;
}
.df-book-stage-img { max-width:100%; max-height:68vh; display:block; border-radius:2px; }

.df-book-nav {
  flex-shrink:0; width:60px; height:60px; border-radius:999px;
  border:1px solid var(--df-chip-border); background:var(--df-panel); color:var(--df-text);
  font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.df-book-nav:hover { border-color:var(--df-accent); color:var(--df-accent); }
.df-book-nav:disabled { opacity:.35; cursor:default; }
.df-book-nav:disabled:hover { border-color:var(--df-chip-border); color:var(--df-text); }

.df-book-counter {
  text-align:center; font-family:'IBM Plex Mono', monospace; font-size:.78rem;
  letter-spacing:.04em; color:var(--df-muted); margin:14px 0 18px;
}
.df-book-counter-current { color:var(--df-accent); font-weight:600; }

/* ---- filmstrip: small, scrollable, current page highlighted ---- */
.df-book-filmstrip {
  display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px; scroll-behavior:smooth;
}
.df-book-filmstrip-item {
  flex-shrink:0; width:56px; height:auto; padding:0; border:2px solid transparent;
  border-radius:3px; overflow:hidden; cursor:pointer; opacity:.55; background:none;
}
.df-book-filmstrip-item img { width:100%; display:block; }
.df-book-filmstrip-item:hover { opacity:.85; }
.df-book-filmstrip-item.is-current { border-color:var(--df-accent); opacity:1; }

/* ---- zoom overlay for reading fine print ---- */
.df-book-zoom {
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(0,0,0,.9); align-items:center; justify-content:center; padding:30px;
}
.df-book-zoom.is-open { display:flex; }
.df-book-zoom-img { max-width:96vw; max-height:94vh; object-fit:contain; }
.df-book-zoom-close {
  position:absolute; top:22px; right:22px; background:transparent;
  border:1px solid rgba(255,255,255,.25); color:#e9e8e4; border-radius:999px;
  width:44px; height:44px; font-size:1.1rem; cursor:pointer;
}
.df-book-zoom-close:hover { border-color:var(--df-accent); color:var(--df-accent); }

@media (max-width:640px) {
  .df-book-stage-wrap { gap:4px; }
  .df-book-nav { width:44px; height:44px; font-size:1.2rem; }
  .df-book-stage { padding:8px; }
  .df-book-filmstrip-item { width:42px; }
}