:root {
  --desk: #262b25;
  --desk-2: #1c201b;
  --paper: #fbf8f0;
  --ink: #f2efe6;
  --muted: #9aa392;
  --accent: #e9c46a;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 40%, var(--desk) 0%, var(--desk-2) 100%);
  color: var(--ink);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.book {
  position: relative;
  width: calc(var(--pw) * 2);
  height: var(--ph);
  perspective: 2600px;
  cursor: grab;
}
.book.single { width: var(--pw); }
.book.dragging { cursor: grabbing; }

/* soft contact shadow under the book */
.book::before {
  content: "";
  position: absolute;
  left: 4%; right: 4%; bottom: -3%;
  height: 8%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

.leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--pw);
  height: var(--ph);
  transform-origin: left center;
  will-change: transform;
}
.book.single .leaf { left: 0; }

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--paper);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.face.back { transform: rotateY(180deg); }
.face.blank { background-image: none; }

.face img.page-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* spine shading + flip shading */
.face::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    linear-gradient(to right, rgba(0,0,0,.22), rgba(0,0,0,0) 7%);
  box-shadow: inset 0 0 0 0 transparent;
}
.face.back::after {
  background: linear-gradient(to left, rgba(0,0,0,.22), rgba(0,0,0,0) 7%);
}
.shade {
  position: absolute; inset: 0;
  background: #000;
  opacity: var(--shade, 0);
  pointer-events: none;
  z-index: 2;
}

/* controls */
.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
}
.mid { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.count { font-size: 13px; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }

.btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  font-size: 28px; line-height: 1;
  padding: 0 0 4px;
  cursor: pointer;
  transition: background .15s, opacity .15s, transform .1s;
}
.btn:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.btn:active:not(:disabled) { transform: scale(.94); }
.btn:disabled { opacity: .25; cursor: default; }
.btn:focus-visible, .dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.dots { display: flex; gap: 4px; }
.dot {
  width: 22px; height: 22px;
  border: 0; background: none; padding: 0;
  display: grid; place-items: center;
  cursor: pointer;
}
.dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  transition: background .2s, transform .2s;
}
.dot.on::before { background: var(--accent); transform: scale(1.4); }
.dot.active-pair::before { background: rgba(233,196,106,.6); }

