/* Light comes from the top-left on every surface. */
:root {
  /* procedural, generated in this repo, no third-party asset */
  --tex-leather: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.42%22%20numOctaves%3D%223%22%20seed%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeDiffuseLighting%20lighting-color%3D%22%23fff%22%20surfaceScale%3D%221.2%22%20diffuseConstant%3D%221%22%3E%3CfeDistantLight%20azimuth%3D%22225%22%20elevation%3D%2255%22%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3Crect%20width%3D%22128%22%20height%3D%22128%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%22.22%22%2F%3E%3C%2Fsvg%3E");
  /* procedural, generated in this repo, no third-party asset */
  --tex-paper: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.12%200.35%22%20numOctaves%3D%223%22%20seed%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22128%22%20height%3D%22128%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%22.22%22%2F%3E%3C%2Fsvg%3E");
  /* procedural, generated in this repo, no third-party asset */
  --tex-wood: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.018%200.19%22%20numOctaves%3D%223%22%20seed%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22128%22%20height%3D%22128%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%22.22%22%2F%3E%3C%2Fsvg%3E");
  /* procedural, generated in this repo, no third-party asset */
  --tex-cloth: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22turbulence%22%20baseFrequency%3D%220.35%200.48%22%20numOctaves%3D%222%22%20seed%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22128%22%20height%3D%22128%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%22.22%22%2F%3E%3C%2Fsvg%3E");
}

