@font-face{font-family:Wand;src:url('./assets/cormorant.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;--ink:#0d0c0f;--paper:#e9e3d9;--violet:#c3a0ec;--muted:#a49fa9;--line:#514b55;--serif:Wand,Georgia,'Times New Roman',serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--serif);font-size:18px}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}button:focus-visible,a:focus-visible{outline:2px solid var(--violet);outline-offset:7px}button:disabled{cursor:default}img{display:block;max-width:100%}a,button{touch-action:manipulation}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:100;top:10px;left:15px;transform:translateY(-150%);background:var(--paper);color:var(--ink);padding:14px}.skip-link:focus{transform:none}
.theatre{position:relative;max-width:2000px;margin:auto;overflow:hidden}.stage{position:relative;aspect-ratio:1654/951;width:100%;isolation:isolate}.stage-image{width:100%;height:100%;object-fit:cover;pointer-events:none}.rail{position:absolute;inset:0 auto 0 0;width:11.12%;z-index:5;border-right:1px solid #9a95904d;padding:3.4% 1.3%}.brand{display:block;position:relative;width:100%;margin-bottom:clamp(34px,4.3vw,90px)}.brand img{width:100%;height:auto}.rail nav{display:flex;flex-direction:column;gap:17px;padding-left:10%;font-size:clamp(16px,1.6vw,28px)}.rail nav a{transition:color .2s}.rail nav a:hover{color:var(--violet)}.rail-rule{display:block;margin:55px 0 0 10%;height:85px;border-left:1px solid #92878f}
.book-page{position:absolute;top:0;left:0;transform-origin:0 0;visibility:hidden;backface-visibility:hidden}.stage.ready .book-page{visibility:visible}.index-page{width:460px;height:660px;display:flex;flex-direction:column;gap:20px;color:#1a171c;padding:5px 12px 0}.chapter{text-align:left;min-height:0;flex:1;display:flex;flex-direction:column;gap:5px}.chapter span{font-size:45px;line-height:1.06;position:relative;font-weight:500;letter-spacing:-1.2px}.chapter span:before{content:'';position:absolute;left:-21px;top:49%;height:2px;background:#644778;width:0;transition:width .2s}.chapter.active span:before{width:15px}.chapter img{width:100%;min-height:0;flex:1;object-fit:cover;object-position:50% 35%;filter:saturate(.45) brightness(.82);box-shadow:0 0 0 1px #30282780;transition:filter .35s}.chapter[data-category=Characters] img{object-position:50% 22%}.chapter:hover img,.chapter.active img{filter:saturate(.83) brightness(.96)}.chapter:focus-visible{outline-color:#553266}
.art-page{width:470px;height:660px;display:flex;flex-direction:column;position:absolute;overflow:hidden}.page-art{position:relative;width:100%;flex:1;min-height:0;overflow:hidden;background:#151119;box-shadow:inset 0 0 30px #08070b}.page-art img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.92;filter:saturate(.82) brightness(.85);transition:filter .5s,opacity .35s}.page-art:hover img{filter:saturate(1) brightness(1)}.page-art:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 35px 9px #100c167a;pointer-events:none}.page-foot{display:flex;align-items:center;justify-content:space-between;height:65px;flex:none;padding:6px 5px 0 14px;font-size:27px}.page-foot button{display:flex;align-items:center;gap:18px;min-height:44px}.page-foot .next{font-size:23px}.next span{font-size:35px;line-height:1}.long-arrow{position:relative;display:block;width:85px;height:1px;background:currentColor}.long-arrow:after{content:'';position:absolute;right:0;top:-4px;width:8px;height:8px;border-right:1px solid;border-top:1px solid;transform:rotate(45deg)}.spell-light{position:absolute;inset:0;background:radial-gradient(ellipse at 45% 0%,#c89affaa,transparent 60%);opacity:0;pointer-events:none}.art-page.turning .spell-light{animation:cast .65s ease-out}.art-page.turning .page-art img{animation:reveal .55s ease-out}.casting-sparks{position:absolute;left:55.6%;top:24%;width:9%;height:15%;pointer-events:none;z-index:4;filter:drop-shadow(0 0 5px #ad63ff)}.casting-sparks i{position:absolute;background:#d6b4ff;width:5%;aspect-ratio:1;opacity:.65;box-shadow:0 0 10px #ab6fff}.casting-sparks i:nth-child(1){left:20%;top:0;width:4%}.casting-sparks i:nth-child(2){left:43%;top:19%;width:8%}.casting-sparks i:nth-child(3){left:13%;top:37%;width:5%}.casting-sparks i:nth-child(4){left:56%;top:49%;width:6%}.casting-sparks i:nth-child(5){left:35%;top:65%;width:3%}.casting-sparks i:nth-child(6){left:65%;top:80%;width:4%}.casting-sparks i:nth-child(7){left:6%;top:23%;width:3%}.mobile-controls{display:none}
.selected-work{padding:32px 2.75% 0;max-width:2000px;margin:auto;border-top:1px solid #504a535c}.section-heading{display:flex;gap:28px;align-items:center;margin:0 0 25px}h1,h2,p{margin:0}h1{font-weight:400;font-size:clamp(36px,3.8vw,72px);line-height:1;letter-spacing:-1.4px;white-space:nowrap}.heading-rule{height:1px;flex:1;background:var(--line)}.work-filters{display:flex;gap:clamp(18px,3.2vw,60px);font-size:clamp(17px,1.4vw,25px)}.work-filters button{padding:13px 12px;position:relative;color:#aaa5af}.work-filters button:after{content:'';position:absolute;bottom:0;height:2px;left:0;right:0;background:var(--violet);transform:scaleX(0);transition:transform .2s}.work-filters button.active{color:var(--paper)}.work-filters button.active:after{transform:scaleX(1)}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:25px;min-height:350px}.art-card{min-width:0}.art-card:first-child{grid-column:1/-1}.art-card button{width:100%;display:block;text-align:left}.art-frame{position:relative;overflow:hidden;aspect-ratio:1.7;background:#151119;border:1px solid #63566d6b}.art-card:first-child .art-frame{aspect-ratio:2.5}.art-frame img{width:100%;height:100%;object-fit:cover;object-position:center 37%;transition:transform .8s,filter .8s;filter:saturate(.8) brightness(.84)}.art-card button:hover img{transform:scale(1.025);filter:saturate(1) brightness(1)}.view-art{position:absolute;right:22px;bottom:20px;font-size:18px;background:#0d0b10c9;border:1px solid #b59bc080;padding:9px 17px;backdrop-filter:blur(10px)}.art-caption{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:15px 0 9px}.art-caption h2{font-size:29px;font-weight:400}.art-caption span{font-family:Arial,sans-serif;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}.gallery[data-category=Objects] .art-frame,.gallery[data-category=Characters] .art-frame{aspect-ratio:2.1}.gallery[data-category=Objects] img{object-position:center 40%}.gallery[data-category=Characters] img{object-position:center 24%}
.studio{margin:85px 2.75% 0;padding:48px 0 65px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:35px;max-width:1890px}.eyebrow{font-family:Arial,sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--violet);margin-bottom:18px}.studio h2{font-size:clamp(44px,5.8vw,88px);font-weight:400;letter-spacing:-2px}.studio-copy{padding-top:25px;font-size:26px;line-height:1.5}.studio-copy p+p{color:var(--muted);font-size:20px}.studio-copy a{display:inline-flex;gap:25px;align-items:center;margin-top:25px;font-size:20px;border-bottom:1px solid #83738c;padding-bottom:7px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 2.75%;border-top:1px solid var(--line);font-size:18px}footer span{font-family:Arial,sans-serif;font-size:12px;color:var(--muted);letter-spacing:.6px}
dialog{border:1px solid #51445a;background:#101014;color:var(--paper);padding:0;width:calc(100vw - 48px);height:calc(100dvh - 48px);max-width:1600px;max-height:none;overflow:hidden}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#040306e8;backdrop-filter:blur(12px)}.viewer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 25px;border-bottom:1px solid var(--line);gap:20px}.viewer-head .eyebrow{margin-bottom:5px}.viewer-head h2{font-size:29px;font-weight:400}.viewer-head button{padding:10px;font-size:20px}.viewer-head button span{font-family:Arial,sans-serif;font-size:25px;margin-left:13px}.viewer-canvas{flex:1;min-height:0;display:flex;justify-content:center;padding:18px}.viewer-canvas img{width:100%;height:100%;object-fit:contain}.viewer-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 25px;border-top:1px solid var(--line)}.viewer-foot>span{font-family:Arial,sans-serif;color:var(--muted);font-size:12px;letter-spacing:1px}.viewer-foot button{padding:8px;font-size:19px}.viewer-foot button span{margin-left:20px}.modal-open{overflow:hidden}
@keyframes cast{0%{opacity:.8}100%{opacity:0}}@keyframes reveal{0%{opacity:.15;filter:brightness(1.35)}100%{opacity:.92;filter:saturate(.82) brightness(.85)}}
@media(min-width:2000px){.studio{margin-left:auto;margin-right:auto}}
@media(max-width:900px){.rail nav{gap:10px;font-size:16px;padding-left:0}.rail-rule{margin-top:30px;height:55px}.section-heading{flex-wrap:wrap;gap:15px}.heading-rule{min-width:30px}.work-filters{gap:10px}.work-filters button{padding:10px}.gallery{gap:18px}.art-caption h2{font-size:24px}.art-caption span{font-size:10px}.studio{margin-top:50px}.studio-copy{font-size:23px}}
@media(max-width:620px){html{scroll-padding-top:15px}.theatre{padding-top:83px;overflow:hidden}.rail{inset:0 0 auto;width:100%;height:84px;padding:8px 18px 9px;display:flex;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid #423849;gap:24px;background:#0b0a0e}.brand{width:105px;flex:none;margin:0}.rail nav{flex-direction:row;gap:20px;font-size:18px}.rail-rule{display:none}.stage{width:115%;margin-left:-11%;}.index-page,.art-page{pointer-events:none}.casting-sparks{opacity:.8}.mobile-controls{display:block;margin-top:-1px;position:relative;background:#0d0c0f;padding:0 20px 14px;border-top:1px solid #5c476a6b}.mobile-chapters{display:flex;justify-content:space-between;gap:15px}.mobile-chapters button{min-height:54px;padding:8px 0;font-size:21px;color:#aaa1b3;border-bottom:2px solid transparent}.mobile-chapters button.active{border-color:var(--violet);color:var(--paper)}.mobile-page-foot{display:flex;align-items:center;justify-content:space-between;padding-top:13px}.mobile-page-foot button{min-height:45px;font-size:21px;display:flex;align-items:center;gap:23px}.mobile-page-foot .explore{color:#dbc2f2}.selected-work{padding:29px 20px 0}.section-heading{margin-bottom:20px;gap:20px}h1{font-size:38px;letter-spacing:-1px}.work-filters{width:100%;justify-content:space-between;gap:10px;font-size:19px}.work-filters button{padding:7px 0}.gallery{display:block;min-height:250px}.art-card{margin-bottom:24px}.art-card .art-frame,.art-card:first-child .art-frame,.gallery[data-category=Objects] .art-frame,.gallery[data-category=Characters] .art-frame{aspect-ratio:4/4.6}.art-card:first-child img{object-position:center}.art-caption{padding-top:10px;align-items:center}.art-caption h2{font-size:25px}.art-caption span{font-size:10px;letter-spacing:1px}.view-art{font-size:17px;right:12px;bottom:12px;padding:8px 12px}.studio{grid-template-columns:1fr;margin:45px 20px 0;gap:10px;padding:30px 0 38px}.studio h2{font-size:51px}.studio-copy{padding:0;font-size:23px}.studio-copy p+p{font-size:19px}.studio-copy a{font-size:20px;margin-top:19px}.eyebrow{margin-bottom:11px}footer{padding:21px 20px;flex-wrap:wrap;row-gap:17px}footer>span{order:3;width:100%;font-size:11px}footer>a{font-size:18px}dialog{width:100%;height:100dvh;border:0;margin:0}.viewer-head{padding:15px;align-items:center}.viewer-head h2{font-size:25px}.viewer-head button{font-size:17px;padding:10px 0}.viewer-canvas{padding:12px}.viewer-foot{padding:12px}.viewer-foot button{font-size:18px}.viewer-foot>span{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.mobile-chapters a{display:flex;align-items:center;min-height:54px;font-size:21px;padding:8px 0;color:var(--paper)}
@media(max-width:620px){.rail{gap:12px}.rail nav{gap:12px;font-size:17px}}
