/* ============ Tokens ============ */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem;

  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'EB Garamond', Georgia, serif;

  --page-aspect: 0.7727; /* 8.5 / 11 */
  --flip-ms: 620ms;
}

:root, [data-theme='dark'] {
  --color-bg: #0d0b08;
  --color-bg-deep: #070604;
  --color-surface: #16130e;
  --color-surface-2: #1d1912;
  --color-border: #342d20;
  --color-divider: #241f16;
  --color-text: #e8ddc4;
  --color-text-muted: #a3987e;
  --color-text-faint: #6b6250;
  --color-gold: #c9a13b;
  --color-gold-bright: #e3c46a;
  --color-gold-dim: #8a6f2c;
  --paper: #f4efe3;
  --paper-edge: #d9d0ba;
  --leather: #171207;
  --scene-glow: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(201,161,59,0.10), transparent 65%);
  --shadow-book: 0 30px 80px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.5);
  --shadow-leaf: 0 6px 28px rgba(0,0,0,0.45);
  /* crease shading, shared verbatim by static pages and the flip leaf so the
     post-flip swap is invisible — keep these two in sync */
  --crease-left-page: linear-gradient(to left, rgba(20,12,4,0.42), rgba(30,20,8,0.16) 22%, rgba(60,45,20,0.08) 50%, rgba(60,45,20,0.02) 75%, transparent);
  --crease-right-page: linear-gradient(to right, rgba(20,12,4,0.42), rgba(30,20,8,0.16) 22%, rgba(60,45,20,0.08) 50%, rgba(60,45,20,0.02) 75%, transparent);
}

[data-theme='light'] {
  --color-bg: #efe8d8;
  --color-bg-deep: #e5dcc7;
  --color-surface: #f6f1e4;
  --color-surface-2: #fbf8ef;
  --color-border: #cfc4a8;
  --color-divider: #ddd3bb;
  --color-text: #2b2416;
  --color-text-muted: #6e6349;
  --color-text-faint: #a89c7f;
  --color-gold: #8a6a1d;
  --color-gold-bright: #6e5417;
  --color-gold-dim: #b09347;
  --paper: #fdfaf1;
  --paper-edge: #e2d9c2;
  --leather: #201808;
  --scene-glow: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(138,106,29,0.08), transparent 65%);
  --shadow-book: 0 24px 60px rgba(60,45,15,0.30), 0 6px 18px rgba(60,45,15,0.22);
  --shadow-leaf: 0 6px 24px rgba(60,45,15,0.30);
  --crease-left-page: linear-gradient(to left, rgba(60,40,12,0.30), rgba(70,50,18,0.12) 22%, rgba(90,70,30,0.06) 50%, rgba(90,70,30,0.02) 75%, transparent);
  --crease-right-page: linear-gradient(to right, rgba(60,40,12,0.30), rgba(70,50,18,0.12) 22%, rgba(90,70,30,0.06) 50%, rgba(90,70,30,0.02) 75%, transparent);
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background:
    var(--scene-glow),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-deep) 100%);
  background-color: var(--color-bg);
  line-height: 1.5;
}
img, svg { display: block; max-width: 100%; }
input, button { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection { background: rgba(201,161,59,0.3); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }
a, button, input {
  transition: color var(--transition-interactive), background var(--transition-interactive),
    border-color var(--transition-interactive), box-shadow var(--transition-interactive),
    opacity var(--transition-interactive);
}

/* ============ Header ============ */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
  flex: none;
}
.brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.brand-mark { width: 30px; height: 30px; color: var(--color-gold); flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.15;
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.preview-badge {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
  border: 1px solid var(--color-gold-dim);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  border: 1px solid transparent;
}
.icon-btn:hover { color: var(--color-text); border-color: var(--color-border); }

/* ============ Stage & Book ============ */
.stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.book-scene {
  position: relative;
  perspective: 2600px;
  transition: transform 700ms cubic-bezier(0.4, 0.1, 0.2, 1);
}
.book {
  position: relative;
  width: calc(var(--page-w) * 2);
  height: var(--page-h);
  transform-style: preserve-3d;
}
.book::after { /* ground shadow */
  content: '';
  position: absolute;
  left: 4%; right: 4%; bottom: -6%;
  height: 8%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,0.5), transparent 70%);
  filter: blur(10px);
  z-index: -1;
}

.page-slot {
  position: absolute; top: 0;
  width: var(--page-w); height: var(--page-h);
  transform-style: preserve-3d;
}
/* clip each page's drop shadow at the spine so it cannot spill across onto the
   facing page — that spill is hidden by the flip leaf mid-turn and would
   otherwise pop in when the leaf is swapped for the real page */
.slot-left { left: 0; clip-path: inset(-140px 0px -140px -140px); }
.slot-right { left: var(--page-w); clip-path: inset(-140px -140px -140px 0px); }

