/* V41 — alignment, assembly, release. Final layouts remain usable without JavaScript. */
.hero-portrait{isolation:isolate;overflow:visible}
.portrait-window{display:block;overflow:hidden;border-radius:inherit;aspect-ratio:4/5;position:relative}
.hero-portrait img{transform-origin:50% 78%;width:100%;height:100%;object-fit:contain;filter:none}
.hero-portrait[data-playing=true] img{animation:portrait-presence 6.4s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
@keyframes portrait-presence{0%,100%{transform:translate3d(-1px,0,0) rotate(-.25deg) scale(1.01)}50%{transform:translate3d(2px,-5px,0) rotate(.3deg) scale(1.035)}}
.hero-portrait .portrait-toggle{width:40px;height:40px;right:12px;bottom:12px;padding:10px}
.hero-portrait figcaption{font-size:11px;letter-spacing:.015em}
.hero{padding-block:54px 65px}
.hero .eyebrow{max-width:32ch;line-height:1.7}
.interface-history{padding-top:64px;overflow:clip}
.history-intro{position:relative;grid-template-columns:1.3fr .75fr;gap:50px;padding-block:18px 56px;margin-bottom:0}
.history-intro h2{font-size:clamp(43px,5.6vw,80px);line-height:1.02;max-width:16ch;letter-spacing:-.055em}
.motion-line{display:block;overflow:clip;padding:.08em .06em .14em;margin:-.08em -.06em -.14em}
.motion-word{display:inline-block;transform-origin:50% 100%;position:relative}
.history-intro:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--blue);transform:scaleX(var(--line-progress,1));transform-origin:left}
.history-stage{perspective:1100px;border-radius:var(--stage-radius,0);transform-origin:50% 60%;background:#dce4f8}
.history-stage:after{content:'';position:absolute;inset:18px;border:1px solid #fff8;pointer-events:none;opacity:var(--guide-opacity,0)}
.history-stage .era-component{transform-origin:50% 50%;will-change:auto}
.history-stage .era-content{position:relative}
.history-stage .era-step,.history-stage #era-question,.history-stage .era-principles li,.history-stage .era-chrome{position:relative;transform-origin:50% 50%}
.history-track{position:relative}
.history-topline{position:relative}
.history-topline:after{content:'';position:absolute;bottom:0;left:0;width:calc(var(--era-progress,0) * 100%);height:2px;background:var(--blue);transition:width .22s}
.is-scroll-story .history-track{height:calc(100svh - var(--header) + 105svh)}
.history-end{padding-block:25px 0}
.work{position:relative;padding-top:96px}
.work:before{content:'';display:block;position:absolute;top:0;left:50%;width:1px;height:60px;background:var(--blue);transform:scaleY(var(--work-progress,1));transform-origin:top}
.work .section-head h2{font-size:clamp(44px,5.7vw,78px);line-height:1.04}
.project-image{transform-origin:50% 60%;outline-offset:6px}
.project-image:focus-visible,.project-row:focus-within .project-image{transform:none!important;clip-path:none!important}
.project-row:focus-within .motion-word{transform:none!important}
.project-image img{transition:none}
.project-image:hover img{transform:none}
.project-image:hover .project-open,.project-image:focus-visible .project-open{background:var(--blue);color:white}
.project-open{transition:background-color .18s,color .18s;min-height:44px}
.project-image:before{content:'';position:absolute;inset:0;border:1px solid #173e901c;z-index:1;pointer-events:none}
.malakoff .project-image img{object-fit:contain;background:#f0f3f7}
.image-notes li{transform-origin:left center}
@media(max-width:800px){.history-intro{gap:28px}.history-intro h2{font-size:50px}.hero{padding-block:40px 58px}}
@media(max-width:600px){
 .hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(142px,43vw,182px);column-gap:18px;row-gap:0;padding-block:24px 38px;align-items:center}
 .hero-copy{display:contents}.hero .eyebrow{grid-column:1;grid-row:1;padding:0;margin:0;max-width:15ch;font-size:11px;line-height:1.9;align-self:center;color:var(--blue)}
 .hero-portrait{position:relative;inset:auto;grid-column:2;grid-row:1;width:100%;align-self:center;border-radius:100px 100px 5px 5px;margin-bottom:22px}
 .hero-portrait .portrait-toggle{right:7px;bottom:7px;width:36px;height:36px;padding:9px}
 .hero h1{grid-column:1/-1;grid-row:2;font-size:clamp(36px,10.4vw,47px);max-width:none;margin-bottom:18px;line-height:1.04}
 .hero-intro{grid-column:1/-1;grid-row:3;font-size:14px;line-height:1.65}
 .hero-actions{grid-column:1/-1;grid-row:4;margin-top:20px;gap:12px 20px}
 .hero-shortcuts{grid-column:1/-1;grid-row:5;margin-top:20px;padding-top:10px}
 .interface-history{padding-top:36px}.history-intro{padding-block:0 30px;display:block}.history-intro h2{font-size:clamp(38px,11vw,50px);max-width:16ch}
 .history-intro>div>p:not(.eyebrow){margin-top:23px}
 .history-stage{min-height:390px;padding:32px 24px;perspective:800px}.history-stage:after{inset:10px}
 .history-topline{padding-top:20px;padding-bottom:16px;min-height:97px}
 .history-controls{padding-top:11px}.history-help{font-size:11px}.era-selector button{min-height:60px}
 .history-end{padding-top:22px}.work{padding-top:74px}.work:before{height:40px}
 .work .section-head h2{font-size:46px}.project-row{gap:26px}.project-open{font-size:11px}.project-copy h3{font-size:36px}
 .malakoff .project-image{aspect-ratio:1.04}.hero-portrait figcaption{display:none}
}
@media(max-width:360px){.hero{column-gap:12px}.hero .eyebrow{font-size:10px}.hero h1{font-size:35px}.hero-actions{gap:8px 15px}.history-stage{padding-inline:20px}}
.motion-reduced .motion-word,.motion-reduced .history-stage,.motion-reduced .history-stage .era-component,.motion-reduced .history-stage .era-content>*,.motion-reduced .history-stage .era-principles li,.motion-reduced .history-stage .era-chrome,.motion-reduced .project-image,.motion-reduced .image-notes li{transform:none!important;clip-path:none!important}
.motion-reduced .hero-portrait img{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.motion-word,.history-stage,.history-stage .era-component,.history-stage .era-content>*,.history-stage .era-principles li,.history-stage .era-chrome,.project-image,.image-notes li{transform:none!important;clip-path:none!important}.hero-portrait img{transform:none!important}}
@media print{.motion-word,.project-image,.image-notes li{transform:none!important;clip-path:none!important}}

.motion-reduced .history-stage{scale:1!important;border-radius:0!important}
@media(prefers-reduced-motion:reduce){.history-stage{scale:1!important;border-radius:0!important}}
