/* A full-frame film followed by five open, individually composed scenes. */
.story-stage{--film-y:5%;background:#ede4d7}
.film-layer{inset:0;mask-image:none;-webkit-mask-image:none}
.film-layer video,.film-poster{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;object-fit:cover;object-position:50% var(--film-y);mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(transparent,#000 2%,#000 96%,transparent);mask-composite:intersect}
.film-shade{background:linear-gradient(90deg,#f5f1e657,transparent 30%),linear-gradient(0deg,#f5f3ed66,transparent 12%)}
.site-header{height:86px;border:0}.hero-copy{top:17%;width:27%;max-width:340px;left:var(--gutter)}
.hero-copy .eyebrow{font-size:8px;letter-spacing:.11em}.hero-copy h1{font-size:clamp(35px,3.7vw,61px);margin-top:17px}
.hero-description{display:none}.hero-copy .text-link{margin-top:22px;font-size:11px}
.chapter-copy{top:16%;bottom:auto;max-width:26%;width:345px;filter:none}
.chapter-copy h2{font-size:clamp(38px,4.2vw,64px);margin:12px 0}.chapter-category{font-size:8px;letter-spacing:.12em}
.chapter-copy>p{font-size:12px;max-width:260px}.chapter-copy .text-link{margin-top:20px;font-size:11px}
.chapter-anchor{display:flex;align-items:center;gap:12px;margin-bottom:23px;color:#68795d}.chapter-anchor b{font-size:9px;letter-spacing:.17em;font-weight:400}
.chapter-anchor i{display:block;width:34px;height:1px;background:#92a27d;transform-origin:left;transition:transform .45s,background .45s;transform:scaleX(.42)}
.story-stage[data-docked] .chapter-anchor i{transform:scaleX(1);background:#5b714f}
.chapter-rail{top:19%;gap:23px}.chapter-rail button[aria-current] i{box-shadow:0 0 0 6px #73856519}
.story-outro,.story-outro.visible{top:18%;bottom:auto}.story-progress{opacity:calc(1 - var(--outro))}
.flow-bridge{background:var(--paper)}
.projects-section{padding-top:75px;padding-bottom:120px;isolation:isolate;overflow:hidden}
.projects-section>.section-heading{margin-bottom:40px;z-index:1;align-items:flex-start}.section-heading h2{font-size:clamp(44px,5.7vw,88px);line-height:1.3;letter-spacing:-.05em}.section-heading>p{margin-top:50px}
.works-list{position:relative;gap:0}.work-row,.work-row.reverse{position:relative;display:block;min-height:850px;height:98svh;max-height:1100px;--reveal:1;--drift:0;--turn:0;isolation:isolate}
.work-row:before{content:attr(data-edition);position:absolute;font:italic 300 clamp(170px,24vw,355px)/1 LocalSerif,Georgia,serif;color:transparent;-webkit-text-stroke:1px #a7b39835;letter-spacing:-.1em;z-index:-1;pointer-events:none}
.work-row:after{content:"";position:absolute;border:1px solid #adbb9852;border-radius:50%;z-index:-1;pointer-events:none;transform:rotate(-24deg)}
.work-copy{position:absolute;z-index:3;opacity:calc(.35 + var(--reveal)*.65);transform:translateY(calc((1 - var(--reveal))*35px));max-width:440px}
.work-copy h3{font-size:clamp(62px,7.7vw,112px);line-height:1;letter-spacing:-.07em;margin:19px 0 25px}.work-tagline{font-size:20px}.work-description{font-size:12px;max-width:330px}.feature-tags{gap:13px}.feature-tags span{border:0;padding:0;border-radius:0;font-size:9px;letter-spacing:.05em}.feature-tags span+span:before{content:"·";margin-right:13px;color:#a7b295}
.demo,.demo-sodu.won{position:absolute;border:0!important;border-radius:0;background:none!important;overflow:visible;isolation:auto;box-shadow:none;transform:translateY(calc((1 - var(--reveal))*70px + var(--drift)*1px));z-index:2}
.demo-top{display:none}.demo-bottom{left:12%;right:12%;bottom:0;align-items:center}.demo-bottom>span{font-size:10px}.demo-action{background:transparent;border:0;border-bottom:1px solid #7a86635e;border-radius:0;padding:10px 0;box-shadow:none;gap:20px}.demo-action:hover{background:none}
.collection-thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}.collection-thread path{stroke:#a3b18e;stroke-width:.85;stroke-opacity:.4;vector-effect:non-scaling-stroke}.collection-thread circle{fill:#81946c;opacity:.65}
#work-furrytale .work-copy{left:2%;top:26%}#work-furrytale .demo{width:58%;height:560px;right:-1%;top:6%}
#work-furrytale:before{content:"01";top:4%;left:1%}#work-furrytale:after{right:1%;top:13%;width:53%;height:45%;border-color:#a6b89145}
.world-scene .mini-island{animation:open-island-breathe 8s ease-in-out infinite;transform:scale(1.9);margin-top:0}.world-halo{width:400px;height:400px;left:calc(50% - 200px);top:37px;border-color:#a7b99845}.world-cloud{filter:blur(4px)}.cloud-a{top:130px;left:9%;width:105px}.cloud-b{top:110px;right:5%;width:74px}
@keyframes open-island-breathe{50%{transform:scale(1.9) translateY(-5px)}}
#work-echoterm{height:112svh;min-height:900px}#work-echoterm .work-copy{top:0;left:42%;max-width:55%}#work-echoterm .work-copy h3{font-size:clamp(65px,9.5vw,140px)}#work-echoterm .work-description{max-width:385px}
#work-echoterm .demo{top:42%;left:1%;width:72%;height:520px}#work-echoterm:before{content:"02";right:2%;top:46%}#work-echoterm:after{top:39%;left:1%;width:79%;height:47%;border-color:#9baa8d45;transform:rotate(12deg)}
.term-window{width:86%;height:315px;left:7%;top:52px;transform:perspective(1300px) rotateY(-8deg) rotateZ(-4deg);border-radius:10px;box-shadow:28px 47px 65px -38px #23352075,3px 6px 0 #a9b0a3}.term-content{padding:29px}.term-block code{font-size:14px}.term-output b{font-size:13px}.term-output p{font-size:10px}.term-ai{font-size:12px;margin-top:25px}.term-ai small{font-size:10px}.window-bar{height:44px}
#work-nicost .work-copy{top:24%;left:6%}#work-nicost .demo{top:7%;right:1%;width:53%;height:560px}#work-nicost:before{content:"03";left:1%;top:7%}#work-nicost:after{right:0;top:5%;width:55%;height:57%;border-color:#adbc9c30;transform:rotate(15deg)}
.cost-dashboard{top:62px;left:10%;width:80%;height:355px;padding:30px;background:#fbfcf5;transform:rotate(7deg);border:0;border-radius:3px;box-shadow:22px 30px 55px -30px #647a4d4d}.cost-dashboard-top h4{font-size:43px}.chart{height:122px;gap:15px;margin-top:29px}.chart>i{border-radius:2px;box-shadow:5px 4px 0 #98ad8133}.receipt{transform:translate(30px,8px) rotate(-11deg);background:#ecf0df;box-shadow:5px 14px 25px #56713314;border-radius:3px;width:107%;padding:15px}.receipt.added{animation:free-receipt .6s ease-out}.receipt b{font-size:10px}.receipt small{font-size:8px}
@keyframes free-receipt{from{opacity:0;transform:translate(65px,20px) rotate(-11deg)}to{opacity:1;transform:translate(30px,8px) rotate(-11deg)}}
#work-pastee .work-copy{top:16%;right:3%;max-width:40%}#work-pastee .demo{top:12%;left:0;width:58%;height:580px}#work-pastee:before{content:"04";right:0;top:1%}#work-pastee:after{top:8%;left:-7%;width:65%;height:55%;transform:rotate(-30deg);border-color:#bdac8a42}
.paste-playground{inset:20px 0 85px}.paste-fan{transform:scale(1.45);margin-top:0;margin-bottom:65px}.paste-fan button{border-radius:3px}.paste-destination{background:transparent;border:0;border-bottom:1px solid #b8a37b80;border-radius:0;width:60%;padding:12px 0;transform:rotate(-5deg);margin-left:10%}.paste-destination p{font-size:22px}.paste-destination>span{font-size:8px}
#work-sodu{min-height:840px}#work-sodu .work-copy{left:3%;top:20%}#work-sodu .demo{right:2%;top:7%;width:48%;height:620px}#work-sodu:before{content:"05";left:0;top:1%}#work-sodu:after{right:0;top:8%;width:49%;height:55%;border-radius:0;border-color:#a4b08d35;transform:rotate(9deg)}
.sodu-playground{top:35px;width:350px;transform:translateX(-50%) rotate(calc(-4deg*(1 - var(--reveal))))}.sodu-board{border-radius:0;box-shadow:18px 25px 35px -22px #667a4940}.sodu-cell{font-size:17px}.sodu-caption{font-size:11px;height:54px}.sodu-caption img{width:66px;height:75px}.sodu-numbers{margin-top:20px;gap:10px}.sodu-numbers button{background:none;border:0;border-bottom:1px solid #b4c1a1;border-radius:0;width:28px;height:31px;font-size:17px}.demo-sodu .demo-bottom{bottom:0;left:3%;right:3%}
.collection-note{margin-top:0}.work-copy .text-link{font-size:11px}.work-row:focus-within .work-copy{opacity:1}.motion-paused .demo{transform:none}
@media(min-width:1700px){.work-row{min-height:1000px}.world-scene .mini-island{transform:scale(1.9)}.sodu-playground{width:400px}.demo-sodu{height:690px!important}.term-window{height:350px}.cost-dashboard{height:380px}.chapter-copy{top:16%}}
@media(max-width:1100px) and (min-width:701px){.work-copy h3{font-size:70px}.work-copy{max-width:38%}.work-tagline{font-size:17px}.world-scene .mini-island{animation-name:medium-island;transform:scale(1.45)}.world-halo{width:310px;height:310px;left:calc(50% - 155px);top:95px}.sodu-playground{width:300px}.paste-fan{transform:scale(1.1)}.cost-dashboard{height:330px;padding:22px}.receipt{width:106%;transform:translate(13px,8px) rotate(-11deg)}.cost-dashboard-top h4{font-size:34px}.term-block code{font-size:12px}.term-content{padding:22px}.chapter-copy h2{font-size:41px}.chapter-copy{width:28%;max-width:none}.chapter-copy>p{font-size:11px}}
@keyframes medium-island{50%{transform:scale(1.45) translateY(-5px)}}
@media(max-width:700px){
 .site-header{height:74px}.story-stage{background:#ede4d7;min-height:600px}
 .story-stage{background:var(--paper)}
 .film-layer{inset:0 0 21%}.film-layer video,.film-poster{inset:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:50% var(--film-y);mask-image:linear-gradient(transparent,#000 1.5%,#000 76%,transparent);mask-composite:add}
 .film-shade{background:linear-gradient(#f3eddf66,transparent 16%,transparent 56%,#f5f3ed 78%)}
 .hero-copy{left:6%;top:auto;bottom:10%;max-width:88%;width:88%}.hero-copy .eyebrow{font-size:7px}.hero-copy h1{font-size:37px;line-height:1.17;margin-top:11px}.hero-copy h1 br{display:none}.hero-copy h1 span{display:block}.hero-copy .text-link{margin-top:14px}
 .chapter-copy{left:6%;top:auto;bottom:12%;width:88%;max-width:88%}.chapter-anchor{margin-bottom:10px}.chapter-category{font-size:7px}.chapter-copy h2{font-size:43px;margin:10px 0 6px}.chapter-copy>p{font-size:11px;max-width:100%}.chapter-copy .text-link{font-size:10px;margin-top:12px}.chapter-rail{left:auto;right:6%;top:auto;bottom:6%;gap:16px}.story-bottom{bottom:3%}.scroll-instruction{font-size:8px}.scroll-line{height:14px}.story-outro,.story-outro.visible{top:auto;bottom:13%;left:6%;right:6%}.story-outro .text-link{font-size:17px}
 .projects-section{padding-top:45px;padding-bottom:65px}.projects-section>.section-heading{margin-bottom:80px}.section-heading h2{font-size:46px}.section-heading>p{margin-top:23px;font-size:11px}.section-heading:after{top:-52px}
 .work-row,.work-row.reverse,#work-echoterm,#work-sodu{display:flex;flex-direction:column;max-height:none;height:auto;min-height:0;margin-bottom:110px;gap:15px;padding-top:20px}
 .work-row .work-copy,#work-furrytale .work-copy,#work-echoterm .work-copy,#work-nicost .work-copy,#work-pastee .work-copy,#work-sodu .work-copy{position:relative;inset:auto;max-width:none;width:100%;order:0}
 .work-copy h3,#work-echoterm .work-copy h3{font-size:clamp(60px,16.5vw,94px);margin:14px 0 18px}.work-tagline{font-size:18px}.work-description{max-width:94%;font-size:12px;margin-top:12px}.feature-tags{margin-top:15px}.work-copy .text-link{margin-top:18px}
 .work-row .demo,#work-furrytale .demo,#work-echoterm .demo,#work-nicost .demo,#work-pastee .demo,#work-sodu .demo{position:relative;inset:auto;width:100%;height:420px;order:1;transform:translateY(calc((1 - var(--reveal))*30px));margin-top:10px}
 .work-row:before,#work-furrytale:before,#work-echoterm:before,#work-nicost:before,#work-pastee:before,#work-sodu:before{top:-45px;left:auto;right:1%;font-size:190px}
 .work-row:after,#work-furrytale:after,#work-echoterm:after,#work-nicost:after,#work-pastee:after,#work-sodu:after{top:auto;bottom:8%;left:-5%;right:auto;width:110%;height:300px;opacity:.7}
 .demo-bottom,.demo-sodu .demo-bottom{left:0;right:0;bottom:0}.demo-bottom>span{font-size:9px;max-width:58%}.demo-action{font-size:10px}
 .world-scene .mini-island{transform:scale(1.35);animation-name:small-island}.world-halo{width:295px;height:295px;left:calc(50% - 147px);top:36px}.world-cloud{width:70px}.cloud-a{top:75px}.cloud-b{top:97px}.world-scene{bottom:20px}
 .term-window{top:35px;height:285px;left:0;width:100%;transform:perspective(900px) rotateY(-3deg) rotateZ(-3deg);border-radius:7px}.term-content{padding:18px}.term-block code{font-size:10px}.term-output b{font-size:11px}.term-output p{font-size:8px}.term-ai{font-size:10px;margin-top:20px}.term-ai small{font-size:9px}
 .cost-dashboard{top:18px;left:5%;width:86%;height:310px;padding:24px;transform:rotate(5deg)}.cost-dashboard-top h4{font-size:32px}.chart{height:93px;margin-top:25px;gap:12px}.receipt{padding:12px;width:108%;transform:translate(6px,3px) rotate(-9deg)}.receipt b{font-size:9px}.receipt strong{font-size:10px}
 .paste-playground{inset:20px 0 75px}.paste-fan{transform:scale(1.05);margin-bottom:0;margin-top:30px}.paste-destination{width:77%;margin-top:40px}.paste-destination p{font-size:20px}
 #work-sodu .demo{height:490px}.sodu-playground{top:5px;width:min(300px,92%)}.sodu-cell{font-size:15px}.sodu-caption{height:55px}.sodu-numbers{gap:5px;margin-top:17px}.sodu-numbers button{font-size:16px;width:28px}.sodu-caption img{width:60px;height:69px}
 .collection-note{margin-top:-20px;font-size:9px}
}
@keyframes small-island{50%{transform:scale(1.35) translateY(-5px)}}
@media(max-width:360px){.hero-copy h1{font-size:32px}.chapter-copy h2{font-size:39px}.work-copy h3,#work-echoterm .work-copy h3{font-size:55px}.work-tagline{font-size:16px}.work-description{font-size:11px}.world-scene .mini-island{transform:scale(1.2);animation:none}.cost-dashboard{padding:19px}.receipt b{font-size:8px}.paste-fan{transform:scale(.9)}.term-block code{font-size:9px}.sodu-playground{width:260px}.sodu-numbers{gap:3px}.sodu-numbers button{width:25px}}
@media(prefers-reduced-motion:reduce){.work-copy,.demo{transform:none!important;opacity:1!important}.chapter-anchor{display:none}.collection-thread{display:none}.scroll-story{height:100svh}.film-layer{opacity:1}.work-row{--reveal:1!important}}

/* Keep the complete navigation available throughout the film and collection. */
.site-header{position:fixed;z-index:30;background:#f5f3edc9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #63705b18}
.site-header .brand,.site-header nav,.site-header .motion-toggle{flex-shrink:0;white-space:nowrap}
.site-header .brand-suffix{display:inline-block}
html{scroll-padding-top:106px}
@media(max-width:700px){
 .site-header{height:74px;padding:0 16px;gap:8px}
 .site-header .brand{font-size:23px;letter-spacing:-1.1px;gap:6px}
 .site-header .brand>img{width:26px;height:26px}
 .site-header .brand-suffix{font-size:10px;letter-spacing:-.2px;margin-left:5px}
 .site-header nav{gap:12px;font-size:9.5px;letter-spacing:0}
 .site-header nav a{gap:0}.site-header nav a:last-child{display:flex}
 .site-header nav a span{display:none}
 .site-header .motion-toggle{font-size:8px;padding:7px 8px}
 .site-header .motion-toggle span{margin-left:5px}
 html{scroll-padding-top:94px}
}
@media(max-width:360px){
 .site-header{padding:0 12px;gap:6px}
 .site-header .brand{font-size:21px;gap:5px}
 .site-header .brand>img{width:24px;height:24px}
 .site-header .brand-suffix{font-size:9px;margin-left:4px}
 .site-header nav{gap:9px;font-size:9px}
 .site-header .motion-toggle{font-size:7.5px;padding:7px}
}