/* Static texture surfaces are separate from animated gold. */
.notebook{background:var(--tex-leather),radial-gradient(ellipse at top left,#ffffff12,transparent 38%),#121212;background-blend-mode:soft-light,normal,normal;box-shadow:inset 1px 1px #ffffff25,inset -2px -2px 5px #000b,0 2px 4px #0008,0 22px 45px #29231d77}
.notebook:before{inset:18px;opacity:1;filter:none;background:none;border:1px dashed #ffffff20;border-radius:4px 9px 9px 4px;z-index:var(--z-stitch)}
.notebook:after{background:linear-gradient(90deg,#080808,#38332e 30%,#111 55%,#080808);box-shadow:-1px 0 #ffffff14,2px 0 4px #000a}
.page{background:var(--tex-paper),radial-gradient(ellipse at 40% 30%,transparent 40%,#59432a12 100%),var(--paper);background-blend-mode:soft-light,normal,normal;box-shadow:inset 12px 0 18px -14px #3a2b1b80,1px 1px #e4ddcf,2px 2px #c8bdae,3px 3px #eee7d9,4px 4px #b8ae9f,0 6px 12px #0008}
.page:before{display:none}
.book{background:var(--tex-leather),linear-gradient(90deg,#ffffff0c 0%,#ffffff20 22%,#ffffff35 25%,#ffffff10 29%,transparent 50%,#0009 100%),linear-gradient(to bottom,#ffffff10,transparent 25%,#0003 100%),var(--cloth);background-blend-mode:soft-light,normal,normal,normal;border:1px solid #91713f;box-shadow:inset 1px 0 #ffffff20,inset -2px 0 3px #0008,4px 2px 5px #0008}
.book:before,.book:after{border-color:#b18c40;box-shadow:inset 0 1px #000a,0 1px #ffffff24;background:repeating-linear-gradient(90deg,#d6be8a 0 2px,#5e4a31 2px 3px);height:3px}
.book .book-title,.shelf .book .book-title,.shelf-board .book .book-title{text-shadow:0 1px 0 rgba(0,0,0,.65),0 -1px 0 rgba(255,255,255,.12)}
.book-ornament{filter:drop-shadow(0 1px 0 #ffffff40) drop-shadow(0 -1px 0 #000a)}
.shelf-track,.shelf-board{background:linear-gradient(to bottom,#0008,transparent 38px),var(--tex-wood),#231a16;background-blend-mode:normal,soft-light,normal;box-shadow:inset 0 12px 14px -12px #000,inset 0 -3px #7c6045,inset 0 -8px #281b16;border-bottom:3px solid #130d0a;border-image:none}
.slot:has(.book){background:radial-gradient(ellipse 45% 6px at 50% calc(100% - 20px),#000b,transparent)}
.empty{border:0;border-radius:2px;background:linear-gradient(90deg,#0008,transparent 32%,transparent 68%,#0009);box-shadow:inset 1px 0 #ffffff10,inset -1px 0 #0008}
.slot:has(.empty):first-child .empty,.slot:has(.book) + .slot .empty{outline:1px solid #d1b16d66;outline-offset:-2px}
.ribbon{background:linear-gradient(130deg,#ffffff32,transparent 33%,#0002 65%,#ffffff1a),var(--tex-cloth),#6c3e2d;background-blend-mode:normal,soft-light,normal;box-shadow:none}
.ribbon:after{content:'';position:absolute;bottom:0;left:0;right:0;height:18px;background:linear-gradient(150deg,transparent 47%,#321c1880 50%,transparent 54%),linear-gradient(210deg,transparent 47%,#321c1880 50%,transparent 54%);pointer-events:none}
.notebook:has(.ribbon) #screen:before{content:'';position:absolute;right:10%;top:-56px;width:32px;height:160px;background:#0003;transform:translate(3px,3px);filter:blur(3px);pointer-events:none;z-index:2;clip-path:polygon(0 0,100% 0,100% 100%,50% 89%,0 100%)}

.paper-bin{filter:drop-shadow(2px 3px 3px #0008)}

.cover{box-shadow:1px 2px 5px #34281755;border-color:#a78037}
.cover:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#ffffff45,transparent 46%,#00000010);pointer-events:none}
.gold-rim{background:repeating-linear-gradient(120deg,#ffffff18 0 1px,#00000012 1px 2px),var(--gold) border-box}
@media(max-width:600px){.notebook:before{inset:4px}.notebook:has(.ribbon) #screen:before{right:8%;top:-10px;height:145px}}
@media print{.print-shelf .book{background:#fff!important;box-shadow:none!important;text-shadow:none!important}.print-shelf .book:before,.print-shelf .book:after{background:none;box-shadow:none}.print-shelf .book span{text-shadow:none!important}.slot:has(.book){background:none}.gold-rim{display:none!important}}

.notebook.finale #screen:before{display:none}
@media(max-width:600px){.shelf{right:auto}}
/* Toss button: small visible disc above the spine tip, 44px hit area via :after. */
.slot .toss{top:auto;bottom:calc(var(--height) - 14px);width:28px;height:28px;min-height:28px;padding:6px;border:1px solid #8a6a2a;background:#1b1815}
.slot .toss:after{content:'';position:absolute;inset:-8px}
@media(hover:none){.slot .toss{opacity:.78}}
/* ribbon cast-shadow pseudo removed: misaligned with the ribbon box */
.notebook:has(.ribbon) #screen:before{display:none!important}

/* Spine layers: static cloth and shade under the foil tooling. */
.book.decor-0{--cloth:#161514}.book.decor-1{--cloth:#3b1a1c}.book.decor-2{--cloth:#14261c}.book.decor-3{--cloth:#131d2b}.book.decor-4{--cloth:#222225}
.slot .book,.shelf-board .book{width:58px;height:var(--height)}
.slot,.shelf-board .slot{width:64px;flex-basis:64px;height:220px}
.shelf-board{min-height:230px}
.book{background:linear-gradient(90deg,transparent calc(11% - 1px),#0008 calc(11% - 1px),#0008 calc(11% + 1px),#fff3 calc(11% + 1px),#fff3 calc(11% + 2px),transparent calc(11% + 2px),transparent calc(89% - 1px),#0008 calc(89% - 1px),#0008 calc(89% + 1px),#fff3 calc(89% + 1px),#fff3 calc(89% + 2px),transparent calc(89% + 2px)),var(--tex-cloth),linear-gradient(90deg,#0009,#ffffff18 30%,transparent 55%,#0009),linear-gradient(to bottom,#ffffff12,transparent 25%,#0003),var(--cloth);background-blend-mode:normal,soft-light,normal,normal,normal;border:1px solid #91713f}
.book:before,.book:after{content:none}
.book>div{position:absolute;left:50%;transform:translateX(-50%)}
.book .l-cap-head,.book .l-cap-tail{width:100%;background:linear-gradient(to bottom,#ffffff45,#0007);pointer-events:none}
.book .l-cap-head{top:0;height:3.5%;border-radius:50% 50% 0 0}
.book .l-cap-tail{top:97.5%;height:2.5%;border-radius:0 0 40% 40%}
.book .l-fillet-head,.book .l-fillet-tail{width:80%;height:4%;display:flex;align-items:center;pointer-events:none}
.book .l-fillet-head{top:3.5%}.book .l-fillet-tail{top:95.3%}
.book .l-fillet-head:before,.book .l-fillet-tail:before{content:'';display:block;width:100%;height:4px;background:var(--gold);mask:linear-gradient(to bottom,#000 0 1px,transparent 1px 3px,#000 3px 4px);box-shadow:0 .5px #000a}
:root{--spine-title-font:'Source Serif 4',Georgia,serif;--spine-title-weight:700;--spine-author-font:'Source Serif 4',Georgia,serif;--spine-author-weight:700}
.book .l-title,.book .l-author{width:calc(100% - 14px);display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;text-align:center;overflow:hidden;line-height:1.12}
.book .l-title{font-family:var(--spine-title-font);font-weight:var(--spine-title-weight)}.book .l-author{font-family:var(--spine-author-font);font-weight:var(--spine-author-weight);text-transform:uppercase}
.book .l-title{top:8%;height:46%;color:#f6e2a2;text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 7px rgba(240,200,110,.28)}
.book.no-author .l-title{height:70%}
.book .l-author{top:58%;height:31%;color:#e6d6ae;opacity:1;letter-spacing:.06em;text-shadow:0 1px 0 rgba(0,0,0,.8)}
.book .l-title>div,.book .l-author>div{writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;max-height:100%}
.book .l-mark{top:90%;height:4.5%;width:55%;background:var(--gold);mask:var(--o-ugalz) center/contain no-repeat;filter:none}
@media(max-width:600px){.slot .book,.shelf-board .book{width:50px}.slot,.shelf-board .slot{width:56px;flex-basis:56px;height:220px}.shelf-board{min-height:230px}}
@media print{
 .print-shelf{flex-wrap:wrap;row-gap:12px}
 .print-shelf .slot{width:64px;flex-basis:64px;height:220px}
 .print-shelf .book{width:58px;background:#fff!important;border:1px solid #000;box-shadow:none!important}
 .print-shelf .book .l-title,.print-shelf .book .l-author{color:#000;opacity:1;text-shadow:none}
 .print-shelf .book .l-title>div{background:none;color:#000}
 .print-shelf .book .l-mark{background:#000}
 .print-shelf .book .l-fillet-head:before,.print-shelf .book .l-fillet-tail:before{background:linear-gradient(to bottom,#000 0 1px,transparent 1px 3px,#000 3px 4px);box-shadow:none;filter:none;mask:none}
}
@media(max-width:600px){.page-b .title{padding-right:30px}}

.title .spade{font-size:.58em;vertical-align:.18em;line-height:1;font-family:'Noto Sans Symbols 2','Apple Symbols','Segoe UI Symbol',serif;color:var(--ink);white-space:nowrap}

/* The shelf's inset reserves 16px for the hover lift; the 44px clue key stays usable. */
@media (min-width:601px){
 .notebook>.shelf .slot{height:100%}
 .notebook>.shelf .slot .book{height:min(var(--height),calc(var(--shelf-h) - 75px))}
 .notebook>.shelf .empty{height:min(134px,calc(var(--shelf-h) - 75px))}
 .notebook>.shelf .slot .toss{bottom:calc(min(var(--height), var(--shelf-h) - 75px) - 14px)}
}