@font-face{font-family:Kalam;font-weight:400;font-display:swap;src:local("Kalam"),url(fonts/kalam-400.woff2) format("woff2")}
@font-face{font-family:Kalam;font-weight:700;font-display:swap;src:url(fonts/kalam-700.woff2) format("woff2")}
@font-face{font-family:Caveat;font-weight:400;font-display:swap;src:local("Caveat"),url(fonts/caveat-400.woff2) format("woff2")}
@font-face{font-family:Caveat;font-weight:700;font-display:swap;src:url(fonts/caveat-700.woff2) format("woff2")}
@font-face{font-family:"Patrick Hand";font-display:swap;src:local("Patrick Hand"),url(fonts/patrick-400.woff2) format("woff2")}
:root{--body:Kalam,"Segoe Print","Bradley Hand","Comic Sans MS",cursive;--head:Caveat,Kalam,"Segoe Print","Bradley Hand",cursive;--ui:"Patrick Hand",Kalam,"Segoe Print",cursive;
--ink:#2e2018;--paper:#f5ecd8;--rule:rgba(92,120,150,.32);--lh:32px;--pt:64px;
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .15 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:radial-gradient(ellipse at 50% 35%,#4a3a2e,#241a14);color:var(--ink);font-family:var(--body);overflow:hidden}
button,a{font-family:var(--ui);font-size:1.15rem;color:inherit}
:focus-visible{outline:2px dashed #e9c98a;outline-offset:3px}
.desk{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.book{position:relative;width:var(--w,360px);height:var(--h,500px);perspective:2200px;perspective-origin:0 50%}
.stack{position:absolute;inset:0;border-radius:2px 6px 6px 2px;box-shadow:1px 1px 0 #e4d9c0,2px 2px 0 #d6cab0,3px 3px 0 #e4d9c0,4px 4px 0 #cfc2a6,12px 16px 30px rgba(0,0,0,.55)}
.leaf{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px 6px 6px 2px;overflow:hidden}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,rgba(30,15,5,.5),transparent 70%);opacity:var(--sh,0)}
.front{background:var(--grain),linear-gradient(90deg,rgba(0,0,0,.14),transparent 7%),var(--tint,var(--paper));padding:var(--pt) 22px 0 66px}
.front::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,transparent calc(52px + var(--mx,0px)),rgba(190,70,60,.4) calc(52px + var(--mx,0px)),rgba(190,70,60,.4) calc(53px + var(--mx,0px)),transparent calc(53px + var(--mx,0px))),
 repeating-linear-gradient(transparent 0,transparent calc(var(--lh) - 1px),var(--rule) calc(var(--lh) - 1px),var(--rule) var(--lh));background-position:0 0,0 var(--pt)}
.back{transform:rotateY(180deg);background:var(--grain),#e7dcc3;box-shadow:inset 8px 0 14px rgba(0,0,0,.12)}
.inner{position:relative;height:var(--ih);overflow:hidden;line-height:var(--lh);font-size:calc(var(--lh)*.6);word-break:break-word}
.leaf-measure{position:absolute;visibility:hidden;left:-9999px;top:0;width:var(--w);padding:0 22px 0 66px}
.inner p,.inner ul,.inner ol{margin:0}
.inner p{text-indent:1.6em}.inner p.note,.inner h4+p{text-indent:0}
.inner h2{font:700 calc(var(--lh)*1.5)/calc(var(--lh)*2) var(--head);margin:0;transform:rotate(var(--t,0deg));transform-origin:0 50%}
.inner h2+.blurb{font-family:var(--head);font-size:calc(var(--lh)*.8);margin:0 0 var(--lh);opacity:.8}
.inner h3{font:700 calc(var(--lh)*.95)/var(--lh) var(--head);margin:var(--lh) 0 0;transform:rotate(var(--t,0deg));transform-origin:0 50%}
.inner h4{font:700 calc(var(--lh)*.62)/var(--lh) var(--body);margin:0}
.inner time{display:block;font:calc(var(--lh)*.7)/var(--lh) var(--head);opacity:.65}
.inner li{list-style:none;position:relative;padding-left:1.2em}.inner li::before{content:"–";position:absolute;left:.2em}
.inner p.note{font:calc(var(--lh)*.72)/var(--lh) var(--head);color:#7a3b2c;transform:rotate(-1.2deg);padding-left:1em}
.inner .stamp{font:calc(var(--lh)*.65)/var(--lh) var(--head);color:#9a5a2c}
.inner .empty{font-family:var(--head);font-size:calc(var(--lh)*.85);opacity:.55}
.folio{position:absolute;bottom:calc(var(--lh)*.3);width:100%;left:0;text-align:center;font:calc(var(--lh)*.7)/1 var(--head);opacity:.6;padding-left:44px}
.toc ol{padding:0;margin:0;counter-reset:c}
.toc li{padding:0}.toc li::before{content:none}
.toc button{all:unset;cursor:pointer;display:flex;width:100%;font:calc(var(--lh)*.85)/var(--lh) var(--head);font-weight:700;gap:.4em}
.toc button i{flex:1;border-bottom:2px dotted rgba(46,32,24,.4);margin-bottom:.45em}
.toc button:hover span:first-child,.toc button:focus-visible span:first-child{text-decoration:underline wavy rgba(122,59,44,.6)}
.toc button:focus-visible{outline:2px dashed #7a3b2c}
.cover{background:var(--grain),linear-gradient(90deg,#2a120c 0,#4a2418 5%,#5c2e22 9%,#4f281c 100%);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:3px 8px 8px 3px}
.cover::before{content:"";position:absolute;inset:0 auto 0 26px;border-left:2px dashed rgba(235,205,160,.28)}
.cover .label{background:var(--grain),#f1e6cc;padding:calc(var(--lh)*.7) calc(var(--lh)*1.2);transform:rotate(-1.5deg);text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.5);margin-left:20px}
.cover h1{margin:0;font:700 calc(var(--lh)*2.6)/1.1 var(--head);color:var(--ink)}
.cover p{margin:0;font:calc(var(--lh)*.8)/1.3 var(--head);color:#5b4636}
.cover:focus-visible{outline-offset:-8px}
.end .back{background:var(--grain),#4a2418}
.bar{display:flex;gap:18px;align-items:center;color:#e8d9bd;min-height:34px}
.bar button{all:unset;cursor:pointer;font:1.25rem var(--ui);padding:2px 8px;border-bottom:2px dotted rgba(232,217,189,.5)}
.bar button:focus-visible{outline:2px dashed #e9c98a}.bar button[disabled]{opacity:.3;cursor:default}
#where{font:1.2rem var(--ui);min-width:5em;text-align:center;opacity:.8}
.corner{position:absolute;z-index:5000;width:56px;height:56px;bottom:0;border:0;background:none;cursor:pointer;padding:0}
.corner.r{right:0}.corner.l{left:0}
.corner::before{content:"";position:absolute;bottom:0;width:0;height:0;transition:width .2s,height .2s;background:linear-gradient(135deg,rgba(0,0,0,.25),#cdbf9f 55%)}
.corner.r::before{right:0;border-radius:100% 0 0 0}.corner.l::before{left:0;transform:scaleX(-1);border-radius:100% 0 0 0}
.corner:hover::before,.corner:focus-visible::before{width:34px;height:34px}
.corner[hidden]{display:none}
.lost{text-align:center;color:#e8d9bd;font-family:var(--head)}.lost h1{font-size:3rem}.lost p{font:1.5rem var(--ui)}
.ns{color:#e8d9bd;font-family:var(--ui)}
@media(max-width:420px){.bar{gap:8px}}
@media(prefers-reduced-motion:reduce){.corner::before{transition:none}}