/* The tome opens: the Home hero scene. CSS 3D for the book, a small local WebGL canvas for the
   dice and coins, no bitmaps. The base markup is the finished spread; hero-ledger.js rewinds it
   to a closed tome only when the intro can play, so without JavaScript or with reduced motion
   the open book shows. Every class starts with lg- so nothing collides with the rest of the Home. */
@font-face{font-family:"Spectral SC";font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/spectral-sc-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Spectral;src:url('/assets/fonts/spectral-500italic-latin.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}

.hero{overflow-x:clip}
@media(min-width:821px){.hero .hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:8px}}

.ledger-scene{--ink:#2b2219;--ink-soft:#5a4a39;--ink-red:#8a3326;--paper:#ece7da;--paper-2:#e0d7c3;--paper-3:#d8ceb8;--paper-edge:#d6ccb6;
 --leather:#1c2638;--leather-hi:#2a3a55;--leather-lo:#0f151f;--gilt:#f0bd72;
 --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 1024C420 836 278 659 49 512 276 360 420 189 512 0c92 189 236 360 463 512C746 659 604 836 512 1024Z'/%3E%3C/svg%3E");
 --W:34cqw;--H:46cqw;--T:11cqw;--t:5.5cqw;
 position:relative;container-type:inline-size;width:100%;max-width:760px;aspect-ratio:1/.86;justify-self:end;isolation:isolate}
.ledger-scene *,.ledger-scene *:before,.ledger-scene *:after{box-sizing:border-box}

/* Lamp light behind the scene, and the aura that rises while the pages turn. */
.lg-lamp{position:absolute;inset:-10% -8% -4%;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 50% 44% at 52% 56%,#c8893f33,#c8893f10 50%,transparent 72%);transition:opacity 1.8s ease}
.is-closed .lg-lamp{opacity:.3}
.lg-aura{position:absolute;left:12%;right:12%;top:8%;bottom:20%;z-index:1;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,#3fd0ff2e,#3fd0ff12 45%,transparent 75%);opacity:.35;filter:blur(1cqw)}
.writing .lg-aura{opacity:0;transition:opacity 1.4s ease}
.writing.riffling .lg-aura{opacity:1;transition:opacity .6s ease}
.writing.riffled .lg-aura{opacity:.35;transition:opacity 2.4s ease}
.lg-motes{position:absolute;inset:0;z-index:5;pointer-events:none}
.lg-motes i{position:absolute;left:var(--x);top:58%;width:.7cqw;height:.7cqw;border-radius:50%;background:var(--volt-hi);box-shadow:0 0 1.2cqw var(--volt);opacity:0}
.riffling .lg-motes i{animation:lg-mote 2.6s cubic-bezier(.2,.6,.3,1) var(--d) forwards}
@keyframes lg-mote{0%{opacity:0;transform:none}15%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),-34cqw) scale(.4)}}

/* ---------- The tome ---------- */
.lg-camera{position:absolute;z-index:2;left:50%;top:60%;width:0;height:0;perspective:190cqw;perspective-origin:50% -45%}
.lg-book{position:absolute;left:0;top:calc(var(--H) / -2);width:var(--W);height:var(--H);transform-style:preserve-3d;
 transform:rotateX(var(--tilt,38deg)) rotateZ(var(--turn,-7deg)) translateX(var(--shift,0px)) translateZ(var(--lift,0px));transition:transform 2.3s cubic-bezier(.55,.05,.2,1)}
.is-closed .lg-book{--tilt:54deg;--turn:-24deg;--shift:calc(var(--W) / -2);--lift:-2cqw}
.lg-book *{transform-style:preserve-3d}
.lg-face,.lg-edge{position:absolute;backface-visibility:hidden}

