/* One set of readable scene lengths, with supporting content in natural flow. */
:root{--scene-ease:cubic-bezier(.22,1,.36,1);--scene-enter:650ms;--scene-short:180ms}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero-work-link{color:#ded8cb;border-color:#8d8065;font-size:13px}
.scroll-cinema .intro-track{height:220svh}
.scroll-cinema .venture-track{height:320svh}
.scroll-cinema .venture-controls button{width:44px;height:44px}

/* About is a complete editorial composition, rather than three hidden acts. */
.scroll-cinema .about{height:auto;padding:100px var(--gutter)}
.scroll-cinema .about-pin{position:relative;top:auto;height:auto;padding:0;overflow:visible}
.scroll-cinema .about-grid{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:9%;height:auto;min-height:0;align-items:start;opacity:1;transform:none}
.scroll-cinema .about-heading{position:relative;top:auto;align-self:start}
.scroll-cinema .about-heading h2{font-size:clamp(54px,6vw,86px)}
.scroll-cinema .about-copy{display:block;min-height:0;margin:0;padding:0}
.scroll-cinema .about-copy .lead{font-size:27px;line-height:1.35;margin:0 0 26px;opacity:1;transform:none}
.scroll-cinema .perspective-details{position:relative;inset:auto;display:block;opacity:1;transform:none;pointer-events:auto}
.scroll-cinema .perspective-details p{font-size:15px;line-height:1.85;margin-bottom:18px}
.scroll-cinema .about-pin .credentials,.scroll-cinema .about-pin .credentials.reveal{position:relative;inset:auto;translate:none;opacity:1;transform:none;margin:65px 0 0;padding:0;grid-template-columns:1fr 1fr;gap:24px}
.scroll-cinema .credentials-intro{grid-column:1/3}
.scroll-cinema .credential{padding:25px 30px;grid-template-columns:24px 1fr;gap:8px 14px}
.scroll-cinema .credential-title{font-size:clamp(70px,9vw,125px)}
.scroll-cinema .credential-label{grid-column:2;font-size:12px}
.scroll-cinema .perspective-steps{display:none}

/* A short paper interlude connects the two gallery worlds without another pin. */
.scroll-cinema .manifesto-track{height:auto;background:#e7e2d7}
.scroll-cinema .manifesto{position:relative;top:auto;height:auto;min-height:0;display:block;padding:110px var(--gutter);background:#e7e2d7}
.scroll-cinema .manifesto .paper-disc,.scroll-cinema .manifesto .portal-caption,.scroll-cinema .manifesto .portal-veil{display:none}
.scroll-cinema .manifesto>p,.scroll-cinema .manifesto>p.reveal,.scroll-cinema .manifesto>.eyebrow,.scroll-cinema .manifesto-signoff,.scroll-cinema .manifesto-signoff.reveal,.scroll-cinema .manifesto-orbit{opacity:1;transform:none}
.scroll-cinema .manifesto p{font-size:clamp(45px,6.3vw,92px)}
.scroll-cinema .manifesto-orbit{transform:translate(-50%,-50%) rotate(-14deg)}

/* The ribbon, approach, selected work, and release are one reversible scene. */
.portfolio-story,.portfolio-story-pin{position:relative}
.scroll-cinema .portfolio-story{height:460svh;margin-inline:calc(-1 * var(--gutter))}
.scroll-cinema .portfolio-story-pin{position:sticky;top:0;height:100svh;overflow:clip;isolation:isolate;background:var(--cream)}
.scroll-cinema .portfolio-story .portfolio-ribbon-track,.scroll-cinema .portfolio-story .journal-track{position:absolute;inset:0;height:100%;margin:0;padding:0}
.scroll-cinema .portfolio-story .portfolio-ribbon-track{z-index:1;opacity:var(--ribbon-opacity,1);pointer-events:auto}
.scroll-cinema .portfolio-story .portfolio-ribbon-pin{position:absolute;inset:0;height:100%}
.scroll-cinema .portfolio-story .journal-track{z-index:2;opacity:var(--projects-opacity,0);transform:translateY(var(--projects-enter,24px));pointer-events:none}
.scroll-cinema .portfolio-story .journal-pin{position:absolute;inset:0;height:100%;padding:120px var(--gutter) 85px;background:var(--cream)}
.scroll-cinema .portfolio-show-projects .portfolio-ribbon-track{pointer-events:none}
.scroll-cinema .portfolio-show-projects .journal-track{pointer-events:auto}
.scroll-cinema .portfolio .journal-cover{border-radius:14px}
.scroll-cinema .portfolio .journal-grid{--project-card-width:min(550px,58%)}
.scroll-cinema .portfolio-story [inert]{pointer-events:none}
.scroll-cinema .portfolio .journal-wayfinding{position:relative;z-index:8}

/* Contact is direct and immediately actionable. */
.scroll-cinema .contact{height:auto;min-height:0;padding:95px var(--gutter) 100px;background:#151712}
.scroll-cinema .contact-pin{position:relative;top:auto;height:auto;min-height:0;padding:0;overflow:visible}
.scroll-cinema .contact-pin .section-kicker{margin-bottom:50px}
.scroll-cinema .contact-content{opacity:1;transform:none}
.scroll-cinema .contact h2{font-size:clamp(72px,9.5vw,135px);line-height:.98}
.scroll-cinema .contact-bottom{margin-top:32px}
.scroll-cinema .contact-arrow{width:76px;height:76px}
.scroll-cinema .contact .email-link{margin-top:26px}
.scroll-cinema .contact-watermark{font-size:270px;bottom:4%;right:5%;transform:none}
.footer{padding-bottom:max(75px,env(safe-area-inset-bottom))}

/* Keyboard and fallback behavior use the same interaction language everywhere. */
summary:focus-visible{outline:2px solid #695331;outline-offset:5px}
.static-projects{padding:70px var(--gutter);background:var(--cream)}
.static-projects article{max-width:850px;margin:0 auto 65px}
.static-projects h2{font-size:48px;margin-bottom:25px}
.static-projects p{margin-bottom:22px;max-width:700px}
.no-js:not(.js-boot) .header{position:relative;inset:auto;width:auto;margin:14px var(--gutter);flex-wrap:wrap}
.no-js:not(.js-boot) .desktop-nav{display:flex;flex-wrap:wrap;gap:14px;margin-left:0}
.no-js:not(.js-boot) .menu-button,.no-js:not(.js-boot) .motion-toggle,.no-js:not(.js-boot) .sheet-grab-zone,.no-js:not(.js-boot) .dialog-close,.no-js:not(.js-boot) .ribbon-jumps{display:none}
.no-js:not(.js-boot) .hero{height:auto;min-height:600px;padding-top:100px}
.no-js:not(.js-boot) .art-stage{display:none}
.no-js:not(.js-boot) .article-dialog:not([open]){display:block;position:relative;inset:auto;width:min(900px,calc(100% - 40px));max-height:none;margin:45px auto;overflow:visible}
.no-js:not(.js-boot) .article-body{overflow:visible;max-height:none}
.no-js:not(.js-boot) .article-top{position:relative}
.immersive:not(.scroll-cinema) .scene-status{display:none}

@media(max-width:1100px){.scroll-cinema .about-grid{gap:6%}.scroll-cinema .portfolio .journal-grid{--project-card-width:min(540px,68%)}}
@media(max-width:760px){
 .portfolio-dialog{max-width:100%}
 .scroll-cinema .intro-track{height:200svh}
 .scroll-cinema .hero-copy p{margin-top:17px;margin-bottom:15px}
 .hero-actions{align-items:flex-start;gap:7px;flex-direction:column}
 .hero-work-link{min-height:36px;font-size:12px}
 .scroll-cinema .hero .button{min-height:48px}
 .scroll-cinema .venture-track{height:280svh}
 .scroll-cinema .venture-chapters button{font-size:11px}
 .scroll-cinema .portfolio .journal-wayfinding button{font-size:11px;line-height:1.5}
 .scroll-cinema .portfolio .journal-wayfinding button>span{display:none}
 .scroll-cinema .about{padding:70px var(--gutter)}
 .scroll-cinema .about-pin .section-kicker{margin-bottom:35px}
 .scroll-cinema .about-grid{display:block;height:auto;inset:auto}
 .scroll-cinema .about-heading h2{font-size:clamp(40px,10.5vw,62px)}
 .scroll-cinema .about-copy{margin-top:32px;padding:0}
 .scroll-cinema .about-copy .lead{font-size:24px;max-width:100%}
 .scroll-cinema .perspective-details p{font-size:14px;line-height:1.8}
 .scroll-cinema .about-pin .credentials{margin-top:45px;gap:18px}
 .scroll-cinema .credentials-intro{display:block}
 .scroll-cinema .credentials-intro p{margin-top:14px}
 .scroll-cinema .credential{padding:18px 12px;gap:7px;grid-template-columns:16px 1fr}
 .scroll-cinema .credential-title{font-size:clamp(52px,17vw,84px)}
 .scroll-cinema .credential-label{grid-column:1/3;font-size:10px}
 .scroll-cinema .manifesto{padding:85px var(--gutter)}
 .scroll-cinema .manifesto p{font-size:clamp(37px,9vw,60px);line-height:1.1}
 .scroll-cinema .portfolio-story{height:340svh}
 .scroll-cinema .portfolio .journal-grid{--project-card-width:100%}
 .scroll-cinema .portfolio-story .journal-pin{padding:120px var(--gutter) 85px}
 .scroll-cinema .contact{padding:75px var(--gutter) 95px}
 .scroll-cinema .contact h2{font-size:clamp(48px,12vw,76px)}
 .scroll-cinema .contact-bottom{gap:22px;align-items:flex-start;flex-direction:column;margin-top:28px}
 .scroll-cinema .contact-bottom p,.scroll-cinema .contact-button{font-size:14px}
 .scroll-cinema .contact-arrow{width:60px;height:60px;font-size:30px}
 .scroll-cinema .contact-pin .section-kicker{margin-bottom:38px}
 .scroll-cinema .contact-watermark{font-size:210px;opacity:.6}
 .scroll-cinema .contact .email-link{margin-top:25px}
}
@media(max-width:370px){.scroll-cinema .hero-top{font-size:8px}.scroll-cinema .hero h1{font-size:53px}.scroll-cinema .hero-copy p{font-size:12px}.scroll-cinema .hero .button{font-size:11px}.scroll-cinema .portfolio-story .journal-pin{padding-top:118px}.scroll-cinema .portfolio .journal-cover{height:clamp(150px,calc(100svh - 475px),260px)}}
@media(max-height:520px) and (min-width:761px){
 .immersive:not(.scroll-cinema) .hero{height:auto;min-height:470px;padding-top:100px;padding-bottom:85px}
 .immersive:not(.scroll-cinema) .hero-copy{margin-top:12px;max-width:70%}
 .immersive:not(.scroll-cinema) .hero h1{font-size:62px;line-height:.9}
 .immersive:not(.scroll-cinema) .hero-copy p{font-size:12px;line-height:1.6;margin:12px 0}
 .immersive:not(.scroll-cinema) .hero .button{min-height:46px}
 .immersive:not(.scroll-cinema) .hero-actions{gap:20px}
 .immersive:not(.scroll-cinema) .hero-bottom{bottom:30px}
 .immersive:not(.scroll-cinema) .static-monogram{top:27%;font-size:160px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.portfolio-story-pin,.portfolio-story .journal-track,.portfolio-story .portfolio-ribbon-track{opacity:1!important;transform:none!important}.masked-line,.title-line,.ink-word{transform:none!important;opacity:1!important;filter:none!important}}