/* Scene direction and tangible book, v8. Each environment owns its depth layers. */
html,body{overflow-anchor:none}
:root{--env-abyss:1;--env-pelagic:0;--env-cove:0;--env-library:0;--depth:0;--cove-depth:0;--ruins-depth:0;--book-pages:0;--bookmark:0;--cover-alpha:1;--iris-opacity:0;--iris-hole:100%;--book-open:0}
.environment{position:absolute;inset:0;overflow:hidden;pointer-events:none}.environment-base{position:absolute;inset:-3%;background-position:center;background-size:cover;background-repeat:no-repeat}
.env-abyss{opacity:var(--env-abyss)}.env-abyss .environment-base{background-image:url(art/v8/abyss.webp);transform:scale(calc(1 + var(--depth) * .6));transform-origin:52% 48%}
.env-pelagic{opacity:var(--env-pelagic)}.env-pelagic .environment-base{background-image:url(art/v7/water.webp);transform:scale(calc(1.05 + var(--progress) * .16))}
.env-cove{opacity:var(--env-cove)}.env-cove .environment-base{background-image:url(art/v8/cove.webp);transform:scale(calc(1 + var(--cove-depth) * .18));transform-origin:48% 48%}
.env-library{opacity:var(--env-library)}.env-library .environment-base{background-image:url(art/v8/library.webp);transform:scale(calc(1.04 + var(--ruins-depth) * .10));transform-origin:50% 53%}
.depth-layer{position:absolute;inset:-2%;background-size:cover;background-repeat:no-repeat;background-position:center;pointer-events:none;transform-origin:52% 48%}
.abyss-mid{background-image:url(art/v7/coral-far.webp);opacity:calc(.48 * (1 - var(--depth)));filter:brightness(.5);transform:scale(calc(.95 + var(--depth) * 1.8))}
.abyss-near{background-image:url(art/v8/abyss-front.webp);transform:scale(calc(1.04 + var(--depth) * 3.8));filter:brightness(.8);opacity:calc(1 - var(--depth) * .8)}
.abyss-dust{position:absolute;inset:0;background:radial-gradient(ellipse at 52% 43%,#9de8e412,transparent 42%);animation:deep-breath 12s ease-in-out infinite alternate}
.cove-middle{inset:40% 15% -15%;background-image:url(art/v7/shells.webp);background-size:contain;background-position:bottom;transform:scale(calc(.9 + var(--cove-depth) * .14));opacity:.55}
.cove-near{background-image:url(art/v8/cove-front.webp);transform:scale(calc(1.06 + var(--cove-depth) * .25));animation:cove-current 11s ease-in-out infinite alternate}
.cove-glimmer{position:absolute;inset:0;background:radial-gradient(ellipse at 65% 10%,#fafcff44,transparent 55%);mix-blend-mode:screen;animation:deep-breath 9s ease-in-out infinite alternate}
.ruins-middle{inset:43% 6% -13%;background-image:url(art/v7/shells.webp);background-size:100% auto;transform:translateY(calc(var(--ruins-depth) * 9%));opacity:.65}
.ruins-near{background-image:url(art/v8/ruins-front.webp);transform:scale(calc(1.1 + var(--ruins-depth) * .19));transform-origin:50% 60%}
.env-pelagic .reef-far{transform:scale(1.02);opacity:.42}.env-pelagic .reef-mid{transform:scale(1.2);opacity:.68}.env-pelagic .shell-ground{opacity:.5}
.surface-light{opacity:calc(.1 + var(--bright) * .52);transform:translateX(calc(var(--env-library) * -25%));transition:transform 1s}.ocean-world{filter:blur(calc(var(--reading-focus) * 7px))}
.dive-iris{position:absolute;inset:-5%;z-index:16;pointer-events:none;opacity:var(--iris-opacity);background:radial-gradient(ellipse at 52% 48%,transparent var(--iris-hole),#062b3d calc(var(--iris-hole) + 9%),#031f32 100%);filter:blur(1px)}
@keyframes deep-breath{from{opacity:.45}to{opacity:1}}@keyframes cove-current{from{rotate:-.35deg}to{rotate:.35deg}}
.profile-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:7% 13%;background-size:100% 100%;gap:6%}.portrait{padding:0;gap:20px}.portrait img{width:min(76%,36svh);max-width:330px;max-height:none;border-width:5px;object-fit:cover}.portrait figcaption{font-size:clamp(13px,1vw,22px);max-width:90%;line-height:1.6;text-align:center}.intro-copy{padding:0}.intro-copy h1{font-size:clamp(68px,6.2vw,180px)}.intro-copy .social-links{max-width:650px}.intro-copy .bio{white-space:normal}.social-links a{background:transparent;box-shadow:none;border-radius:0;border-bottom:1px solid #7a9ba43d;padding:10px 6px;gap:12px}.social-links a:hover{background:#b9dbda22;transform:translateX(3px)}.platform-logo{width:31px;height:31px}.bio{margin-block:18px 26px}.intro-copy .turn-link{margin-top:27px}.turn-link,.random-button,.direct{border-radius:6px 18px 7px 14px}
/* The book occupies the reading area; the independent portrait bookmark is on the right. */
.catalog-layout{grid-template-columns:minmax(0,3.4fr) minmax(0,1fr);gap:2%;transform:none;opacity:var(--book-pages);align-items:stretch}
.catalog-inner{grid-column:1;grid-row:1;padding:clamp(25px,3.2vh,80px) clamp(26px,2.4vw,85px) clamp(20px,2.6vh,60px);isolation:isolate;box-shadow:0 15px 40px #10354a50;position:relative;border-radius:5px 13px 12px 4px;background:linear-gradient(90deg,#e1d4b6 0%,#f6efd9 3%,#f3ebd4 46%,#c6b891 49.5%,#b0a07a 50%,#e8ddbf 51%,#f8f1dc 54%,#eee2c4 97%,#d1c09b);border:1px solid #ab9872}
.catalog-inner:before{inset:8px 8px 7px;z-index:-1;background:repeating-linear-gradient(0deg,#8d755907 0,#8d755907 1px,transparent 1px,transparent 4px);border:1px solid #ac93673b;filter:none;border-radius:3px 9px 8px 2px;box-shadow:0 2px #d1c19d,0 4px #e4d5b7,0 6px #b7a384}
.catalog-inner:after{content:'';position:absolute;top:0;bottom:0;left:50%;width:3%;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#5f513b22 42%,#fff7dc55 55%,transparent);pointer-events:none;z-index:-1}
.catalog-heading{margin-bottom:12px}.catalog-heading h2{font-size:clamp(30px,2.6vw,70px)}.catalog-heading h2 em{font-size:.65em}.random-button{background:#dee7d9;box-shadow:inset 0 0 0 1px #90a6a452,0 3px 5px #a6967620}.notebook-tools{gap:10px}.tabs button[aria-pressed=true]{background:#d5ded140}.search-wrap{max-width:44%;background:#fffaf16e}.song-list{gap:0 7%;grid-template-rows:repeat(var(--rows,10),minmax(48px,1fr))}.song-row{grid-template-columns:25px minmax(0,1fr) 34px 45px;min-height:48px;gap:5px;padding:4px 0}.song-name{font-size:clamp(14px,1.12vw,31px)}.song-singer{font-size:clamp(10px,.73vw,22px)}.song-number{font-size:18px}.songs-scroll{padding-right:3px}.select-song{background:#e0e6d5;border-color:#a5b1a1;box-shadow:none}.pagination{padding-top:8px}.page-selector{margin-top:0}.local-note{margin-top:4px}
.catalog-person{grid-column:2;grid-row:1;position:relative;z-index:4;margin:2% 0;padding:20px 7% 24px;background:#edf2e5;box-shadow:0 9px 26px #143e4c38;border:1px solid #c2d9d5;border-radius:12px 12px 32px 5px;transform:translateX(calc((1 - var(--bookmark)) * -170%)) rotate(calc((1 - var(--bookmark)) * -7deg));opacity:var(--bookmark);transform-origin:50% 20%;overflow:visible;gap:8px}
.bookmark-ribbon{width:24px;height:80px;background:linear-gradient(90deg,#9fc8cd,#dfefdf 50%,#91bcc6);position:absolute;top:-24px;right:20px;clip-path:polygon(0 0,100% 0,100% 100%,50% 85%,0 100%);z-index:2;box-shadow:1px 2px 5px #164b6033}
.character-window{border-radius:3px 25px 5px 18px;box-shadow:none;background:#cee8e6;flex:1;min-height:120px;max-height:47%;width:100%;margin:12px 0 0}.character-window img{object-fit:cover;object-position:center}.character-caption{font-size:12px}.person-caption{margin:5px 0}.person-caption h2{font-size:clamp(28px,2.4vw,60px)}.person-caption p{font-size:clamp(11px,.8vw,20px);line-height:1.8}.catalog-person .social-links{gap:3px}.catalog-person .social-platform>div{grid-template-columns:1fr;gap:2px}.catalog-person .social-links a{font-size:clamp(12px,1vw,25px);min-height:37px;padding:4px 2px;gap:7px}.catalog-person .platform-logo{width:25px;height:25px}
.book-object{position:absolute;inset:0 22% 0 0;perspective:2200px;z-index:5;pointer-events:none;opacity:var(--cover-alpha)}
.book-cover{position:absolute;left:50%;top:0;width:48%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;transform:translateX(calc((1 - var(--book-open)) * -48%)) rotateY(calc(var(--book-open) * -175deg));will-change:transform;filter:drop-shadow(5px 12px 20px #082d4144)}
.cover-front,.cover-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:9px 16px 16px 9px}.cover-front{background:url(art/v8/cover.webp) center/100% 100% no-repeat}.cover-back{transform:rotateY(180deg);background:linear-gradient(90deg,#768e88,#d5ddcb 7%,#e8e5d2 94%,#94aaa0);border:6px solid #28596b;box-shadow:inset 0 0 0 1px #b6cab8}
.book-scroll-note{position:absolute;bottom:8px;left:25%;width:48%;text-align:center;padding:10px;color:#eff7eb;background:#123a4bc9;border-radius:3px;font:15px var(--hand);opacity:calc(1 - var(--book-open) * 4)}
.book-underleaves{position:absolute;left:27%;top:5%;width:46%;height:91%;background:repeating-linear-gradient(0deg,#ded6bb 0,#ded6bb 2px,#8e927e 3px,#efe4c8 4px);border-radius:8px;transform:translateX(8px);opacity:calc(1 - var(--book-open) * 3)}
.catalog-panel{perspective:none}.page-leaf{position:relative;overflow:visible;isolation:isolate}.turning-sheet{position:absolute;inset:0;z-index:8;background:linear-gradient(90deg,#f7efd8,#ebe0c4 95%,#b9ac8a);overflow:hidden;transform-origin:50% 50%;pointer-events:none;box-shadow:8px 4px 18px #675a3f33;animation:sheet-over .72s cubic-bezier(.2,.6,.2,1) both;clip-path:inset(0 0 0 50%);backface-visibility:hidden}.turning-sheet.backward{clip-path:inset(0 50% 0 0);animation-name:sheet-back}.turning-sheet .song-list{height:100%;grid-template-rows:repeat(var(--rows,10),minmax(48px,1fr))}.entries-arrive>.songs-scroll .song-row{animation:ink-arrive .32s ease-out both;animation-delay:calc(.3s + var(--entry) * .035s)}
@keyframes sheet-over{0%{transform:perspective(1700px) rotateY(0);opacity:1}65%{opacity:1}100%{transform:perspective(1700px) rotateY(-165deg);opacity:0}}@keyframes sheet-back{0%{transform:perspective(1700px) rotateY(0);opacity:1}65%{opacity:1}100%{transform:perspective(1700px) rotateY(165deg);opacity:0}}
@keyframes ink-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.favorite{position:relative;background:none!important}.favorite:before{width:28px;height:30px;border-radius:0;box-shadow:none;background:url(art/v8/favorite-pearl.svg) center/contain no-repeat;transition:opacity .18s,transform .22s}.favorite[aria-pressed=true]:before{background-image:url(art/v8/favorite-coral.svg);background-color:transparent;box-shadow:none}.favorite:hover:before{transform:translateY(-2px)}.favorite-changed:before{animation:coral-bloom .38s ease-out}@keyframes coral-bloom{0%{transform:scale(.75) rotate(-12deg);opacity:.4}75%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1);opacity:1}}
.static-ocean .environment *,.static-ocean .turning-sheet,.static-ocean .entries-arrive .song-row{animation:none!important}.static-ocean .book-object{display:none}.static-ocean .catalog-person{transform:none}.static-ocean .dive-iris{display:none}
@media(hover:hover) and (pointer:fine){body,button,a{cursor:url(art/v8/cursor-40.png) 2 2,auto}input,textarea{cursor:text}}
@media(min-width:1800px){.song-row{grid-template-columns:35px minmax(0,1fr) 44px 67px;gap:8px}.song-number{font-size:26px}.favorite:before{width:37px;height:39px}.select-song{font-size:22px;min-height:44px}.catalog-person .social-links a{min-height:55px}.platform-logo{width:38px;height:38px}.catalog-person .platform-logo{width:32px;height:32px}.portrait img{max-width:500px}.book-scroll-note{font-size:25px}.song-list{grid-template-rows:repeat(var(--rows,10),minmax(64px,1fr))}}
@media(min-width:801px) and (max-width:1200px){.catalog-layout{grid-template-columns:76% 22%;gap:2%}.catalog-inner{padding:23px 24px}.song-list{gap:0 5%}.song-row{grid-template-columns:19px minmax(0,1fr) 26px 38px;gap:3px}.song-name{font-size:13px}.song-singer{font-size:10px}.select-song{font-size:12px}.catalog-person{padding:20px 7%}.catalog-person .social-links a{font-size:11px}.catalog-person .platform-logo{width:20px;height:20px}.person-caption h2{font-size:25px}.person-caption p{font-size:10px}.catalog-heading h2{font-size:29px}.search-wrap{max-width:none}.profile-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%;padding:6% 11%}.portrait img{width:min(80%,36svh)}.intro-copy h1{font-size:65px}.bio{font-size:14px}.intro-copy .social-links a{font-size:14px}.intro-copy .platform-logo{width:28px;height:28px}}
@media(min-width:801px) and (max-height:700px){.catalog-inner{padding:17px 28px}.catalog-heading h2{font-size:26px}.catalog-heading{margin-bottom:4px}.catalog-person{padding:14px 7%}.catalog-person .social-links a{min-height:31px}.person-caption p{display:none}.catalog-person .character-window{min-height:70px}.catalog-person .platform-logo{height:20px;width:20px}.page-selector button{height:27px}.profile-card{padding:4% 12%}.portrait img{max-height:none;width:min(85%,34svh);max-width:330px}.bio{margin:12px 0}.intro-copy .turn-link{margin-top:14px}.intro-copy .social-links{gap:4px}.intro-copy .social-links a{min-height:37px;padding:5px}.catalog-heading h2 em{display:none}}
@media(max-width:800px){.environment{display:none}.env-cove{display:block;opacity:1}.env-cove .environment-base{background-image:url(art/v8/cove-mobile.webp);transform:none}.depth-layer,.cove-glimmer,.dive-iris,.book-object{display:none;background-image:none!important}.opening{background:linear-gradient(#08283dc9,#153d5188),url(art/v8/abyss-mobile.webp) center/cover}.ocean-world{inset:0}.profile-card{display:flex;padding:40px 30px 45px;gap:22px}.portrait{width:60%;max-width:220px}.portrait img{width:100%;max-height:none}.portrait figcaption{font-size:12px}.intro-copy h1{font-size:55px}.bio{margin:15px 0 20px;white-space:normal}.intro-copy .social-links a{font-size:14px}.platform-logo{width:27px;height:27px}.catalog-layout{display:flex;flex-direction:column;opacity:1;gap:20px}.catalog-inner{order:1;padding:30px 24px;min-height:650px;height:auto;background:linear-gradient(100deg,#e9ddbf,#f8efdb 9%,#f4ead2 96%,#d8c9a5);border-radius:5px 12px 10px 3px}.catalog-inner:after{display:none}.catalog-person{order:2;opacity:1;transform:none;width:100%;margin:0;padding:25px;display:grid;grid-template-columns:85px 1fr;gap:15px}.catalog-person .character-window{height:100px;max-height:none;min-height:0;margin:0}.person-caption h2{font-size:29px}.person-caption p{font-size:12px}.catalog-person .social-links{grid-column:1/-1;grid-template-columns:1fr 1fr}.catalog-person .social-links a{font-size:13px;min-height:44px}.catalog-person .platform-logo{width:24px;height:24px}.bookmark-ribbon{height:56px;top:-12px;width:18px}.song-list{gap:0}.song-row{grid-template-columns:23px minmax(0,1fr) 34px 46px;gap:4px;padding:12px 0;min-height:75px}.song-name{font-size:16px}.song-singer{font-size:11px}.favorite:before{width:28px;height:30px}.select-song{min-height:44px}.catalog-heading h2{font-size:28px}.search-wrap{max-width:100%}.pagination{margin-top:15px}.page-selector{margin-top:5px}.turning-sheet{display:none}.entries-arrive>.songs-scroll .song-row{animation-duration:.2s;animation-delay:0s}.catalog-panel{padding-bottom:88px}.local-note{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.environment *,.turning-sheet,.entries-arrive .song-row,.favorite-changed:before{animation:none!important}.book-object{display:none}}
.book-cover{filter:none}.cover-front{filter:drop-shadow(5px 12px 20px #082d4144)}
.catalog-inner{transform:rotate(calc((1 - var(--book-pages)) * -2deg)) scaleX(calc(.97 + var(--book-pages) * .03));transform-origin:left center}
.turning-sheet{backface-visibility:visible;animation-duration:.78s;animation-timing-function:cubic-bezier(.5,0,.5,1);transform-style:flat}
.turning-sheet:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#b7a885,#eee2c7 18%,#f8eed6);opacity:0;animation:paper-back .78s cubic-bezier(.5,0,.5,1) both;pointer-events:none}
.entries-arrive>.songs-scroll .song-row{animation-delay:calc(.62s + var(--entry) * .025s)}
@keyframes paper-back{0%,49%{opacity:0}50%,100%{opacity:1}}
@media(max-width:800px){.catalog-inner{transform:none}.entries-arrive>.songs-scroll .song-row{animation-delay:0s}}
.old-spread{position:absolute;inset:0;z-index:6;overflow:hidden;background:linear-gradient(90deg,#f3ebd4 46%,#c6b891 49.5%,#e8ddbf 51%,#f8f1dc 54%);animation:old-ink .78s linear both;pointer-events:none}.old-spread button:disabled,.turning-sheet button:disabled{opacity:1}.old-spread .song-list{height:100%}@keyframes old-ink{0%,64%{opacity:1}85%,100%{opacity:0}}
@media(max-width:800px){.old-spread{display:none}}
/* Keep the centred introduction inside the paper on short desktop windows. */
@media(min-width:801px) and (min-height:701px) and (max-height:800px){
 .intro-copy h1{font-size:65px}
 .intro-copy .opening-note{margin-bottom:8px}
 .intro-copy .book-title{margin:12px 0}
 .intro-copy .bio{margin:12px 0 18px}
 .intro-copy .social-links{gap:6px}
 .intro-copy .social-links a{min-height:40px;padding-block:6px}
 .intro-copy .turn-link{margin-top:18px;padding:12px 22px}
}