/* The Assembly — one spatial composition spanning the full viewport. */
.assembly-hero{--stage-ink:#092c4b;--stage-muted:#42677c;--stage-line:#275b7d3b;position:relative;isolation:isolate;overflow:hidden;min-height:960px;height:110svh;max-height:1300px;padding:112px 4.5vw 24px;background:radial-gradient(ellipse at 50% 53%,#e0edf2 0%,#b6d4e3 40%,#8bb9d3 100%);color:var(--stage-ink)}
:root[data-theme="dark"] .assembly-hero{--stage-ink:#dfeef4;--stage-muted:#8db1c5;--stage-line:#a3cbe032;background:radial-gradient(ellipse at 50% 54%,#1b4260 0%,#0a2540 40%,#061b2c 100%)}
.assembly-byline{position:relative;z-index:3;display:flex;justify-content:space-between;font:9px Mono;letter-spacing:.09em;color:var(--stage-muted)}
.assembly-heading{position:relative;z-index:3;margin:37px auto 0;text-align:center;width:100%;pointer-events:none}
.assembly-heading>.eyebrow{font-size:8px;letter-spacing:.13em;color:var(--stage-muted)}
.assembly-heading h1{font:500 clamp(72px,8.9vw,152px)/.86 Studio;letter-spacing:-.065em;margin:24px 0 0}
.assembly-heading h1 em{font-family:Editorial;font-weight:400;letter-spacing:-.047em;color:inherit}
.heading-note{position:absolute;text-align:left;right:0;top:68px;font:10px/1.5 Mono;color:var(--stage-muted)}
#assembly-art{position:absolute;inset:285px -5vw 183px;z-index:2;touch-action:pan-y;contain:layout paint}
#assembly-art canvas{display:block;width:100%;height:100%;position:absolute;inset:0;opacity:0;transition:opacity .7s}
#assembly-art[data-ready="true"] canvas{opacity:1}
.assembly-fallback{position:absolute;left:26%;top:17%;width:48%;transform:rotate(-8deg) perspective(900px) rotateX(32deg);padding:18px;border-radius:20px;background:#123bff;box-shadow:0 35px 0 #072797,0 55px 75px #09274650;transition:opacity .3s}
.assembly-fallback img{width:100%;height:auto;aspect-ratio:1.6;object-fit:contain;background:#08224c;border-radius:8px;display:block}
#assembly-art[data-ready="true"] .assembly-fallback{opacity:0}
.assembly-margin{position:absolute;top:54%;z-index:3;display:flex;gap:30px;flex-direction:column;font:8px/1.65 Mono;letter-spacing:.04em;color:var(--stage-muted);pointer-events:none}
.assembly-margin.left{left:4.5vw}.assembly-margin.right{right:4.5vw;text-align:right}
.assembly-margin.right span:last-child{writing-mode:vertical-rl;align-self:flex-end;letter-spacing:.12em}
.assembly-footer{position:absolute;bottom:90px;left:4.5vw;right:4.5vw;z-index:4;display:grid;grid-template-columns:1.1fr 1fr auto;gap:50px;align-items:end}
.assembly-intro p{font-size:16px;line-height:1.5;max-width:325px;margin:0 0 20px}
.assembly-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:48px;font-size:13px;border-bottom:1px solid var(--stage-line)}
.assembly-cta span{font-size:23px}
.assembly-project{padding-left:25px;border-left:1px solid var(--stage-line);max-width:360px}
.assembly-project>.eyebrow{font-size:8px;color:var(--stage-muted);letter-spacing:.06em}
.assembly-project-tabs{display:flex;gap:12px;align-items:center;margin:9px 0 7px;color:var(--stage-muted)}
.assembly-project-tabs button{font:500 22px Studio;min-height:38px;color:inherit;letter-spacing:-.03em;transition:color .25s}
.assembly-project-tabs button[aria-pressed="true"]{color:var(--stage-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.assembly-project p{font-size:12px;line-height:1.5;color:var(--stage-muted);min-height:36px;margin:0 0 6px}
.assembly-work{font-size:11px;display:inline-block;padding:9px 0}
#assembly-open{display:flex;align-items:center;gap:15px;min-height:66px;text-align:left;font:10px Mono;color:var(--stage-ink);max-width:205px}
#assembly-open:disabled{visibility:hidden}
.open-icon{display:block;width:64px;height:64px;flex:none;border:1px solid var(--stage-line);border-radius:100%;text-align:center;font:21px/.8 Studio;padding-top:15px;transition:transform .6s}
#assembly-open:hover .open-icon{transform:rotate(90deg)}
.assembly-baseline{position:absolute;bottom:25px;left:4.5vw;right:4.5vw;border-top:1px solid var(--stage-line);padding-top:19px;display:flex;justify-content:space-between;align-items:center;z-index:4}
.assembly-baseline span{font:italic 19px Editorial}.assembly-baseline a{font:9px Mono}
.assembly-hero button:focus-visible,.assembly-hero a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.page-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(var(--page-progress,0));transform-origin:left;background:#395eff;z-index:100;pointer-events:none}
body[data-motion="on"] .assembly-heading h1{animation:assembly-title 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes assembly-title{from{opacity:.1;translate:0 25px}to{opacity:1;translate:0 0}}
body[data-motion="on"] section.director-entering{animation:chapter-arrive 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes chapter-arrive{from{opacity:.5;translate:0 28px}to{opacity:1;translate:0 0}}
body[data-motion="on"] .director-art{transform:translateY(var(--art-drift,0px));transition:transform .14s linear;will-change:transform}
@media(min-width:1550px){#assembly-art{top:340px}.assembly-heading{margin-top:50px}.heading-note{top:95px}}
@media(max-width:1050px){.heading-note{display:none}.assembly-heading h1{font-size:10vw}.assembly-footer{gap:24px}.assembly-intro p{font-size:14px}#assembly-open{max-width:140px}.assembly-project{padding-left:20px}.assembly-margin{display:none}}
@media(max-width:600px){
 .assembly-hero{height:auto;min-height:1080px;max-height:none;padding:90px 6vw 24px}
 .assembly-byline{font-size:7px;letter-spacing:.02em}.assembly-byline span:last-child{max-width:88px;text-align:right}
 .assembly-heading{margin-top:47px;text-align:left}
 .assembly-heading>.eyebrow{font-size:6.6px;letter-spacing:.02em}
 .assembly-heading h1{font-size:clamp(45px,11.6vw,70px);line-height:.98;letter-spacing:-.058em;margin-top:19px}
 #assembly-art{inset:285px -35vw auto;height:445px}
 .assembly-footer{position:relative;inset:auto;display:grid;grid-template-columns:1fr;gap:24px;margin-top:442px}
 .assembly-intro p{font-size:14px;max-width:100%;margin-bottom:12px}
 .assembly-cta{font-size:12px;min-height:42px}
 .assembly-project{padding:20px 0 0;border-left:0;border-top:1px solid var(--stage-line);max-width:none}
 .assembly-project-tabs button{font-size:22px;min-height:44px}
 .assembly-project p{max-width:240px}.assembly-project>.eyebrow{font-size:7px}
 #assembly-open{position:absolute;right:0;bottom:2px;max-width:92px;flex-direction:column;gap:7px;text-align:center;font-size:8px;min-height:100px}.open-icon{width:52px;height:52px;font-size:18px;padding-top:12px}
 .assembly-baseline{position:relative;inset:auto;margin-top:31px;padding-top:18px;gap:15px}.assembly-baseline span{font-size:16px}.assembly-baseline a{font-size:7px}
 body[data-motion="on"] .director-art{transform:none;will-change:auto}
}
body[data-motion="off"] .assembly-heading h1,body[data-motion="off"] section.director-entering{animation:none}
body[data-motion="off"] .director-art{transform:none;transition:none;will-change:auto}
@media(prefers-reduced-motion:reduce){.assembly-heading h1,section.director-entering{animation:none!important}.director-art{transform:none!important;transition:none!important}#assembly-art canvas,.assembly-fallback,.open-icon{transition:none}}
@media(min-width:601px){.assembly-hero{min-height:1120px}#assembly-art{top:350px;bottom:280px}}
@media(min-width:1550px){#assembly-art{top:400px}}

/* Right-hand sculpture, left-hand narrative. */
.assembly-project-tabs{flex-wrap:wrap;gap:3px 16px;max-width:370px}
.assembly-project-tabs button{font-size:17px;min-height:36px}
.assembly-project p{min-height:36px}
@media(min-width:901px){
 .assembly-hero{height:100svh;min-height:940px;max-height:1100px;background-position:65% 50%}
 .assembly-heading{margin:120px 0 0;width:43%;text-align:left}
 .assembly-heading h1{font-size:clamp(62px,6.1vw,100px);line-height:.98;letter-spacing:-.06em}
 .assembly-heading>.eyebrow{max-width:330px;line-height:1.7}
 .heading-note,.assembly-margin{display:none}
 #assembly-art{inset:125px -3vw 110px 37%;}
 .assembly-footer{display:block;position:static}
 .assembly-intro{position:absolute;left:4.5vw;top:560px;width:32%}
 .assembly-intro p{font-size:16px}
 .assembly-project{position:absolute;left:4.5vw;bottom:108px;width:340px;padding:0;border:0}
 #assembly-open{position:absolute;right:4.5vw;bottom:103px}
}
@media(min-width:1450px){.assembly-intro{top:620px}.assembly-heading{margin-top:135px}}
@media(max-width:600px){.assembly-project-tabs{max-width:240px;gap:3px 12px}.assembly-project-tabs button{font-size:17px;min-height:44px}.assembly-project p{max-width:225px}}

/* Shared material palette continues from the hero into the crossing. */
#bridge{background:radial-gradient(ellipse at 55% 48%,#deedf3 0%,#b9d7e7 48%,#9ec4db 100%);--ink:#123a53;--muted:#44697f;--line:#275b7d30}
:root[data-theme="dark"] #bridge{background:radial-gradient(ellipse at 54% 47%,#214a69 0%,#0c2d49 48%,#081f35 100%);--ink:#e0eef8;--muted:#a1bbcf;--line:#b5d2ee30}
#bridge .wide-art{height:clamp(380px,43vw,630px);margin:25px -3vw 0;position:relative}
#bridge .bridge-sculpture{position:absolute;inset:0;width:100%;height:100%;display:block}
#bridge [data-bridge-ready="true"]>canvas:not(.bridge-sculpture){visibility:hidden}
#bridge .scene-label{z-index:2;left:3vw;right:3vw;pointer-events:none}
#bridge .sequence{position:relative;z-index:2}
#bridge .stage-tabs button[aria-pressed="true"]{color:var(--ink)}
#bridge .stage-tabs button[aria-pressed="true"]:before{background:linear-gradient(90deg,#224cff,#83bed7)}
@media(max-width:600px){#bridge .wide-art{height:320px;margin:20px -24px 0}#bridge .scene-label{left:24px;right:24px;font-size:6px}}

/* Related washes and materials, with a different atmosphere for each chapter. */
.material-chapter{--ink:#163e55;--muted:#446b80;--accent:#2453d9;--signal:#c77950;--trace:#5998ac;--line:#2a5a7633;--bg:#b9d7e6;color:var(--ink);background:radial-gradient(ellipse at 65% 49%,#e0edf3 0%,#b9d7e6 52%,#9bc0d8 100%)}
.material-chapter:nth-of-type(3n){background:radial-gradient(ellipse at 64% 47%,#d8e6ef 0%,#b0c8dc 53%,#92acc8 100%)}
.material-chapter:nth-of-type(3n + 1){background:radial-gradient(ellipse at 62% 50%,#d9eeec 0%,#aecfd2 53%,#8fb7c2 100%)}
:root[data-theme="dark"] .material-chapter{--ink:#e0edf7;--muted:#a0bacb;--accent:#aac5ff;--signal:#eda271;--trace:#86c5cc;--line:#b7d8eb33;--bg:#0d2b44;color:var(--ink);background:radial-gradient(ellipse at 65% 49%,#214b69 0%,#0d2b44 54%,#091d30 100%)}
:root[data-theme="dark"] .material-chapter:nth-of-type(3n){background:radial-gradient(ellipse at 64% 47%,#343f66 0%,#1b2843 53%,#111c30 100%)}
:root[data-theme="dark"] .material-chapter:nth-of-type(3n + 1){background:radial-gradient(ellipse at 62% 50%,#234f58 0%,#102f3c 53%,#092331 100%)}
.material-chapter .chapter-head h2 em{color:var(--ink)}
.material-chapter .stage-tabs button[aria-pressed="true"]{color:var(--ink)}
.material-chapter .stage-tabs button[aria-pressed="true"]:before{background:linear-gradient(90deg,#3163f0,#c28d72)}
.material-chapter .product-window{border-color:#a3c4d777;box-shadow:0 18px 44px #0b244435,0 2px 0 #e9f6ff66;border-radius:13px;overflow:hidden;transform:perspective(1200px) rotateY(-3deg) rotateX(2deg)}
.material-chapter .product-window img{border-radius:0 0 12px 12px}
.material-chapter .value-caption,.material-chapter .quotation{border-color:var(--line)}
@media(prefers-reduced-motion:reduce){.material-chapter .product-window{transform:none}}

/* The oversized decorative stage must not intercept product tabs or links. */
.product-evidence > .scene{pointer-events:none}

/* The assembly occupies more of the hero, with copy around its upper-left edge. */
@media(min-width:901px){
 .assembly-hero{height:100svh;min-height:1000px;max-height:none}
 .assembly-heading{margin-top:75px;width:49%}.assembly-heading h1{font-size:clamp(65px,6.5vw,106px)}
 #assembly-art{inset:200px -15vw 105px 20%}
 .assembly-intro{top:auto;bottom:285px;width:27%;max-width:340px}.assembly-intro p{font-size:15px}
 .assembly-project{bottom:108px;max-width:350px}
}
@media(max-width:600px){
 .semantic-art.editorial-art,.semantic-art.wide-art{margin:25px -12px 15px}.meaning-stage{width:100%}.meaning-stage svg{min-height:210px}.meaning-kicker{font-size:7px;padding:0 12px}.meaning-note{font-size:12px;padding:0 20px;margin:0 auto 21px;max-width:340px}
 #values .value-world>.scene{min-height:0;margin:15px -18px 0}#values .meaning-note{font-size:11px}#values .value-caption{padding:0}
 #voices .voices-layout{display:flex;gap:14px}#voices .voice-illustration{width:100%;margin:5px 0}#voices .meaning-stage svg{width:100%;margin:0;min-height:220px}#voices .quotation blockquote{font-size:28px;min-height:0}
 #route .career-timeline{margin-top:30px}.timeline-tools{font-size:7px}.timeline-tools button{width:40px;height:40px}.timeline-track{--card-width:calc(100% - 20px);gap:18px}.career-card{padding:25px;min-height:430px}.career-dot:after{width:190px}.career-card strong{font-size:27px}.career-date{font-size:40px}
 #assembly-art{inset:280px -35vw auto;height:510px}.assembly-footer{margin-top:515px}
}
@media(prefers-reduced-motion:reduce){.meaning-state,.career-card{transition:none!important}.meaning-stage *{animation:none!important}}
@media(min-width:901px){.assembly-heading{width:65%}.assembly-heading h1{font-size:clamp(62px,5.4vw,90px);line-height:1.02}#assembly-art{right:-6vw}}
/* Working Landscape — one material language, readable copy outside the sculpture. */
.landscape-art>.art-aside,.landscape-art>.scene-label{display:none}
.landscape-art{height:clamp(370px,39vw,600px);margin:18px 0 0}
body[data-motion="on"] .landscape-art{transform:none!important;will-change:auto}
.landscape-scroll{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;overscroll-behavior-x:contain;margin:10px -2vw 0}
#route .landscape-art{width:100%;min-width:1050px;height:540px;margin:0}
#route [data-for="route"]{display:block;border-top:0}
#route [data-for="route"] .stage-tabs{display:none}
#route .stage-detail{padding-top:20px;min-height:130px}
.landscape-dates{position:absolute;inset:0;pointer-events:none}
.landscape-date{position:absolute;transform:translateX(-50%);min-width:125px;text-align:left;pointer-events:auto;display:flex;flex-direction:column;gap:6px;padding:10px 9px;font-size:15px;line-height:1.25;opacity:.7}
.landscape-date span{font-family:Mono;font-size:12px}.landscape-date strong{font-weight:500;white-space:nowrap}.landscape-date[aria-pressed="true"]{opacity:1;color:var(--ink)}.landscape-date[aria-pressed="true"] span{color:var(--accent)}
.landscape-navigation{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:6px 0 14px;color:var(--muted);font:9px Mono;letter-spacing:.08em}
.landscape-navigation>div{display:flex;gap:10px}.landscape-navigation button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;font:24px Studio}.landscape-navigation button:disabled{opacity:.3}
#systems .stage-copy>.text-link{display:inline-flex;margin-top:15px}
#values .value-world>.landscape-art{height:350px;margin:0}#voices .voice-illustration.landscape-art{height:380px}
.product-evidence{padding:44px 32px 28px!important;isolation:isolate;min-height:490px}
.product-evidence>.scene{inset:0!important;width:100%!important;height:100%!important;z-index:-1;opacity:.55}
.material-chapter .product-window{position:relative;width:100%;max-width:700px;margin:0 auto;border:9px solid #193c66;border-bottom-width:18px;border-radius:16px;transform:perspective(1600px) rotateY(-4deg);box-shadow:0 3px 0 #d7966e,0 20px 40px #183d7040}
.material-chapter .product-window img{display:block;max-height:470px;width:100%;object-fit:contain;background:#15334f;border-radius:0}
.product-evidence>p{position:relative;text-align:center;margin-top:32px!important;line-height:1.6}
@media(max-width:900px){.landscape-art{height:420px}#route .landscape-art{height:500px}.product-evidence{min-height:340px;padding:35px 24px 25px!important}}
@media(max-width:600px){.landscape-art{height:310px;margin:10px -12px 0}.landscape-scroll{margin:15px -24px 0}#route .landscape-art{min-width:1050px;height:480px}#route .landscape-navigation{font-size:8px}.landscape-date{font-size:14px}#values .value-world>.landscape-art{height:280px;margin:5px -18px 0}#voices .voice-illustration.landscape-art{height:270px}#voices .voices-layout{gap:12px}.product-evidence{margin:0 -10px;min-height:260px;padding:30px 20px 20px!important}.material-chapter .product-window{border-width:6px;border-bottom-width:12px;border-radius:12px}.material-chapter .product-window img{max-height:300px}.product-evidence>p{font-size:7px;margin-top:24px!important}#method .landscape-art{height:300px}}
@media(min-width:901px){#route .chapter-head{display:block}#route .chapter-head>.eyebrow{margin-bottom:24px}#route .chapter-head h2{font-size:clamp(62px,6.1vw,94px)}#route .landscape-art{min-width:0;height:clamp(450px,44vw,620px)}#route .landscape-scroll{margin-top:-12px}.landscape-date{font-size:clamp(12px,1.25vw,17px);min-width:100px}.landscape-date span{font-size:clamp(10px,1vw,13px)}}
.landscape-caption{position:absolute;bottom:22px;left:7%;right:7%;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font:11px Mono;line-height:1.5;pointer-events:none}.landscape-caption span{max-width:30%;text-align:center}.landscape-caption span:first-child{text-align:left}.landscape-caption span:last-child{text-align:right}
@media(min-width:901px){.landscape-date{font-size:14px}.landscape-date span{font-size:12px}}
#route.material-chapter{background:radial-gradient(ellipse at 65% 49%,#d9eaf3 0%,#b7d4e7 52%,#98bfd8 100%)}
:root[data-theme="dark"] #route.material-chapter{background:radial-gradient(ellipse at 65% 49%,#214b69 0%,#0d2b44 54%,#091d30 100%)}
@media(max-width:600px){.landscape-caption{font-size:8px;bottom:18px;left:5%;right:5%;gap:10px}}
@media(min-width:901px){#voices .voices-layout{grid-template-columns:42% 1fr;gap:5%}#voices .voice-illustration.landscape-art{height:420px}}
@media(min-width:901px){#route .landscape-scroll{margin-top:12px}}
@media(max-width:900px){#route .landscape-art{height:540px}}
/* Product evidence and sculpture each have a visible place: screen above, open stage below. */
.product-evidence{display:flex;flex-direction:column;min-height:0!important;padding:20px 12px 0!important;gap:0}
.product-evidence>.scene{position:relative!important;inset:auto!important;order:2;z-index:0;opacity:1;width:100%!important;height:240px!important;margin:-80px 0 0!important}
.material-chapter .product-window{order:1;width:92%;max-width:650px;margin:0 auto;z-index:1;transform:perspective(1600px) rotateY(-3deg);border-width:7px;border-bottom-width:12px}
.product-evidence>p{order:3;margin:0 0 20px!important}
@media(max-width:600px){.product-evidence{padding:15px 0 0!important;margin:0}.product-evidence>.scene{height:175px!important;margin:-55px 0 0!important}.material-chapter .product-window{width:100%;border-width:5px;border-bottom-width:9px}.product-evidence>p{margin:0 0 15px!important}}
#curve .chart-hint{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:var(--muted);font:10px Mono;letter-spacing:.035em;pointer-events:none}
#curve canvas:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}
@media(max-width:600px){#curve .chart-hint{font-size:8px;bottom:6px}}
/* Settle at chapter boundaries; oversized chapters retain their natural reading scroll. */
:root{--chapter-nav-height:72px;scroll-snap-type:y mandatory;scroll-padding-top:var(--chapter-nav-height)}
main>section{scroll-snap-align:start;scroll-snap-stop:always}
main>.chapter{min-height:calc(100svh - var(--chapter-nav-height))}
@media(max-width:600px){:root{--chapter-nav-height:64px}}

/* One continuous atmospheric field, shared by every chapter. */
body{isolation:isolate;background:#b9d3e2}
:root[data-theme="dark"] body{background:#0d263b}
#fluid-background{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
html body main>section{background:transparent!important}
.site-nav{background:color-mix(in srgb,var(--bg) 84%,transparent)}
@media print{#fluid-background{display:none}html body main>section{background:white!important}}
.material-chapter .product-window img[src$="charter-schedule.png"]{aspect-ratio:auto;height:auto;max-height:none}

/* Expand the drawing surface without shrinking the sculpture to the old canvas rectangle. */
#assembly-art{contain:layout;overflow:visible}
@media(min-width:901px){
 .assembly-hero{min-height:max(1000px,100svh,var(--assembly-required-height,0px))}
 #assembly-art{bottom:auto;height:calc(max(1000px,100svh) - 305px)}
}

@media(min-width:901px){
 .assembly-intro{bottom:calc(100% - max(1000px,100svh) + 285px)}
 .assembly-project{bottom:calc(100% - max(1000px,100svh) + 108px)}
}