.page-face {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-book);
}
.page-face img { width: 100%; height: 100%; object-fit: cover; }
.page-face.is-cover { background: var(--leather); }
.page-face.is-blank {
  background:
    radial-gradient(ellipse 120% 100% at 50% 50%, #1b1509 0%, #0f0b05 100%);
}
.page-face.is-blank::after {
  content: '';
  position: absolute; inset: 12px;
  border: 1px solid rgba(201,161,59,0.14);
}
.slot-left .page-face { border-radius: 3px 0 0 3px; }
.slot-right .page-face { border-radius: 0 3px 3px 0; }

/* inner gutter shading on open pages */
.slot-left .page-face:not(.is-cover)::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 14%;
  background: var(--crease-left-page);
  pointer-events: none; z-index: 2;
}
.slot-right .page-face:not(.is-cover)::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 14%;
  background: var(--crease-right-page);
  pointer-events: none; z-index: 2;
}

.spine-shadow {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--page-w) - 3px); width: 6px;
  background: linear-gradient(to right, transparent, rgba(10,6,2,0.55) 35%, rgba(10,6,2,0.55) 65%, transparent);
  z-index: 40;
  /* lifted 2px toward the viewer inside the book's 3D context so it paints
     above the flip leaf at its hinge — the spine line stays constant through
     flips instead of being covered by the landed leaf and popping on removal */
  transform: translateZ(2px);
  opacity: 0; transition: opacity 400ms ease;
}
.book.is-open .spine-shadow { opacity: 1; }

/* page-edge stacks */
.stack {
  position: absolute; top: 1.5%; bottom: 1.5%;
  width: var(--stack-w, 0px);
  background: repeating-linear-gradient(to right, var(--paper-edge) 0 1px, var(--paper) 1px 3px);
  box-shadow: var(--shadow-book);
  transition: width 500ms ease;
}
.stack-left { right: calc(100% - 1px); border-radius: 2px 0 0 2px; }
.stack-right { left: calc(100% - 1px); border-radius: 0 2px 2px 0; }
.stack-left { width: var(--stack-left-w, 0px); }
.stack-right { width: var(--stack-right-w, 0px); }
/* soft volume shading so the thick text block reads as rounded paper,
   not a flat striped slab */
.stack::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.stack-left::after {
  background: linear-gradient(to left, rgba(60,45,20,0.28), transparent 22%, transparent 72%, rgba(0,0,0,0.22));
}
.stack-right::after {
  background: linear-gradient(to right, rgba(60,45,20,0.28), transparent 22%, transparent 72%, rgba(0,0,0,0.22));
}

/* ============ Flip leaf ============ */
.leaf {
  position: absolute; top: 0;
  width: var(--page-w); height: var(--page-h);
  transform-style: preserve-3d;
  z-index: 30;
  will-change: transform;
}
.leaf .leaf-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: var(--paper);
  /* shadow lives on the faces, NOT as a filter on .leaf —
     a filter forces the leaf to flatten its 3D context, which
     makes the second half of the turn render a mirrored front face.
     It fades in/out so it never pops against the settled spread. */
  box-shadow: var(--shadow-leaf);
  animation: leaf-shadow-fade var(--flip-ms) linear forwards;
}
@keyframes leaf-shadow-fade {
  0% { box-shadow: 0 6px 28px rgba(0,0,0,0); }
  22% { box-shadow: var(--shadow-leaf); }
  70% { box-shadow: var(--shadow-leaf); }
  100% { box-shadow: 0 6px 28px rgba(0,0,0,0); }
}
.leaf .leaf-face img { width: 100%; height: 100%; object-fit: cover; }
/* real gutter elements on leaf faces — translucent gradient pseudo-elements are
   unreliably composited on 3D-rotated faces in Chromium, so use real children */