.lg-pool{position:absolute;left:calc(var(--W) * -1.9);top:-45%;width:calc(var(--W) * 3.8);height:190%;border-radius:50%;background:radial-gradient(closest-side,#c8893f30,#c8893f12 55%,transparent);transform:translateZ(-3px);transition:opacity 1.8s}
.is-closed .lg-pool{opacity:.35}
.lg-shadow{position:absolute;left:calc(var(--W) * -1.08);top:-3%;width:calc(var(--W) * 2.16);height:110%;border-radius:2cqw;background:#000;filter:blur(2.4cqw);opacity:.65;transform:translateZ(-2px);transition:left 1.3s cubic-bezier(.5,0,.3,1) 1.1s,width 1.3s cubic-bezier(.5,0,.3,1) 1.1s}
.is-closed .lg-shadow{left:0;width:105%}

/* Boards: leather, with a visible thickness on the edges that face the reader. */
.lg-back{left:-1.6cqw;top:-1.8cqw;width:calc(var(--W) + 3.2cqw);height:calc(var(--H) + 3.6cqw);border-radius:0 1.4cqw 1.4cqw 0;background:linear-gradient(140deg,var(--leather),var(--leather-lo));border:.35cqw solid #0a0e14;box-shadow:inset 0 0 0 .55cqw transparent,inset 0 0 0 .75cqw #c8893f66}
.lg-board{position:absolute;background:linear-gradient(var(--leather-hi),var(--leather-lo));border:.3cqw solid #0a0e14}
.lg-board.fore{left:calc(var(--W) + 1.6cqw);top:-1.8cqw;width:1.1cqw;height:calc(var(--H) + 3.6cqw);transform-origin:left;transform:rotateY(-90deg)}
.lg-board.foot{left:-1.6cqw;top:calc(var(--H) + 1.8cqw);width:calc(var(--W) + 3.2cqw);height:1.1cqw;transform-origin:top;transform:rotateX(90deg)}

.lg-block{position:absolute;inset:0}
.lg-fore{left:var(--W);top:0;width:var(--t);height:var(--H);transform-origin:left;transform:rotateY(-90deg);border:.2cqw solid #0a0e14;
 background:linear-gradient(180deg,#f0bd7230,transparent 30%,transparent 70%,#7c532540),repeating-linear-gradient(90deg,#e7d6aa 0 .16cqw,#c9ad78 .16cqw .2cqw,#ecddb4 .2cqw .42cqw,#d6bd88 .42cqw .46cqw,#e3d1a2 .46cqw .64cqw,#bfa26d .64cqw .68cqw)}
.lg-foot{left:0;top:var(--H);width:var(--W);height:var(--t);transform-origin:top;transform:rotateX(90deg);border:.2cqw solid #0a0e14;
 background:linear-gradient(90deg,#f0bd7230,transparent 30%,transparent 70%,#7c532540),repeating-linear-gradient(0deg,#e7d6aa 0 .16cqw,#c9ad78 .16cqw .2cqw,#ecddb4 .2cqw .42cqw,#d6bd88 .42cqw .46cqw,#e3d1a2 .46cqw .64cqw,#bfa26d .64cqw .68cqw)}
.lg-block-l .lg-fore{transform:translateZ(var(--t)) rotateY(-90deg)}
.lg-block-l .lg-foot{transform:translateZ(var(--t)) rotateX(90deg)}
/* Stray leaves sticking out of the block, so it reads as an old, much handled tome. */
.lg-stray{position:absolute;inset:0;background:linear-gradient(90deg,var(--paper-2),#e9dfc6 96%,#cdbf9f);border:.1cqw solid #5a4a39;border-radius:0 .5cqw .5cqw 0;transform:translate3d(var(--x),var(--y),var(--z)) rotate(var(--r))}

.lg-page{inset:0;overflow:hidden;background:var(--paper);border:.3cqw solid #0a0e14;color:var(--ink)}
.lg-page:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:3}
.lg-right{transform:translateZ(var(--t));border-left-width:.12cqw;border-radius:0 .5cqw .5cqw 0}
.lg-right:before{background:linear-gradient(90deg,#00000066,#0000002e 3%,transparent 13%),linear-gradient(90deg,transparent 15%,#ffffff1a 21%,transparent 32%),radial-gradient(ellipse at 50% 50%,transparent 58%,#8a6a3a2e 100%),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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .25 0 0 0 0 .16 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.lg-left{transform:translateZ(calc(var(--t) + 1px)) rotateY(180deg);border-right-width:.12cqw;border-radius:.5cqw 0 0 .5cqw}
.lg-left:before{background:linear-gradient(270deg,#00000066,#0000002e 3%,transparent 13%),linear-gradient(270deg,transparent 15%,#ffffff1a 21%,transparent 32%),radial-gradient(ellipse at 50% 50%,transparent 58%,#8a6a3a2e 100%),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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .25 0 0 0 0 .16 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* The leaf: front board and half the pages turn together on the spine. */
.lg-leaf{position:absolute;inset:0;transform-origin:0 50% var(--t);transform:rotateY(-180deg);transition:transform 2.2s cubic-bezier(.62,.02,.2,1) .25s}
.is-closed .lg-leaf{transform:rotateY(0deg);transition:none}
.lg-cover,.lg-endpaper{left:0;top:-1.8cqw;width:calc(var(--W) + 1.6cqw);height:calc(var(--H) + 3.6cqw);border-radius:0 1.4cqw 1.4cqw 0;border:.35cqw solid #0a0e14}
.lg-cover{transform:translateZ(calc(var(--T) + 1.1cqw));
 background:radial-gradient(ellipse at 30% 16%,#ffffff12,transparent 42%),radial-gradient(ellipse at 80% 90%,#00000040,transparent 50%),linear-gradient(140deg,var(--leather-hi),var(--leather) 52%,var(--leather-lo))}
.lg-leaf .lg-board.fore{transform:translateZ(var(--T)) rotateY(-90deg)}
.lg-leaf .lg-board.foot{left:0;width:calc(var(--W) + 1.6cqw);transform:translateZ(var(--T)) rotateX(90deg)}
.lg-endpaper{transform:translateZ(var(--T)) rotateY(180deg);border-radius:1.4cqw 0 0 1.4cqw;background:linear-gradient(90deg,var(--leather-lo),var(--leather) 40%,var(--leather-lo));box-shadow:inset 0 0 0 .55cqw transparent,inset 0 0 0 .75cqw #c8893f66}
/* Tooling: a blind border, a gilt rule, corner fittings with rivets, and the Spark seal. */
.lg-tooling{position:absolute;inset:2.2cqw 2.2cqw 2.2cqw 3.4cqw;border:.25cqw solid #c8893fa0;border-radius:.8cqw;box-shadow:inset 0 0 0 1.1cqw #0000001f,inset 0 0 0 1.35cqw #c8893f55}



.lg-fit.tr{right:-.35cqw;top:-.35cqw;border-radius:0 1.4cqw 0 0}
.lg-fit.br{right:-.35cqw;bottom:-.35cqw;transform:scaleY(-1);border-radius:0 1.4cqw 0 0}
.lg-fit.tl{left:1cqw;top:-.35cqw;transform:scaleX(-1)}
.lg-fit.bl{left:1cqw;bottom:-.35cqw;transform:scale(-1)}




.lg-clasp{position:absolute;right:-2.6cqw;top:calc(50% - 3cqw);width:5cqw;height:6cqw;border:.35cqw solid #0a0e14;border-radius:.8cqw;background:linear-gradient(90deg,var(--bronze),var(--gilt))}
.lg-clasp:after{content:'';position:absolute;inset:1.3cqw 1.2cqw;background:var(--volt);-webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat}

/* The ribbon: from the gutter, over the foot of the pages, onto the table, ending in the charm. */
.lg-ribbon{position:absolute;left:3cqw;top:calc(var(--H) - 4cqw);width:2cqw;height:4cqw;background:repeating-linear-gradient(0deg,#00000018 0 .12cqw,transparent .12cqw .3cqw),linear-gradient(90deg,#0b5e7c,#1aa3cf 18%,#7fe8ff 44%,#2bb8e3 60%,#1489b3 84%,#0b5e7c);border:.22cqw solid #0a0e14;border-top:0;transform:translateZ(calc(var(--t) + 2px))}
.lg-ribbon-fall{position:absolute;left:-.22cqw;top:calc(100% + .45cqw);width:2cqw;height:var(--t);background:linear-gradient(#0000004d,#00000026),repeating-linear-gradient(0deg,#00000018 0 .12cqw,transparent .12cqw .3cqw),linear-gradient(90deg,#0b5e7c,#1aa3cf 18%,#7fe8ff 44%,#2bb8e3 60%,#1489b3 84%,#0b5e7c);border:.22cqw solid #0a0e14;border-top:0;transform-origin:top;transform:rotateX(90deg)}
.lg-ribbon-tail{position:absolute;left:-.22cqw;top:100%;width:2cqw;height:9cqw;background:linear-gradient(#0000002e,transparent 40%),repeating-linear-gradient(0deg,#00000018 0 .12cqw,transparent .12cqw .3cqw),linear-gradient(90deg,#0b5e7c,#1aa3cf 18%,#7fe8ff 44%,#2bb8e3 60%,#1489b3 84%,#0b5e7c);border:.22cqw solid #0a0e14;border-top:0;transform-origin:top;transform:rotateX(-90deg) translateZ(.6cqw) rotateZ(14deg);animation:lg-sway 5.5s ease-in-out infinite;animation-play-state:paused}
.settled .lg-ribbon-tail{animation-play-state:running}
.motion-paused .lg-ribbon-tail{animation-play-state:paused}
@keyframes lg-sway{0%,100%{transform:rotateX(-90deg) translateZ(.6cqw) rotateZ(14deg)}50%{transform:rotateX(-90deg) translateZ(.6cqw) rotateZ(19deg)}}



/* Pages that turn on their own, built by hero-ledger.js: strips that bend as they go. */
.lg-flip{position:absolute;left:0;top:0;width:var(--W);height:var(--H);transform-origin:0 50%}
.lg-seg{position:absolute;left:0;top:0;width:calc(var(--W) / 8 + .2cqw);height:var(--H);transform-origin:0 50%}
.lg-seg .lg-seg{left:calc(100% - .2cqw)}
.lg-sf,.lg-sb{position:absolute;inset:0;backface-visibility:hidden;background-color:var(--paper);background-size:var(--W) var(--H);border-top:.3cqw solid #0a0e14;border-bottom:.3cqw solid #0a0e14}
.lg-sb{transform:rotateY(180deg);background-color:var(--paper-2)}
.lg-seg.end>.lg-sf{border-right:.3cqw solid #0a0e14}
.lg-seg.end>.lg-sb{border-left:.3cqw solid #0a0e14}

/* ---------- Left page: bookkeeping by hand ---------- */
.lg-ruled{position:absolute;left:0;right:0;top:9cqw;bottom:0;background:repeating-linear-gradient(180deg,transparent 0 3.4cqw,#5a4a392e 3.4cqw calc(3.4cqw + 1px))}
.lg-ruled:before{content:'';position:absolute;left:5.2cqw;top:-9cqw;bottom:0;width:.15cqw;background:#a8463a40}
.lg-ink{position:absolute;inset:3.4cqw 2.2cqw 3cqw 6.6cqw;margin:0;font:500 italic 2.3cqw/1.5 var(--serif);color:var(--ink)}
.lg-ink b{display:block;font:600 italic 3cqw/1.15 var(--serif);color:var(--ink)}
.lg-ink .lg-who{display:block;font-size:1.85cqw;line-height:1.4;color:var(--ink-soft);margin:.3cqw 0 1.55cqw}
.lg-ink .lg-line{display:block;height:3.4cqw;line-height:3.4cqw;white-space:nowrap;position:relative}
.lg-ink s{text-decoration:none;position:relative;color:var(--ink-soft)}
.lg-ink s:after{content:'';position:absolute;left:-6%;right:-6%;top:52%;height:.26cqw;border-radius:1cqw;background:var(--ink-red);transform:rotate(-5deg);transform-origin:left;transition:transform .3s ease}
.lg-note{position:absolute;right:-.6cqw;top:24.6cqw;font:500 italic 1.85cqw var(--serif);color:var(--ink-red);transform:rotate(-9deg)}
.lg-note:before{content:'';position:absolute;left:-1.2cqw;right:-1.2cqw;top:-.6cqw;bottom:-.6cqw;border:.2cqw solid #8a332699;border-radius:50%;transform:rotate(4deg)}
.lg-blot{position:absolute;left:20cqw;top:28cqw;width:3.2cqw;height:2.4cqw;border-radius:46% 54% 50% 50%;background:radial-gradient(#2b2219cc,#2b221966 60%,transparent 72%)}
.lg-left .lg-ink>*{transition:clip-path .6s steps(16,end),opacity .3s}
.writing .lg-ink>*:not(.lg-blot){clip-path:inset(-30% 100% -30% 0)}
.writing .lg-ink .lg-blot{opacity:0}
.writing .lg-ink s:after{transform:rotate(-5deg) scaleX(0)}
.writing .lg-ink .on{clip-path:inset(-30% 0 -30% 0);opacity:1}
.writing .lg-ink s.struck:after{transform:rotate(-5deg) scaleX(1)}

/* ---------- Right page: the same character, kept by Steward ---------- */
.lg-right .lg-ink{opacity:0;transition:opacity .6s}
.writing .lg-right .lg-ink{opacity:1}
.writing.revealed .lg-right .lg-ink{opacity:0}
.lg-right .lg-ink>*{transition:clip-path .6s steps(14,end)}
.lg-app{position:absolute;inset:2.1cqw 2.1cqw 2.1cqw 2.7cqw;border-radius:1.5cqw;background:linear-gradient(180deg,#161d28,#0c1118);border:.3cqw solid #0a0e14;box-shadow:inset 0 0 0 .5cqw #11161f,inset 0 0 0 .66cqw #c8893f66,0 0 4cqw #3fd0ff2e;color:var(--text);font-family:var(--ui);padding:2.1cqw;overflow:hidden;clip-path:circle(150% at 0% 52%);transition:clip-path 1.2s cubic-bezier(.5,0,.2,1)}
.writing .lg-app{clip-path:circle(0% at 0% 52%)}
.writing.revealed .lg-app{clip-path:circle(150% at 0% 52%)}
.lg-wash{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(circle at 0% 52%,transparent 30%,#3fd0ff55 34%,transparent 40%) no-repeat;background-size:0 0}
.writing.revealed .lg-wash{animation:lg-wash 1.2s cubic-bezier(.5,0,.2,1) forwards}
@keyframes lg-wash{0%{opacity:1;background-size:30% 30%}80%{opacity:1}100%{opacity:0;background-size:300% 300%}}
.lg-top{display:flex;align-items:center;gap:1.1cqw}
.lg-crest{flex:none;width:5.6cqw;height:5.6cqw;border-radius:50%;background:var(--bg2);box-shadow:0 0 0 .24cqw var(--bronze),0 0 0 .55cqw #11161f,0 0 0 .72cqw #c8893f66;display:grid;place-items:center}
.lg-crest img{width:3.5cqw;height:3.5cqw}
.lg-name{flex:1;min-width:0;white-space:nowrap}.lg-name b{display:block;font:600 2.3cqw/1.1 var(--serif)}.lg-name small{display:block;font-size:1.45cqw;color:var(--muted)}
.lg-lvl{position:relative;width:5.4cqw;height:5.4cqw;display:grid;place-items:center;flex:none}
.lg-lvl:before{content:'';position:absolute;inset:1cqw;transform:rotate(45deg);border:.22cqw solid var(--bronze);border-radius:.35cqw;background:var(--bg2)}
.lg-lvl b{position:relative;font:700 2.1cqw var(--serif);color:var(--gilt)}
.lg-row{display:flex;align-items:center;gap:1.2cqw;margin:1.4cqw 0 1cqw}
.lg-shield{flex:none;width:5.1cqw;height:5.4cqw;display:grid;place-items:center;padding-bottom:.45cqw;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 42'%3E%3Cpath d='M20 2 36 7.5V21c0 10-7 16-16 19C11 37 4 31 4 21V7.5Z' fill='%2311161f' stroke='%23c8893f' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;font:700 2cqw var(--serif);color:var(--gilt)}
.lg-hp{flex:1;border:.15cqw solid var(--line);border-radius:1.3cqw;padding:.9cqw 1.3cqw;background:#0a0e148c}
.lg-hp-top{display:flex;justify-content:space-between;align-items:baseline}
.lg-hp-top span{font:600 1.45cqw "Spectral SC",var(--serif);color:var(--muted);text-transform:lowercase;letter-spacing:.06em}
.lg-hp-top b{font:600 2.4cqw var(--serif);color:#5fae6b}.lg-hp-top b small{font-size:1.45cqw;color:var(--muted)}
.lg-hpbar{display:block;height:1cqw;margin-top:.7cqw;border:.12cqw solid var(--line2);border-radius:1cqw;background:var(--bg);overflow:hidden}
.lg-hpbar i{display:block;height:100%;width:65%;background:linear-gradient(90deg,#3f8a4c,#5fae6b);transition:width 1.1s cubic-bezier(.3,0,.2,1) 1.2s}
.writing .lg-hpbar i{width:100%}
.writing.revealed .lg-hpbar i{width:65%}
.lg-stats{display:flex;border-top:.12cqw solid #c8893f40;border-bottom:.12cqw solid #c8893f40;padding:.75cqw 0}
.lg-stats span{flex:1;text-align:center}.lg-stats span+span{border-left:.12cqw solid var(--line)}
.lg-stats b{display:block;font:600 2cqw/1.2 var(--serif)}.lg-stats b.lg-v{color:var(--volt-hi)}
.lg-stats small{font:600 1.2cqw "Spectral SC",var(--serif);color:var(--muted);text-transform:lowercase;white-space:nowrap}
.lg-eyebrow{display:flex;align-items:center;gap:.9cqw;margin:1.5cqw 0 .9cqw;font:600 1.7cqw "Spectral SC",var(--serif);text-transform:lowercase;letter-spacing:.06em;color:var(--bronze)}
.lg-eyebrow:after{content:'';flex:1;height:.12cqw;background:linear-gradient(90deg,var(--bronze-lo),transparent)}
.lg-gems{display:flex;gap:1.2cqw;align-items:center;font:600 1.6cqw var(--serif);color:var(--muted);margin-bottom:.9cqw}
.lg-gems>span{width:3.3cqw}
.lg-gems i{width:2.1cqw;height:2.1cqw;transform:rotate(45deg);border-radius:.35cqw;border:.15cqw solid var(--bronze-hi);background:linear-gradient(135deg,var(--gilt),#7c5325);box-shadow:0 0 1.2cqw #c8893f66;transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.lg-gems i.lg-spent{background:var(--bg3);border-color:var(--bronze-lo);box-shadow:none}
.writing .lg-gems i{transform:rotate(45deg) scale(.15)}
.writing.revealed .lg-gems i{transform:rotate(45deg) scale(1)}
.writing.revealed .lg-gems i:nth-of-type(1){transition-delay:1.3s}.writing.revealed .lg-gems i:nth-of-type(2){transition-delay:1.4s}.writing.revealed .lg-gems i:nth-of-type(3){transition-delay:1.5s}.writing.revealed .lg-gems i:nth-of-type(4){transition-delay:1.6s}
.lg-stamp{transition:transform .45s cubic-bezier(.2,1.6,.5,1),opacity .2s}
.writing .lg-stamp{transform:scale(1.7);opacity:0}
.writing.revealed .lg-stamp{transform:none;opacity:1}
.writing.revealed .lg-s1{transition-delay:.7s}.writing.revealed .lg-s2{transition-delay:.9s}

/* ---------- Loose sheets: drawn leaves that hover in 3D, with their own shadow and a passing sheen ---------- */
.lg-sheet{position:absolute;z-index:3;width:13cqw;height:16cqw;perspective:45cqw;transition:transform 2.6s cubic-bezier(.2,.7,.2,1),opacity .7s}
.lg-float{position:absolute;inset:0;transform-style:preserve-3d;animation:lg-float var(--hd,7s) ease-in-out var(--hdel,0s) infinite}
.lg-curl{width:100%;height:100%;overflow:visible;filter:drop-shadow(.3cqw .5cqw .4cqw #0007)}
.lg-sheet-shadow{position:absolute;left:12%;right:12%;top:118%;height:14%;border-radius:50%;background:#000;filter:blur(1.1cqw);opacity:.42;animation:lg-sheet-shadow var(--hd,7s) ease-in-out var(--hdel,0s) infinite}
.lg-sheen{transform-box:view-box;animation:lg-sheen var(--hd,7s) ease-in-out var(--hdel,0s) infinite}
.writing:not(.settled) .lg-float,.writing:not(.settled) .lg-sheet-shadow,.writing:not(.settled) .lg-sheen{animation-play-state:paused}
.motion-paused .lg-float,.motion-paused .lg-sheet-shadow,.motion-paused .lg-sheen{animation-play-state:paused}
/* Paper travels further than the dice and flexes as it goes (the skew reads as a soft bend). */
@keyframes lg-float{0%,100%{transform:translate3d(0,0,0) rotateX(16deg) rotateY(-26deg) rotateZ(-3deg) skewY(0deg)}25%{transform:translate3d(1.4cqw,-2.4cqw,2cqw) rotateX(4deg) rotateY(-4deg) rotateZ(1deg) skewY(-3deg)}50%{transform:translate3d(1.8cqw,-4.6cqw,4cqw) rotateX(-12deg) rotateY(22deg) rotateZ(5deg) skewY(2deg)}75%{transform:translate3d(.6cqw,-2.2cqw,2.2cqw) rotateX(2deg) rotateY(6deg) rotateZ(-1deg) skewY(3deg)}}
@keyframes lg-sheet-shadow{0%,100%{transform:none;opacity:.42}50%{transform:translate(2.4cqw,.8cqw) scale(.62);opacity:.16}}
@keyframes lg-sheen{0%,100%{transform:translateX(0)}50%{transform:translateX(210px)}}
.lg-sheet.a{left:6%;top:4%;transform:rotate(-14deg)}
.lg-sheet.b{right:2%;top:0;width:10.5cqw;height:13cqw;transform:rotate(12deg) scaleX(-1)}
.lg-sheet.b{--hd:8.4s;--hdel:-3s}
.writing .lg-sheet{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.5)}
.lg-sheet.a{--fx:24cqw;--fy:30cqw}.lg-sheet.b{--fx:-26cqw;--fy:34cqw}
.writing.riffling .lg-sheet,.writing.riffled .lg-sheet{opacity:1}
.writing.riffling .lg-sheet.a,.writing.riffled .lg-sheet.a{transform:rotate(-14deg)}
.writing.riffling .lg-sheet.b,.writing.riffled .lg-sheet.b{transform:rotate(12deg) scaleX(-1);transition-delay:.25s}
@keyframes lg-hover{0%,100%{transform:translate3d(0,0,0) rotateX(6deg) rotateY(-10deg)}50%{transform:translate3d(.6cqw,-2cqw,2cqw) rotateX(-4deg) rotateY(8deg)}}

/* ---------- Steward rises from behind the tome ---------- */





/* ---------- Dice and coins: a WebGL canvas over the scene, with a flat fallback ---------- */
.lg-dice{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}
.lg-die{position:absolute;z-index:4;left:1%;bottom:2%;width:12cqw;height:auto;transform:rotate(-14deg);filter:drop-shadow(1cqw 1.6cqw 1.2cqw #000b)}
.has-dice .lg-die{display:none}

/* The clasp lets go: a few sparks before the board moves. */
.lg-spark{position:absolute;left:calc(var(--W) + 1.4cqw);top:50%;transform:translateZ(calc(var(--T) + 1.4cqw))}
.lg-spark i{position:absolute;width:.8cqw;height:.8cqw;border-radius:50%;background:var(--volt-hi);box-shadow:0 0 1.2cqw var(--volt);opacity:0}
.unlock .lg-spark i{animation:lg-spark .9s ease-out forwards}
.lg-spark i:nth-child(2){animation-delay:.06s}.lg-spark i:nth-child(3){animation-delay:.12s}.lg-spark i:nth-child(4){animation-delay:.18s}.lg-spark i:nth-child(5){animation-delay:.08s}
@keyframes lg-spark{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}

@media(max-width:820px){.ledger-scene{max-width:620px;justify-self:center;margin:6px auto 0}}
@media(max-width:680px){.ledger-scene{aspect-ratio:1/.95;--W:38cqw;--H:51cqw;--T:12cqw;--t:6cqw}.lg-camera{top:62%}.lg-sheet.b{display:none}}
@media(prefers-reduced-motion:reduce){.ledger-scene *{transition:none!important;animation:none!important}}
.lg-instant,.lg-instant *{transition:none!important;animation-duration:0s!important}
.lg-flips{position:absolute;inset:0;transform:translateZ(calc(var(--t) + 1px))}
/* Ink on the turning pages: placeholders drawn in CSS until the illustrated set arrives. */
.lg-ink-a{background-image:radial-gradient(circle at 50% 36%,transparent 0 6.6cqw,#2b2219b0 6.7cqw 7cqw,transparent 7.1cqw 8.6cqw,#2b221980 8.7cqw 8.9cqw,transparent 9cqw),repeating-conic-gradient(from 0deg at 50% 36%,#2b221930 0 .6deg,transparent .6deg 30deg),repeating-linear-gradient(180deg,transparent 0 3.4cqw,#5a4a3940 3.4cqw calc(3.4cqw + 1px))}
.lg-ink-b{background-image:linear-gradient(90deg,transparent 12%,#2b221970 12% 80%,transparent 80%),linear-gradient(90deg,transparent 12%,#2b221960 12% 64%,transparent 64%),linear-gradient(90deg,transparent 12%,#2b221966 12% 74%,transparent 74%),repeating-linear-gradient(180deg,transparent 0 3.4cqw,#5a4a3940 3.4cqw calc(3.4cqw + 1px));background-size:100% .45cqw,100% .45cqw,100% .45cqw,auto;background-position:0 30%,0 38%,0 46%,0 0;background-repeat:no-repeat,no-repeat,no-repeat,repeat}
.lg-ink-c{background-image:linear-gradient(135deg,transparent 46%,#8a332699 46% 54%,transparent 54%),linear-gradient(45deg,transparent 46%,#8a332699 46% 54%,transparent 54%),repeating-linear-gradient(120deg,transparent 0 1.4cqw,#2b221966 1.4cqw 2.2cqw),repeating-linear-gradient(180deg,transparent 0 3.4cqw,#5a4a3940 3.4cqw calc(3.4cqw + 1px));background-size:5cqw 5cqw,5cqw 5cqw,14cqw .5cqw,auto;background-position:70% 62%,70% 62%,30% 40%,0 0;background-repeat:no-repeat,no-repeat,no-repeat,repeat}
.lg-ink-m{background-image:linear-gradient(90deg,transparent 5.2cqw,#a8463a40 5.2cqw calc(5.2cqw + .15cqw),transparent calc(5.2cqw + .15cqw)),repeating-linear-gradient(180deg,transparent 0 3.4cqw,#5a4a392e 3.4cqw calc(3.4cqw + 1px));background-position:0 0,0 9cqw}
.lg-sf,.lg-sb{overflow:hidden}
.lg-sf>i,.lg-sb>i{position:absolute;top:0;width:var(--W);height:var(--H);background-color:inherit;left:calc(var(--k) * var(--W) / -8)}
.lg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* The spine: rounded leather with raised bands, seen while the tome is closed. */
.lg-spine{position:absolute;left:0;top:-1.8cqw;width:calc(var(--T) + 1.1cqw);height:calc(var(--H) + 3.6cqw);transform-origin:left;transform:translateX(-.3cqw) rotateY(-90deg);border:.35cqw solid #0a0e14;border-radius:1.4cqw;backface-visibility:hidden;transition:opacity .35s ease .55s;
 background:
  linear-gradient(180deg,transparent 14%,#0a0e14 14% 14.5%,#e2ad62 14.5% 15.3%,#41587f 15.3% 18.2%,#7c5325 18.2% 19%,#0a0e14 19% 19.5%,transparent 19.5% 80.5%,#0a0e14 80.5% 81%,#e2ad62 81% 81.8%,#41587f 81.8% 84.7%,#7c5325 84.7% 85.5%,#0a0e14 85.5% 86%,transparent 86%),
  linear-gradient(180deg,transparent 31%,#0a0e14 31% 31.4%,#e2ad62 31.4% 32%,#2e4164 32% 34%,#7c5325 34% 34.6%,#0a0e14 34.6% 35%,transparent 35% 65%,#0a0e14 65% 65.4%,#e2ad62 65.4% 66%,#2e4164 66% 68%,#7c5325 68% 68.6%,#0a0e14 68.6% 69%,transparent 69%),
  linear-gradient(90deg,#0b1018,#1c2a40 18%,#3f5678 42%,#2a3a55 62%,#141d2b 85%,#0b1018)}
.lg-spine:after{content:'';position:absolute;left:50%;top:50%;width:4.4cqw;height:4.4cqw;margin:-2.2cqw;filter:drop-shadow(0 0 .5cqw #f0bd7266);background:var(--gilt);-webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat}
.ledger-scene:not(.is-closed) .lg-spine{opacity:0}
/* While the intro plays the flat d20 stays out of the way; it remains only as the no-WebGL fallback. */
.writing .lg-die{opacity:0}

/* ---------- Astra's art (2026-10-04) ---------- */
.lg-seal{position:absolute;left:calc(50% + .6cqw);top:50%;width:18cqw;height:18cqw;transform:translate(-50%,-50%);background:url('/assets/home/img/home-tome-seal.svg?v=8fd3719e') center/contain no-repeat;filter:drop-shadow(0 .5cqw .6cqw #0009)}
.lg-seal:after{content:'';position:absolute;inset:23%;background:var(--volt);-webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat;filter:blur(1.2cqw);opacity:.45}
.unlock .lg-seal:after{animation:lg-seal-flare 1.1s ease-out}
@keyframes lg-seal-flare{0%{opacity:.45}25%{opacity:1}100%{opacity:.45}}
.lg-fit{position:absolute;width:7.4cqw;height:7.4cqw;background:url('/assets/home/img/home-tome-fitting.svg?v=8fd3719e') center/contain no-repeat}
.lg-fil{position:absolute;width:6.4cqw;height:6.4cqw;background:url('/assets/home/img/home-tome-filigree.svg?v=8fd3719e') center/contain no-repeat;opacity:.9}
.lg-fil.bl{left:1.4cqw;bottom:1.4cqw}.lg-fil.br{right:1.4cqw;bottom:1.4cqw;transform:scaleX(-1)}.lg-fil.tl{left:1.4cqw;top:1.4cqw;transform:scaleY(-1)}.lg-fil.tr{right:1.4cqw;top:1.4cqw;transform:scale(-1)}
.lg-tooling:before{content:'';position:absolute;left:8cqw;right:8cqw;top:1.2cqw;height:1.4cqw;border:0;border-radius:0;background:url('/assets/home/img/home-tome-border.svg?v=8fd3719e') 0 50%/14cqw 1.4cqw repeat-x}
.lg-tooling:after{content:'';position:absolute;left:8cqw;right:8cqw;bottom:1.2cqw;height:1.4cqw;background:url('/assets/home/img/home-tome-border.svg?v=8fd3719e') 0 50%/14cqw 1.4cqw repeat-x}
.lg-charm{position:absolute;left:50%;top:calc(100% - 1.6cqw);width:6.6cqw;height:8.8cqw;margin-left:-3.3cqw;background:url('/assets/home/img/home-tome-charm.svg?v=8fd3719e') center/contain no-repeat;filter:drop-shadow(0 .5cqw 0 #5a3a18) drop-shadow(0 1.2cqw 1cqw #000a)}
.lg-ink-p{background:var(--paper) url('/assets/home/img/home-tome-ink.svg?v=8fd3719e') no-repeat;background-size:calc(var(--W) * 10) var(--H);background-position:calc(var(--p) * var(--W) * -1) 0}
.ledger-scene{--rx:30cqw;--ry:-2.8cqw;--rs:40cqw;--rr:-3.5deg;--edge-l:36.2cqw;--edge-r:30.4cqw}
/* Behind the tome Steward is cut along the far edge of the open book, which runs down toward the left. */
.lg-steward{position:absolute;z-index:1;left:0;top:-30cqw;width:100%;height:calc(100% + 30cqw);clip-path:polygon(0 0,100% 0,100% calc(30cqw + var(--edge-r)),0 calc(30cqw + var(--edge-l)));pointer-events:none}
.lg-steward .lg-rig{top:calc(var(--ry) + 30cqw)}
.lg-steward-front{position:absolute;z-index:3;inset:0;pointer-events:none}
.lg-rig{position:absolute;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);transform:rotate(var(--rr))}
.lg-rig img,.lg-rig svg{display:block;width:100%;height:100%;overflow:visible}
.lg-steward .lg-rig{filter:drop-shadow(1cqw 1.6cqw 2cqw #0009)}
.lg-steward-front .lg-rig{filter:drop-shadow(.4cqw .8cqw .8cqw #0008)}
.lg-steward-front:not(.has-rig){display:none}
.writing .lg-rig{translate:0 40cqw}
.writing.riffled .lg-rig{translate:0 0}
.writing:not(.riffled) .lg-steward-front,.hands-back .lg-steward-front{visibility:hidden}
@media(max-width:680px){.ledger-scene{--rx:27.5cqw;--ry:-2cqw;--rs:45cqw;--edge-l:38.4cqw;--edge-r:33.2cqw}}
/* Headbands: stitched silk at both ends of the spine, seen in the gutter once the tome is open. */
.lg-headband{position:absolute;left:-1.3cqw;width:2.6cqw;height:1.1cqw;border:.22cqw solid #0a0e14;border-radius:1cqw;background:repeating-linear-gradient(90deg,var(--gilt) 0 .32cqw,#7a2b22 .32cqw .64cqw),var(--gilt);transform:translateZ(calc(var(--t) + 1.5px))}
.lg-headband.top{top:-.55cqw}.lg-headband.foot{top:calc(var(--H) - .55cqw)}
.is-closed .lg-headband{visibility:hidden}

/* ---------- Astra's review (2026-10-04): contact, material, relief, the clasp, light ---------- */
/* Where a board meets the paper, the paper darkens: the top of the upper block under the front board,
   the bottom of the lower block over the back board. */
.lg-block-r .lg-fore,.lg-block-r .lg-foot{box-shadow:none}
.lg-block-r .lg-fore:after,.lg-block-r .lg-foot:after,.lg-block-l .lg-fore:after,.lg-block-l .lg-foot:after{content:'';position:absolute;inset:0;pointer-events:none}
.lg-block-r .lg-fore:after{background:linear-gradient(90deg,#0000006b,transparent 30%)}
.lg-block-r .lg-foot:after{background:linear-gradient(180deg,#0000006b,transparent 30%)}
.lg-block-l .lg-fore:after{background:linear-gradient(90deg,transparent 62%,#00000080)}
.lg-block-l .lg-foot:after{background:linear-gradient(180deg,transparent 62%,#00000080)}
/* A narrow, dark contact shadow right under the tome, inside the soft one. */
.lg-contact{position:absolute;left:-1.2cqw;top:-1.2cqw;width:calc(var(--W) + 2.6cqw);height:calc(var(--H) + 3.2cqw);border-radius:1.4cqw;background:#000;filter:blur(.7cqw);opacity:.85;transform:translateZ(-1px);transition:left 1.3s cubic-bezier(.5,0,.3,1) 1.1s,width 1.3s cubic-bezier(.5,0,.3,1) 1.1s}
.ledger-scene:not(.is-closed) .lg-contact{left:calc(var(--W) * -1 - 1.2cqw);width:calc(var(--W) * 2 + 2.6cqw)}
/* Raised metal sits on the leather with a short, hard shadow; tooling is pressed into it. */
.lg-seal{filter:drop-shadow(0 .22cqw .12cqw #000d) drop-shadow(.3cqw .9cqw 1cqw #0009)}
.lg-fit{filter:drop-shadow(0 .2cqw .1cqw #000c)}
.lg-clasp{box-shadow:0 .25cqw .15cqw #000c,inset .25cqw .25cqw 0 #ffe0a6aa,inset -.3cqw -.3cqw 0 #7c5325}
.lg-fil,.lg-tooling:before,.lg-tooling:after{filter:drop-shadow(0 -.12cqw 0 #000000b0) drop-shadow(0 .12cqw 0 #ffffff26)}
.lg-tooling{box-shadow:inset 0 0 0 1.1cqw #0000001f,inset 0 0 0 1.35cqw #c8893f55,inset 0 .15cqw .1cqw #00000080}
/* Bronze: a narrow highlight that runs across the metal, masked to each piece. Leather stays broad and matte. */
.lg-fit:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 38%,#fff3d6c0 47%,transparent 55%);-webkit-mask:url('/assets/home/img/home-tome-fitting.svg?v=8fd3719e') center/contain no-repeat;mask:url('/assets/home/img/home-tome-fitting.svg?v=8fd3719e') center/contain no-repeat;mix-blend-mode:screen;opacity:.75}
.lg-seal:before{content:'';position:absolute;inset:0;background:linear-gradient(130deg,transparent 30%,#fff3d6b0 40%,transparent 48%,transparent 70%,#fff3d640 76%,transparent 82%);-webkit-mask:url('/assets/home/img/home-tome-seal.svg?v=8fd3719e') center/contain no-repeat;mask:url('/assets/home/img/home-tome-seal.svg?v=8fd3719e') center/contain no-repeat;mix-blend-mode:screen;transition:opacity 1.1s ease .25s}
.lg-clasp:before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent 35%,#fff3d6d0 46%,transparent 56%);mix-blend-mode:screen}
.lg-cover{background:radial-gradient(ellipse at 30% 16%,#ffffff14,transparent 46%),radial-gradient(circle at 100% 0,#ffffff12,transparent 9%),radial-gradient(circle at 100% 100%,#ffffff10,transparent 9%),radial-gradient(ellipse at 80% 90%,#00000045,transparent 50%),linear-gradient(140deg,var(--leather-hi),var(--leather) 52%,var(--leather-lo))}
/* The clasp lets go first: it slides out and tips before the board moves. */
.unlock .lg-clasp{animation:lg-clasp .38s cubic-bezier(.3,0,.2,1) forwards}
@keyframes lg-clasp{0%{transform:none}55%{transform:translateX(1.3cqw) rotate(14deg)}100%{transform:translateX(1.6cqw) rotate(18deg)}}
/* The board turns away from the lamp and darkens; the endpaper turns into the light and clears. */
.lg-shade{position:absolute;inset:0;border-radius:inherit;background:#05080d;pointer-events:none;z-index:5}
.lg-cover .lg-shade{opacity:.55;transition:opacity 1.1s ease-in .25s}
.is-closed .lg-cover .lg-shade{opacity:0;transition:none}
.lg-endpaper .lg-shade{opacity:0;transition:opacity 1.2s ease-out 1.3s}
.is-closed .lg-endpaper .lg-shade{opacity:.6;transition:none}
.ledger-scene:not(.is-closed) .lg-seal:before{opacity:0}
.lg-clasp{backface-visibility:hidden}