@font-face{font-family:"Shadows Into Light";src:url(fonts/ShadowsIntoLight-Regular.ttf) format("truetype");font-display:swap}
:root{--paper:#e9dfc9;--ink:#2a221b;--bg:#14110f;--w:min(100vw,calc(100dvh*9/16));}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;font-family:"Shadows Into Light",cursive;color:var(--paper);overscroll-behavior:none;touch-action:pan-y}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;perspective:2200px}
#book{position:relative;width:var(--w);height:calc(var(--w)*16/9);max-height:100dvh;box-shadow:0 0 60px #000a}
.page{position:absolute;inset:0;transform-origin:left center;transition:transform .9s cubic-bezier(.65,0,.25,1),box-shadow .9s,filter .9s;background:var(--paper);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.page.gone{transform:rotateY(-180deg);box-shadow:none;pointer-events:none}
.page.flipping{box-shadow:12px 0 40px #0008}
.page::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0005,transparent 6%),radial-gradient(ellipse at center,transparent 55%,#0006 100%)}
.grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.35;z-index:3;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>")}
.pic{position:absolute;inset:0;background:#1b1612 center/cover no-repeat;filter:sepia(.28) saturate(.78) contrast(.92) brightness(.95)}
.shade{position:absolute;inset:0;background:linear-gradient(transparent 45%,#0009 100%)}
.line{position:absolute;left:8%;right:8%;bottom:11%;z-index:2;text-align:center;font-size:calc(var(--w)*.085);line-height:1.18;color:#f3ead6;text-shadow:0 2px 8px #000c}
.foot{position:absolute;left:0;right:0;bottom:3.5%;text-align:center;font-size:calc(var(--w)*.04);opacity:.6;z-index:2;color:#f3ead6}
.plain{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12%;color:var(--ink);background:var(--paper)}
.plain h1{font-weight:400;margin:0;font-size:calc(var(--w)*.17);line-height:1}
.plain h2{font-weight:400;margin:.3em 0;font-size:calc(var(--w)*.1)}
.plain p,.plain li{font-size:calc(var(--w)*.05);margin:.4em 0}
.small{font-size:calc(var(--w)*.04)!important;opacity:.7;line-height:1.3}

.cover h1{color:#f3ead6}
.tap{margin-top:2.2em;font-size:calc(var(--w)*.065);animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.35}}
.plain.title{background:#221b16;color:#f3ead6}
.title .theme{opacity:.6;font-size:calc(var(--w)*.05);text-transform:lowercase}
.title .num{opacity:.5;font-size:calc(var(--w)*.06)}
.plain ul{list-style:none;padding:0;margin:.6em 0;width:100%;max-height:80%;overflow:auto;margin-top:0}
.plain li{cursor:pointer;padding:.05em 0;border-bottom:1px dotted #2a221b44}
.plain li span{opacity:.5;margin-right:.5em}
.plain a{color:inherit}
.nav,#bar button{background:#0006;color:#f3ead6;border:0;font:inherit;cursor:pointer}
.nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:72px;font-size:42px;z-index:10;border-radius:8px;display:none}
#prev{left:max(8px,calc(50vw - var(--w)/2 - 64px))}
#next{right:max(8px,calc(50vw - var(--w)/2 - 64px))}
@media (hover:hover) and (pointer:fine){.nav{display:block}}
#bar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;z-index:10;pointer-events:none;opacity:0;transition:opacity .4s}
#bar.on{opacity:1}
#bar>*{pointer-events:auto}
#bar button{width:40px;height:40px;border-radius:50%;font-size:20px}
#bar button.off{opacity:.45;text-decoration:line-through}
#count{font-size:16px;opacity:.8;text-shadow:0 1px 4px #000}

#book.fade{animation:bfade .45s ease}
@keyframes bfade{from{opacity:.2}to{opacity:1}}
.sheen{position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(90deg,#0000 40%,#fff2 50%,#0000 60%);opacity:0;transition:opacity .9s}
.page.flipping .sheen{opacity:1}
.page.flipping{filter:brightness(.92)}
.pic{transform:scale(1);transition:transform 14s linear}
.page.active .pic{transform:scale(1.06)}
.cover .pic{filter:sepia(.28) saturate(.78) contrast(.92) brightness(.8)}
.shade.full{background:linear-gradient(#0008,#0004 40%,#000b)}
.coverText{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12%;color:#f3ead6;text-shadow:0 2px 12px #000}
.coverText h1{margin:0;font-weight:400;font-size:calc(var(--w)*.2);line-height:.95}
.coverText .sub{font-size:calc(var(--w)*.055);margin:.8em 0 0}
.coverText .tap{margin-top:2.4em;font-size:calc(var(--w)*.065);animation:pulse 2.4s infinite}
.plain input{width:100%;font:inherit;font-size:calc(var(--w)*.07);text-align:center;background:transparent;border:0;border-bottom:2px solid #2a221b88;color:var(--ink);padding:.2em;margin:.4em 0 1em;outline:0;border-radius:0}
.plain input::placeholder{color:#2a221b66}
.chips{display:flex;gap:8px;margin:.4em 0 1.4em}
.chips button,.big{font:inherit;color:var(--ink);background:transparent;border:2px solid #2a221b88;border-radius:20px;padding:.25em .7em;font-size:calc(var(--w)*.05);cursor:pointer;transition:background .25s,color .25s}
.chips button.on,.big{background:var(--ink);color:var(--paper)}
.big{font-size:calc(var(--w)*.06);padding:.35em 1em;margin:.4em 0 1em}
.l{display:flex;gap:8px}
body.onpic #bar,.x{}

#menu{position:fixed;inset:0;z-index:20;background:#000a;display:flex;align-items:flex-start;justify-content:flex-start;opacity:0;transition:opacity .25s}
#menu.show{opacity:1}
#menu .sheet{margin:calc(env(safe-area-inset-top) + 56px) 12px 12px;width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 90px);overflow:auto;background:var(--paper);color:var(--ink);border-radius:14px;padding:14px 18px;transform:translateY(-8px);transition:transform .25s}
#menu.show .sheet{transform:none}
#menu h2{font-weight:400;margin:0 0 6px;font-size:30px}
#menu ul{list-style:none;margin:0;padding:0}
#menu li{font-size:24px;padding:8px 4px;border-bottom:1px dotted #2a221b44;cursor:pointer}
#menu li span{opacity:.5;margin-right:.6em}
#menu li.now{background:#2a221b18;border-radius:6px}
#menu[hidden]{display:none}

.coverText{justify-content:flex-start;padding-top:22%}
.coverText .tap{position:absolute;bottom:9%;left:0;right:0;margin:0}
.cover .pic{filter:sepia(.15) saturate(.9) contrast(.95) brightness(.95)}
.shade.full{background:linear-gradient(#0006,#0000 45%,#0000 70%,#0006)}
.coverText .tap{position:static;margin-top:1.8em}
.why{align-items:flex-start;text-align:left}.why h2{margin-bottom:.5em}.why p{font-size:calc(var(--w)*.058);line-height:1.25;margin:.55em 0}
.coverText .sub{font-size:calc(var(--w)*.075);color:#fff6e0;text-shadow:0 0 6px #000,0 2px 14px #000,0 0 28px #000;opacity:1}
.coverText .tap{font-size:calc(var(--w)*.07);text-shadow:0 0 6px #000,0 2px 14px #000}
.shade.full{background:linear-gradient(#000a,#0005 38%,#0000 65%,#0006)}
.coverText .for{font-size:calc(var(--w)*.065);margin:.5em 0 0;min-height:1em;color:#fff6e0;text-shadow:0 0 6px #000,0 2px 14px #000}
/* cover hierarchy: warm gold title, cream tagline, amber name, pill button */
.coverText h1{color:#ffd9a0;letter-spacing:.05em;-webkit-text-stroke:.8px #ffd9a0;text-shadow:0 0 4px #000,0 0 22px #e8803a99,0 3px 16px #000}
.coverText .sub{color:#f3ead6;letter-spacing:.04em;margin-top:1em}
.coverText .for{color:#ffb36b;font-size:calc(var(--w)*.075);-webkit-text-stroke:.4px #ffb36b}
.coverText .for:not(:empty)::before,.coverText .for:not(:empty)::after{content:"\2014";opacity:.6;margin:0 .4em}
.coverText .tap{display:inline-block;color:#fff6e0;background:#000a;border:1.5px solid #ffd9a0;border-radius:999px;padding:.35em 1.4em;margin-top:1.4em;animation:pulse2 2.4s infinite}
@keyframes pulse2{50%{opacity:.65;transform:scale(.97)}}
/* thought lines: slightly stronger */
.line{color:#fff3d6;-webkit-text-stroke:.5px #fff3d6;text-shadow:0 0 3px #000,0 2px 10px #000,0 0 24px #000a}
.shade{background:linear-gradient(transparent 40%,#000b 100%)}
.coverText{padding-top:15%}
.cover .pic{transition:none;transform-origin:50% 75%;animation:coverzoom 60s ease-in-out infinite alternate}
@keyframes coverzoom{from{transform:scale(1)}to{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.cover .pic{animation:none}}
.coverText .tap{background:none;border:0;border-radius:0;padding:0;margin-top:1.6em;color:#fff6e0;text-shadow:0 0 6px #000,0 2px 14px #000;animation:pulse 2.4s infinite}

/* wheel carousel */
.wheel{--ih:calc(var(--w)*.12);--wh:calc(var(--ih)*7);position:relative;height:var(--wh);width:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent)}
.wheel::-webkit-scrollbar{display:none}
.wheel ul{margin:0;padding:calc((var(--wh) - var(--ih))/2) 0;max-height:none;overflow:visible;width:100%}
.wheel li{height:var(--ih);display:flex;align-items:center;justify-content:center;scroll-snap-align:center;border:0;padding:0;margin:0;font-size:calc(var(--ih)*.62);white-space:nowrap;will-change:transform,opacity;cursor:pointer}
.wheel li span{opacity:.5;margin-right:.5em;font-size:.7em}
.wheel li.sel{font-weight:400;-webkit-text-stroke:.5px currentColor}
.plain .wheel.wide{margin-top:.4em}
#menu .wheel{--ih:46px;--wh:min(62dvh,322px)}
#menu .sheet{overflow:hidden}
#menu li{border-bottom:0;padding:0}
#menu li.now{background:none}
/* no light band during turns; a soft shadow only */
.sheen{display:none}
.page.flipping{filter:none;box-shadow:8px 0 28px #0006}
.wheel,.wheel li{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* perf: one shared static grain tile instead of a filter per page */
#book>.grain{position:absolute;inset:0;z-index:1000;pointer-events:none;mix-blend-mode:overlay;opacity:.22;background:url(img/grain.png);background-size:256px;image-rendering:pixelated}
.page .grain{display:none}
.wheel li{will-change:auto}
#book{perspective:2200px}
.handle{position:absolute;top:2.2%;left:0;right:0;text-align:center;z-index:1001;pointer-events:none;font-size:calc(var(--w)*.036);letter-spacing:.06em;color:#f3ead6;opacity:.55;text-shadow:0 0 4px #000a,0 1px 6px #000}
body.paper .handle{color:#2a221b;opacity:.6;text-shadow:none}

/* handle sits right under the page counter, same centre line */
.handle{position:fixed;top:calc(env(safe-area-inset-top) + 40px);left:0;right:0;z-index:11;font-size:12px;letter-spacing:.08em;color:#f3ead6;opacity:.5;text-shadow:none}
body.paper .handle{color:#f3ead6;opacity:.5;text-shadow:none}
#count{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 8px);line-height:40px;text-align:center;pointer-events:none}

.wheel li.ch{text-transform:uppercase;letter-spacing:.14em;font-size:calc(var(--ih)*.5);-webkit-text-stroke:.4px currentColor}
.wheel li.sec{font-size:calc(var(--ih)*.58)}
.chapter h1{font-size:calc(var(--w)*.16);color:#ffd9a0}
.section h1{font-size:calc(var(--w)*.12)}
.section .num,.chapter .num{letter-spacing:.12em;text-transform:uppercase;font-size:calc(var(--w)*.05);margin-bottom:.4em}
#menu .wheel li.ch{font-size:20px}#menu .wheel li.sec{font-size:26px}
.wheel li.ch{font-size:calc(var(--ih)*.4);letter-spacing:.08em}
.wheel li.sec{font-size:calc(var(--ih)*.56)}
#menu .wheel ul{padding:calc((var(--wh) - var(--ih))/2) 0}

/* contents wheel: free scroll, taller, more titles visible */
.wheel{scroll-snap-type:none;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);cursor:grab}
.wheel li{scroll-snap-align:none}
.wheel.wide{--ih:calc(var(--w)*.105);--wh:calc(var(--w)*16/9*.62)}
.wheel:active{cursor:grabbing}

.wheel li.poem{font-size:calc(var(--ih)*.5);opacity:.9}
.wheel li.sec{font-size:calc(var(--ih)*.6);-webkit-text-stroke:.3px currentColor;font-style:normal}
#menu .wheel li.poem{font-size:21px}