@media (max-width: 480px) {
  .dots { gap: 0; }
  .dot { width: 20px; }
  .controls { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
}

/* ---------- live-text pages (same grid as the Figma pages: 198 x 306, 27 margin) ---------- */
.hp {
  position: absolute; inset: 0;
  background: #fff;
  color: #000;
  font-family: 'IBM Plex Sans Condensed', system-ui, sans-serif;
  --u: calc(var(--pw) / 198);
}
.hp-h {
  position: absolute;
  left: calc(var(--u) * 27); top: calc(var(--u) * 27);
  width: calc(var(--u) * 144);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font: 400 calc(var(--u) * 16) / 1.3 'Young Serif', Georgia, serif;
}
/* source line: same style on every page (matches the Example pages in Figma) */
.hp-src {
  position: absolute;
  left: calc(var(--u) * 27); top: calc(var(--u) * 272);
  width: calc(var(--u) * 144);
  margin: 0;
  text-align: center;
  color: #8c8c8c;
  font: 400 calc(var(--u) * 7) / normal 'IBM Plex Sans Condensed', system-ui, sans-serif;
}
.hp-eyebrow {
  position: absolute; left: calc(var(--u) * 27); top: calc(var(--u) * 11);
  margin: 0; color: #8c8c8c; white-space: nowrap;
  font: 400 calc(var(--u) * 8) / 1.3 'Young Serif', Georgia, serif;
}
/* every page: heading starts at 27, body text starts at 81 */
.hp-body {
  position: absolute;
  left: calc(var(--u) * 27); top: calc(var(--u) * 81);
  width: calc(var(--u) * 144);
}
.hp-defs p { margin: 0 0 calc(var(--u) * 1.2); }
.hp-defs b { font-weight: 700; }
.hp-common { font-size: calc(var(--u) * 6.7); line-height: 1.15; }
.hp-common p { margin-bottom: calc(var(--u) * 3.6); }
.hp-emerging { font-size: calc(var(--u) * 7.6); line-height: 1.18; }
.hp-emerging p { margin-bottom: calc(var(--u) * 4); }

/* references: only the title is a link */
.hp-refs { display: flex; flex-direction: column; gap: calc(var(--u) * 7); }
.hp-refs .t { display: inline-block; color: inherit; cursor: pointer;
  font: italic 700 calc(var(--u) * 9) / 1.3 'IBM Plex Sans Condensed', sans-serif;
  text-decoration: underline; text-decoration-thickness: calc(var(--u) * .4); text-underline-offset: calc(var(--u) * 1.2); }
.hp-refs .t:hover { text-decoration-thickness: calc(var(--u) * .8); }
.hp-refs .u { display: block; font-size: calc(var(--u) * 6); line-height: 1.4; }
.hp-refs a:focus-visible, .hp-note a:focus-visible { outline: 2px solid #1a5fb4; outline-offset: 2px; }
.hp-note { position: absolute; left: calc(var(--u) * 27); top: calc(var(--u) * 219); white-space: nowrap;
  margin: 0; font-size: calc(var(--u) * 6); line-height: 1.4; }
.hp-note a { color: inherit; text-decoration: underline; text-decoration-thickness: calc(var(--u) * .35); text-underline-offset: calc(var(--u) * 1); }
.hp-colophon {
  position: absolute; left: calc(var(--u) * 27); top: calc(var(--u) * 232); width: calc(var(--u) * 144);
  text-align: center;
  font: 400 calc(var(--u) * 9) / 1.3 'Young Serif', Georgia, serif;
}
.hp-credit {
  position: absolute; left: calc(var(--u) * 69); transform: translateX(-50%); white-space: nowrap; top: calc(var(--u) * 273); margin: 0;
  text-align: center; color: #8c8c8c;
  font: 400 calc(var(--u) * 4) / 1.3 'IBM Plex Sans Condensed', sans-serif;
}
.hp-art { position: absolute; height: auto; pointer-events: none; }
.hp-art.flip { transform: scaleX(-1); }

/* page numbers: one position on every page */
.pnum {
  position: absolute;
  left: 0; width: 100%;
  top: calc(var(--pw) / 198 * 287);
  text-align: center;
  font: 400 calc(var(--pw) / 198 * 9) / 1.3 'Young Serif', Georgia, serif;
  color: #000;
  pointer-events: none;
  z-index: 1;
}
/* hides the page number baked into the Figma exports (white page behind it) */
.nmask { position: absolute; background: #fff; pointer-events: none;
  top: calc(var(--pw) / 198 * 282); height: calc(var(--pw) / 198 * 24);
  width: calc(var(--pw) / 198 * 20); }
.nmask.left  { left: 0; }
.nmask.right { right: 0; }

.hp-prose { font-size: calc(var(--u) * 9); line-height: 1.3; }
.hp-prose p { margin: 0 0 calc(var(--u) * 11.7); }
.hp-ex { font-size: calc(var(--u) * 9); line-height: 1.3; }
.hp-ex p { margin: 0 0 calc(var(--u) * 4.5); }
.hp-ex b { font-weight: 700; }
.hp-art { object-fit: contain; }

/* cover: replacement for the line baked into the export */
.tmask { position: absolute; background: #fff; pointer-events: none; }
.cover-line {
  position: absolute; left: 0; width: 100%;
  top: calc(var(--u) * 258); margin: 0;
  text-align: center; color: #000; white-space: nowrap;
  font: 400 calc(var(--u) * 13) / normal 'Young Serif', Georgia, serif;
}

.cover-logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(var(--u) * 259); width: calc(var(--u) * 68); height: auto;
  pointer-events: none; -webkit-user-drag: none;
}