/* Foreground objects cross section edges; the photographic layers remain independent. */
.hero{overflow:visible;z-index:4}
.hero-art{overflow:hidden;mask-image:linear-gradient(#000 82%,transparent 100%)}
.hero-glass{mix-blend-mode:normal;z-index:6}
.hero-glass-left{width:min(60vw,1000px);bottom:-16%;left:-12vw}
.hero-glass-right{width:min(55.33vw,933px);bottom:-18%;right:-12.17vw}
.hero-glass-center{width:min(90vw,1500px);left:50%;bottom:calc(-1 * clamp(310px,30vw,490px));z-index:7;transform:translate3d(calc(-50% + var(--foreground-x,0px) * .5),calc(var(--foreground-drift,0px) * .45),0) rotate(-3deg)}
/* Five overlapping groups keep wide screens connected, with room around the face. */
.hero-glass-inner-left,.hero-glass-inner-right{display:none}
@media(min-width:1101px){
 .hero{--hero-glass-outer:min(40vw,1250px)}
 .hero-glass-left{width:var(--hero-glass-outer);left:calc(6% - var(--hero-glass-outer) / 2);top:58%;bottom:auto}
 .hero-glass-right{width:var(--hero-glass-outer);right:calc(6% - var(--hero-glass-outer) / 2);top:61%;bottom:auto}
 .hero-glass-inner-left,.hero-glass-inner-right{display:block;width:min(39vw,1250px);bottom:auto;z-index:6}
 .hero-glass-inner-left{left:28%;top:68%;transform:translate3d(calc(-50% + var(--foreground-x,0px) * .7),calc(var(--foreground-drift,0px) * .65),0) rotate(9deg)}
 .hero-glass-inner-right{left:72%;top:66%;transform:translate3d(calc(-50% + var(--foreground-x,0px) * -.6),calc(var(--foreground-drift,0px) * .8),0) rotate(-11deg)}
 .hero-glass-inner-left img{transform:scaleX(-1)}
 .hero-glass-center{width:min(44vw,1100px);top:78%;bottom:auto}
 .reduced .hero-glass-inner-left{transform:translateX(-50%) rotate(9deg)!important}
 .reduced .hero-glass-inner-right{transform:translateX(-50%) rotate(-11deg)!important}
}
@media(min-width:1101px) and (prefers-reduced-motion:reduce){
 .hero-glass-inner-left{transform:translateX(-50%) rotate(9deg)!important}
 .hero-glass-inner-right{transform:translateX(-50%) rotate(-11deg)!important}
}
.hero-footer{z-index:9;bottom:35px}
.hero-footer .scroll-cue{box-shadow:0 0 0 1px #0009,0 8px 30px #0005}
.opening{padding-top:210px;z-index:5;background:transparent!important}
.opening-title{position:relative}
.opening h1{text-shadow:0 2px 4px #000,0 5px 26px #000c}
.opening .hero-kicker{position:relative;text-shadow:0 1px 5px #000,0 0 16px #000}

/* The periodic-table identity is visible before the first scroll. */
.hero-brand{position:absolute;z-index:8;left:var(--gutter);top:155px;width:26vw;max-width:370px;color:#fff;isolation:isolate}
.hero-brand:before{content:'';position:absolute;inset:-35px -25px;z-index:-1;background:radial-gradient(ellipse,#000b 20%,#0007 55%,transparent 75%);filter:blur(14px);pointer-events:none}
.hero-elements{display:block;width:100%;max-width:360px}
.hero-elements .logo{width:100%;height:auto;aspect-ratio:3.02}
.hero-elements:focus-visible{outline-offset:10px}
.hero-baselines{margin-top:24px;font:400 clamp(29px,3vw,44px)/1.13 var(--display);text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 2px 16px #000}
.hero-baselines p+p{margin-top:5px}
.hero-baselines em{font:inherit;letter-spacing:inherit;color:var(--orange)}
.hero-brand-note{font-size:15px;line-height:1.6;margin-top:21px;color:#efefef;text-shadow:0 1px 7px #000}

/* A full-width horizontal line makes the mix of disciplines tangible. */
.expertise-strip{display:block;position:relative;overflow:hidden;margin:85px calc(-1 * var(--gutter)) 0;padding:0;border-color:#ffffff36}
.expertise-caption{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px var(--gutter);border-bottom:1px solid #ffffff20}
.expertise-caption .micro{font-size:12px;letter-spacing:.06em;color:#c2c2c2}
.ribbon-pause{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 5px;font-size:12px;letter-spacing:.02em;flex-shrink:0}
.ribbon-pause svg{width:18px;height:18px}
.ribbon-pause:disabled{opacity:.5;cursor:default}
.expertise-window{overflow:hidden;padding:22px 0 30px;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.expertise-flow{display:flex;width:max-content;animation:discipline-flow 38s linear infinite}
.expertise-row{display:flex;align-items:center;flex-shrink:0;gap:40px;padding-right:40px}
.discipline-word{font:400 clamp(52px,6.4vw,105px)/1.2 var(--display);letter-spacing:-.02em;color:var(--white)}
.discipline-bond{font:400 clamp(36px,4vw,64px)/1 var(--font);color:var(--orange)}
.expertise-window:hover .expertise-flow,.ribbon-paused .expertise-flow,.reduced .expertise-flow{animation-play-state:paused}
@keyframes discipline-flow{to{transform:translateX(-50%)}}
.reduced .expertise-window{overflow-x:auto;mask-image:none}
.reduced .expertise-flow{animation:none;transform:none}
.reduced .expertise-row[aria-hidden]{display:none}
@media(prefers-reduced-motion:reduce){.expertise-window{overflow-x:auto;mask-image:none}.expertise-flow{animation:none}.expertise-row[aria-hidden]{display:none}}

/* A new, wide chemistry arrangement introduces the selected work. */
.work-masthead{position:relative;margin:10px calc(-1 * var(--gutter)) 90px}
.wide-chemistry{position:relative;width:112%;margin:0 0 0 -6%;transform:translate3d(0,var(--panorama-drift,0px),0) rotate(var(--panorama-turn,0deg));transition:transform 1.4s var(--ease);pointer-events:none}
.wide-chemistry img{display:block;width:100%;height:auto}
.work-masthead .section-heading{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:28px;margin:-45px auto 0;padding:0 var(--gutter);text-align:center}
.work-masthead .section-heading h2{font-size:clamp(56px,7.8vw,120px);line-height:1.06}
.work-masthead .section-heading p{font-size:18px;color:#bdbdbd;max-width:600px}

/* Closing portrait and live type, following the scale of the supplied reference. */
.signature-scene{position:relative;min-height:720px;height:66vw;max-height:1000px;background:#000;isolation:isolate;overflow:hidden}
.signature-portrait{position:absolute;inset:auto 0 0;height:84%;transform:translate3d(0,var(--signature-drift,0px),0);transition:transform 1.2s var(--ease)}
.signature-portrait img{width:100%;height:100%;object-fit:contain;object-position:right bottom;mask-image:linear-gradient(#000 83%,transparent 100%)}
.signature-copy{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:6%;pointer-events:none}
.signature-copy h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(120px,20vw,314px);line-height:.85;letter-spacing:-.025em;color:white;margin:0}
.signature-copy h2 span{display:block;width:max-content}
.signature-copy h2 span:last-child{font-size:.9em;background:linear-gradient(175deg,#999 0%,#fff 65%);color:transparent;background-clip:text;-webkit-text-fill-color:transparent}
.signature-copy p{font:italic clamp(24px,2.4vw,38px)/1.15 var(--serif);margin:22px 0 0;color:white}
.signature-copy p em{font:inherit;color:var(--orange)}
.about-combined{background:#000}
.about-details{padding-top:65px;padding-bottom:110px}
.about-story{display:grid;grid-template-columns:.7fr 1.3fr;gap:8%}
.about-role .micro{line-height:1.9;color:#aaa}
.about-details .about-copy h3{font:italic clamp(32px,4vw,54px)/1.1 var(--serif);max-width:650px;margin:0 0 28px}
.about-details .about-copy p{max-width:740px}
.personal-archive{margin:45px 0 0 43%;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.personal-archive summary{display:flex;justify-content:space-between;align-items:center;padding:22px 0;cursor:pointer;font-size:16px;list-style:none}
.personal-archive summary::-webkit-details-marker{display:none}
.personal-archive summary svg{width:20px;height:20px;transition:transform .3s}
.personal-archive[open] summary svg{transform:rotate(45deg)}
.personal-archive .about-personal{margin-top:10px;padding-bottom:25px}
.contact-direct{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.contact-email{font-size:clamp(21px,2vw,32px);letter-spacing:-.035em;border-bottom:1px solid #0005;padding-bottom:7px;display:inline-flex;align-items:center;gap:18px;white-space:nowrap}
.contact-email svg{width:24px;height:24px;transition:transform .3s}
.contact-email:hover svg{transform:translate(5px,-4px) rotate(-40deg)}
.contact-phone{font-size:21px;letter-spacing:-.02em}
.contact-direct .micro{font-size:11px;letter-spacing:.04em;margin-top:8px;color:#39200d}
.contact .contact-panel .contact-main{margin-bottom:20px}
.contact{padding-top:0;padding-bottom:430px;overflow:hidden;isolation:isolate}
.contact-panel{position:relative;z-index:3;background:var(--orange);color:#080808;padding:55px 5.5%;margin-top:-35px;--rule:#0004}
.contact-panel .section-top{margin-bottom:30px;border-color:#0004}
.contact-panel .status-dot{background:#080808}
.contact-panel .contact-status{max-width:360px}
.contact .contact-panel h2{color:#080808;font-size:clamp(50px,6vw,90px);max-width:none}
.contact .contact-panel h2 em{color:#080808}
.contact .contact-panel .contact-main{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:40px;max-width:none;margin-top:30px}
.contact .contact-panel .contact-main p{color:#241404;font-size:18px;max-width:570px}
.contact .contact-panel .primary{background:#080808;border-color:#080808;color:white;flex-shrink:0}
.contact .contact-panel .primary:before{background:white}
.contact .contact-panel .primary:hover{background:white;color:#080808}
.contact .footer-identity{margin-top:70px}
.contact-glass{width:min(83vw,1350px);right:auto;left:50%;top:auto;bottom:-180px;z-index:1;transform:translate3d(-50%,var(--closing-drift,0px),0) rotate(-9deg)}
.contact .footer-bottom{position:relative;z-index:2}
@media(min-width:761px) and (max-width:1100px){
 .hero-brand{top:140px;width:28vw}.hero-baselines{font-size:3.5vw}.hero-brand-note{font-size:13px}
 .hero-glass-left{width:73.33vw;left:-21.67vw;bottom:-14%}.hero-glass-right{width:73.33vw;right:-24.67vw;bottom:-16%}
 .signature-scene{height:78vw;min-height:650px}.signature-portrait{height:82%}.signature-portrait img{object-position:right bottom}
 .hero-glass-center{width:110vw;bottom:-360px}
 .contact .contact-panel .contact-main{align-items:flex-start;flex-direction:column;gap:25px}
 .contact-glass{width:95vw}
}
@media(max-width:760px){
 .hero{height:calc(92svh + 200px);min-height:850px;max-height:1150px}
 .hero-art,html[lang=en] .hero-art{inset:260px 0 0;height:calc(100% - 260px)}
 .hero-brand{top:108px;left:var(--gutter);right:var(--gutter);width:auto;max-width:none;text-align:center}
 .hero-brand:before{display:none}
 .hero-elements{width:230px;max-width:75%;margin:auto}
 .hero-baselines{display:flex;justify-content:center;gap:20px;margin-top:15px;font-size:clamp(19px,5.3vw,29px);line-height:1.15}
 .hero-baselines p+p{margin-top:0}
 .hero-baselines em{display:block}
 .hero-brand-note{font-size:12px;line-height:1.5;margin-top:13px}
 .hero-art-shade{background:linear-gradient(#000 0%,transparent 20%,transparent 65%,#0008)}
 .hero-pause{top:20px}
 .expertise-strip{margin-top:50px}
 .expertise-caption{padding:8px var(--gutter);gap:12px}
 .expertise-caption .micro{max-width:185px;font-size:10px;line-height:1.5}
 .expertise-row{gap:25px;padding-right:25px}
 .expertise-window{padding:20px 0 24px}
 .discipline-word{font-size:54px}.discipline-bond{font-size:36px}
 .hero-glass-left{width:96.67vw;max-width:667px;left:-40.83vw;bottom:-11%}.hero-glass-right{width:96.67vw;max-width:667px;right:-44.83vw;bottom:-14%}
 .hero-glass-center{width:145vw;max-width:1000px;bottom:-235px}
 .hero-footer{bottom:28px}
 .opening{padding-top:150px}
 .work-masthead{margin-top:45px;margin-bottom:55px}
 .wide-chemistry{width:150%;margin-left:-25%}
 .work-masthead .section-heading{margin-top:0;gap:22px}
 .work-masthead .section-heading h2{font-size:clamp(36px,10.5vw,70px)}
 .work-masthead .section-heading p{font-size:16px}
 .signature-scene{height:880px;min-height:700px;max-height:115svh}
 .signature-portrait{height:78%;inset:auto 0 13%}
 .signature-portrait img{object-fit:cover;object-position:75% center;mask-image:linear-gradient(#000 68%,transparent 100%)}
 .signature-copy{bottom:7%}
 .signature-copy h2{font-size:28.7vw;line-height:.9}
 .signature-copy h2 span:last-child{font-size:.72em}
 .signature-copy p{font-size:25px;margin-top:18px}
 .about-details{padding-top:35px;padding-bottom:75px}
 .about-story{grid-template-columns:1fr;gap:28px}
 .about-role .micro{font-size:12px}
 .about-details .about-copy h3{font-size:36px}
 .personal-archive{margin:30px 0 0}
 .contact-email{font-size:clamp(18px,5.1vw,24px);gap:10px}
 .contact-phone{font-size:20px}
 .contact{padding-top:0;padding-bottom:245px}
 .contact-panel{padding:35px 24px;margin:0 calc(-1 * var(--gutter) + 15px)}
 .contact .contact-panel .section-top{background:none;padding-top:0;margin-bottom:25px}
 .contact .contact-panel h2{font-size:clamp(37px,10.5vw,65px)}
 .contact .contact-panel .contact-main{flex-direction:column;align-items:stretch;gap:25px;margin-top:25px}
 .contact .contact-panel .contact-main p{font-size:17px;line-height:1.65}
 .contact .contact-panel .primary{white-space:normal;justify-content:space-between;padding:18px 20px}
 .contact .footer-identity{margin-top:55px}
 .contact-glass{width:125vw;top:auto;bottom:-85px;right:auto;left:50%}
}
.reduced .hero-glass-center{transform:translateX(-50%) rotate(-3deg)!important}
.reduced .wide-chemistry,.reduced .signature-portrait{transform:none!important;transition:none!important}
.reduced .contact-glass{transform:translateX(-50%) rotate(-9deg)!important}
@media(prefers-reduced-motion:reduce){.hero-glass-center{transform:translateX(-50%) rotate(-3deg)!important}.wide-chemistry,.signature-portrait{transform:none!important;transition:none!important}.contact-glass{transform:translateX(-50%) rotate(-9deg)!important}}

/* Touch gets scroll-driven depth, with smaller travel and quick settling. */
@media(max-width:900px),(hover:none),(pointer:coarse){
 .hero-art{will-change:auto}
 .hero-glass,.wide-chemistry,.signature-portrait,.chem-glass,.contact-glass{transition:transform .28s ease-out;will-change:auto}
 .scroll-word{transition:opacity .24s ease-out}
 .heading-unfold{clip-path:inset(0);transition:clip-path .85s var(--ease),opacity .65s,transform .85s var(--ease)}
 .will-reveal:not(.in-view) .heading-unfold,.heading-unfold.will-reveal:not(.in-view){clip-path:inset(0 0 65%)}
 .will-reveal{transition:opacity .75s var(--ease),transform .9s var(--ease)}
 .work-track .project-image>img{transform:translate3d(0,var(--work-parallax,0px),0) scale(1.08);transition:transform .25s ease-out}
 .practice-visual.depth-photo,.about-portrait.depth-photo,.gallery-item>.depth-photo{overflow:hidden}
 .practice-visual.depth-photo>img,.about-portrait.depth-photo>img,.gallery-item>.depth-photo>img{transform:translate3d(0,var(--photo-scroll,0px),0) scale(1.08);transition:transform .25s ease-out}
 .signature-copy h2 span{transform:translate3d(var(--signature-type-shift,0px),0,0);transition:transform .28s ease-out}
 .signature-copy h2 span:last-child{transform:translate3d(calc(var(--signature-type-shift,0px) * -1),0,0)}
 .pill:active,.round-button:active,.film-link:active{scale:.96}
 .pill,.round-button,.film-link{transition:scale .2s ease-out,background .3s,color .3s}
 .reduced .signature-copy h2 span{transform:none!important}
 .reduced .pill,.reduced .round-button,.reduced .film-link{scale:1!important}
}
@media(prefers-reduced-motion:reduce){
 .signature-copy h2 span{transform:none!important}
 .hero-art{transform:none!important}
 .heading-unfold{clip-path:none!important}
 .scroll-word{opacity:1!important}
 .pill,.round-button,.film-link{scale:1!important}
}