/* Document flow: one native scroller for the introduction and selected work. */
html{height:auto;min-height:100%;overflow-x:clip;overflow-y:auto;scroll-padding-top:0}
body{height:auto;min-height:100svh;overflow:visible}
.site-header{position:sticky;top:0;height:var(--header);background:#fff}
.screen-track,body[data-view=work] .screen-track{position:relative;inset:auto;display:block;width:100%;height:auto;transform:none;transition:none;will-change:auto}
.screen{width:100%;height:auto;overflow:visible;flex:none;scroll-margin-top:calc(var(--header) + 1rem)}
#intro-title,#work-title{scroll-margin-top:calc(var(--header) + 1rem)}
.intro-layout{width:100%;max-width:1920px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.45fr);gap:clamp(24px,3vw,64px);height:auto;min-height:calc(100svh - var(--header));padding:clamp(32px,4vw,72px) clamp(24px,4.3vw,82px) 48px}
.hero-copy,html[lang=ar] .hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:clamp(12px,2vw,38px) 0 0}
.hero-copy>*{max-width:100%}
.hero-copy>.eyebrow{white-space:normal;font-size:.75rem;line-height:1.5;margin-bottom:24px}
.hero-copy h1{font-size:clamp(3.25rem,5.55vw,6.5rem);line-height:1;letter-spacing:-.055em;margin-bottom:24px;overflow-wrap:normal}
.hero-copy .role{font-size:clamp(1rem,1.4vw,1.4rem);line-height:1.6;gap:4px 10px;margin-bottom:24px}
.hero-copy .hero-line{font-size:clamp(1.4rem,1.85vw,1.9rem);line-height:1.35;max-width:26ch;margin-bottom:20px}
.hero-copy .hero-caption{font-size:1rem;line-height:1.8;max-width:42ch}
.hero-links{margin-top:20px;gap:8px 20px}.profile-link{font-size:.875rem}
.enter-work{padding:0;margin:32px 0 26px;gap:18px;max-width:100%}.circle-arrow{width:72px;height:72px;flex:none;font-size:42px;border-width:2px}.enter-work strong{font-size:1rem}.enter-work small{font-size:.8125rem}
.hero-directions,html[lang=ar] .hero-directions{max-width:100%;align-self:flex-start;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.hero-directions button{font-size:.8125rem;min-height:44px;padding:0 12px}.hero-directions button span,.project-mode b{font-size:.8125rem}
.hero-foot{margin-top:auto;padding:24px 0 0;gap:16px;flex-wrap:wrap;font-size:.75rem}
.visual-composition{position:relative;align-self:start;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:1 / 1.1;margin:0;overflow:visible;isolation:isolate}
.collage{left:0;right:auto;top:0;width:61%;height:auto;aspect-ratio:620/1008}
/* The supplied reference contains only the right half of the suited portrait.
   Map that entire source region without the former viewport-height zoom. */
.portrait-cutout{position:absolute;left:auto;right:0;top:0;bottom:auto;width:36.5%;height:auto;max-width:none;aspect-ratio:378/1000;overflow:hidden;background:white;z-index:1}
.portrait-cutout img{position:absolute;inset:auto;left:-348.4127%;top:-11.7%;bottom:auto;right:auto;width:457.1429%;height:auto;max-width:none;filter:grayscale(1);object-fit:initial;transform:none}
/* Match the first artwork edge to the portrait crown in every treatment. */
body[data-hero="2"] .piece-painting{top:0}
.collage{z-index:2}.contact-rail{width:36px;top:auto;bottom:24px;padding:12px 0;gap:12px}.contact-rail>span:nth-child(2){font-size:.75rem}
.work{position:relative;max-width:1920px;margin-inline:auto;min-height:calc(100svh - var(--header));padding:72px clamp(24px,4.3vw,82px) 80px;grid-template-columns:minmax(220px,.33fr) minmax(0,1fr);gap:32px;border-top:1px solid #e8e8e8}
.discipline-nav{padding:0;min-height:0;min-width:0}.work-content{min-width:0;padding:0 22px 0 0}.work-heading{gap:16px}
body[data-view=intro] .discipline-nav>*,body[data-view=work] .discipline-nav>*,body[data-view=intro] .work-heading{opacity:1;transform:none;transition:none}
.work-heading h2{font-size:clamp(2rem,3.5vw,3.875rem);line-height:1.15}.nav-primary{font-size:clamp(1.1rem,1.6vw,1.6rem);line-height:1.4}.subnav button{font-size:1rem}
.gallery{height:clamp(340px,36vw,610px)}.project-meta{min-width:0;gap:18px}.project-meta>div{min-width:0}.project-meta h3{overflow-wrap:anywhere;font-size:clamp(1.65rem,2.5vw,2.75rem);line-height:1.15}.project-description{font-size:1rem;line-height:1.7;max-width:65ch}.project-kicker{font-size:.75rem;line-height:1.6;overflow-wrap:anywhere}
.project-link{flex:none}.gallery-bottom{gap:20px;flex-wrap:wrap}#gallery-dots{min-width:0;flex-wrap:wrap}.gallery-arrows{flex:none}.sidebar-foot{padding-top:40px}
.case-label,.piece-swatch .case-label{font-size:clamp(10px,1.8cqw,12px);font-weight:500;letter-spacing:0;line-height:1.2;min-height:26px;white-space:normal}.case-label>span,.piece-swatch .case-label>span{font-size:12px;flex:none}.case-label strong{min-width:0;overflow-wrap:normal}
.case-scene,.case-cover .case-scene{bottom:26px}.creative-image .case-scene{bottom:0}
.case-topic,.piece-swatch .case-topic{font-size:clamp(8px,1.3cqw,11px)}
html[lang=ar] .hero-copy h1{font-size:clamp(3rem,4.8vw,5.75rem);line-height:1.3;letter-spacing:0}
html[lang=ar] .hero-copy .role{font-size:clamp(1rem,1.4vw,1.4rem);letter-spacing:0}
html[lang=ar] .hero-copy .hero-line{font-size:clamp(1.3rem,1.7vw,1.75rem);line-height:1.7;max-width:26ch}
html[lang=ar] .hero-copy .hero-caption{font-size:1rem;line-height:1.95;max-width:42ch}
html[lang=ar] .hero-copy{align-items:stretch}html[lang=ar] .enter-work{align-self:flex-start;flex-direction:row-reverse}
html[lang=ar] .nav-primary{font-size:clamp(1rem,1.5vw,1.4rem)}html[lang=ar] .work-heading h2{font-size:clamp(1.8rem,3vw,3.5rem);line-height:1.5}
dialog{overscroll-behavior:contain;max-height:90svh}html:has(dialog[open]){overflow-y:hidden}.detail-title{overflow-wrap:anywhere}
@media(max-width:1100px){
 /* Keep the editorial split through tablet; narrow windows should not enlarge the title. */
 .intro-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.45fr);gap:clamp(20px,2.5vw,28px);padding:32px 4.3vw 40px}
 .hero-copy,html[lang=ar] .hero-copy{display:flex;padding:0;max-width:none;width:100%;align-self:start}
 .hero-copy>.eyebrow{font-size:.75rem;margin-bottom:18px}
 .hero-copy h1{font-size:clamp(2.75rem,5.55vw,3.82rem);margin-bottom:18px}
 .hero-copy .role{font-size:1rem;line-height:1.5;gap:2px 8px;margin-bottom:18px}
 .hero-copy .hero-caption{max-width:42ch;line-height:1.7}.hero-copy .hero-line{font-size:clamp(1.3rem,1.85vw,1.4rem);max-width:26ch;margin-bottom:16px}
 .enter-work{align-self:flex-start;transform:none;margin:24px 0 20px;gap:12px}.enter-work>span:last-child{display:block}.enter-work small{display:none}.circle-arrow{width:54px;height:54px;font-size:32px}
 .visual-composition{width:100%;max-width:none;margin:0;aspect-ratio:1/1.1}.hero-foot{display:none}
 .work{grid-template-columns:210px minmax(0,1fr);gap:28px;padding-inline:6vw}.work-content{padding-right:12px}.gallery{height:clamp(320px,45vw,480px)}
 html[lang=ar] .hero-copy h1{font-size:clamp(2.5rem,4.8vw,3.3rem)}
}
@media(max-width:700px){
 :root{--header:76px}.site-header{padding-inline:6vw;gap:16px}.header-actions{gap:12px}.wordmark{width:94px}
 .intro-layout{grid-template-columns:1fr;padding:24px 6vw 40px;gap:24px;min-height:0}.hero-copy h1{font-size:clamp(2.75rem,5.55vw,3.5rem);line-height:1.02;letter-spacing:-.05em;margin-bottom:16px}
 .hero-copy>.eyebrow{margin-bottom:20px}.hero-copy .role{font-size:1rem;line-height:1.6;margin-bottom:20px;gap:3px 8px}
 .hero-copy .hero-line{font-size:clamp(1.3rem,1.85vw,1.4rem);line-height:1.4;max-width:100%}.hero-copy .hero-caption{font-size:1rem;line-height:1.8;max-width:100%}
 .hero-links{margin-top:16px;gap:6px 18px}.profile-link{font-size:.875rem;min-height:44px}.enter-work{display:flex;align-self:flex-start;margin:22px 0 24px;transform:none;gap:14px}.enter-work>span:last-child{display:block}.enter-work small{display:none}.circle-arrow{width:52px;height:52px;font-size:31px}
 .hero-directions{margin-bottom:0;gap:6px}.hero-directions button{min-height:44px;padding-inline:10px}.hero-directions .replay-motion{min-width:36px}
 .visual-composition{min-height:0;margin-top:0;aspect-ratio:1/1.13}.collage{top:0;width:63%}.portrait-cutout{width:34%;right:0}
 .case-label,.piece-swatch .case-label{padding:4px;font-size:10px;min-height:24px}.case-scene,.case-cover .case-scene{bottom:24px}.creative-image .case-scene{bottom:0}.creative-image .case-label{padding-top:12px}.case-label>span,.piece-swatch .case-label>span{display:none}
 .case-topic,.lab-edition>small,.lab-brief>small,.lab-brief>span,.lab-dimensional>span,.lab-motion>span:first-child,.lab-motion>small,.lab-manifesto>small,.lab-type>small,.lab-process>small,.lab-process>span{display:none}
 .case-simplexity,.case-research{padding:8% 7% 28px;justify-content:center}.case-simplexity>strong{font-size:clamp(10px,3.45cqw,16px);line-height:1.03}.case-research>strong{font-size:clamp(10px,3.2cqw,16px);line-height:1.05}
 .lab-brief>strong{font-size:clamp(12px,4.3cqw,20px);line-height:1.04;overflow-wrap:normal}.lab-edition strong{font-size:clamp(17px,6.5cqw,30px);line-height:.94}.lab-process strong{font-size:clamp(13px,4.9cqw,23px);line-height:1.08}.lab-motion>strong{font-size:clamp(13px,4.5cqw,22px)}.lab-manifesto strong{font-size:clamp(10px,3.6cqw,17px);line-height:1.1}
 .lab-brief,.lab-edition,.lab-process,.lab-manifesto{justify-content:center}.lab-motion{justify-content:space-evenly}.piece-people figcaption,.piece-torus figcaption,.process-label,.piece-code p,.piece-swatch [data-face=studio]>small{display:none}
 .work{display:flex;flex-direction:column;padding:36px 6vw 60px;gap:22px;min-height:calc(100svh - var(--header))}.work-content{padding:0}.discipline-nav{width:100%;min-width:0}.discipline-nav nav{max-width:100%;margin:0;padding:0 0 10px;min-height:56px}.discipline-nav nav button{font-size:.875rem;line-height:1.5;min-height:44px}.back-intro{padding-bottom:20px;font-size:.875rem}.work-heading{padding-bottom:22px}.work-heading h2{font-size:clamp(1.875rem,8vw,2.65rem)}.gallery-counter{gap:6px;flex:none}
 .gallery{height:clamp(310px,92vw,500px);grid-template-columns:4% minmax(0,1fr) 4%;gap:6px}.project-meta,.gallery-bottom{padding-inline:0}.project-meta h3{font-size:clamp(1.5rem,7vw,2rem)}.project-description{font-size:1rem;line-height:1.75}.project-kicker{font-size:.75rem}.project-link{width:38px;height:38px}.gallery-bottom{row-gap:20px;padding-top:22px}.gallery-arrows{margin-inline-start:auto}.swipe-hint{display:none}
 .contact-rail{width:30px;bottom:16px;top:auto}.contact-rail>span:nth-child(2){display:none}.contact-rail{gap:9px;padding:10px 0}
 html[lang=ar] .hero-copy{padding:0}html[lang=ar] .hero-copy h1{font-size:clamp(2.5rem,4.8vw,3.25rem);line-height:1.35}html[lang=ar] .hero-copy .role{font-size:1rem;line-height:1.9}html[lang=ar] .hero-copy .hero-line{font-size:1.25rem;line-height:1.8}html[lang=ar] .hero-copy .hero-caption{font-size:1rem;line-height:2}
 html[lang=ar] .hero-copy .enter-work{align-self:flex-start;justify-content:flex-start}html[lang=ar] .hero-directions{align-self:flex-start;justify-content:flex-start}html[lang=ar] .work-heading h2{font-size:clamp(1.625rem,7vw,2.4rem);line-height:1.5}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}