/* The opening's visual language carries through every chapter. */
:root{--display:"Jost","Helvetica Neue",sans-serif;--mono:"Jost","Helvetica Neue",sans-serif;--muted:#b8b5ad;--line:rgba(240,238,230,.23)}
.scene:not(.scene--hero)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:url("diagonal-screen.svg") repeat 0 0 / 4px 4px;opacity:.75}
.scene{background-color:#111315}
.scene__background img{width:100%;height:100%;object-fit:cover}
.scene h2{font-family:var(--display);font-size:clamp(29px,2.55vw,39px);font-weight:300;line-height:1.35;letter-spacing:.065em;text-transform:uppercase}
.scene h3{font-family:var(--display);font-size:16px;font-weight:400;letter-spacing:.065em;text-transform:uppercase;line-height:1.45}
.eyebrow,.edition,.detail-label{font-size:10px;letter-spacing:.22em}
.scene .lead,.scene .intro{font-style:italic;font-size:18px;line-height:1.65;color:#e0ddd6}
.scene .small{color:var(--muted)}
.scene-next{color:#c5c1b7;letter-spacing:.2em;font-size:10px}
.chapters a{font-size:12px}.chapters i{font-size:9px;letter-spacing:.14em}
.link-action,.quiet-link{font-size:12px;letter-spacing:.12em}
.section-top{margin-bottom:28px}
/* The case is deliberately typographic: outcomes and the actual operation. */
.scene--gia{background:radial-gradient(ellipse at 75% 45%,#242421,#111315 75%)}
.project-name{font-family:var(--display);font-weight:300;letter-spacing:.14em;font-size:100px;line-height:1;margin-bottom:20px}
.gia-watermark{font-family:var(--display);font-weight:300;letter-spacing:.12em;color:rgba(240,238,230,.026)}
.case-intro h2{font-size:clamp(27px,2.2vw,34px)}
.case-intro>p:not(.project-name){color:#d4d1ca}
.metrics dd{font-family:var(--display);font-size:clamp(32px,3.15vw,48px);font-weight:300;letter-spacing:.015em;line-height:1.25}
.metrics dt{font-style:italic;color:#d4d1ca;font-size:15px}
.case-details p{color:#c9c5bd}.case-details .detail-label{color:#83bbc3}
/* Two supplied pairs of images become full-screen process and author scenes. */
.scene--process .scene__background img{object-position:36% 50%}
.scene--process .scene__shade{background:linear-gradient(90deg,rgba(9,11,13,.22),rgba(9,11,13,.3) 33%,rgba(9,11,13,.88) 59%,rgba(9,11,13,.95)),linear-gradient(0deg,rgba(9,11,13,.7),transparent 35%)}
.scene--process .split-layout{display:block}
.process-copy{width:49%;margin-left:auto}
.process-copy h2{font-size:clamp(28px,2.45vw,37px)}
.process-copy .lead{font-size:17px}
.process-list{margin-top:28px}.process-list li{padding:17px 0}.process-list li>span{color:#c8a58c}
.process-list p{color:#d0ccc5;font-size:14px;line-height:1.65}
.scene--author .scene__background img{object-position:35% 45%}
.scene--author .scene__shade{background:linear-gradient(90deg,rgba(9,11,13,.14),rgba(9,11,13,.25) 35%,rgba(9,11,13,.9) 58%,rgba(9,11,13,.96)),linear-gradient(0deg,rgba(9,11,13,.65),transparent 40%)}
.author-grid{display:block}
.author-copy{width:49%;margin-left:auto}
.author-copy h2{font-size:clamp(28px,2.4vw,37px)}
.author-copy p:not(.eyebrow){font-size:15px;line-height:1.7;color:#d6d2cb}
.author-copy p:nth-of-type(2){font-style:italic;font-size:18px;line-height:1.6}
.trajectory{width:100%;max-width:none;margin-top:24px}
.trajectory figcaption{font-size:9px}
/* Transparent atelier drawings sit directly on the dark scene. */
.scene--system{background:#141719}
.scene--system .scene__content{max-width:1050px}
.centered-content .intro{max-width:70ch}
.stage-art{margin:26px auto 20px;max-width:1000px}
.stage-art .diagram-scroll{background:transparent;padding:0}
.stage-art img{min-width:740px}
.stage-art figcaption,.operation-art figcaption{font-size:10px;letter-spacing:.08em;color:#bbb7af}
.application-note{font-style:italic;color:#c7c3bb;line-height:1.7;font-size:15px}
.application-note strong{color:#eeece3;font-weight:500}
.scene--architecture{background:radial-gradient(ellipse at 70% 50%,#25282a,#121416 80%)}
.architecture-grid{grid-template-columns:.9fr 1.2fr;gap:4vw}
.architecture-grid h2{font-size:clamp(28px,2.4vw,36px)}
.architecture-grid p:not(.eyebrow){font-size:16px;color:#d3cfc7;line-height:1.7}
.architecture-grid p:nth-of-type(2){font-style:italic}
.architecture-grid .eyebrow{font-size:10px;font-style:normal;color:var(--muted)}
.principle{font-size:11px;letter-spacing:.16em;line-height:2.2;border-color:#b79780}
/* Human judgment remains a calm, readable chapter in the same dark palette. */
.scene--human{background:radial-gradient(ellipse at 25% 60%,#282622,#111315 80%)}
.human-grid>div>p:not(.eyebrow){color:#d3cfc7;font-size:16px;line-height:1.7}
.human-grid>div>p.lead{font-size:18px;font-style:italic}
.human-list li{padding:23px 0}.human-list li>span{color:#c8a58c}
.human-list p{color:#ccc8c0;line-height:1.65}
.human-detail{position:relative;height:180px;filter:saturate(.7)}
.human-detail::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("diagonal-screen.svg") repeat 0 0 / 4px 4px}
/* Product and closing chapters share the same type, rhythm and materials. */
.scene--agentflix{background:radial-gradient(ellipse at 65% 45%,#1d2a2d,#111517 75%)}
.scene--agentflix .intro{font-style:italic;font-size:18px}
.audiences h3{font-size:17px}.audiences span{font-size:10px;letter-spacing:.06em}
.lab-note{grid-template-columns:145px 1fr}.lab-note p{font-size:14px;color:#bbb7af}
.scene--contact .scene__shade{background:linear-gradient(90deg,#111315 27%,rgba(17,19,21,.92) 46%,rgba(17,19,21,.3) 85%),linear-gradient(0deg,rgba(17,19,21,.8),transparent 35%)}
.contact-content h2{font-size:clamp(32px,3.1vw,46px);line-height:1.35}
.contact-content>p:not(.eyebrow):not(.availability):not(.location){font-style:italic;font-size:18px;color:#dedad2}
.editorial-links a{font-size:10px;letter-spacing:.12em}.contact-content .location{font-size:10px;letter-spacing:.08em}
.site-menu{background:#111315}
.site-menu nav a{font-family:var(--display);font-size:clamp(24px,2.5vw,37px);font-weight:300;letter-spacing:.08em;text-transform:uppercase;padding:24px 0}
@media(min-width:1000px) and (max-height:800px){
 .scene h2{font-size:30px}.case-intro h2{font-size:26px}.project-name{font-size:72px}
 .metrics dd{font-size:38px}.scene .intro{font-size:16px}
 .process-copy .lead{font-size:15px}.process-list li{padding:11px 0}.process-list{margin-top:20px}
 .process-list p{font-size:13px}.stage-art{max-width:860px;margin-top:20px}.stage-art .diagram-scroll{padding:0}
 .human-list li{padding:16px 0}.human-detail{height:125px}
 .author-copy p:not(.eyebrow){font-size:14px}.author-copy p:nth-of-type(2){font-size:16px}.trajectory{margin-top:20px}
 .scene--agentflix .intro{font-size:16px}.contact-content h2{font-size:35px}
}
@media(max-width:1100px) and (min-width:1000px){.process-copy,.author-copy{width:54%}.scene h2{font-size:29px}.metrics dd{font-size:32px}}
@media(max-width:999px){
 .scene h2{font-size:31px}.scene .intro{font-size:17px}
 .process-copy,.author-copy{width:65%}
 .scene--process .scene__shade,.scene--author .scene__shade{background:linear-gradient(90deg,rgba(9,11,13,.32),rgba(9,11,13,.86) 45%,rgba(9,11,13,.96))}
 .scene--process .scene__background img{object-position:32% 30%}.scene--author .scene__background img{object-position:30% 30%}
 .architecture-grid{grid-template-columns:1fr}.operation-art{max-width:760px}
 .metrics dd{font-size:34px}.project-name{font-size:80px}
 .human-grid{gap:35px}.human-list li{padding:19px 0}
 .author-copy p:nth-of-type(2){font-size:17px}
 .scene--contact .scene__shade{background:linear-gradient(90deg,#111315,rgba(17,19,21,.88) 45%,rgba(17,19,21,.4))}
}
@media(max-width:640px){
 .scene h2{font-size:27px;line-height:1.4;letter-spacing:.045em}.scene h3{font-size:15px}
 .scene .intro,.scene .lead{font-size:16px}.eyebrow,.edition,.detail-label{font-size:9px}
 .scene-next{font-size:9px}.case-intro h2{font-size:27px}.project-name{font-size:78px}
 .metrics dd{font-size:36px}.metrics dt{font-size:15px}.case-details{margin-top:28px}
 .scene--process .scene__background,.scene--author .scene__background{height:680px}
 .scene--process .scene__background img{object-position:50% 36%}.scene--author .scene__background img{object-position:50% 30%}
 .scene--process .scene__shade,.scene--author .scene__shade{background:linear-gradient(180deg,rgba(17,19,21,.12) 0,rgba(17,19,21,.15) 260px,rgba(17,19,21,.88) 510px,#111315 680px)}
 .scene--process .scene__scroll,.scene--author .scene__scroll{padding-top:445px}
 .process-copy,.author-copy{width:100%;margin:0}
 .process-list li{padding:18px 0}.process-list p{font-size:14px}.process-copy .lead{font-size:16px}
 .stage-art .diagram-scroll{padding:0}.stage-art{margin-top:24px}
 .stage-art figcaption,.operation-art figcaption{font-size:9px}
 .application-note{font-size:14px}.architecture-grid p:not(.eyebrow){font-size:15px}
 .human-grid>div>p.lead{font-size:16px}.human-grid>div>p:not(.eyebrow){font-size:15px}
 .human-detail{height:205px}.human-list li{padding:20px 0}
 .author-copy p:not(.eyebrow){font-size:15px}.author-copy p:nth-of-type(2){font-size:17px}
 .scene--agentflix .intro{font-size:16px}.audiences h3{font-size:15px}.audiences span{font-size:9px}
 .lab-note{grid-template-columns:1fr}.lab-note p{font-size:13px}
 .scene--contact .scene__shade{background:linear-gradient(180deg,rgba(17,19,21,.25),rgba(17,19,21,.9) 43%,#111315)}
 .contact-content h2{font-size:32px}.contact-content>p:not(.eyebrow):not(.availability):not(.location){font-size:16px}
 .link-action,.quiet-link{font-size:10px}.site-menu nav a{font-size:24px;padding:19px 0}
}
@media print{.scene:not(.scene--hero)::after,.human-detail::after{display:none}.scene p,.scene h2,.scene h3,.metrics dt,.metrics dd,.application-note strong{color:#111!important}.process-copy,.author-copy{width:100%}.scene--process .scene__scroll,.scene--author .scene__scroll{padding-top:30px}}
@media(min-width:641px) and (max-width:999px){
 .scene--process .scene__background,.scene--author .scene__background{width:52%}
 .scene--process .scene__background img,.scene--author .scene__background img{object-position:50% 35%}
 .scene--process .scene__shade,.scene--author .scene__shade{background:linear-gradient(90deg,rgba(17,19,21,.15),rgba(17,19,21,.28) 28%,rgba(17,19,21,.88) 47%,#111315 58%)}
}

/* The closing signature lives in the content, with the portrait at right. */
body .masthead[data-scene="conversa"]{background:none}
.masthead[data-scene="conversa"] .brand{visibility:hidden;pointer-events:none}
@media(min-width:1000px){
 .scene--contact .scene__background{width:38%;right:0;object-position:50% 25%}
 .scene--contact .scene__shade{background:linear-gradient(90deg,#111315 58%,rgba(17,19,21,.5) 70%,rgba(17,19,21,.15)),linear-gradient(0deg,rgba(17,19,21,.7),transparent 35%)}
}

/* Fit the complete System drawing into the remaining scene height. */
.scene--system .stage-art{width:100%;max-width:850px;margin:20px auto 0}
.scene--system .stage-art img{min-width:0}
.deck-mode .scene--system .scene__content{height:100%;display:flex;flex-direction:column;align-items:center}
.deck-mode .scene--system .eyebrow,.deck-mode .scene--system h2,.deck-mode .scene--system .intro{flex-shrink:0}
.deck-mode .scene--system .stage-art{flex:1;min-height:0}
.deck-mode .scene--system .diagram-scroll{height:100%}
.deck-mode .scene--system .stage-art img{height:100%;object-fit:contain}

/* The supplied group portrait fills the Human chapter. */
.scene--human .scene__background{object-position:65% 50%}
.scene--human .scene__shade{background:linear-gradient(90deg,rgba(9,11,13,.72),rgba(9,11,13,.62) 45%,rgba(9,11,13,.76)),linear-gradient(0deg,rgba(9,11,13,.35),transparent 35%)}
@media(max-width:640px){
 .scene--human .scene__background{object-position:67% 50%}
 .scene--human .scene__shade{background:rgba(9,11,13,.8)}
}