/* The reef is assembled in depth. The folio always has one fixed binding. */
:root{--env-garden:1;--book-flight:0;--book-dock:0;--profile-move:0;--profile-paper:0;--profile-avatar:0;--profile-text:0;--profile-links:0;--book-hint:0;--look-x:0;--look-y:0;--coral-grow:0;--coral-cover:0}
.env-garden{opacity:var(--env-garden)}
.env-garden .environment-base{background-image:url(art/v9/water.webp);transform:scale(calc(1 + var(--depth) * .18))}
.env-garden>div:not(.environment-base){position:absolute;background-repeat:no-repeat;background-position:center bottom;pointer-events:none;transform-origin:50% 70%}
.garden-far{inset:3% -18% -8%;background:url(art/v9/far-reef.webp) center bottom/100% 100%;opacity:.68;transform:scale(calc(1 + var(--depth) * .4))}
.garden-distant{bottom:-10%;width:35%;height:102%;background-size:contain;opacity:.36;filter:blur(1px);transform:scale(calc(1 + var(--depth) * .55))}
.distant-a{left:13%;background-image:url(art/v9/coral-right.webp);rotate:8deg}.distant-b{right:10%;background-image:url(art/v9/coral-left.webp);rotate:-8deg}
.garden-canopy{top:-58%;width:50%;height:110%;background-size:contain;opacity:.62;transform:scale(calc(1 + var(--depth) * 1.2));transform-origin:center center!important}
.canopy-a{left:-19%;background-image:url(art/v9/coral-left.webp);rotate:135deg}.canopy-b{right:-20%;background-image:url(art/v9/coral-right.webp);rotate:-133deg}
.garden-shelf{bottom:-16%;width:55%;height:57%;background:url(art/v9/far-reef.webp) center bottom/100% 100%;transform:scale(calc(1 + var(--depth) * .85));opacity:.65}.shelf-a{left:-10%}.shelf-b{right:-13%;scale:-1 1}
.garden-middle{bottom:-15%;width:42%;height:111%;background-size:contain;transform:scale(calc(1 + var(--depth) * 1.45))}
.coral-a{left:-8%;background-image:url(art/v9/coral-left.webp)}.coral-b{right:-9%;background-image:url(art/v9/coral-right.webp)}
.garden-low{bottom:-31%;width:40%;height:84%;background-size:contain;transform:scale(calc(1 + var(--depth) * 1.9));opacity:.94}
.coral-c{left:12%;background-image:url(art/v9/coral-right.webp);rotate:-15deg}.coral-d{right:9%;background-image:url(art/v9/coral-left.webp);rotate:15deg}
.garden-kelp{bottom:-25%;width:27%;height:87%;background-image:url(art/v9/kelp.webp);background-size:contain;transform:scale(calc(1 + var(--depth) * 2.6));transform-origin:50% 90%!important;animation:kelp-current 8s ease-in-out infinite alternate}
.kelp-a{left:-7%}.kelp-b{right:-9%;scale:-1 1;animation-delay:-5s;animation-duration:11s}
.garden-shells{bottom:-13%;width:27%;height:38%;background-image:url(art/v9/shells.webp);background-size:contain;transform:scale(calc(1 + var(--depth) * 2.8))}.shells-a{left:22%}.shells-b{right:15%;scale:.7;opacity:.8}
.garden-caustics{inset:0;background:radial-gradient(ellipse at 62% 10%,#ffffff70,transparent 50%),radial-gradient(ellipse at 40% 75%,#e9ffef60,transparent 40%);mix-blend-mode:screen;animation:sea-shimmer 9s ease-in-out infinite alternate}
@keyframes kelp-current{from{rotate:-2deg}to{rotate:2.5deg}}@keyframes sea-shimmer{from{opacity:.4;translate:-1% 0}to{opacity:.9;translate:1% 1%}}
.opening{color:#164c63;text-shadow:0 2px 22px #efffffcc}.dive-cue{background:linear-gradient(#367b8c,transparent)}.ocean-shade{background:linear-gradient(#174963,#367994)}.dive-iris{display:none}
/* Paper first; face second; then it settles into its place for the text. */
.profile-card{background:none;isolation:isolate}.profile-card:before{content:'';position:absolute;inset:0;background:url(art/v7/paper.webp) center/100% 100% no-repeat;opacity:var(--profile-paper);z-index:-1;pointer-events:none}
.portrait{opacity:var(--profile-avatar);transform:translateX(calc((1 - var(--profile-move)) * 23vw)) scale(calc(.82 + var(--profile-move) * .18));will-change:transform}.portrait figcaption{opacity:var(--profile-text)}
.intro-copy>p,.intro-copy>h1,.intro-copy>.turn-link{opacity:var(--profile-text);transform:translateY(calc((1 - var(--profile-text)) * 15px))}.intro-copy>.social-links{opacity:var(--profile-links);transform:translateY(calc((1 - var(--profile-links)) * 12px))}
/* Transparent branches rise from the perimeter. A textured current closes their gaps. */
.coral-wipe{inset:0;transform:none;overflow:hidden;contain:paint;opacity:var(--wipe-opacity)}
.coral-current{position:absolute;inset:0;background:url(art/v9/coral-left.webp) 20% 65%/65% 170% repeat-x,url(art/v9/coral-right.webp) 80% 50%/80% 180% repeat-x,url(art/v9/water.webp) center/cover;opacity:var(--coral-cover);filter:blur(1px)}
.coral-sprig{position:absolute;width:58vw;height:138vh;bottom:-40vh;left:calc(-40vw + var(--i) * 11vw);background:url(art/v9/coral-left.webp) center bottom/contain no-repeat;transform-origin:center bottom;transform:translateY(calc((1 - var(--coral-grow)) * 110vh)) scale(calc(.6 + var(--coral-grow) * .9)) rotate(calc(-20deg + var(--i) * 3deg));filter:drop-shadow(0 6px 12px #23596a22)}
.coral-sprig:nth-child(2n){background-image:url(art/v9/coral-right.webp);height:118vh;bottom:-26vh;transform:translateY(calc((1 - var(--coral-grow)) * 115vh)) scale(calc(.65 + var(--coral-grow) * 1.1)) rotate(calc(22deg - var(--i) * 3deg))}
.coral-sprig:nth-child(3n){opacity:.85;filter:blur(.6px);bottom:-34vh}
/* Physical cover and flyleaves: the hinge becomes the centre of the open folio. */
.book-object{inset:auto;left:50%;top:4%;width:calc(32% + var(--book-open) * 18%);height:92%;z-index:3;opacity:calc(1 - var(--book-pages));perspective:350vw;transform:translateX(calc((1 - var(--book-open)) * -50% + (1 - var(--book-flight)) * 12vw)) translateY(calc((1 - var(--book-flight)) * 12vh)) scale(calc(.12 + var(--book-flight) * .88)) rotateY(calc((1 - var(--book-flight)) * -25deg + var(--look-x) * (1 - var(--book-open)) * 2deg)) rotateX(calc((1 - var(--book-flight)) * 30deg)) rotateZ(calc((1 - var(--book-flight)) * 5deg)) skewX(calc((1 - var(--book-flight)) * 12deg));transform-origin:50% 50%}
.book-cover{inset:0;width:100%;height:100%;transform:rotateY(calc(var(--book-open) * -180deg));filter:none;z-index:4;transform-origin:0 50%}.cover-front{background-image:url(art/v8/cover.webp)}.cover-back{background:#d9c8a0 url(art/v9/parchment.webp) center/100% 100%;border:4px solid #365d68;box-shadow:inset -15px 0 15px #5d4d3b33}
.book-underleaves{inset:0;transform:none;opacity:1;width:100%;height:100%;background:#d7c6a2 url(art/v9/parchment.webp) center/100% 100%;border-radius:3px 7px 7px 3px;box-shadow:3px 2px #a89a7e,5px 4px #e7d8b8,7px 6px #a89a7e,9px 8px #365966}
.book-mini-spread{position:absolute;inset:0;transform-style:preserve-3d;z-index:2}.book-mini-spread b{position:absolute;inset:0;background:#e7d8b7 url(art/v9/parchment.webp) center/100% 100%;transform-origin:0 50%;box-shadow:inset 14px 0 15px #6f5c3c22;transform:rotateY(calc(var(--book-open) * -174deg))}.book-mini-spread b:nth-child(2){transform:rotateY(calc(var(--book-open) * -130deg - var(--book-dock) * 46deg))}.book-mini-spread b:nth-child(3){transform:rotateY(calc(var(--book-open) * -85deg - var(--book-dock) * 93deg))}.book-mini-spread b:nth-child(4){transform:rotateY(calc(var(--book-open) * -40deg - var(--book-dock) * 139deg))}
.book-emerging-tab{position:absolute;left:2%;top:-4%;width:35%;height:98%;z-index:5;background:url(art/v9/bookmark.webp) center/contain no-repeat;opacity:calc(var(--bookmark) * (1 - var(--book-pages)));transform:translateY(calc((1 - var(--bookmark)) * 20%))}
.book-scroll-note{left:-10%;bottom:-9%;width:120%;padding:0;background:none;border-radius:0;opacity:var(--book-hint);font:clamp(15px,1.2vw,28px)/1.6 var(--hand);letter-spacing:.09em;text-shadow:0 1px 14px #f6ffffdd;display:flex;flex-direction:column;align-items:center;gap:9px}
.book-scroll-note span{color:#245d6a;background:linear-gradient(100deg,#174f62 15%,#397e8d 35%,#fbfff3 49%,#397e8d 63%,#174f62 85%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:book-invitation 3.2s ease-in-out infinite}
.book-scroll-note i{width:9px;height:9px;border-right:1.5px solid #2c6978;border-bottom:1.5px solid #2c6978;rotate:45deg;animation:book-down 2.4s ease-in-out infinite}
@keyframes book-invitation{0%,100%{background-position:100% 50%;opacity:.65}55%{background-position:0 50%;opacity:1}}@keyframes book-down{0%,100%{translate:0 -2px;opacity:.4}55%{translate:0 5px;opacity:1}}
/* One continuous leather board, two leaves, one centre binding. */
.catalog-layout{position:absolute;inset:4% 0;display:grid;grid-template-columns:50% 50%;gap:0;height:92%;z-index:4;opacity:var(--book-pages);transform:none;perspective:350vw;overflow:visible;isolation:isolate}
.catalog-layout:before{content:'';position:absolute;inset:0;z-index:-2;background:url(art/v9/parchment.webp) left center/50% 100% no-repeat,url(art/v9/parchment.webp) right center/50% 100% no-repeat,#d9c9a5;outline:5px solid #3c5960;border-radius:6px 12px 11px 7px;box-shadow:0 3px #a7926c,0 6px #ebdbb7,0 9px #8b7d5e,0 12px #d0bd95,0 15px #36535c,0 25px 35px #193f5155}
.catalog-layout:after{content:'';position:absolute;left:calc(50% - 20px);width:40px;top:0;bottom:0;z-index:8;background:linear-gradient(90deg,transparent,#7d684129 26%,#54452e6b 46%,#dfcd9caa 51%,#65543a55 55%,transparent 100%);pointer-events:none}
.catalog-person{grid-column:1;grid-row:1;z-index:6;margin:0;padding:4% 15% 10%;background:none;border:0;box-shadow:none;border-radius:0;filter:none;opacity:1;transform:none;gap:7px;min-height:0}
.character-window{position:relative;flex:1;min-height:120px;max-height:none;width:100%;margin:0;background:none;box-shadow:none;border-radius:0;overflow:visible}.bookmark-frame{position:absolute;inset:10% 10% -2%;background:url(art/v9/bookmark.webp) center/100% 100% no-repeat;opacity:.8}.character-window img{inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(1px 6px 7px #244e632e)}
.person-caption{padding:0;background:none;border-radius:0;margin:0}.person-caption h2{font-size:clamp(28px,3vw,72px)}.person-caption p{display:none}
.catalog-person .social-links{background:none;padding:0;gap:2px;border-radius:0;max-width:400px}.catalog-person .social-platform>div{grid-template-columns:1fr 1fr;gap:8px}.catalog-person .social-links a{min-height:40px;font-size:clamp(12px,1vw,24px);gap:7px;padding:4px 0;justify-content:center}.catalog-person .platform-logo{width:23px;height:23px}
.catalog-inner{grid-column:2;grid-row:1;z-index:7;padding:8% 8% 7%;height:100%;opacity:1;transform:none;transform-origin:left center;background:none;border:0;box-shadow:none;border-radius:0;filter:none;perspective:none;isolation:isolate;color:#244653}
.catalog-inner:before{inset:0;background:radial-gradient(ellipse at 52% 50%,#fff4dbaa 35%,#fff4db33 70%,transparent 90%);border:0;border-radius:0;box-shadow:none;filter:none;z-index:-1}.catalog-inner:after{display:none}
.catalog-heading{margin-bottom:4px;gap:6px}.catalog-heading h2{font-size:clamp(27px,2.4vw,60px)}.catalog-heading h2 em{font-size:.6em}.hand-caption{font-size:clamp(10px,.8vw,18px)}
.random-button{padding:8px 10px;background:#dedcc655;border:1px solid #98a6a066;box-shadow:inset 0 0 10px #fff8df88;border-radius:4px 13px 5px 10px;font-size:clamp(13px,1vw,24px)}
.notebook-tools{flex-direction:column;align-items:stretch;gap:3px}.tabs{gap:6px}.tabs button{font-size:clamp(13px,1vw,24px);padding:4px 8px;min-height:34px}.tabs button[aria-pressed=true]{background:#aebbac28;box-shadow:inset 0 -2px #62818a}
.search-wrap{width:100%;max-width:none;min-width:0;flex:none;background:#fff9e842;border-radius:4px;box-shadow:inset 0 -1px #8fa39a88}.search-wrap input{height:34px;font-size:clamp(13px,1vw,24px)}
.page-topline{padding-top:7px}.song-list{column-gap:5%;grid-template-rows:repeat(var(--rows,10),minmax(44px,auto))}.song-row{grid-template-columns:23px minmax(0,1fr) 29px 40px;gap:3px;min-height:44px;padding:4px 0}.song-name{font-size:clamp(13px,1vw,30px);color:#173b49}.song-singer{font-size:clamp(10px,.76vw,20px);color:#3e5a60}.song-number{font-size:18px}.favorite{width:29px}.favorite:before{width:26px;height:29px}.select-song{font-size:12px;min-height:36px;border-radius:4px 8px 4px 7px;background:#e3e0c633;border-color:#9caa9c88}
.pagination{padding-top:4px;gap:4px}.pagination button{font-size:13px;padding:4px 6px;min-width:35px}.pagination button:not(:disabled):hover{background:#aabdbb33}.page-selector{gap:4px;flex-wrap:wrap}.page-selector button{min-width:28px;width:28px}.page-selector #page-jump{width:36px}.page-selector button[aria-current=page]{background:#4c737d}.local-note{color:#667d79;font-size:10px;margin-top:3px}
/* The complete right leaf rotates at the binding, in either direction. */
.full-page-turn,.page-underlay{position:absolute;z-index:20;pointer-events:none;transform-style:preserve-3d;transform-origin:0 50%}
.full-page-turn{animation:bound-page-forward .9s cubic-bezier(.45,.05,.22,1) both}.full-page-turn.backward{animation-name:bound-page-backward}
.full-page-turn>.catalog-inner,.page-underlay>.catalog-inner{position:absolute;inset:0;width:100%;height:100%;opacity:1;transform:none;filter:none;backface-visibility:hidden;background:#dfcc9f url(art/v9/parchment.webp) center/100% 100%;box-shadow:inset 16px 0 18px #65503822,3px 3px 8px #59473133}
.full-page-turn button:disabled,.page-underlay button:disabled{opacity:1}.whole-page-back{position:absolute;inset:0;background:#dfcc9f url(art/v9/parchment.webp) center/100% 100% no-repeat;transform:rotateY(180deg);backface-visibility:hidden;box-shadow:inset -18px 0 22px #65503844}
.full-page-turn:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#4c443a44,transparent 16%,#816a4722 85%,#fff6d899);pointer-events:none;backface-visibility:hidden}
.page-underlay{z-index:19;transform:none}
@keyframes bound-page-forward{0%{transform:rotateY(0);opacity:1}80%{opacity:1}100%{transform:rotateY(-180deg);opacity:0}}
@keyframes bound-page-backward{0%{transform:rotateY(-180deg);opacity:1}100%{transform:rotateY(0);opacity:1}}
.whole-page-arrive>.catalog-heading{animation:ink-arrive .3s .45s both}.whole-page-arrive>.notebook-tools{animation:ink-arrive .3s .52s both}.whole-page-arrive>.page-topline{animation:ink-arrive .3s .58s both}.whole-page-arrive .song-row{animation:ink-arrive .28s both;animation-delay:calc(.6s + var(--entry) * .018s)}
.static-ocean .book-scroll-note *,.static-ocean .full-page-turn,.static-ocean .whole-page-arrive *{animation:none!important}
@media(min-width:1201px){.notebook-tools{flex-direction:row;flex-wrap:nowrap;align-items:center}.search-wrap{width:52%}.page-selector #page-jump-form button{width:auto;min-width:42px;white-space:nowrap}.song-singer{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}
@media(min-width:801px) and (max-width:1200px){.catalog-person{padding:5% 12%}.catalog-person .social-links a{font-size:12px}.catalog-inner{padding:5% 7%}.catalog-heading h2{font-size:26px}.catalog-heading h2 em{display:none}.song-list{column-gap:5%}.song-row{grid-template-columns:21px minmax(0,1fr) 28px 36px;gap:2px}.song-name{font-size:13px}.song-number{font-size:15px}.pagination{gap:1px}.pagination button{font-size:12px;min-width:30px;padding-inline:3px}.page-selector #page-jump-form{font-size:11px}.page-selector button{min-width:25px;width:25px}}
@media(min-width:801px) and (max-height:700px){.catalog-person{padding-block:4%}.character-window{min-height:90px}.catalog-person .social-links a{min-height:30px}.catalog-heading h2{font-size:25px}.catalog-heading .hand-caption{display:none}.person-caption h2{font-size:25px}.book-scroll-note{font-size:14px}.catalog-inner{padding-block:3%}.tabs button,.search-wrap input{min-height:30px;height:30px}.pagination{padding-top:1px}.page-selector button{height:27px}}
@media(min-width:2200px){.song-row{grid-template-columns:39px minmax(0,1fr) 45px 65px;gap:7px;min-height:70px}.song-number{font-size:30px}.song-name{font-size:30px}.song-singer{font-size:20px}.favorite{width:45px}.favorite:before{width:36px;height:40px}.select-song{font-size:22px;min-height:48px}.catalog-person .social-links{max-width:850px}.catalog-person .social-links a{min-height:65px}.catalog-person .platform-logo{width:36px;height:36px}.tabs button,.search-wrap input{min-height:55px;height:55px}.pagination button{font-size:23px;min-width:55px}.page-selector{gap:10px}.page-selector button{min-width:40px;width:40px;height:45px}.local-note{font-size:18px}}
@media(max-width:800px){.env-garden{display:none}.opening{background:linear-gradient(#c1edeb22,#d6f4e433),url(art/v9/water-mobile.webp) center/cover;color:#164c63}.profile-card:before{opacity:1}.portrait{opacity:1;transform:none;will-change:auto}.portrait figcaption,.intro-copy>p,.intro-copy>h1,.intro-copy>.turn-link,.intro-copy>.social-links{opacity:1;transform:none}.catalog-layout{position:relative;inset:auto;height:auto;display:flex;perspective:none;opacity:1;overflow:visible}.catalog-layout:before,.catalog-layout:after{display:none}.catalog-inner{opacity:1;transform:none;filter:none;padding:32px 24px;background:#f3ead3;border:1px solid #c6bd9e;border-radius:8px 17px 5px 12px}.catalog-inner:before{inset:5px;background:none;border:1px solid #a9a28744}.catalog-person{opacity:1;transform:none;padding:22px;display:grid;grid-template-columns:100px 1fr;gap:12px;background:#f2eddc}.catalog-person .character-window{height:220px;min-height:0;max-height:none}.catalog-person .character-window img{inset:0;width:100%;height:100%}.catalog-person .bookmark-frame{background-size:100% 100%}.person-caption h2{font-size:30px}.catalog-person .social-links{grid-column:1/-1;padding:0;grid-template-columns:1fr 1fr;gap:10px;max-width:none}.catalog-person .social-platform>div{display:flex;flex-direction:column}.catalog-person .social-links a{font-size:13px;min-height:44px;justify-content:flex-start}.catalog-person .platform-logo{width:24px;height:24px}.song-row{grid-template-columns:23px minmax(0,1fr) 34px 46px;min-height:75px;padding:12px 0}.song-name{font-size:16px}.favorite{width:34px}.select-song{min-height:44px}.search-wrap{max-width:100%}.search-wrap input{height:44px}.tabs button{min-height:44px}.full-page-turn,.page-underlay{display:none}.whole-page-arrive *{animation:none!important}.catalog-inner .random-button{font-size:13px}.book-object{display:none}.profile-card{background:none}.page-selector button{width:30px;height:40px}.pagination button{min-height:44px;font-size:12px}.catalog-heading h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){.book-scroll-note *,.full-page-turn,.whole-page-arrive *{animation:none!important}}