.leaf-gutter {
  position: absolute; top: 0; bottom: 0; width: 14%;
  pointer-events: none; z-index: 2;
}
.leaf-gutter.at-left { left: 0; background: var(--crease-right-page); }
.leaf-gutter.at-right { right: 0; background: var(--crease-left-page); }
.leaf .leaf-back { transform: rotateY(180deg); }
.leaf-face.is-cover { background: var(--leather); }
.leaf-face.is-blank { background: radial-gradient(ellipse 120% 100% at 50% 50%, #1b1509 0%, #0f0b05 100%); }
.leaf-face.is-blank::after { content:''; position:absolute; inset:12px; border:1px solid rgba(201,161,59,0.14); }

.leaf.fwd { left: var(--page-w); transform-origin: left center; animation: flip-fwd var(--flip-ms) cubic-bezier(0.45, 0.05, 0.3, 0.95) forwards; }
.leaf.bwd { left: 0; transform-origin: right center; animation: flip-bwd var(--flip-ms) cubic-bezier(0.45, 0.05, 0.3, 0.95) forwards; }
@keyframes flip-fwd { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes flip-bwd { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }

.leaf .leaf-shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  opacity: 0;
}
.leaf.fwd .leaf-shade { background: linear-gradient(to right, rgba(0,0,0,0.28), transparent 45%); animation: shade var(--flip-ms) ease forwards; }
.leaf.bwd .leaf-shade { background: linear-gradient(to left, rgba(0,0,0,0.28), transparent 45%); animation: shade var(--flip-ms) ease forwards; }
@keyframes shade { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }

/* ============ Edge nav ============ */
.edge-nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
  background: color-mix(in oklab, var(--color-surface) 75%, transparent);
  backdrop-filter: blur(4px);
  z-index: 40;
}
.edge-nav:hover { color: var(--color-gold-bright); border-color: var(--color-gold-dim); }
.edge-nav[disabled] { opacity: 0.25; pointer-events: none; }
.edge-prev { left: clamp(8px, 3vw, 40px); }
.edge-next { right: clamp(8px, 3vw, 40px); }

.hint {
  position: absolute; bottom: var(--space-3); left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  white-space: nowrap;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.hint.is-hidden { opacity: 0; }

/* ============ Toolbar ============ */
.toolbar {
  flex: none;
  display: flex; align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.tool-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  white-space: nowrap;
}
.tool-btn:hover { color: var(--color-gold-bright); border-color: var(--color-border); }

.scrubber { flex: 1; display: flex; align-items: center; min-width: 0; }
#slider {
  width: 100%;
  appearance: none; -webkit-appearance: none;
  height: 4px;
  background: linear-gradient(to right, var(--color-gold) var(--fill, 0%), var(--color-divider) var(--fill, 0%));
  border-radius: var(--radius-full);
  cursor: pointer;
}
#slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-gold-bright);
  border: 2px solid var(--color-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
#slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-gold-bright);
  border: 2px solid var(--color-bg);
}

.page-meta { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.page-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 13ch;
  text-align: right;
}
.page-jump input {
  width: 5.5ch;
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: center;
  -moz-appearance: textfield;
}
.page-jump input::-webkit-outer-spin-button, .page-jump input::-webkit-inner-spin-button { -webkit-appearance: none; }
.page-jump input:focus { border-color: var(--color-gold-dim); outline: none; }

/* ============ TOC drawer ============ */
.toc-drawer {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: min(380px, 88vw);
  background: var(--color-surface);
  border-right: 1px solid var(--color-divider);
  transform: translateX(-102%);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 90;
  display: flex; flex-direction: column;
}
.toc-drawer.is-open { transform: translateX(0); }
.toc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.toc-list { flex: 1; overflow-y: auto; padding: var(--space-3) 0 var(--space-8); scrollbar-width: thin; }
.toc-part {
  display: block; width: 100%; text-align: left;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  border-top: 1px solid var(--color-divider);
}
.toc-list > .toc-part:first-child { border-top: none; }
.toc-part:hover { color: var(--color-gold-bright); background: var(--color-surface-2); }
.toc-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  width: 100%; text-align: left;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.toc-item:hover { color: var(--color-text); background: var(--color-surface-2); }
.toc-item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-item .p { color: var(--color-text-faint); font-variant-numeric: tabular-nums; flex: none; }

.scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity 280ms ease;
  z-index: 80;
}
.scrim.is-on { opacity: 1; pointer-events: auto; }

/* ============ Zoom reader ============ */
.zoom-overlay {
  position: fixed; inset: 0;
  background: rgba(5,4,2,0.92);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity 240ms ease;
}
.zoom-overlay.is-open { opacity: 1; pointer-events: auto; }
.zoom-bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-6);
}
.zoom-label { font-size: var(--text-sm); color: #cbbf9e; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.zoom-controls { display: flex; gap: var(--space-2); }
.zoom-overlay .icon-btn { color: #cbbf9e; border-color: rgba(203,191,158,0.25); }
.zoom-overlay .icon-btn:hover { color: #fff; }
.zoom-scroll { flex: 1; overflow: auto; text-align: center; padding: 0 var(--space-4) var(--space-8); }
.zoom-scroll img {
  display: inline-block;
  width: min(94vw, 980px);
  height: auto;
  background: #f4efe3;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}

/* ============ Responsive ============ */
@media (max-width: 820px) {
  .brand-sub { display: none; }
  .preview-badge { display: none; }
  .site-header { padding: var(--space-2) var(--space-4); }
  .toolbar { gap: var(--space-3); padding: var(--space-2) var(--space-4); flex-wrap: wrap; }
  .tool-btn span { display: none; }
  .page-label { min-width: 0; font-size: var(--text-xs); }
  .scrubber { order: 10; flex-basis: 100%; }
  .edge-nav { width: 38px; height: 38px; }
  .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}