/* Paper, ink, mist and the forty painted gardens. Scoped to the studio opening. */
.ink-opening{--ink-x:0;--ink-y:0;--ink-paper:#f8f8f5;position:relative;background:var(--ink-paper);color:#303a36;isolation:isolate;overflow:hidden;min-height:650px;height:calc(100svh - 72px);display:flex;flex-direction:column}
.ink-opening:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.35' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.ink-topline{position:absolute;top:26px;left:5.2%;right:5.2%;display:flex;justify-content:space-between;align-items:center;z-index:7;font-size:11px;letter-spacing:3px;color:#6e766e}
.ink-topline button{font-size:11px;letter-spacing:1px;padding:6px 0;border-bottom:1px solid #9da49a}
.ink-stage{position:relative;flex:1;overflow:hidden;touch-action:pan-y;min-height:0;outline-offset:-5px}
.ink-world{position:absolute;inset:0 auto 0 0;width:800%;display:flex;will-change:transform}
.ink-landscape{position:relative;width:12.5%;height:100%;flex:none;overflow:hidden}
.ink-paintings{position:absolute;inset:0;isolation:isolate}
.ink-paintings:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--ink-paper) 0%,#f8f8f5e6 18%,transparent 43%),linear-gradient(0deg,var(--ink-paper),transparent 24%,transparent 80%,var(--ink-paper));z-index:4}
.ink-art{position:absolute;object-fit:contain;mix-blend-mode:multiply;user-select:none;pointer-events:none;will-change:transform;-webkit-mask-image:radial-gradient(ellipse at center,#000 46%,transparent 73%);mask-image:radial-gradient(ellipse at center,#000 46%,transparent 73%)}
.ink-art-0{width:81%;height:92%;right:-9%;top:3%;z-index:2;transform:translate3d(calc(var(--ink-x)*-23px),calc(var(--ink-y)*-12px),0)}
.ink-art-1{width:39%;height:49%;left:29%;top:3%;opacity:.57;filter:saturate(.65);z-index:1;transform:translate3d(calc(var(--ink-x)*-9px),calc(var(--ink-y)*-5px),0)}
.ink-art-2{width:37%;height:42%;left:29%;bottom:0;z-index:3;transform:translate3d(calc(var(--ink-x)*-42px),calc(var(--ink-y)*-18px),0)}
.ink-art-3{width:31%;height:42%;right:0;top:1%;opacity:.33;z-index:0;transform:translate3d(calc(var(--ink-x)*-7px),0,0)}
.ink-art-4{width:28%;height:33%;right:-2%;bottom:0;z-index:3;transform:translate3d(calc(var(--ink-x)*-34px),calc(var(--ink-y)*-15px),0)}
.ink-copy{position:relative;z-index:5;width:28%;max-width:385px;margin-left:8%;padding-top:clamp(105px,18vh,180px);pointer-events:none}
.ink-chapter-mark{font-family:var(--serif);font-size:13px;letter-spacing:5px;color:#7f8980;display:block;margin-bottom:15px}
.ink-copy h1,.ink-copy h2{font-family:var(--serif);font-size:clamp(44px,5.7vw,82px);font-weight:400;letter-spacing:5px;line-height:1.35;color:#283a31;white-space:nowrap}
.ink-chapter-title{font-family:var(--serif);font-size:18px;letter-spacing:5px;margin:14px 0 19px}
.ink-description{font-family:var(--serif);font-size:15px;line-height:2.15;letter-spacing:1px;max-width:295px;color:#5a685e}
.ink-specimens{display:flex;flex-wrap:wrap;gap:6px 15px;max-width:285px;margin:25px 0 12px;pointer-events:auto}
.ink-specimens button{font-family:var(--serif);font-size:13px;padding:2px 0;color:#788277;border-bottom:1px solid transparent;letter-spacing:2px}
.ink-specimens button[aria-pressed=true]{color:#3a4b40;border-bottom-color:#71816e}
.ink-detail{font-size:11px;line-height:1.9;max-width:285px;color:#788275;min-height:64px}
.ink-verse{position:absolute;z-index:5;top:17%;right:5%;writing-mode:vertical-rl;font-family:var(--serif);font-size:13px;letter-spacing:6px;color:#70806d}
.ink-controls{position:relative;z-index:7;display:flex;align-items:center;gap:30px;padding:17px 5.2% 23px;background:var(--ink-paper);flex:none;min-height:89px}
.ink-control-buttons{display:flex;align-items:center;gap:15px}.ink-control-buttons button{font-size:24px;min-width:32px;height:34px;line-height:1}.ink-control-buttons #ink-play{font-size:11px;letter-spacing:2px;width:42px}
.ink-timeline{width:310px;max-width:45%;display:grid;gap:5px}.ink-timeline label{font-family:var(--serif);font-size:11px;letter-spacing:2px;color:#697766}.ink-timeline input{width:100%;margin:0;height:17px;accent-color:#647960;cursor:pointer}
.ink-hint{margin-left:auto;font-size:10px;letter-spacing:2px;color:#859080}
.ink-ending{position:absolute;inset:0;background:var(--ink-paper);z-index:6;animation:ink-end-reveal 1.7s both}
.ink-ending[hidden]{display:none}.ink-finished .ink-world{visibility:hidden}.ink-end-art{position:absolute;inset:0;filter:grayscale(1);pointer-events:none;opacity:.68}
.ink-end-art img{position:absolute;width:76%;height:90%;object-fit:contain;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse,#000 30%,transparent 72%);mask-image:radial-gradient(ellipse,#000 30%,transparent 72%)}
.ink-end-art img:first-child{left:-25%;top:6%}.ink-end-art img:last-child{right:-22%;top:9%;transform:scaleX(-1)}
.ink-end-copy{position:relative;display:flex;height:100%;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:85px 20px 30px;background:linear-gradient(90deg,transparent,#f8f8f5b3 35%,#f8f8f5b3 65%,transparent)}
.ink-end-copy>p{font-family:var(--serif);font-size:14px;letter-spacing:5px;color:#6d746f}.ink-end-copy h2{font-family:var(--serif);font-size:clamp(31px,3.2vw,48px);line-height:1.7;letter-spacing:5px;margin-top:17px;color:#303631}
#ink-enter{position:relative;margin:35px 0 20px;isolation:isolate;perspective:600px;transform:rotateX(7deg) rotateY(-9deg);transition:transform .25s}
#ink-enter span{display:block;position:relative;z-index:1;background:#f5f5ef;border:1px solid #59625a;padding:18px 43px;font-family:var(--serif);font-size:23px;letter-spacing:8px;color:#303631;box-shadow:6px 8px 0 #bfc3b9,7px 9px 0 1px #747c72}
#ink-enter:hover{transform:rotateX(0) rotateY(0) translateY(-3px)}#ink-enter:active{transform:translate(4px,5px)}.ink-end-note{font-size:10px;color:#7d857b;letter-spacing:5px;margin:10px 0 18px}#ink-replay{font-size:11px;color:#6b7569;letter-spacing:2px;padding:7px;border-bottom:1px solid #b5bdb1}
.ink-studio-replay{display:block;text-align:center;padding:16px 3%;font-family:var(--serif);font-size:13px;color:#66755e}.ink-studio-replay a{border-bottom:1px solid #9ea795;padding:4px}
@keyframes ink-end-reveal{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}
@media(min-width:1600px){.ink-copy{padding-top:17vh}.ink-description{font-size:17px}.ink-detail{font-size:13px}}
@media(max-height:760px) and (min-width:761px){.ink-opening{min-height:585px}.ink-copy{padding-top:100px}.ink-copy h1,.ink-copy h2{font-size:58px}.ink-specimens{margin-top:15px}.ink-end-copy h2{font-size:34px}#ink-enter{margin-top:22px}}
@media(max-width:760px){.ink-opening{height:calc(100svh - 100px);min-height:710px}.ink-topline{top:17px;font-size:10px}.ink-copy{margin-left:7%;width:84%;max-width:none;padding-top:63px}.ink-copy h1,.ink-copy h2{font-size:43px;letter-spacing:4px}.ink-chapter-mark{font-size:11px;margin-bottom:3px}.ink-chapter-title{font-size:15px;margin:5px 0 9px}.ink-description{font-size:13px;max-width:90%;line-height:1.9}.ink-specimens{margin:15px 0 8px;max-width:100%;gap:4px 18px}.ink-specimens button{font-size:12px}.ink-detail{font-size:11px;max-width:90%;min-height:0;line-height:1.75}.ink-paintings{top:260px;bottom:-15px}.ink-paintings:after{background:linear-gradient(0deg,var(--ink-paper),transparent 22%,transparent 80%,var(--ink-paper))}.ink-art-0{width:115%;height:100%;right:-12%;top:0}.ink-art-1{width:65%;height:60%;left:-23%;top:-5%}.ink-art-2{width:58%;height:55%;left:-10%;bottom:-8%}.ink-art-3{width:50%;right:-17%;top:-4%}.ink-art-4{width:48%;right:-9%;bottom:-5%}.ink-verse{display:none}.ink-controls{padding:10px 5% 18px;gap:15px;min-height:80px;flex-wrap:wrap}.ink-control-buttons{gap:8px}.ink-timeline{flex:1;max-width:none;width:auto;min-width:100px}.ink-hint{font-size:9px;margin:0;width:100%;text-align:center}.ink-end-copy{padding-top:70px}.ink-end-copy>p{font-size:12px;letter-spacing:3px}.ink-end-copy h2{font-size:32px;letter-spacing:3px}.ink-end-art img{height:70%;width:110%;top:35%!important}.ink-end-art img:first-child{left:-45%}.ink-end-art img:last-child{right:-43%}.ink-end-copy{background:linear-gradient(0deg,transparent,#f8f8f5b8 45%)}#ink-enter span{padding:16px 32px;font-size:21px}.ink-end-note{margin-top:15px}}
@media(prefers-reduced-motion:reduce){.ink-art{transform:none!important}.ink-ending{animation:none}#ink-enter{transform:none;transition:none}}

/* Chapters dissolve on the same sheet, with no panel edges passing the viewer. */
.ink-world{inset:0;width:100%;display:block;will-change:auto}
.ink-landscape{position:absolute;inset:0;width:100%;border:0;background:var(--ink-paper);visibility:hidden;opacity:0;will-change:opacity}
.ink-frame{opacity:0;transition:opacity .3s ease;z-index:2}
.ink-frame-visible{opacity:1}
.ink-art-1{opacity:.22}.ink-art-2{opacity:.32}
.ink-paintings:after{background:linear-gradient(90deg,var(--ink-paper),#f8f8f5dd 20%,transparent 46%),linear-gradient(0deg,var(--ink-paper),transparent 25%,transparent 78%,var(--ink-paper))}
.ink-detail{min-height:70px}.ink-specimens button{transition:color .18s,border-color .18s}
@media(max-width:760px){.ink-paintings:after{background:linear-gradient(0deg,var(--ink-paper),transparent 24%,transparent 76%,var(--ink-paper))}.ink-detail{min-height:40px}}
@media(prefers-reduced-motion:reduce){.ink-frame{transition:none}}