:root{
  --night:#171922; --night2:#11131a; --ivory:#f6f0e8; --paper:#fffdf8; --ink:#201e1a;
  --muted:#817b72; --line:rgba(32,30,26,.13); --accent:#c8784d;
  --serif:"Noto Serif KR","Source Han Serif KR",Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI","Noto Sans KR",sans-serif;
  /* Option B (default): Noto Sans KR — clean reading sans-serif
     Option A (Reader Settings candidate): "Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif
     Noto Serif KR: accent/quote only — never default for body */
  --font-bible:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --reader-paper:#fffdf8; --paper-rule:none;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--night);color:var(--ink)}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
.screen{position:fixed;inset:0;display:none}
.screen.active{display:block}
.hidden{display:none!important}

/* ========== LIBRARY ========== */
.library{
  background:
    radial-gradient(circle at 50% 80%,rgba(74,85,116,.18),transparent 34%),
    linear-gradient(180deg,#191c26 0%,#151821 54%,#101219 100%);
  color:#f7f2ea;
  overflow:hidden;
}
.library::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.11;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.16),transparent 26%);
}
.lib-frame{position:absolute;inset:18px;border:1px solid rgba(246,240,232,.18);pointer-events:none}
.lib-head{position:absolute;left:48px;right:48px;top:44px;z-index:10;display:flex;justify-content:space-between;gap:40px}
.kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,242,234,.66)}
.hero-title{margin:12px 0 0;font:500 clamp(54px,6.8vw,104px)/.86 var(--serif);letter-spacing:-.07em;max-width:1080px}
.hero-title em{font-style:normal;color:#f0dfcf}
.lib-copy{width:330px;margin-top:5px;text-align:right;color:rgba(247,242,234,.64);font-size:12px;line-height:1.7}
.lib-copy strong{display:block;color:#f7f2ea;font-weight:500;margin-bottom:7px}

.shelf-wrap{position:absolute;left:0;right:0;bottom:112px;height:490px;z-index:5;perspective:1600px;perspective-origin:50% 54%}
.shelf-track{position:absolute;left:50%;bottom:52px;width:1px;height:365px;transform-style:preserve-3d}
.shelf-plank{
  position:absolute;left:5%;right:5%;bottom:66px;height:20px;
  background:linear-gradient(90deg,#2a1711,#5a3425 12%,#6b422e 52%,#4b2b20 86%,#24140f);
  transform:perspective(900px) rotateX(68deg);box-shadow:0 18px 28px rgba(0,0,0,.46),0 -2px 0 rgba(226,181,137,.18)
}
.shelf-glow{position:absolute;left:15%;right:15%;bottom:45px;height:95px;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 68%);filter:blur(12px)}

.book-rig{
  --x:0px;--z:0px;--ry:0deg;--s:1;--cloth:#21456b;--foil:#d8c077;--w:150px;--h:350px;--d:46px;
  position:absolute;left:0;bottom:78px;width:var(--w);height:var(--h);transform-style:preserve-3d;
  transform:translateX(var(--x)) translateZ(var(--z)) rotateY(var(--ry)) scale(var(--s));
  transform-origin:50% 100%;transition:transform .78s cubic-bezier(.18,.76,.18,1),filter .35s,opacity .35s;
  /* #1845 [A] non-selected books recede (dim + desaturate) so the selection reads instantly */
  filter:saturate(.72) brightness(.62);opacity:.7;
}
/* #2074 [A] L3: deeper contact shadow under the forward-projected selection */
.book-rig.selected{filter:drop-shadow(0 40px 40px rgba(0,0,0,.55));opacity:1;z-index:15}
.book-rig:hover{filter:drop-shadow(0 22px 18px rgba(0,0,0,.36)) brightness(1.03);opacity:1}
.book-front,.book-back{
  position:absolute;inset:0;overflow:hidden;border-radius:4px 3px 3px 4px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0 1px,transparent 1px 5px),
    var(--cloth);
  box-shadow:inset 0 0 22px rgba(0,0,0,.2);
  backface-visibility:hidden;
}
.book-front{transform:translateZ(calc(var(--d)/2))}
.book-back{transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
.book-spine{
  position:absolute;left:calc(var(--d)/-2);top:0;width:var(--d);height:100%;transform:rotateY(-90deg);
  background:linear-gradient(90deg,rgba(0,0,0,.26),transparent 18% 80%,rgba(255,255,255,.07)),var(--cloth);
  border-radius:5px 2px 2px 5px;box-shadow:inset 0 0 14px rgba(0,0,0,.25)
}
.book-pages{
  position:absolute;right:calc(var(--d)/-2);top:6px;width:var(--d);height:calc(100% - 12px);transform:rotateY(90deg);
  background:repeating-linear-gradient(0deg,#dfd3c0 0 2px,#faf0df 2px 4px);box-shadow:inset 0 0 9px rgba(74,52,32,.2)
}
.cover-copy{
  position:absolute;inset:0;padding:14% 11% 11%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  text-align:center;color:var(--foil);font-family:var(--serif);text-shadow:0 1px 0 rgba(0,0,0,.28)
}
.cover-copy small{font:600 8px/1.4 var(--sans);letter-spacing:.2em}
.cover-copy strong{font-size:clamp(18px,2vw,30px);line-height:1.07;font-weight:500;letter-spacing:-.055em}
.cover-mark{position:relative;width:82px;height:82px;opacity:.84}
.cover-mark::before,.cover-mark::after{content:"";position:absolute;inset:12%;border:1px solid currentColor}
.cover-mark::after{inset:27%;transform:rotate(45deg)}
.spine-copy{position:absolute;inset:10px 4px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;color:var(--foil);writing-mode:vertical-rl;font:500 10px var(--serif);letter-spacing:.08em}

.lib-bottom{
  position:absolute;left:48px;right:48px;bottom:32px;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:30px
}
.sel-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:end}
.counter{font-size:10px;letter-spacing:.16em;color:rgba(247,242,234,.58);padding-bottom:5px}
.sel-title{font:500 clamp(28px,3.2vw,48px)/.95 var(--serif);letter-spacing:-.06em}
.sel-note{margin-top:7px;color:rgba(247,242,234,.86);font-size:11px}
.lib-actions{display:flex;gap:7px}
.round,.open-btn{
  border:1px solid rgba(247,242,234,.24);background:rgba(255,255,255,.07);color:#f7f2ea;backdrop-filter:blur(10px);transition:.2s
}
.round{width:44px;height:44px;border-radius:50%;font-size:18px}
.open-btn{height:44px;border-radius:999px;padding:0 21px;font-size:10px;font-weight:700;letter-spacing:.12em}
.round:hover,.open-btn:hover{background:#f4ecdf;color:#1e1b18;transform:translateY(-2px)}
.markers{justify-self:end;display:flex;align-items:center;gap:6px}
.marker{width:26px;height:26px;border:0;background:transparent;position:relative}
.marker::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:rgba(247,242,234,.35);transform:translate(-50%,-50%);transition:.25s}
.marker.on::after{width:20px;border-radius:4px;background:var(--accent)}

/* transition flash */
.transition-curtain{position:fixed;inset:0;z-index:300;background:#f2ece4;transform:translateY(100%);transition:transform .72s cubic-bezier(.2,.75,.2,1);pointer-events:none}
.transition-curtain.go{transform:translateY(0)}

/* ========== BIBLE INDEX ========== */
.index-screen{background:#eee8de;color:#24211d;overflow:auto}
.index-top{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line);background:rgba(248,245,239,.88);backdrop-filter:blur(14px);position:sticky;top:0;z-index:30}
.wordmark{font:500 21px var(--serif);letter-spacing:-.04em}
.crumb{font-size:10px;letter-spacing:.13em;color:var(--muted)}
.back-btn{border:1px solid var(--line);background:white;border-radius:999px;padding:8px 13px;font-size:10px}
.index-shell{max-width:1180px;margin:36px auto 70px;background:#fffdf9;border:1px solid var(--line);box-shadow:0 35px 80px rgba(55,40,26,.12);min-height:820px}
.index-hero{padding:54px 58px 38px;display:grid;grid-template-columns:1fr 420px;gap:60px;border-bottom:1px solid var(--line)}
.index-hero h1{margin:0;font:500 78px/.88 var(--serif);letter-spacing:-.075em}
.index-hero p{margin:7px 0 0;color:var(--muted);font:400 13px/1.75 var(--sans)}
.resume-card{align-self:end;border:1px solid var(--line);background:#f7f1e8;padding:20px 22px}
.resume-card small{font-size:9px;letter-spacing:.12em;color:var(--muted)}
.resume-card strong{display:block;margin-top:8px;font:500 25px var(--serif)}
.resume-card button{margin-top:14px;border:0;background:#24211d;color:#fff;border-radius:999px;padding:10px 15px;font-size:10px}
.index-body{padding:35px 58px 50px}
.testament-tabs{display:flex;gap:8px;margin-bottom:22px}
.testament-tab{border:1px solid var(--line);background:white;border-radius:999px;padding:8px 12px;font-size:10px}
.testament-tab.on{background:#24211d;color:#fff}
.volume-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.volume{
  border:1px solid var(--line);background:#fff;padding:13px 12px;text-align:left;border-radius:7px;min-height:57px;transition:.18s
}
.volume:hover,.volume.on{border-color:#8c644f;background:#f8f0e7;transform:translateY(-1px)}
.volume b{display:block;font:500 13px var(--serif)}.volume small{display:block;margin-top:5px;color:var(--muted);font-size:9px}
.chapter-area{margin-top:35px;padding-top:26px;border-top:1px solid var(--line)}
.chapter-title{display:flex;align-items:end;justify-content:space-between;gap:20px}
.chapter-title h2{margin:0;font:500 32px var(--serif);letter-spacing:-.04em}
.chapter-title span{font-size:10px;color:var(--muted)}

.chapter-carousel{
  position:relative;margin-top:22px;height:300px;overflow:hidden;
  perspective:1400px;border-radius:14px;
  /* #2074 [B] horizontal drag belongs to the ring; vertical scroll stays native */
  touch-action:pan-y;cursor:grab;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.95),transparent 36%),
    linear-gradient(180deg,#f7f1e8,#eee5d8);
  border:1px solid rgba(55,40,26,.08)
}
.chapter-carousel.chapter-ring-dragging{cursor:grabbing}
/* while gliding/settling, the sheets follow the angle — no per-sheet transition lag */
.chapter-carousel.chapter-ring-live .chapter-stack{transition:none}
.chapter-track{
  position:absolute;left:50%;top:50%;width:1px;height:1px;
  transform-style:preserve-3d
}
/* #2074 [B] ring model. The track carries the ring pivot: translateZ(-R) puts the
   rotation axis behind the sheet plane, rotateY(var(--ring-angle)) is owned by the
   drag controller (0 at rest). Each sheet hangs on the ring via its integer delta
   (--ring-delta × --ring-step). Net z of the centered sheet is exactly 0 → renders
   1:1, keeping the #1845 [C] sharpness contract; neighbors recede on the ring. */
.chapter-track{
  --ring-step:18deg;
  --ring-radius:534px;
  --ring-angle:0deg;
  position:absolute;left:50%;top:50%;width:1px;height:1px;
  transform:translateZ(calc(var(--ring-radius)*-1)) rotateY(var(--ring-angle));
  transform-style:preserve-3d
}
.chapter-stack{
  --ring-delta:0;
  /* #2074 [B] per-sheet pose derives from the effective ring angle, so live drag and
     the release glide stay continuous (no identity-keyed scale pops). cos falloff =
     deliberate recession; the centered sheet is exactly scale(1) at net z=0 — the
     #1845 [C] 1:1 sharpness contract. */
  --eff-angle:calc(var(--ring-angle,0deg) + var(--ring-delta)*var(--ring-step));
  --ring-cos:cos(var(--eff-angle));
  position:absolute;left:0;top:0;width:150px;height:196px;
  transform:translate(-50%,-50%) rotateY(var(--eff-angle)) translateZ(var(--ring-radius)) scale(calc(0.12 + 0.88*var(--ring-cos)));
  transform-style:preserve-3d;transition:.62s cubic-bezier(.2,.74,.2,1);
  filter:saturate(.82) brightness(.9);
  opacity:calc(0.12 + 0.88*var(--ring-cos))
}
/* #1845 [C] selected card must stay un-filtered — brightness()/saturate() promote it
   to its own raster layer and drop-shadow() blurs the rendered text edges.
   (#2074 [B] opacity is angle-driven now, so the old fixed .6/.1 opacity pair is gone.) */
.chapter-stack.on{filter:none;z-index:10}
.paper-layer{
  position:absolute;inset:0;border:1px solid rgba(55,40,26,.12);border-radius:3px;
  background:#fffdf8;box-shadow:0 10px 22px rgba(50,35,23,.09);
  transform-origin:50% 75%;transition:.3s ease
}
.paper-layer:nth-child(1){transform:translate(-9px,8px) rotate(-4deg);background:#eee4d5}
.paper-layer:nth-child(2){transform:translate(-4px,4px) rotate(-1.8deg);background:#f6eee4}
.paper-layer:nth-child(3){transform:translate(4px,3px) rotate(2deg);background:#fbf6ee}
.paper-layer.top{
  transform:translate(0,0) rotate(0);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:18px 16px 16px;background:
    repeating-linear-gradient(0deg,transparent 0 24px,rgba(86,122,158,.075) 24px 25px),
    #fffdf8
}
.chapter-stack.on .paper-layer:nth-child(1){transform:translate(-16px,12px) rotate(-6deg)}
.chapter-stack.on .paper-layer:nth-child(2){transform:translate(-8px,7px) rotate(-3deg)}
.chapter-stack.on .paper-layer:nth-child(3){transform:translate(8px,5px) rotate(3deg)}
.chapter-stack:hover .paper-layer:nth-child(1){transform:translate(-14px,11px) rotate(-7deg)}
.chapter-stack:hover .paper-layer:nth-child(2){transform:translate(-7px,6px) rotate(-3.5deg)}
.chapter-stack:hover .paper-layer:nth-child(3){transform:translate(8px,4px) rotate(3.8deg)}
.chapter-small{font-size:9px;letter-spacing:.14em;color:#7b7063}
.chapter-no{font:500 56px/.9 var(--serif);letter-spacing:-.06em;color:#28241f}
.chapter-preview{font:400 11px/1.55 var(--serif);color:#57504a;text-align:center}
.chapter-nav{
  position:absolute;left:50%;bottom:17px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;z-index:20
}
.chapter-nav button{
  border:1px solid var(--line);background:rgba(255,255,255,.86);border-radius:999px;
  height:35px;min-width:35px;padding:0 12px;font-size:9px;box-shadow:0 7px 18px rgba(55,40,26,.06)
}
.chapter-nav .chapter-open{background:#24211d;color:white;padding:0 18px}
.chapter-dots{
  position:absolute;left:18px;right:18px;top:14px;display:flex;justify-content:center;gap:5px;z-index:15
}
.chapter-dot{width:5px;height:5px;border-radius:50%;background:#b7aca0;border:0;padding:0}
.chapter-dot.on{width:20px;border-radius:999px;background:#bd7954}
.chapter-caption{
  position:absolute;left:18px;bottom:18px;color:#8d8378;font-size:8px;letter-spacing:.12em
}


/* ========== READER ========== */
.reader-screen{background:#ece7df;color:#24211d}
.reader-layout{height:100%;display:grid;grid-template-columns:214px minmax(520px,1fr) 360px}
.memory-rail,.ai-panel{min-height:0;overflow:auto;background:rgba(250,247,242,.94)}
.memory-rail{border-right:1px solid var(--line);padding:22px 14px;background:linear-gradient(180deg,rgba(250,247,242,.96),rgba(246,241,234,.96))}
.ai-panel{border-left:1px solid var(--line);padding:20px 16px 14px;background:linear-gradient(180deg,rgba(250,247,242,.98),rgba(246,241,234,.98));display:flex;flex-direction:column}
.side-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:17px}
.side-head strong{font:500 21px var(--serif)}.side-head small{font-size:8px;letter-spacing:.15em;color:var(--muted)}
.rail-nav{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:16px}
.pill{border:1px solid var(--line);background:white;border-radius:999px;padding:6px 8px;font-size:9px}.pill.on{background:#24211d;color:white}
.memory-item{padding:11px 9px;border-bottom:1px solid var(--line);border-radius:7px}
.memory-item:hover,.memory-item.on{background:white}
.memory-item b{font:500 17px var(--serif)}.memory-item small{display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.5}
.reader-stage{position:relative;display:grid;place-items:center;overflow:hidden;background:
 radial-gradient(circle at 50% 15%,rgba(255,255,255,.92),transparent 39%),#e9e2d7}
.reader-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;background-image:repeating-linear-gradient(0deg,rgba(83,62,41,.025) 0 1px,transparent 1px 5px)}
.reader-nav{position:absolute;top:18px;left:18px;z-index:42;border:1px solid var(--line);background:rgba(255,255,255,.84);backdrop-filter:blur(12px);border-radius:999px;padding:8px 11px;font-size:9px;box-shadow:0 8px 22px rgba(46,33,22,.07)}
.reader-toolbar{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:8px;padding:7px 9px;background:rgba(255,255,255,.86);backdrop-filter:blur(13px);
  border:1px solid var(--line);border-radius:999px;box-shadow:0 10px 28px rgba(46,33,22,.08)
}
.tool-group{display:flex;align-items:center;gap:5px}.tool-group+.tool-group{padding-left:8px;border-left:1px solid var(--line)}
.tool-label{font-size:8px;letter-spacing:.12em;color:var(--muted)}
.swatch{width:20px;height:20px;border-radius:50%;border:1px solid rgba(30,28,24,.18);padding:0}.swatch.on{outline:2px solid #24211d;outline-offset:2px}
.colorpick{width:22px;height:22px;border:0;padding:0;background:transparent}
.rule{height:24px;border:1px solid var(--line);background:#fff;border-radius:7px;padding:0 7px;font-size:9px}.rule.on{background:#24211d;color:#fff}
.voice{height:26px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 9px;font-size:9px}
.paper-stack{position:relative;width:min(780px,82%);height:min(800px,81vh);perspective:1800px}
.under-sheet{position:absolute;inset:2% 1%;background:#e8dfd2;border:1px solid rgba(45,34,24,.07);box-shadow:0 22px 50px rgba(51,36,23,.08);transform-origin:left center}
.under1{transform:translate(-14px,12px) rotate(-1.5deg)}.under2{transform:translate(-7px,6px) rotate(-.7deg)}
.paper{
  position:absolute;inset:0;background-color:var(--reader-paper);
  background-image:var(--paper-rule);background-size:var(--paper-rule-size,auto);
  border:1px solid rgba(45,34,24,.11);box-shadow:0 30px 70px rgba(47,33,22,.13);overflow:hidden
}
.paper-inner{position:absolute;inset:0;overflow:auto;padding:60px clamp(45px,6.5vw,86px) 70px}
.paper-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:28px}
.paper-head h1{margin:0;font:600 clamp(34px,3.9vw,54px)/1.1 var(--font-bible);letter-spacing:-.03em}.paper-head small{font-size:9px;letter-spacing:.1em;color:var(--muted)}
.verse{font:400 clamp(18px,1.5vw,22px)/2 var(--font-bible);margin:0 0 13px;word-break:keep-all;letter-spacing:-.005em}
.vn{display:inline-block;width:26px;color:#988f84;font:600 9px var(--sans);vertical-align:super}
.verse-en{font:400 clamp(13px,1.1vw,15px)/1.7 var(--sans);color:#9a9289;margin:2px 0 18px;padding-left:26px;opacity:.72;letter-spacing:.02em}
.entity{border-bottom:1px dotted #a96f51;background:linear-gradient(transparent 78%,rgba(200,120,77,.1) 0)}
.selection-toolbar{position:fixed;z-index:200;display:none;align-items:center;gap:4px;padding:6px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.97);box-shadow:0 15px 40px rgba(40,29,19,.18)}
.selection-toolbar.show{display:flex}.seltool{border:0;background:transparent;border-radius:7px;padding:7px 8px;font-size:10px}.seltool:hover{background:#f1ece5}
.hl-yellow{background:linear-gradient(transparent 11%,rgba(255,229,83,.65) 11% 90%,transparent 90%)}
.annot-line{text-decoration:underline 2px rgba(147,89,57,.7);text-underline-offset:4px}
.verse.blocked{padding:10px 13px;border-left:3px solid #b1704e;background:rgba(177,112,78,.06);border-radius:0 7px 7px 0}
.reading{background:linear-gradient(90deg,rgba(255,230,99,.25),rgba(255,230,99,.05));border-radius:5px}
.curl-page{
  position:absolute;inset:0;z-index:20;display:none;background:var(--reader-paper);transform-origin:left center;
  box-shadow:-14px 0 28px rgba(47,33,22,.16);backface-visibility:hidden
}
.curl-page.show{display:block}.curl-page::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,rgba(255,255,255,.7) 57%,rgba(43,31,22,.13) 79%,transparent)}
.turn-zone{position:absolute;top:0;bottom:0;width:19%;z-index:25}.turn-zone.left{left:0}.turn-zone.right{right:0}
.curl-hint{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.12em;color:var(--muted)}

.context-card{padding:12px 13px;border:1px solid var(--line);background:white;border-radius:12px}
.context-card small{font-size:8px;letter-spacing:.13em;color:var(--muted)}.context-card b{display:block;margin-top:5px;font:500 18px var(--serif)}
.context-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.context-meta span{font-size:8px;color:#776f65;background:#f5f0e9;border-radius:999px;padding:5px 7px}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0;padding-bottom:2px;scrollbar-width:none}.quick::-webkit-scrollbar{display:none}
.quick button{flex:0 0 auto;border:1px solid var(--line);background:white;border-radius:999px;padding:8px 10px;text-align:left;font-size:9px;white-space:nowrap}
.voice-status{margin-top:2px;padding:9px 10px;border:1px dashed var(--line);border-radius:9px;color:var(--muted);font-size:9px;line-height:1.5}
.chat-thread{flex:1;min-height:0;overflow:auto;margin-top:12px;padding:2px 2px 12px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:92%;font-size:10px;line-height:1.6}
.msg.user{align-self:flex-end;background:#24211d;color:white;padding:9px 11px;border-radius:13px 13px 4px 13px}
.msg.ai{align-self:flex-start;background:white;border:1px solid var(--line);padding:11px 12px;border-radius:13px 13px 13px 4px}
.msg.ai .verified{font-size:7px;font-weight:700;letter-spacing:.12em;color:#52735d;margin-bottom:5px}
.msg.ai h3{margin:0 0 6px;font:500 17px var(--serif)}.msg.ai p{margin:0;color:#504b44}
.msg .source{border-top:1px solid var(--line);padding-top:7px;margin-top:8px;color:var(--muted);font-size:8px;line-height:1.45}
.selection-context-chip{display:none;margin:0 0 7px;padding:8px 10px;background:#fff7e9;border:1px solid rgba(177,112,78,.22);border-radius:10px;font:400 10px/1.45 var(--serif);color:#5a4e45}
.selection-context-chip.show{display:block}
.selection-context-chip .x{float:right;border:0;background:transparent;font:700 10px var(--sans);padding:0 0 0 8px}
.ask{position:sticky;bottom:0;margin-top:auto;padding-top:10px;background:linear-gradient(transparent,#f8f4ee 28%)}
.chat-compose{display:grid;grid-template-columns:1fr 34px;gap:7px;align-items:center}
.ask input{width:100%;height:38px;border:1px solid var(--line);background:white;border-radius:999px;padding:0 13px;font-size:10px;outline:none}
.ask input:focus{border-color:#8e6b57;box-shadow:0 0 0 3px rgba(142,107,87,.08)}
.send-btn{width:34px;height:34px;border:0;border-radius:50%;background:#24211d;color:white;font-size:14px}
.send-btn:disabled{opacity:.28}
.chat-hint{margin-top:6px;padding:0 4px;font-size:8px;color:#948a7f}
.mobile-dock{display:none}
.sheet-close{display:none}
.scrim{display:none}



.memory-section-label{margin:18px 8px 6px;font-size:8px;letter-spacing:.14em;color:#958b80}
.annotation-counts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 16px}
.annotation-stat{border:1px solid var(--line);background:rgba(255,255,255,.72);border-radius:9px;padding:9px}
.annotation-stat b{display:block;font:500 16px var(--serif)}.annotation-stat span{display:block;margin-top:2px;font-size:8px;color:var(--muted)}
.hl-mint{background:linear-gradient(transparent 11%,rgba(151,229,189,.62) 11% 90%,transparent 90%)}
.hl-pink{background:linear-gradient(transparent 11%,rgba(255,178,204,.58) 11% 90%,transparent 90%)}
.hl-blue{background:linear-gradient(transparent 11%,rgba(157,204,255,.56) 11% 90%,transparent 90%)}
.highlight-picker{display:flex;gap:4px;padding:0 3px}
.hl-dot{width:18px;height:18px;border-radius:50%;border:1px solid rgba(45,34,24,.13);padding:0}
.voice-toast{position:absolute;right:22px;bottom:22px;z-index:60;display:none;max-width:300px;padding:10px 12px;background:rgba(36,33,29,.92);color:white;border-radius:11px;font-size:9px;line-height:1.5;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.voice-toast.show{display:block}


/* ===== v0.7 editorial visual system ===== */
:root{
  --night:#151821;
  --ink:#211f1b;
  --muted:#827a70;
  --accent:#b96f49;
  --paper-shadow:rgba(57,42,27,.14);
}
body{background:#ebe6de}

/* Library: deeper, less demo-like */
.library{
  background:
    radial-gradient(ellipse at 50% 72%,rgba(119,134,175,.13),transparent 30%),
    radial-gradient(circle at 18% 18%,rgba(255,237,213,.06),transparent 26%),
    linear-gradient(180deg,#171a24 0%,#13161f 62%,#0f1118 100%);
}
.library::after{
  content:"";position:absolute;left:11%;right:11%;bottom:96px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(236,205,171,.18),transparent);
}
.lib-frame{inset:14px;border-color:rgba(246,240,232,.11)}
.kicker{letter-spacing:.22em}
.hero-title{font-weight:400;line-height:.84;max-width:920px;text-shadow:0 10px 35px rgba(0,0,0,.16)}
.hero-title em{color:#ead7c5}
.lib-copy{font-size:11px;line-height:1.8}
.book-front::after{
  content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--foil) 35%,transparent);
  border-radius:2px;pointer-events:none;
}
.book-rig.selected .book-front::before{
  content:"";position:absolute;inset:-40px;z-index:-1;
  background:radial-gradient(circle,rgba(237,205,163,.10),transparent 58%);
}
.cover-mark{width:70px;height:70px}
.sel-title{font-weight:400}
.open-btn{background:rgba(242,233,220,.92);color:#1b1917;border-color:rgba(255,255,255,.2)}
.round{background:rgba(255,255,255,.035)}
.lib-actions{align-items:center}

/* Bible index becomes a tactile book-to-paper transition */
.index-screen{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.75),transparent 26%),
    linear-gradient(#ece6dd,#e7dfd4);
}
.index-shell{border-radius:2px;overflow:hidden;box-shadow:0 36px 100px rgba(54,39,25,.11)}
.index-hero{background:linear-gradient(135deg,#fffdf9,#fbf7f1)}
.index-hero h1{font-weight:400}
.index-body{background:#f7f1e8}
.testament-tabs{margin-bottom:18px}
.testament-tab{background:transparent;border-color:rgba(55,40,26,.15)}
.testament-tab.on{background:#24211d}

/* Bible volumes as miniature cloth-bound books */
.volume-grid{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:7px;
  min-height:158px;
  /* #2074 [A] top headroom raised 20→46px: the lifted selected volume (lift 26px +
     scale 1.16) previously clipped against the grid top edge (scratch vol_clip finding) */
  padding:46px 18px 16px;
  overflow-x:auto;
  border:1px solid rgba(60,45,31,.10);
  background:
    linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,.10)),
    #eee4d7;
  box-shadow:inset 0 -22px 34px rgba(91,64,39,.05);
  scrollbar-width:none;
}
.volume-grid::-webkit-scrollbar{display:none}
.volume-grid::after{
  content:"";position:absolute;left:14px;right:14px;bottom:9px;height:8px;
  background:linear-gradient(90deg,#543a2a,#76533a 48%,#513526);
  transform:perspective(500px) rotateX(58deg);
  box-shadow:0 8px 12px rgba(57,39,25,.18);
}
.volume{
  --cloth:#5c4d40;
  flex:0 0 66px;
  height:118px;
  padding:0;
  border:0;
  border-radius:4px 3px 2px 3px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px),
    var(--cloth);
  color:#f2e5d4;
  box-shadow:inset 0 0 14px rgba(0,0,0,.15),0 9px 12px rgba(55,37,22,.12);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:stretch;
  position:relative;
  overflow:hidden;
  transform-origin:50% 100%;
  transition:transform .28s ease,filter .28s ease,box-shadow .28s ease;
}
.volume:nth-child(4n+1){--cloth:#5f473b}
.volume:nth-child(4n+2){--cloth:#3e5860}
.volume:nth-child(4n+3){--cloth:#62604a}
.volume:nth-child(4n){--cloth:#624340}
.volume::before{
  content:"";position:absolute;left:0;right:0;top:10px;height:1px;
  background:rgba(232,203,162,.38);
  box-shadow:0 5px 0 rgba(232,203,162,.16),0 77px 0 rgba(232,203,162,.18);
}
.volume b{
  position:relative;z-index:2;
  padding:8px 6px 3px;
  min-height:48px;
  color:#f4eadc;
  font:500 11px/1.25 var(--serif);
  text-align:center;
  word-break:keep-all;
}
.volume small{
  position:relative;z-index:2;
  padding:0 5px 8px;
  color:rgba(244,234,220,.62);
  font-size:7px;
  text-align:center;
}
.volume:hover{transform:translateY(-7px) rotate(-1deg);background-color:var(--cloth)}
/* #1845 [A] selected volume: clear forward projection + legible meta micro-label;
   non-selected recede via dimmed siblings.
   #2074 [A] owner-preview G2 numbers (lift 26px, scale 1.16, shadow .34, outline 2px).
   The identical transform/shadow is repeated in the later .volume.on blocks
   (foundation ~1428 / ~4360 / ~4858) that previously masked this intent. */
.volume.on{
  transform:translateY(-26px) scale(1.16) rotateX(-1deg) rotateY(-2deg);
  filter:none;
  background-color:var(--cloth);
  box-shadow:inset 0 0 14px rgba(0,0,0,.12),0 32px 38px rgba(55,37,22,.34),0 0 0 1px rgba(231,201,161,.30);
  outline:2px solid rgba(185,111,73,.65);
}
/* #2074 [A] G3: non-selected volumes recede while a selection is active */
.volume-grid:has(.on) .volume:not(.on){opacity:.42;filter:brightness(.82)}
.volume.on small{color:rgba(255,248,238,.95);font-weight:500}
.volume:focus-visible{outline:2px solid #e7c9a1;outline-offset:2px}
.chapter-area{border-top:0;margin-top:42px;padding-top:0}
.chapter-title{margin-bottom:4px}
.chapter-title small{display:block;margin-bottom:5px;font-size:8px;letter-spacing:.15em;color:#9a8f83}
.chapter-title h2{font-weight:400}

/* Paper-stack chapter navigator */
.chapter-carousel{
  height:325px;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.96),transparent 35%),
    linear-gradient(180deg,#f6efe5,#ebe0d2);
  border-color:rgba(61,44,29,.08);
  box-shadow:inset 0 1px rgba(255,255,255,.7);
}
.chapter-stack{width:156px;height:202px}
.chapter-stack .paper-layer{
  border-color:rgba(60,44,31,.10);
  box-shadow:0 14px 28px rgba(49,35,22,.09)
}
.chapter-stack.on .paper-layer.top{
  background:
    repeating-linear-gradient(0deg,transparent 0 24px,rgba(82,117,151,.065) 24px 25px),
    linear-gradient(145deg,#fffefb,#fbf6ee);
}
.chapter-stack.on{filter:none}
.chapter-no{font-size:62px;font-weight:400}
.chapter-preview{max-width:112px}
.chapter-nav button{backdrop-filter:blur(10px)}
.chapter-nav .chapter-open{background:#211f1b}
.chapter-caption{letter-spacing:.16em}

/* Reader: calmer editorial reading desk */
.reader-screen{
  background:
    radial-gradient(ellipse at 50% 5%,rgba(255,255,255,.72),transparent 31%),
    #e9e3da;
}
.reader-stage{
  background:
    radial-gradient(ellipse at 50% 18%,rgba(255,255,255,.90),transparent 36%),
    linear-gradient(135deg,#ece7df,#e7e0d6);
}
.reader-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:repeating-linear-gradient(90deg,rgba(57,43,31,.017) 0 1px,transparent 1px 5px);
}
.reader-stage-brand{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:30;
  font-size:7px;letter-spacing:.18em;color:#9b9186;pointer-events:none
}
.reader-nav{
  top:18px;left:18px;
  border:0;background:transparent;box-shadow:none;
  color:#756d64;padding:8px 6px
}
.reader-nav:hover{color:#211f1b}
.reader-toolbar{
  top:46px;
  padding:6px 8px;
  background:rgba(255,255,255,.70);
  border-color:rgba(55,41,28,.10);
  box-shadow:0 8px 22px rgba(46,33,22,.05)
}
.tool-label{font-size:7px;color:#9c9286}
.rule{height:22px;border-color:rgba(55,41,28,.10)}
.voice{height:24px;border-color:rgba(55,41,28,.10)}
.swatch{width:18px;height:18px}
.paper-stack{width:min(760px,80%);height:min(790px,80vh)}
.under-sheet{border-color:rgba(45,34,24,.05);box-shadow:0 18px 44px rgba(51,36,23,.06)}
.under1{transform:translate(-18px,14px) rotate(-1.9deg)}
.under2{transform:translate(-9px,7px) rotate(-.9deg)}
.paper{
  border-color:rgba(49,36,24,.09);
  box-shadow:
    0 34px 80px rgba(55,39,25,.13),
    0 1px 0 rgba(255,255,255,.8) inset;
}
.paper::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:
    radial-gradient(circle at 17% 13%,rgba(123,92,59,.035) 0 1px,transparent 1.2px),
    radial-gradient(circle at 69% 61%,rgba(123,92,59,.025) 0 1px,transparent 1.2px);
  background-size:21px 23px,29px 31px;
  mix-blend-mode:multiply;
}
.paper-inner{padding:72px clamp(48px,6.2vw,82px) 84px}
.paper-eyebrow{
  display:flex;justify-content:space-between;gap:20px;
  margin-bottom:20px;color:#9b9185;font-size:7px;letter-spacing:.16em
}
.paper-head{padding-bottom:17px;margin-bottom:30px}
.paper-head h1{font-size:clamp(36px,3.7vw,50px);font-weight:600}
.paper-head h1 em{font-style:normal;color:#a86443}
.paper-head small{color:#9b9185}
.verse{font-weight:400;color:#28251f;letter-spacing:-.005em;word-break:keep-all}
.vn{color:#b3a798}
.entity{
  border-bottom:1px dotted rgba(169,111,81,.64);
  background:linear-gradient(transparent 83%,rgba(193,126,87,.08) 0)
}
.reading-progress-edge{
  position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:#9b9186;font-size:7px;letter-spacing:.12em;z-index:12
}
.progress-line{display:block;width:1px;height:108px;background:#d8cec1;position:relative}
.progress-line i{position:absolute;left:-1px;top:0;width:3px;height:32%;background:#b96f49;border-radius:99px}
.progress-label{writing-mode:vertical-rl}

/* Memory rail: marginalia, not dashboard */
.memory-rail{
  background:linear-gradient(180deg,#f7f3ed,#f3eee7);
  padding:26px 14px 20px;
}
.side-head{padding:0 7px 14px;margin-bottom:7px;border-bottom:1px solid rgba(46,35,25,.09)}
.side-head strong{font-weight:400}
.rail-nav{padding:8px 5px 7px;margin-bottom:8px}
.pill{background:transparent;border-color:transparent;color:#837a70;padding:5px 6px}
.pill.on{background:transparent;color:#211f1b;border-bottom:1px solid #b96f49;border-radius:0}
.memory-section-label{margin:15px 7px 6px}
.annotation-counts{grid-template-columns:1fr 1fr;gap:0;margin:0 5px 15px;border-top:1px solid rgba(46,35,25,.08);border-bottom:1px solid rgba(46,35,25,.08)}
.annotation-stat{border:0;border-radius:0;background:transparent;padding:10px 7px}
.annotation-stat+.annotation-stat{border-left:1px solid rgba(46,35,25,.08)}
.annotation-stat b{font-size:18px;font-weight:400}
.memory-item{
  position:relative;padding:12px 7px 12px 38px;border-bottom:1px solid rgba(46,35,25,.08);border-radius:0;background:transparent
}
.memory-item::before{
  content:attr(data-index);position:absolute;left:7px;top:13px;
  color:#aaa095;font-size:7px;letter-spacing:.12em
}
.memory-item:hover,.memory-item.on{background:rgba(255,255,255,.38)}
.memory-item.on::after{
  content:"";position:absolute;left:0;top:13px;bottom:13px;width:2px;background:#b96f49
}
.memory-item b{font-size:16px;font-weight:400}


/* ===== v3.1.8 P1 Answer Safety & Routing ===== */
.answer-contract{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 7px}
.route-badge,.spoiler-badge{display:inline-flex;align-items:center;min-height:18px;padding:2px 6px;border-radius:999px;font:700 6px var(--sans);letter-spacing:.08em;border:1px solid rgba(66,53,42,.10);background:#f4eee7;color:#75685d}
.route-badge.route-known-fact{background:#edf4ee;color:#53705b;border-color:rgba(83,112,91,.16)}
.route-badge.route-supported-text{background:#edf2f6;color:#536b7d;border-color:rgba(83,107,125,.16)}
.route-badge.route-interpretation{background:#f7f1e7;color:#8b6a43;border-color:rgba(139,106,67,.16)}
.route-badge.route-unknown{background:#f2eeee;color:#846565;border-color:rgba(132,101,101,.16)}
.route-badge.route-known{background:#edf4ee;color:#53705b;border-color:rgba(83,112,91,.16)}
.spoiler-badge.safe{background:#f6f4ef;color:#82776e}.spoiler-badge.blocked{background:#fff1e7;color:#a45e38;border-color:rgba(164,94,56,.18)}
.answer-disambiguation{display:flex;gap:5px;flex-wrap:wrap;margin:9px 0 2px}.answer-disambiguation button{border:1px solid rgba(79,61,47,.12);background:#fffaf4;border-radius:999px;padding:6px 9px;color:#685d54;font-size:8px}

/* AI: a research margin, not a pile of cards */
.ai-panel{
  background:linear-gradient(180deg,#f7f4ef,#f2ede6);
  padding:26px 16px 14px
}
.context-card{
  border:0;border-radius:0;border-bottom:1px solid rgba(46,35,25,.09);
  background:transparent;padding:10px 7px 14px
}
.context-card b{font-size:19px;font-weight:400}
.context-meta span{background:rgba(255,255,255,.55);font-size:7px}
.quick{margin:10px 0 4px;padding:0 2px 8px;border-bottom:1px solid rgba(46,35,25,.08)}
.quick button{
  border:0;background:rgba(255,255,255,.50);
  padding:7px 9px;font-size:8px
}
.voice-status{
  border:0;border-radius:0;padding:8px 6px;margin-top:4px;
  color:#9a9084;font-size:8px
}
.chat-thread{gap:13px;padding:5px 2px 16px}
.msg.user{background:#27241f;border-radius:14px 14px 3px 14px;padding:9px 11px}
.msg.ai{
  max-width:100%;border:0;border-radius:0;background:transparent;
  padding:10px 7px 14px;border-bottom:1px solid rgba(46,35,25,.08)
}
.msg.ai .verified{color:#667a69}
.msg.ai h3{font-size:19px;font-weight:400}
.msg.ai p{font-size:10px;line-height:1.7}
.msg .source{border-top:0;padding-top:6px;margin-top:5px}
.ask{padding-top:11px;background:linear-gradient(transparent,#f3eee7 28%)}
.chat-compose{grid-template-columns:1fr 36px}
.ask input{
  height:40px;border-color:rgba(46,35,25,.12);background:rgba(255,255,255,.78)
}
.send-btn{width:36px;height:36px;background:#b96f49}
.chat-hint{color:#a09589}
.selection-context-chip{background:#fff8ef;border-color:rgba(185,111,73,.20)}

/* floating selection becomes a tool strip */
.selection-toolbar{
  border-color:rgba(48,35,23,.10);border-radius:999px;
  padding:5px 7px;background:rgba(255,255,255,.95)
}
.seltool{border-radius:999px}
.hl-dot{width:16px;height:16px}

/* desktop detail: the center must dominate */
@media(min-width:1181px){
  .reader-layout{grid-template-columns:204px minmax(640px,1fr) 340px}
}

/* mobile polish */
@media(max-width:720px){
  .reader-stage-brand{top:14px;font-size:6px}
  .reader-nav{top:42px}
  .reader-toolbar{
    top:10px;
    left:auto;right:9px;transform:none!important;
    max-width:48px;width:48px;height:34px;overflow:hidden;
    justify-content:flex-start;padding:5px 7px;
    border-radius:999px;
  }
  body.reader-settings-open .reader-toolbar{
    max-width:calc(100% - 18px);width:auto;height:auto;left:9px;right:9px;
    overflow-x:auto;
  }
  .reader-toolbar::before{
    content:"Aa";display:block;flex:0 0 30px;text-align:center;
    font:500 12px var(--serif);color:#4f4942
  }
  .reader-toolbar .tool-group{display:none}
  body.reader-settings-open .reader-toolbar .tool-group{display:flex}
  body.reader-settings-open .reader-toolbar::before{content:"×"}
  .paper-inner{padding:92px 25px 98px}
  .paper-eyebrow{font-size:6px;margin-bottom:14px}
  .paper-head h1{font-size:32px}
  .paper-head{margin-bottom:24px}
  .reading-progress-edge{display:none}
  .verse{font-size:17px;line-height:1.92}
  .mobile-dock{
    left:18px;right:18px;height:50px;
    background:rgba(250,248,244,.88);border-color:rgba(53,39,27,.10)
  }
  .mobile-dock button{font-size:8px;letter-spacing:.05em}
  .mobile-dock .read-tab{background:#211f1b}
  .memory-rail,.ai-panel{background:#f5f0e9}
  .ai-panel .quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .ai-panel .quick::-webkit-scrollbar{display:none}
  .volume-grid{min-height:145px;padding-left:12px;padding-right:12px}
  .volume{flex-basis:61px;height:108px}
}


/* ===== v0.8 refinement pass ===== */

/* shared micro details */
button{transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease}
button:active{transform:translateY(1px)}
::selection{background:rgba(244,212,88,.46);color:inherit}

/* LIBRARY — make it feel like a curated room instead of a demo carousel */
.library::before{
  opacity:.14;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 5px),
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.12),transparent 24%);
}
.shelf-wrap::before{
  content:"";position:absolute;left:50%;bottom:64px;width:min(860px,72vw);height:250px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(210,177,142,.075),transparent 64%);
  filter:blur(10px);pointer-events:none
}
.book-rig{transition:transform .82s cubic-bezier(.18,.76,.18,1),filter .38s,opacity .38s}
/* #2074 [A] L3: the selected book holds a deliberate forward pose (lift + near-plane
   projection); the non-selected recession keeps the shelf depth hierarchy */
.book-rig.selected{
  transform:translateX(var(--x)) translateY(-26px) translateZ(var(--z)) rotateY(var(--ry)) rotateX(-1.5deg) scale(var(--s));
}
.book-rig.selected .book-front{
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 30px 36px rgba(0,0,0,.20)
}
/* #1845 [A] selected-state meta legibility on the shelf */
.book-rig.selected .cover-copy strong{opacity:1;text-shadow:0 1px 10px rgba(0,0,0,.36)}
.book-rig:not(.selected) .cover-copy strong{opacity:.6}
.cover-copy strong{max-width:88%;text-wrap:balance}
.cover-copy::after{
  content:"";position:absolute;left:17%;right:17%;bottom:15%;height:1px;background:color-mix(in srgb,var(--foil) 38%,transparent)
}
.sel-progress{display:flex;align-items:center;gap:9px;margin-top:9px;color:rgba(247,242,234,.82);font-size:8px;letter-spacing:.08em}
.sel-progress i{display:block;width:92px;height:2px;background:rgba(255,255,255,.17);border-radius:2px;overflow:hidden}
.sel-progress b{display:block;width:32%;height:100%;background:#c47a50;border-radius:2px}
.open-btn{box-shadow:0 8px 24px rgba(0,0,0,.12)}
.marker.on::after{box-shadow:0 0 0 4px rgba(196,122,80,.08)}

/* INDEX — selected mini-book should visually hand off into chapter paper */
.volume-grid{border-radius:3px}
.volume{isolation:isolate}
.volume::after{
  content:"";position:absolute;inset:4px;border:1px solid rgba(235,211,178,.14);border-radius:2px;pointer-events:none
}
.volume.on::after{border-color:rgba(240,217,182,.28)}
.volume-focus{
  margin:26px 0 0;
  padding:15px 4px 18px;
  display:grid;grid-template-columns:240px 1fr;align-items:end;gap:26px;
  border-bottom:1px solid rgba(54,40,27,.10)
}
.volume-focus small{display:block;margin-bottom:5px;color:#9a8e81;font-size:7px;letter-spacing:.16em}
.volume-focus strong{font:400 26px var(--serif);letter-spacing:-.035em}
.volume-focus p{margin:0;color:#887e72;font-size:9px;line-height:1.6;text-align:right}
.chapter-carousel::before{
  content:"";position:absolute;left:7%;right:7%;bottom:66px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(76,55,36,.10),transparent)
}
.chapter-stack.on .paper-layer:nth-child(1){animation:fanLeft 4.6s ease-in-out infinite}
.chapter-stack.on .paper-layer:nth-child(2){animation:fanLeft2 4.6s ease-in-out infinite}
.chapter-stack.on .paper-layer:nth-child(3){animation:fanRight 4.6s ease-in-out infinite}
@keyframes fanLeft{
  0%,100%{transform:translate(-16px,12px) rotate(-6deg)}
  50%{transform:translate(-20px,14px) rotate(-7.2deg)}
}
@keyframes fanLeft2{
  0%,100%{transform:translate(-8px,7px) rotate(-3deg)}
  50%{transform:translate(-10px,9px) rotate(-3.7deg)}
}
@keyframes fanRight{
  0%,100%{transform:translate(8px,5px) rotate(3deg)}
  50%{transform:translate(11px,6px) rotate(4deg)}
}
.chapter-stack.on .paper-layer.top{
  box-shadow:0 26px 46px rgba(51,36,23,.17),0 3px 8px rgba(51,36,23,.08);
}
.chapter-stack.on .chapter-no{color:#a6613f}
.chapter-preview{line-height:1.58}
.chapter-open{box-shadow:0 8px 22px rgba(45,32,22,.12)}

/* PAGE MORPH — chapter paper turns into the reader sheet */
.paper-morph{
  position:fixed;z-index:500;display:none;
  background:#fffdf8;border:1px solid rgba(54,40,27,.12);
  box-shadow:0 32px 90px rgba(42,31,21,.20);
  transform-origin:center;
  pointer-events:none;
}
.paper-morph.show{display:block}
.paper-morph-inner{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(0deg,transparent 0 28px,rgba(82,117,151,.055) 28px 29px),
    #fffdf8;color:#28241f
}
.paper-morph-inner span,.paper-morph-inner small{font-size:7px;letter-spacing:.18em;color:#998f83}
.paper-morph-inner strong{font:400 72px/.9 var(--serif);color:#a6613f;margin:14px 0 10px}

/* READER — more like a designed reading surface, less like three columns */
.reader-layout{background:#ebe5dc}
.reader-stage-brand{opacity:.8}
.reader-nav,.focus-toggle{
  position:absolute;z-index:42;border:0;background:transparent;box-shadow:none;
  color:#7b7268;padding:8px 6px;font-size:8px;letter-spacing:.08em
}
.reader-nav{left:18px}
.focus-toggle{right:18px;top:18px}
.focus-toggle:hover,.reader-nav:hover{color:#211f1b}
body.focus-reading .reader-layout{grid-template-columns:0 minmax(0,1fr) 0}
body.focus-reading .memory-rail,body.focus-reading .ai-panel{opacity:0;pointer-events:none;overflow:hidden;padding-left:0;padding-right:0;border:0}
body.focus-reading .paper-stack{width:min(820px,78%);height:min(820px,84vh)}
body.focus-reading .focus-toggle{color:#a6613f}
.memory-rail,.ai-panel{transition:opacity .28s ease,width .28s ease,padding .28s ease}
.paper-stack{transition:width .32s ease,height .32s ease}
.paper{overflow:hidden}
.paper-inner{
  scrollbar-width:thin;scrollbar-color:rgba(109,94,78,.34) transparent;
}
.paper-inner::-webkit-scrollbar{width:5px}
.paper-inner::-webkit-scrollbar-track{background:transparent}
.paper-inner::-webkit-scrollbar-thumb{background:rgba(109,94,78,.28);border-radius:10px}
.paper-eyebrow{border-bottom:0}
.paper-head{position:relative}
.paper-head::after{
  content:"";position:absolute;left:0;bottom:-1px;width:54px;height:1px;background:#b96f49
}
.paper-footer{
  margin-top:36px;padding-top:14px;border-top:1px solid rgba(52,39,27,.08);
  display:flex;justify-content:space-between;gap:20px;
  color:#aaa095;font-size:6px;letter-spacing:.15em
}
.reading-progress-edge{right:-34px}
.progress-line{height:126px}

/* Memory becomes an editorial index */
.memory-item{transition:background .18s ease,padding .18s ease}
.memory-item:hover{padding-left:41px}
.memory-item.on b{color:#a6613f}
.annotation-stat b{color:#433d36}

/* AI panel as a quiet conversational margin */
.context-rule{display:flex;align-items:center;gap:7px;margin-top:9px;color:#9b9185;font-size:7px}
.context-rule i{display:block;width:18px;height:1px;background:#b96f49}
.chat-thread{padding-right:4px}
.msg.ai{position:relative}
.msg.ai::before{
  content:"";position:absolute;left:0;top:13px;width:2px;height:18px;background:#c58b6a;opacity:.55
}
.msg.ai h3,.msg.ai p,.msg.ai .source,.msg.ai .verified{margin-left:8px}
.msg.user{box-shadow:0 7px 18px rgba(40,30,22,.08)}
.send-btn{box-shadow:0 7px 16px rgba(166,97,63,.18)}
.quick button:hover{background:#fff}
.selection-context-chip{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}

/* selection tools */
.selection-toolbar{box-shadow:0 14px 36px rgba(42,31,21,.15)}
.selection-toolbar::after{
  content:"";position:absolute;left:50%;bottom:-5px;width:9px;height:9px;
  background:inherit;border-right:1px solid rgba(48,35,23,.10);border-bottom:1px solid rgba(48,35,23,.10);
  transform:translateX(-50%) rotate(45deg)
}
.seltool{position:relative;z-index:1}

/* tablet / mobile */
@media(max-width:980px) and (min-width:721px) and (orientation:landscape){
  .focus-toggle{right:332px}
  body.focus-reading .reader-layout{grid-template-columns:1fr}
  body.focus-reading .ai-panel{display:none}
  .volume-focus{grid-template-columns:180px 1fr}
}
@media(max-width:720px){
  .focus-toggle{display:none}
  .volume-focus{grid-template-columns:1fr;gap:5px;padding-left:2px;padding-right:2px}
  .volume-focus p{text-align:left}
  .paper-footer{font-size:5px;margin-top:28px}
  .paper-footer span:first-child{display:none}
  .paper-morph-inner strong{font-size:58px}
  .reader-stage-brand{left:14px;transform:none;gap:7px}
  .reader-stage-brand span:last-child{display:none}
}


/* ===== v0.9 visual refinement ===== */

/* Library — cinematic but restrained */
.library{
  background:
    radial-gradient(ellipse at 50% 80%,rgba(105,118,156,.16),transparent 30%),
    radial-gradient(circle at 82% 18%,rgba(211,165,124,.055),transparent 24%),
    radial-gradient(circle at 12% 17%,rgba(158,187,220,.04),transparent 22%),
    linear-gradient(180deg,#181b25 0%,#141720 58%,#10121a 100%);
}
.library-orbit{
  position:absolute;border:1px solid rgba(245,236,223,.045);border-radius:50%;
  pointer-events:none;z-index:1
}
.orbit-a{width:720px;height:720px;left:-360px;top:-330px}
.orbit-b{width:520px;height:520px;right:-250px;bottom:-220px}
.collection-stamp{
  position:absolute;right:50px;top:198px;z-index:8;width:120px;
  color:rgba(245,236,223,.46);text-align:right
}
.collection-stamp span,.collection-stamp small{
  display:block;font-size:6px;letter-spacing:.18em
}
.collection-stamp strong{
  display:block;margin:6px 0 5px;font:400 14px/1.08 var(--serif);letter-spacing:.02em;color:rgba(245,236,223,.68)
}
.shelf-reflection{
  position:absolute;left:12%;right:12%;bottom:20px;height:130px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 68%);
  transform:perspective(760px) rotateX(64deg);filter:blur(10px);opacity:.55
}
.book-rig::after{
  content:"";position:absolute;left:14%;right:14%;bottom:-23px;height:24px;
  background:radial-gradient(ellipse,rgba(0,0,0,.34),transparent 70%);
  transform:translateZ(-10px) rotateX(76deg);filter:blur(3px);opacity:.75
}
.book-rig.selected::after{opacity:.95;filter:blur(4px)}
.book-rig.selected .cover-mark{
  animation:markBreath 5.2s ease-in-out infinite
}
@keyframes markBreath{
  0%,100%{opacity:.74;transform:scale(.98)}
  50%{opacity:.96;transform:scale(1.025)}
}
.cover-copy small:first-child{opacity:.78}
.cover-copy small:last-child{opacity:.58}
.lib-bottom::before{
  content:"";position:absolute;left:0;right:0;top:-18px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 55%)
}

/* Bible index — illuminated manuscript / library catalogue */
.index-shell{
  background:
    linear-gradient(90deg,rgba(121,90,57,.026) 1px,transparent 1px),
    linear-gradient(180deg,rgba(121,90,57,.018) 1px,transparent 1px),
    #fffdf9;
  background-size:36px 36px;
}
.index-hero{position:relative}
.index-hero::after{
  content:"";position:absolute;right:58px;top:30px;width:76px;height:76px;
  border:1px solid rgba(111,78,49,.10);border-radius:50%;
  box-shadow:inset 0 0 0 10px rgba(111,78,49,.025)
}
.resume-card{position:relative;overflow:hidden}
.resume-seal{
  position:absolute;right:-15px;top:-18px;width:78px;height:78px;border-radius:50%;
  display:grid;place-items:center;border:1px solid rgba(133,87,54,.12);
  color:rgba(133,87,54,.16);font:400 34px var(--serif)
}
.volume-grid{box-shadow:inset 0 1px rgba(255,255,255,.8),inset 0 -24px 32px rgba(86,61,39,.045)}
.volume.on{
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.10),
    0 32px 38px rgba(55,37,22,.34),
    0 0 0 1px rgba(231,201,161,.18)
}
.volume-focus{position:relative}
.volume-focus::before{
  content:"";position:absolute;left:0;bottom:-1px;width:110px;height:1px;background:#b96f49
}

/* Paper motion navigator — stronger material identity */
.chapter-carousel{
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.92),transparent 32%),
    linear-gradient(180deg,#f5eee4 0%,#eee4d7 100%);
}
.chapter-carousel::after{
  content:"";position:absolute;left:17%;right:17%;top:58px;height:150px;
  background:radial-gradient(ellipse,rgba(150,111,74,.04),transparent 66%);
  filter:blur(12px);pointer-events:none
}
.paper-motion-legend{
  position:absolute;right:18px;top:15px;z-index:20;display:flex;align-items:center;gap:5px;
  color:#a09386;font-size:6px;letter-spacing:.13em
}
.paper-motion-legend i{display:block;width:12px;height:1px;background:#cfc2b4}
.chapter-stack{
  transition:
    transform .68s cubic-bezier(.16,.76,.18,1),
    filter .32s ease,opacity .32s ease
}
/* #2074 [B] non-selected recession is angle-driven (see the ring model above);
   the static opacity pair below was removed with it. */
.chapter-stack.on::after{
  content:"";position:absolute;left:-25px;right:-25px;bottom:-28px;height:32px;
  background:radial-gradient(ellipse,rgba(54,39,25,.18),transparent 68%);
  filter:blur(4px)
}
.chapter-stack .paper-layer.top::before{
  content:"";position:absolute;left:14px;right:14px;top:15px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,91,60,.12),transparent)
}
.chapter-stack .paper-layer.top::after{
  content:"";position:absolute;left:14px;right:14px;bottom:15px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,91,60,.10),transparent)
}

/* Reader — refined book-object rather than browser card */
.reader-stage{
  background:
    radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.84),transparent 34%),
    radial-gradient(ellipse at 50% 88%,rgba(145,112,78,.055),transparent 36%),
    linear-gradient(135deg,#ebe5dc,#e5ddd2);
}
.paper-stack::before{
  content:"";position:absolute;left:5%;right:5%;bottom:-34px;height:42px;
  background:radial-gradient(ellipse,rgba(56,40,26,.19),transparent 67%);
  filter:blur(8px);pointer-events:none
}
.paper{
  box-shadow:
    0 42px 95px rgba(55,39,25,.135),
    0 2px 5px rgba(64,46,30,.04),
    inset 0 1px 0 rgba(255,255,255,.88);
}
.paper::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent 4%,rgba(89,65,42,.08) 15%,rgba(89,65,42,.05) 88%,transparent)
}
.bookmark-ribbon{
  position:absolute;right:34px;top:-1px;width:18px;height:62px;z-index:3;
  background:linear-gradient(180deg,#a45f42,#bd7451);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  box-shadow:0 5px 8px rgba(67,42,28,.10);opacity:.82
}
.paper-corner{
  position:absolute;right:0;bottom:0;width:34px;height:34px;z-index:4;
  background:
    linear-gradient(135deg,transparent 48%,rgba(125,101,75,.10) 49%,rgba(255,255,255,.72) 52%);
  opacity:.65
}
.paper-eyebrow span:first-child{max-width:70%}
.paper-head h1{letter-spacing:-.055em}
.paper-head h1 em{
  display:inline-block;margin-left:.06em;padding:0 .04em;color:#a6613f
}
.verse{
  text-wrap:pretty;
  word-break:keep-all
}
.verse + .verse{margin-top:1px}
.paper-footer{opacity:.82}

/* Side rails — thinner visual hierarchy */
.rail-rule-label,.ai-rule-label{
  margin:0 7px 10px;color:#aa9f93;font-size:6px;letter-spacing:.18em
}
.memory-rail,.ai-panel{
  box-shadow:inset 0 1px rgba(255,255,255,.62)
}
.memory-item.on{
  background:linear-gradient(90deg,rgba(185,111,73,.055),transparent 76%)
}
.memory-item.on::after{top:10px;bottom:10px}
.annotation-stat b{font-size:20px}
.ai-panel .context-card{position:relative}
.ai-panel .context-card::after{
  content:"";position:absolute;right:4px;top:4px;width:24px;height:24px;
  border-top:1px solid rgba(185,111,73,.15);border-right:1px solid rgba(185,111,73,.15)
}
.msg.ai{padding-top:12px}
.msg.ai .verified{letter-spacing:.16em}
.quick button{border:1px solid rgba(60,44,29,.055)}
.ask input{box-shadow:inset 0 1px 2px rgba(61,45,30,.025)}

/* floating controls should disappear into the object */
.reader-toolbar{
  opacity:.86;transition:opacity .2s ease,transform .2s ease
}
.reader-toolbar:hover{opacity:1}
.focus-toggle,.reader-nav{opacity:.7}
.focus-toggle:hover,.reader-nav:hover{opacity:1}

/* Focus reading creates a true reading room */
body.focus-reading .reader-stage{
  background:
    radial-gradient(ellipse at 50% 22%,rgba(255,255,255,.92),transparent 32%),
    linear-gradient(135deg,#eee9e1,#e4dccf)
}
body.focus-reading .reader-stage-brand{opacity:.35}
body.focus-reading .reader-toolbar{opacity:.18}
body.focus-reading .reader-toolbar:hover{opacity:1}
body.focus-reading .paper{
  box-shadow:0 48px 110px rgba(52,37,24,.15)
}

/* Mobile — cleaner reading device feel */
@media(max-width:720px){
  .collection-stamp,.library-orbit{display:none}
  .hero-title{letter-spacing:-.065em}
  .shelf-reflection{display:none}
  .paper{background-position:0 0}
  .bookmark-ribbon{right:22px;width:14px;height:48px}
  .paper-corner{width:25px;height:25px}
  .reader-stage{
    background:#e7e0d6
  }
  .mobile-dock{
    box-shadow:0 12px 34px rgba(42,30,21,.13);
    border-color:rgba(56,42,29,.08)
  }
  .mobile-dock button{font-weight:600}
  .mobile-dock .read-tab{
    box-shadow:0 5px 14px rgba(30,24,19,.12)
  }
  .paper-inner{padding-left:26px;padding-right:26px}
  .paper-eyebrow{letter-spacing:.12em}
  .verse{font-size:17px;line-height:1.96}
  .memory-rail,.ai-panel{
    box-shadow:0 -24px 55px rgba(43,31,21,.18)
  }
}


/* ===== v1.0 visual identity pass ===== */

/* 1) Every book now has its own cover grammar */
.cover-copy{
  overflow:hidden;
}
.cover-copy::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(255,255,255,.045),transparent 23%,rgba(0,0,0,.025) 72%,rgba(255,255,255,.022)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 5px);
  mix-blend-mode:soft-light
}
.cover-copy > *{position:relative;z-index:2}
.cover-copy strong{
  text-shadow:0 2px 5px rgba(0,0,0,.18)
}
.cover-rule{
  position:absolute;left:13%;right:13%;height:1px;background:color-mix(in srgb,var(--foil) 45%,transparent)
}
.rule-top{top:20%}.rule-bottom{bottom:20%}
.motif{position:relative;width:88px;height:96px;color:var(--foil)}
.cover-frame{
  position:absolute;inset:12% 11%;border:1px solid color-mix(in srgb,var(--foil) 37%,transparent);
  box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--foil) 4%,transparent)
}
.back-monogram{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:color-mix(in srgb,var(--foil) 27%,transparent);font:400 34px var(--serif);letter-spacing:.08em
}

/* Iliad — bronze spears / classical inscription */
.motif-iliad i{
  position:absolute;left:50%;top:7px;width:1px;height:76px;background:currentColor;transform-origin:50% 85%;opacity:.68
}
.motif-iliad i:nth-child(1){transform:translateX(-50%) rotate(-24deg)}
.motif-iliad i:nth-child(2){transform:translateX(-50%)}
.motif-iliad i:nth-child(3){transform:translateX(-50%) rotate(24deg)}
.motif-iliad i::before{
  content:"";position:absolute;left:-3px;top:-5px;width:7px;height:9px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)
}
.motif-iliad span{position:absolute;left:0;right:0;bottom:0;text-align:center;font:400 9px var(--serif);letter-spacing:.24em}

/* Odyssey — navigation / orbit */
.motif-odyssey .orbit{position:absolute;border:1px solid currentColor;border-radius:50%;opacity:.55}
.motif-odyssey .o1{inset:14px}.motif-odyssey .o2{inset:26px}
.motif-odyssey .needle{position:absolute;left:50%;top:12px;width:1px;height:72px;background:currentColor;transform:rotate(34deg);transform-origin:50% 50%}
.motif-odyssey .needle::after{content:"";position:absolute;bottom:-2px;left:-3px;width:7px;height:7px;border:1px solid currentColor;transform:rotate(45deg)}
.motif-odyssey b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:14px;font-weight:400}

/* Crime and Punishment — fractured geometry */
.motif-crime span{position:absolute;inset:11px;border:1px solid currentColor;opacity:.56}
.motif-crime span:nth-child(1){transform:rotate(45deg) scale(.73)}
.motif-crime span:nth-child(2){transform:rotate(-12deg) scale(.58)}
.motif-crime i{position:absolute;left:50%;top:8px;bottom:8px;width:1px;background:currentColor;transform:rotate(17deg);opacity:.78}

/* Bible — quiet cross + halo, not ornate iconography */
.motif-bible .v,.motif-bible .h{position:absolute;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.82}
.motif-bible .v{width:1px;height:62px}.motif-bible .h{width:39px;height:1px;top:44%}
.motif-bible .halo{position:absolute;inset:13px;border:1px solid currentColor;border-radius:50%;opacity:.27}
.bible-caption{position:absolute;bottom:13%;left:0;right:0;text-align:center;font:600 6px var(--sans);letter-spacing:.24em;color:var(--foil);opacity:.64}

/* Pride and Prejudice — botanical symmetry */
.motif-pride .stem{position:absolute;left:50%;top:12px;width:1px;height:70px;background:currentColor;opacity:.65}
.motif-pride .leaf{position:absolute;width:24px;height:11px;border:1px solid currentColor;border-radius:100% 0 100% 0;opacity:.55}
.motif-pride .l1{left:19px;top:28px;transform:rotate(20deg)}
.motif-pride .l2{right:18px;top:38px;transform:scaleX(-1) rotate(20deg)}
.motif-pride .l3{left:17px;top:52px;transform:rotate(-6deg)}
.motif-pride .l4{right:17px;top:62px;transform:scaleX(-1) rotate(-6deg)}

/* Alice in Wonderland — keyhole / card suits */
.motif-alice .keyhole{position:absolute;left:50%;top:19px;width:29px;height:29px;border:1px solid currentColor;border-radius:50%;transform:translateX(-50%);opacity:.76}
.motif-alice .keyhole::after{content:"";position:absolute;left:50%;top:24px;width:15px;height:42px;border:1px solid currentColor;border-top:0;transform:translateX(-50%);clip-path:polygon(34% 0,66% 0,100% 100%,0 100%)}
.motif-alice b,.motif-alice em{position:absolute;font-style:normal;font-weight:400}
.motif-alice b{right:7px;top:9px;font-size:11px}.motif-alice em{left:7px;bottom:6px;font-size:9px}

/* Personal — monogram / blank journal */
.motif-personal{display:grid;place-items:center}
.motif-personal span{font:400 27px var(--serif);letter-spacing:.08em}
.motif-personal i{position:absolute;inset:9px;border:1px solid currentColor;transform:rotate(45deg);opacity:.38}

.book-rig.selected .motif{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--foil) 16%,transparent))}
.book-rig.selected .cover-rule{background:color-mix(in srgb,var(--foil) 58%,transparent)}

/* spines become collectible */
.book-spine::after{
  content:"";position:absolute;left:7px;right:7px;top:13px;bottom:13px;border-left:1px solid color-mix(in srgb,var(--foil) 18%,transparent);border-right:1px solid color-mix(in srgb,var(--foil) 12%,transparent)
}
.spine-copy small:last-child{font:600 7px var(--sans);letter-spacing:.13em}

/* 2) Paper-stack gets real 'bundle' depth */
.chapter-stack{height:208px}
.chapter-stack .paper-layer{transform-origin:50% 78%}
.chapter-stack .layer-a{transform:translate(-12px,10px) rotate(-5.8deg)}
.chapter-stack .layer-b{transform:translate(-7px,7px) rotate(-3.1deg)}
.chapter-stack .layer-c{transform:translate(6px,5px) rotate(2.8deg)}
.chapter-stack .layer-d{transform:translate(11px,8px) rotate(5.2deg)}
.chapter-stack.on .layer-a{animation:stackA 5.5s ease-in-out infinite}
.chapter-stack.on .layer-b{animation:stackB 5.5s ease-in-out infinite}
.chapter-stack.on .layer-c{animation:stackC 5.5s ease-in-out infinite}
.chapter-stack.on .layer-d{animation:stackD 5.5s ease-in-out infinite}
@keyframes stackA{0%,100%{transform:translate(-17px,14px) rotate(-7deg)}50%{transform:translate(-24px,16px) rotate(-9deg)}}
@keyframes stackB{0%,100%{transform:translate(-10px,9px) rotate(-4deg)}50%{transform:translate(-14px,11px) rotate(-5.5deg)}}
@keyframes stackC{0%,100%{transform:translate(9px,7px) rotate(3.8deg)}50%{transform:translate(13px,9px) rotate(5deg)}}
@keyframes stackD{0%,100%{transform:translate(15px,11px) rotate(6deg)}50%{transform:translate(22px,13px) rotate(8deg)}}
.folio-tab{
  position:absolute;right:-7px;top:22px;z-index:3;
  padding:5px 4px;background:#b96f49;color:#fff;border-radius:0 4px 4px 0;
  font:600 7px var(--sans);letter-spacing:.08em;writing-mode:vertical-rl
}
.chapter-folio{
  position:absolute;left:14px;right:14px;bottom:8px;
  color:#988b7d;font-size:7px;letter-spacing:.12em;text-align:right
}
.chapter-stack.on .folio-tab{box-shadow:3px 4px 8px rgba(80,48,29,.12)}
.chapter-carousel .chapter-nav{bottom:14px}
.paper-motion-legend{opacity:.75}

/* selected stack carries a light sweep */
.chapter-stack.on .paper-layer.top::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.34) 46%,transparent 65%);
  transform:translateX(-110%);animation:paperSweep 6s ease-in-out infinite
}
@keyframes paperSweep{0%,72%,100%{transform:translateX(-110%)}84%{transform:translateX(110%)}}

/* 3) Reader becomes more book-editorial */
.section-ornament{
  display:flex;align-items:center;gap:10px;margin:6px 0 16px;color:#a89b8d
}
.section-ornament span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(103,81,61,.10),transparent)}
.section-ornament i{font-style:normal;font:600 6px var(--sans);letter-spacing:.15em}
.verse-emphasis{
  position:relative;margin-top:24px!important;padding-top:18px
}
.verse-emphasis::before{
  content:"";position:absolute;top:0;left:0;width:34px;height:1px;background:#b96f49
}
.paper-footer::before{
  content:"";position:absolute
}
.bookmark-ribbon{background:linear-gradient(180deg,#9c583d,#b96f49)}
.reading-progress-edge .progress-label:first-child{color:#a6613f}

/* subtle typesetting rhythm */
.paper-inner p:nth-of-type(2n) .vn{opacity:.75}
.entity:hover{background:linear-gradient(transparent 72%,rgba(193,126,87,.17) 0)}

/* side panels get archival numbering */
.rail-rule-label,.ai-rule-label{position:relative;padding-left:15px}
.rail-rule-label::before,.ai-rule-label::before{
  content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:#b96f49
}

/* 4) library layout breathing improvements */
@media(min-width:1181px){
  .hero-title{max-width:980px}
  .collection-stamp{top:185px}
  .shelf-wrap{height:500px}
}
@media(max-width:720px){
  .motif{transform:scale(.92)}
  .cover-copy strong{font-size:22px}
  .chapter-stack{height:190px}
  .folio-tab{right:-5px}
  .section-ornament{margin-top:4px}
}


/* ===== v1.1 premium visual pass ===== */

/* Global material tuning */
:root{
  --brass:#b67750;
  --brass-soft:rgba(182,119,80,.16);
  --hairline:rgba(62,45,31,.09);
}
body{
  background:
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.35),transparent 30%),
    #e9e3da;
}
button{letter-spacing:.015em}

/* LIBRARY: more cinematic depth, less flat CSS demo */
.library{
  isolation:isolate;
}
.library-vignette{
  position:absolute;inset:-12%;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 55%,transparent 38%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.24) 100%);
}
.lib-head{z-index:12}
.lib-head::after{
  content:"";position:absolute;left:0;top:-15px;width:44px;height:1px;
  background:rgba(239,218,194,.45)
}
.hero-title{
  text-shadow:
    0 1px 0 rgba(255,255,255,.02),
    0 24px 70px rgba(0,0,0,.15);
}
.hero-title em{
  position:relative;
}
.hero-title em::after{
  content:"";position:absolute;left:.02em;right:.04em;bottom:-.08em;height:1px;
  background:linear-gradient(90deg,rgba(234,215,197,.52),transparent 78%);
}
.collection-stamp{
  padding-top:9px;border-top:1px solid rgba(245,236,223,.08)
}
.shelf-wrap{
  transform-style:preserve-3d;
}
.shelf-plank{
  height:23px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 20%),
    linear-gradient(90deg,#281713,#543021 12%,#73472f 52%,#4a291f 86%,#21120e);
  box-shadow:
    0 22px 32px rgba(0,0,0,.46),
    0 -1px 0 rgba(238,197,153,.22),
    inset 0 -5px 9px rgba(0,0,0,.16);
}
.shelf-label{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;color:rgba(240,228,214,.36);
  font-size:6px;letter-spacing:.18em;z-index:8;white-space:nowrap
}
.shelf-label span{
  width:22px;height:22px;border:1px solid rgba(240,228,214,.12);border-radius:50%;
  display:grid;place-items:center;color:rgba(240,228,214,.55)
}
.shelf-label b{font-weight:600}
.shelf-label i{display:block;width:36px;height:1px;background:rgba(240,228,214,.10)}
.shelf-label small{font-size:6px;letter-spacing:.16em}
.book-rig{
  will-change:transform,filter;
}
.book-rig .book-front{
  position:absolute;
}
.book-front::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,26%),rgba(255,255,255,.12),transparent 26%),
    linear-gradient(112deg,transparent 12%,rgba(255,255,255,.045) 30%,transparent 48%);
  mix-blend-mode:screen;opacity:.35;transition:opacity .25s
}
.book-rig.selected .book-front::before{opacity:.95}
/* #1845 [A] non-selected recede harder; selected pops with a clean drop-shadow
   (no brightness() raster pass so cover text stays crisp) */
.book-rig:not(.selected){filter:saturate(.68) brightness(.58)}
.book-rig.selected{
  filter:drop-shadow(0 34px 30px rgba(0,0,0,.44));
}
.book-pages{
  background:
    repeating-linear-gradient(0deg,#ded3c2 0 1px,#f9efdf 1px 3px),
    linear-gradient(90deg,rgba(94,67,43,.07),transparent 38%);
}
.cover-copy strong{
  font-weight:400;
  letter-spacing:-.045em;
}
.lib-bottom{
  backdrop-filter:blur(1px)
}
.sel-meta{align-items:center}
.sel-progress b{
  box-shadow:0 0 10px rgba(196,122,80,.22)
}

/* INDEX: turn catalogue into a tactile editorial spread */
.index-top{
  background:rgba(246,242,236,.78);
  box-shadow:0 1px 0 rgba(255,255,255,.7)
}
.index-shell{
  position:relative;
  box-shadow:
    0 46px 100px rgba(57,41,26,.11),
    0 1px 0 rgba(255,255,255,.9) inset;
}
.index-folio{
  position:absolute;right:26px;top:19px;z-index:3;
  writing-mode:vertical-rl;color:#b0a397;font-size:6px;letter-spacing:.18em
}
.index-hero{
  min-height:230px;
}
.index-hero h1{
  text-shadow:0 9px 24px rgba(77,55,35,.06)
}
.resume-card{
  border-color:rgba(66,48,33,.10);
  box-shadow:
    0 18px 38px rgba(73,52,34,.06),
    inset 0 1px rgba(255,255,255,.8)
}
.volume-grid{
  border-radius:4px;
  perspective:900px;
}
.volume{
  transition:transform .34s cubic-bezier(.2,.72,.18,1),filter .28s,box-shadow .28s;
}
.volume:hover{
  transform:translateY(-11px) rotateY(-4deg) rotateZ(-.7deg);
}
.volume.on{
  /* #2074 [A] keep identical to the 437-block final (cascade harmony) */
  transform:translateY(-26px) scale(1.16) rotateX(-1deg) rotateY(-2deg);
}
.volume.on b{
  color:#fff5e7;
}
.volume-focus strong{
  color:#2b2722;
}
.chapter-carousel{
  box-shadow:
    inset 0 1px rgba(255,255,255,.8),
    inset 0 -20px 50px rgba(93,67,42,.04);
}
.chapter-ambient-line{
  position:absolute;z-index:1;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(98,72,48,.07),transparent)
}
.chapter-ambient-line.line-a{left:12%;right:12%;top:31%}
.chapter-ambient-line.line-b{left:20%;right:20%;top:64%}
.chapter-stack{
  filter:drop-shadow(0 10px 16px rgba(53,38,24,.04));
}
/* #1845 [C] selected sheet stays un-filtered (no drop-shadow/brightness raster pass) */
.chapter-stack.on{
  filter:none
}
.chapter-stack .paper-layer{
  background-image:
    radial-gradient(circle at 20% 15%,rgba(125,92,60,.023) 0 1px,transparent 1.2px);
  background-size:23px 25px;
}
.chapter-stack .paper-layer.top{
  overflow:visible;
}
.chapter-no{
  text-shadow:0 8px 24px rgba(81,58,37,.08)
}
.chapter-preview{
  color:#57504a
}

/* READER: visual calm, typography, floating paper object */
.reader-stage{
  isolation:isolate;
}
.reader-ambient-number{
  position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  z-index:0;color:rgba(116,91,67,.035);
  font:400 min(34vw,520px)/1 var(--serif);
  letter-spacing:-.12em;pointer-events:none
}
.paper-stack{z-index:4}
.paper{
  border-radius:1px;
}
.paper-inner{
  position:relative;
}
.paper-running-head{
  display:flex;align-items:center;gap:10px;margin:-5px 0 8px;
  color:#b0a398;font-size:6px;letter-spacing:.16em
}
.paper-running-head i{
  flex:1;height:1px;background:linear-gradient(90deg,rgba(116,91,67,.08),rgba(116,91,67,.025))
}
.paper-head{
  margin-top:4px
}
.paper-head h1{
  max-width:88%;
}
.paper-head h1 em{
  font-size:.78em
}
.verse{
  max-width:37em;
  margin-left:auto;margin-right:auto;
  line-height:2.02;
}
.vn{
  margin-left:-28px;width:28px;text-align:right;padding-right:9px
}
.section-ornament{
  max-width:37em;margin-left:auto;margin-right:auto
}
.verse-emphasis{
  max-width:37em
}
.bookmark-ribbon{
  box-shadow:
    0 7px 12px rgba(67,42,28,.10),
    inset 1px 0 rgba(255,255,255,.08)
}
.paper-corner{
  filter:drop-shadow(-2px -2px 2px rgba(68,49,32,.035))
}
.paper-footer{
  max-width:37em;margin-left:auto;margin-right:auto
}
.reading-progress-edge{
  opacity:.72
}

/* rails visually recede */
.memory-rail,.ai-panel{
  background:
    linear-gradient(180deg,rgba(249,246,241,.95),rgba(243,238,231,.97));
}
.memory-rail{
  border-right-color:rgba(64,47,32,.065)
}
.ai-panel{
  border-left-color:rgba(64,47,32,.065)
}
.rail-folio,.ai-folio{
  position:absolute;top:13px;color:#c0b4a9;font:400 17px var(--serif);opacity:.48
}
.memory-rail,.ai-panel{position:relative}
.rail-folio{right:14px}.ai-folio{left:14px}
.side-head strong{
  letter-spacing:-.03em
}
.memory-item b{
  letter-spacing:-.02em
}
.msg.ai h3{
  letter-spacing:-.025em
}
.context-card b{
  letter-spacing:-.025em
}
.quick button{
  color:#71685e
}
.quick button:hover{
  color:#2d2924
}
.ask input::placeholder{
  color:#9e9489
}

/* Focus reading becomes a softer gallery experience */
body.focus-reading .reader-stage::before{
  opacity:.06
}
body.focus-reading .reader-ambient-number{
  opacity:.78
}
body.focus-reading .paper{
  transform:translateY(-2px)
}

/* MOBILE visual refinement */
@media(max-width:720px){
  .library-vignette{inset:-20%}
  .hero-title{font-size:46px;line-height:.88}
  .lib-head{top:30px}
  .book-rig.selected{
    transform:translateX(var(--x)) translateY(-10px) translateZ(var(--z)) rotateY(var(--ry)) rotateX(-1deg) scale(var(--s))
  }
  .shelf-label{display:none}
  .index-folio{display:none}
  .index-shell{
    box-shadow:0 28px 65px rgba(57,41,26,.12)
  }
  .volume-grid{
    min-height:148px
  }
  .reader-ambient-number{
    font-size:78vw;top:51%
  }
  .paper-running-head{
    font-size:5px
  }
  .paper-head h1{
    max-width:100%
  }
  .verse{
    max-width:none;
    line-height:1.98;
  }
  .vn{
    margin-left:0;width:21px;text-align:left;padding-right:0
  }
  .section-ornament,.verse-emphasis,.paper-footer{
    max-width:none
  }
  .rail-folio,.ai-folio{display:none}
}

/* respect reduced motion while keeping the visual hierarchy */
@media(prefers-reduced-motion:reduce){
  .chapter-stack.on .layer-a,
  .chapter-stack.on .layer-b,
  .chapter-stack.on .layer-c,
  .chapter-stack.on .layer-d,
  .book-rig.selected .cover-mark{
    animation:none!important
  }
}


/* ===== v1.2 material motion + micro detail ===== */

/* LIBRARY — responsive light and cover-specific motion */
.selected-book-light{
  position:absolute;left:50%;bottom:77px;width:250px;height:360px;z-index:3;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 75%,rgba(221,184,143,.13),transparent 48%),
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 66%);
  filter:blur(8px);opacity:.8;pointer-events:none;
  transition:transform .72s cubic-bezier(.18,.76,.18,1),opacity .3s
}
.book-rig.selected .cover-copy{
  transform:perspective(700px) rotateX(var(--cover-rx,0deg)) rotateY(var(--cover-ry,0deg)) translateZ(2px);
  transition:transform .18s ease-out
}
.book-rig:not(.selected) .cover-copy{
  transform:none!important
}
.book-rig.selected .book-pages::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0 28%,rgba(255,255,255,.35) 48%,transparent 70%);
  transform:translateX(-130%);animation:edgeGlint 7s ease-in-out infinite
}
@keyframes edgeGlint{0%,78%,100%{transform:translateX(-130%)}88%{transform:translateX(130%)}}

/* motif animations — deliberately slow and quiet */
.book-rig.selected[data-motif="odyssey"] .motif-odyssey .o1{animation:orbitSpin 16s linear infinite}
.book-rig.selected[data-motif="odyssey"] .motif-odyssey .o2{animation:orbitSpinRev 23s linear infinite}
.book-rig.selected[data-motif="bible"] .motif-bible .halo{animation:haloBreath 5.8s ease-in-out infinite}
.book-rig.selected[data-motif="pride"] .motif-pride .leaf{animation:leafBreath 7s ease-in-out infinite}
.book-rig.selected[data-motif="alice"] .motif-alice b{animation:starTwinkle 4.1s ease-in-out infinite}
.book-rig.selected[data-motif="alice"] .motif-alice em{animation:starTwinkle 5.3s 1.1s ease-in-out infinite}
.book-rig.selected[data-motif="crime"] .motif-crime span:nth-child(2){animation:fractureDrift 7s ease-in-out infinite}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes orbitSpinRev{to{transform:rotate(-360deg)}}
@keyframes haloBreath{0%,100%{opacity:.20;transform:scale(.97)}50%{opacity:.40;transform:scale(1.05)}}
@keyframes leafBreath{0%,100%{opacity:.45}50%{opacity:.72}}
@keyframes starTwinkle{0%,100%{opacity:.38;transform:scale(.88)}50%{opacity:1;transform:scale(1.12)}}
@keyframes fractureDrift{0%,100%{transform:rotate(-12deg) scale(.58)}50%{transform:rotate(-8deg) scale(.62)}}

/* selected book has a tactile base contact */
.book-rig.selected::before{
  content:"";position:absolute;left:20%;right:20%;bottom:-5px;height:4px;
  background:linear-gradient(90deg,transparent,rgba(230,191,148,.25),transparent);
  box-shadow:0 10px 20px rgba(0,0,0,.20)
}

/* INDEX / CHAPTERS — floating paper specimen */
.paper-motion-legend{
  gap:6px
}
.motion-word{
  opacity:.38;transition:opacity .3s,color .3s
}
.motion-word.active{
  opacity:.95;color:#a6613f
}
.chapter-stack{
  --float-y:0px;
  translate:0 var(--float-y);
}
.chapter-stack.on{
  animation:stackFloatWhole 5.4s ease-in-out infinite
}
@keyframes stackFloatWhole{
  0%,100%{translate:0 -2px}
  50%{translate:0 -8px}
}
.chapter-stack:not(.on){
  filter:brightness(.92) saturate(.82) blur(.05px)
}
.chapter-stack:not(.on):hover{
  translate:0 -3px;filter:brightness(.99) saturate(.92)
}

/* real paper-edge depth: thin edge stripes */
.chapter-stack .paper-layer{
  overflow:visible
}
.chapter-stack .paper-layer::before{
  content:"";position:absolute;left:3px;right:3px;bottom:-3px;height:3px;
  background:repeating-linear-gradient(90deg,#e6dacb 0 4px,#f7efe5 4px 7px);
  opacity:.68;box-shadow:0 2px 3px rgba(61,43,29,.05)
}
.chapter-stack .paper-layer.top::before{
  left:14px;right:14px;top:15px;bottom:auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,91,60,.12),transparent);
  box-shadow:none
}

/* navigation transition: paper briefly cascades before settling */
.chapter-carousel.paper-switch .chapter-stack{
  animation:chapterSettle .48s cubic-bezier(.16,.78,.2,1)
}
@keyframes chapterSettle{
  0%{opacity:.52;translate:0 8px}
  58%{opacity:1;translate:0 -4px}
  100%{translate:0 0}
}
.chapter-carousel.paper-switch .chapter-stack.on{
  animation:chapterSettleSelected .54s cubic-bezier(.16,.78,.2,1)
}
@keyframes chapterSettleSelected{
  0%{opacity:.65;translate:0 18px}
  60%{opacity:1;translate:0 -10px}
  100%{translate:0 -2px}
}

/* READER — marginalia and better paper edge */
.paper{
  position:absolute
}
.paper::after{
  background:
    radial-gradient(circle at 17% 13%,rgba(123,92,59,.035) 0 1px,transparent 1.2px),
    radial-gradient(circle at 69% 61%,rgba(123,92,59,.025) 0 1px,transparent 1.2px),
    linear-gradient(90deg,rgba(100,77,52,.022),transparent 3%,transparent 97%,rgba(100,77,52,.018));
  background-size:21px 23px,29px 31px,100% 100%;
}
.paper-stack::after{
  content:"";position:absolute;top:4%;bottom:4%;right:-6px;width:6px;z-index:-1;
  background:repeating-linear-gradient(0deg,#e4d8c7 0 2px,#f8efe3 2px 4px);
  box-shadow:2px 0 4px rgba(62,44,29,.06);opacity:.62
}
.verse-memory{
  position:relative
}
.margin-anchor{
  position:absolute;left:-86px;top:10px;
  color:#b0a398;font:600 6px var(--sans);letter-spacing:.14em;
  writing-mode:vertical-rl;opacity:.58
}
.margin-anchor::after{
  content:"";display:block;width:1px;height:23px;margin:7px auto 0;background:#cdbeb0
}
.margin-anchor.anchor-right{
  left:auto;right:-86px
}
.margin-anchor.anchor-right::after{
  background:#c59a80
}
.progress-line b{
  position:absolute;left:-4px;width:9px;height:1px;background:#d2c5b7
}
.progress-line b:nth-of-type(1){top:20%}
.progress-line b:nth-of-type(2){top:40%}
.progress-line b:nth-of-type(3){top:60%}
.progress-line b:nth-of-type(4){top:80%}
.reader-toolbar{
  box-shadow:
    0 10px 26px rgba(46,33,22,.045),
    inset 0 1px rgba(255,255,255,.75)
}

/* tiny archival pencil notation */
.paper-footer::after{
  content:"ARCHIVE 03-16";
  margin-left:auto;color:#b3a79a
}

/* mobile keeps the atmosphere but removes fragile marginalia */
@media(max-width:980px){
  .margin-anchor{display:none}
}
@media(max-width:720px){
  .selected-book-light{width:170px;height:260px;bottom:72px}
  .book-rig.selected .cover-copy{transform:none}
  .chapter-stack.on{animation:stackFloatMobile 5.4s ease-in-out infinite}
  @keyframes stackFloatMobile{0%,100%{translate:0 -1px}50%{translate:0 -5px}}
  .paper-stack::after{display:none}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .book-rig.selected[data-motif] .motif *,
  .book-rig.selected .book-pages::after,
  .chapter-stack.on,
  .chapter-carousel.paper-switch .chapter-stack{
    animation:none!important
  }
}


/* ===== v1.3 cinematic material pass ===== */

/* LIBRARY — book selection gains anticipation and title choreography */
.sel-title-wrap{position:relative;display:inline-block;min-height:1em;overflow:hidden}
.sel-title{position:relative;z-index:2;transition:transform .18s cubic-bezier(.2,.72,.2,1),opacity .14s}
.sel-ghost{
  position:absolute;left:0;top:0;z-index:1;
  font:inherit;color:rgba(247,242,234,.18);
  transform:translateY(68%);opacity:0
}
.lib-bottom.book-changing .sel-title{transform:translateY(-52%);opacity:0}
.lib-bottom.book-changing .sel-ghost{animation:titleGhost .20s cubic-bezier(.2,.72,.2,1)}
@keyframes titleGhost{
  0%{transform:translateY(68%);opacity:0}
  45%{opacity:.5}
  100%{transform:translateY(0);opacity:0}
}

.book-rig.selected .book-front{
  transform-origin:left center;
  transition:
    transform .5s cubic-bezier(.18,.72,.16,1),
    box-shadow .35s ease;
}
.book-rig.open-preview.selected .book-front{
  transform:translateZ(calc(var(--d)/2)) rotateY(-7.5deg);
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.15),
    13px 22px 30px rgba(0,0,0,.16)
}
.book-rig.open-preview.selected .book-pages{
  filter:brightness(1.08);
}
.book-rig.open-preview.selected .book-pages::before{
  content:"";position:absolute;inset:5px 3px;
  background:linear-gradient(90deg,#f4e9d7,#fff7e8 52%,#e4d5bf);
  opacity:.42;box-shadow:inset 5px 0 7px rgba(76,55,36,.08)
}
.book-rig.open-preview.selected{
  transform:translateX(var(--x)) translateY(-20px) translateZ(calc(var(--z) + 16px)) rotateY(var(--ry)) rotateX(-1.5deg) scale(var(--s));
}

.selected-book-light{
  transition:left .76s cubic-bezier(.18,.76,.18,1),opacity .3s,filter .3s;
}
.library.book-moving .selected-book-light{
  opacity:.42;filter:blur(16px)
}
.library.book-moving .book-rig.selected{
  filter:drop-shadow(0 34px 32px rgba(0,0,0,.32)) brightness(1.035)
}

/* subtle scene light sweeps only after selection settles */
.library-light-sweep{
  position:absolute;top:-14%;bottom:-14%;width:160px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,244,226,.028),transparent);
  transform:skewX(-16deg) translateX(-220px);
  opacity:0
}
.library.light-pass .library-light-sweep{
  animation:librarySweep 1.2s ease-out
}
@keyframes librarySweep{
  0%{left:28%;opacity:0}
  25%{opacity:.7}
  100%{left:64%;opacity:0}
}

/* INDEX — selected stack feels suspended in a display case */
.chapter-specimen{
  position:absolute;left:18px;top:15px;z-index:20;
  color:#aa9d90;font-size:6px;letter-spacing:.15em
}
.chapter-specimen span{display:block}
.chapter-specimen strong{
  display:block;margin-top:4px;
  font:400 17px var(--serif);letter-spacing:-.04em;color:#a6613f
}
.chapter-stack.on{
  perspective:900px;
}
.chapter-stack.on .paper-layer.top{
  transform:translateZ(7px);
}
.chapter-stack.on:hover .paper-layer.top{
  transform:translateZ(12px) rotateX(-1.5deg);
}
.chapter-carousel::before{
  box-shadow:0 18px 30px rgba(70,49,31,.025)
}

/* stronger cascade when the current chapter changes (#2074 [B]: opacity breathe —
   the track transform is now the ring pivot and must not be overridden) */
.chapter-carousel.paper-switch .chapter-track{
  animation:trackBreathe .54s cubic-bezier(.16,.78,.2,1)
}
@keyframes trackBreathe{
  0%{opacity:.9}
  52%{opacity:1}
  100%{opacity:1}
}

/* MORPH — the selected paper expands into the reader surface */
.morph-backdrop{
  position:fixed;inset:0;z-index:490;pointer-events:none;
  background:rgba(40,34,28,0);backdrop-filter:blur(0);
  transition:background .5s ease,backdrop-filter .5s ease;
}
.morph-backdrop.show{
  background:rgba(232,226,217,.58);backdrop-filter:blur(5px)
}
.paper-morph{
  transform-style:preserve-3d;
  overflow:hidden;
}
.paper-morph.show{
  transform:rotateX(1.8deg) rotateY(-2.5deg);
}
.paper-morph.is-expanding{
  transform:rotateX(0deg) rotateY(0deg);
  box-shadow:0 55px 120px rgba(48,34,22,.18)
}
.paper-morph-inner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 24%,rgba(255,255,255,.35) 48%,transparent 69%);
  transform:translateX(-110%)
}
.paper-morph.is-expanding .paper-morph-inner::after{
  animation:morphLight .62s ease-out
}
@keyframes morphLight{to{transform:translateX(110%)}}

/* READER — paper object gets a quiet gutter and ownership mark */
.paper-gutter{
  position:absolute;left:30px;top:7%;bottom:7%;width:1px;z-index:3;
  background:linear-gradient(180deg,transparent,rgba(83,61,40,.07) 15%,rgba(83,61,40,.045) 85%,transparent);
  opacity:.55
}
.bookplate{
  position:absolute;left:32px;bottom:28px;z-index:4;
  display:flex;align-items:center;gap:6px;
  color:#b0a398;opacity:.48
}
.bookplate b{
  width:24px;height:24px;border:1px solid rgba(103,78,55,.18);
  display:grid;place-items:center;border-radius:50%;
  font:400 8px var(--serif)
}
.bookplate small{font-size:5px;letter-spacing:.15em}
.paper-inner{
  background:
    linear-gradient(90deg,rgba(91,65,42,.014),transparent 4%,transparent 96%,rgba(91,65,42,.012));
}
.reader-stage::before{
  transition:opacity .28s
}
.reader-screen.paper-enter .paper-stack{
  animation:readerPaperArrival .72s cubic-bezier(.16,.78,.18,1)
}
@keyframes readerPaperArrival{
  0%{opacity:.25;transform:translateY(22px) scale(.965)}
  58%{opacity:1;transform:translateY(-4px) scale(1.006)}
  100%{transform:translateY(0) scale(1)}
}
.reader-screen.paper-enter .under1{animation:underSheetArrival1 .88s .08s both cubic-bezier(.16,.78,.18,1)}
.reader-screen.paper-enter .under2{animation:underSheetArrival2 .82s .04s both cubic-bezier(.16,.78,.18,1)}
@keyframes underSheetArrival1{
  from{opacity:0;transform:translate(-2px,2px) rotate(0)}
  to{opacity:1;transform:translate(-18px,14px) rotate(-1.9deg)}
}
@keyframes underSheetArrival2{
  from{opacity:0;transform:translate(-2px,2px) rotate(0)}
  to{opacity:1;transform:translate(-9px,7px) rotate(-.9deg)}
}

/* side notes recede slightly further while the cursor is over the page */
.reader-layout.page-hover .memory-rail,
.reader-layout.page-hover .ai-panel{
  opacity:.83
}
.reader-layout.page-hover .paper{
  box-shadow:
    0 48px 106px rgba(55,39,25,.145),
    0 2px 5px rgba(64,46,30,.04),
    inset 0 1px 0 rgba(255,255,255,.9)
}

/* page typography micro polish */
.paper-head h1{font-kerning:normal}
.verse{hyphens:none}
.verse .entity{transition:background .16s ease,border-color .16s ease}
.paper-running-head{opacity:.82}
.paper-footer{letter-spacing:.17em}

/* progress line now behaves like a page-edge ruler */
.progress-line b{opacity:.7}
.progress-line::after{
  content:"";position:absolute;left:-2px;bottom:0;width:5px;height:5px;border-radius:50%;
  background:#c9bbad;box-shadow:0 0 0 3px rgba(201,187,173,.14)
}

/* MOBILE */
@media(max-width:720px){
  .paper-gutter,.bookplate{display:none}
  .reader-screen.paper-enter .paper-stack{
    animation:readerPaperArrivalMobile .56s cubic-bezier(.16,.78,.18,1)
  }
  @keyframes readerPaperArrivalMobile{
    from{opacity:.4;transform:translateY(14px)}
    to{opacity:1;transform:translateY(0)}
  }
  .chapter-specimen{left:12px;top:11px}
  .chapter-specimen strong{font-size:14px}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .paper-morph.is-expanding .paper-morph-inner::after,
  .reader-screen.paper-enter .paper-stack,
  .reader-screen.paper-enter .under1,
  .reader-screen.paper-enter .under2,
  .library.light-pass .library-light-sweep{
    animation:none!important
  }
}


/* ===== v1.4 cinematic object + publishing detail ===== */
:root{
  --scene-accent:#d4ad68;
  --scene-accent-soft:rgba(212,173,104,.16);
}

/* LIBRARY — selected object now gets a real extraction/opening sequence */
.library-floor-guide{
  position:absolute;left:50%;bottom:75px;z-index:2;
  transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  color:rgba(242,229,214,.13);pointer-events:none
}
.library-floor-guide span{display:block;width:92px;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.library-floor-guide span:last-child{transform:scaleX(-1)}
.library-floor-guide i{width:5px;height:5px;border:1px solid currentColor;transform:rotate(45deg)}
.library-opening-veil{
  position:absolute;inset:0;z-index:40;pointer-events:none;opacity:0;
  background:
    radial-gradient(ellipse at 50% 58%,transparent 17%,rgba(10,11,16,.18) 52%,rgba(10,11,16,.58) 100%);
  backdrop-filter:blur(0px);
  transition:opacity .5s ease,backdrop-filter .5s ease
}
.library.opening-book .library-opening-veil{
  opacity:1;backdrop-filter:blur(3px)
}
.library.opening-book .lib-head,
.library.opening-book .lib-bottom,
.library.opening-book .collection-stamp{
  opacity:.22;transition:opacity .36s ease
}
.library.opening-book .book-rig:not(.selected){
  opacity:.18!important;filter:brightness(.42) blur(1.2px)!important;
  transition:opacity .38s,filter .38s
}
.library.opening-book .selected-book-light{
  opacity:1;filter:blur(4px);
  background:
    radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--scene-accent) 18%,transparent),transparent 48%),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 65%)
}
.book-rig.extracting.selected{
  z-index:80;
  transform:
    translateX(var(--x))
    translateY(-46px)
    translateZ(calc(var(--z) + 88px))
    rotateY(0deg) rotateX(-2deg) scale(1.19);
  filter:drop-shadow(0 48px 44px rgba(0,0,0,.40)) brightness(1.10) saturate(1.02)
}
.book-rig.extracting.selected .book-front{
  transform:translateZ(calc(var(--d)/2)) rotateY(-12deg)
}
.book-rig.opening.selected .book-front{
  transform:translateZ(calc(var(--d)/2)) rotateY(-48deg);
  transition:transform .58s cubic-bezier(.18,.72,.14,1)
}
.book-rig.opening.selected .book-pages{
  filter:brightness(1.12)
}
.book-rig.opening.selected .book-pages::before{
  opacity:.72
}

/* foil catches light, not just flat color */
.book-rig.selected .cover-copy strong,
.book-rig.selected .motif,
.book-rig.selected .cover-rule{
  background-image:linear-gradient(110deg,currentColor 0 38%,rgba(255,255,255,.95) 50%,currentColor 62% 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
}
.book-rig.selected .cover-copy strong{
  color:var(--foil);
  -webkit-text-fill-color:transparent;
  animation:foilCatch 8.5s ease-in-out infinite
}
@keyframes foilCatch{
  0%,68%,100%{background-position:0% 50%}
  82%{background-position:100% 50%}
}
.selected-edition{
  display:flex;align-items:center;gap:7px;margin-bottom:7px;
  color:rgba(247,242,234,.36);font-size:6px;letter-spacing:.16em
}
.selected-edition i{display:block;width:26px;height:1px;background:rgba(247,242,234,.12)}
.selected-edition b{font-weight:500;color:rgba(247,242,234,.58)}

/* shelf lighting follows current book accent */
.selected-book-light{
  background:
    radial-gradient(ellipse at 50% 75%,color-mix(in srgb,var(--scene-accent) 16%,transparent),transparent 48%),
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 66%)
}

/* INDEX — books receive tiny head/tail bands like actual bindings */
.volume::marker{display:none}
.volume .volume-band{position:absolute;left:0;right:0;height:3px;background:rgba(235,207,170,.34);z-index:2}
.volume .volume-band.top{top:8px}.volume .volume-band.bottom{bottom:8px}
.volume.on .volume-band{background:rgba(245,216,178,.52)}

/* Chapter paper becomes a sculptural bundle rather than flat cards */
.chapter-shadow-bed{
  position:absolute;left:30%;right:30%;bottom:50px;height:34px;z-index:1;
  background:radial-gradient(ellipse,rgba(68,48,30,.13),transparent 68%);
  filter:blur(7px)
}
.chapter-stack .paper-layer{
  backface-visibility:hidden;
  transform-style:preserve-3d
}
.chapter-stack .paper-layer:not(.top){
  clip-path:polygon(0 1%,98.7% 0,100% 98.4%,1.2% 100%)
}
.chapter-stack .paper-layer:nth-child(odd):not(.top){
  clip-path:polygon(1% 0,100% 1.4%,98.8% 100%,0 98.5%)
}
.chapter-stack.on .paper-layer.top{
  clip-path:polygon(.4% 0,99.3% .8%,100% 99%,0 100%);
  box-shadow:
    0 24px 42px rgba(51,36,23,.14),
    inset -5px 0 9px rgba(106,77,49,.025)
}
.chapter-stack.on .paper-layer.top .chapter-no{
  animation:numberFloat 5.4s ease-in-out infinite
}
@keyframes numberFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
.chapter-stack.on .folio-tab{
  transform-origin:left center;
  animation:tabFlutter 5.4s ease-in-out infinite
}
@keyframes tabFlutter{
  0%,100%{transform:rotateY(0deg)}
  50%{transform:rotateY(-11deg)}
}

/* READER — crop marks / paper object / subtle print artefact */
.crop-mark{position:absolute;z-index:5;width:13px;height:13px;opacity:.22;pointer-events:none}
.crop-mark::before,.crop-mark::after{content:"";position:absolute;background:#8e806f}
.crop-mark::before{width:9px;height:1px}.crop-mark::after{width:1px;height:9px}
.crop-tl{left:12px;top:12px}.crop-tr{right:12px;top:12px;transform:scaleX(-1)}
.crop-bl{left:12px;bottom:12px;transform:scaleY(-1)}.crop-br{right:12px;bottom:12px;transform:scale(-1)}
.paper{
  background-blend-mode:multiply,normal;
}
.paper-inner::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background:
    repeating-linear-gradient(91deg,transparent 0 53px,rgba(71,54,38,.15) 54px,transparent 55px),
    repeating-linear-gradient(0deg,transparent 0 71px,rgba(71,54,38,.10) 72px,transparent 73px);
  mix-blend-mode:multiply
}
.paper-head h1{
  text-wrap:balance
}
.verse{
  text-rendering:optimizeLegibility;
}
.paper-footer{
  position:relative
}
.paper-footer::before{
  content:"";position:absolute;left:50%;top:-15px;width:4px;height:4px;
  border:1px solid rgba(113,89,65,.18);transform:translateX(-50%) rotate(45deg)
}

/* desk shadows react to focus */
body.focus-reading .paper-stack::before{
  transform:scaleX(1.06);
  opacity:.96
}
body.focus-reading .bookmark-ribbon{
  opacity:.68
}

/* Mobile simplification — preserve premium feel without tiny clutter */
@media(max-width:720px){
  .library-floor-guide,.selected-edition{display:none}
  .book-rig.extracting.selected{
    transform:translateX(var(--x)) translateY(-24px) translateZ(calc(var(--z) + 36px)) rotateY(0deg) scale(1.13)
  }
  .book-rig.opening.selected .book-front{transform:translateZ(calc(var(--d)/2)) rotateY(-28deg)}
  .crop-mark{opacity:.13}
  .chapter-shadow-bed{left:22%;right:22%}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .book-rig.selected .cover-copy strong,
  .chapter-stack.on .paper-layer.top .chapter-no,
  .chapter-stack.on .folio-tab{
    animation:none!important
  }
}


/* ===== v1.5 camera / micro-curl / print-light pass ===== */
:root{
  --scene-pan-x:0px;
  --scene-pan-y:0px;
  --lamp-x:34%;
  --lamp-y:17%;
}

/* LIBRARY — subtle virtual camera movement */
.library{
  --cam-x:0px;
  --cam-y:0px;
}
.lib-head{
  transform:translate(calc(var(--cam-x) * -.18),calc(var(--cam-y) * -.12));
  transition:transform .18s ease-out;
}
.shelf-wrap{
  transform:translate(calc(var(--cam-x) * .22),calc(var(--cam-y) * .08));
  transition:transform .18s ease-out;
}
.collection-stamp{
  transform:translate(calc(var(--cam-x) * -.12),calc(var(--cam-y) * -.08));
  transition:transform .18s ease-out
}
.scene-meta{
  position:absolute;z-index:9;bottom:28px;
  display:flex;align-items:center;gap:8px;
  color:rgba(242,231,216,.25);
  font-size:5px;letter-spacing:.18em;pointer-events:none
}
.scene-meta b{
  font:400 10px var(--serif);color:rgba(242,231,216,.42)
}
.scene-meta-left{left:28px}
.scene-meta-right{right:28px;flex-direction:row-reverse}
.library.opening-book .scene-meta{opacity:.12}
.library.opening-book .shelf-wrap{
  transform:translate(var(--cam-x),calc(var(--cam-y) - 8px)) scale(1.012)
}

/* cloth / spine micro emboss */
.book-front,.book-spine{
  background-blend-mode:soft-light,normal,normal
}
.book-rig[data-motif="bible"] .book-front{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.032) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.022) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 55% 18%,rgba(255,255,255,.025),transparent 24%),
    var(--cloth)
}
.book-spine{
  box-shadow:
    inset 5px 0 9px rgba(0,0,0,.18),
    inset -2px 0 4px rgba(255,255,255,.035)
}
.book-spine::before{
  content:"";position:absolute;left:3px;right:3px;top:18px;height:3px;
  border-top:1px solid color-mix(in srgb,var(--foil) 22%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--foil) 13%,transparent);
  box-shadow:0 calc(100% - 36px) 0 color-mix(in srgb,var(--foil) 10%,transparent)
}
.book-rig.selected .book-spine::before{
  border-top-color:color-mix(in srgb,var(--foil) 36%,transparent)
}

/* opening sequence: camera pushes slightly toward the extracted object */
.library.opening-book .shelf-plank{
  filter:brightness(.78)
}
.library.opening-book .library-vignette{
  background:
    radial-gradient(ellipse at 50% 55%,transparent 26%,rgba(0,0,0,.18) 56%,rgba(0,0,0,.34) 100%)
}
.book-rig.extracting.selected .cover-copy strong{
  animation:none;
  background-position:72% 50%
}

/* INDEX / CHAPTER — micro curl and paper curvature */
.chapter-stack .paper-layer.top{
  isolation:isolate;
}
.micro-curl{
  position:absolute;right:-1px;bottom:-1px;width:36px;height:36px;z-index:7;
  pointer-events:none;
  background:
    linear-gradient(135deg,transparent 0 46%,rgba(115,91,66,.08) 48%,rgba(255,255,255,.95) 53%,#f2e7d8 76%,#dfd1c0 100%);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  transform-origin:100% 100%;
  transform:scale(.72) rotate(-2deg);
  opacity:.48;
  filter:drop-shadow(-3px -2px 3px rgba(58,42,28,.08));
  transition:transform .32s cubic-bezier(.18,.72,.18,1),opacity .25s
}
.fold-shadow{
  position:absolute;right:2px;bottom:1px;width:48px;height:18px;z-index:6;
  background:radial-gradient(ellipse at 80% 80%,rgba(63,44,29,.13),transparent 70%);
  transform:rotate(-15deg);opacity:.28;pointer-events:none;
  transition:opacity .3s,transform .3s
}
.chapter-stack.on .micro-curl{
  opacity:.72;
  animation:microCurlBreath 5.2s ease-in-out infinite
}
.chapter-stack.on .fold-shadow{
  opacity:.46;
  animation:foldShadowBreath 5.2s ease-in-out infinite
}
.chapter-stack.on:hover .micro-curl{
  transform:scale(1.08) rotate(-7deg);
  opacity:.95
}
.chapter-stack.on:hover .fold-shadow{
  transform:rotate(-20deg) scaleX(1.12);
  opacity:.64
}
@keyframes microCurlBreath{
  0%,100%{transform:scale(.78) rotate(-2deg)}
  50%{transform:scale(.95) rotate(-5deg)}
}
@keyframes foldShadowBreath{
  0%,100%{transform:rotate(-15deg) scaleX(.9)}
  50%{transform:rotate(-18deg) scaleX(1.05)}
}
.chapter-stack.on .paper-layer.top{
  background:
    radial-gradient(circle at 12% 13%,rgba(118,87,58,.025) 0 1px,transparent 1.1px),
    repeating-linear-gradient(0deg,transparent 0 24px,rgba(82,117,151,.055) 24px 25px),
    linear-gradient(145deg,#fffefb,#fbf4e9);
  background-size:21px 23px,auto,auto
}
.chapter-stack.on .paper-layer.top::after{
  mix-blend-mode:screen
}

/* slight perspective spread for adjacent stacks */
.chapter-stack:not(.on){
  transform-style:preserve-3d
}
.chapter-stack:not(.on) .paper-layer.top{
  box-shadow:0 12px 24px rgba(50,35,22,.07)
}

/* READER — moving warm lamp over paper */
.paper{
  isolation:isolate
}
.paper-lamp{
  position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at var(--lamp-x) var(--lamp-y),
      rgba(255,249,232,.38) 0,
      rgba(255,244,219,.12) 22%,
      transparent 50%);
  mix-blend-mode:screen;opacity:.78;
  transition:opacity .22s ease
}
.paper:hover .paper-lamp{opacity:1}
.paper-inner{z-index:2}
.bookmark-ribbon,.paper-gutter,.bookplate,.paper-corner,.paper-folio-mark,.crop-mark{z-index:4}

/* print / folio details */
.paper-folio-mark{
  position:absolute;right:17px;top:17px;
  color:#b1a598;font:400 7px var(--serif);letter-spacing:.08em;
  transform:rotate(90deg);transform-origin:center;opacity:.54
}
.opening-verse{
  position:relative;
}
.dropcap{
  float:left;
  font:400 3.1em/.78 var(--serif);
  color:#8f5639;
  margin:.10em .12em .02em 0;
  text-shadow:0 1px rgba(255,255,255,.45)
}
.opening-verse .vn{
  margin-top:.25em
}

/* very fine ink texture */
.verse{
  text-shadow:.012em .012em rgba(48,39,31,.035);
}
.entity{
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone
}
.paper-eyebrow,.paper-running-head,.paper-footer{
  user-select:none
}

/* reader desk depth */
.reader-stage{
  --desk-x:0px;
  --desk-y:0px;
}
.reader-stage-brand,.reader-nav,.focus-toggle{
  transform:translate(calc(var(--desk-x) * -.08),calc(var(--desk-y) * -.06))
}
.paper-stack{
  transform:translate(calc(var(--desk-x) * .06),calc(var(--desk-y) * .025));
  transition:transform .16s ease-out,width .32s ease,height .32s ease
}
.reader-ambient-number{
  transform:translate(calc(-50% + var(--desk-x) * -.11),calc(-50% + var(--desk-y) * -.05))
}

/* side rails become even more like vellum margins */
.memory-rail::after,.ai-panel::after{
  content:"";position:absolute;top:0;bottom:0;width:18px;pointer-events:none;opacity:.28
}
.memory-rail::after{
  right:-18px;background:linear-gradient(90deg,rgba(86,61,39,.06),transparent)
}
.ai-panel::after{
  left:-18px;background:linear-gradient(270deg,rgba(86,61,39,.05),transparent)
}

/* MOBILE */
@media(max-width:720px){
  .scene-meta{display:none}
  .lib-head,.shelf-wrap,.collection-stamp{transform:none!important}
  .paper-lamp{
    background:radial-gradient(circle at 50% 24%,rgba(255,249,232,.26),transparent 43%);
    opacity:.72
  }
  .paper-stack{transform:none!important}
  .reader-stage-brand,.reader-nav,.focus-toggle{transform:none!important}
  .dropcap{
    font-size:2.45em;
    margin-top:.16em
  }
  .paper-folio-mark{display:none}
  .chapter-stack.on .micro-curl{
    animation:microCurlMobile 5.6s ease-in-out infinite
  }
  @keyframes microCurlMobile{
    0%,100%{transform:scale(.68) rotate(-2deg)}
    50%{transform:scale(.82) rotate(-4deg)}
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .chapter-stack.on .micro-curl,
  .chapter-stack.on .fold-shadow{
    animation:none!important
  }
  .lib-head,.shelf-wrap,.collection-stamp,.paper-stack,.reader-stage-brand,.reader-nav,.focus-toggle{
    transform:none!important
  }
}


/* ===== v1.6 material master pass ===== */

/* LIBRARY — real cover construction, endpaper, air */
.book-inner-leaf{
  position:absolute;inset:7px 5px 7px 7px;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 15%,rgba(112,83,54,.04) 0 1px,transparent 1.2px),
    linear-gradient(90deg,#e7dbc9,#fbf2e4 12%,#f7eddf 84%,#dccbb5);
  background-size:20px 22px,auto;
  border:1px solid rgba(69,49,32,.08);
  border-radius:2px;
  color:#a89c8f;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-size:5px;letter-spacing:.17em;
  transform:translateZ(calc(var(--d)/2 - 2px));
  opacity:0;
  transition:opacity .28s ease,transform .5s cubic-bezier(.18,.72,.14,1)
}
.book-inner-leaf i{display:block;width:34px;height:1px;background:#c8b9a8}
.book-inner-leaf small{font-size:5px;letter-spacing:.12em}
.book-rig.open-preview.selected .book-inner-leaf,
.book-rig.extracting.selected .book-inner-leaf,
.book-rig.opening.selected .book-inner-leaf{
  opacity:.92;
  transform:translateZ(calc(var(--d)/2 - 1px)) rotateY(-2deg)
}
.book-rig.opening.selected .book-inner-leaf{
  transform:translateZ(calc(var(--d)/2 - 1px)) rotateY(-10deg)
}
.book-front{
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.03),
    inset -1px 0 0 rgba(0,0,0,.11),
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 -1px 0 rgba(0,0,0,.10)
}
.book-front::after{
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--foil) 8%,transparent),
    inset 0 0 22px rgba(0,0,0,.05)
}
.book-rig::after{
  transform:translateX(var(--shadow-x,0px)) translateZ(-10px) rotateX(76deg)
}
.library-dust{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:.45
}
.library-dust i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:rgba(239,224,205,.28);
  filter:blur(.2px);
  animation:dustDrift 12s linear infinite
}
.library-dust i:nth-child(1){left:18%;top:37%;animation-duration:14s}
.library-dust i:nth-child(2){left:31%;top:58%;animation-delay:-4s;animation-duration:18s}
.library-dust i:nth-child(3){left:48%;top:42%;animation-delay:-7s}
.library-dust i:nth-child(4){left:67%;top:54%;animation-delay:-2s;animation-duration:16s}
.library-dust i:nth-child(5){left:78%;top:33%;animation-delay:-9s;animation-duration:19s}
.library-dust i:nth-child(6){left:57%;top:69%;animation-delay:-5s;animation-duration:15s}
@keyframes dustDrift{
  0%{transform:translate3d(0,18px,0);opacity:0}
  16%{opacity:.55}
  78%{opacity:.38}
  100%{transform:translate3d(18px,-75px,0);opacity:0}
}

/* more restrained title / shelf proportion */
@media(min-width:1181px){
  .hero-title{font-size:clamp(58px,7.6vw,114px)}
  .shelf-wrap{bottom:102px}
}

/* INDEX — reduce upper dead space and bring paper object into the first viewport */
.index-hero{
  padding-top:44px;padding-bottom:31px;
  min-height:205px
}
.index-hero h1{font-size:72px}
.index-body{padding-top:29px}
.volume-grid{min-height:150px}
.volume{height:112px}
.volume-focus{margin-top:20px;padding-top:12px;padding-bottom:13px}
.chapter-area{margin-top:30px}
.chapter-title{margin-bottom:0}
.chapter-carousel{
  margin-top:15px;
  height:348px;
}
.chapter-stack{height:214px}
.chapter-track{top:48%}
.chapter-nav{bottom:13px}
.chapter-shadow-bed{bottom:45px}

/* paper sheet gets a physical crease / archive seal */
.sheet-crease{
  position:absolute;left:50%;top:9%;bottom:9%;width:1px;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(91,67,45,.028) 17%,rgba(91,67,45,.045) 50%,rgba(255,255,255,.34) 52%,rgba(91,67,45,.022) 76%,transparent);
  opacity:.58;pointer-events:none
}
.paper-seal{
  position:absolute;left:13px;bottom:13px;width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(142,98,66,.14);display:grid;place-items:center;
  color:#a78369;font:400 6px var(--serif);letter-spacing:.04em;opacity:.48
}
.chapter-stack.on .paper-seal{
  opacity:.72;border-color:rgba(166,97,63,.20)
}
.chapter-stack.on .paper-layer.top{
  box-shadow:
    0 30px 52px rgba(51,36,23,.145),
    0 7px 15px rgba(51,36,23,.045),
    inset -7px 0 10px rgba(106,77,49,.025),
    inset 0 1px 0 rgba(255,255,255,.8)
}
.chapter-stack:not(.on) .micro-curl{opacity:.22}

/* READER — paper is now warmer in the center with naturally imperfect edges */
.paper{
  background:
    radial-gradient(ellipse at 50% 34%,rgba(255,255,255,.22),transparent 48%),
    linear-gradient(90deg,rgba(112,85,57,.015),transparent 6%,transparent 94%,rgba(112,85,57,.012)),
    var(--reader-paper);
}
.deckle-edge{
  position:absolute;z-index:5;pointer-events:none;opacity:.33
}
.deckle-top{
  left:2%;right:2%;top:0;height:2px;
  background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(104,79,54,.13) 8px,transparent 10px)
}
.deckle-left{
  top:2%;bottom:2%;left:0;width:2px;
  background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(104,79,54,.11) 9px,transparent 11px)
}
.deckle-bottom{
  left:2%;right:2%;bottom:0;height:2px;
  background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(104,79,54,.09) 12px,transparent 14px)
}
.paper-inner{
  padding-top:76px
}
.dropcap{
  font-size:2.72em;
  line-height:.82;
  margin-top:.14em;
  margin-right:.13em;
  color:#92573a
}
.verse{
  line-height:1.97;
  color:#2e2a24;
}
.paper-head h1{
  color:#24211d
}
.paper-head h1 em{
  color:#a85f3d
}
.paper-lamp{
  background:
    radial-gradient(circle at var(--lamp-x) var(--lamp-y),
      rgba(255,251,240,.46) 0,
      rgba(255,245,221,.15) 21%,
      transparent 52%)
}
.paper-stack::before{
  bottom:-38px;height:48px;
  background:radial-gradient(ellipse,rgba(56,40,26,.20),transparent 68%);
  filter:blur(9px)
}

/* Reader typography gets a quieter editorial baseline */
.paper-eyebrow{margin-bottom:16px}
.paper-running-head{margin-bottom:6px}
.paper-head{margin-bottom:27px}
.section-ornament{margin-top:9px;margin-bottom:15px}
.paper-footer{margin-top:31px}

/* side panels slightly cleaner / more paperlike */
.memory-rail,.ai-panel{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.36),transparent 24%),
    linear-gradient(180deg,rgba(249,246,241,.96),rgba(242,237,230,.98))
}
.side-head{padding-bottom:12px}
.memory-item{padding-top:11px;padding-bottom:11px}
.chat-thread{gap:10px}

/* MOBILE: keep the improved paper but simplify all tiny publishing marks */
@media(max-width:720px){
  .library-dust{opacity:.26}
  .index-hero{padding-top:30px;padding-bottom:26px}
  .index-hero h1{font-size:52px}
  .chapter-carousel{height:315px}
  .sheet-crease,.paper-seal{display:none}
  .deckle-edge{opacity:.18}
  .paper-inner{padding-top:92px}
  .dropcap{font-size:2.25em}
  .verse{line-height:1.94}
  .paper-head{margin-bottom:23px}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .library-dust i{animation:none!important}
}


/* ===== v1.7 material differentiation + sheet curvature ===== */
:root{
  --book-weight:1;
  --paper-warmth:rgba(255,248,234,.22);
}

/* LIBRARY: richer physical material taxonomy */
.material-note{
  margin-top:3px;
  color:rgba(247,242,234,.28);
  font-size:5px;letter-spacing:.15em
}

/* cloth = visible weave */
.book-rig[data-motif="iliad"] .book-front,
.book-rig[data-motif="bible"] .book-front,
.book-rig[data-motif="personal"] .book-front{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.026) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.028) 0 1px,transparent 1px 3px),
    linear-gradient(120deg,rgba(255,255,255,.025),transparent 38%),
    var(--cloth);
}

/* leather-like = broader irregular grain */
.book-rig[data-motif="crime"] .book-front,
.book-rig[data-motif="pride"] .book-front{
  background:
    radial-gradient(circle at 14% 22%,rgba(255,255,255,.035) 0 1px,transparent 1.4px),
    radial-gradient(circle at 68% 61%,rgba(0,0,0,.045) 0 1px,transparent 1.5px),
    repeating-linear-gradient(16deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px),
    var(--cloth);
  background-size:19px 21px,23px 25px,auto,auto;
}

/* coated / illustrated = smoother sheen */
.book-rig[data-motif="odyssey"] .book-front,
.book-rig[data-motif="alice"] .book-front{
  background:
    radial-gradient(ellipse at 30% 10%,rgba(255,255,255,.07),transparent 27%),
    linear-gradient(108deg,rgba(255,255,255,.035),transparent 42%),
    var(--cloth);
}
.book-rig[data-motif="alice"] .book-front::before,
.book-rig[data-motif="odyssey"] .book-front::before{
  opacity:.48
}

/* heavier books move with slower easing */
.book-rig[data-motif="bible"]{transition-duration:.92s,.42s,.42s}
.book-rig[data-motif="iliad"]{transition-duration:.86s,.40s,.40s}
.book-rig[data-motif="crime"]{transition-duration:.82s,.38s,.38s}
.book-rig[data-motif="alice"]{transition-duration:.69s,.34s,.34s}
.book-rig[data-motif="personal"]{transition-duration:.74s,.35s,.35s}

/* selected extraction follows "weight" */
.book-rig[data-motif="bible"].extracting.selected{
  transition-duration:1.02s,.42s,.42s
}
.book-rig[data-motif="alice"].extracting.selected{
  transition-duration:.72s,.34s,.34s
}

/* more realistic hinge / boards */
.book-rig .book-front::after{
  border-radius:3px 2px 2px 3px
}
.book-rig .book-front::before{
  border-radius:inherit
}
.book-rig.selected .book-front{
  box-shadow:
    inset 2px 0 4px rgba(255,255,255,.025),
    inset -4px 0 8px rgba(0,0,0,.09),
    0 30px 34px rgba(0,0,0,.16)
}
.book-rig.selected .book-spine{
  box-shadow:
    inset 7px 0 12px rgba(0,0,0,.22),
    inset -2px 0 5px rgba(255,255,255,.04),
    -2px 0 8px rgba(0,0,0,.08)
}

/* accent-specific shelf spill */
.selected-book-light::after{
  content:"";position:absolute;left:50%;bottom:8px;width:120px;height:28px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,color-mix(in srgb,var(--scene-accent) 17%,transparent),transparent 72%);
  filter:blur(6px);opacity:.58
}

/* INDEX: stronger full-sheet curvature */
.chapter-stack .paper-layer.top{
  transform-style:preserve-3d;
  perspective-origin:50% 60%
}
.paper-bow{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 102%,rgba(83,60,39,.08),transparent 36%),
    linear-gradient(90deg,rgba(255,255,255,.10),transparent 18%,transparent 82%,rgba(112,85,57,.025));
  opacity:.48;
  border-radius:50% / 2%;
  transform:perspective(520px) rotateX(.9deg) scaleY(.992);
  transform-origin:50% 100%;
  transition:transform .34s ease,opacity .34s ease
}
.chapter-stack.on .paper-bow{
  opacity:.72;
  animation:paperBowBreath 5.7s ease-in-out infinite
}
.chapter-stack.on:hover .paper-bow{
  transform:perspective(520px) rotateX(2.3deg) scaleY(.984)
}
@keyframes paperBowBreath{
  0%,100%{transform:perspective(520px) rotateX(.8deg) scaleY(.994)}
  50%{transform:perspective(520px) rotateX(1.8deg) scaleY(.988)}
}

/* page edges slightly curl inward */
.chapter-stack.on .paper-layer.top{
  filter:drop-shadow(0 16px 18px rgba(52,37,23,.055))
}
.chapter-stack.on .paper-layer.top::before{
  opacity:.82
}

/* shadow reacts to curl height */
.chapter-stack.on .fold-shadow{
  background:radial-gradient(ellipse at 82% 84%,rgba(63,44,29,.16),transparent 70%)
}
.chapter-stack.on:hover .fold-shadow{
  opacity:.76
}

/* Reader: real paper grain and ink */
.paper-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.09;
  background:
    radial-gradient(circle at 13% 17%,rgba(87,66,46,.16) 0 .45px,transparent .65px),
    radial-gradient(circle at 67% 52%,rgba(87,66,46,.12) 0 .45px,transparent .65px),
    radial-gradient(circle at 42% 83%,rgba(87,66,46,.10) 0 .4px,transparent .6px);
  background-size:17px 19px,23px 27px,29px 31px;
  mix-blend-mode:multiply
}
.ink-registration{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background:
    repeating-linear-gradient(0deg,transparent 0 43px,rgba(39,32,26,.22) 44px,transparent 45px);
  mix-blend-mode:multiply
}
.paper-rule-ornament{
  display:flex;align-items:center;gap:8px;margin:0 0 13px;color:#b4a69a
}
.paper-rule-ornament i{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(101,76,53,.10))}
.paper-rule-ornament i:last-child{transform:scaleX(-1)}
.paper-rule-ornament b{font-size:6px;font-weight:400;color:#b58b70;opacity:.62}
.paper-head{
  margin-top:0
}

/* warmer light, slightly denser ink */
.paper{
  color:#29251f
}
.paper-lamp{
  background:
    radial-gradient(circle at var(--lamp-x) var(--lamp-y),
      rgba(255,252,243,.52) 0,
      rgba(255,244,218,.17) 22%,
      transparent 53%)
}
.verse{
  color:#302b25;
  text-shadow:
    .01em .01em rgba(45,37,31,.03),
    0 .005em rgba(45,37,31,.025)
}
.vn{color:#a99d90}
.paper-eyebrow,.paper-running-head,.paper-footer{color:#aa9d90}

/* side-panel paper grain extremely subtle */
.memory-rail::before,.ai-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.025;
  background:radial-gradient(circle,rgba(80,61,45,.24) 0 .45px,transparent .65px);
  background-size:19px 21px
}

/* Focus reading further suppresses app chrome */
body.focus-reading .reader-nav,
body.focus-reading .reader-stage-brand{opacity:.18}
body.focus-reading .focus-toggle{opacity:.55}
body.focus-reading .reader-toolbar{opacity:.10}
body.focus-reading .paper-lamp{opacity:.92}

/* MOBILE */
@media(max-width:720px){
  .material-note{display:none}
  .paper-bow{display:none}
  .paper-grain{opacity:.055}
  .ink-registration{display:none}
  .paper-rule-ornament{margin-bottom:10px}
  .paper-rule-ornament b{font-size:5px}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .chapter-stack.on .paper-bow{animation:none!important}
}


/* ===== v1.8 inertia / finish / responsive shadow pass ===== */
:root{
  --inertia-x:0px;
  --inertia-tilt:0deg;
  --chapter-shadow-x:0px;
}

/* LIBRARY: selection has mass, not just easing */
.book-rig.selected.inertia-enter{
  animation:bookMassSettle 3.80s cubic-bezier(.16,.72,.18,1) both;
}
@keyframes bookMassSettle{
  0%{
    transform:
      translateX(var(--from-x))
      translateY(-3px)
      translateZ(var(--from-z))
      rotateY(var(--from-ry))
      rotateX(-.5deg)
      scale(var(--from-s));
    filter:drop-shadow(0 18px 20px rgba(0,0,0,.20)) brightness(.90);
    opacity:.82
  }
  94%{
    transform:
      translateX(calc(var(--x) - (var(--travel-dir) * 3px)))
      translateY(-17px)
      translateZ(calc(var(--z) + 2px))
      rotateY(calc(var(--ry) - (var(--travel-dir) * .55deg)))
      rotateX(-1.52deg)
      scale(calc(var(--s) * 1.0025));
    filter:drop-shadow(0 32px 28px rgba(0,0,0,.42));
    opacity:1
  }
  100%{
    transform:
      translateX(var(--x))
      translateY(-16px)
      translateZ(var(--z))
      rotateY(var(--ry))
      rotateX(-1.5deg)
      scale(var(--s));
    filter:drop-shadow(0 30px 26px rgba(0,0,0,.46));
    opacity:1
  }
}
.object-plate{
  display:flex;align-items:center;gap:6px;margin-top:4px;
  color:rgba(247,242,234,.24);font-size:5px;letter-spacing:.16em
}
.object-plate i{width:18px;height:1px;background:rgba(247,242,234,.09)}
.object-plate b{font-size:5px;font-weight:600;color:rgba(247,242,234,.42)}

/* cover finish details: foil is stamped, corners have tiny wear */
.book-front{
  overflow:hidden;
}
.book-front > .cover-copy::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(circle at 1% 2%,rgba(237,219,193,.08),transparent 6%),
    radial-gradient(circle at 99% 1%,rgba(0,0,0,.09),transparent 6%),
    radial-gradient(circle at 2% 99%,rgba(0,0,0,.08),transparent 5%),
    radial-gradient(circle at 98% 98%,rgba(237,219,193,.055),transparent 5%);
  opacity:.45;
  mix-blend-mode:soft-light
}
.book-rig[data-motif="crime"] .book-front > .cover-copy::after,
.book-rig[data-motif="pride"] .book-front > .cover-copy::after{
  opacity:.68
}
.book-rig[data-motif="alice"] .book-front > .cover-copy::after,
.book-rig[data-motif="odyssey"] .book-front > .cover-copy::after{
  opacity:.30
}

/* actual page block bands / headband-tailband */
.book-pages{position:absolute;overflow:hidden}
.page-band{
  position:absolute;left:2px;right:2px;height:4px;z-index:5;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--foil) 26%,#d8c8b4) 0 3px,
      #f4e9da 3px 6px,
      rgba(89,63,42,.16) 6px 7px);
  opacity:.52
}
.page-band-top{top:1px}
.page-band-bottom{bottom:1px;transform:scaleX(-1)}
.book-rig.selected .page-band{opacity:.72}
.book-rig.opening.selected .page-band{opacity:.86}

/* opening timing visually accentuates heavier objects */
.book-rig.extracting.selected{
  animation:bookLiftPulse .52s ease-out both
}
@keyframes bookLiftPulse{
  0%{filter:drop-shadow(0 31px 28px rgba(0,0,0,.32)) brightness(1.04)}
  55%{filter:drop-shadow(0 50px 44px rgba(0,0,0,.43)) brightness(1.11)}
  100%{filter:drop-shadow(0 45px 40px rgba(0,0,0,.39)) brightness(1.09)}
}

/* INDEX: sheet shadow follows whole-stack float */
.chapter-stack.on::after{
  animation:chapterShadowFollow 5.4s ease-in-out infinite;
  transform-origin:50% 50%
}
@keyframes chapterShadowFollow{
  0%,100%{
    transform:translateX(0) translateY(1px) scaleX(.96);
    opacity:.70;filter:blur(4px)
  }
  50%{
    transform:translateX(3px) translateY(8px) scaleX(.82);
    opacity:.46;filter:blur(6px)
  }
}
.sheet-side-shadow{
  position:absolute;right:0;top:7%;bottom:7%;width:10px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(81,58,38,.06));
  opacity:.28;
  transform-origin:right center;
  animation:none
}
.chapter-stack.on .sheet-side-shadow{
  animation:sheetEdgeLight 5.7s ease-in-out infinite
}
@keyframes sheetEdgeLight{
  0%,100%{opacity:.22;transform:scaleX(.70)}
  50%{opacity:.48;transform:scaleX(1)}
}
.chapter-stack.on:hover::after{
  opacity:.34;
  transform:translateY(10px) scaleX(.72)
}
.chapter-stack.on:hover .sheet-side-shadow{
  opacity:.58;transform:scaleX(1.18)
}

/* The full selected page curves slightly along both axes */
.chapter-stack.on .paper-layer.top{
  transform-origin:50% 82%;
  transition:
    transform .34s cubic-bezier(.18,.72,.18,1),
    box-shadow .34s ease,
    filter .34s ease
}
.chapter-stack.on:hover .paper-layer.top{
  transform:translateZ(13px) rotateX(-2.1deg) rotateY(.65deg) scaleY(.994);
  box-shadow:
    -2px 34px 58px rgba(51,36,23,.14),
    4px 9px 16px rgba(51,36,23,.045),
    inset -9px 0 12px rgba(106,77,49,.035),
    inset 0 1px 0 rgba(255,255,255,.86)
}

/* READER: more controlled print contrast, edge temperature */
.paper-tone-strip{
  position:absolute;left:0;top:0;bottom:0;width:15px;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(139,99,63,.032),rgba(139,99,63,.008),transparent);
  mix-blend-mode:multiply
}
.paper{
  box-shadow:
    0 44px 98px rgba(55,39,25,.14),
    0 7px 18px rgba(55,39,25,.035),
    0 1px 0 rgba(255,255,255,.86) inset;
}
.paper-lamp{
  opacity:.72;
  mix-blend-mode:screen
}
.paper:hover .paper-lamp{opacity:.94}
.verse{
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
}
.verse .vn{
  font-variant-numeric:oldstyle-nums
}
.paper-head h1{
  text-shadow:0 1px rgba(255,255,255,.38)
}
.dropcap{
  text-shadow:
    0 1px rgba(255,255,255,.38),
    .01em .01em rgba(57,42,29,.05)
}

/* Center page gets slightly more breathing room on desktop */
@media(min-width:1181px){
  .paper-inner{padding-left:88px;padding-right:88px}
  .verse,.section-ornament,.verse-emphasis,.paper-footer{max-width:36.2em}
}

/* MOBILE: inertia reduced and physical finish kept subtle */
@media(max-width:720px){
  .object-plate{display:none}
  .book-rig.selected.inertia-enter{
    animation:bookMassSettleMobile .48s cubic-bezier(.18,.76,.18,1) both
  }
  @keyframes bookMassSettleMobile{
    0%{transform:translateX(calc(var(--x) + var(--inertia-x) * .35)) translateY(-4px) translateZ(var(--z)) rotateY(var(--ry)) scale(calc(var(--s) * .98))}
    65%{transform:translateX(var(--x)) translateY(-12px) translateZ(var(--z)) rotateY(var(--ry)) scale(calc(var(--s) * 1.006))}
    100%{transform:translateX(var(--x)) translateY(-10px) translateZ(var(--z)) rotateY(var(--ry)) scale(var(--s))}
  }
  .page-band{height:3px;opacity:.42}
  .chapter-stack.on::after{animation:chapterShadowFollowMobile 5.4s ease-in-out infinite}
  @keyframes chapterShadowFollowMobile{
    0%,100%{transform:translateY(1px) scaleX(.94);opacity:.55}
    50%{transform:translateY(6px) scaleX(.84);opacity:.37}
  }
  .sheet-side-shadow{display:none}
  .paper-tone-strip{width:10px;opacity:.65}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .book-rig.selected.inertia-enter,
  .book-rig.extracting.selected,
  .chapter-stack.on::after,
  .chapter-stack.on .sheet-side-shadow{
    animation:none!important
  }
}


/* ===== v1.9 depth-field / finish / paper-contact pass ===== */
:root{
  --selection-shift:0px;
  --selection-depth:0;
}

/* LIBRARY — the whole shelf subtly re-composes around the selected object */
.shelf-plank{
  transform:translateX(calc(var(--selection-shift) * -.028));
  transition:transform .72s cubic-bezier(.18,.76,.18,1)
}
.shelf-depth-line{
  position:absolute;left:17%;right:17%;bottom:61px;z-index:1;
  display:flex;align-items:center;gap:9px;pointer-events:none;
  color:rgba(241,224,205,.08);
  transform:translateX(calc(var(--selection-shift) * -.035));
  transition:transform .72s cubic-bezier(.18,.76,.18,1)
}
.shelf-depth-line span{height:1px;flex:1;background:linear-gradient(90deg,transparent,currentColor)}
.shelf-depth-line span:last-child{transform:scaleX(-1)}
.shelf-depth-line i{
  width:6px;height:6px;border:1px solid currentColor;border-radius:50%;
  box-shadow:0 0 0 4px rgba(255,255,255,.008)
}

/* distance falloff */
.book-rig{--distance:1}
.book-rig:not(.selected){
  filter:
    saturate(calc(.80 - min(var(--distance),3) * .045))
    brightness(calc(.75 - min(var(--distance),3) * .025))
    blur(calc(max(var(--distance) - 2,0) * .18px));
  opacity:calc(1 - min(var(--distance),4) * .055)
}
.book-rig.selected{opacity:1}
.book-rig .book-front,.book-rig .book-spine,.book-rig .book-pages{
  transition:filter .36s ease,box-shadow .36s ease
}

.finish-note{
  display:flex;align-items:center;gap:6px;margin-top:3px;
  color:rgba(247,242,234,.20);font-size:5px;letter-spacing:.15em
}
.finish-note i{width:14px;height:1px;background:rgba(247,242,234,.07)}
.finish-note b{font-size:5px;font-weight:500;color:rgba(247,242,234,.38)}

/* foil / silver / blind emboss / matte */
.book-rig[data-motif="bible"] .cover-copy strong,
.book-rig[data-motif="iliad"] .cover-copy strong{
  text-shadow:0 1px 0 color-mix(in srgb,var(--foil) 22%,transparent),0 7px 16px rgba(0,0,0,.13)
}
.book-rig[data-motif="alice"] .cover-copy strong,
.book-rig[data-motif="odyssey"] .cover-copy strong{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.11))
}
.book-rig[data-motif="personal"] .cover-copy strong{
  opacity:.82;background-image:none;-webkit-text-fill-color:var(--foil)
}
.book-rig[data-motif="crime"] .motif-crime,
.book-rig[data-motif="pride"] .motif-pride{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.025)) drop-shadow(0 -1px 0 rgba(0,0,0,.15));
  opacity:.76
}
.book-rig.selected .book-front::after{
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--foil) 10%,transparent),
    inset 8px 0 18px rgba(255,255,255,.018),
    inset -12px 0 20px rgba(0,0,0,.055)
}

/* INDEX — true contact shadows between sheets */
.contact-shadow{
  position:absolute;left:4%;right:4%;bottom:-5px;height:9px;z-index:-1;
  background:radial-gradient(ellipse at 50% 0%,rgba(63,44,29,.16),transparent 72%);
  filter:blur(2px);opacity:.42;transform-origin:50% 0%;
  transition:opacity .28s ease,transform .28s ease,filter .28s ease
}
.chapter-stack.on .layer-a .contact-shadow{opacity:.34;transform:scaleX(.92)}
.chapter-stack.on .layer-b .contact-shadow{opacity:.38;transform:scaleX(.95)}
.chapter-stack.on .layer-c .contact-shadow{opacity:.44;transform:scaleX(.98)}
.chapter-stack.on .layer-d .contact-shadow{opacity:.48;transform:scaleX(1)}
.chapter-stack.on:hover .contact-shadow{
  opacity:.26;transform:translateY(2px) scaleX(.84);filter:blur(3px)
}
.chapter-stack .paper-layer:not(.top)::after{
  content:"";position:absolute;left:7%;right:5%;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(104,76,49,.10) 18%,rgba(104,76,49,.055) 84%,transparent);
  opacity:.55
}
.chapter-stack.on:hover .paper-bow{
  transform:perspective(520px) rotateX(2.6deg) rotateY(.5deg) skewX(-.15deg) scaleY(.983)
}
.chapter-stack.on:hover .micro-curl{
  transform:scale(1.13) rotate(-8deg) translate(-1px,-1px)
}
.chapter-stack.on:hover .fold-shadow{
  transform:rotate(-21deg) translateY(2px) scaleX(1.18)
}

/* Reader — optical print margins */
.print-edge-guide{
  position:absolute;top:9%;bottom:9%;z-index:2;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(92,69,48,.045) 15%,rgba(92,69,48,.030) 84%,transparent);
  opacity:.42
}
.print-edge-left{left:58px}
.print-edge-right{right:58px}
.paper-inner::before{
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(105,81,59,.035),transparent);
  opacity:.7
}
.paper-head h1,.dropcap{filter:contrast(1.015)}
.verse{letter-spacing:-.010em}
.vn{opacity:.82}
body.focus-reading .print-edge-guide{opacity:.28}
body.focus-reading .paper-grain{opacity:.075}
body.focus-reading .ink-registration{opacity:.025}
body.focus-reading .paper-tone-strip{opacity:.74}

@media(max-width:720px){
  .finish-note,.shelf-depth-line{display:none}
  .shelf-plank{transform:none!important}
  .book-rig:not(.selected){filter:saturate(.78) brightness(.72);opacity:.90}
  .contact-shadow{opacity:.26}
  .chapter-stack.on:hover .paper-bow{transform:none}
  .print-edge-guide{display:none}
}
@media(prefers-reduced-motion:reduce){
  .shelf-plank,.shelf-depth-line{
    transition:none!important;transform:none!important
  }
}


/* ===== v2.0 signature scene pass ===== */
:root{
  --field-x:50%;
  --sheet-spread:1;
}

/* LIBRARY — the chosen book becomes the scene's physical anchor */
.book-extraction-field{
  position:absolute;
  left:50%;
  bottom:111px;
  width:360px;
  height:410px;
  transform:translateX(-50%);
  z-index:5;
  pointer-events:none;
  opacity:.34;
  transition:
    left .78s cubic-bezier(.18,.76,.18,1),
    opacity .35s ease,
    transform .55s cubic-bezier(.18,.76,.18,1);
}
.book-extraction-field .field-ring{
  position:absolute;
  left:50%;top:44%;
  width:190px;height:190px;
  transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--scene-accent) 12%,transparent);
  border-radius:50%;
  box-shadow:
    0 0 0 28px color-mix(in srgb,var(--scene-accent) 2.6%,transparent),
    0 0 60px color-mix(in srgb,var(--scene-accent) 5%,transparent);
}
.book-extraction-field .field-line{
  position:absolute;top:44%;width:68px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--scene-accent) 18%,transparent));
}
.book-extraction-field .field-line-left{left:0}
.book-extraction-field .field-line-right{right:0;transform:scaleX(-1)}
.library.book-moving .book-extraction-field{
  opacity:.18;
  transform:translateX(-50%) scale(.97)
}
.library.opening-book .book-extraction-field{
  opacity:.62;
  transform:translateX(-50%) scale(1.06)
}
.library.opening-book .book-extraction-field .field-ring{
  animation:fieldOpen 1.05s cubic-bezier(.18,.72,.16,1) both
}
@keyframes fieldOpen{
  0%{transform:translate(-50%,-50%) scale(.92);opacity:.32}
  52%{transform:translate(-50%,-50%) scale(1.06);opacity:.64}
  100%{transform:translate(-50%,-50%) scale(1.18);opacity:.06}
}

/* selected object sits in a stronger spatial pocket */
.selected-book-light{
  mix-blend-mode:screen;
}
.book-rig.selected{
  isolation:isolate
}
.book-rig.selected::before{
  box-shadow:
    0 10px 20px rgba(0,0,0,.18),
    0 0 20px color-mix(in srgb,var(--scene-accent) 7%,transparent)
}
.library:not(.opening-book) .book-rig.selected .book-front{
  animation:selectedBookBreathe 6.8s ease-in-out infinite
}
@keyframes selectedBookBreathe{
  0%,100%{filter:brightness(1) saturate(1)}
  50%{filter:brightness(1.018) saturate(1.01)}
}

/* extraction/opening is one continuous physical movement */
.book-rig.extracting.selected{
  transition:
    transform .56s cubic-bezier(.14,.78,.16,1),
    filter .42s ease!important;
}
.book-rig.opening.selected{
  transform:
    translateX(var(--x))
    translateY(-50px)
    translateZ(calc(var(--z) + 104px))
    rotateY(0deg)
    rotateX(-2.5deg)
    scale(1.205);
}
.book-rig.opening.selected .book-front{
  transform:translateZ(calc(var(--d)/2)) rotateY(-58deg);
  transition:transform .64s cubic-bezier(.14,.74,.14,1)
}
.book-rig.opening.selected .book-inner-leaf{
  opacity:1;
  transform:translateZ(calc(var(--d)/2 - 1px)) rotateY(-15deg);
  transition:transform .64s cubic-bezier(.14,.74,.14,1),opacity .28s ease
}
.book-rig.opening.selected .book-pages{
  transform:translateZ(0) scaleX(1.012);
  box-shadow:inset 8px 0 10px rgba(74,53,35,.075)
}
.book-rig.opening.selected .page-band{
  opacity:.96
}
.book-rig.opening.selected .cover-copy{
  filter:saturate(.98) brightness(1.035)
}

/* metadata feels like a museum object label */
.edition-slip{
  position:absolute;
  right:0;
  bottom:-5px;
  display:flex;align-items:center;gap:7px;
  color:rgba(247,242,234,.22);
  font-size:5px;letter-spacing:.16em;
}
.edition-slip b{
  font-weight:500;color:rgba(247,242,234,.45)
}

/* INDEX / CHAPTER — sheets influence each other as a bundle */
.chapter-stack.on .layer-a,
.chapter-stack.on .layer-b,
.chapter-stack.on .layer-c,
.chapter-stack.on .layer-d,
.chapter-stack.on .paper-layer.top{
  transition:
    transform .42s cubic-bezier(.16,.78,.18,1),
    box-shadow .36s ease,
    filter .32s ease;
}
.chapter-stack.on:hover .layer-a{
  transform:translate(-25px,17px) rotate(-9.8deg) translateZ(-4px)
}
.chapter-stack.on:hover .layer-b{
  transform:translate(-16px,11px) rotate(-6.4deg) translateZ(-1px)
}
.chapter-stack.on:hover .layer-c{
  transform:translate(14px,10px) rotate(5.6deg) translateZ(1px)
}
.chapter-stack.on:hover .layer-d{
  transform:translate(24px,14px) rotate(8.8deg) translateZ(3px)
}
.chapter-stack.on:hover .paper-layer.top{
  transform:
    translateZ(15px)
    translateY(-2px)
    rotateX(-2.3deg)
    rotateY(.85deg)
    scaleY(.993)
}
.sheet-tension{
  position:absolute;top:14%;bottom:14%;width:1px;z-index:2;pointer-events:none;
  opacity:.20;
  background:linear-gradient(180deg,transparent,rgba(110,81,55,.12),transparent)
}
.tension-left{left:8%}
.tension-right{right:8%}
.chapter-stack.on:hover .tension-left{
  opacity:.36;transform:translateX(1px)
}
.chapter-stack.on:hover .tension-right{
  opacity:.46;transform:translateX(-1px)
}

/* neighboring stacks react just slightly to the selected sheet */
.chapter-track:has(.chapter-stack.on:hover) .chapter-stack:not(.on){
  opacity:.48;
  filter:brightness(.88) saturate(.75) blur(.18px)
}
.chapter-track:has(.chapter-stack.on:hover) .chapter-stack:not(.on):first-of-type{
  --ring-delta:-2
}

/* contact shadows become layer-specific */
.chapter-stack.on:hover .layer-a .contact-shadow{transform:translateY(4px) scaleX(.72);opacity:.18}
.chapter-stack.on:hover .layer-b .contact-shadow{transform:translateY(3px) scaleX(.76);opacity:.21}
.chapter-stack.on:hover .layer-c .contact-shadow{transform:translateY(3px) scaleX(.80);opacity:.23}
.chapter-stack.on:hover .layer-d .contact-shadow{transform:translateY(2px) scaleX(.84);opacity:.25}

/* Reader — final publishing refinement, no new chrome */
.folio-hairline{
  position:absolute;z-index:2;height:1px;left:18%;right:18%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(105,78,55,.035),transparent);
  opacity:.7
}
.folio-hairline-top{top:44px}
.folio-hairline-bottom{bottom:44px}
.paper{
  box-shadow:
    0 48px 104px rgba(55,39,25,.145),
    0 11px 23px rgba(55,39,25,.035),
    0 2px 4px rgba(55,39,25,.022),
    0 1px 0 rgba(255,255,255,.88) inset;
}
.paper-lamp{
  filter:blur(.2px)
}
.paper-head h1{
  letter-spacing:-.058em
}
.verse{
  text-wrap:pretty;
  line-height:1.965;
}
.paper-footer{
  padding-top:13px;
}
.paper-rule-ornament{
  opacity:.86
}

/* focus mode: page becomes the only strong object */
body.focus-reading .reader-ambient-number{opacity:.46}
body.focus-reading .paper-stack{filter:drop-shadow(0 10px 12px rgba(67,48,31,.03))}
body.focus-reading .paper{
  box-shadow:0 56px 118px rgba(52,37,24,.16)
}

/* MOBILE — keep signature motion without heavy 3D */
@media(max-width:720px){
  .book-extraction-field{
    width:210px;height:290px;bottom:92px;opacity:.24
  }
  .book-extraction-field .field-ring{width:118px;height:118px}
  .edition-slip{display:none}
  .library:not(.opening-book) .book-rig.selected .book-front{animation:none}
  .book-rig.opening.selected{
    transform:
      translateX(var(--x))
      translateY(-27px)
      translateZ(calc(var(--z) + 42px))
      rotateY(0deg) scale(1.14)
  }
  .book-rig.opening.selected .book-front{
    transform:translateZ(calc(var(--d)/2)) rotateY(-31deg)
  }
  .chapter-stack.on:hover .layer-a,
  .chapter-stack.on:hover .layer-b,
  .chapter-stack.on:hover .layer-c,
  .chapter-stack.on:hover .layer-d{
    transform:none
  }
  .sheet-tension,.folio-hairline{display:none}
  .verse{line-height:1.94}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .book-rig.selected .book-front,
  .book-extraction-field .field-ring{
    animation:none!important
  }
}


/* ===== v2.1 hinge / bundle coupling / print-light pass ===== */

/* LIBRARY — make the opening read as one connected object */
.hinge-glow{
  position:absolute;
  left:calc(var(--w) / 2 - 4px);
  top:8px;
  bottom:8px;
  width:8px;
  z-index:6;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(90deg,
      transparent,
      color-mix(in srgb,var(--foil) 12%,transparent) 38%,
      color-mix(in srgb,var(--foil) 24%,transparent) 50%,
      transparent 100%);
  filter:blur(2px);
  transition:opacity .28s ease
}
.book-rig.open-preview.selected .hinge-glow,
.book-rig.extracting.selected .hinge-glow,
.book-rig.opening.selected .hinge-glow{
  opacity:.75
}
.book-rig.opening.selected .hinge-glow{
  animation:hingeFlash .72s ease-out both
}
@keyframes hingeFlash{
  0%{opacity:.28;filter:blur(3px)}
  48%{opacity:.95;filter:blur(1.5px)}
  100%{opacity:.35;filter:blur(3px)}
}

.book-inner-leaf{
  transform-origin:left center;
}
.book-inner-leaf .leaf-folio{
  position:absolute;
  right:12px;
  bottom:10px;
  font:400 7px var(--serif);
  color:#b1a496;
  opacity:.62
}
.book-rig.opening.selected .book-inner-leaf{
  box-shadow:
    9px 0 18px rgba(60,43,29,.07),
    inset 7px 0 10px rgba(91,65,42,.05);
}

/* page block picks up curvature as cover opens */
.book-rig.opening.selected .book-pages{
  transform-origin:left center;
  animation:pageBlockBreathe .64s cubic-bezier(.14,.74,.14,1) both;
}
@keyframes pageBlockBreathe{
  0%{transform:perspective(700px) rotateY(0deg) scaleX(1)}
  54%{transform:perspective(700px) rotateY(-2.2deg) scaleX(1.015)}
  100%{transform:perspective(700px) rotateY(-1deg) scaleX(1.01)}
}

/* when the selected book moves, the field and object settle together */
.library.book-moving .book-extraction-field .field-ring{
  transform:translate(-50%,-50%) scale(.96)
}
.library:not(.book-moving):not(.opening-book) .book-extraction-field .field-ring{
  transition:transform .46s cubic-bezier(.18,.76,.18,1)
}

/* CHAPTER — paper layers now react as a coupled bundle */
.paper-notch{
  position:absolute;
  right:-1px;
  top:47%;
  width:11px;
  height:26px;
  z-index:6;
  background:
    linear-gradient(90deg,rgba(183,125,87,.20),rgba(255,255,255,.66));
  clip-path:polygon(0 0,100% 14%,100% 86%,0 100%);
  opacity:.36;
  filter:drop-shadow(1px 2px 2px rgba(68,48,31,.05));
  transition:transform .28s ease,opacity .28s ease
}
.lower-tension-line{
  position:absolute;
  left:12%;
  right:12%;
  bottom:17px;
  height:1px;
  z-index:2;
  background:linear-gradient(90deg,transparent,rgba(102,75,50,.08),transparent);
  opacity:.48;
  transform-origin:center
}
.chapter-stack.on:hover .paper-notch{
  transform:translateX(2px) rotateY(-16deg);
  opacity:.62
}
.chapter-stack.on:hover .lower-tension-line{
  transform:scaleX(1.08);
  opacity:.72
}

/* lower sheets open progressively with the top sheet */
.chapter-stack.on:hover .layer-a{
  filter:brightness(.97);
}
.chapter-stack.on:hover .layer-b{
  filter:brightness(.985);
}
.chapter-stack.on:hover .layer-c,
.chapter-stack.on:hover .layer-d{
  filter:brightness(1);
}

/* bundle has a shared "spring" on hover-in */
.chapter-stack.on:hover{
  animation:bundleSpring .46s cubic-bezier(.16,.78,.18,1) both;
}
@keyframes bundleSpring{
  0%{translate:0 -2px}
  48%{translate:0 -10px}
  72%{translate:0 -6px}
  100%{translate:0 -8px}
}

/* active top sheet gets a finer edge highlight */
.chapter-stack.on .paper-layer.top{
  outline:1px solid rgba(255,255,255,.30);
  outline-offset:-1px;
}
.chapter-stack.on:hover .paper-layer.top{
  outline-color:rgba(255,255,255,.52)
}

/* READER — subtle side-light falloff and quieter print texture */
.paper-side-falloff{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(98,72,49,.018),
      transparent 7%,
      transparent 92%,
      rgba(98,72,49,.015));
  mix-blend-mode:multiply;
}
.paper-lamp{
  opacity:.78
}
.paper:hover .paper-lamp{
  opacity:.96
}

/* title + body optical polish */
.paper-head h1{
  font-variation-settings:"opsz" 32;
}
.verse{
  font-variation-settings:"opsz" 18;
}
.dropcap{
  filter:contrast(1.02)
}
.paper-footer{
  opacity:.74
}
.paper-rule-ornament{
  margin-bottom:12px
}

/* slightly more tangible desk depth */
.reader-stage{
  background:
    radial-gradient(ellipse at 50% 18%,rgba(255,255,255,.88),transparent 33%),
    radial-gradient(ellipse at 50% 88%,rgba(139,105,73,.060),transparent 36%),
    linear-gradient(135deg,#ebe4da,#e5ddd2);
}
.paper-stack::before{
  transition:transform .24s ease,opacity .24s ease
}
.paper-stack:hover::before{
  transform:scaleX(.95);
  opacity:.90
}

/* MOBILE — reduce hinge/bundle complexity */
@media(max-width:720px){
  .hinge-glow{display:none}
  .book-inner-leaf .leaf-folio{display:none}
  .paper-notch{opacity:.22}
  .lower-tension-line{display:none}
  .chapter-stack.on:hover{
    animation:none
  }
  .chapter-stack.on:hover .paper-notch{
    transform:none
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .book-rig.opening.selected .hinge-glow,
  .book-rig.opening.selected .book-pages,
  .chapter-stack.on:hover{
    animation:none!important
  }
}


/* ===== v2.2 book-to-world cinematic transition ===== */

/* Transitional open-book spread */
.book-cinematic{
  position:fixed;
  inset:0;
  z-index:260;
  pointer-events:none;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  background:
    radial-gradient(ellipse at 50% 54%,rgba(255,250,241,.24),transparent 35%),
    rgba(20,20,24,.10);
  backdrop-filter:blur(0px);
  transition:
    opacity .26s ease,
    backdrop-filter .34s ease,
    visibility 0s linear .34s;
}
.book-cinematic.active{
  opacity:1;
  visibility:visible;
  backdrop-filter:blur(4px);
  transition:
    opacity .26s ease,
    backdrop-filter .34s ease,
    visibility 0s;
}
.book-cinematic-spread{
  position:relative;
  width:min(72vw,920px);
  height:min(64vh,650px);
  perspective:1800px;
  transform-style:preserve-3d;
  transform:translateY(36px) scale(.40);
  opacity:.08;
  transition:
    transform .64s cubic-bezier(.14,.78,.16,1),
    opacity .30s ease;
}
.book-cinematic.active .book-cinematic-spread{
  transform:translateY(0) scale(1);
  opacity:1;
}
.cinematic-page{
  position:absolute;
  top:0;bottom:0;
  width:50%;
  background:
    radial-gradient(circle at 22% 14%,rgba(115,88,61,.025) 0 1px,transparent 1.1px),
    linear-gradient(90deg,#eee0cf,#fff8eb 12%,#fbf2e4 88%,#e4d4c0);
  background-size:21px 23px,auto;
  border:1px solid rgba(71,52,34,.08);
  box-shadow:0 34px 74px rgba(48,34,22,.12);
  color:#2b2722;
  overflow:hidden;
}
.cinematic-page::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(95,69,45,.045),transparent 8%,transparent 92%,rgba(95,69,45,.03));
  pointer-events:none
}
.cinematic-page-left{
  left:0;
  transform-origin:right center;
  transform:rotateY(83deg);
  border-radius:4px 0 0 4px;
}
.cinematic-page-right{
  right:0;
  transform-origin:left center;
  transform:rotateY(-83deg);
  border-radius:0 4px 4px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:13px;
}
.book-cinematic.active .cinematic-page-left,
.book-cinematic.active .cinematic-page-right{
  transition:transform .72s cubic-bezier(.12,.76,.14,1);
  transform:rotateY(0deg);
}
.cinematic-spine{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:18px;
  transform:translateX(-50%);
  z-index:4;
  background:
    linear-gradient(90deg,
      rgba(90,64,42,.10),
      rgba(255,255,255,.55) 44%,
      rgba(90,64,42,.08) 52%,
      rgba(255,255,255,.22));
  box-shadow:0 0 24px rgba(75,52,35,.08)
}
.cinematic-folio{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:72px;
  height:72px;
  border:1px solid rgba(135,95,65,.15);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#a37f67;
  font:400 16px var(--serif);
  letter-spacing:.10em;
  opacity:.56
}
.cinematic-kicker{
  font:600 7px var(--sans);
  letter-spacing:.22em;
  color:#9d8f81
}
.cinematic-page-right strong{
  font:400 clamp(48px,6vw,86px)/.88 var(--serif);
  letter-spacing:-.065em;
  color:#26221e
}
.cinematic-page-right small{
  font:600 7px var(--sans);
  letter-spacing:.16em;
  color:#a09488
}

/* Final wash when page becomes the next world */
.book-cinematic.to-world .book-cinematic-spread{
  transform:translateY(0) scale(1.34);
  opacity:0;
  filter:blur(4px);
  transition:
    transform .44s cubic-bezier(.16,.76,.18,1),
    opacity .26s ease,
    filter .30s ease
}
.book-cinematic.to-world{
  background:rgba(239,233,224,.96);
  backdrop-filter:blur(9px)
}

/* Index enters from the opened-book material language */
.index-screen.index-enter .index-top{
  animation:indexHeaderIn .54s .06s both cubic-bezier(.18,.76,.18,1)
}
.index-screen.index-enter .index-shell{
  animation:indexShellIn .72s both cubic-bezier(.16,.78,.18,1)
}
.index-screen.index-enter .index-hero > *{
  animation:indexHeroIn .62s .12s both cubic-bezier(.18,.76,.18,1)
}
.index-screen.index-enter .volume{
  animation:volumeRise .48s both cubic-bezier(.18,.76,.18,1)
}
.index-screen.index-enter .volume:nth-child(1){animation-delay:.13s}
.index-screen.index-enter .volume:nth-child(2){animation-delay:.16s}
.index-screen.index-enter .volume:nth-child(3){animation-delay:.19s}
.index-screen.index-enter .volume:nth-child(4){animation-delay:.22s}
.index-screen.index-enter .volume:nth-child(5){animation-delay:.25s}
.index-screen.index-enter .volume:nth-child(6){animation-delay:.28s}
.index-screen.index-enter .volume:nth-child(7){animation-delay:.31s}
.index-screen.index-enter .volume:nth-child(n+8){animation-delay:.34s}
.index-entry-line{
  position:fixed;
  left:50%;
  top:72px;
  transform:translateX(-50%);
  z-index:29;
  width:min(540px,56vw);
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(115,86,61,.11);
  pointer-events:none
}
.index-entry-line span{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,currentColor)
}
.index-entry-line span:last-child{transform:scaleX(-1)}
.index-entry-line i{
  width:6px;height:6px;
  border:1px solid currentColor;
  transform:rotate(45deg)
}
@keyframes indexHeaderIn{
  from{opacity:.48;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes indexShellIn{
  from{opacity:.62;transform:translateY(14px) scale(.992);filter:blur(.5px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:none}
}
@keyframes indexHeroIn{
  from{opacity:.42;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes volumeRise{
  from{opacity:.34;transform:translateY(7px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Chapter bundle: moving one sheet tugs the rest */
.bundle-link{
  position:absolute;
  left:50%;
  width:32%;
  height:1px;
  z-index:1;
  opacity:.12;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(117,85,57,.16),transparent);
  transform-origin:left center
}
.bundle-link-a{top:32%;transform:translateX(-50%) rotate(-3deg)}
.bundle-link-b{top:67%;transform:translateX(-50%) rotate(2deg)}
.chapter-stack.on:hover .bundle-link-a{
  opacity:.28;
  transform:translateX(-50%) rotate(-6deg) scaleX(1.12)
}
.chapter-stack.on:hover .bundle-link-b{
  opacity:.24;
  transform:translateX(-50%) rotate(4deg) scaleX(1.08)
}

/* Recompose motion when chapter selection changes */
.chapter-carousel.paper-switch .chapter-stack.on .layer-a{
  animation:recomposeA .54s both cubic-bezier(.16,.78,.18,1)
}
.chapter-carousel.paper-switch .chapter-stack.on .layer-b{
  animation:recomposeB .58s .02s both cubic-bezier(.16,.78,.18,1)
}
.chapter-carousel.paper-switch .chapter-stack.on .layer-c{
  animation:recomposeC .62s .03s both cubic-bezier(.16,.78,.18,1)
}
.chapter-carousel.paper-switch .chapter-stack.on .layer-d{
  animation:recomposeD .66s .04s both cubic-bezier(.16,.78,.18,1)
}
.chapter-carousel.paper-switch .chapter-stack.on .paper-layer.top{
  animation:recomposeTop .70s .05s both cubic-bezier(.16,.78,.18,1)
}
@keyframes recomposeA{
  from{transform:translate(-6px,3px) rotate(-1deg)}
  to{transform:translate(-17px,14px) rotate(-7deg)}
}
@keyframes recomposeB{
  from{transform:translate(-4px,2px) rotate(-.5deg)}
  to{transform:translate(-10px,9px) rotate(-4deg)}
}
@keyframes recomposeC{
  from{transform:translate(3px,2px) rotate(.4deg)}
  to{transform:translate(9px,7px) rotate(3.8deg)}
}
@keyframes recomposeD{
  from{transform:translate(5px,3px) rotate(.8deg)}
  to{transform:translate(15px,11px) rotate(6deg)}
}
@keyframes recomposeTop{
  0%{transform:translateZ(0) translateY(8px) rotateX(1deg);opacity:.72}
  60%{transform:translateZ(10px) translateY(-3px) rotateX(-2deg);opacity:1}
  100%{transform:translateZ(7px) translateY(0) rotateX(0deg);opacity:1}
}

/* Reader stays restrained; only transition arrival is softened */
.reader-screen.paper-enter .paper{
  animation:paperPrintSettle .70s both cubic-bezier(.16,.78,.18,1)
}
@keyframes paperPrintSettle{
  0%{filter:brightness(1.05);box-shadow:0 20px 50px rgba(55,39,25,.08)}
  100%{filter:brightness(1);box-shadow:0 48px 104px rgba(55,39,25,.145),0 11px 23px rgba(55,39,25,.035),0 2px 4px rgba(55,39,25,.022),0 1px 0 rgba(255,255,255,.88) inset}
}

/* Mobile transition is flatter and faster */
@media(max-width:720px){
  .book-cinematic-spread{
    width:92vw;
    height:54vh;
    transform:translateY(24px) scale(.56)
  }
  .book-cinematic.active .book-cinematic-spread{
    transform:translateY(0) scale(1)
  }
  .cinematic-page-right strong{font-size:44px}
  .cinematic-page-right small{font-size:6px}
  .book-cinematic.to-world .book-cinematic-spread{
    transform:scale(1.18)
  }
  .index-entry-line{display:none}
  .index-screen.index-enter .volume:nth-child(n){
    animation-delay:.08s
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .book-cinematic-spread,
  .cinematic-page,
  .index-screen.index-enter .index-top,
  .index-screen.index-enter .index-shell,
  .index-screen.index-enter .index-hero > *,
  .index-screen.index-enter .volume,
  .chapter-carousel.paper-switch .chapter-stack.on .paper-layer{
    animation:none!important;
    transition:none!important
  }
}


/* ===== v2.3 selected volume -> paper stack handoff ===== */

.volume-morph{
  position:fixed;
  inset:0;
  z-index:238;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility 0s linear .28s;
}
.volume-morph.active{
  opacity:1;
  visibility:visible;
  transition:opacity .18s ease,visibility 0s;
}
.volume-morph-object{
  position:fixed;
  left:0;
  top:0;
  width:110px;
  height:148px;
  perspective:1200px;
  transform-style:preserve-3d;
  transform-origin:50% 50%;
  transition:
    left .58s cubic-bezier(.16,.78,.18,1),
    top .58s cubic-bezier(.16,.78,.18,1),
    width .58s cubic-bezier(.16,.78,.18,1),
    height .58s cubic-bezier(.16,.78,.18,1),
    transform .58s cubic-bezier(.16,.78,.18,1),
    opacity .26s ease;
}
.volume-morph-cover{
  position:absolute;
  inset:0;
  z-index:6;
  transform-origin:left center;
  transform-style:preserve-3d;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-align:center;
  padding:18px 12px;
  color:#ead7b8;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.026) 0 1px,transparent 1px 3px),
    linear-gradient(135deg,#524033,#352b27 56%,#282126);
  border:1px solid rgba(239,210,170,.10);
  border-radius:3px 2px 2px 3px;
  box-shadow:
    inset 7px 0 11px rgba(0,0,0,.18),
    0 18px 34px rgba(54,39,27,.17);
  transition:
    transform .58s cubic-bezier(.14,.74,.14,1),
    opacity .30s ease,
    filter .30s ease;
}
.volume-morph-cover small{
  font:600 6px var(--sans);
  letter-spacing:.18em;
  color:rgba(239,218,187,.48)
}
.volume-morph-cover strong{
  max-width:92%;
  font:400 23px/.94 var(--serif);
  letter-spacing:-.055em;
  color:#ead7b8
}
.volume-morph-cover i{
  width:30px;
  height:1px;
  background:rgba(229,199,157,.25)
}
.volume-morph-cover span{
  font:600 5px var(--sans);
  letter-spacing:.18em;
  color:rgba(239,218,187,.40)
}
.volume-morph-spine{
  position:absolute;
  left:-7px;
  top:3px;
  bottom:3px;
  width:11px;
  z-index:5;
  border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,#201a1a,#594437 45%,#2e2523);
  box-shadow:inset 3px 0 5px rgba(0,0,0,.24)
}
.volume-morph-pages{
  position:absolute;
  inset:5px 3px 5px 8px;
  z-index:3;
  background:
    repeating-linear-gradient(0deg,#eadfce 0 1px,#f9f0e3 1px 3px);
  border-radius:1px;
  box-shadow:5px 5px 14px rgba(55,39,25,.10);
  transform-style:preserve-3d;
  transition:
    transform .58s cubic-bezier(.16,.78,.18,1),
    background .32s ease,
    box-shadow .32s ease;
}
.vm-sheet{
  position:absolute;
  inset:0;
  border:1px solid rgba(82,59,40,.06);
  border-radius:2px;
  background:
    radial-gradient(circle at 14% 17%,rgba(112,83,56,.025) 0 1px,transparent 1.2px),
    linear-gradient(145deg,#fffefb,#f9f1e6);
  background-size:22px 23px,auto;
  box-shadow:0 8px 18px rgba(58,42,28,.06);
  opacity:0;
  transform-origin:center bottom;
  transition:
    transform .52s cubic-bezier(.16,.78,.18,1),
    opacity .26s ease,
    box-shadow .26s ease;
}
.volume-morph-shadow{
  position:fixed;
  left:0;top:0;
  width:100px;height:18px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(58,42,27,.18),transparent 70%);
  filter:blur(6px);
  opacity:0;
  transition:
    left .58s cubic-bezier(.16,.78,.18,1),
    top .58s cubic-bezier(.16,.78,.18,1),
    width .58s cubic-bezier(.16,.78,.18,1),
    opacity .28s ease,
    transform .42s ease;
}

/* Phase 1: selected mini book leaves its shelf */
.volume-morph.lift .volume-morph-object{
  transform:translateY(-8px) translateZ(40px) rotateX(-2deg) scale(1.045)
}
.volume-morph.lift .volume-morph-shadow{
  opacity:.45;
  transform:scaleX(.82)
}

/* Phase 2: the book reaches the paper zone and opens */
.volume-morph.open .volume-morph-cover{
  transform:rotateY(-74deg) translateZ(2px);
  filter:brightness(1.04)
}
.volume-morph.open .volume-morph-pages{
  transform:perspective(900px) rotateX(1.4deg) scaleX(1.025);
  background:#f8efe2
}
.volume-morph.open .vm-sheet{
  opacity:1
}
.volume-morph.open .vm-sheet-a{transform:translate(-17px,13px) rotate(-7deg)}
.volume-morph.open .vm-sheet-b{transform:translate(-9px,8px) rotate(-3.6deg)}
.volume-morph.open .vm-sheet-c{transform:translate(9px,7px) rotate(3.4deg)}
.volume-morph.open .vm-sheet-d{transform:translate(16px,11px) rotate(6deg)}

/* Phase 3: cover disappears, paper bundle becomes the destination */
.volume-morph.to-paper .volume-morph-cover,
.volume-morph.to-paper .volume-morph-spine{
  opacity:0;
  transform:rotateY(-92deg) translateX(-16px);
}
.volume-morph.to-paper .volume-morph-pages{
  background:transparent;
  box-shadow:none;
}
.volume-morph.to-paper .vm-sheet{
  opacity:.94;
  box-shadow:0 15px 28px rgba(58,42,28,.08)
}
.volume-morph.to-paper .vm-sheet-a{transform:translate(-28px,17px) rotate(-9deg)}
.volume-morph.to-paper .vm-sheet-b{transform:translate(-15px,10px) rotate(-5deg)}
.volume-morph.to-paper .vm-sheet-c{transform:translate(13px,9px) rotate(4.6deg)}
.volume-morph.to-paper .vm-sheet-d{transform:translate(24px,14px) rotate(7.7deg)}
.volume-morph.to-paper .volume-morph-shadow{
  opacity:.22;
  transform:translateY(9px) scaleX(.70)
}

/* Index scene visually makes room for the handoff */
.index-screen.volume-transitioning .volume-grid .volume:not(.on){
  opacity:.28;
  filter:saturate(.55) brightness(.92);
  transition:opacity .25s ease,filter .25s ease
}
.index-screen.volume-transitioning .volume-focus{
  opacity:.48;
  transition:opacity .25s ease
}
.index-screen.volume-transitioning .chapter-carousel{
  box-shadow:
    inset 0 0 0 1px rgba(143,105,75,.055),
    0 22px 42px rgba(69,49,31,.035);
  transition:box-shadow .28s ease
}
.index-screen.volume-transitioning .chapter-shadow-bed{
  opacity:.34
}
.index-screen.volume-transitioning .chapter-track{
  opacity:.34;
  filter:blur(.55px);
  transition:opacity .25s ease,filter .25s ease
}
.index-screen.volume-transitioning .chapter-specimen,
.index-screen.volume-transitioning .chapter-nav,
.index-screen.volume-transitioning .chapter-dots{
  opacity:.25;
  transition:opacity .22s ease
}

.volume-to-paper-guide{
  position:absolute;
  right:0;
  top:-21px;
  display:flex;
  align-items:center;
  gap:6px;
  color:#b1a599;
  font:600 5px var(--sans);
  letter-spacing:.15em;
  opacity:.55;
  pointer-events:none
}
.volume-to-paper-guide i{
  width:16px;height:1px;
  background:#d5cabf
}
.volume-to-paper-guide b{
  font-size:7px;
  font-weight:400;
  color:#aa7557
}
.chapter-area{position:relative}

/* Arrival: newly generated stack catches the old book's momentum */
.chapter-carousel.volume-arrival .chapter-stack.on{
  animation:volumePaperArrival .72s both cubic-bezier(.16,.78,.18,1)
}
.chapter-carousel.volume-arrival .chapter-stack.on .layer-a{
  animation:volumeArrivalA .72s .02s both cubic-bezier(.16,.78,.18,1)
}
.chapter-carousel.volume-arrival .chapter-stack.on .layer-b{
  animation:volumeArrivalB .72s .05s both cubic-bezier(.16,.78,.18,1)
}
.chapter-carousel.volume-arrival .chapter-stack.on .layer-c{
  animation:volumeArrivalC .72s .07s both cubic-bezier(.16,.78,.18,1)
}
.chapter-carousel.volume-arrival .chapter-stack.on .layer-d{
  animation:volumeArrivalD .72s .09s both cubic-bezier(.16,.78,.18,1)
}
@keyframes volumePaperArrival{
  0%{opacity:.25;translate:0 14px;filter:blur(1px)}
  58%{opacity:1;translate:0 -8px;filter:none}
  100%{opacity:1;translate:0 -2px;filter:none}
}
@keyframes volumeArrivalA{
  from{transform:translate(-6px,4px) rotate(-1deg)}
  to{transform:translate(-17px,14px) rotate(-7deg)}
}
@keyframes volumeArrivalB{
  from{transform:translate(-3px,3px) rotate(-.5deg)}
  to{transform:translate(-10px,9px) rotate(-4deg)}
}
@keyframes volumeArrivalC{
  from{transform:translate(4px,3px) rotate(.6deg)}
  to{transform:translate(9px,7px) rotate(3.8deg)}
}
@keyframes volumeArrivalD{
  from{transform:translate(6px,4px) rotate(1deg)}
  to{transform:translate(15px,11px) rotate(6deg)}
}

/* #2074 [A] selected state has more tactile lift — owner preview G2/G3 numbers.
   This rule previously masked the #1845 [A] transform (dead CSS); reconciled here. */
.volume.on{
  transform:translateY(-26px) scale(1.16) rotateX(-1deg) rotateY(-2deg)
}
.volume.on::after{
  content:"";
  position:absolute;
  left:15%;right:15%;bottom:-12px;height:14px;
  background:radial-gradient(ellipse,rgba(61,43,28,.12),transparent 72%);
  filter:blur(4px);
  opacity:.55
}

/* Mobile: flatter, faster handoff */
@media(max-width:720px){
  .volume-morph-object{
    width:88px;height:118px
  }
  .volume-morph-cover strong{font-size:18px}
  .volume-morph-cover small,
  .volume-morph-cover span{font-size:4px}
  .volume-to-paper-guide{display:none}
  .volume-morph.open .volume-morph-cover{transform:rotateY(-48deg)}
  .volume-morph.to-paper .vm-sheet-a{transform:translate(-17px,10px) rotate(-6deg)}
  .volume-morph.to-paper .vm-sheet-b{transform:translate(-9px,6px) rotate(-3deg)}
  .volume-morph.to-paper .vm-sheet-c{transform:translate(8px,6px) rotate(2.8deg)}
  .volume-morph.to-paper .vm-sheet-d{transform:translate(15px,9px) rotate(5deg)}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .volume-morph-object,
  .volume-morph-cover,
  .volume-morph-pages,
  .vm-sheet,
  .volume-morph-shadow,
  .chapter-carousel.volume-arrival .chapter-stack.on,
  .chapter-carousel.volume-arrival .chapter-stack.on .paper-layer{
    animation:none!important;
    transition:none!important
  }
}


/* ===== v2.4 Chapter sheet -> Reader paper transformation ===== */

/* Source stack visibly releases one sheet */
.chapter-carousel.chapter-extracting .chapter-stack:not(.on){
  opacity:.28!important;
  filter:brightness(.86) saturate(.68) blur(.25px)!important;
  transition:opacity .25s ease,filter .25s ease
}
.chapter-carousel.chapter-extracting .chapter-stack.on{
  animation:none!important;
  translate:0 -5px;
  z-index:20
}
.chapter-stack.extracting-sheet .paper-layer.top{
  transform:
    translateZ(30px)
    translateY(-17px)
    rotateX(-4.2deg)
    rotateY(1.2deg)
    scale(1.025)!important;
  box-shadow:
    0 38px 64px rgba(50,35,22,.16),
    0 10px 22px rgba(50,35,22,.06)!important;
  transition:
    transform .32s cubic-bezier(.16,.78,.18,1),
    box-shadow .30s ease!important;
}
.chapter-stack.extracting-sheet .layer-a{
  transform:translate(-11px,16px) rotate(-4deg)!important;
  opacity:.78
}
.chapter-stack.extracting-sheet .layer-b{
  transform:translate(-6px,12px) rotate(-2.2deg)!important;
  opacity:.82
}
.chapter-stack.extracting-sheet .layer-c{
  transform:translate(5px,11px) rotate(2deg)!important;
  opacity:.84
}
.chapter-stack.extracting-sheet .layer-d{
  transform:translate(10px,15px) rotate(4.2deg)!important;
  opacity:.80
}
.chapter-stack.extracting-sheet.release-stack .layer-a{
  transform:translate(-3px,9px) rotate(-1deg)!important;
  opacity:.42
}
.chapter-stack.extracting-sheet.release-stack .layer-b{
  transform:translate(-2px,7px) rotate(-.5deg)!important;
  opacity:.46
}
.chapter-stack.extracting-sheet.release-stack .layer-c{
  transform:translate(2px,7px) rotate(.5deg)!important;
  opacity:.48
}
.chapter-stack.extracting-sheet.release-stack .layer-d{
  transform:translate(3px,9px) rotate(1deg)!important;
  opacity:.44
}
.chapter-stack.extracting-sheet.release-stack .paper-layer.top{
  opacity:.06
}

/* Backdrop behaves like the desk surface disappearing beneath the page */
.morph-backdrop{
  background:
    radial-gradient(ellipse at 50% 58%,rgba(247,242,235,0),rgba(224,216,206,0));
}
.morph-backdrop.show{
  background:
    radial-gradient(ellipse at 50% 56%,rgba(249,246,241,.48),rgba(224,216,206,.78));
  backdrop-filter:blur(7px)
}

/* Morph paper is a real sheet with temporary supporting sheets beneath it */
.paper-morph{
  will-change:left,top,width,height,transform,opacity;
  transform:
    perspective(1200px)
    rotateX(2.6deg)
    rotateY(-2.8deg)
    translateY(0);
  border-radius:3px;
  isolation:isolate;
  overflow:visible;
}
.paper-morph.show{
  display:block
}
.morph-under{
  position:absolute;
  inset:3px 1px 1px 2px;
  z-index:-1;
  background:
    radial-gradient(circle at 16% 18%,rgba(108,82,55,.02) 0 1px,transparent 1.2px),
    linear-gradient(145deg,#f9f1e6,#e9dece);
  background-size:22px 24px,auto;
  border:1px solid rgba(76,55,37,.07);
  box-shadow:0 18px 34px rgba(55,39,25,.08);
  transform-origin:50% 78%;
  opacity:.82;
  transition:
    transform .38s cubic-bezier(.16,.78,.18,1),
    opacity .28s ease
}
.morph-under-a{transform:translate(-12px,10px) rotate(-5deg)}
.morph-under-b{transform:translate(-6px,6px) rotate(-2.5deg)}
.morph-under-c{transform:translate(9px,7px) rotate(3.4deg)}

.paper-morph.lifted{
  transform:
    perspective(1200px)
    rotateX(-3.8deg)
    rotateY(2.1deg)
    translateY(-18px)
    translateZ(26px)
    scale(1.035);
  box-shadow:0 44px 82px rgba(48,34,22,.18)
}
.paper-morph.lifted .morph-under-a{transform:translate(-18px,14px) rotate(-7deg)}
.paper-morph.lifted .morph-under-b{transform:translate(-9px,8px) rotate(-3.6deg)}
.paper-morph.lifted .morph-under-c{transform:translate(13px,9px) rotate(4.6deg)}

.paper-morph.separating .morph-under-a{
  transform:translate(-4px,15px) rotate(-1deg);
  opacity:.30
}
.paper-morph.separating .morph-under-b{
  transform:translate(-2px,11px) rotate(-.5deg);
  opacity:.24
}
.paper-morph.separating .morph-under-c{
  transform:translate(3px,13px) rotate(.8deg);
  opacity:.20
}

.paper-morph.is-expanding{
  transform:
    perspective(1500px)
    rotateX(0deg)
    rotateY(0deg)
    translateY(0)
    scale(1);
  overflow:hidden;
  border-radius:1px;
  box-shadow:
    0 56px 118px rgba(48,34,22,.18),
    0 10px 24px rgba(48,34,22,.05)
}
.paper-morph.is-expanding .morph-under{
  opacity:0;
  transform:translate(0,16px) rotate(0deg) scale(.94)
}

/* The morph itself changes from chapter picker to reading-paper language */
.paper-morph-inner{
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 18%,rgba(111,82,54,.023) 0 .8px,transparent 1px),
    linear-gradient(90deg,rgba(102,75,51,.016),transparent 6%,transparent 94%,rgba(102,75,51,.013)),
    #fffdf8;
  background-size:20px 22px,auto,auto;
}
.morph-running{
  position:absolute;
  left:8%;
  right:8%;
  top:8%;
  display:flex;
  align-items:center;
  gap:8px;
  color:#a99d91;
  font:600 6px var(--sans);
  letter-spacing:.15em;
  opacity:.74;
  transition:top .45s ease,opacity .30s ease
}
.morph-running i{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(111,82,58,.10),transparent)
}
.morph-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:
    transform .42s cubic-bezier(.16,.78,.18,1),
    opacity .28s ease
}
.morph-center small{
  font:600 6px var(--sans);
  letter-spacing:.18em;
  color:#a89b8e
}
.morph-center strong{
  font:400 clamp(62px,7vw,94px)/.86 var(--serif);
  color:#a6613f;
  letter-spacing:-.06em;
  margin:12px 0 9px
}
.morph-chapter-label{
  font:600 6px var(--sans)!important;
  letter-spacing:.18em!important;
  color:#a99d91!important
}
.morph-reader-head{
  position:absolute;
  left:10%;
  right:10%;
  top:17%;
  display:flex;
  align-items:center;
  gap:8px;
  color:#aa9d90;
  font:600 6px var(--sans);
  letter-spacing:.16em;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .28s ease,transform .36s ease
}
.morph-reader-head i{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(104,78,55,.11),transparent)
}
.morph-page-edge{
  position:absolute;
  top:4%;
  bottom:4%;
  right:-1px;
  width:5px;
  background:repeating-linear-gradient(0deg,#e5d8c7 0 2px,#faf0e3 2px 4px);
  opacity:.45
}
.morph-curl{
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:42px;
  height:42px;
  background:
    linear-gradient(135deg,transparent 0 47%,rgba(113,84,59,.08) 48%,rgba(255,255,255,.94) 55%,#eadfce 82%,#d8c8b5 100%);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  filter:drop-shadow(-3px -2px 4px rgba(61,43,29,.08));
  opacity:.70;
  transform:scale(.84) rotate(-4deg);
  transform-origin:100% 100%;
  transition:transform .44s ease,opacity .28s ease
}
.morph-folio{
  position:absolute;
  right:6%;
  bottom:5%;
  color:#aaa095;
  font:600 6px var(--sans);
  letter-spacing:.14em;
  opacity:.70
}

/* Mid-transition: the chapter card identity dissolves into the reader page */
.paper-morph.becoming-reader .morph-center{
  transform:translateY(-10px) scale(.72);
  opacity:.10
}
.paper-morph.becoming-reader .morph-running{
  top:6%;
  opacity:.84
}
.paper-morph.becoming-reader .morph-reader-head{
  opacity:.78;
  transform:translateY(0)
}
.paper-morph.becoming-reader .morph-curl{
  transform:scale(.46) rotate(-1deg);
  opacity:.28
}
.paper-morph.becoming-reader .morph-page-edge{
  opacity:.58
}
.paper-morph.becoming-reader .paper-morph-inner::after{
  animation:morphReaderLight .50s ease-out
}
@keyframes morphReaderLight{
  from{transform:translateX(-115%)}
  to{transform:translateX(115%)}
}

/* Reader receives exactly the same visual mass */
.reader-screen.paper-enter .paper-stack{
  animation:readerSheetReceive .66s both cubic-bezier(.16,.78,.18,1)
}
@keyframes readerSheetReceive{
  0%{
    opacity:.10;
    transform:translateY(8px) scale(.992);
    filter:brightness(1.035)
  }
  55%{
    opacity:1;
    transform:translateY(-3px) scale(1.002);
    filter:brightness(1.01)
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:brightness(1)
  }
}
.reader-screen.paper-enter .paper{
  animation:readerInkArrive .74s .06s both ease-out
}
@keyframes readerInkArrive{
  0%{filter:brightness(1.045) contrast(.985)}
  100%{filter:brightness(1) contrast(1)}
}

/* Mobile: shorter, flatter but still a real sheet extraction */
@media(max-width:720px){
  .chapter-stack.extracting-sheet .paper-layer.top{
    transform:translateY(-10px) translateZ(12px) rotateX(-2deg) scale(1.015)!important
  }
  .paper-morph.lifted{
    transform:perspective(900px) rotateX(-2deg) translateY(-10px) scale(1.02)
  }
  .morph-running{top:6%;font-size:5px}
  .morph-center strong{font-size:58px}
  .morph-reader-head{font-size:5px;top:15%}
  .morph-page-edge{display:none}
  .morph-curl{width:28px;height:28px;opacity:.42}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .chapter-stack.extracting-sheet .paper-layer,
  .paper-morph,
  .morph-under,
  .morph-center,
  .morph-reader-head,
  .reader-screen.paper-enter .paper-stack,
  .reader-screen.paper-enter .paper{
    animation:none!important;
    transition:none!important
  }
}


/* ===== v2.5 unified physics + light continuity pass ===== */
:root{
  --ease-heavy:cubic-bezier(.12,.74,.14,1);
  --ease-object:cubic-bezier(.16,.78,.18,1);
  --ease-paper:cubic-bezier(.18,.76,.18,1);
  --ease-soft:cubic-bezier(.22,.68,.22,1);
  --world-light-x:34%;
  --world-light-y:17%;
  --world-shadow-x:10px;
  --world-shadow-y:28px;
}

/* One consistent key light across Library -> Chapter -> Reader */
.world-key-light{
  position:absolute;
  pointer-events:none;
  z-index:1;
  width:48%;
  height:48%;
  left:var(--world-light-x);
  top:var(--world-light-y);
  transform:translate(-50%,-50%) rotate(-12deg);
  background:
    radial-gradient(ellipse at center,
      rgba(255,247,225,.12),
      rgba(255,239,204,.035) 38%,
      transparent 68%);
  filter:blur(8px);
  opacity:.72;
  mix-blend-mode:screen
}
.world-key-light-library{
  width:54%;
  height:54%;
  opacity:.44
}
.world-key-light-chapter{
  left:38%;
  top:26%;
  width:44%;
  height:44%;
  opacity:.55
}
.world-key-light-reader{
  left:38%;
  top:23%;
  width:52%;
  height:48%;
  opacity:.50
}

/* LIBRARY: replace mixed timings with shared "heavy object" physics */
.book-rig{
  transition-timing-function:var(--ease-object)!important
}
.book-rig[data-motif="bible"],
.book-rig[data-motif="iliad"]{
  transition-timing-function:var(--ease-heavy)!important
}
.book-rig.extracting.selected{
  transition-timing-function:var(--ease-heavy)!important
}
.book-rig.opening.selected .book-front,
.book-rig.opening.selected .book-inner-leaf,
.book-rig.opening.selected .book-pages{
  transition-timing-function:var(--ease-heavy)!important
}

/* shadows all fall down-right from the same upper-left key */
.book-rig::after{
  transform:
    translateX(calc(var(--shadow-x,0px) + var(--world-shadow-x)))
    translateY(var(--world-shadow-y))
    translateZ(-10px)
    rotateX(76deg)
}
.selected-book-light{
  transform:translateX(-50%) skewX(-4deg)
}
.book-rig.selected .book-front{
  box-shadow:
    inset 2px 0 4px rgba(255,255,255,.026),
    inset -4px 0 8px rgba(0,0,0,.09),
    12px 32px 38px rgba(0,0,0,.17)
}

/* Open-book cinematic inherits the same light direction */
.book-cinematic{
  background:
    radial-gradient(ellipse at 36% 18%,rgba(255,248,226,.18),transparent 34%),
    rgba(20,20,24,.10)
}
.cinematic-page{
  box-shadow:
    16px 42px 82px rgba(48,34,22,.13),
    inset -8px 0 16px rgba(95,69,45,.025)
}
.book-cinematic.active .cinematic-page-left,
.book-cinematic.active .cinematic-page-right{
  transition-timing-function:var(--ease-heavy)
}

/* INDEX / VOLUME: same key light and gravitational direction */
.volume{
  transition-timing-function:var(--ease-object)!important
}
.volume.on{
  box-shadow:inset 0 0 14px rgba(0,0,0,.12),0 32px 38px rgba(55,37,22,.34),0 0 0 1px rgba(231,201,161,.30);
  outline:2px solid rgba(185,111,73,.65)
}
.volume-morph-object,
.volume-morph-cover,
.volume-morph-pages,
.vm-sheet{
  transition-timing-function:var(--ease-object)!important
}
.volume-morph-shadow{
  transform:translate(7px,10px);
}
.volume-morph.lift .volume-morph-shadow{
  transform:translate(9px,15px) scaleX(.82)
}

/* PAPER STACK: shared gravity + deformation response */
.chapter-stack,
.chapter-stack .paper-layer,
.paper-bow,
.micro-curl,
.fold-shadow,
.contact-shadow{
  transition-timing-function:var(--ease-paper)!important
}
.chapter-stack.on::after{
  transform-origin:43% 40%;
}
.chapter-stack.on:hover::after{
  transform:translate(9px,13px) scaleX(.72)
}
.chapter-stack.on .paper-layer.top{
  box-shadow:
    12px 31px 54px rgba(51,36,23,.13),
    3px 8px 16px rgba(51,36,23,.04),
    inset -7px 0 10px rgba(106,77,49,.025),
    inset 0 1px 0 rgba(255,255,255,.82)
}
.chapter-stack.on:hover .paper-layer.top{
  box-shadow:
    16px 37px 62px rgba(51,36,23,.14),
    5px 10px 19px rgba(51,36,23,.045),
    inset -9px 0 12px rgba(106,77,49,.035),
    inset 0 1px 0 rgba(255,255,255,.88)
}

/* chapter extraction keeps one light/shadow direction while moving */
.chapter-stack.extracting-sheet .paper-layer.top{
  box-shadow:
    18px 42px 70px rgba(50,35,22,.16),
    6px 12px 24px rgba(50,35,22,.055)!important
}
.paper-morph{
  transition-timing-function:var(--ease-paper)!important;
  box-shadow:
    13px 31px 60px rgba(48,34,22,.14)
}
.paper-morph.lifted{
  box-shadow:
    19px 48px 88px rgba(48,34,22,.18)
}
.paper-morph.is-expanding{
  box-shadow:
    22px 57px 120px rgba(48,34,22,.18),
    7px 12px 26px rgba(48,34,22,.05)
}
.morph-backdrop.show{
  background:
    radial-gradient(ellipse at 36% 20%,rgba(255,248,229,.30),transparent 40%),
    radial-gradient(ellipse at 50% 56%,rgba(249,246,241,.48),rgba(224,216,206,.78))
}

/* Morph sheet light follows same source; it becomes Reader light, not a new effect */
.paper-morph-inner::before{
  content:"";
  position:absolute;
  inset:-12%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 34% 17%,
      rgba(255,250,236,.42),
      rgba(255,242,210,.10) 26%,
      transparent 51%);
  mix-blend-mode:screen;
  opacity:.82
}
.paper-morph-inner > *{
  position:absolute;
}
.morph-running,
.morph-center,
.morph-reader-head,
.morph-page-edge,
.morph-curl,
.morph-folio{
  z-index:2
}

/* READER: same light source, calmer than transition state */
.paper{
  box-shadow:
    18px 51px 108px rgba(55,39,25,.14),
    5px 12px 24px rgba(55,39,25,.032),
    0 2px 4px rgba(55,39,25,.020),
    0 1px 0 rgba(255,255,255,.88) inset;
}
.paper-lamp{
  background:
    radial-gradient(circle at var(--lamp-x) var(--lamp-y),
      rgba(255,252,242,.48) 0,
      rgba(255,244,216,.15) 21%,
      transparent 52%);
}
.paper-stack::before{
  transform-origin:43% 45%;
}
.paper-stack:hover::before{
  transform:translate(5px,4px) scaleX(.95)
}
.reader-screen.paper-enter .paper{
  box-shadow:
    18px 51px 108px rgba(55,39,25,.14),
    5px 12px 24px rgba(55,39,25,.032),
    0 2px 4px rgba(55,39,25,.020),
    0 1px 0 rgba(255,255,255,.88) inset
}

/* motion hierarchy:
   books = heavy, paper stacks = medium, single sheet = quickest */
.book-rig.opening.selected .book-front{transition-duration:.68s!important}
.volume-morph-object{transition-duration:.58s!important}
.chapter-stack.on:hover .paper-layer{transition-duration:.40s!important}
.paper-morph{transition-duration:.36s}

/* Mobile preserves direction but removes exaggerated depth */
@media(max-width:720px){
  :root{
    --world-shadow-x:4px;
    --world-shadow-y:14px
  }
  .world-key-light-library{opacity:.24}
  .world-key-light-chapter{opacity:.32}
  .world-key-light-reader{opacity:.31}
  .paper{
    box-shadow:
      6px 24px 58px rgba(55,39,25,.10),
      2px 5px 13px rgba(55,39,25,.025),
      0 1px 0 rgba(255,255,255,.84) inset
  }
  .paper-morph.lifted{
    box-shadow:8px 26px 58px rgba(48,34,22,.13)
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .book-rig,.volume,.chapter-stack,.paper-morph{
    transition-duration:0s!important
  }
}


/* ===== v2.6 timing / composition / settle pass ===== */
:root{
  --dur-heavy:680ms;
  --dur-object:560ms;
  --dur-paper:420ms;
  --dur-sheet:360ms;
  --hold-short:90ms;
  --hold-medium:140ms;
  --settle-light:rgba(255,247,226,.08);
}

/* The selected book gets a proper 'resting' pose after every move */
.book-rig.selected.resting-settle{
  animation:none!important
}
@keyframes bookRestSettle{
  0%{
    transform:
      translateX(var(--x))
      translateY(-19px)
      translateZ(calc(var(--z) + 8px))
      rotateY(var(--ry))
      rotateX(-1.9deg)
      scale(calc(var(--s) * 1.009))
  }
  62%{
    transform:
      translateX(var(--x))
      translateY(-15px)
      translateZ(calc(var(--z) - 1px))
      rotateY(var(--ry))
      rotateX(-1.45deg)
      scale(calc(var(--s) * .998))
  }
  100%{
    transform:
      translateX(var(--x))
      translateY(-16px)
      translateZ(var(--z))
      rotateY(var(--ry))
      rotateX(-1.5deg)
      scale(var(--s))
  }
}
.library.selection-rest .selected-book-light{
  animation:lightRest .62s ease-out both
}
@keyframes lightRest{
  0%{opacity:.42;filter:blur(13px)}
  58%{opacity:.88;filter:blur(5px)}
  100%{opacity:.76;filter:blur(8px)}
}

/* Open-book scene pauses in a readable composition before entering the world */
.book-cinematic.readable-hold .book-cinematic-spread{
  transform:translateY(-2px) scale(1.012)
}
.book-cinematic.readable-hold .cinematic-page{
  box-shadow:
    18px 46px 88px rgba(48,34,22,.14),
    inset -8px 0 16px rgba(95,69,45,.027)
}
.book-cinematic.readable-hold .cinematic-page-right strong{
  animation:titleInkSettle .34s ease-out both
}
@keyframes titleInkSettle{
  from{opacity:.78;transform:translateY(2px);letter-spacing:-.072em}
  to{opacity:1;transform:translateY(0);letter-spacing:-.065em}
}
.book-cinematic.readable-hold .cinematic-spine{
  animation:spineRest .34s ease-out both
}
@keyframes spineRest{
  from{filter:brightness(1.10)}
  to{filter:brightness(1)}
}

/* The index stops 'landing' before anything else moves */
.index-screen.index-enter.index-rest .index-shell{
  transform:none!important;
  filter:none!important
}
.index-screen.index-enter.index-rest .index-hero,
.index-screen.index-enter.index-rest .volume-grid{
  animation:indexMicroRest .42s ease-out both
}
@keyframes indexMicroRest{
  0%{filter:brightness(1.018)}
  100%{filter:brightness(1)}
}

/* Volume -> paper transition now has a precise pause at the destination */
.volume-morph.destination-hold .volume-morph-object{
  transform:translateY(-2px) translateZ(18px) rotateX(-1deg) scale(1.012)
}
.volume-morph.destination-hold .volume-morph-shadow{
  opacity:.34;
  transform:translate(10px,18px) scaleX(.76)
}
.volume-morph.destination-hold .volume-morph-cover{
  filter:brightness(1.025)
}
.volume-morph.destination-hold .vm-sheet{
  box-shadow:12px 26px 46px rgba(58,42,28,.095)
}

/* Chapter stack gets an explicit equilibrium pose after wheel/click motion */
.chapter-carousel.paper-settled .chapter-stack.on{
  animation:chapterEquilibrium .46s var(--ease-paper) both
}
@keyframes chapterEquilibrium{
  0%{translate:0 -7px}
  58%{translate:0 -1px}
  100%{translate:0 -2px}
}
.chapter-carousel.paper-settled .chapter-stack.on::after{
  animation:shadowEquilibrium .46s ease-out both
}
@keyframes shadowEquilibrium{
  0%{opacity:.42;transform:translate(10px,12px) scaleX(.76)}
  100%{opacity:.70;transform:translate(0,1px) scaleX(.96)}
}

/* Chapter extraction: brief 'held sheet' moment before expanding */
.paper-morph.held-sheet{
  transform:
    perspective(1200px)
    rotateX(-3.1deg)
    rotateY(1.7deg)
    translateY(-20px)
    translateZ(28px)
    scale(1.042)
}
.paper-morph.held-sheet .morph-under{
  opacity:.42
}
.paper-morph.held-sheet .morph-curl{
  transform:scale(1.03) rotate(-6deg)
}
.paper-morph.held-sheet .morph-folio{
  opacity:.92
}

/* Expansion has a gentle deceleration instead of a constant zoom */
.paper-morph.is-expanding{
  transition-timing-function:var(--ease-heavy)!important
}
.paper-morph.is-expanding.becoming-reader{
  box-shadow:
    18px 48px 98px rgba(48,34,22,.155),
    5px 11px 24px rgba(48,34,22,.045)
}

/* Reader has a final mechanical settle, then goes completely quiet */
.reader-screen.paper-enter .paper-stack{
  animation:readerMassSettle .74s var(--ease-heavy) both
}
@keyframes readerMassSettle{
  0%{
    opacity:.18;
    transform:translateY(10px) scale(.990);
    filter:brightness(1.035)
  }
  54%{
    opacity:1;
    transform:translateY(-4px) scale(1.003);
    filter:brightness(1.008)
  }
  78%{
    transform:translateY(1px) scale(.999);
    filter:brightness(1.002)
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:brightness(1)
  }
}
.reader-screen.paper-enter.reader-rest .paper{
  animation:readerShadowRest .42s ease-out both
}
@keyframes readerShadowRest{
  0%{
    box-shadow:
      21px 57px 118px rgba(55,39,25,.16),
      6px 14px 27px rgba(55,39,25,.040),
      0 2px 4px rgba(55,39,25,.02)
  }
  100%{
    box-shadow:
      18px 51px 108px rgba(55,39,25,.14),
      5px 12px 24px rgba(55,39,25,.032),
      0 2px 4px rgba(55,39,25,.020),
      0 1px 0 rgba(255,255,255,.88) inset
  }
}
.reader-screen.paper-enter.reader-rest .paper-lamp{
  animation:lampQuiet .50s ease-out both
}
@keyframes lampQuiet{
  0%{opacity:.94}
  100%{opacity:.78}
}

/* Composition: visual mass is a touch lower, like a real reading desk */
@media(min-width:1181px){
  .chapter-track{top:49%}
  .paper-stack{transform-origin:50% 54%}
  .reader-stage .paper-stack{transform-origin:50% 56%}
}

/* Mobile: keep the stop moments but remove the tiny overshoots */
@media(max-width:720px){
  .book-rig.selected.resting-settle,
  .chapter-carousel.paper-settled .chapter-stack.on{
    animation-duration:.34s
  }
  .paper-morph.held-sheet{
    transform:perspective(900px) rotateX(-1.8deg) translateY(-10px) scale(1.02)
  }
  .reader-screen.paper-enter .paper-stack{
    animation:readerMassSettleMobile .50s var(--ease-paper) both
  }
  @keyframes readerMassSettleMobile{
    from{opacity:.36;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
  }
}

/* Reduced motion: preserve states, remove choreography */
@media(prefers-reduced-motion:reduce){
  .book-rig.selected.resting-settle,
  .library.selection-rest .selected-book-light,
  .book-cinematic.readable-hold .cinematic-page-right strong,
  .book-cinematic.readable-hold .cinematic-spine,
  .index-screen.index-enter.index-rest .index-hero,
  .index-screen.index-enter.index-rest .volume-grid,
  .chapter-carousel.paper-settled .chapter-stack.on,
  .chapter-carousel.paper-settled .chapter-stack.on::after,
  .reader-screen.paper-enter .paper-stack,
  .reader-screen.paper-enter.reader-rest .paper,
  .reader-screen.paper-enter.reader-rest .paper-lamp{
    animation:none!important
  }
}


/* ===== v2.6.1 opening-scene contrast + handoff cleanup ===== */
.book-cinematic.readable-hold{
  background:
    radial-gradient(ellipse at 36% 18%,rgba(255,247,222,.12),transparent 34%),
    rgba(28,25,24,.20);
}
.book-cinematic.readable-hold .cinematic-page{
  filter:brightness(.985) contrast(1.025);
  border-color:rgba(71,52,34,.11);
  box-shadow:
    20px 48px 92px rgba(48,34,22,.16),
    inset -9px 0 18px rgba(95,69,45,.035);
}
.book-cinematic.readable-hold .cinematic-page-right strong{
  color:#211d19;
  text-shadow:0 1px rgba(255,255,255,.42)
}
.book-cinematic.readable-hold .cinematic-kicker,
.book-cinematic.readable-hold .cinematic-page-right small{
  color:#8d7e70;
  opacity:.92
}
.book-cinematic.readable-hold .cinematic-folio{
  color:#8d6b54;
  border-color:rgba(135,95,65,.22);
  opacity:.72
}
.book-cinematic.to-world{
  transition:
    background .30s ease,
    backdrop-filter .30s ease,
    opacity .30s ease
}


/* ===== v2.6.2 deterministic cinematic visibility ===== */
.book-cinematic.active{
  opacity:1!important;
  visibility:visible!important;
}
.book-cinematic.active .book-cinematic-spread{
  opacity:1!important;
}
.book-cinematic.to-world .book-cinematic-spread{
  opacity:0!important;
}


/* ===== v2.6.3 readable open-book timing ===== */
.book-cinematic.active .book-cinematic-spread{
  transition-duration:.42s!important;
  transition-timing-function:var(--ease-heavy)!important;
}
.book-cinematic.active .cinematic-page-left,
.book-cinematic.active .cinematic-page-right{
  transition-duration:.38s!important;
  transition-timing-function:var(--ease-heavy)!important;
}
.book-cinematic.readable-hold .cinematic-page-left,
.book-cinematic.readable-hold .cinematic-page-right{
  transform:rotateY(0deg)!important;
}


/* ===== v2.7 composition + typography finalization pass ===== */

/* ---------- LIBRARY: stronger editorial hierarchy ---------- */
.library .scene-copy{
  max-width:1040px;
  margin-inline:auto;
}
.library .scene-copy h1{
  max-width:980px;
  margin-inline:auto;
  font-size:clamp(68px,7.8vw,122px);
  line-height:.82;
  letter-spacing:-.075em;
  text-wrap:balance;
}
.library .scene-copy p{
  max-width:520px;
  margin-inline:auto;
  line-height:1.72;
  color:rgba(244,238,232,.50);
}
.library .scene-kicker{
  letter-spacing:.24em;
  color:rgba(245,236,227,.40);
}
.shelf-wrap{
  margin-top:4px;
}
.shelf-plank{
  bottom:67px;
}
.selected-meta{
  bottom:20px;
}
.selected-title{
  font-size:clamp(24px,2.1vw,34px);
  letter-spacing:-.045em;
  line-height:1;
}
.selected-author{
  margin-top:5px;
  opacity:.54;
}
.selected-edition,
.material-note,
.object-plate,
.finish-note{
  opacity:.92;
}

/* tighter museum-label rhythm */
.selected-edition{margin-top:9px}
.material-note{margin-top:4px}
.object-plate{margin-top:4px}
.finish-note{margin-top:3px}
.open-selected{
  min-width:116px;
  padding-inline:18px;
  letter-spacing:.06em;
}

/* shelf books feel like a collected set, not evenly spaced UI cards */
.book-rig:nth-child(1){--visual-y:2px}
.book-rig:nth-child(2){--visual-y:-1px}
.book-rig:nth-child(3){--visual-y:1px}
.book-rig:nth-child(4){--visual-y:-2px}
.book-rig:nth-child(5){--visual-y:1px}
.book-rig:nth-child(6){--visual-y:-1px}
.book-rig:nth-child(7){--visual-y:2px}
.book-rig:not(.selected){
  translate:0 var(--visual-y,0px);
}

/* ---------- INDEX: one clear reading order ---------- */
.index-shell{
  max-width:1240px;
  margin-inline:auto;
}
.index-hero{
  min-height:196px!important;
  padding-top:26px!important;
  padding-bottom:14px!important;
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
  align-items:end;
}
.index-hero h1{
  font-size:clamp(58px,5.7vw,84px)!important;
  line-height:.90;
  letter-spacing:-.065em;
  margin-bottom:12px!important;
}
.index-hero-copy{
  max-width:620px;
}
.index-hero-copy p{
  max-width:560px;
  line-height:1.68;
}
.continue-card{
  align-self:end;
  max-width:390px;
  min-height:132px;
  padding:20px 22px;
}
.continue-card strong{
  font-size:28px;
  line-height:1;
}
.volume-section{
  margin-top:9px!important;
}
.volume-head{
  margin-bottom:12px!important;
}
.volume-grid{
  gap:10px!important;
}
.volume{
  min-width:74px;
}
.volume b{
  font-size:11px;
  line-height:1.18;
}
.volume small{
  font-size:5px;
  letter-spacing:.10em;
}
.chapter-area{
  margin-top:12px!important;
}
.chapter-head{
  margin-bottom:6px!important;
}
.chapter-carousel{
  height:336px!important;
}
.chapter-track{
  top:48%!important;
}
.chapter-stack .chapter-no{
  font-size:clamp(46px,4.9vw,66px);
  line-height:.88;
}
.chapter-stack .chapter-small{
  letter-spacing:.10em;
}
.chapter-stack .chapter-preview{
  max-width:185px;
  line-height:1.52;
}
.chapter-specimen{
  bottom:12px;
}
.chapter-specimen strong{
  font-size:12px;
}

/* ---------- READER: print-first hierarchy ---------- */
.reader-shell{
  grid-template-columns:minmax(168px,190px) minmax(0,1fr) minmax(230px,270px);
  gap:20px;
}
.memory-rail,
.ai-panel{
  opacity:.88;
}
.reader-stage{
  min-width:0;
}
.reader-stage-brand{
  letter-spacing:.17em;
  opacity:.48;
}
.paper-stack{
  max-width:760px;
  width:min(100%,760px);
}
.paper-inner{
  padding-top:74px;
  padding-left:92px;
  padding-right:92px;
  padding-bottom:70px;
}
.paper-running-head{
  margin-bottom:10px;
}
.paper-rule-ornament{
  margin-bottom:14px;
}
.paper-eyebrow{
  letter-spacing:.17em;
  margin-bottom:9px;
}
.paper-head h1{
  font-size:clamp(48px,4.4vw,64px);
  line-height:.94;
  letter-spacing:-.062em;
  max-width:9em;
}
.paper-head .paper-subtitle{
  margin-top:10px;
  max-width:34em;
  line-height:1.55;
}
.verse,
.section-ornament,
.verse-emphasis,
.paper-footer{
  max-width:34.5em!important;
  margin-inline:auto;
}
.verse{
  font-size:clamp(16px,1.16vw,18px);
  line-height:1.93!important;
  letter-spacing:-.012em!important;
  text-wrap:pretty;
}
.dropcap{
  font-size:2.62em!important;
  line-height:.84!important;
  margin-right:.12em;
}
.vn{
  font-size:.68em;
  vertical-align:.38em;
  margin-right:.22em;
}
.entity{
  text-decoration-thickness:.035em;
  text-underline-offset:.13em;
}
.verse + .verse{
  margin-top:14px;
}
.paper-footer{
  margin-top:20px;
  padding-top:12px;
  letter-spacing:.12em;
}

/* side rails recede more decisively */
.memory-rail{
  background:
    linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.10)),
    #e8e1d7;
  box-shadow:inset -1px 0 rgba(95,72,53,.045);
}
.ai-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08)),
    #e7dfd4;
  box-shadow:inset 1px 0 rgba(95,72,53,.045);
}
.memory-rail h3,
.ai-panel h3{
  letter-spacing:.12em;
}
.memory-item,
.ai-message{
  line-height:1.55;
}
.reader-toolbar{
  opacity:.82;
}

/* focus mode now reads almost like a scanned fine-press edition */
body.focus-reading .memory-rail,
body.focus-reading .ai-panel{
  opacity:.12;
  filter:saturate(.72);
}
body.focus-reading .reader-shell{
  grid-template-columns:minmax(84px,110px) minmax(0,1fr) minmax(96px,120px);
}
body.focus-reading .paper-stack{
  max-width:790px;
}

/* ---------- TRANSITIONS: protect typography during motion ---------- */
.book-cinematic .cinematic-page-right strong{
  text-wrap:balance;
}
.paper-morph.becoming-reader .morph-reader-head{
  letter-spacing:.14em;
}
.paper-morph.becoming-reader .morph-running{
  opacity:.72;
}
.paper-morph.becoming-reader .morph-center{
  opacity:.06;
}

/* ---------- MOBILE: final reading proportions ---------- */
@media(max-width:720px){
  .library .scene-copy h1{
    font-size:clamp(46px,15vw,68px);
    line-height:.86;
  }
  .library .scene-copy p{
    max-width:320px;
    line-height:1.58;
  }
  .selected-title{
    font-size:23px;
  }

  .index-hero{
    display:block!important;
    min-height:auto!important;
    padding:18px 18px 8px!important;
  }
  .index-hero h1{
    font-size:50px!important;
    margin-bottom:8px!important;
  }
  .continue-card{
    margin-top:14px;
    max-width:none;
    min-height:0;
    padding:16px;
  }
  .volume-section{
    margin-top:5px!important;
  }
  .chapter-area{
    margin-top:9px!important;
  }
  .chapter-carousel{
    height:310px!important;
  }

  .reader-shell{
    display:block;
  }
  .reader-stage{
    padding-inline:0!important;
  }
  .paper-stack{
    width:100%;
    max-width:none;
  }
  .paper{
    border-radius:0;
  }
  .paper-inner{
    padding-top:90px!important;
    padding-left:28px!important;
    padding-right:28px!important;
    padding-bottom:102px!important;
  }
  .paper-head h1{
    font-size:43px;
    max-width:8em;
    line-height:.95;
  }
  .paper-head .paper-subtitle{
    font-size:11px;
    line-height:1.50;
  }
  .verse{
    max-width:none!important;
    font-size:16px;
    line-height:1.91!important;
  }
  .dropcap{
    font-size:2.20em!important;
  }
  .paper-running-head,
  .paper-eyebrow{
    font-size:5px;
  }
  .reader-toolbar{
    opacity:.72;
  }
}

/* Large desktop: preserve negative space instead of overfilling */
@media(min-width:1520px){
  .library .scene-copy h1{max-width:1050px}
  .index-shell{max-width:1300px}
  .paper-stack{max-width:780px}
}


/* ===== v2.7.1 screenshot-review correction: chapter stage visibility ===== */
@media(min-width:721px){
  .index-hero{
    min-height:184px!important;
    padding-top:22px!important;
    padding-bottom:10px!important;
  }
  .index-hero h1{
    margin-bottom:10px!important;
  }
  .continue-card{
    min-height:124px;
    padding:18px 21px;
  }
  .volume-section{
    margin-top:6px!important;
  }
  .volume-head{
    margin-bottom:9px!important;
  }
  .chapter-area{
    margin-top:8px!important;
  }
  .chapter-head{
    margin-bottom:3px!important;
  }
  .chapter-carousel{
    height:314px!important;
  }
  .chapter-track{
    top:45.5%!important;
  }
  .chapter-specimen{
    bottom:8px;
  }
}

/* responsive */
@media(max-width:1180px){
  .reader-layout{grid-template-columns:170px minmax(430px,1fr) 300px}
  .hero-title{font-size:75px}.lib-copy{display:none}
  .volume-grid{grid-template-columns:repeat(4,1fr)}.chapter-carousel{height:285px}.chapter-stack{width:142px;height:186px}
}

/* Fold / compact landscape: keep Reader + AI, turn Memory into drawer */
@media(max-width:980px) and (min-width:721px){
  .reader-layout{grid-template-columns:minmax(0,1fr) 320px}
  .reader-stage{grid-column:1}.ai-panel{grid-column:2}
  .memory-rail{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:120;transform:translateX(-102%);transition:transform .28s ease;box-shadow:16px 0 38px rgba(40,28,18,.14)}
  body.memory-open .memory-rail{transform:translateX(0)}
  .reader-mode .mobile-dock{display:flex;position:fixed;left:16px;bottom:16px;z-index:100;gap:6px}
  .mobile-dock button{border:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:999px;padding:9px 12px;font-size:9px;box-shadow:0 8px 20px rgba(40,28,18,.09)}
  .sheet-close{display:block;float:right;border:0;background:transparent;font-size:15px}
  .scrim{display:block;position:fixed;inset:0;background:rgba(26,22,18,.18);z-index:110;opacity:0;pointer-events:none;transition:.25s}
  body.memory-open .scrim{opacity:1;pointer-events:auto}
  .paper-stack{width:90%;height:80vh}
  .reader-toolbar{top:10px;transform:translateX(-50%) scale(.92)}
}

/* narrow phone / folded cover display: single reading canvas + bottom sheets */
@media(max-width:720px){
  html,body{overflow:hidden}
  .lib-head{left:20px;right:20px;top:28px}.hero-title{font-size:48px}.lib-copy{display:none}
  .shelf-wrap{bottom:84px;transform:scale(.72);transform-origin:50% 100%}
  .lib-bottom{left:18px;right:18px;bottom:20px;grid-template-columns:1fr auto}.markers{display:none}.sel-note{max-width:170px}
  .index-shell{margin:14px 12px 80px}.index-hero{grid-template-columns:1fr;padding:30px 22px}.index-hero h1{font-size:54px}.index-body{padding:22px}
  .volume-grid{grid-template-columns:repeat(2,1fr)}.chapter-carousel{height:310px}.chapter-stack{width:138px;height:184px}
  .chapter-caption{display:none}.chapter-dots{overflow:hidden}
  .reader-layout{display:block;height:100%}
  .reader-stage{position:absolute;inset:0 0 62px 0}
  .paper-stack{width:100%;height:100%;perspective:1200px}
  .under-sheet{display:none}
  .paper{border:0;box-shadow:none}
  .paper-inner{padding:96px 24px 96px}
  .paper-head{padding-bottom:13px;margin-bottom:22px}.paper-head h1{font-size:34px}.paper-head small{font-size:8px}
  .verse{font-size:18px;line-height:1.9;margin-bottom:15px}.vn{width:21px}
  .curl-hint{bottom:68px;background:rgba(255,255,255,.72);padding:5px 8px;border-radius:999px}
  .reader-toolbar{top:10px;max-width:calc(100% - 18px);overflow-x:auto;white-space:nowrap;transform:translateX(-50%) scale(.87);transform-origin:top center}
  .reader-toolbar::-webkit-scrollbar{display:none}
  .memory-rail,.ai-panel{
    position:fixed;left:0;right:0;bottom:0;top:auto;height:min(74vh,620px);z-index:140;
    border:1px solid var(--line);border-radius:22px 22px 0 0;box-shadow:0 -18px 48px rgba(40,28,18,.16);
    transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.76,.2,1);padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  }
  body.memory-open .memory-rail{transform:translateY(0)}
  body.ai-open .ai-panel{transform:translateY(0)}
  .ai-panel{display:flex}
  .sheet-close{display:block;float:right;border:0;background:transparent;font-size:18px}
  .scrim{display:block;position:fixed;inset:0;background:rgba(28,24,20,.25);z-index:130;opacity:0;pointer-events:none;transition:.25s}
  body.memory-open .scrim,body.ai-open .scrim{opacity:1;pointer-events:auto}
  body.memory-open .mobile-dock,body.ai-open .mobile-dock{opacity:0;pointer-events:none}
  .reader-nav{top:56px;left:10px;padding:6px 9px;background:rgba(255,255,255,.78);font-size:8px}
  .reader-mode .mobile-dock{
    display:grid;grid-template-columns:1fr 1.4fr 1fr;
    position:fixed;left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:120;
    height:48px;padding:4px;border:1px solid rgba(58,43,30,.12);border-radius:999px;
    background:rgba(255,255,255,.90);backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(41,29,19,.12)
  }
  .mobile-dock button{border:0;background:transparent;border-radius:999px;font-size:9px}
  .mobile-dock .read-tab{background:#24211d;color:white}
  .selection-toolbar{max-width:calc(100vw - 16px);overflow-x:auto;white-space:nowrap}
  .selection-toolbar::-webkit-scrollbar{display:none}
  .voice-toast{left:16px;right:16px;bottom:76px;max-width:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== v2.7.2 library motion correction =====
   User review: selection movement was too fast and the second rebound read as an error.
   Rule: 5× slower physical travel, one overshoot only, no second book bounce. */
.book-rig.selected.inertia-enter{
  animation-duration:var(--book-motion-duration,3.65s)!important;
  animation-timing-function:cubic-bezier(.15,.68,.16,1)!important;
}
.library.book-moving .book-rig.selected{
  will-change:transform,filter;
}
.library.selection-rest .selected-book-light{
  animation-duration:.72s!important;
}


/* ===== v2.7.3 direct mouse navigation ===== */
#library .shelf-wrap,
#library .shelf-track{
  cursor:grab;
  touch-action:pan-y;
}
#library.library-dragging .shelf-wrap,
#library.library-dragging .shelf-track{
  cursor:grabbing;
}
#library.library-drag-preview .shelf-track{
  transform:translateX(var(--library-drag-preview,0px));
  transition:none!important;
}
#library.library-drag-preview .book-rig{
  transition:none!important;
}
#library .library-control-hint::after{
  content:" · WHEEL / DRAG / SWIPE";
}


/* ===== v2.7.4 cinematic wheel / shelf motion =====
   The whole shelf now visibly travels for ~5 s.
   The selected volume leaves three soft motion echoes behind it. */
.book-rig.shelf-shift:not(.selected){
  animation:shelfTravel 3.50s cubic-bezier(.15,.68,.16,1) both!important;
  will-change:transform,opacity,filter;
}
@keyframes shelfTravel{
  0%{
    transform:
      translateX(var(--from-x))
      translateZ(var(--from-z))
      rotateY(var(--from-ry))
      scale(var(--from-s));
    opacity:var(--from-o,.82)
  }
  100%{
    transform:
      translateX(var(--x))
      translateZ(var(--z))
      rotateY(var(--ry))
      scale(var(--s));
    opacity:var(--to-o,.82)
  }
}

.motion-echo{
  pointer-events:none!important;
  z-index:11!important;
  opacity:0;
  filter:blur(var(--echo-blur,1.2px)) saturate(.72) brightness(1.03);
  mix-blend-mode:screen;
  animation:bookMotionEcho 3.35s cubic-bezier(.18,.68,.18,1) both!important;
  animation-delay:var(--echo-delay,0s)!important;
  will-change:transform,opacity,filter;
}
.motion-echo .book-front,
.motion-echo .book-back,
.motion-echo .book-spine,
.motion-echo .book-pages{
  box-shadow:none!important;
}
.motion-echo .cover-copy{
  text-shadow:none!important;
}
.motion-echo.echo-1{--echo-alpha:.20;--echo-delay:.08s;--echo-blur:.8px}
.motion-echo.echo-2{--echo-alpha:.12;--echo-delay:.23s;--echo-blur:1.7px}
.motion-echo.echo-3{--echo-alpha:.065;--echo-delay:.39s;--echo-blur:2.8px}

@keyframes bookMotionEcho{
  0%{
    transform:
      translateX(var(--from-x))
      translateY(-3px)
      translateZ(var(--from-z))
      rotateY(var(--from-ry))
      rotateX(-.5deg)
      scale(var(--from-s));
    opacity:0
  }
  8%{opacity:var(--echo-alpha)}
  56%{opacity:calc(var(--echo-alpha) * .72)}
  82%{opacity:calc(var(--echo-alpha) * .34)}
  100%{
    transform:
      translateX(var(--x))
      translateY(-16px)
      translateZ(var(--z))
      rotateY(var(--ry))
      rotateX(-1.5deg)
      scale(var(--s));
    opacity:0
  }
}

.library.book-moving .selected-book-light{
  transition:transform 3.55s cubic-bezier(.15,.68,.16,1),opacity .64s ease!important;
}


/* ===== v2.7.5 identity + control fix ===== */
.lib-head::after{
  content:"MEMORY  ←  READ  →  AI";
  position:absolute;
  left:0;
  bottom:-20px;
  font:600 7px var(--sans);
  letter-spacing:.18em;
  color:rgba(231,214,193,.38);
  white-space:nowrap;
}
.lib-actions{
  position:relative;
  z-index:50;
  pointer-events:auto;
}
.lib-actions button{
  pointer-events:auto;
}


/* ===== v2.7.6 reader interaction / responsive controls ===== */
.tool-icon{display:none}
.page-turn-btn{
  position:absolute;bottom:18px;z-index:32;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(83,61,42,.12);background:rgba(255,253,248,.82);
  color:#74695f;backdrop-filter:blur(8px);box-shadow:0 8px 20px rgba(50,35,23,.08);
  font-size:14px;opacity:.70
}
.page-turn-btn:hover{opacity:1;background:#fffdf8}
.page-turn-prev{left:18px}.page-turn-next{right:18px}
.page-turn-btn:disabled{opacity:.18;pointer-events:none}
.reading-progress-edge{z-index:30}
.progress-line i{height:var(--page-progress,33.333%)!important;transition:height .45s cubic-bezier(.2,.75,.2,1)}
.progress-label{font-size:7px;letter-spacing:.12em}
.paper.page-content-changing .paper-inner{animation:pageContentSettle .52s ease both}
@keyframes pageContentSettle{
  0%{opacity:.22;transform:translateX(var(--page-shift,10px))}
  100%{opacity:1;transform:translateX(0)}
}
.reader-page-note{
  margin:22px auto 0;max-width:34.5em;padding:12px 14px;border-top:1px solid rgba(112,82,55,.10);
  color:#918375;font:400 9px/1.65 var(--serif)
}
.reader-page-note b{display:block;margin-bottom:4px;font:600 6px var(--sans);letter-spacing:.15em;color:#a06b4d}

@media(max-width:980px){
  .reader-toolbar .tool-label{display:none}
  .reader-toolbar .tool-icon{display:inline}
  .reader-toolbar .tool-text{display:none}
  .reader-toolbar .rule{width:29px;padding:0;display:grid;place-items:center;font-size:13px}
  .reader-toolbar .voice{width:30px;padding:0;display:grid;place-items:center}
  .reader-toolbar{gap:5px}
  .tool-group{gap:4px}
  .tool-group+.tool-group{padding-left:5px}
}
@media(min-width:981px){
  .reader-toolbar .tool-text{display:inline}
}
@media(max-width:720px){
  body.reader-settings-open .reader-toolbar{
    justify-content:center;
    gap:4px;
    padding-left:8px;padding-right:8px;
  }
  .page-turn-btn{bottom:60px}
  .page-turn-prev{left:10px}.page-turn-next{right:10px}
  .paper-inner{width:100%!important;max-width:none!important}
}




/* ===== B61 #1845 — bible selector selected-state hierarchy ===== */
/* [A] Selected book reads instantly: foil rim light + stronger forward presence.
    Scale/depth itself comes from the JS --s variable (1.14 vs .88/.74). */
.book-rig.selected .book-front{
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--foil) 45%,transparent),
    inset 0 0 26px rgba(0,0,0,.16),
    0 34px 42px rgba(0,0,0,.26);
}
.book-rig.selected .cover-copy strong{opacity:1;text-shadow:0 1px 10px rgba(0,0,0,.36)}
.book-rig:not(.selected) .cover-copy strong{opacity:.6}
.book-rig:not(.selected) .cover-copy small{opacity:.66}
/* Keyboard focus must match visual selection */
.book-hit-zone:focus-visible{outline:2px solid #e7c9a1;outline-offset:2px;border-radius:3px;z-index:130!important}
#shelfTrack:focus-visible{outline:none}
/* [A] shelf marker dots keep their own keyboard parity */
.marker:focus-visible::after{box-shadow:0 0 0 4px rgba(196,122,80,.28)}
/* [D] state-aware CTA keeps the dark primary treatment; label text is set by JS */
.chapter-nav .chapter-open{font-weight:600;letter-spacing:.01em}