/* One pair of bound leaves. The character bookmark is outside this volume. */
:root{--book-ink:0;--book-paper-visible:hidden;--bookmark:0}
.catalog-panel{--folio-width:min(70vw,calc((100svh - 205px)*1.64),2400px);--bookmark-width:clamp(110px,12vw,290px);--folio-font:clamp(14px,1.04vw,25px)}
.bound-book{position:absolute;left:50%;top:48%;width:var(--folio-width);aspect-ratio:1.64;perspective:330vw;transform-style:preserve-3d;transform-origin:75% 50%;transform:translate(-50%,-50%) translateX(calc((1 - var(--book-open))*-25% + (1 - var(--book-flight))*15vw)) translateY(calc((1 - var(--book-flight))*13vh)) scale(calc(.16 + var(--book-flight)*.84)) scaleX(calc(.82 + var(--book-open)*.18)) rotateX(calc((1 - var(--book-flight))*28deg)) rotateY(calc((1 - var(--book-flight))*-24deg + var(--look-x)*(1 - var(--book-open))*1.4deg)) rotateZ(calc((1 - var(--book-flight))*14deg)) skewX(calc((1 - var(--book-flight))*32deg))}
.book-object{position:absolute;inset:0;width:100%;height:100%;opacity:1;transform:none;perspective:none;transform-style:preserve-3d;z-index:4;pointer-events:none}
.book-cover{position:absolute;inset:0 0 0 50%;width:50%;height:100%;transform-origin:0 50%;transform:translateZ(2px) rotateY(calc(var(--book-open)*-180deg));transform-style:preserve-3d;filter:none;background:none;backface-visibility:hidden}
.cover-front{position:absolute;inset:0;background:#123b4c url(art/v8/cover.webp) 50% 51%/104.8% 110.2% no-repeat;border-radius:5px 12px 12px 5px;overflow:hidden;backface-visibility:hidden;box-shadow:3px 5px 6px #17334055}
.cover-front:after{content:'';position:absolute;inset:0;background:linear-gradient(112deg,transparent 28%,#f0fff329 45%,#fff7de55 49%,transparent 66%);background-size:260% 100%;animation:cover-lustre 8s ease-in-out infinite;pointer-events:none}
.catalog-layout{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:1;transform:none;perspective:none;transform-style:preserve-3d;isolation:auto;overflow:visible;z-index:3}
.catalog-layout:before,.catalog-layout:after{display:none}
.catalog-inner{position:absolute;inset:0;width:100%;height:100%;padding:0;display:block;background:none;border:0;border-radius:0;box-shadow:none;filter:none;opacity:1;transform:none;perspective:none;transform-style:preserve-3d;isolation:auto;color:#284a53}
.catalog-inner:before,.catalog-inner:after{display:none}
.folio-page{position:absolute;top:.65%;width:49.6%;height:98.7%;display:flex;flex-direction:column;min-width:0;padding:3% 3.8% 2.5%;background:#e7d5af url(art/v9/parchment.webp) 20% 50%/260% 145%;border-radius:3px;visibility:var(--book-paper-visible);backface-visibility:hidden;transform-style:preserve-3d;box-shadow:0 2px #af986e,0 4px #d8c5a0,0 6px #284d57,0 16px 26px #17394535}
.folio-left{right:50%;transform-origin:right center;transform:rotateY(calc((1 - var(--book-open))*180deg));box-shadow:inset -18px 0 24px #725b422b,0 2px #af986e,0 4px #d8c5a0,0 6px #284d57,0 16px 26px #17394535}
.folio-right{left:50%;background-position:80% 50%;transform-origin:left center;box-shadow:inset 18px 0 24px #725b4233,0 2px #af986e,0 4px #d8c5a0,0 6px #284d57,0 16px 26px #17394535}
.folio-page:after{content:'';position:absolute;top:0;bottom:0;width:16px;pointer-events:none;background:linear-gradient(90deg,#4e403b35,transparent);left:0}.folio-left:after{left:auto;right:0;transform:scaleX(-1)}
.folio-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;margin:0 0 8px}
.folio-heading .hand-caption{font:9px/1.4 var(--sans);letter-spacing:.16em;color:#687c79;margin:0 0 5px}.folio-heading h2{font:clamp(23px,1.85vw,42px)/1.2 var(--hand);margin:0;letter-spacing:.08em;font-weight:400;color:#204853}
.folio-edition{font:11px var(--hand);writing-mode:vertical-rl;letter-spacing:.2em;color:#6b7c75}.folio-subtitle{font:clamp(13px,1vw,22px)/1.5 var(--hand);margin:0;color:#5a726e}
.folio-tools{height:34px;min-height:34px;margin:0;flex:none;border:0;border-bottom:1px solid #637e6a44;border-radius:0;background:none;box-shadow:none}
.folio-tools.tabs{display:flex;gap:12px;align-items:stretch}.folio-tools.tabs button{font:clamp(12px,.85vw,19px)/1.3 var(--hand);height:auto;min-height:0;padding:4px 0;border-radius:0;background:none;box-shadow:none;white-space:nowrap;color:#516c68}.folio-tools.tabs button[aria-pressed=true]{color:#224e5b;box-shadow:0 1px #315f6a}.folio-tools.tabs span{font:10px var(--sans);margin-left:3px}
.folio-tools.search-wrap{display:flex;flex-direction:row;align-items:center;gap:7px;min-width:0;width:100%;max-width:none;padding:0}.folio-tools.search-wrap input{font:clamp(12px,.85vw,19px) var(--hand);height:100%;min-height:0;padding:0;outline-offset:3px}.folio-tools .icon{font-size:15px;color:#597b7c}.folio-tools kbd{font-size:10px}
.folio-heading .random-button{min-height:32px;font:clamp(12px,.85vw,19px) var(--hand);padding:6px 9px;gap:6px;border:1px solid #7a978267;background:#f1e6c766;border-radius:3px 10px 4px 9px;box-shadow:inset 0 1px #fff6df99}.folio-heading .pearl-mark{width:12px;height:12px}
.folio-page .page-topline{font:10px/1.3 var(--sans);padding:9px 0 5px;flex:none;min-height:28px;color:#6a7d75}
.folio-rows{position:relative;flex:1;min-height:0;font-size:var(--folio-font);display:grid;grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:repeat(var(--rows,8),minmax(min-content,1fr));overflow:hidden}
.folio-page .song-row{display:grid;grid-template-columns:26px minmax(0,1fr) 27px 38px;align-items:center;gap:5px;min-height:0;padding:4px 0;border-bottom:1px solid #75866b2b;border-radius:0;background:none;transition:background .15s}.folio-page .song-row:hover{background:#8fa89c1c}
.folio-page .song-number{font:15px/1.4 var(--latin);padding:0;align-self:center;color:#7c8e7d}.folio-page .song-info{min-width:0}.folio-page .song-name{font:var(--folio-font)/1.3 var(--hand);font-weight:400;white-space:normal;overflow-wrap:anywhere;text-overflow:clip;overflow:visible;color:#123744}.folio-page .song-singer{font:clamp(10px,.7vw,16px)/1.3 var(--sans);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-top:2px;color:#3c514e}
.folio-page .favorite{height:30px;width:27px;font-size:16px;border:0;padding:0;background:none}.folio-page .favorite:before{width:21px;height:24px}.folio-page .select-song{height:29px;min-height:29px;font:11px var(--hand);padding:3px;border:1px solid #9bab9060;border-radius:3px 7px 3px 7px;box-shadow:none;background:#f3e9cf45}.folio-page .select-song:hover{background:#c5d4be99}.folio-page .is-selected .select-song{background:#356774;color:#fff}
.folio-footer{flex:none;min-height:65px;padding-top:8px}.folio-footer .pagination{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;padding:0;margin:0;gap:5px}.folio-footer .pagination button{min-height:28px;min-width:0;font:clamp(11px,.8vw,18px) var(--hand);padding:3px 6px;white-space:nowrap;border-radius:3px}.folio-footer :is(#page-count,.folio-page-count){font:clamp(17px,1.3vw,27px) var(--latin);margin-left:auto;min-width:0}
.folio-pager-row{display:flex;align-items:center;justify-content:space-between;gap:6px}:is(#page-numbers,.folio-page-numbers){display:flex;gap:1px;align-items:center}:is(#page-numbers,.folio-page-numbers) button{min-width:22px;height:27px;padding:2px;border:0;border-radius:50%;background:none;font:clamp(11px,.75vw,17px) var(--hand)}:is(#page-numbers,.folio-page-numbers) button[aria-current=page]{background:#4d747b;color:#fff}:is(#page-numbers,.folio-page-numbers) span{font-size:10px;color:#708077}
.folio-footer :is(#page-jump-form,.folio-page-jump-form){display:flex;justify-content:flex-start;gap:4px;align-items:center;font:10px var(--sans);color:#6b7b71;margin-top:4px}.folio-footer :is(#page-jump,.folio-page-jump){width:32px;height:23px;font:11px var(--sans);background:#f7edd544;border:0;border-bottom:1px solid #70877555;color:#284a53;text-align:center;appearance:textfield}.folio-footer :is(#page-jump-form,.folio-page-jump-form) button{border:0;background:none;white-space:nowrap;font:11px var(--hand);padding:4px 8px;color:#355d65}.folio-footer .local-note{margin-top:9px;text-align:right;font:9px/1.4 var(--sans);color:#788477}
.folio-page .empty-state{font:17px var(--hand);padding:15px;grid-row:1/-1}.folio-page .empty-state small{font:12px/1.6 var(--hand)}
/* Ink is revealed in the order the leaf settles, without fading the paper. */
.folio-page>.folio-heading,.folio-page>.folio-tools,.folio-page>.page-topline{opacity:clamp(0,calc(var(--book-ink)*3),1);transform:translateY(calc((1 - clamp(0,var(--book-ink)*3,1))*4px))}
.folio-page .song-row{--reveal:clamp(0,calc(var(--book-ink)*2.5 - var(--entry)*.07),1);opacity:var(--reveal);transform:translateY(calc((1 - var(--reveal))*5px))}.folio-footer{opacity:clamp(0,calc(var(--book-ink)*3 - 1.7),1)}
.catalog-person.loose-bookmark{position:absolute;left:calc(50% - var(--folio-width)/2 - var(--bookmark-width) - 10px);top:48%;width:var(--bookmark-width);height:min(calc(var(--folio-width)/1.64*.84),calc(var(--bookmark-width)*3.35));display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 calc(var(--bookmark-width)*.08) 15px;margin:0;background:none;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(7px 12px 9px #102d4544);z-index:30;opacity:clamp(0,calc(var(--bookmark)*4),1);transform:translateY(-48%) translateX(calc((1 - var(--bookmark))*(var(--folio-width)/2 + var(--bookmark-width) + 10px))) translateY(calc((1 - var(--bookmark))*-40px)) rotate(calc(-3deg*var(--bookmark)));transform-origin:50% 20%;isolation:isolate}
.loose-bookmark:before{content:'';position:absolute;inset:11% 4% 0;z-index:-1;background:linear-gradient(105deg,#d9e8de,#f6efda 37%,#dbe9e2);clip-path:polygon(11% 0,89% 0,100% 5%,100% 100%,50% 95%,0 100%,0 5%);box-shadow:inset 0 0 0 2px #96afa4}.loose-bookmark:after{content:'';position:absolute;inset:14% 9% 8%;border:1px solid #829e9755;z-index:-1;pointer-events:none}
.loose-bookmark .character-window{position:relative;width:125%;flex:1;min-height:0;height:auto;margin:0;opacity:1;transform:none;background:none;box-shadow:none;border-radius:0;overflow:visible}.loose-bookmark .bookmark-frame{display:none}.loose-bookmark .character-window img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(2px 4px 2px #203e5425)}
.loose-bookmark .person-caption{position:relative;opacity:1;transform:none;margin:4px 0 6px;padding:0;background:none;text-align:center}.loose-bookmark .person-caption h2{font:clamp(20px,1.8vw,34px)/1.1 var(--hand)}.loose-bookmark .person-caption em{font:1.13em var(--latin)}.loose-bookmark .person-caption p{display:none}
.loose-bookmark .social-links{display:flex;flex-direction:column;gap:3px;opacity:1;transform:none;background:none;padding:0;margin:0 0 13px;width:100%;max-width:none}.loose-bookmark .social-platform>div{display:grid;grid-template-columns:1fr;gap:0}.loose-bookmark .social-links a{min-height:23px;font:clamp(10px,.75vw,16px)/1.3 var(--hand);gap:5px;padding:4px 2px;justify-content:center;border-radius:0;white-space:nowrap;background:none;box-shadow:none;border-bottom:1px solid #92aea522}.loose-bookmark .social-links a:hover{background:#cee0d5;transform:translateX(2px)}.loose-bookmark .platform-logo{width:14px;height:14px}
.book-scroll-note{position:absolute;left:50%;top:calc(100% + 15px);bottom:auto;width:50%;text-align:center;z-index:12;opacity:var(--book-hint);font:clamp(13px,1vw,23px)/1.5 var(--hand);gap:5px;padding:0;pointer-events:none}.book-scroll-note span{text-shadow:0 1px 2px #faffed,0 0 9px #faffed}.book-scroll-note i{width:6px;height:6px}
/* Front and back carry actual old/new content, and remain opaque throughout. */
.book-turn,.book-turn-underlay{position:absolute;pointer-events:none;transform-style:preserve-3d}.book-turn{z-index:21}.book-turn-underlay{z-index:19}.book-slice{position:absolute;left:0;top:0;height:100%;transform-origin:0 50%;transform-style:preserve-3d}.book-slice-front,.book-slice-back{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden}.book-slice-back{transform:rotateY(180deg)}
.book-slice .folio-page,.book-turn-underlay .folio-page{position:absolute;top:0;left:0;right:auto;width:100%;height:100%;visibility:visible;transform:none;border-radius:0;box-shadow:none;backface-visibility:hidden}.book-slice .folio-page>*,.book-turn-underlay .folio-page>*,.book-slice .song-row,.book-turn-underlay .song-row{opacity:1!important;transform:none!important;animation:none!important}.book-slice button:disabled,.book-turn-underlay button:disabled{opacity:1}
.book-slice:after{content:'';position:absolute;inset:0;background:#302a22;opacity:var(--curl-shade,0);pointer-events:none;transform:translateZ(.3px);backface-visibility:hidden}.book-turn-shadow{position:absolute;inset:0;z-index:18;pointer-events:none;background:linear-gradient(90deg,transparent 22%,#352b2422 44%,#352b2455 50%,#352b2422 56%,transparent 78%);opacity:0}
.static-ocean .bound-book{transform:translate(-50%,-50%)}.static-ocean .cover-front:after{animation:none}
@keyframes cover-lustre{0%,18%{background-position:120% 50%;opacity:0}35%,57%{opacity:.65}75%,100%{background-position:-20% 50%;opacity:0}}
@media(min-width:1800px){.folio-heading{min-height:70px;margin-bottom:12px}.folio-heading .hand-caption{font-size:12px}.folio-tools{height:42px;min-height:42px}.folio-tools.tabs span{font-size:13px}.folio-page .page-topline{font-size:12px;min-height:35px;padding-top:12px}.folio-page .song-row{grid-template-columns:34px minmax(0,1fr) 36px 50px;gap:7px}.folio-page .song-number{font-size:21px}.folio-page .favorite{width:36px;height:38px}.folio-page .favorite:before{width:27px;height:30px}.folio-page .select-song{height:34px;min-height:34px;font-size:14px}.folio-footer{min-height:85px;padding-top:10px}.folio-footer .pagination button{min-height:33px}.folio-footer :is(#page-jump-form,.folio-page-jump-form){font-size:12px}.folio-footer :is(#page-jump,.folio-page-jump){height:28px;width:38px;font-size:13px}.folio-footer :is(#page-jump-form,.folio-page-jump-form) button{font-size:13px}.folio-footer .local-note{font-size:11px}:is(#page-numbers,.folio-page-numbers) button{min-width:29px;height:32px}.loose-bookmark .social-links a{min-height:29px}.loose-bookmark .platform-logo{width:18px;height:18px}}
@media(min-width:801px) and (max-width:1100px){.catalog-panel{--folio-width:72vw}.folio-page{padding:4% 3% 2.5%}.folio-heading{min-height:42px;margin-bottom:5px}.folio-heading .hand-caption{font-size:7px;letter-spacing:.05em}.folio-heading h2{font-size:22px}.folio-edition{display:none}.folio-subtitle{font-size:11px}.folio-heading .random-button{font-size:10px;padding:5px;gap:4px;min-height:28px}.folio-heading .pearl-mark{width:10px;height:10px}.folio-page .song-row{grid-template-columns:22px minmax(0,1fr) 24px 32px;gap:3px}.folio-page .song-number{font-size:13px}.folio-page .favorite{width:24px}.folio-page .select-song{font-size:10px}.folio-tools.tabs{gap:8px}.folio-tools.tabs button,.folio-tools.search-wrap input{font-size:11px}.folio-tools kbd{display:none}.folio-pager-row{gap:2px;flex-wrap:wrap}.folio-pager-row .pagination{margin-left:auto}.folio-footer{min-height:71px}.folio-footer .pagination button{padding-inline:3px;font-size:10px}:is(#page-numbers,.folio-page-numbers) button{min-width:20px;height:24px}.folio-footer .local-note{font-size:8px;margin-top:4px}.loose-bookmark .social-links a{font-size:10px}.loose-bookmark .platform-logo{width:12px;height:12px}}
@media(min-width:801px) and (max-height:700px){.catalog-panel{--folio-width:min(70vw,calc((100svh - 165px)*1.75));--bookmark-width:clamp(105px,10vw,160px)}.bound-book{aspect-ratio:1.75}.folio-heading{min-height:36px}.folio-heading .hand-caption{display:none}.folio-page{padding-block:3% 2.5%}.folio-footer{min-height:60px;padding-top:5px}.folio-page .page-topline{padding-top:5px;min-height:23px}.loose-bookmark .person-caption h2{font-size:20px}.loose-bookmark .social-links a{padding:2px;min-height:19px}}
@media(max-width:800px){
 .catalog-panel{--folio-font:15px;padding-bottom:75px;display:flex;flex-direction:column;gap:20px}.bound-book{position:relative;inset:auto;width:100%;aspect-ratio:auto;height:auto;transform:none;perspective:none;order:2}.book-object,.book-scroll-note{display:none}.catalog-layout,.catalog-inner{position:relative;inset:auto;width:100%;height:auto;display:block;perspective:none;transform:none}
 .folio-page{position:relative;inset:auto;right:auto;left:auto;width:100%;height:auto;min-height:0;padding:30px 25px 24px;transform:none;visibility:visible;backface-visibility:visible;margin-bottom:4px;background-size:130% 135%;background-position:center;box-shadow:0 3px #b19d76,0 7px 15px #27475833;transform-style:flat}.folio-page:after{display:none}.folio-heading{min-height:40px}.folio-heading .hand-caption{font-size:9px}.folio-heading h2{font-size:26px}.folio-tools{height:42px;min-height:42px}.folio-tools.tabs button,.folio-tools.search-wrap input{font-size:13px}.folio-page .page-topline{min-height:30px}
 .folio-rows{display:flex;flex-direction:column;overflow:visible;min-height:0;flex:none}.folio-page .song-row{min-height:61px;padding:8px 0;grid-template-columns:24px minmax(0,1fr) 32px 42px;gap:5px;opacity:1;transform:none}.folio-page .song-name{font-size:15px}.folio-page .song-singer{font-size:11px}.folio-page .favorite{width:32px;height:40px}.folio-page .select-song{height:38px;min-height:38px;font-size:12px}.folio-heading,.folio-tools,.page-topline,.folio-footer{opacity:1!important;transform:none!important}.folio-footer{min-height:70px}.folio-pager-row{flex-wrap:wrap}.folio-footer .pagination button{min-height:40px;font-size:12px}:is(#page-numbers,.folio-page-numbers) button{min-width:27px;height:34px;font-size:12px}.folio-footer :is(#page-jump-form,.folio-page-jump-form){font-size:11px}.folio-footer :is(#page-jump,.folio-page-jump){height:30px}.folio-footer .local-note{font-size:10px}
 .catalog-person.loose-bookmark{position:relative;inset:auto;align-self:center;order:1;width:190px;height:390px;transform:rotate(-3deg);opacity:1;padding:0 20px 17px;filter:drop-shadow(4px 8px 6px #183c4933);margin:15px 0 8px;gap:2px}.loose-bookmark .person-caption h2{font-size:25px}.loose-bookmark .character-window{height:auto;min-height:0}.loose-bookmark .social-links{display:flex;gap:1px}.loose-bookmark .social-platform>div{display:grid;grid-template-columns:1fr 1fr;gap:4px}.loose-bookmark .social-links a{font-size:9px;min-height:28px;padding:3px 0;gap:3px}.loose-bookmark .platform-logo{width:12px;height:12px}.book-turn,.book-turn-shadow,.book-turn-underlay{display:none}
}
@media(min-width:2200px){.catalog-person.loose-bookmark{height:min(calc(var(--folio-width)/1.64*.84),calc(var(--bookmark-width)*2.5))}}
@media(prefers-reduced-motion:reduce){.cover-front:after{animation:none}.book-turn,.book-turn-shadow{display:none}}

/* The live jump field and its inert turn copies keep identical number metrics. */
.folio-page-jump{font-variant-numeric:tabular-nums;flex-shrink:0}
.folio-page-jump::-webkit-inner-spin-button,.folio-page-jump::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}