/* Oversized editorial phrases peak in the space between chapters. */
.depth-particles{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:0;opacity:.3;filter:blur(.85px);mix-blend-mode:multiply}
.quote-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.quote-track{position:absolute;inset:0;will-change:transform}
body>main,body>footer,.journey{position:relative;z-index:1}
.design-thought{position:absolute;z-index:0;pointer-events:none;user-select:none;left:50%;top:50%;width:80vw;margin:0;text-align:center;color:#44484b;opacity:0;line-height:.88;letter-spacing:-.065em;font-size:clamp(80px,11.8vw,200px);font-weight:750;transform:translate(-50%,-50%);transition:opacity .22s ease,filter .3s ease;}
.design-thought span,.design-thought em{display:block}
.design-thought em{background:none;color:inherit;font-family:Georgia,serif;font-weight:400;letter-spacing:-.065em;font-size:.8em;line-height:1.03;margin:0}
.motion .scroll-soft,.horizontal .scroll-soft.reveal{opacity:var(--reveal,1)!important;filter:blur(var(--soft-blur,0px));transition:opacity .3s ease,filter .35s ease}
.motion-word{display:inline-block;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease;will-change:transform}
.scroll-soft:focus-within{opacity:1!important;filter:none!important}
@media(max-width:899px){.design-thought{font-size:clamp(58px,14vw,120px);width:92vw}}
@media(prefers-reduced-motion:reduce){.design-thought{display:none}.scroll-soft,.motion-word{opacity:1!important;filter:none!important;transform:none!important}}
@media(max-width:899px),(prefers-reduced-motion:reduce){.depth-particles{display:none}}

/* The entire quote strip sits below the presentation, including its video. */
.horizontal .intro,.horizontal .experience{background:rgba(255,255,255,.3)}
.horizontal .work,.project-horizontal main>.detail-gallery{background:rgba(243,247,250,.4)}
.project-horizontal .next-project,.project-horizontal .project-brief{background:rgba(255,255,255,.3)}
.horizontal footer{background:rgba(217,239,252,.5)}
@media(prefers-reduced-motion:reduce){.quote-layer{display:none}}
/* Breathing room between chapters gives the background thoughts a clear stage. */
/* Mobile quote siblings must not interrupt the desktop chapter spacing. */
.horizontal main>section~section{margin-left:65vw}
.horizontal .journey>footer{margin-left:65vw}
.project-horizontal .next-project{margin-left:65vw}
/* Quote typography resolves line by line without overflowing its reading area. */
.design-thought{width:76vw;font-size:clamp(72px,10.4vw,176px)}
.design-thought em{font-size:.68em;overflow-wrap:normal}
.design-thought span,.design-thought em{transform:translateY(var(--quote-rise,0px));opacity:var(--quote-line-opacity,1);transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease}
/* Keep text metrics fixed: animated tracking can rewrap entire quote lines. */
.design-thought span{letter-spacing:-.065em}
.design-thought em{transform:translateY(var(--quote-second-rise,0px));opacity:var(--quote-second-opacity,1)}
@media(min-width:900px){.horizontal .experience-thought{margin-left:3vw}}
/* Project phrases each occupy one deliberate line, with room for glyphs. */
.project-horizontal .design-thought{width:84vw;font-size:clamp(48px,7.2vw,128px);line-height:1.06;letter-spacing:-.04em}
.project-horizontal .design-thought span,.project-horizontal .design-thought em{white-space:nowrap;letter-spacing:-.04em}
.project-horizontal .design-thought em{margin-top:.12em;line-height:1.12}
.horizontal main>.hero{background-color:transparent}
@media(max-width:899px){.design-thought{width:90vw;font-size:clamp(52px,12vw,100px)}}
/* A transparent hero needs normal ink rather than white difference blending. */
.horizontal .hero-name{mix-blend-mode:normal;color:var(--ink);z-index:2}
/* Phone/tablet reading mode: quotes get their own vertical breathing room. */
.mobile-thought{display:none}
body:not(.horizontal) .quote-layer{display:none}
body:not(.horizontal) .mobile-thought{display:block;margin:0;padding:64px 7%;text-align:center;color:#555b60;font-size:clamp(34px,8.5vw,64px);font-weight:700;line-height:1.05;letter-spacing:-.055em;background:#fff}
.mobile-thought span,.mobile-thought em{display:block}
.mobile-thought em{background:none;font-family:Georgia,serif;font-weight:400;font-size:.8em;margin-top:12px}
@media(max-width:899px){
 .mobile-thought span{opacity:var(--mobile-line-one,0);filter:blur(var(--mobile-blur-one,18px));transform:translateY(calc((1 - var(--mobile-line-one,0))*22px))}
 .mobile-thought em{opacity:var(--mobile-line-two,0);filter:blur(var(--mobile-blur-two,18px));transform:translateY(calc((1 - var(--mobile-line-two,0))*22px))}
 .mobile-thought span,.mobile-thought em{transition:opacity .16s linear,filter .16s linear,transform .16s linear;will-change:opacity,filter,transform}
}
@media(max-width:899px){
 html,body{overflow-x:clip}
 header{height:84px;padding:18px 6%}.header-note{display:none}
 .hero{height:850px;max-height:none;margin:0 6%}
 .hero-intro{top:122px;max-width:100%}.hero-intro p{font-size:clamp(24px,6.5vw,34px)}
 .portrait.hero-film{top:320px;left:50%;right:auto;margin-left:-55%;width:110%;height:440px}
 .hero-film .hero-still,.hero-film .hero-canvas{transform:scale(1.3125);transform-origin:center top}
 .hero-name{bottom:98px;mix-blend-mode:normal;color:var(--ink);z-index:3}
 .hero h1{font-size:clamp(64px,17vw,130px)}.hero h1 span{margin-left:0}
 .hero-bottom{font-size:10pt;gap:16px;bottom:28px}.hero-bottom>span{max-width:52%}
 .hero-film .film-control{right:18%;bottom:12%}
 .footer-bottom{grid-template-columns:1fr;gap:18px}.footer-bottom a{overflow-wrap:anywhere}
 .detail-heading h1{overflow-wrap:anywhere}.detail-intro{min-width:0}
 .identity-gallery,.poster-gallery{grid-template-columns:1fr}
 .menu-email{font-size:clamp(14px,4vw,22px);overflow-wrap:anywhere}
 .section{padding-top:56px;padding-bottom:56px}
 footer#contact{min-height:760px;overflow:hidden;isolation:isolate;padding-bottom:24px}
 footer#contact>.eyebrow,footer#contact>.contact-title,footer#contact>.footer-bottom{position:relative;z-index:2}
 footer#contact .return-portrait{display:block;position:absolute;right:4vw;bottom:-20px;width:min(78vw,430px);height:clamp(410px,58vh,500px);z-index:1;pointer-events:none}
 footer#contact .return-portrait img{width:100%;height:100%;object-fit:contain;object-position:right bottom;filter:none!important;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%)!important}
}
@media(prefers-reduced-motion:reduce){.mobile-thought{display:block!important}.mobile-thought span,.mobile-thought em{opacity:1;filter:none;transform:none}}
.line-arrow{display:inline-block;width:1em;height:1em;min-width:1em;vertical-align:-.1em;overflow:visible}
.project-open .line-arrow{width:24px;height:24px}
.contact-title .line-arrow{width:.75em;height:.75em}
