/* Native document rhythm: no oversized empty scroll tracks. */
html{scroll-behavior:auto;overscroll-behavior-y:auto}
body .chapter#hero{height:200vh}
body .chapter#wall{height:240vh}
body .chapter#ladder{height:200vh}
body .chapter:is(#work,#proof,#doors,#who,#start){height:auto;min-height:0;padding:0}
body .chapter:is(#work,#proof,#doors,#who,#start)>.copy{position:relative;top:auto;height:auto;padding:110px var(--pad) 100px;opacity:1;transform:none}
body #work>.copy{display:flex;align-items:flex-start;width:100%;gap:0}
body #work h2 em{display:inline}
body #work .portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;overflow:visible;width:100%;margin-top:30px;padding:0;mask-image:none!important;-webkit-mask-image:none!important;opacity:1!important}
body #work .portfolio-grid .project{width:100%;min-width:0;flex:none}
body #work .project-image{height:auto;max-height:none;aspect-ratio:1713/1149}
body #work .project-caption{padding:18px 76px 20px 22px;min-height:124px}
body #work .project-caption h3{font-size:clamp(25px,2.2vw,48px)}
body #work .gallery-progress{display:none}
body #work .portfolio-more{margin-top:28px}
body #wall .wall-art{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.94)!important}
header{backdrop-filter:none!important}
#cue svg{animation:none}
.page-section{min-height:0;padding-top:72px;padding-bottom:72px}
body[data-page] .hero{min-height:75vh;padding-top:64px;padding-bottom:64px}
body[data-page=work] .hero{min-height:75vh;padding-top:64px;padding-bottom:64px}
.page-section.has-flight{padding-top:64px}
.flying-list{gap:40px;padding-bottom:32px}
.flying-art{padding:24px}.flying-art svg{max-height:230px}
.flying-copy{padding:28px}.flying-copy h3{font-size:clamp(32px,3vw,65px)}
.page-section.has-flight>.section-heading{top:110px;padding-bottom:24px}
body.no-world #world{display:none}body.no-world #wash{background:#fafaf6!important}
@media(max-width:760px){
 body .chapter#hero{height:175vh}
 body .chapter#wall{height:auto;padding-bottom:24px}
 body .chapter#ladder{height:200vh}
 body .chapter:is(#work,#proof,#doors,#who,#start)>.copy{padding:64px 24px;min-height:0}
 body #wall .copy{padding:80px 24px 0}
 body #wall .wall-art .beats [data-beat],body #wall .wall-art .beats [data-beat].active{height:240px;min-height:0;padding:16px!important}
 body #wall .wall-art .beats svg{height:130px;max-height:130px}
 body #wall .beats strong{font-size:20px}body #wall .beats small{font-size:14px}
 body #work .portfolio-grid{grid-template-columns:1fr;gap:24px}
 body #work .project-caption{min-height:120px}
 body #doors .engagement a{min-height:0}
 body #doors .engagement .service-art{height:150px}
 .page-section{padding-top:52px;padding-bottom:52px}
 body[data-page] .hero{min-height:0;padding-top:56px;padding-bottom:48px}
 .flying-list{gap:28px}.flying-copy{padding:24px}
}
@media(prefers-reduced-motion:reduce){body .chapter#hero{height:150vh}}
body :is(#proof .metrics,#doors .engagement){opacity:1!important}

/* Desktop keeps the original horizontal work story; phones keep vertical cards. */
body[data-background-paused="true"] .reading-shade{opacity:var(--shade)!important;background:var(--paper)}
body .chapter>.copy{opacity:1!important;transform:none!important}
body .chapter .copy>p,body .chapter .copy>.rungs,body .chapter .copy>.engagement{opacity:1!important}
body #wall .wall-art{will-change:auto}
body #wall .workflow-track i{transition:left .36s ease}
body #wall .wall-card>h3{min-height:2.2em}
body #ladder .process-visual article{transition:opacity .36s,transform .36s}
@media(min-width:761px){
 body .chapter#work{height:280vh}
 body .chapter#work>.copy{position:sticky;top:0;min-height:100vh;height:100vh;display:grid;grid-template-columns:23% minmax(0,1fr);column-gap:4%;align-content:center;align-items:center;padding:100px var(--pad) 90px}
 body #work h2{text-align:left;font-size:clamp(54px,5.5vw,155px)}
 body #work h2 em{display:block}
 body #work .portfolio-grid{display:flex;flex-direction:row;gap:26px;overflow-x:hidden;grid-column:2;grid-row:1;margin:0;padding:10px 0 20px;contain:layout paint;mask-image:none!important}
 body #work .portfolio-grid .project{flex:0 0 56%;width:56%;min-width:0;}
 body #work .project-image{height:auto;aspect-ratio:1713/1149}
 body #work .project-caption{min-height:150px;padding:26px 110px 28px 28px}
 body #work .project-caption h3{font-size:clamp(28px,2.2vw,58px)}
 body #work .gallery-progress{display:flex;grid-column:2;grid-row:2;width:100%;margin-top:18px}
 body #work .gallery-progress i{transform-origin:left}
 body #work .portfolio-more{grid-column:1;grid-row:2;margin-top:18px}
 body #wall>.copy{min-height:100vh;padding-top:100px;padding-bottom:70px}
 body #wall .wall-card>h3{font-size:clamp(38px,4.1vw,110px);margin:12px auto;min-height:1.2em}
 body #wall .wall-art{margin-top:24px}
}
@media(min-width:761px) and (max-height:800px){
 body #wall>.copy{padding-top:90px;padding-bottom:40px}
 body #wall .wall-art{margin-top:16px;padding-top:16px;padding-bottom:48px}
 body #wall .wall-art .beats [data-beat],body #wall .wall-art .beats [data-beat].active{height:210px;padding:12px!important}
 body #wall .workflow-heading{margin-bottom:12px}
 body #wall .wall-card>p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){body #wall .workflow-track i,body #ladder .process-visual article{transition:none}}

/* Reading sections own their layout and never inherit a scroll-dependent fade.
   The artwork participates in grid sizing rather than floating over the text. */
body .chapter{--reveal:1;--copy-body-opacity:1}
body #who>.copy{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);column-gap:7%;row-gap:24px;align-content:center;align-items:center;width:100%;max-width:none}
body #who .craft-number{position:relative;grid-column:1;grid-row:1 / 4;left:auto;right:auto;top:auto;transform:none;width:100%;max-width:750px;margin:0;align-self:center}
body #who h2,body #who .copy>p{grid-column:2;margin:0;max-width:none;width:100%}
body #who h2{font-size:clamp(42px,4.8vw,112px)}
body #who .confession{margin:0;padding-top:24px}
body #proof>.copy,body #doors>.copy,body #who>.copy,body #start>.copy{min-height:100svh}
body #start .copy>p{color:var(--ink)}
body #wall .wall-art .beats [data-beat],body #wall .wall-art .beats [data-beat].active{height:clamp(200px,32vh,330px)}
body #wall .wall-art .beats svg{max-height:210px}
body #wall .wall-card>h3{line-height:1.16}
body #wall .wall-art{padding-bottom:60px}
body #work .portfolio-grid{scrollbar-width:none}
body #work .project-image img{object-fit:cover!important}
body #work .project-image{background:#eef0ed}
body #rail{right:12px;gap:4px}
body #rail button{width:28px;height:28px;border:0;background:transparent;outline:none}
body #rail button::before{content:'';position:absolute;inset:11px;border:1px solid #69736d;border-radius:50%;background:var(--paper)}
body #rail button[aria-current=true]{background:transparent;outline:none}
body #rail button[aria-current=true]::before{background:var(--ink);outline:1px solid #69736d;outline-offset:5px}
body #rail button:focus-visible{outline:2px solid #3782f0;outline-offset:2px}
body #rail span{top:5px;right:32px;background:var(--paper);padding:3px 6px;width:max-content;max-width:180px}
@media(min-width:761px){
 body #work>.copy{grid-template-rows:auto auto;justify-content:normal;align-content:center}
 body #work .project-image{height:auto;aspect-ratio:1713/1149}
 body #wall>.copy{padding:100px 5vw 100px;justify-content:center}
 body #wall .wall-card{margin-top:0}
 body #wall .wall-card>h3{min-height:1.2em}
 body #wall .workflow-track{margin-bottom:20px}
}
@media(max-width:760px){
 body #who>.copy{display:flex;gap:24px;align-items:flex-start}
 body #who .craft-number{width:min(260px,75%);max-width:none;margin:0 auto 8px;align-self:center}
 body #who h2,body #who .copy>p{width:100%;max-width:none}
 body #who h2{font-size:42px}
 body #proof>.copy,body #doors>.copy,body #who>.copy,body #start>.copy{min-height:0;padding:88px 24px}
 body #wall .wall-card>h3{min-height:0}
 body #wall .wall-art .beats [data-beat],body #wall .wall-art .beats [data-beat].active{height:240px}
 body #wall .wall-art{padding-bottom:32px}
}
@media(min-width:761px) and (max-height:800px){
 body #wall>.copy{padding:88px 4vw 76px}
 body #wall .wall-card>h3{font-size:clamp(32px,3.5vw,60px);margin:8px auto}
 body #wall .wall-art{margin-top:16px;padding:16px 24px 42px}
 body #wall .wall-art .beats [data-beat],body #wall .wall-art .beats [data-beat].active{height:clamp(150px,28vh,220px)}
 body #wall .wall-art .beats svg{max-height:130px}
 body #wall .workflow-heading{margin-bottom:12px;font-size:16px}
 body #wall .workflow-track{margin:12px 0}
 body #wall .workflow-track:after{font-size:14px;top:10px;padding-top:7px}
 body #wall .beats strong{font-size:16px;margin-top:4px}
 body #wall .beats small{font-size:13px}
 body #ladder>.copy{padding-top:96px;padding-bottom:90px}
 body #ladder .process-visual{height:38vh;min-height:260px}
}

/* Phone intro uses one stable viewport throughout a gesture. */
@media(max-width:760px){
 body .chapter#hero{height:calc(var(--journey-height,100svh)*1.75)}
 body #hero>.copy{height:var(--journey-height,100svh);min-height:var(--journey-height,100svh)}
 body #work .portfolio-grid{display:flex;flex-direction:column;overflow:visible}
 body #work .portfolio-grid .project{flex:0 0 auto;width:100%}
 body #work .project-image{aspect-ratio:1713/1149;height:auto}
 body #cue{background:linear-gradient(transparent,var(--paper) 35%);bottom:0;padding:14px 16px;width:100%}
}

/* Content yields to the camera while moving between rooms. */
body .chapter:not(#hero)>.copy{opacity:var(--tour-copy,0)!important}

body[data-cinematic="true"] .chapter>.copy{opacity:var(--tour-copy,1)!important;pointer-events:none}

/* Only the settled chapter owns the foreground. Adjacent blocks stay hidden. */
body .chapter>.copy{opacity:var(--tour-copy,0)!important}
body #hero>.copy{opacity:var(--tour-copy,1)!important}

/* Desktop gallery reaches the screen edge; fades describe overflow softly. */
@media(min-width:761px){
 body #work .portfolio-grid{width:calc(100% + var(--pad));max-width:none;margin-right:calc(-1 * var(--pad));padding-right:var(--pad);scroll-snap-type:none;--fade-left:0px;--fade-right:48px;mask-image:linear-gradient(to right,transparent,#000 var(--fade-left),#000 calc(100% - var(--fade-right)),transparent)!important;-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-left),#000 calc(100% - var(--fade-right)),transparent)!important}
 body #work .portfolio-grid[data-at-start="false"]{--fade-left:28px}
 body #work .portfolio-grid[data-at-end="true"]{--fade-right:0px}
 body #work .portfolio-grid .project{flex-basis:min(56%,calc((100svh - 340px)*1.49));width:auto;min-width:300px;overflow:hidden;border-radius:22px}
 body #work .project-image{padding:0;overflow:hidden}
}
@media(min-width:761px) and (max-width:1100px){
 body #work>.copy{grid-template-columns:21% minmax(0,1fr);column-gap:4%;padding-top:96px;padding-bottom:90px}
 body #work h2{font-size:clamp(44px,5.4vw,60px)}
 body #work .portfolio-grid .project{flex-basis:84%;min-width:0}
 body #work .project-caption{padding:22px 76px 24px 22px;min-height:142px}
 body #work .project-caption h3{font-size:30px}
 body #work .project-caption>span:not(.sr-only){font-size:15px;line-height:1.45}
}
@media(min-width:761px) and (max-height:800px){
 body #work .portfolio-grid .project{flex-basis:min(72%,calc((100svh - 310px)*1.49));min-width:280px}
 body #work .project-caption{min-height:125px;padding:18px 72px 20px 20px}
 body #work .project-caption h3{font-size:28px}
 body #work .project-caption>span:not(.sr-only){font-size:14px}
}