/* Portrait chapters: a dedicated phone composition, sharing desktop's visual grammar. */
.hero .scene-picture,.making-frame .scene-picture{display:contents}
.alongside .scene-picture{display:block;width:100%;height:100%}
.mobile-origin,.mobile-chapters{display:none}
@media(min-width:761px) and (max-width:1100px){.alongside .scene-picture{order:2;height:500px}}
@media(max-width:760px){
:root{--gutter:1.5rem}
html{scroll-padding-top:1.5rem}
.site-header{padding:1.3rem var(--gutter);background:linear-gradient(180deg,#0b0b0b66,transparent);align-items:center}
.site-header .brand{width:12rem;gap:.55rem}
.site-header nav a:not(:last-child){display:none}
.site-header nav a:last-child{font-size:.875rem;min-height:44px;display:flex;align-items:center;padding:.4rem 0}
.hero{height:100svh;min-height:760px;max-height:1050px}
.hero-image{object-position:50% center}
.hero:after{background:linear-gradient(180deg,#0003,transparent 55%,#0005)}
.hero-copy{left:var(--gutter);right:var(--gutter);top:18%;max-width:none}
.hero .eyebrow{max-width:18rem;font-size:.75rem;letter-spacing:.13em;color:#c8c2b7;margin-bottom:1.2rem}
.hero h1{font-size:clamp(4.25rem,17vw,7rem);line-height:.91;max-width:27rem;letter-spacing:-.035em}
.hero .brand-line{margin:1.3rem 0 1.1rem;width:6rem}
.hero-support{font-size:1rem;line-height:1.65;max-width:17rem}
.hero-foot{bottom:1.6rem;left:var(--gutter);right:var(--gutter)}
.hero-foot>a{min-height:44px;font-size:.75rem;letter-spacing:.1em}
.hero-foot .scroll-line{height:2rem}
.mobile-chapters{display:flex;justify-content:space-between;gap:.5rem;padding:1.1rem var(--gutter);background:var(--bone);color:var(--carbon);border-bottom:1px solid #bdb7ac;font:.8125rem/1.4 var(--sans)}
.mobile-chapters a{min-height:44px;display:flex;align-items:center}
.section-pad{padding:4.25rem var(--gutter)}
.section-top{margin-bottom:2rem}.index-mark{display:none}
.recognition h2,.work h2,.machinery h2,.experience h2,.people h2{font-size:clamp(2.8rem,11.4vw,4.5rem);line-height:1.02}
.recognition h2 br,.work h2 br,.machinery h2 br,.people h2 br{display:none}
.recognition-bottom{margin-top:2rem;gap:1.5rem}.prose{font-size:1rem;line-height:1.85}.recognition-bottom .dark-line{width:4rem}
.origin-language{margin-top:3rem;padding-top:2rem}.origin-header>p:last-child{font-size:1.5rem;max-width:19rem;line-height:1.25;margin-top:1rem}
.origin-language>img,.origin-labels{display:none}
.mobile-origin{display:block;position:relative;margin-top:2rem}
.mobile-origin:before{content:'';position:absolute;left:.35rem;top:2rem;bottom:2.5rem;width:1px;background:#c0b8aa}
.origin-step{display:grid;grid-template-columns:1rem 7.5rem 1fr;align-items:center;gap:.7rem;min-height:130px;position:relative}
.origin-step-index{font: .75rem var(--mono);color:#766e61;background:var(--bone);padding:.5rem 0;z-index:1}
.origin-step svg{width:100%;height:auto}.origin-step svg path,.origin-step svg circle{vector-effect:non-scaling-stroke;stroke-width:.8}
.origin-step p{font:1.125rem/1.3 var(--serif)}.origin-step p>span{display:block;font:.75rem/1.5 var(--mono);letter-spacing:.12em;color:#70695e;margin-bottom:.45rem}
.question{display:block;min-height:760px;padding-top:4rem;padding-bottom:4rem}
.question>.eyebrow{margin-bottom:2.5rem;position:relative;z-index:1}
.question h2{font-size:clamp(3.1rem,12.8vw,5rem);line-height:1;max-width:24rem}
.question h2 br{display:none}
.question-aside{margin:16rem 0 0 2rem;font-size:1rem;line-height:1.8}
.relationship-field{width:130%;height:480px;top:30%;left:0;right:auto;object-fit:contain;opacity:.8;transform:rotate(90deg)}
.seeing{padding-top:4rem;padding-bottom:3rem}
.seeing h2{font-size:clamp(2.8rem,11.5vw,4rem);line-height:1.05;max-width:24rem}
.seeing-copy>.eyebrow{margin-bottom:1.6rem}.seeing-copy>.brand-line{width:4rem;margin-top:2rem}
.seeing-study{border:0;margin-top:2.5rem;padding:0;display:flex;flex-direction:column}
.seeing-controls{order:2;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #b7b0a3;border-bottom:1px solid #b7b0a3}
.seeing-controls button{min-height:52px;padding:.7rem .1rem;font-size:.75rem;color:#534d44}
.seeing-study>svg{order:1;width:100%;aspect-ratio:1/1;height:auto}
.seeing-caption{order:3;min-height:5.5rem;font-size:1.5rem;line-height:1.3;padding:1.5rem .5rem 0}
.alongside{display:flex;flex-direction:column;height:auto}
.alongside-copy{order:1;padding:3.5rem var(--gutter) 2.5rem;max-width:none}
.alongside-copy .eyebrow{margin-bottom:1.5rem;max-width:18rem}
.alongside h2{font-size:clamp(3rem,12vw,4.5rem)}
.alongside-copy>p:last-child{margin-top:1.5rem;font-size:1rem;line-height:1.8}
.alongside .scene-picture{order:2;height:auto;line-height:0}
.alongside .scene-photo{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% center}
.image-note{font-size:.75rem;right:1rem;bottom:1rem;color:var(--bone);background:#0008;padding:.35rem .5rem}
.work{padding-top:3.5rem;padding-bottom:4rem}
.work-name{margin-top:1.5rem;font-size:.75rem;padding-left:1rem;border-left:1px solid var(--oxide)}
.work-story{margin-top:2.5rem;gap:3rem}
.work-visual{order:0;position:static;margin:0;width:100%}
.making-frame{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
.making-frame img{height:auto;aspect-ratio:4/5;object-position:50% center}
.work-visual figcaption{font-size:.75rem;line-height:1.6;margin-top:1rem}
.work-visual>.brand-line{margin-top:1.8rem;width:4rem}.work-visual>p{font-size:2.15rem;margin-top:1.3rem}
.story-text{position:relative;padding-left:1.2rem;border-left:1px solid #41362f}
.story-part{padding-left:0;margin-bottom:2.5rem}.story-number{position:static;display:block;font-size:.75rem;margin-bottom:1.2rem}
.story-part h3{font-size:2.25rem;line-height:1.08;margin-bottom:1.2rem}.story-part h3 br{display:none}
.story-part>p{font-size:1rem;line-height:1.8}
.evidence-note{font-size:.8125rem;line-height:1.7}
.method-heading{display:block}.method-heading>.prose{margin-top:1.5rem;font-size:1rem}
.movements{margin-top:2.5rem}.movements summary{padding:1.35rem 0;min-height:96px}.movement-name{font-size:2.75rem}.movement-description{font-size:.9375rem}
.movement-body{margin-left:2.25rem;padding-right:0;font-size:1rem;line-height:1.8}
.experience>.eyebrow,.people>.eyebrow{margin-bottom:2rem}.experience-list{margin-top:2.5rem}
.experience-row{padding:2rem 0;gap:1rem}.experience-row h3{font-size:2.25rem}.experience-row>.result{margin-top:.3rem;padding-left:1rem;border-left:1px solid var(--oxide)}
.result>span{font-size:1.8rem;margin-bottom:.5rem}.people-layout{gap:1.8rem}.people .brand-line{margin-top:2rem;width:4rem}
.begin{min-height:640px;padding-top:4rem;padding-bottom:4rem}.begin>.eyebrow{margin-bottom:2.5rem}.begin h2{font-size:clamp(3.1rem,13vw,5rem);line-height:1.02}.begin h2 br{display:none}
.begin-bottom{margin-top:2.5rem;gap:1.7rem}.begin-bottom>.brand-line{width:4rem}.begin-bottom p{font-size:1rem}.text-link{font-size:2rem;min-height:44px}
.site-footer{padding:2rem var(--gutter);gap:1.5rem}.site-footer .brand{width:12rem}.site-footer>a:last-child{max-width:none}.site-footer>p{font-size:.75rem}
.motion .reveal{transform:translateY(12px);transition-duration:.65s}
}
@media(max-width:360px){.site-header .brand{width:11rem}.origin-step{grid-template-columns:1rem 6rem 1fr;gap:.6rem}.hero h1{font-size:4rem}.hero-copy{top:16%}.question-aside{margin-left:0}}
@media(prefers-reduced-motion:reduce){.motion .reveal{transform:none;transition:none}}
@media(max-width:760px){.story-text{order:1}}
/* A centered invitation contained entirely by the portrait's dark architecture. */
@media(max-width:760px){
.site-header{justify-content:center;padding:1.6rem 1.5rem;background:none}
.site-header .brand{width:clamp(14rem,65vw,18rem);gap:.6rem}
.site-header nav{display:none}
.hero-copy{top:22%;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero .eyebrow{display:none}
.hero h1{font-size:clamp(3rem,14.5vw,5.5rem);line-height:.98;max-width:100%;letter-spacing:-.025em}
.hero .brand-line{width:3.5rem;margin:1.5rem auto 1.2rem}
.hero-support{font-size:1rem;line-height:1.65;max-width:18rem;color:#e8e4dc;text-align:center}
}
/* Extend the dark breathing space above the mobile threshold. */
@media(max-width:760px){
.hero{background:#0b0b0b}
.hero-image{transform:translateY(clamp(3.5rem,8svh,6rem))}
.hero:after{background:linear-gradient(180deg,#0b0b0b 0%,rgba(11,11,11,.86) 6%,rgba(11,11,11,.25) 24%,transparent 48%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 24%)}
}