/* A quiet chessboard, six crystal objects and a single continuous journey. */
.chess-floor{position:absolute;inset:-20%;background:conic-gradient(from 90deg,#456a470d 25%,#fff0 0 50%,#456a470d 0 75%,#fff0 0);background-size:180px 180px;transform:perspective(1000px) translate3d(var(--light-b-x,0px),var(--light-b-y,0px),0) rotateX(38deg) rotateZ(-9deg) scale(1.35);mask-image:radial-gradient(ellipse 65% 65% at 50% 45%,#000 20%,transparent 92%);opacity:.8}
.home-intro{position:absolute;top:115px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:3px;white-space:nowrap;text-align:center;color:#50564e;pointer-events:none;margin:0}
.chess-target{border-radius:25%;padding:0;outline-color:var(--piece-color);overflow:visible}
.chess-target img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(5px 10px 7px #0002)}
.piece-caption{position:absolute;left:50%;transform:translateX(-50%);width:160px;display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;text-align:center;line-height:1.35;color:#30372e}
.piece-caption small{font-size:8px;letter-spacing:2px;text-transform:uppercase;opacity:.55}
.piece-caption>span{font-size:10px;letter-spacing:.3px;transition:color .4s,transform .4s}
.chess-target:hover .piece-caption>span,.chess-target:focus-visible .piece-caption>span{color:var(--piece-color);transform:translateY(-2px)}
#hover-label{display:none}
.editorial{bottom:33px}.editorial h1{font-size:67px;margin-bottom:20px}.title-first{transform:translateX(-25px)}.title-second{transform:translateX(25px)}.editorial>p{font:8px Arial,sans-serif;letter-spacing:2.7px;color:#5c6259}
#project .project-heading h2{font-size:clamp(35px,5vw,68px);letter-spacing:-1.8px;margin-top:10px;max-width:850px;margin-left:auto;margin-right:auto}
#project-gem.photographic-gem.chess-hero-piece{top:17%;width:200px;height:300px;filter:drop-shadow(14px 22px 13px #0003);transform:translateX(-50%);animation:none}
#project.gold-section{color:#343125}.gold-section .project-hero{background:radial-gradient(ellipse at 35% 10%,#fff7,transparent 65%)}.gold-section .project-heading button span{border-color:#34312555}
#project .demo-label{font-size:7px;letter-spacing:2px;opacity:.65}
#project-detail .story-sticky{grid-template-columns:1fr 1fr;gap:8vw}
#project-detail .artwork-wrap{width:72%;max-width:330px;margin:auto;transform:rotate(4deg);filter:drop-shadow(10px 20px 25px #0002)}
#project-detail .ink-artwork{aspect-ratio:2/3;background-position:center;background-size:contain;background-repeat:no-repeat}
#section-heading{white-space:normal;max-width:480px;font-size:clamp(36px,4.3vw,62px)}
#section-content{background:#f0efe9;color:#30362e;padding:110px 10vw 120px}
.section-content-inner{max-width:1050px;margin:0 auto}
.eyebrow{font:9px Arial,sans-serif;letter-spacing:2.2px;opacity:.65}
#content-heading{font:clamp(32px,4vw,52px) 'Didot','Times New Roman',serif;margin:25px 0 22px;font-weight:400;letter-spacing:-.8px}
#content-description{max-width:620px;font:14px/1.9 Arial,sans-serif;opacity:.75}
#content-items{margin-top:65px;display:grid;grid-template-columns:repeat(2,1fr);gap:45px}
#content-items article{border-top:1px solid #30362e25;padding-top:25px}
#content-items h4{font:30px 'Didot',serif;font-weight:400;margin:22px 0 16px}
#content-items article>p:not(.eyebrow){font:13px/1.85 Arial,sans-serif;max-width:400px;color:#62685e}
#content-items a{display:inline-block;margin-top:18px;font-size:10px;letter-spacing:2px;text-decoration:none;border-bottom:1px solid #aaa;padding-bottom:8px}
.journey-end{background:linear-gradient(#f0efe9,#f2f2f0)}
.menu-inner nav{gap:9px}.menu-inner nav button{font-size:clamp(27px,4vw,48px)}.menu-inner{padding-top:105px}#menu-copy p{font:italic 24px/1.5 'Didot',serif;color:#71776b}.menu-footer{font-size:21px}
#chess-game{background:#eeece5;color:#30362e;padding:95px 7vw 110px;display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:center}
.game-intro{max-width:330px}.game-intro h3{font:clamp(42px,5vw,65px)/1.05 'Didot',serif;font-weight:400;margin:25px 0}.game-intro h3 em{font-weight:400}.game-intro>p:not(.eyebrow){font:13px/1.85 Arial,sans-serif}.game-intro label{display:block;font-size:9px;letter-spacing:1.6px;text-transform:uppercase;margin:30px 0 10px}.game-intro select{border:0;border-bottom:1px solid #8d9485;background:transparent;color:#30362e;padding:10px 0;font:13px Arial;width:100%;border-radius:0}
#game-status{margin:28px 0 20px;min-height:24px;font-size:13px;font-weight:600}.game-actions{display:flex;gap:20px}.game-actions button{font:9px Arial;letter-spacing:1.4px;border-bottom:1px solid #8d9485;padding:10px 0}.game-actions button:disabled{opacity:.3;cursor:default}.game-intro .game-hint{font-size:10px!important;opacity:.55;margin-top:22px}
.game-board-wrap{position:relative;max-width:570px;width:100%;margin:auto}#game-board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;width:100%;border:9px solid #45543f;box-shadow:8px 18px 30px #27362120}
.board-square{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:0;border-radius:0;isolation:isolate}.light-square{background:#ede9db}.dark-square{background:#8b9a7e}.board-piece{position:relative;z-index:2;font-family:'Arial Unicode MS','Apple Symbols','DejaVu Sans',serif;font-size:clamp(24px,4vw,48px);line-height:1;pointer-events:none}.white-piece{color:#fffdf2;-webkit-text-stroke:.6px #35462f;text-shadow:0 2px 1px #0002}.black-piece{color:#293d2a;-webkit-text-stroke:.3px #1c2e1a;text-shadow:0 1px 1px #fff5}.coordinate{position:absolute;font:8px Arial;left:3px;bottom:2px;color:#30402e;z-index:3;pointer-events:none}.dark-square .coordinate{color:#f1f0e8}.board-square.selected{background:#d6bd68}.board-square.last-move{box-shadow:inset 0 0 0 30px #dfb84c33}.board-square.legal-target:after{content:'';position:absolute;width:22%;height:22%;background:#304a35a6;border-radius:50%;z-index:3}.board-square.capture-target:after{width:87%;height:87%;border:4px solid #304a3599;background:transparent}.board-square.checked{background:#bd6c69}.board-square:focus-visible{outline:3px solid #a40b40;outline-offset:-3px;z-index:5}
.board-caption{text-align:center;font:italic 17px 'Didot',serif;margin:22px 0;color:#65715c}#game-moves{display:flex;gap:12px;flex-wrap:wrap;list-style:none;padding:0;margin:20px 0 0;min-height:20px;font:10px/1.8 Arial;color:#65715c}#promotion-choice{position:absolute;left:8%;right:8%;top:35%;z-index:8;background:#f5f2e8;box-shadow:0 8px 40px #0005;padding:25px;text-align:center}#promotion-choice p{font:16px 'Didot',serif}#promotion-choice button{font:40px 'Arial Unicode MS','Apple Symbols',serif;padding:8px}
@media(min-width:1400px){.piece-caption>span{font-size:12px}.editorial h1{font-size:80px}.home-intro{top:120px}}
@media(max-width:899px){.home-intro{top:89px;font-size:7px;letter-spacing:2px}.piece-caption{width:140px}.piece-caption>span{font-size:9px;letter-spacing:0;max-width:120px}.piece-caption small{font-size:7px;letter-spacing:1.3px}.editorial h1{font-size:55px}.editorial>p{font-size:7px;letter-spacing:1.8px}.editorial{bottom:28px}.chess-floor{background-size:130px 130px}.menu-inner nav{gap:12px}.menu-inner nav button{font-size:32px}#menu-copy{display:none}#project-detail .story-sticky{grid-template-columns:1fr 1fr;gap:30px;padding:90px 8vw 40px}#project-detail .artwork-wrap{width:100%}#section-heading{font-size:35px}#section-content{padding:75px 8vw}#content-items{grid-template-columns:1fr;gap:30px;margin-top:40px}#content-heading{font-size:34px}#content-items h4{font-size:28px}#chess-game{grid-template-columns:1fr;padding:75px 7vw;gap:40px}.game-intro{max-width:100%}.game-intro h3{font-size:45px}.game-intro select{max-width:330px}#game-board{border-width:6px}.board-piece{font-size:clamp(25px,8vw,48px)}}
@media(max-width:540px){.piece-caption{width:115px;gap:5px}.piece-caption>span{max-width:104px;font-size:8px}.piece-caption small{font-size:6px}.home-intro{letter-spacing:1.6px;font-size:6px}.editorial h1{font-size:49px}.editorial>p{font-size:6px;letter-spacing:1.5px}#project-gem.photographic-gem.chess-hero-piece{top:19%;width:150px;height:225px}#project .project-heading h2{font-size:35px;letter-spacing:-1px}#project .project-heading{bottom:32px}#project-category{font-size:8px}#project-detail .story-sticky{display:flex;flex-direction:column;justify-content:center;gap:22px;min-height:100svh}#project-detail .story-copy{width:100%}#section-heading{font-size:33px;margin-bottom:18px}#project-detail .artwork-wrap{width:140px;margin:0 auto}.ink-instruction{display:none}#project-detail .ink-artwork{aspect-ratio:2/3}.ink-section{height:170svh}#section-content{padding-top:60px}.menu-inner{padding:95px 10% 20px}.menu-inner nav{gap:12px}.menu-inner nav button{font-size:30px}.menu-footer{font-size:18px}.menu-footer span{font-size:8px}}
@media(max-height:660px) and (min-width:900px){.home-intro{top:90px}.editorial h1{font-size:53px}.editorial{bottom:22px}.piece-caption>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.chess-floor{transform:perspective(1000px) rotateX(38deg) rotateZ(-9deg) scale(1.35)}}
.white-piece{-webkit-text-stroke:1px #44553c;paint-order:stroke fill;text-shadow:0 2px 1px #0002}
.piece-caption>span{font-size:11px}
@media(max-width:899px){.piece-caption>span{font-size:10px}}
@media(max-width:540px){.piece-caption>span{font-size:10px}.piece-caption small{font-size:7px}.home-intro{font-size:7px}}
/* The original cutouts stay still; colour comes from the original artwork. */
.chess-target img{filter:none}
#scene.fallback ~ #stone-targets .chess-target:before{content:'';position:absolute;bottom:0;left:25%;width:50%;height:4%;border-radius:50%;background:#343b341a;filter:blur(3px)}
/* A bounded sticky backdrop keeps the same living paper inside each coloured chapter. */
#project{isolation:isolate}
#project:before{display:none}
.project-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none}
.section-paper{position:sticky;top:0;height:100svh;overflow:hidden}
.section-paper .paper{position:absolute;inset:-8%;background:radial-gradient(ellipse at 35% 20%,#ffffff1f,transparent 65%),var(--project-color)}
.section-paper .chess-floor{background:conic-gradient(from 90deg,#ffffff16 25%,#0000000c 0 50%,#ffffff16 0 75%,#0000000c 0);background-size:180px 180px;mask-image:radial-gradient(ellipse 75% 75% at 50% 48%,#000 35%,transparent 100%);opacity:.72}
.section-paper .light{opacity:.42}
.section-paper .light-b{opacity:.28}
.section-paper .light-c{opacity:.24}
.section-paper .grain{opacity:.14}
.gold-section .project-hero{background:transparent}
#section-content{background:#f0efe9ef}
#chess-game{background:#eeece5f2}
.journey-end{background:linear-gradient(#f0efe9ef,#f2f2f0)}
#project-gem.photographic-gem.chess-hero-piece{filter:drop-shadow(6px 10px 9px #0002)}
@media(max-width:899px){.section-paper .chess-floor{background-size:130px 130px}}
/* Chapter openings: quiet editorial scale, a short invitation and a paced reveal. */
.hero-light{position:absolute;inset:2% 4% 28%;background:radial-gradient(ellipse at 50% 50%,#ffffff25,transparent 66%);pointer-events:none}
.chapter-word{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font:clamp(66px,14vw,220px)/1 'Didot','Times New Roman',serif;letter-spacing:-.065em;white-space:nowrap;opacity:.12;pointer-events:none}
.chapter-mark{position:absolute;left:7vw;top:40%;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:.55;pointer-events:none}
.chapter-mark>span{font:7px Arial;letter-spacing:2px}.chapter-mark>b{font:italic 50px/1 'Didot','Times New Roman',serif;font-weight:400}
#project-gem.photographic-gem.chess-hero-piece{top:17%;height:min(37svh,300px);width:min(25svh,200px)}
#project .project-heading{bottom:35px}
#project .project-heading h2{margin-bottom:14px}
#project .chapter-opening{font:italic clamp(17px,1.8vw,23px)/1.5 'Didot','Times New Roman',serif;letter-spacing:0;text-transform:none;max-width:480px;margin:0 auto 25px;opacity:.8}
#project-category:before{content:'';display:block;width:32px;height:1px;background:currentColor;opacity:.45;margin:0 auto 15px}
#project .project-heading button{letter-spacing:2px;font-size:9px}
#project .project-heading button span{width:32px;height:32px;font-size:17px;margin:13px auto 0;border-color:currentColor;opacity:.6}
@media(max-width:899px){.chapter-mark{left:6vw;top:38%}.chapter-mark>span{font-size:6px;letter-spacing:1.2px}.chapter-mark>b{font-size:37px}}
@media(max-width:540px){.chapter-mark{display:none}.chapter-word{font-size:16vw;top:36%}#project-gem.photographic-gem.chess-hero-piece{top:17%;height:min(33svh,250px);width:min(22svh,167px)}#project .project-heading{bottom:27px;width:88%}#project .project-heading h2{font-size:34px}#project .chapter-opening{font-size:17px;max-width:300px;margin-bottom:20px}}
@media(max-height:650px){#project-gem.photographic-gem.chess-hero-piece{top:17%;height:30svh;width:20svh}.chapter-word{top:35%}#project .project-heading{bottom:20px}#project .project-heading h2{font-size:clamp(29px,4vw,45px);margin:8px 0 9px}#project-category:before{margin-bottom:9px}#project .chapter-opening{font-size:16px;margin-bottom:13px}#project .project-heading button span{margin-top:8px}}
/* Idle board movement is independent of the cursor's bounded parallax. */
.chess-floor{animation:board-drift 32s ease-in-out infinite;will-change:translate,rotate}
@keyframes board-drift{0%,100%{translate:-14px -8px;rotate:-.15deg}50%{translate:18px 12px;rotate:.25deg}}
body.ambient-paused .chess-floor,body.ambient-paused .light{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.chess-floor{animation:none;translate:none;rotate:none;will-change:auto}}
/* First visit: a short invitation before the original pieces are revealed in ink. */
.opening-pending #home,.opening-pending body>header{visibility:hidden}
body.opening-active{overflow:hidden}
#opening{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#f2f2ed;color:#27392c;overflow:hidden}
.opening-paper{position:absolute;inset:-15%;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,#fffffff2,transparent 65%),conic-gradient(from 90deg,#456a4707 25%,transparent 0 50%,#456a4707 0 75%,transparent 0);background-size:auto,210px 210px;transform:perspective(1000px) rotateX(23deg) rotateZ(-9deg) scale(1.2)}
#opening:after{content:'';position:absolute;inset:0;background:url('./assets/paper-grain.svg') repeat;background-size:240px;opacity:.10;pointer-events:none;mix-blend-mode:multiply}
.opening-signature{position:absolute;left:50%;top:35px;transform:translateX(-50%);font:italic 34px/1 'Snell Roundhand','Apple Chancery',cursive;letter-spacing:-1.7px}
.opening-copy{position:relative;z-index:1;text-align:center;margin-top:-8px;padding:70px 24px}
.opening-eyebrow{font:8px Arial,sans-serif;letter-spacing:3px;margin:0 0 38px;opacity:.65;animation:opening-type 1s both .05s}
#opening-title{outline:0;font:400 clamp(55px,7.7vw,112px)/.96 'Didot','Bodoni 72','Times New Roman',serif;letter-spacing:-3px;margin:0}
#opening-title span,#opening-title em{display:block;font-weight:400;animation:opening-type 1.2s cubic-bezier(.2,.7,.2,1) both}
#opening-title span:first-child{animation-delay:.18s}#opening-title span:nth-child(2){animation-delay:.38s}#opening-title em{animation-delay:.60s;color:#456a47;font-style:italic}
.opening-invitation{font:12px/1.7 Arial,sans-serif;color:#667261;margin:30px 0 35px;animation:opening-type 1s both .85s}
#opening-enter{font:8px Arial,sans-serif;letter-spacing:1.6px;padding:12px 0;border-bottom:1px solid #456a4755;animation:opening-type 1s both 1.05s}
#opening-enter>span{display:inline-block;margin-left:20px;font:20px Georgia,serif;transition:translate .3s}#opening-enter:hover>span{translate:3px -3px}
#opening-skip{position:absolute;right:32px;bottom:28px;z-index:2;font-size:8px;letter-spacing:1.7px;padding:12px 0}#opening-skip>span{margin-left:12px}
.opening-count{position:absolute;left:32px;bottom:29px;margin:0;font:italic 22px 'Didot','Times New Roman',serif;letter-spacing:1px;color:#84917c}
@keyframes opening-type{from{opacity:0;translate:0 18px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@media(max-width:540px){.opening-signature{font-size:29px;top:28px}#opening-title{font-size:clamp(43px,12vw,64px);letter-spacing:-2px}.opening-eyebrow{font-size:6px;letter-spacing:2px;margin-bottom:30px}.opening-invitation{font-size:10px;margin:26px 0 25px}.opening-count{left:22px;font-size:19px}#opening-skip{right:22px;font-size:7px}#opening-enter{font-size:7px}.opening-paper{background-size:auto,140px 140px}}
@media(max-height:600px){.opening-signature{top:20px;font-size:27px}.opening-copy{padding:65px 20px 50px}.opening-eyebrow{margin-bottom:20px}#opening-title{font-size:clamp(39px,10svh,65px)}.opening-invitation{margin:18px 0 15px;font-size:10px}}
@media(prefers-reduced-motion:reduce){#opening *,#opening-title span,#opening-title em{animation:none;filter:none}#opening-enter>span{transition:none}}
@media(max-width:540px) and (max-height:600px){#opening-title{font-size:clamp(34px,11vw,46px)}.opening-copy{padding:60px 18px 45px}}
/* Hand-authored paths: pressure-sensitive ink follows the moving brush. */
#opening-title{font-size:0;letter-spacing:0;line-height:1}
#opening-writing{display:block;width:min(100%,620px);height:auto;max-height:42svh;margin:auto;overflow:visible}
.opening-copy{width:min(100%,760px);padding:70px 24px 55px}
.opening-eyebrow{margin-bottom:22px}
.opening-invitation{margin:16px 0 22px;animation-delay:2.65s;animation-duration:.65s}
#opening-enter{animation-delay:2.85s;animation-duration:.65s}
@media(max-width:540px){.opening-copy{padding:65px 20px 55px}.opening-eyebrow{margin-bottom:25px}.opening-invitation{margin:20px 0 22px}}
@media(max-height:600px){#opening-writing{max-height:38svh}.opening-copy{padding:55px 20px 40px}.opening-eyebrow{margin-bottom:12px}.opening-invitation{margin:10px 0 8px}}

/* Physical board study: a player’s view, with the original crystal artwork upright. */
body>.paper>.chess-floor{opacity:0}
#home .home-intro{top:15%;font-size:8px;letter-spacing:3px}
#home .editorial{bottom:3%;width:100%}
#home .editorial h1{font-size:clamp(30px,3vw,45px);margin-bottom:12px;letter-spacing:-1.8px;line-height:1}
#home .title-first,#home .title-second{display:inline;transform:none}
#home .title-first:after{content:' '}
#home .editorial>p{font-size:7px;letter-spacing:2px}
#home .chess-target{border-radius:35%;width:auto}
#home .piece-caption{opacity:0;translate:0 5px;padding:9px 12px;width:175px;background:#f5f5efed;border:1px solid #cbd1c280;border-radius:3px;box-shadow:0 5px 20px #2222;transition:opacity .25s,translate .25s;z-index:10}
#home .chess-target:hover .piece-caption,#home .chess-target:focus-visible .piece-caption{opacity:1;translate:0 0}
#board-navigation{position:absolute;top:75%;left:50%;transform:translateX(-50%);width:min(850px,88%);display:grid;grid-template-columns:repeat(6,1fr);gap:10px;z-index:3}
#board-navigation button{display:flex;align-items:center;gap:9px;text-align:left;padding:12px 5px;border-top:1px solid #47594729;transition:border-color .3s,color .3s;font-size:10px;line-height:1.5}
#board-navigation button:hover,#board-navigation button:focus-visible{color:var(--piece-color);border-color:var(--piece-color)}
#board-navigation small{display:block;font-size:7px;letter-spacing:1.8px;text-transform:uppercase;opacity:.65;margin-bottom:3px}
.board-dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--piece-color);box-shadow:inset -1px -1px 2px #0003,inset 1px 1px 2px #fff6}
@media(max-width:899px){#board-navigation{top:73%;grid-template-columns:repeat(3,1fr);gap:0 17px;width:82%}#board-navigation button{padding:9px 2px;font-size:10px}#home .editorial{bottom:3%}#home .editorial h1{font-size:34px}}
@media(max-width:540px){#home .home-intro{top:17%;font-size:6px;letter-spacing:1.8px}#board-navigation{top:68%;width:88%;gap:0 10px}#board-navigation button{font-size:9px;gap:6px;min-height:54px}#board-navigation small{font-size:6px;letter-spacing:1px}#home .editorial h1{font-size:31px}#home .piece-caption{width:135px}#home .piece-caption>span{font-size:9px}}
@media(max-height:600px){#home{min-height:600px}#home .home-intro{top:100px}}
#scene.fallback:before{content:'';position:absolute;left:7%;right:7%;top:29%;height:40%;background:conic-gradient(#414b44 25%,#eceee7 0 50%,#414b44 0 75%,#eceee7 0);background-size:25% 25%;transform:perspective(700px) rotateX(45deg);border:12px solid #cbd5cb;box-shadow:0 9px #26352e,10px 30px 30px #0002}

/* One photographic scene, with a separately registered interaction overlay. */
#home{color:#f0eee6;background:radial-gradient(ellipse at 75% 30%,#344035,#17221c 65%,#101b15)}
#home:before,#home:after,#scene:after,#scene.fallback:before{display:none}
body:not(.project-open):not(.opening-active):not(.menu-open)>header{color:#f3f0e8}
#home .home-intro{color:#f0eee6b3;top:17%;z-index:2}
#home .editorial>p{color:#e5e9d7a6}
#board-navigation button{border-color:#ecf0e32b}
#board-navigation button:hover,#board-navigation button:focus-visible{color:#fff;border-color:var(--piece-color)}
#home .piece-caption{color:#eee;background:#18251ee8;border-color:#d7e1cf40;box-shadow:0 5px 20px #0005}
#home .chess-target:hover .piece-caption>span,#home .chess-target:focus-visible .piece-caption>span{color:#fff}
#home .chess-target:focus-visible{outline:1px solid #f3f0e8a8}
#home #scene{z-index:0}
#scene .board-photograph{position:absolute;display:block;max-width:none;pointer-events:none;z-index:0;mask-image:linear-gradient(transparent,#000 20%,#000 94%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
#scene .scene-contours{position:absolute;display:block;max-width:none;pointer-events:none;overflow:visible;z-index:1}
.scene-contour{fill:none;stroke:var(--piece-color);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .25s;filter:drop-shadow(0 0 4px var(--piece-color))}
.scene-contour.is-active{opacity:1;animation:contour-breath 2.8s ease-in-out infinite}
@keyframes contour-breath{50%{stroke-width:2;filter:drop-shadow(0 0 8px var(--piece-color))}}
.scene-inactive .scene-contour{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.scene-contour.is-active{animation:none}}
@media(min-width:900px){#board-navigation{top:79%}}
#scene,#stone-targets{user-select:none;-webkit-user-select:none}
#scene .board-photograph{-webkit-user-drag:none}
#scene.scene-fullframe .board-photograph{mask-image:none}
#home.fullframe-scene:after{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(transparent 64%,#09110b66 80%,#09110bef 100%)}
#home.fullframe-scene:after{content:''}
#home.fullframe-scene #board-navigation{background:#0a150ed9;border:1px solid #f1f0df1f;border-radius:4px;padding:8px 16px;backdrop-filter:blur(8px)}
/* One bounded camera movement keeps the image, highlights and hit areas registered. */
#scene .board-photograph,#scene .scene-contours,#stone-targets{translate:var(--scene-shift-x,0px) var(--scene-shift-y,0px);will-change:translate}
#scene.scene-fullframe .board-photograph{mask-image:linear-gradient(transparent,#000 5%,#000 96%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
@media(prefers-reduced-motion:reduce){#scene .board-photograph,#scene .scene-contours,#stone-targets{translate:none;will-change:auto}}
/* Full coverage comes from an expanded photograph, never from empty side margins. */
#scene .board-photograph,#scene.scene-fullframe .board-photograph{mask-image:none}
#home.portrait-scene #board-navigation{top:76%}
#home.portrait-scene .board-photograph,#home.portrait-scene .scene-contours,#home.portrait-scene #stone-targets{translate:calc(var(--scene-shift-x,0px) * .3) calc(var(--scene-shift-y,0px) * .5)}
@media(prefers-reduced-motion:reduce){#home.portrait-scene .board-photograph,#home.portrait-scene .scene-contours,#home.portrait-scene #stone-targets{translate:none}}
#home.portrait-scene #board-navigation{top:74%}
@media(max-height:700px){#home.portrait-scene #board-navigation{top:70%}#home.portrait-scene #board-navigation button{min-height:40px;padding:6px 2px}}
/* Live light and particles sit on the same photographic plane and never capture clicks. */
#scene .scene-atmosphere{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen;translate:var(--scene-shift-x,0px) var(--scene-shift-y,0px);will-change:translate}
#scene .scene-contours{z-index:2}
#home.portrait-scene .scene-atmosphere{translate:calc(var(--scene-shift-x,0px) * .3) calc(var(--scene-shift-y,0px) * .5)}
@media(prefers-reduced-motion:reduce){#scene .scene-atmosphere,#home.portrait-scene .scene-atmosphere{translate:none;will-change:auto}}

/* The board is the navigation: a short cursor invitation replaces the legend. */
.pawn-cursor,.pawn-cursor-tip{position:fixed;pointer-events:none;z-index:2000;opacity:0;visibility:hidden}
.pawn-cursor{left:0;top:0;width:25px;height:35px;filter:drop-shadow(0 2px 3px #0009);will-change:transform;transition:opacity .18s,visibility .18s}
.pawn-cursor svg{display:block;transform-origin:50% 90%;transition:transform .25s,filter .25s}
.pawn-cursor.over-piece svg{transform:translateY(-3px) scale(1.12);filter:drop-shadow(0 0 5px #fff4)}
.pawn-cursor-tip{width:228px;box-sizing:border-box;padding:10px 13px;transform:translate(-50%,-50%);border:1px solid #eee5cb40;border-radius:6px;background:#132018ed;box-shadow:0 5px 20px #0003;backdrop-filter:blur(10px);color:#f3efdf;font:11px/1.5 Arial,sans-serif;text-align:center;transition:opacity .3s,visibility .3s}
.pawn-cursor-tip:after{content:'';position:absolute;left:50%;bottom:-4px;width:7px;height:7px;background:#132018;transform:translateX(-50%) rotate(45deg);border-right:1px solid #eee5cb40;border-bottom:1px solid #eee5cb40}
.pawn-cursor.visible,.pawn-cursor-tip.visible{opacity:1;visibility:visible}
.touch-board-hint{display:none}
@media(hover:hover) and (pointer:fine){body.pawn-cursor-active,body.pawn-cursor-active *{cursor:none!important}}
@media(hover:none),(pointer:coarse){.pawn-cursor,.pawn-cursor-tip{display:none}.touch-board-hint{display:block;position:absolute;top:76%;left:5%;width:90%;margin:0;text-align:center;z-index:2;color:#f3efdfbd;font:10px/1.5 Arial,sans-serif;letter-spacing:.4px}}
@media(prefers-reduced-motion:reduce){.pawn-cursor,.pawn-cursor svg,.pawn-cursor-tip{transition:none}}

/* Oversized camera layers stay inside the home viewport; sections retain native scroll. */
#home{height:100svh;min-height:0;overflow:clip}
html:has(body:not(.project-open)){overflow:hidden;overscroll-behavior:none}
body:not(.project-open){height:100svh;overflow:hidden}

/* Persistent, articulated pixel guardian, above both the ink transition and page content. */
.chess-companion{--companion-tint:#d9c188;--companion-x:0px;position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:112px;height:148px;z-index:80;color:#f2eedf;isolation:isolate;translate:var(--companion-x) 0;transition:translate 3.6s linear}
.companion-pawn{position:relative;display:block;width:112px;height:126px;padding:0;outline-offset:3px!important;cursor:pointer}
.guardian-art{position:relative;z-index:1;display:block;width:112px;height:126px;overflow:visible;filter:drop-shadow(3px 4px 0 #0004);pointer-events:none;user-select:none;animation:guardian-hover 2.6s steps(6,end) infinite;transition:scale .2s}
.facing-left .guardian-art{scale:-1 1}
.guardian-wing{transform-box:fill-box;animation:guardian-flap .42s steps(3,end) infinite;transform-origin:100% 65%}
.guardian-wing.wing-right{transform-origin:0% 65%;animation-name:guardian-flap-right}
.guardian-head{transform-origin:32px 32px;animation:guardian-look 8s steps(2,end) infinite}
.guardian-eyes{transform-origin:32px 25px;animation:guardian-blink 4.8s step-end infinite}
.guardian-halo{animation:guardian-halo 3s steps(4,end) infinite}
.guardian-sword{transform-origin:47px 42px;animation:guardian-sword 4s steps(4,end) infinite}
.guardian-leg{transform-origin:28px 52px}
.guardian-leg.leg-right{transform-origin:38px 52px}
.is-walking .leg-left{animation:guardian-step .55s steps(2,end) infinite}
.is-walking .leg-right{animation:guardian-step .55s steps(2,end) infinite reverse}
.is-speaking .guardian-sword{animation:guardian-salute 1.2s steps(4,end) infinite alternate}
.chess-companion[data-phase=transition] .guardian-wing{animation-duration:.25s}
.companion-ground{position:absolute;left:17%;right:17%;height:8px;bottom:8px;background:#0005;filter:blur(2px);border-radius:50%;animation:guardian-shadow 2.6s steps(6,end) infinite}
.companion-mute{position:absolute;top:128px;left:5px;width:102px;padding:6px 0;font:9px/1.2 'Courier New',monospace;letter-spacing:.1px;color:#eee5c4ba;text-shadow:1px 1px #000;white-space:nowrap}
.companion-mute:hover,.companion-mute:focus-visible{color:#fff}
.companion-speech{position:absolute;left:116px;bottom:72px;width:268px;box-sizing:border-box;padding:15px 17px;border:2px solid #af9c635e;background:#22251cf5;box-shadow:4px 4px 0 #0004;opacity:0;visibility:hidden;transform:translate(0,7px);transition:opacity .2s,transform .25s,visibility .2s;pointer-events:none}
.companion-speech:before{content:'';position:absolute;left:-10px;bottom:16px;width:10px;height:10px;background:#22251c;border-left:2px solid #af9c635e;border-bottom:2px solid #af9c635e}
.companion-eyebrow{display:block;margin-bottom:9px;font:8px/1.3 'Courier New',monospace;letter-spacing:1.5px;color:var(--companion-tint);transition:color .4s}
.companion-speech p{margin:0;font:13px/1.6 'Courier New',monospace;letter-spacing:.05px;text-wrap:pretty}
.is-speaking .companion-speech{opacity:1;visibility:visible;transform:translate(0,0)}
@keyframes guardian-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes guardian-shadow{0%,100%{scale:1;opacity:.8}50%{scale:.8;opacity:.5}}
@keyframes guardian-flap{0%,100%{transform:rotate(-8deg) scaleX(1)}50%{transform:rotate(20deg) scaleX(.40)}}
@keyframes guardian-flap-right{0%,100%{transform:rotate(8deg) scaleX(1)}50%{transform:rotate(-20deg) scaleX(.40)}}
@keyframes guardian-step{0%,100%{transform:rotate(-14deg) translateY(-1px)}50%{transform:rotate(14deg) translateY(2px)}}
@keyframes guardian-look{0%,45%,100%{transform:translateX(0)}50%,70%{transform:translateX(1px) rotate(3deg)}}
@keyframes guardian-blink{0%,93%,100%{transform:scaleY(1)}95%,98%{transform:scaleY(0)}}
@keyframes guardian-halo{0%,100%{opacity:.8;translate:0 0}50%{opacity:1;translate:0 -1px}}
@keyframes guardian-sword{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
@keyframes guardian-salute{from{transform:rotate(-5deg)}to{transform:rotate(-22deg)}}
@media(max-width:600px){.chess-companion{left:8px;bottom:max(48px,env(safe-area-inset-bottom));width:80px;height:114px}.companion-pawn,.guardian-art{width:80px;height:90px}.companion-mute{top:92px;left:0;width:80px;font-size:8px}.companion-speech{left:84px;bottom:57px;width:min(238px,calc(100vw - 112px - var(--companion-x)));padding:12px}.companion-speech p{font-size:11px}.companion-eyebrow{font-size:7px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.chess-companion,.guardian-art,.companion-speech{transition:none}.guardian-art,.guardian-art *,.companion-ground{animation:none!important}}

.chess-companion.is-resizing{transition:none}

/* Winged pixel horse: articulated flight and a guided hop over each real piece. */
.chess-companion{pointer-events:none}
.companion-pawn,.companion-mute{pointer-events:auto}
.pegasus-art{animation:pegasus-hover 2.4s steps(6,end) infinite}
.pegasus-wing{transform-box:fill-box;transform-origin:88% 92%;animation:pegasus-flap .48s steps(3,end) infinite}
.pegasus-far-wing{transform-box:fill-box;transform-origin:90% 90%;animation:pegasus-flap .48s steps(3,end) infinite .12s;opacity:.8}
.pegasus-tail{transform-origin:24px 34px;animation:pegasus-tail 1.4s steps(3,end) infinite}
.pegasus-eyes{transform-origin:65px 23px;animation:guardian-blink 4.8s step-end infinite}
.pegasus-leg.front-left{transform-origin:34px 45px;animation:pegasus-hoof 1.6s steps(3,end) infinite}
.pegasus-leg.front-right{transform-origin:49px 44px;animation:pegasus-hoof 1.6s steps(3,end) infinite reverse}
.is-touring .pegasus-leg.front-left,.is-walking .pegasus-leg.front-left{animation-duration:.48s}
.is-touring .pegasus-leg.front-right,.is-walking .pegasus-leg.front-right{animation-duration:.48s}
.is-touring .companion-pawn{pointer-events:none}
.is-touring .companion-mute{top:-9px;opacity:.65}
.is-touring .companion-ground{bottom:39px;opacity:.35}
.is-landing .pegasus-art{filter:drop-shadow(0 0 5px #f8f4bba6)}
.chess-companion[data-phase=transition] .pegasus-wing,.chess-companion[data-phase=transition] .pegasus-far-wing{animation-duration:.3s}
@keyframes pegasus-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pegasus-flap{0%,100%{transform:rotate(-9deg) scaleY(1)}50%{transform:rotate(26deg) scaleY(.44)}}
@keyframes pegasus-tail{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@keyframes pegasus-hoof{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(13deg)}}
/* A brighter edge and colored light keep dark crystal hues legible without changing paths. */
.scene-contour.is-active{stroke:color-mix(in srgb,var(--piece-color) 55%,#fff);stroke-width:1.8;filter:drop-shadow(0 0 2px #fff9) drop-shadow(0 0 8px var(--piece-color)) drop-shadow(0 0 16px var(--piece-color))}
.scene-contour.is-guided{stroke:color-mix(in srgb,var(--piece-color) 45%,#fff);animation:guide-beacon 1.4s ease-in-out infinite}
@keyframes guide-beacon{0%,100%{stroke-width:1.8;filter:drop-shadow(0 0 2px #fffc) drop-shadow(0 0 8px var(--piece-color))}50%{stroke-width:2.8;filter:drop-shadow(0 0 4px #fff9) drop-shadow(0 0 13px var(--piece-color)) drop-shadow(0 0 24px var(--piece-color))}}
@media(max-width:600px){.is-touring .companion-ground{bottom:31px}}
@media(prefers-reduced-motion:reduce){.scene-contour.is-guided{animation:none}.pegasus-art,.pegasus-art *{animation:none!important}}
/* The chess knight has a pedestal; flight arcs move the entire figure between pieces. */
.pegasus-knight{transform-origin:40px 62px;animation:knight-breathe 3s steps(4,end) infinite}
.pegasus-art .pegasus-eyes{transform-origin:62px 23px}
.speech-on-left .companion-speech:before{left:auto;right:-10px;border-left:0;border-right:2px solid #af9c635e}
@keyframes knight-breathe{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}

/* Chunkier slate knight profile, with wings behind its mane. */
.pegasus-art{scale:-1 1}
.facing-left .pegasus-art{scale:1 1}
.pegasus-knight{transform-origin:35px 68px}
.pegasus-art .pegasus-eyes{transform-origin:29px 24px}
.pegasus-wing,.pegasus-far-wing{transform-origin:8% 88%}

/* The supplied front-facing master animates its hands and floating board without artificial flips. */
.master-character{display:contents}
.master-art{position:absolute;left:50%;top:50%;translate:-50% -50%;display:block;width:136px;height:136px;image-rendering:pixelated;pointer-events:none;user-select:none;filter:drop-shadow(0 3px 3px #0006)}
.chess-companion:has(.master-art) .companion-ground{display:none}
.is-landing .master-art{filter:drop-shadow(0 0 5px #90e8ee9c)}
@media(max-width:600px){
 .chess-companion:has(.master-art){width:96px;height:132px}
 .chess-companion:has(.master-art) .companion-pawn{width:96px;height:108px}
 .chess-companion:has(.master-art) .companion-mute{top:110px;width:96px}
 .chess-companion.is-touring:has(.master-art) .companion-mute{top:-9px}
}

/* A frame atlas plays the user's casting GIF exactly once per navigation. */
.master-cast{position:absolute;left:50%;top:50%;translate:-50% -50%;width:136px;height:136px;display:none;background:url('./assets/chess-master-cast.png') 0 0/1224px 136px no-repeat;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 0 5px #99efff65)}
.is-casting .master-art{visibility:visible}
.master-cast{display:block;opacity:0}
.chess-companion[data-phase=transition] .companion-pawn,.chess-companion[data-phase=transition] .companion-mute{pointer-events:none}

/* A quiet suspense before the crystal board: six pigments gathering around the writing. */
.opening-pigments{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.65}
.opening-pigments i{position:absolute;width:43vw;height:43vw;max-width:650px;max-height:650px;border-radius:42% 58% 65% 35%;filter:blur(65px);opacity:.13;background:var(--ink);animation:opening-pigment 12s ease-in-out infinite alternate;mix-blend-mode:multiply}
.opening-pigments i:nth-child(1){--ink:#456A47;left:-23%;top:-17%}
.opening-pigments i:nth-child(2){--ink:#DFB84C;right:-20%;top:-18%;animation-delay:-4s}
.opening-pigments i:nth-child(3){--ink:#A40B40;left:-24%;bottom:-24%;animation-delay:-7s}
.opening-pigments i:nth-child(4){--ink:#44688B;right:-19%;bottom:-23%;animation-delay:-3s}
.opening-pigments i:nth-child(5){--ink:#159A8C;left:26%;top:-38%;animation-delay:-9s}
.opening-pigments i:nth-child(6){--ink:#8B4A2B;left:30%;bottom:-42%;animation-delay:-5s}
#opening .opening-paper{opacity:.45;transform:perspective(1000px) rotateX(26deg) scale(1.25);mask-image:radial-gradient(ellipse,#0005,transparent 78%)}
#opening-writing{width:min(100%,660px);max-height:43svh}
.opening-copy{padding:78px 24px 50px}
.opening-eyebrow{font-size:8px;letter-spacing:3.5px;margin-bottom:25px}
.opening-pieces{display:flex;justify-content:center;gap:24px;margin:22px 0 0;font:25px/1 Georgia,serif}
.opening-pieces span{animation:opening-type 1.5s both;animation-delay:calc(3.7s + var(--order)*.18s)}
.opening-pieces span:nth-child(1){color:#456A47;--order:0}.opening-pieces span:nth-child(2){color:#b28e2a;--order:1}.opening-pieces span:nth-child(3){color:#A40B40;--order:2}.opening-pieces span:nth-child(4){color:#44688B;--order:3}.opening-pieces span:nth-child(5){color:#159A8C;--order:4}.opening-pieces span:nth-child(6){color:#8B4A2B;--order:5}
.opening-invitation{line-height:1.9;margin:20px 0 24px;animation-delay:5s;animation-duration:1.2s}
#opening-enter{animation-delay:5.6s;animation-duration:1.1s;letter-spacing:2px}
.opening-active .chess-companion{opacity:0;pointer-events:none}
.opening-revealing .chess-companion{opacity:1;transition:opacity .8s}
.opening-revealing .companion-mute,.opening-revealing .companion-speech{display:none}
.opening-revealing .master-art{filter:drop-shadow(0 0 14px #c9f7ee88)}
@keyframes opening-pigment{from{translate:0 0;scale:.9;rotate:-12deg}to{translate:5vw 3vh;scale:1.15;rotate:16deg}}
@media(max-width:540px){.opening-pigments i{width:85vw;height:85vw;filter:blur(40px)}.opening-eyebrow{font-size:6px;letter-spacing:2px}.opening-pieces{gap:18px;font-size:22px;margin-top:18px}.opening-invitation{font-size:11px}#opening-writing{max-height:39svh}}
@media(max-height:650px){.opening-copy{padding-top:58px;padding-bottom:36px}.opening-pieces{margin-top:12px;font-size:20px}.opening-invitation{margin:12px 0 12px}#opening-writing{max-height:35svh}}
@media(prefers-reduced-motion:reduce){.opening-pigments i,.opening-pieces span{animation:none}.opening-revealing .chess-companion{transition:none}}

/* Prologue: a living character summons the handwriting before the visitor casts the reveal. */
#opening{--writing-color:#ecebda;--writing-accent:#a9ddd2;background:#080e10;color:#e6e7d9}
#opening:before{content:'';position:absolute;left:50%;top:22%;width:340px;height:290px;translate:-50% -50%;background:radial-gradient(ellipse,#6fe1da26,transparent 65%);animation:opening-summon 2.4s both;pointer-events:none}
#opening:after{opacity:.05;mix-blend-mode:screen}
#opening .opening-paper{opacity:.18;background:radial-gradient(ellipse at 50% 25%,#53877c44,transparent 70%);mask-image:none;transform:none}
#opening .opening-pigments{opacity:.3}
#opening .opening-pigments i{opacity:.18;mix-blend-mode:screen;animation-delay:0s}
.opening-signature{color:#dce6dc;font-size:29px;opacity:.8;z-index:2}
#opening .opening-copy{position:absolute;left:50%;top:32%;translate:-50% 0;width:min(100%,760px);padding:0 26px;margin:0;transition:opacity .8s,filter .8s,translate 1s}
#opening .opening-eyebrow{font:8px/1.6 Arial,sans-serif;letter-spacing:3px;color:#91aaa4;margin:0 0 18px;animation:opening-type 1.2s both 1.2s}
#opening-writing{max-height:30svh;width:min(100%,580px);filter:drop-shadow(0 0 14px #b5eddb12)}
#opening .opening-invitation{font:12px/1.9 Arial,sans-serif;color:#a5b6b0;margin:22px 0 16px;animation-delay:6.1s;animation-duration:1.1s}
.opening-invitation em{font:italic 21px/1.8 Georgia,serif;color:#e2dfca}
#opening-enter{font-size:9px;color:#e4e8da;padding:13px 2px;border-bottom:1px solid #b5d8bc66;animation-delay:6.7s;animation-duration:1s;letter-spacing:2.2px}
#opening-enter:focus-visible,#opening-skip:focus-visible{outline:1px solid #b5e9d6}
#opening-skip,.opening-count{color:#90a59c}
.opening-thread{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.opening-thread path{fill:none;stroke:#a2f8ec;stroke-width:1;stroke-dasharray:2 5;opacity:.45;filter:drop-shadow(0 0 4px #80f7dc);animation:opening-thread-flow 1.8s linear infinite}
#opening .opening-orbit{position:absolute;inset:0;display:block;margin:0;pointer-events:none;z-index:2}
.opening-orbit span{position:absolute;left:calc(50% + var(--x));top:calc(22% + var(--y));width:32px;height:32px;margin:-16px;display:grid;place-items:center;font:21px Georgia,serif;border:1px solid currentColor;border-radius:10px;background:#091313b3;box-shadow:0 0 25px -8px currentColor;animation:opening-type 1.4s both,opening-orbit-float 3.8s ease-in-out infinite alternate;animation-delay:calc(2.5s + var(--order)*.3s),calc(3.9s + var(--order)*.3s)}
.opening-orbit span:nth-child(1){--x:-142px;--y:6px;color:#81b388}
.opening-orbit span:nth-child(2){--x:-96px;--y:-58px;color:#DFB84C}
.opening-orbit span:nth-child(3){--x:96px;--y:-58px;color:#e4507d}
.opening-orbit span:nth-child(4){--x:142px;--y:6px;color:#7da9d0}
.opening-orbit span:nth-child(5){--x:96px;--y:64px;color:#36c9b9}
.opening-orbit span:nth-child(6){--x:-96px;--y:64px;color:#bf845f}
.opening-stars{position:absolute;inset:0;pointer-events:none;opacity:.45;background:radial-gradient(circle at 28% 32%,#a5e9d9 0 1px,transparent 2px),radial-gradient(circle at 67% 15%,#b3e7e4 0 1px,transparent 2px),radial-gradient(circle at 15% 65%,#a3d8ce 0 1px,transparent 2px),radial-gradient(circle at 82% 54%,#a3d8ce 0 1px,transparent 2px),radial-gradient(circle at 76% 78%,#a3d8ce 0 1px,transparent 2px);animation:opening-dust 9s ease-in-out infinite alternate}
.opening-active .chess-companion{opacity:1;animation:opening-master-arrive 1.7s both .25s;pointer-events:none}
.opening-active .companion-mute,.opening-active .companion-speech{display:none}
.opening-active .master-art{filter:drop-shadow(0 0 12px #77ead85c)}
.opening-revealing .chess-companion{animation:none;opacity:1}
#opening.is-departing .opening-copy,#opening.is-departing .opening-orbit{opacity:0;filter:blur(7px);transition:opacity .8s,filter .8s}
@keyframes opening-summon{0%{opacity:0;scale:.04}25%{opacity:1;scale:.16}100%{opacity:1;scale:1}}
@keyframes opening-master-arrive{from{opacity:0;filter:brightness(2);transform:translateY(14px)}to{opacity:1;filter:none;transform:translateY(0)}}
@keyframes opening-fragment{0%{opacity:0;transform:translateY(10px) scale(.6)}25%{opacity:.85;transform:translateY(0) scale(1)}100%{opacity:1;transform:translateY(-7px) scale(1)}}
@keyframes opening-thread-flow{to{stroke-dashoffset:-28}}
@keyframes opening-dust{from{translate:0 6px;opacity:.2}to{translate:7px -10px;opacity:.6}}
@media(max-width:540px){#opening .opening-copy{top:33%;padding:0 23px}#opening-writing{max-height:29svh}#opening .opening-eyebrow{font-size:6px;letter-spacing:1.7px;margin-bottom:16px}#opening .opening-invitation{font-size:11px;margin-top:20px}.opening-invitation em{font-size:19px}.opening-orbit span:nth-child(1){--x:-130px}.opening-orbit span:nth-child(4){--x:130px}.opening-signature{font-size:26px}}
@media(max-height:650px){#opening .opening-copy{top:35%}#opening-writing{max-height:25svh}#opening .opening-eyebrow{margin-bottom:8px}#opening .opening-invitation{margin:12px 0 8px;font-size:10px}.opening-invitation em{font-size:17px}.opening-orbit span{font-size:16px;width:26px;height:26px}.opening-orbit span:nth-child(2),.opening-orbit span:nth-child(3){--y:-35px}.opening-orbit span:nth-child(5),.opening-orbit span:nth-child(6){--y:40px}}
@media(prefers-reduced-motion:reduce){#opening:before,.opening-active .chess-companion,.opening-thread path,.opening-orbit span,.opening-stars{animation:none!important}.opening-orbit span{opacity:1}#opening.is-departing .opening-copy{transition:none}.opening-thread{display:none}}

@keyframes opening-orbit-float{from{transform:translateY(0)}to{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){#opening *,#opening:before{animation:none!important;transition:none!important}}

/* Crystal summoning: image and pigment share the same irregular, expanding SVG mask. */
.opening-summoning{position:absolute;inset:0;pointer-events:none;z-index:2}
.intro-crystal{position:absolute;left:var(--px);top:var(--py);translate:-50% -50%;width:clamp(100px,14vw,205px);height:clamp(145px,25svh,270px);opacity:0;will-change:transform,opacity}
.intro-crystal>svg{width:100%;height:100%;overflow:visible;animation:crystal-drift 5s ease-in-out infinite alternate;animation-delay:calc(var(--index)*-.7s)}
.summon-stain{opacity:.72}
.summon-piece{opacity:0;filter:drop-shadow(0 12px 10px #0006)}
.intro-rook{--px:17%;--py:38%;rotate:-6deg}
.intro-queen{--px:83%;--py:34%;rotate:5deg}
.intro-king{--px:13%;--py:71%;rotate:4deg}
.intro-bishop{--px:88%;--py:67%;rotate:-5deg}
.intro-knight{--px:34%;--py:84%;rotate:-7deg}
.intro-pawn{--px:68%;--py:83%;rotate:7deg}
.opening-trails{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.opening-trails path{fill:none;stroke-width:3;stroke-dasharray:1;stroke-linecap:round;filter:blur(2px)}
#opening:before{top:16%;width:310px;height:230px}
#opening .opening-copy{top:38%;width:min(58%,850px);padding:0 10px;z-index:4;pointer-events:none}
#opening-title{font:400 clamp(33px,4.9vw,72px)/1.1 'Didot','Bodoni 72','Times New Roman',serif;letter-spacing:-1.5px;margin:0;text-wrap:nowrap}
#opening-title span,#opening-title em{display:block;animation:none;opacity:0;filter:blur(20px);transform:translateY(9px) scale(1.06);color:#efeede;font-weight:400}
#opening-title em{color:#b5e4d5}
#opening .opening-eyebrow{opacity:0;animation:none;font-size:7px;letter-spacing:2.6px;margin-bottom:20px;color:#a7b8ac}
#opening .opening-invitation{opacity:0;animation:none;font:11px/1.8 Arial,sans-serif;margin:22px auto 16px;max-width:260px;color:#b3bfb6}
#opening-enter{opacity:0;animation:none;pointer-events:auto;font-size:8px;letter-spacing:1.8px;padding:10px 0}
#opening.message-visible .opening-eyebrow{animation:spell-caption 1.2s both .1s}
#opening.message-visible #opening-title span,#opening.message-visible #opening-title em{animation:spell-letters 1.1s cubic-bezier(.16,.75,.3,1) both}
#opening.message-visible #opening-title span:nth-child(2){animation-delay:.18s}
#opening.message-visible #opening-title em{animation-delay:.38s}
#opening.message-visible .opening-invitation{animation:spell-caption 1s both .55s}
#opening.message-visible #opening-enter{animation:spell-caption 1s both .8s}
#opening.is-gathering .opening-copy{opacity:0;filter:blur(15px);transition:opacity .7s,filter .7s}
#opening.is-gathering:after{background:radial-gradient(circle at 50% 54%,#a6e5dd99,transparent 20%);mix-blend-mode:screen;animation:convergence-glow 2.1s both;opacity:1}
.opening-active .chess-companion{animation:opening-master-arrive 1.7s both .25s}
@keyframes crystal-drift{from{transform:translateY(-4px) rotate(-1deg)}to{transform:translateY(5px) rotate(1deg)}}
@keyframes spell-letters{0%{opacity:0;filter:blur(22px);transform:translateY(10px) scale(1.06);text-shadow:0 0 35px #b4fff5}55%{opacity:1;text-shadow:0 0 24px #b4fff588}100%{opacity:1;filter:blur(0);transform:none;text-shadow:0 0 0 transparent}}
@keyframes spell-caption{from{opacity:0;filter:blur(9px);translate:0 6px}to{opacity:1;filter:blur(0);translate:0 0}}
@keyframes convergence-glow{0%{opacity:0;scale:.7}80%{opacity:.6;scale:1}100%{opacity:1;scale:1.15}}
@media(max-width:540px){
 .intro-crystal{width:96px;height:146px}
 .intro-rook{--px:16%;--py:34%}.intro-queen{--px:84%;--py:33%}
 .intro-king{--px:12%;--py:65%}.intro-bishop{--px:88%;--py:64%}
 .intro-knight{--px:32%;--py:83%}.intro-pawn{--px:70%;--py:83%}
 #opening .opening-copy{top:42%;width:65%;padding:0 5px}
 #opening-title{font-size:clamp(25px,7.5vw,37px);letter-spacing:-.8px}
 #opening .opening-eyebrow{font-size:5px;letter-spacing:1.8px;margin-bottom:16px}
 #opening .opening-invitation{font-size:9px;max-width:190px;margin:20px auto 12px}
 #opening-enter{font-size:6px;letter-spacing:1.1px}
}
@media(max-height:650px) and (min-width:541px){.intro-crystal{height:160px;width:120px}#opening .opening-copy{top:38%}#opening-title{font-size:35px}#opening .opening-eyebrow{margin-bottom:10px}#opening .opening-invitation{margin:10px auto 8px}#opening-enter{padding:5px 0}}
@media(prefers-reduced-motion:reduce){#opening .intro-crystal>svg{animation:none}#opening.message-visible #opening-title span,#opening.message-visible #opening-title em,#opening.message-visible .opening-eyebrow,#opening.message-visible .opening-invitation,#opening.message-visible #opening-enter{opacity:1;filter:none;transform:none;translate:none;animation:none!important}}

/* Moving currents of pigment behind each crystal, independent of its quiet float. */
.summon-veil{opacity:.7;transform-box:view-box;transform-origin:120px 185px;animation:ink-veil-breathe 7.3s ease-in-out infinite alternate;animation-delay:calc(var(--index)*-1.1s)}
.summon-current{opacity:.45;transform-box:view-box;transform-origin:120px 185px;animation:ink-current-flow 9s ease-in-out infinite alternate;animation-delay:calc(var(--index)*-1.7s);mix-blend-mode:screen}
.opening-atmosphere{position:absolute;inset:-12%;overflow:hidden;pointer-events:none;translate:calc(var(--ambient-x,0px)*.4) calc(var(--ambient-y,0px)*.4)}
.opening-atmosphere i{position:absolute;inset:-15%;opacity:.42;filter:blur(45px);background:radial-gradient(ellipse at 18% 52%,#235f5266,transparent 40%),radial-gradient(ellipse at 80% 30%,#2c415c5c,transparent 38%);animation:opening-mist-flow 21s ease-in-out infinite alternate}
.opening-atmosphere i:nth-child(2){opacity:.28;background:radial-gradient(ellipse at 75% 80%,#74542d66,transparent 34%),radial-gradient(ellipse at 37% 18%,#19545177,transparent 30%);animation-duration:27s;animation-delay:-9s}
.opening-atmosphere i:nth-child(3){opacity:.24;background:radial-gradient(ellipse at 20% 90%,#354f7555,transparent 38%),radial-gradient(ellipse at 80% 20%,#6d594344,transparent 44%);animation-duration:31s;animation-delay:-16s}
.opening-lightshaft{position:absolute;inset:-15%;pointer-events:none;background:conic-gradient(from 154deg at 51% 0%,transparent 0deg,#c7e9d40c 10deg,transparent 20deg,#78b6b40d 30deg,transparent 40deg);filter:blur(16px);opacity:.55;mask-image:linear-gradient(#000,transparent 85%);animation:opening-shaft-sway 17s ease-in-out infinite alternate;translate:var(--ambient-x,0px) 0}
.opening-depth{position:absolute;left:-40%;right:-40%;height:70%;bottom:-22%;pointer-events:none;transform:perspective(600px) rotateX(62deg);background:linear-gradient(#8dab9d16 1px,transparent 1px),linear-gradient(90deg,#8dab9d16 1px,transparent 1px);background-size:110px 110px;mask-image:radial-gradient(ellipse at 50% 50%,#0009,transparent 65%);opacity:.33;animation:opening-board-drift 24s linear infinite}
.opening-stars{opacity:.65;filter:drop-shadow(0 0 3px #d6e9cc55)}
.opening-trails path{stroke-width:3.5;filter:blur(1px) drop-shadow(0 0 7px currentColor)}
#opening.is-gathering:after{animation-duration:2.7s}
@keyframes ink-veil-breathe{from{transform:translate(-5px,4px) rotate(-9deg) scale(.93,1.02)}to{transform:translate(5px,-6px) rotate(12deg) scale(1.15,.95)}}
@keyframes ink-current-flow{from{transform:translate(7px,-4px) rotate(16deg) scale(1.05,.95)}to{transform:translate(-9px,6px) rotate(-18deg) scale(.94,1.12)}}
@keyframes opening-mist-flow{from{transform:translate(-3%,-1%) scale(.96) rotate(-3deg)}to{transform:translate(4%,3%) scale(1.12) rotate(4deg)}}
@keyframes opening-shaft-sway{from{rotate:-3deg;opacity:.35}to{rotate:4deg;opacity:.65}}
@keyframes opening-board-drift{to{background-position:0 110px,0 110px}}
@media(max-width:540px){.opening-atmosphere i{filter:blur(28px)}.opening-depth{background-size:70px 70px;opacity:.25}}
@media(prefers-reduced-motion:reduce){.opening-atmosphere,.opening-lightshaft{translate:none}.summon-veil,.summon-current{animation:none!important}}
.opening-atmosphere i:first-child{opacity:.62;background:radial-gradient(ellipse at 12% 52%,#287a687a,transparent 43%),radial-gradient(ellipse at 88% 28%,#35578077,transparent 42%);animation-duration:16s}
.opening-atmosphere i:nth-child(2){opacity:.42;animation-duration:20s}
.opening-depth{opacity:.58;background-image:linear-gradient(#8dab9d26 1px,transparent 1px),linear-gradient(90deg,#8dab9d26 1px,transparent 1px)}

/* Pale, fibrous paper gives the original colored crystal its contrast back. */
#opening{background:#f4f3ee;color:#273b31}
#opening .opening-paper{opacity:.8;background:radial-gradient(ellipse at 50% 40%,#fff9,transparent 65%),url('./assets/paper-grain.svg') repeat;background-size:auto,180px 180px;mix-blend-mode:multiply}
#opening:after{opacity:.16;mix-blend-mode:multiply}
#opening:before{background:radial-gradient(ellipse,#78b8a52b,transparent 66%)}
.opening-signature{color:#304438;opacity:.9}
#opening .opening-atmosphere{opacity:.16;mix-blend-mode:multiply}
#opening .opening-lightshaft{opacity:.15;mix-blend-mode:multiply}
#opening .opening-depth{opacity:.23;mix-blend-mode:multiply}
#opening .opening-stars{opacity:.2;filter:none;mix-blend-mode:multiply}
#opening .opening-pigments{opacity:.25;mix-blend-mode:multiply}
#opening-title span{color:#263b2e}
#opening-title em{color:#456A47}
#opening .opening-eyebrow{color:#647a6c}
#opening .opening-invitation{color:#607367}
#opening-enter{color:#314e3b;border-bottom-color:#456A4755}
#opening-skip,.opening-count{color:#6d7e6b}
#opening-enter:focus-visible,#opening-skip:focus-visible{outline-color:#456A47}
.opening-active .master-art{filter:drop-shadow(0 5px 5px #293b3026)}
.summon-piece{filter:drop-shadow(0 9px 6px #24382f28)}
.summon-current{mix-blend-mode:multiply}
.summon-stain{opacity:.7}
.opening-summon-rays{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:3;pointer-events:none}
.opening-summon-rays path{fill:none;stroke-width:1.6;stroke-dasharray:1;stroke-linecap:round;filter:drop-shadow(0 0 4px #c6dcd288)}
.opening-summon-rays circle{filter:drop-shadow(0 0 5px #f8ffdf)}
.intro-crystal.is-invoked .summon-piece{animation:materialization-light 1.6s both .6s}
#opening.is-gathering:after{mix-blend-mode:multiply;background:radial-gradient(circle at 50% 54%,#759f985c,transparent 22%)}
@keyframes materialization-light{0%{filter:brightness(1.3) drop-shadow(0 0 15px var(--piece-color))}100%{filter:brightness(1) drop-shadow(0 9px 6px #24382f28)}}
@media(prefers-reduced-motion:reduce){.opening-summon-rays{display:none}.intro-crystal.is-invoked .summon-piece{animation:none!important}}
#opening{background:#f8f7f2}
#opening .opening-paper{opacity:.17}
#opening:after{opacity:.055}

/* Pixel magic dissolves into pigment; no continuous connector between mage and crystal. */
.spell-pixel-core,.spell-pixel-mote{shape-rendering:crispEdges}
.spell-pixel-core{filter:drop-shadow(0 0 4px var(--spell-color))}
.spell-pixel-mote{filter:none}
.spell-smoke{filter:blur(4px);mix-blend-mode:multiply}

/* A color gathers at the master's hand before each spell leaves it. */
.master-hand-light{position:absolute;left:calc(50% + 9px);top:calc(50% - 25px);width:28px;height:28px;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff9d9 0 5%,var(--charge-color,#a8e5d6) 15%,transparent 68%);filter:drop-shadow(0 0 5px var(--charge-color,#a8e5d6));transform-origin:center}
.master-hand-light:after{content:'';position:absolute;left:12px;top:12px;width:4px;height:4px;background:#fff9da;box-shadow:6px 0 var(--charge-color),-6px 0 var(--charge-color),0 6px var(--charge-color),0 -6px var(--charge-color)}
.summon-impact{transform-box:view-box;transform-origin:120px 185px}
.summon-stain{translate:var(--ink-follow-x,0px) var(--ink-follow-y,0px)}
.summon-crystal-surface{filter:brightness(calc(1 + var(--crystal-response,0)*.13))}
.summon-cursor-reflex{opacity:calc(var(--crystal-response,0)*.34);filter:blur(5px);translate:var(--reflex-x,0px) 0}
#opening-sound{position:absolute;right:27px;top:21px;z-index:5;min-height:44px;padding:10px 5px;font:8px Arial,sans-serif;letter-spacing:1.2px;color:#607367}
#opening-sound[aria-pressed=true]{color:#2f513b}
#opening-sound:focus-visible{outline:1px solid #456A47;outline-offset:3px}
@media(max-width:540px){#opening-sound{right:12px;top:18px;font-size:6px;letter-spacing:.8px}}
@media(prefers-reduced-motion:reduce){.master-hand-light{display:none}.summon-stain{translate:none}.summon-cursor-reflex{display:none}}

/* Both poses occupy the same frame and share the same shadow during the short blend. */
.master-art{background:url('./assets/chess-master-idle.png') 0 0/1224px 136px no-repeat;opacity:1}
.master-cast{filter:drop-shadow(0 3px 3px #0006)}
.opening-active .master-cast{filter:drop-shadow(0 5px 5px #293b3026)}
@media(prefers-reduced-motion:reduce){.master-art{background-image:url('./assets/chess-master-still.png');background-size:136px 136px}.master-cast{opacity:0!important}.master-art{opacity:1!important}}

/* Shared pixel identity; long chapter copy keeps its reading typeface. */
@font-face{font-family:'Joao Pixel';src:url('./assets/fonts/Silkscreen-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--font-pixel:'Joao Pixel','Courier New',monospace}
.signature,.opening-signature{font-family:var(--font-pixel);font-style:normal;font-weight:400;letter-spacing:.5px;line-height:1.3;font-size:24px}
#opening .opening-signature{font-family:var(--font-pixel);font-size:24px;font-style:normal;letter-spacing:.5px}
#opening-title{font-family:var(--font-pixel);font-size:clamp(28px,4.6vw,56px);font-weight:400;line-height:1.4;letter-spacing:0}
#opening-title span,#opening-title em{font-family:var(--font-pixel);font-style:normal;letter-spacing:0}
#opening .opening-eyebrow{font-family:var(--font-pixel);font-size:8px;letter-spacing:1px;line-height:1.8}
#opening .opening-invitation{font-family:var(--font-pixel);font-size:10px;line-height:1.9;letter-spacing:0;max-width:310px}
#opening-enter,#opening-skip,#opening-sound,#menu-toggle,#scroll-detail,#return-stones,#undo-move,#new-game,#menu [data-go],.companion-pawn,.companion-mute{font-family:var(--font-pixel);font-weight:400;font-style:normal}
#opening-enter{font-size:10px;letter-spacing:.7px}
#opening-skip,#opening-sound{font-size:8px;letter-spacing:.4px}
#menu-toggle{font-size:11px;letter-spacing:.5px}
#menu [data-go]{letter-spacing:0}
.companion-speech p{font-family:var(--font-pixel);font-size:11px;line-height:1.9;letter-spacing:0}
.companion-eyebrow{font-family:var(--font-pixel);font-size:7px;line-height:1.8;letter-spacing:.5px}
.companion-mute{font-size:7px;line-height:1.7;letter-spacing:0}
.editorial h1{font-family:var(--font-pixel);font-size:clamp(26px,4vw,60px);font-weight:400;line-height:1.25;letter-spacing:0}
.opening-count{font-family:var(--font-pixel);font-style:normal;font-size:13px;letter-spacing:2px}
@media(max-width:540px){
 .signature,#opening .opening-signature{font-size:18px;letter-spacing:0}
 #opening-title{font-size:clamp(19px,5.65vw,26px);line-height:1.5;letter-spacing:0}
 #opening .opening-eyebrow{font-size:6px;letter-spacing:.3px}
 #opening .opening-invitation{font-size:8px;line-height:1.9;max-width:205px}
 #opening-enter{font-size:8px;letter-spacing:.3px}
 #opening-skip{font-size:7px;letter-spacing:.3px}
 #opening-sound{font-size:7px;letter-spacing:0;right:10px}
 #menu-toggle{font-size:9px;left:18px}
 .companion-speech p{font-size:10px;line-height:1.8}
 .companion-eyebrow{font-size:6px}
 .editorial h1{font-size:clamp(23px,6vw,31px)}
}
@media(max-height:650px) and (min-width:541px){#opening-title{font-size:30px;line-height:1.35}.signature,#opening .opening-signature{font-size:20px}#opening .opening-invitation{font-size:9px}}

/* Gathering uses separate colored pixel motes instead of smooth connector strokes. */
.gather-pixel{shape-rendering:crispEdges;filter:none;pointer-events:none}

/* King chapter study: a colored opening, an editorial journey and a chapter hand-off. */
#project.editorial-chapter{--king-ink:#294731;--king-gold:#bfa25b}
#project.editorial-chapter .project-hero{min-height:700px;height:100svh;background:linear-gradient(130deg,#203f37a6,#456a471a)}
#project.editorial-chapter .hero-light{inset:0;background:radial-gradient(ellipse at 77% 47%,#f6f0c43d,transparent 46%)}
#project.editorial-chapter #content-note{top:112px;left:7vw;transform:none;font:7px/1.7 var(--font-pixel);letter-spacing:.6px;white-space:normal;text-align:left;max-width:300px;color:#e4e9d5b5}
#project.editorial-chapter .chapter-mark{left:auto;right:7vw;top:125px;opacity:.7}.editorial-chapter .chapter-mark>b{font-family:var(--font-pixel);font-size:29px;font-style:normal}
#project.editorial-chapter .chapter-word{top:auto;bottom:5%;left:4%;transform:none;font-size:16vw;letter-spacing:-.045em;opacity:.08}
#project.editorial-chapter #project-gem{left:auto;right:5%;top:18%;width:34vw;max-width:420px;height:65svh;max-height:650px;transform:none;filter:drop-shadow(18px 24px 16px #132a2755)}
#project.editorial-chapter .project-heading{left:7vw;bottom:12%;transform:none;text-align:left;width:55%;max-width:700px}
#project.editorial-chapter #project-category{font:9px/1.8 var(--font-pixel);letter-spacing:1px;color:#dde5cc}
#project.editorial-chapter #project-category:before{margin:0 0 22px;width:45px;background:#d4bd7c;opacity:1}
#project.editorial-chapter #project-title{font:400 clamp(28px,3.1vw,50px)/1.45 var(--font-pixel);letter-spacing:-.4px;margin:0 0 25px;outline:none;color:#f4f1df}
#project.editorial-chapter #project-title em{font-style:normal;color:#d1dbb1}
#project.editorial-chapter #chapter-opening{font:15px/1.85 Arial,sans-serif;max-width:335px;margin:0 0 30px;opacity:.85}
#project.editorial-chapter #scroll-detail{font-size:8px;letter-spacing:.8px;text-align:left;padding:0}
#project.editorial-chapter #scroll-detail span{display:inline-grid;place-items:center;margin:0 0 0 13px;border:1px solid #e1e9c844;vertical-align:middle}
#project.editorial-chapter>.journey-end{display:none}
.king-story{background:#f4f2eaf5;color:#273e31;position:relative}
.king-story p,.king-story h3,.king-story h4{margin-top:0}
.king-kicker{font:8px/1.9 var(--font-pixel);letter-spacing:1.5px;color:#6b7a61;margin:0 0 25px}
.king-intro{padding:100px 7vw 60px;max-width:1400px;margin:0 auto}
.king-intro-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:7vw;align-items:center}
.king-intro h3,.king-outcomes h3{font:400 clamp(40px,5.5vw,74px)/1.08 'Didot','Bodoni 72',Georgia,serif;letter-spacing:-1.8px;margin:0}
.king-story h3 em,.king-story blockquote em{font-weight:400;color:#638158}
.king-intro-grid>div>p:first-child{font:15px/1.95 Arial,sans-serif;color:#54624f;max-width:410px}
.king-demo{font:10px/1.8 Arial,sans-serif;color:#7a806f;border-left:2px solid #b3b894;padding-left:17px;max-width:390px;margin:25px 0 0}
.king-principles{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #314b3626;border-bottom:1px solid #314b3626;padding:21px 0;margin-top:58px;font:8px/1.8 var(--font-pixel);letter-spacing:1.2px;color:#53664a}
.king-journey{max-width:1400px;margin:0 auto;padding:65px 7vw 100px;display:grid;grid-template-columns:.72fr 1.28fr;gap:9vw;align-items:start}
.king-compass{position:sticky;top:110px}
.king-compass h3{font:400 clamp(36px,3.8vw,53px)/1.1 'Didot',Georgia,serif;letter-spacing:-1px;margin-bottom:24px}
.king-compass-art{height:220px;position:relative;width:150px;margin:30px 0}
.king-compass-art:before{content:'';position:absolute;inset:20% -20% -10%;background:radial-gradient(ellipse,#90a77c55,transparent 70%);filter:blur(12px);animation:king-ink-breathe 7s ease-in-out infinite alternate}
.king-compass-art img{position:relative;height:100%;width:100%;object-fit:contain;filter:drop-shadow(5px 10px 5px #243b2522)}
.king-progress{font:18px var(--font-pixel);color:#355c3b}.king-progress>span:last-child{font-size:10px;color:#8d9584}
.king-compass nav{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:25px}
.king-compass nav button{font:9px/1.8 var(--font-pixel);padding:5px 0;color:#7a8270;text-align:left}
.king-compass nav button[aria-current=step]{color:#2c5437}.king-compass nav button[aria-current=step]:before{content:'▪';margin-right:8px;color:#658857}
.king-timeline{position:relative}.king-timeline:before{content:'';position:absolute;left:-29px;top:0;bottom:30px;width:1px;background:linear-gradient(#c6b47a,#8ca08088,transparent)}
.king-milestone{position:relative;border-top:1px solid #304b3529;padding:35px 0 65px;scroll-margin-top:105px}
.king-milestone:before{content:'';position:absolute;left:-33px;top:0;width:9px;height:9px;background:#d5d7c4;border:2px solid #f4f2ea;transition:background .4s,box-shadow .4s}
.king-milestone.is-current:before{background:#456A47;box-shadow:0 0 0 4px #456a471a}
.king-milestone-head{display:flex;gap:22px;align-items:center;margin-bottom:26px}.king-index{font:22px var(--font-pixel);color:#9aa58a}
.king-milestone-head .king-kicker{margin:0;color:#536c48}.king-milestone-head .king-kicker span{font:8px Arial,sans-serif;letter-spacing:1.4px;display:inline-block;margin-left:10px;padding:5px 7px;border:1px solid #647a4e33;color:#78846c}
.king-role{font:12px/1.7 var(--font-pixel);margin:0 0 7px;color:#315337}.king-company{font:11px/1.7 Arial,sans-serif;color:#858a7d;margin:0 0 30px}
.king-milestone h4{font:400 clamp(30px,3.7vw,49px)/1.15 'Didot',Georgia,serif;letter-spacing:-1px;margin:0 0 23px}
.king-body{font:14px/1.95 Arial,sans-serif;color:#69715f;max-width:520px;margin-bottom:25px}
.king-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}.king-tags span{font:10px/1.6 Arial,sans-serif;color:#667758;border:1px solid #78906533;padding:6px 10px}
.king-milestone details{border-top:1px solid #304b351f;border-bottom:1px solid #304b351f}
.king-milestone summary{display:flex;justify-content:space-between;gap:15px;align-items:center;list-style:none;cursor:pointer;font:9px/1.9 var(--font-pixel);padding:19px 0;color:#3e603d}.king-milestone summary::-webkit-details-marker{display:none}
.king-milestone summary>span{font:24px/1 Arial,sans-serif;transition:rotate .3s}.king-milestone details[open] summary>span{rotate:45deg}
.king-case{padding:5px 0 18px;display:grid;gap:15px}.king-case b{font:8px/1.7 var(--font-pixel);font-weight:400;color:#526c45}.king-case p{font:12px/1.85 Arial,sans-serif;color:#707865;margin:8px 0 0}
.king-outcomes{padding:85px 7vw;background:#e7ebddbd;border-top:1px solid #506d4026;border-bottom:1px solid #506d4026}
.king-outcomes>h3,.king-outcomes>.king-kicker,.king-outcome-grid,.king-outcomes-note{max-width:1200px;margin-left:auto;margin-right:auto}
.king-outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5vw;margin-top:60px}
.king-outcome-grid article{border-top:1px solid #4d6b3a44;padding-top:22px}.king-outcome-grid article>span{font:11px var(--font-pixel);color:#88976e}.king-outcome-grid h4{font:32px 'Didot',Georgia,serif;font-weight:400;letter-spacing:-.7px;margin:24px 0 16px}
.king-outcome-grid p{font:13px/1.9 Arial,sans-serif;color:#677259;max-width:300px}.king-outcomes-note{font:10px/1.8 Arial,sans-serif;color:#89907c;margin-top:35px}
.king-quote{padding:105px 7vw;text-align:center;background:radial-gradient(ellipse at 65% 25%,#7a946b50,transparent 60%),#294c3b;color:#f0eddc;position:relative;overflow:hidden}
.king-quote .king-kicker{color:#b3c5a3}.king-quote blockquote{font:400 clamp(40px,6vw,80px)/1.13 'Didot',Georgia,serif;letter-spacing:-1.6px;margin:35px 0}.king-quote blockquote em{color:#c5cf9f}.king-quote>p:last-child{font:11px/1.8 Arial,sans-serif;color:#bec8b1;margin-top:35px}
.king-quote-mark{position:absolute;font:290px/1 Georgia,serif;opacity:.055;right:2%;bottom:-40px;pointer-events:none}
.king-next{padding:90px 12vw;display:grid;grid-template-columns:1.5fr .7fr;align-items:center;gap:8vw;background:radial-gradient(ellipse at 80% 60%,#dfb84c20,transparent 50%),#f7f4e9}
.king-next h3{font:400 clamp(35px,4.8vw,64px)/1.1 'Didot',Georgia,serif;letter-spacing:-1.3px;margin-bottom:25px}.king-next>div>p:not(.king-kicker){font:13px/1.8 Arial,sans-serif;color:#79806c;max-width:340px}
.king-next img{width:100%;max-width:205px;max-height:330px;object-fit:contain;filter:drop-shadow(9px 16px 8px #6c562623)}
.king-next button{font:9px/1.9 var(--font-pixel);display:block;text-align:left}.king-next-button{border-bottom:1px solid #8a784755;margin:30px 0 25px;padding:10px 0;color:#536341}.king-next-button>span{margin-left:20px;font-size:20px}.king-home-button{color:#8a907c;font-size:7px!important}
.king-story :is(button,summary):focus-visible{outline:2px solid #547649;outline-offset:5px}
.king-motion-ready .king-reveal{opacity:0;translate:0 22px;transition:opacity .9s,translate .9s}.king-motion-ready .king-reveal.is-visible{opacity:1;translate:0 0}
@keyframes king-ink-breathe{from{scale:.9 1.1;translate:-6px 0}to{scale:1.1 .95;translate:8px -8px}}
@media(max-width:899px){.king-journey{grid-template-columns:1fr;gap:45px}.king-compass{position:relative;top:auto;display:grid;grid-template-columns:1fr auto;align-items:center}.king-compass>.king-kicker{grid-column:1/-1}.king-compass-art{display:none}.king-compass h3{margin:0}.king-progress{margin:0}.king-compass nav{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:18px;margin-top:22px}.king-timeline{margin-left:27px}.king-intro-grid{gap:35px}.king-intro h3{font-size:45px}.king-outcome-grid{gap:25px}}
@media(max-width:540px){
 #project.editorial-chapter .project-hero{min-height:760px;height:100svh}
 #project.editorial-chapter #content-note{top:95px;left:7vw;font-size:6px;max-width:230px}
 #project.editorial-chapter #project-gem{top:17%;right:8%;width:47vw;height:34svh;max-height:285px;opacity:.95}
 #project.editorial-chapter .project-heading{left:7vw;bottom:7%;width:87%;max-width:none}
 #project.editorial-chapter #project-title{font-size:clamp(21px,5.6vw,29px);line-height:1.5;margin-bottom:20px}
 #project.editorial-chapter #project-category{font-size:7px}#project.editorial-chapter #project-category:before{margin-bottom:15px}
 #project.editorial-chapter #chapter-opening{font-size:13px;max-width:280px;margin-bottom:20px}
 #project.editorial-chapter #scroll-detail{font-size:7px;letter-spacing:.2px}
 #project.editorial-chapter .chapter-word{font-size:22vw;bottom:6%;left:-2%}
 .king-intro{padding:70px 7vw 35px}.king-intro-grid{grid-template-columns:1fr;gap:25px}.king-intro h3{font-size:43px}.king-intro-grid>div>p:first-child{font-size:14px}
 .king-kicker{font-size:7px;letter-spacing:1px}.king-principles{gap:10px;font-size:6px;letter-spacing:0;padding:17px 0;margin-top:35px}
 .king-journey{padding:40px 7vw 35px;gap:35px}.king-compass h3{font-size:35px}.king-compass nav{gap:10px}.king-compass nav button{font-size:7px}
 .king-timeline{margin-left:20px}.king-timeline:before{left:-21px}.king-milestone:before{left:-25px}.king-milestone{padding:28px 0 45px}.king-index{font-size:17px}.king-milestone-head{gap:15px}.king-milestone-head .king-kicker{font-size:6px;letter-spacing:.5px}.king-role{font-size:10px}.king-milestone h4{font-size:32px}.king-body{font-size:13px}.king-milestone summary{font-size:8px}.king-tags span{font-size:9px}
 .king-outcomes{padding:60px 7vw}.king-outcomes h3{font-size:42px}.king-outcome-grid{grid-template-columns:1fr;gap:22px;margin-top:38px}.king-outcome-grid h4{font-size:29px;margin-top:17px}.king-outcome-grid p{max-width:100%}
 .king-quote{padding:75px 7vw}.king-quote blockquote{font-size:38px;letter-spacing:-1px}.king-quote .king-kicker{font-size:6px}
 .king-next{padding:60px 7vw;gap:20px;grid-template-columns:1fr 90px}.king-next h3{font-size:34px}.king-next .king-kicker{font-size:6px}.king-next-button{font-size:7px!important}.king-home-button{font-size:6px!important}.king-next-button>span{margin-left:6px}.king-next img{max-height:200px}
}
@media(prefers-reduced-motion:reduce){.king-motion-ready .king-reveal{opacity:1;translate:none;transition:none}.king-compass-art:before{animation:none}}

body.project-open:has(#project.editorial-chapter):not(.light-header)>header{background:linear-gradient(#f4f2eaf5,#f4f2eae8 65%,#f4f2ea00);backdrop-filter:blur(4px)}

/* The guide casts from above the board; each pixel spell lands on a real hit target. */
.guide-spells{position:fixed;inset:0;width:100%;height:100%;z-index:79;overflow:hidden;pointer-events:none}
.chess-companion.is-touring .companion-mute{top:128px;opacity:.65}
@media(max-width:600px){.chess-companion.is-touring:has(.master-art) .companion-mute{top:110px}}
@media(prefers-reduced-motion:reduce){.guide-spells{display:none}}

/* Shared chapter language, tinted by the selected crystal. */
#project.editorial-chapter:not(.king-chapter){--chapter-accent:var(--project-color);--chapter-deep:color-mix(in srgb,var(--project-color) 48%,#172629)}
#project.editorial-chapter:not(.king-chapter) .project-hero{background:linear-gradient(130deg,color-mix(in srgb,var(--chapter-deep) 75%,transparent),color-mix(in srgb,var(--project-color) 10%,transparent))}
#project.editorial-chapter:not(.king-chapter) :is(#project-category,#content-note){color:#fff6e4}
#project.editorial-chapter:not(.king-chapter) #project-title em{color:color-mix(in srgb,var(--project-color) 30%,#fff6e4)}
.chapter-story{--chapter-text:color-mix(in srgb,var(--chapter-accent) 25%,#30352e);color:var(--chapter-text);background:color-mix(in srgb,var(--chapter-accent) 3%,#f4f2eaf5)}
.chapter-context{font:14px/1.95 Arial,sans-serif;color:#63685d;max-width:410px}
.chapter-story :is(.king-kicker,.king-role,.king-milestone-head .king-kicker,.king-progress,.king-compass nav button[aria-current=step]){color:var(--chapter-deep)}
.chapter-story :is(h3 em,blockquote em){color:color-mix(in srgb,var(--chapter-accent) 70%,#3b4635)}
.chapter-story .king-compass-art:before{background:radial-gradient(ellipse,color-mix(in srgb,var(--chapter-accent) 30%,transparent),transparent 70%)}
.chapter-story .king-compass nav button[aria-current=step]:before{color:var(--chapter-accent)}
.chapter-story .king-timeline:before{background:linear-gradient(var(--chapter-accent),color-mix(in srgb,var(--chapter-accent) 30%,transparent),transparent)}
.chapter-story .king-milestone.is-current:before{background:var(--chapter-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--chapter-accent) 12%,transparent)}
.chapter-story .king-quote{background:radial-gradient(ellipse at 65% 25%,color-mix(in srgb,var(--chapter-accent) 45%,transparent),transparent 60%),var(--chapter-deep)}
.chapter-story .king-quote .king-kicker,.chapter-story .king-quote>p:last-child{color:#eae7dc}
.chapter-story .king-quote blockquote em{color:color-mix(in srgb,var(--chapter-accent) 20%,#fff5d5)}
.chapter-story .king-next{background:radial-gradient(ellipse at 80% 60%,color-mix(in srgb,var(--chapter-accent) 12%,transparent),transparent 50%),#f7f4e9}
.chapter-story :is(button,summary,a):focus-visible{outline:2px solid var(--chapter-accent);outline-offset:5px}
.chapter-stack-tags{gap:10px}.chapter-stack-tags span{font-size:13px;padding:10px 14px;color:var(--chapter-deep);background:color-mix(in srgb,var(--chapter-accent) 4%,transparent);border-color:color-mix(in srgb,var(--chapter-accent) 25%,transparent)}
.chapter-contact-link{display:inline-flex;align-items:center;gap:25px;font:9px/1.9 var(--font-pixel);color:var(--chapter-deep);border-bottom:1px solid color-mix(in srgb,var(--chapter-accent) 45%,transparent);padding:12px 0;text-decoration:none;transition:gap .25s,color .25s}
.chapter-contact-link:hover{gap:36px;color:var(--chapter-accent)}.chapter-contact-link>span{font:24px Arial,sans-serif}
.chapter-story #chess-game{background:color-mix(in srgb,var(--chapter-accent) 4%,#f4f2ea);border-top:1px solid #48382020;border-bottom:1px solid #48382020}
.chapter-story #game-heading{color:var(--chapter-deep)}
@media(max-width:540px){.chapter-stack-tags span{font-size:12px;padding:9px 11px}.chapter-contact-link{font-size:8px}.chapter-context{font-size:13px}}
@media(prefers-reduced-motion:reduce){.chapter-contact-link{transition:none}}
#project.editorial-chapter .project-hero{color:#f4f1df}
#project.editorial-chapter.gold-section .project-hero{background:linear-gradient(125deg,#3f351bc9,#63502166)}
#project.editorial-chapter.gold-section .project-hero #chapter-opening,#project.editorial-chapter.gold-section #scroll-detail{color:#fff7df}
#project.editorial-chapter.gold-section .chapter-mark{color:#fff4cd}

/* Scroll controls entry and exit in both directions; the central reading area stays solid. */
.chapter-scroll-ready [data-scroll-reveal]{opacity:var(--scroll-opacity,1);translate:0 var(--scroll-y,0px);transition:opacity .14s linear,translate .18s ease-out}
.chapter-scroll-ready [data-scroll-reveal]:focus-within{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.chapter-scroll-ready [data-scroll-reveal]{opacity:1;translate:none;transition:none}}
@media print{.chapter-scroll-ready [data-scroll-reveal]{opacity:1;translate:none}}

/* The master accompanies chapter stops instead of circling over the text. */
.chess-companion[data-phase=reading] .companion-speech{bottom:calc(100% + 12px)}
.chess-companion[data-phase=reading] .companion-speech:before{bottom:-8px;left:20px;right:auto;rotate:-45deg;border:0;border-left:2px solid #af9c635e;border-bottom:2px solid #af9c635e}
.chess-companion[data-phase=reading].speech-on-left .companion-speech:before{left:auto;right:25px}
.chess-companion.is-travelling .companion-pawn{filter:drop-shadow(0 0 6px #a6e1dd35)}
@media(prefers-reduced-motion:reduce){.chess-companion.is-travelling .companion-pawn{filter:none}}
.chess-companion[data-phase=reading].speech-below .companion-speech:before{bottom:auto;top:-8px;rotate:135deg}

/* The opponent occupies real space on the far side of the playable board. */
.master-opponent-perch{height:155px;position:relative;margin:0 0 12px;text-align:center;scroll-margin-top:90px}
.master-opponent-perch>span{position:absolute;bottom:0;left:0;width:100%;font:7px/1.7 var(--font-pixel);letter-spacing:.6px;color:#56675b}
.magic-moving-piece{position:fixed!important;z-index:78;display:grid;place-items:center;pointer-events:none;line-height:1;will-change:translate}
.board-piece.magic-source-hidden{visibility:hidden}.magic-destination:before{content:'';position:absolute;inset:8%;border:2px solid #74cacacc;box-shadow:0 0 14px #8ee7e7aa;z-index:4;pointer-events:none}
.chess-move-mote{position:fixed;z-index:77;width:3px;height:3px;background:#9cece7;pointer-events:none;box-shadow:0 0 5px #70c8d4}
.chess-companion.is-game-casting .companion-pawn,.chess-companion.is-game-casting .companion-mute{pointer-events:none}
.chess-companion.is-chess-opponent .companion-mute{opacity:.7}
@media(max-width:600px){.master-opponent-perch{height:145px}.master-opponent-perch>span{font-size:6px}}
@media(prefers-reduced-motion:reduce){.magic-destination:before{box-shadow:none}}
#chess-game .game-board-wrap{max-width:min(570px,calc(100svh - 310px))}
@media(max-width:899px){#chess-game .game-board-wrap{max-width:min(570px,100%)}}
.chess-companion.is-chess-opponent .companion-mute{top:90px;left:100%;width:100px}
.chess-companion.is-game-casting .companion-mute{opacity:0}
/* A quiet hover keeps the opponent alive while the visitor thinks. */
.chess-companion.is-chess-opponent[data-phase=reading] .companion-pawn{animation:chess-master-hover 6.8s ease-in-out infinite}
.chess-companion.is-game-casting .companion-pawn{animation-play-state:paused}
@keyframes chess-master-hover{0%,100%{transform:translate(0,0) rotate(-.4deg)}45%{transform:translate(3px,-5px) rotate(.5deg)}75%{transform:translate(-2px,-2px) rotate(-.2deg)}}
@media(prefers-reduced-motion:reduce){.chess-companion.is-chess-opponent[data-phase=reading] .companion-pawn{animation:none}}
.chess-companion[data-phase=reading].speech-beside .companion-speech:before{top:40px;bottom:auto;right:-8px;left:auto;rotate:-135deg}
@media(max-width:899px){.chess-companion.is-chess-opponent .companion-mute{left:auto;right:0;top:112px;width:96px}}

/* Speech control belongs to the viewport, independently of the character. */
body>.companion-mute{position:fixed;top:auto;left:auto;right:max(14px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:85;width:auto;min-width:102px;min-height:36px;padding:8px 10px;font:6px/1.7 var(--font-pixel);letter-spacing:0;color:#f4efde;background:#20251dd9;border:1px solid #b9b39755;box-shadow:2px 2px 0 #0002;text-shadow:none;opacity:.78;transition:opacity .2s}
body>.companion-mute:hover,body>.companion-mute:focus-visible{opacity:1;color:#fff}
body.menu-open>.companion-mute{visibility:hidden}
#home .editorial h1{font:400 clamp(12px,1.55vw,21px)/1.65 var(--font-pixel);letter-spacing:0;white-space:normal;max-width:900px;width:88%;margin:0 auto 10px;text-wrap:balance}
@media(max-width:540px){#home .editorial{bottom:5%}#home .editorial h1{font-size:12px;max-width:330px;line-height:1.7}#home .editorial>p{font-size:5px;letter-spacing:1px}body>.companion-mute{min-width:90px;min-height:32px;font-size:5px;padding:7px 9px}}
@media(prefers-reduced-motion:reduce){body>.companion-mute{transition:none}}

/* Keep the prologue's raster surfaces stable: motion lives in transforms, not filter rebuilds. */
#opening{isolation:isolate;overflow:hidden}
#opening .intro-crystal{isolation:isolate;contain:layout style}
#opening .opening-pigments i{filter:none;background:radial-gradient(ellipse,var(--ink),transparent 70%);mix-blend-mode:normal}
#opening .opening-atmosphere i,#opening .opening-lightshaft{filter:none}
#opening .summon-current{mix-blend-mode:normal}
#opening .intro-crystal.is-invoked .summon-piece{animation:none}
#opening .summon-crystal-surface{filter:none}
#opening .summon-cursor-reflex{filter:none}

/* Raster summoning: avoid nested live SVG masks/filters in Chrome's compositor. */
#opening .intro-crystal{will-change:auto}
#opening .summon-raster-stage{position:relative;width:100%;height:100%;animation:crystal-drift 5s ease-in-out infinite alternate;animation-delay:calc(var(--index)*-.7s)}
#opening .summon-impact{position:absolute;inset:0;opacity:0;transform-origin:50% 58%}
#opening .summon-stain{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:none;mix-blend-mode:normal;transform-origin:50% 58%;transform-box:border-box}
#opening .summon-current{opacity:.25}
#opening .summon-piece{position:absolute;left:10.4167%;top:2.5%;width:79.1667%;height:91.25%;object-fit:contain;filter:none;opacity:0;clip-path:inset(100% 0 0 0)}
#opening .opening-paper,#opening:after{background-image:url('./assets/opening-paper.png');background-size:192px;mix-blend-mode:normal;animation:none;transform:none;translate:none}
#opening .opening-atmosphere,#opening .opening-lightshaft,#opening .opening-depth,#opening .opening-stars,#opening .opening-pigments{mix-blend-mode:normal;filter:none}
#opening .opening-atmosphere i{animation:none}
#opening .opening-depth{display:none}
#opening .spell-smoke,#opening .spell-pixel-core,#opening .opening-summon-rays circle{filter:none;mix-blend-mode:normal}
#opening-title span,#opening-title em{filter:none}
#opening.message-visible #opening-title span,#opening.message-visible #opening-title em{animation-name:spell-letters-stable}
#opening.message-visible .opening-eyebrow,#opening.message-visible .opening-invitation,#opening.message-visible #opening-enter{animation-name:spell-caption-stable}
#opening.is-gathering .opening-copy{filter:none;transition:opacity .7s}
.opening-active .master-art,.opening-active .master-cast,.opening-active .chess-companion{filter:none}
.opening-active #home{visibility:hidden}
.opening-active #home *, .opening-active .paper *{animation-play-state:paused!important}
@keyframes spell-letters-stable{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes spell-caption-stable{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){#opening .summon-raster-stage{animation:none}}

/* Touch browser bars change the visible height without changing the page's orientation. */
@media(max-width:899px){
 #home{height:100dvh;min-height:100svh}
 #menu{height:100dvh}
}
/* Mobile speech is outside the translated character, above its actual sprite bounds. */
body>.companion-mobile-speech{position:fixed;z-index:90;box-sizing:border-box;margin:0;max-height:calc(100dvh - 100px);overflow:visible;transform:none;transition:opacity .2s,visibility .2s;pointer-events:none}
body>.companion-mobile-speech.is-visible{opacity:1;visibility:visible;transform:none}
body>.companion-mobile-speech:before{left:var(--speech-arrow-x,28px);right:auto;bottom:-8px;top:auto;width:12px;height:12px;rotate:-45deg;border:0;border-left:2px solid #af9c635e;border-bottom:2px solid #af9c635e}
body>.companion-mobile-speech[data-side=below]:before{top:-8px;bottom:auto;rotate:135deg}
body.opening-active>.companion-mobile-speech,body.opening-revealing>.companion-mobile-speech,body.menu-open>.companion-mobile-speech{display:none}
body>.companion-mobile-speech{color:#f2eedf}
@media(max-width:899px){
 body:not(.project-open){height:100dvh}
 .section-paper{height:100lvh}
}